@adobe/helix-importer 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.2.0](https://github.com/adobe/helix-importer/compare/v2.1.1...v2.2.0) (2022-11-17)
+
+
+### Features
+
+* createTable handles colspans ([#33](https://github.com/adobe/helix-importer/issues/33)) ([06c48cf](https://github.com/adobe/helix-importer/commit/06c48cfdab04c0190f43bae12893ac560d5b3daf))
+
 ## [2.1.1](https://github.com/adobe/helix-importer/compare/v2.1.0...v2.1.1) (2022-09-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe/helix-importer",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Helix Importer tool: create md / docx from html",
   "main": "src/index.js",
   "type": "module",

package/src/utils/DOMUtils.js

@@ -168,9 +168,11 @@ export default class DOMUtils {
   static createTable(data, document) {
     const table = document.createElement('table');
 
+    let maxColumns = 0;
     data.forEach((row, index) => {
       const tr = document.createElement('tr');
 
+      maxColumns = Math.max(maxColumns, row.length);
       row.forEach((cell) => {
         const t = document.createElement(index === 0 ? 'th' : 'td');
         if (typeof cell === 'string') {
@@ -187,6 +189,15 @@ export default class DOMUtils {
       table.appendChild(tr);
     });
 
+    // adjust the colspans
+    table.querySelectorAll('tr').forEach((tr) => {
+      const cells = Array.from(tr.querySelectorAll('td, th'));
+      if (cells.length < maxColumns) {
+        const lastCell = cells[cells.length - 1];
+        lastCell.setAttribute('colspan', maxColumns - cells.length + 1);
+      }
+    });
+
     return table;
   }
 

package/test/utils/Blocks.spec.js

@@ -82,7 +82,7 @@ describe('Blocks#convertBlocksToTables tests', () => {
       `<main>${div}${div}${div}
         <div>
           <table>
-            <tr><th>Another Block</th></tr>
+            <tr><th colspan="2">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>
@@ -103,7 +103,7 @@ describe('Blocks#convertBlocksToTables tests', () => {
       `<main>${div}${div}${div}
         <div>
           <table>
-            <tr><th>Promotion</th></tr>
+            <tr><th colspan="2">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>
               <td><span>with content</span></td>

package/test/utils/DOMUtils.spec.js

@@ -297,10 +297,28 @@ describe('DOM#createTable tests', () => {
       [['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 ?
+  });
+
+  it('createTable - handles colspans', () => {
     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>',
+      '<table><tr><th colspan="2">header1</th></tr><tr><td>cell11</td><td>cell12</td></tr><tr><td>cell21</td><td>cell22</td></tr></table>',
+    );
+
+    test(
+      [['header1'], ['cell11', 'cell12', 'cell13', 'cell14']],
+      '<table><tr><th colspan="4">header1</th></tr><tr><td>cell11</td><td>cell12</td><td>cell13</td><td>cell14</td></tr></table>',
+    );
+
+    test(
+      [['header1', 'header2'], ['cell11', 'cell12', 'cell13', 'cell14']],
+      '<table><tr><th>header1</th><th colspan="3">header2</th></tr><tr><td>cell11</td><td>cell12</td><td>cell13</td><td>cell14</td></tr></table>',
+    );
+
+    // messy table
+    test(
+      [['header1', 'header2'], ['cell11', 'cell12', 'cell13', 'cell14'], ['cell22'], ['cell31', 'cell32', 'cell33']],
+      '<table><tr><th>header1</th><th colspan="3">header2</th></tr><tr><td>cell11</td><td>cell12</td><td>cell13</td><td>cell14</td></tr><tr><td colspan="4">cell22</td></tr><tr><td>cell31</td><td>cell32</td><td colspan="2">cell33</td></tr></table>',
     );
   });
 
@@ -318,8 +336,8 @@ describe('DOM#createTable tests', () => {
       '<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>',
+      [['header1', 'header2', 'header3'], [img, a, 'some text']],
+      '<table><tr><th>header1</th><th>header2</th><th>header3</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']]],