Merge pull request #2 from yaycmyk/implement-table-column-alignment

GFM Aligned Column functionality

CHANGELOG.md

@@ -1,6 +1,10 @@
 # markdown-to-jsx
 ## Changelog
 
+### 1.1.0 (December 8, 2015)
+
+- Implement GFM table per-column alignment (d2ab598eaa7b2effc21befc93024ae4eecd1b3d9)
+
 ### 1.0.1 (December 7, 2015)
 
 Update package.json metadata.

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

__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');

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 */
 

package.json

@@ -2,7 +2,7 @@
   "name": "markdown-to-jsx",
   "description": "Interprets markdown text and outputs a JSX equivalent.",
   "license": "MIT",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "keywords": [
     "markdown",
     "react",