Added prepublish checks inside of plugin side panel. Changed highlighting styles.
The changes were mainly done to the siteimprove.js
file, changing the way it grabs the DOM to be checked for issues. This implementation was copied and adjusted from the Wordpress plugin implementation, ensuring it works the same way (keeping consistency). One important note to make is the removal of the document.cloneNode(true)
which, even though it creates a clone of the document, it doesn't always keep the correct stylings on the DOM that is sent to be checked for issues. To work around this, we create an hidden iframe that loads the same page we are on, clears the contents of the Drupal specific elements (toolbars, etc...) and SI Plugin specific elements (side widget and iframe) without removing the elements itself (otherwise it would break the DOM structure) and uses the DOM from this iframe instead. This ensures that the DOM we are running the checks against is the correct one.
Something else worth noting is the images (on Drupal, the img src is a relative path). The internal tools from Siteimprove that render the previews to run the checks on cannot access these images if they are relative paths, so this change adds some methods that converts all relative links to absolute links for the images.