GFM Aligned Column functionality

The align property on the table now was an array, which I didn't realize before. Not actually an mdast issue.
quantizor · Dec 8, 2015 · d2ab598 · d2ab598
1 parent 0ca3334
commit d2ab598
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -39,9 +39,6 @@ converter('# Hello world[^2]!\n\n[^2]: A beautiful place.', {footnotes: true});
 - mdast's handling of lists will sometimes add a child paragraph tag inside the
   `<li>` where it shouldn't exist - [Bug Ticket](https://github.com/wooorm/mdast/issues/104)
 
-- mdast does not currently have support for column-specific alignment in GFM tables -
-  [Bug Ticket](https://github.com/wooorm/mdast/issues/105)
-
 - mdast incorrectly parses footnote definitions with only one word - [Bug Ticket](https://github.com/wooorm/mdast/issues/106)
 
 MIT
diff --git a/__tests__/index.js b/__tests__/index.js
@@ -372,8 +372,7 @@ describe('markdown-to-jsx', () => {
             expect(row.children[0].tagName).toBe('TD');
         });
 
-        /* disabled until https://github.com/wooorm/mdast/issues/105 is resolved */
-        xit('should handle a table with aligned columns', () => {
+        it('should handle a table with aligned columns', () => {
             const element = render(converter('foo|bar\n-:|-\n1|2'));
             const elementNode = ReactDOM.findDOMNode(element);
             const table = elementNode.querySelector('table');
@@ -384,6 +383,7 @@ describe('markdown-to-jsx', () => {
             expect(thead).not.toBe(null);
             expect(thead.children.length).toBe(2);
             expect(thead.children[0].tagName).toBe('TH');
+            expect(thead.children[0].style.textAlign).toBe('right');
             expect(row).not.toBe(null);
             expect(row.children.length).toBe(2);
             expect(row.children[0].tagName).toBe('TD');

diff --git a/index.js b/index.js
@@ -115,16 +115,38 @@ function formExtraPropsForHTMLNodeType(props = {}, ast) {
             start: ast.start,
         };
 
-    case 'table':
+    case 'tableCell':
+    case 'th':
         return {
             ...props,
-            style: {align: ast.align},
+            style: {textAlign: ast.align},
         };
     }
 
     return props;
 }
 
+function seekCellsAndAlignThemIfNecessary(root, alignmentValues) {
+    const mapper = (child, index) => {
+        if (child.type === 'tableCell') {
+            return {
+                ...child,
+                align: alignmentValues[index],
+            };
+        } else if (Array.isArray(child.children) && child.children.length) {
+            return child.children.map(mapper);
+        }
+
+        return child;
+    };
+
+    if (Array.isArray(root.children) && root.children.length) {
+        root.children = root.children.map(mapper);
+    }
+
+    return root;
+}
+
 function astToJSX(ast, index) { /* `this` is the dictionary of definitions */
     if (textTypes.indexOf(ast.type) !== -1) {
         return ast.value;
@@ -167,16 +189,23 @@ function astToJSX(ast, index) { /* `this` is the dictionary of definitions */
 
         ast.children = ast.children.reduce((children, child) => {
             if (child.type === 'tableHeader') {
-                children.unshift(child);
+                children.unshift(
+                    seekCellsAndAlignThemIfNecessary(child, ast.align)
+                );
             } else if (child.type === 'tableRow') {
-                tbody.children.push(child);
+                tbody.children.push(
+                    seekCellsAndAlignThemIfNecessary(child, ast.align)
+                );
             } else if (child.type === 'tableFooter') {
-                children.push(child);
+                children.push(
+                    seekCellsAndAlignThemIfNecessary(child, ast.align)
+                );
             }
 
             return children;
 
         }, [tbody]);
+
     } /* React yells if things aren't in the proper structure, so need to
         delve into the immediate children and wrap tablerow(s) in a tbody */