@adobe/helix-importer 1.0.0 → 1.2.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [1.2.1](https://github.com/adobe/helix-importer/compare/v1.2.0...v1.2.1) (2022-01-25)
+
+
+### Bug Fixes
+
+* export MemoryHandler ([#12](https://github.com/adobe/helix-importer/issues/12)) ([3a83a16](https://github.com/adobe/helix-importer/commit/3a83a1620b0eb4752698ee9b994e8b0fd7ce085f))
+
+# [1.2.0](https://github.com/adobe/helix-importer/compare/v1.1.0...v1.2.0) (2022-01-20)
+
+
+### Features
+
+* export new Blocks helper ([#7](https://github.com/adobe/helix-importer/issues/7)) ([0d7bfa7](https://github.com/adobe/helix-importer/commit/0d7bfa7bd7a98a6fb19f6aec6f8e29be0549e53e))
+
+# [1.1.0](https://github.com/adobe/helix-importer/compare/v1.0.0...v1.1.0) (2022-01-20)
+
+
+### Features
+
+* backport helpers from project into library ([#5](https://github.com/adobe/helix-importer/issues/5)) ([3c93126](https://github.com/adobe/helix-importer/commit/3c931269be98b1accfcc983d19bb7a5abdb6e36a))
+
 # 1.0.0 (2022-01-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-importer",
-  "version": "1.0.0",
+  "version": "1.2.1",
   "description": "Helix Importer tool: create md / docx from html",
   "main": "src/index.js",
   "type": "module",
@@ -10,37 +10,53 @@
   },
   "scripts": {
     "lint": "eslint .",
-    "test": "mocha test/**/*.spec.js",
-    "semantic-release": "semantic-release"
+    "test": "c8 mocha",
+    "test-ci": "c8 mocha && codecov",
+    "semantic-release": "semantic-release",
+    "prepare": "npx husky install"
+  },
+  "mocha": {
+    "recursive": "true",
+    "spec": "test/**/*.spec.js",
+    "reporter": "mocha-multi-reporters",
+    "reporter-options": "configFile=.mocha-multi.json"
+  },
+  "lint-staged": {
+    "*.js": "eslint"
   },
   "devDependencies": {
     "@adobe/eslint-config-helix": "1.3.2",
-    "@adobe/helix-docx2md": "1.0.5",
-    "@adobe/helix-mediahandler": "1.0.1",
+    "@adobe/helix-docx2md": "1.0.6",
+    "@adobe/helix-mediahandler": "1.0.2",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "eslint": "8.6.0",
+    "eslint": "8.7.0",
     "eslint-plugin-header": "3.1.1",
     "eslint-plugin-import": "2.25.4",
-    "mocha": "9.1.3",
-    "mock-fs": "4.13.0",
-    "semantic-release": "18.0.1"
+    "mocha": "9.2.0",
+    "mock-fs": "5.1.2",
+    "c8": "7.11.0",
+    "codecov": "3.8.3",
+    "husky": "7.0.4",
+    "lint-staged": "12.3.1",
+    "mocha-multi-reporters": "1.5.1",
+    "semantic-release": "19.0.2"
   },
   "author": "",
   "license": "Apache-2.0",
   "dependencies": {
-    "@adobe/helix-md2docx": "1.1.0",
+    "@adobe/helix-md2docx": "1.2.2",
     "form-data": "4.0.0",
-    "fs-extra": "9.0.1",
+    "fs-extra": "10.0.0",
     "hast-util-to-html": "8.0.3",
     "hast-util-to-mdast": "8.3.0",
-    "jsdom": "16.4.0",
-    "node-fetch": "2.6.1",
-    "rehype-parse": "7.0.1",
-    "rehype-remark": "8.0.0",
-    "remark-stringify": "8.1.1",
+    "jsdom": "19.0.0",
+    "node-fetch": "3.2.0",
+    "rehype-parse": "8.0.3",
+    "rehype-remark": "9.1.2",
+    "remark-stringify": "10.0.2",
     "sanitize-filename": "1.6.3",
-    "unified": "9.2.0"
+    "unified": "10.1.1"
   }
 }

package/src/importer/PageImporter.js

@@ -15,7 +15,7 @@
 import { JSDOM } from 'jsdom';
 
 import path from 'path';
-import unified from 'unified';
+import { unified } from 'unified';
 import parse from 'rehype-parse';
 import { toHtml } from 'hast-util-to-html';
 import rehype2remark from 'rehype-remark';
@@ -50,7 +50,7 @@ export default class PageImporter {
     const { name } = resource;
     const { directory } = resource;
     const sanitizedName = FileUtils.sanitizeFilename(name);
-    this.logger.log(`Computing Markdonw for ${directory}/${sanitizedName}`);
+    this.logger.log(`Computing Markdown for ${directory}/${sanitizedName}`);
 
     const processor = unified()
       .use(parse, { emitParseErrors: true })
@@ -73,36 +73,36 @@ export default class PageImporter {
       .use(() => {
         // use custom tag and rendering because text is always encoded by default
         // we need the raw url
-        processor.Compiler.prototype.visitors.hlxembed = (node) => node.value;
+        // processor.Compiler.prototype.visitors.hlxembed = (node) => node.value;
       })
       .use(() => {
-        processor.Compiler.prototype.visitors.table = (node) => node.value;
+        // processor.Compiler.prototype.visitors.table = (node) => node.value;
       })
       .use(() => {
-        processor.Compiler.prototype.visitors.u = (node) => {
-          // u handling: remove the u is the first element is a link
-          if (node.children && node.children.length > 0) {
-            const children = node.children.map((child) => processor.stringify(child));
-            if (node.children[0].type === 'link') {
-              // first element in the <u> is a link: remove the <u> - unsupported case
-              return `${children.join()}`;
-            }
-            return `<u>${children.join()}</u>`;
-          }
-          return '';
-        };
+        // processor.Compiler.prototype.visitors.u = (node) => {
+        //   // u handling: remove the u is the first element is a link
+        //   if (node.children && node.children.length > 0) {
+        //     const children = node.children.map((child) => processor.stringify(child));
+        //     if (node.children[0].type === 'link') {
+        //       // first element in the <u> is a link: remove the <u> - unsupported case
+        //       return `${children.join()}`;
+        //     }
+        //     return `<u>${children.join()}</u>`;
+        //   }
+        //   return '';
+        // };
       })
       .use(() => {
-        const originalEmphasis = processor.Compiler.prototype.visitors.emphasis;
-        processor.Compiler.prototype.visitors.emphasis = (node) => {
-          // @ts-ignore
-          const ori = originalEmphasis.apply(processor.Compiler(), [node]);
-          return ori;
-        };
+        // const originalEmphasis = processor.Compiler.prototype.visitors.emphasis;
+        // processor.Compiler.prototype.visitors.emphasis = (node) => {
+        //   // @ts-ignore
+        //   const ori = originalEmphasis.apply(processor.Compiler(), [node]);
+        //   return ori;
+        // };
       });
 
     const file = await processor.process(resource.document.innerHTML);
-    let contents = file.contents.toString();
+    let contents = String(file);
 
     // process image links
     const { document } = resource;

package/src/index.js

@@ -17,7 +17,9 @@ import PageImporterParams from './importer/PageImporterParams.js';
 import PageImporterResource from './importer/PageImporterResource.js';
 
 import FSHandler from './storage/FSHandler.js';
+import MemoryHandler from './storage/MemoryHandler.js';
 
+import Blocks from './utils/Blocks.js';
 import CSV from './utils/CSV.js';
 import DOMUtils from './utils/DOMUtils.js';
 import FileUtils from './utils/FileUtils.js';
@@ -35,6 +37,8 @@ export {
   PageImporterParams,
   PageImporterResource,
   FSHandler,
+  MemoryHandler,
+  Blocks,
   CSV,
   DOMUtils,
   FileUtils,

package/src/utils/Blocks.js

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import DOMUtils from './DOMUtils.js';
+
+const DEFAULT_COLSPAN = 2;
+
+export default class Blocks {
+  static getMetadataBlock(document, metadata) {
+    const table = document.createElement('table');
+
+    let row = document.createElement('tr');
+    table.append(row);
+
+    const hCell = document.createElement('th');
+    row.append(hCell);
+
+    hCell.innerHTML = 'Metadata';
+    hCell.setAttribute('colspan', DEFAULT_COLSPAN);
+
+    // eslint-disable-next-line no-restricted-syntax, guard-for-in
+    for (const key in metadata) {
+      row = document.createElement('tr');
+      table.append(row);
+      const keyCell = document.createElement('td');
+      row.append(keyCell);
+      keyCell.textContent = key;
+      const valueCell = document.createElement('td');
+      row.append(valueCell);
+      const value = metadata[key];
+      if (value) {
+        if (Array.isArray(value)) {
+          let list = '';
+          value.forEach((v) => {
+            // p tags in table are stripped out
+            // list must receive special hlx_replaceTag command to be post-processed
+            list += `hlx_replaceTag(p)${v}hlx_replaceTag(/p)`;
+          });
+          valueCell.textContent = list;
+        } else if (typeof value === 'string') {
+          valueCell.textContent = value;
+        } else {
+          valueCell.append(value);
+        }
+      }
+    }
+
+    return table;
+  }
+
+  static computeBlockName(str) {
+    return str
+      .replace(/-/g, ' ')
+      .replace(/\s(.)/g, (s) => s.toUpperCase())
+      .replace(/^(.)/g, (s) => s.toUpperCase());
+  }
+
+  static convertBlocksToTables(element, document) {
+    element.querySelectorAll('main > div:nth-child(4) > div[class]').forEach((block) => {
+      const name = Blocks.computeBlockName(block.className);
+      const data = [[name]];
+      const divs = block.querySelectorAll(':scope > div');
+      if (divs) {
+        divs.forEach((div) => {
+          const subDivs = div.querySelectorAll(':scope > div');
+          if (subDivs && subDivs.length > 0) {
+            const rowData = [];
+            subDivs.forEach((cell) => {
+              if (cell.nodeName === 'DIV') {
+                // remove transparent divs
+                const cellContent = [];
+                Array.from(cell.childNodes).forEach((c) => cellContent.push(c));
+                rowData.push(cellContent);
+              } else {
+                rowData.push(cell);
+              }
+            });
+            data.push(rowData);
+          } else {
+            data.push([div.innerHTML]);
+          }
+        });
+      }
+      const table = DOMUtils.createTable(data, document);
+      block.replaceWith(table);
+    });
+  }
+}

package/src/utils/DOMUtils.js

@@ -162,6 +162,31 @@ export default class DOMUtils {
     });
   }
 
+  static createTable(data, document) {
+    const table = document.createElement('table');
+
+    data.forEach((row, index) => {
+      const tr = document.createElement('tr');
+
+      row.forEach((cell) => {
+        const t = document.createElement(index === 0 ? 'th' : 'td');
+        if (typeof cell === 'string') {
+          t.innerHTML = cell;
+        } else if (Array.isArray(cell)) {
+          cell.forEach((c) => {
+            t.append(c);
+          });
+        } else {
+          t.append(cell);
+        }
+        tr.appendChild(t);
+      });
+      table.appendChild(tr);
+    });
+
+    return table;
+  }
+
   static generateEmbed(url) {
     return JSDOM.fragment(`<table><tr><th>Embed</th></tr><tr><td><a href="${url}">${url}</a></td></tr></table>`);
   }
@@ -204,4 +229,16 @@ export default class DOMUtils {
       }
     });
   }
+
+  static replaceBackgroundByImg(element, document) {
+    const url = element?.style?.['background-image'];
+    if (url) {
+      const src = url.replace(/url\(/gm, '').replace(/'/gm, '').replace(/\)/gm, '');
+      const img = document.createElement('img');
+      img.src = src;
+      element.replaceWith(img);
+      return img;
+    }
+    return element;
+  }
 }

package/test/utils/Blocks.spec.js

@@ -0,0 +1,138 @@
+/*
+ * Copyright 2010 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { strictEqual } from 'assert';
+import { describe, it } from 'mocha';
+
+import { JSDOM } from 'jsdom';
+
+import Blocks from '../../src/utils/Blocks.js';
+
+describe('Blocks#computeBlockName tests', () => {
+  it('computeBlockName - can convert', () => {
+    strictEqual(Blocks.computeBlockName('promotion'), 'Promotion');
+    strictEqual(Blocks.computeBlockName('hero-animation'), 'Hero Animation');
+    strictEqual(Blocks.computeBlockName('how-to-carousel'), 'How To Carousel');
+  });
+});
+
+const trim = (html) => html
+  .replace(/^\s*/gm, '')
+  .replace(/\s*$/gm, '')
+  .replace(/\n/gm, '')
+  .replace(/\/>\s*</gm, '/><');
+
+describe('Blocks#convertBlocksToTables tests', () => {
+  const test = (input, expected) => {
+    const { document } = (new JSDOM(input)).window;
+    Blocks.convertBlocksToTables(document, document);
+    strictEqual(trim(document.body.innerHTML), trim(expected));
+  };
+
+  const div = '<div></div>'; // ignored div for the tests
+
+  it('convertBlocksToTables basic block', () => {
+    test(
+      `<main>${div}${div}${div}
+        <div>
+          <div class="a-block">
+            <div>cell11</div>
+            <div>cell21</div>
+          </div>
+        </div>
+      </main>`,
+      `<main>${div}${div}${div}
+        <div>
+          <table>
+            <tr><th>A Block</th></tr>
+            <tr><td>cell11</td></tr>
+            <tr><td>cell21</td></tr>
+          </table>
+        </div>
+      </main>`,
+    );
+    test(
+      `<main>${div}${div}${div}
+        <div>
+          <div class="another-block">
+            <div>
+              <div>cell11</div>
+              <div>cell12</div>
+            </div>
+            <div>
+              <div>cell21</div>
+              <div>cell22</div>
+            </div>
+            <div>
+              <div><img src="https://www.sample.com/image.jpeg"></div>
+              <div><a href="https://www.sample.com/">A link</a></div>
+            </div>
+          </div>
+        </div>
+      </main>`,
+      `<main>${div}${div}${div}
+        <div>
+          <table>
+            <tr><th>Another Block</th></tr>
+            <tr><td>cell11</td><td>cell12</td></tr>
+            <tr><td>cell21</td><td>cell22</td></tr>
+            <tr><td><img src="https://www.sample.com/image.jpeg"></td><td><a href="https://www.sample.com/">A link</a></td></tr>
+          </table>
+        </div>
+      </main>`,
+    );
+    test(
+      `<main>${div}${div}${div}
+        <div>
+        <div class="promotion">
+          <div>
+            <div><a href="https://blog.adobe.com/en/promotions/doc-cloud-education.html">https://blog.adobe.com/en/promotions/doc-cloud-education.html</a></div>
+          </div>
+        </div>
+      </main>`,
+      `<main>${div}${div}${div}
+        <div>
+          <table>
+            <tr><th>Promotion</th></tr>
+            <tr><td><a href="https://blog.adobe.com/en/promotions/doc-cloud-education.html">https://blog.adobe.com/en/promotions/doc-cloud-education.html</a></td></tr>
+          </table>
+        </div>
+      </main>`,
+    );
+  });
+});
+
+describe('Blocks#getMetadataBlock tests', () => {
+  const test = (metadata, expected) => {
+    const { document } = (new JSDOM()).window;
+    const table = Blocks.getMetadataBlock(document, metadata);
+    strictEqual(trim(table.outerHTML), trim(expected));
+  };
+
+  it('getMetadataBlock string meta', () => {
+    test({ title: 'Some title' }, '<table><tr><th colspan="2">Metadata</th></tr><tr><td>title</td><td>Some title</td></tr></table>');
+    test({ Author: 'Name of the author', 'Creation Date': '2022/01/01' }, '<table><tr><th colspan="2">Metadata</th></tr><tr><td>Author</td><td>Name of the author</td></tr><tr><td>Creation Date</td><td>2022/01/01</td></tr></table>');
+  });
+
+  it('getMetadataBlock element meta', () => {
+    const { document } = (new JSDOM()).window;
+    const img = document.createElement('img');
+    img.src = 'https://www.sample.com/image.jpeg';
+    img.title = 'Image title';
+    img.alt = 'Image alt';
+    test({ title: 'Some title', Image: img }, '<table><tr><th colspan="2">Metadata</th></tr><tr><td>title</td><td>Some title</td></tr><tr><td>Image</td><td><img src="https://www.sample.com/image.jpeg" title="Image title" alt="Image alt"></td></tr></table>');
+  });
+
+  it('getMetadataBlock lists', () => {
+    test({ title: 'Some title', Tags: ['Creative', 'Experience Cloud', 'Photography'] }, '<table><tr><th colspan="2">Metadata</th></tr><tr><td>title</td><td>Some title</td></tr><tr><td>Tags</td><td>hlx_replaceTag(p)Creativehlx_replaceTag(/p)hlx_replaceTag(p)Experience Cloudhlx_replaceTag(/p)hlx_replaceTag(p)Photographyhlx_replaceTag(/p)</td></tr></table>');
+  });
+});

package/test/utils/DOMUtils.spec.js

@@ -170,101 +170,191 @@ describe('DOMUtils#removeCommments tests', () => {
     test('<p><!-- useless comment \n multiline \n multiline --></p>', '<p></p>');
     test('<!-- useless comment --><p>The content stays</p><!-- another useless comment with \n line break -->', '<p>The content stays</p>');
   });
+});
+
+describe('DOMUtils#removeSpans tests', () => {
+  const test = (input, expected) => {
+    const { document } = (new JSDOM(input)).window;
+    DOMUtils.removeSpans(document);
+    strictEqual(document.body.innerHTML, expected);
+  };
+
+  it('remove spans', () => {
+    // do nothing
+    test('<p></p>', '<p></p>');
+
+    // remove spans
+    test('<p><span></span></p>', '<p></p>');
+    test('<p><span>Content should remain</span> the same</p>', '<p>Content should remain the same</p>');
+    test('<p>Spacing<span> should</span> remain the same</p>', '<p>Spacing should remain the same</p>');
+    test('<p>Spacing<span> should</span> remain the <span>same even</span> with<span> multiple spans</span></p>', '<p>Spacing should remain the same even with multiple spans</p>');
+  });
+});
+
+describe('DOMUtils#removeNoscripts tests', () => {
+  const test = (input, expected) => {
+    strictEqual(DOMUtils.removeNoscripts(input), expected);
+  };
+
+  it('remove no scripts', () => {
+    // do nothing
+    test('<p>Some content</p>', '<p>Some content</p>');
+
+    // remove noscript
+    test('<body>Do A<noscript>Do Z</noscript></body>', '<body>Do A</body>');
+    test('<body>Do A<noscript>Do Z</noscript> but also do B<noscript>and X</noscript></body>', '<body>Do A but also do B</body>');
+    test('<body>Do A<noscript>Do Z\n Do X</noscript> but also do B<noscript>and W \n and Y</noscript></body>', '<body>Do A but also do B</body>');
+  });
+});
+
+describe('DOMUtils#replaceByCaptions tests', () => {
+  const test = (input, selectors, expected) => {
+    const { document } = (new JSDOM(input)).window;
+    DOMUtils.replaceByCaptions(document, selectors);
+    strictEqual(document.body.innerHTML, expected);
+  };
+
+  it('replace by captions', () => {
+    // do nothing
+    test('<p>Some content</p>', ['i'], '<p>Some content</p>');
 
-  describe('DOMUtils#removeSpans tests', () => {
-    const test = (input, expected) => {
-      const { document } = (new JSDOM(input)).window;
-      DOMUtils.removeSpans(document);
-      strictEqual(document.body.innerHTML, expected);
-    };
-
-    it('remove spans', () => {
-      // do nothing
-      test('<p></p>', '<p></p>');
-
-      // remove spans
-      test('<p><span></span></p>', '<p></p>');
-      test('<p><span>Content should remain</span> the same</p>', '<p>Content should remain the same</p>');
-      test('<p>Spacing<span> should</span> remain the same</p>', '<p>Spacing should remain the same</p>');
-      test('<p>Spacing<span> should</span> remain the <span>same even</span> with<span> multiple spans</span></p>', '<p>Spacing should remain the same even with multiple spans</p>');
-    });
+    test('<p>Some content</p><img src="image.png"><figcaption>Copyright to author.</figcaption><p>Some more content</p>', ['figcaption'], '<p>Some content</p><img src="image.png"><p><em>Copyright to author.</em></p><p>Some more content</p>');
+    test('<p>Some content</p><img src="image.png"><figcaption>Copyright to author.</figcaption><div class="custom-caption">Another copyright to author.</div><p>Some more content</p>', ['figcaption', '.custom-caption'], '<p>Some content</p><img src="image.png"><p><em>Copyright to author.</em></p><p><em>Another copyright to author.</em></p><p>Some more content</p>');
   });
+});
 
-  describe('DOMUtils#removeNoscripts tests', () => {
-    const test = (input, expected) => {
-      strictEqual(DOMUtils.removeNoscripts(input), expected);
-    };
+describe('DOMUtils#replaceEmbeds', () => {
+  const test = (input, expected) => {
+    const { document } = (new JSDOM(input)).window;
+    DOMUtils.replaceEmbeds(document);
+    strictEqual(document.body.innerHTML, expected);
+  };
 
-    it('remove no scripts', () => {
-      // do nothing
-      test('<p>Some content</p>', '<p>Some content</p>');
+  it('replace embeds', () => {
+    // do nothing
+    test('<p>Some content</p>', '<p>Some content</p>');
+  });
 
-      // remove noscript
-      test('<body>Do A<noscript>Do Z</noscript></body>', '<body>Do A</body>');
-      test('<body>Do A<noscript>Do Z</noscript> but also do B<noscript>and X</noscript></body>', '<body>Do A but also do B</body>');
-      test('<body>Do A<noscript>Do Z\n Do X</noscript> but also do B<noscript>and W \n and Y</noscript></body>', '<body>Do A but also do B</body>');
-    });
+  it('replace embeds deals with iframes', () => {
+    test('<p>Some content</p><iframe src="https://www.youtube.com/xyz"></iframe>', '<p>Some content</p><table><tbody><tr><th>Embed</th></tr><tr><td><a href="https://www.youtube.com/xyz">https://www.youtube.com/xyz</a></td></tr></tbody></table>');
+    test('<p>Some content</p><iframe data-src="https://www.youtube.com/xyz"></iframe>', '<p>Some content</p><table><tbody><tr><th>Embed</th></tr><tr><td><a href="https://www.youtube.com/xyz">https://www.youtube.com/xyz</a></td></tr></tbody></table>');
+    test('<p>Some content</p><iframe data-src="https://www.youtube.com/data-src" src="https://www.youtube.com/src"></iframe>', '<p>Some content</p><table><tbody><tr><th>Embed</th></tr><tr><td><a href="https://www.youtube.com/data-src">https://www.youtube.com/data-src</a></td></tr></tbody></table>');
   });
 
-  describe('DOMUtils#replaceByCaptions tests', () => {
-    const test = (input, selectors, expected) => {
-      const { document } = (new JSDOM(input)).window;
-      DOMUtils.replaceByCaptions(document, selectors);
-      strictEqual(document.body.innerHTML, expected);
-    };
+  it('replace embeds deals video tag / content blocks', () => {
+    // Video block
+    test('<p>Some content</p><video src="https://www.server.com/video.mp4"></video>', '<p>Some content</p><table><tbody><tr><th>Video</th></tr><tr><td><video src="https://www.server.com/video.mp4"></video></td></tr></tbody></table>');
 
-    it('replace by captions', () => {
-      // do nothing
-      test('<p>Some content</p>', ['i'], '<p>Some content</p>');
+    // Animation block
+    test('<p>Some content</p><video src="https://www.server.com/video.mp4" autoplay="true"></video>', '<p>Some content</p><table><tbody><tr><th>Animation</th></tr><tr><td><video src="https://www.server.com/video.mp4" autoplay="true"></video></td></tr></tbody></table>');
+  });
+});
+
+describe('DOMUtils#encodeImagesForTable', () => {
+  const test = (input, expected) => {
+    const { document } = (new JSDOM(input)).window;
+    DOMUtils.encodeImagesForTable(document);
+    strictEqual(document.body.innerHTML, expected);
+  };
 
-      test('<p>Some content</p><img src="image.png"><figcaption>Copyright to author.</figcaption><p>Some more content</p>', ['figcaption'], '<p>Some content</p><img src="image.png"><p><em>Copyright to author.</em></p><p>Some more content</p>');
-      test('<p>Some content</p><img src="image.png"><figcaption>Copyright to author.</figcaption><div class="custom-caption">Another copyright to author.</div><p>Some more content</p>', ['figcaption', '.custom-caption'], '<p>Some content</p><img src="image.png"><p><em>Copyright to author.</em></p><p><em>Another copyright to author.</em></p><p>Some more content</p>');
-    });
+  it('encode images for table', () => {
+    // do nothing
+    test('<p>Some content</p>', '<p>Some content</p>');
+
+    // encode pipe if image is in table
+    test('<p>Some content</p><table><tr><td><img src="https://www.server.com/image.jpg" title="Some title | which contains a pipe"></td></tr></table>', '<p>Some content</p><table><tbody><tr><td><img src="https://www.server.com/image.jpg" title="Some title \\| which contains a pipe"></td></tr></tbody></table>');
+
+    // don't encode pipe if image is not in a table
+    test('<p>Some content</p><img src="https://www.server.com/image.jpg" title="Some title | which contains a pipe">', '<p>Some content</p><img src="https://www.server.com/image.jpg" title="Some title | which contains a pipe">');
   });
+});
 
-  describe('DOMUtils#replaceEmbeds', () => {
-    const test = (input, expected) => {
-      const { document } = (new JSDOM(input)).window;
-      DOMUtils.replaceEmbeds(document);
-      strictEqual(document.body.innerHTML, expected);
-    };
-
-    it('replace embeds', () => {
-      // do nothing
-      test('<p>Some content</p>', '<p>Some content</p>');
-    });
-
-    it('replace embeds deals with iframes', () => {
-      test('<p>Some content</p><iframe src="https://www.youtube.com/xyz"></iframe>', '<p>Some content</p><table><tbody><tr><th>Embed</th></tr><tr><td><a href="https://www.youtube.com/xyz">https://www.youtube.com/xyz</a></td></tr></tbody></table>');
-      test('<p>Some content</p><iframe data-src="https://www.youtube.com/xyz"></iframe>', '<p>Some content</p><table><tbody><tr><th>Embed</th></tr><tr><td><a href="https://www.youtube.com/xyz">https://www.youtube.com/xyz</a></td></tr></tbody></table>');
-      test('<p>Some content</p><iframe data-src="https://www.youtube.com/data-src" src="https://www.youtube.com/src"></iframe>', '<p>Some content</p><table><tbody><tr><th>Embed</th></tr><tr><td><a href="https://www.youtube.com/data-src">https://www.youtube.com/data-src</a></td></tr></tbody></table>');
-    });
-
-    it('replace embeds deals video tag / content blocks', () => {
-      // Video block
-      test('<p>Some content</p><video src="https://www.server.com/video.mp4"></video>', '<p>Some content</p><table><tbody><tr><th>Video</th></tr><tr><td><video src="https://www.server.com/video.mp4"></video></td></tr></tbody></table>');
-
-      // Animation block
-      test('<p>Some content</p><video src="https://www.server.com/video.mp4" autoplay="true"></video>', '<p>Some content</p><table><tbody><tr><th>Animation</th></tr><tr><td><video src="https://www.server.com/video.mp4" autoplay="true"></video></td></tr></tbody></table>');
-    });
+describe('DOM#createTable tests', () => {
+  const test = (data, expected) => {
+    const { document } = (new JSDOM()).window;
+    const table = DOMUtils.createTable(data, document);
+    strictEqual(table.outerHTML, expected);
+  };
+
+  it('createTable - basic tables', () => {
+    test(
+      [[]],
+      '<table><tr></tr></table>',
+    );
+    test(
+      [['header']],
+      '<table><tr><th>header</th></tr></table>',
+    );
+    test(
+      [['header'], ['cell']],
+      '<table><tr><th>header</th></tr><tr><td>cell</td></tr></table>',
+    );
+    test(
+      [['header1', 'header2'], ['cell11', 'cell12'], ['cell21', 'cell22']],
+      '<table><tr><th>header1</th><th>header2</th></tr><tr><td>cell11</td><td>cell12</td></tr><tr><td>cell21</td><td>cell22</td></tr></table>',
+    );
+    // TODO deal with colspan ?
+    test(
+      [['header1'], ['cell11', 'cell12'], ['cell21', 'cell22']],
+      '<table><tr><th>header1</th></tr><tr><td>cell11</td><td>cell12</td></tr><tr><td>cell21</td><td>cell22</td></tr></table>',
+    );
   });
 
-  describe('DOMUtils#encodeImagesForTable', () => {
-    const test = (input, expected) => {
-      const { document } = (new JSDOM(input)).window;
-      DOMUtils.encodeImagesForTable(document);
-      strictEqual(document.body.innerHTML, expected);
-    };
+  it('createTable - deals with Elements', () => {
+    const { document } = (new JSDOM()).window;
+
+    const img = document.createElement('img');
+    img.src = 'https://www.sample.com/image.jpeg';
+
+    const a = document.createElement('a');
+    a.href = 'https://www.sample.com/';
+
+    test(
+      [['header'], [img]],
+      '<table><tr><th>header</th></tr><tr><td><img src="https://www.sample.com/image.jpeg"></td></tr></table>',
+    );
+    test(
+      [['header'], [img, a, 'some text']],
+      '<table><tr><th>header</th></tr><tr><td><img src="https://www.sample.com/image.jpeg"></td><td><a href="https://www.sample.com/"></a></td><td>some text</td></tr></table>',
+    );
+    test(
+      [['header'], [[img, a, 'some text']]],
+      '<table><tr><th>header</th></tr><tr><td><img src="https://www.sample.com/image.jpeg"><a href="https://www.sample.com/"></a>some text</td></tr></table>',
+    );
+  });
+});
+
+describe('DOMUtils#replaceBackgroundByImg', () => {
+  const createElement = (tag, attrs, styles, innerHTML) => {
+    const { document } = (new JSDOM()).window;
+    const element = document.createElement(tag);
+    // eslint-disable-next-line no-restricted-syntax, guard-for-in
+    for (const a in attrs) {
+      element.setAttribute(a, attrs[a]);
+    }
+    // eslint-disable-next-line no-restricted-syntax, guard-for-in
+    for (const p in styles) {
+      element.style[p] = styles[p];
+    }
+    element.innerHTML = innerHTML;
+    return element;
+  };
 
-    it('encode images for table', () => {
-      // do nothing
-      test('<p>Some content</p>', '<p>Some content</p>');
+  const test = (element, expected) => {
+    const { document } = (new JSDOM()).window;
+    const ret = DOMUtils.replaceBackgroundByImg(element, document);
+    strictEqual(ret.outerHTML, expected);
+  };
+
+  it('no background-image style', () => {
+    test(createElement('p', {}, {}, 'Some content'), '<p>Some content</p>');
 
-      // encode pipe if image is in table
-      test('<p>Some content</p><table><tr><td><img src="https://www.server.com/image.jpg" title="Some title | which contains a pipe"></td></tr></table>', '<p>Some content</p><table><tbody><tr><td><img src="https://www.server.com/image.jpg" title="Some title \\| which contains a pipe"></td></tr></tbody></table>');
+    test(createElement('img', { src: 'https://www.server.com/image.jpg', title: 'Some title' }, {}, ''), '<img src="https://www.server.com/image.jpg" title="Some title">');
+  });
 
-      // don't encode pipe if image is not in a table
-      test('<p>Some content</p><img src="https://www.server.com/image.jpg" title="Some title | which contains a pipe">', '<p>Some content</p><img src="https://www.server.com/image.jpg" title="Some title | which contains a pipe">');
-    });
+  it('with background-image style', () => {
+    test(createElement('p', {}, { 'background-image': 'url(https://www.server.com/image.jpg)' }, 'Some content'), '<img src="https://www.server.com/image.jpg">');
+    test(createElement('p', { class: 'class-is-lost' }, { 'background-image': 'url("https://www.server.com/image.jpg")' }, 'Some content'), '<img src="https://www.server.com/image.jpg">');
+    test(createElement('div', { class: 'class-is-lost' }, { 'background-image': 'url("https://www.server.com/image.jpg")' }, '<div><div>Some divs</div><div>More divs</div></div>'), '<img src="https://www.server.com/image.jpg">');
   });
 });