fix: clone and copy styles (#184)

importer-guidelines.md

@@ -688,3 +688,16 @@ The code above forces the import process to wait for the DOM element with CSS cl
 Firing an error is one way of defining the page has a problem (maybe it is different ?). The error message will appear in the report and can be reviewed afterward. But it is not required. If it is fine for the page to not have the element, you can just log an error or do nothing.
 
 Note: calling `WebImporter.Loader.waitForElement` in the `transformDOM` or `transform` function would be useless - the execution context is different, the DOM is frozen and does not change anymore.
+
+### Styles
+
+By default, the importer does not deal with styles: CSS files are removed and only inline styles might be available during the transformation phase (on the DOM element of the document in the `preprocess`, `transform` or `transformDOM` function). Only exception is the `background-image` (computed) style which is inlined in the DOM so that, if useful, the background images can be converted into `img` elements and inserted into the DOM to become part of the content.
+If necessary, the list of style elements that are inlined by the importer before the transformation phase can be overriden in `import.js` via the `REQUIRED_STYLES` array. Here an example reproducing the default behavior:
+
+```js
+export default {
+  REQUIRED_STYLES: ['background-image'],
+};
+```
+
+Just add the extra styles you need to perform your transformation.

js/shared/pollimporter.js

@@ -11,6 +11,31 @@
  */
 /* global WebImporter */
 
+const DEFAULT_SUPPORTED_STYLES = ['background-image'];
+
+function deepCloneWithStyles(document, styles = DEFAULT_SUPPORTED_STYLES) {
+  const clone = document.cloneNode(true);
+
+  const applyStyles = (nodeSrc, nodeDest) => {
+    const style = window.getComputedStyle(nodeSrc, null);
+
+    styles.forEach((styleName) => {
+      if (style[styleName]) {
+        nodeDest.style[styleName] = style[styleName];
+      }
+    });
+
+    if (nodeSrc.children && nodeSrc.children.length > 0) {
+      const destChildren = [...nodeDest.children];
+      [...nodeSrc.children].forEach((child, i) => {
+        applyStyles(child, destChildren[i]);
+      });
+    }
+  };
+  applyStyles(document.body, clone.body);
+  return clone;
+}
+
 export default class PollImporter {
   constructor(cfg) {
     this.config = {
@@ -113,10 +138,13 @@ export default class PollImporter {
     console.log(`Starting transformation of ${url} with import file: ${this.projectTransformFileURL || 'none (default)'}`);
     try {
       let results;
+
+      const documentClone = deepCloneWithStyles(document, this.projectTransform?.REQUIRED_STYLES);
+
       if (includeDocx) {
         const out = await WebImporter.html2docx(
           url,
-          document.cloneNode(true),
+          documentClone,
           this.projectTransform,
           params,
         );
@@ -129,7 +157,7 @@ export default class PollImporter {
       } else {
         const out = await WebImporter.html2md(
           url,
-          document.cloneNode(true),
+          documentClone,
           this.projectTransform,
           params,
         );