Add table tests

src/util/markdown.js

@@ -199,7 +199,7 @@ const markdownRules = {
         return s;
       }));
 
-      function pad(s, i) {
+      const pad = (s, i) => {
         switch (node.align[i]) {
           case 'right':
             return s.padStart(colWidth[i]);
@@ -210,7 +210,7 @@ const markdownRules = {
           default:
             return s.padEnd(colWidth[i]);
         }
-      }
+      };
 
       const line = colWidth.map((len, i) => {
         switch (node.align[i]) {
@@ -232,6 +232,31 @@ const markdownRules = {
 
       return table.map((row) => `| ${row.join(' | ')} |\n`).join('');
     },
+    html: (node, output, state) => {
+      const header = node.header
+        .map((content, i) => htmlTag('th', output(content, state), {
+          scope: 'col',
+          align: node.align[i] || undefined,
+        }))
+        .join('');
+
+      const rows = node.cells
+        .map((row) => {
+          const cols = row
+            .map((content, i) => htmlTag('td', output(content, state), {
+              align: node.align[i] || undefined,
+            }))
+            .join('');
+
+          return htmlTag('tr', cols);
+        })
+        .join('');
+
+      const thead = htmlTag('thead', htmlTag('tr', header));
+      const tbody = htmlTag('tbody', rows);
+
+      return htmlTag('table', thead + tbody);
+    },
   },
   displayMath: {
     order: defaultRules.table.order + 0.1,
@@ -383,14 +408,16 @@ function mapElement(el) {
         items: Array.from(el.childNodes).map(mapNode),
       }];
     case 'TABLE': {
+      const parseAlign = (s) => (['left', 'right', 'center'].includes(s) ? s : null);
+
       const headerEl = Array.from(el.querySelector('thead > tr').childNodes);
-      const align = headerEl.map((childE) => childE.style['text-align']);
+      const align = headerEl.map((childE) => parseAlign(childE.align));
       return [{
         type: 'table',
         header: headerEl.map(mapChildren),
         align,
         cells: Array.from(el.querySelectorAll('tbody > tr')).map((rowEl) => Array.from(rowEl.childNodes).map((childEl, i) => {
-          if (align[i] === undefined) align[i] = childEl.style['text-align'];
+          if (align[i] === undefined) align[i] = parseAlign(childEl.align);
           return mapChildren(childEl);
         })),
       }];

src/util/markdown.test.js

@@ -89,7 +89,11 @@ describe('link', () => {
 //   mdTest('>quote', '> quote', '<blockquote>quote</blockquote>');
 //   mdTest('>    quote', '> quote', '<blockquote>quote</blockquote>');
 
-//   mdTest('> multiline\nquote', '> multiline\n> quote', '<blockquote>multiline<br>quote</blockquote>');
+// mdTest(
+//   '> multiline\nquote',
+//   '> multiline\n> quote',
+//   '<blockquote>multiline<br>quote</blockquote>',
+// );
 
 //   mdTest('> quote\n\ntext after', '<blockquote>quote</blockquote>text after');
 // });
@@ -101,7 +105,10 @@ describe('list', () => {
   mdTest('1. item1\n2. item2', '<ol><li>item1</li><li>item2</li></ol>');
   mdTest('2. item2\n3. item3', '<ol start="2"><li>item2</li><li>item3</li></ol>');
 
-  // mdTest('* item1\n  * subitem1\n  * subitem2\n* item2', '<ul><li>item1<ul><li>subitem1</li><li>subitem2</li></ul></li><li>item2</li></ul>');
+  // mdTest(
+  //   '* item1\n  * subitem1\n  * subitem2\n* item2',
+  //   '<ul><li>item1<ul><li>subitem1</li><li>subitem2</li></ul></li><li>item2</li></ul>',
+  // );
 
   const elementHtml = '<ul><li>item1<ul><li>subitem1</li><li>subitem2</li></ul></li><li>item2</li></ul>';
   test(elementHtml, () => {
@@ -109,3 +116,23 @@ describe('list', () => {
     expect(content.plain).toBe('* item1\n  * subitem1\n  * subitem2\n* item2');
   });
 });
+
+describe('table', () => {
+  mdTest(
+    '|head1|head2|\n|-|-|\n|cell1|cell2|\n|cell3|cell4|',
+    '| head1 | head2 |\n| ----- | ----- |\n| cell1 | cell2 |\n| cell3 | cell4 |',
+    '<table><thead><tr><th scope="col">head1</th><th scope="col">head2</th></tr></thead><tbody><tr><td>cell1</td><td>cell2</td></tr><tr><td>cell3</td><td>cell4</td></tr></tbody></table>',
+  );
+
+  mdTest(
+    '| left | center | right |\n| :--- | :----: | ----: |\n| l    |   c    |     r |',
+    '<table><thead><tr><th scope="col" align="left">left</th><th scope="col" align="center">center</th><th scope="col" align="right">right</th></tr></thead><tbody><tr><td align="left">l</td><td align="center">c</td><td align="right">r</td></tr></tbody></table>',
+  );
+
+  const unknownAlignHtml = '<table><thead><tr><th align="unknown">head</th></tr></thead><tbody><tr><td>cell</td></tr></tbody></table>';
+  test(unknownAlignHtml, () => {
+    const content = html(unknownAlignHtml, { kind: 'edit' });
+    expect(content.plain).toBe('| head |\n| ---- |\n| cell |');
+    expect(content.html).toBe('<table><thead><tr><th scope="col">head</th></tr></thead><tbody><tr><td>cell</td></tr></tbody></table>');
+  });
+});