Fix table cell alignment

Closes GH-28.
remarkjs · Feb 28, 2017 · c91d4cd · c91d4cd
1 parent 1473dca
commit c91d4cd
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/index.js b/index.js
@@ -5,6 +5,7 @@ module.exports = remarkReact;
 var toHAST = require('mdast-util-to-hast');
 var sanitize = require('hast-util-sanitize');
 var toH = require('hast-to-hyperscript');
+var xtend = require('xtend');
 
 var globalCreateElement;
 
@@ -33,10 +34,13 @@ var TABLE_ELEMENTS = ['table', 'thead', 'tbody', 'tfoot', 'tr'];
 function remarkReact(options) {
   var settings = options || {};
   var createElement = settings.createElement || globalCreateElement;
-  var components = settings.remarkReactComponents || {};
   var clean = settings.sanitize !== false;
   var scheme = clean && (typeof settings.sanitize !== 'boolean') ? settings.sanitize : null;
   var toHastOptions = settings.toHast || {};
+  var components = xtend({
+    td: createTableCellComponent('td'),
+    th: createTableCellComponent('th')
+  }, settings.remarkReactComponents);
 
   this.Compiler = compile;
 
@@ -86,4 +90,21 @@ function remarkReact(options) {
 
     return toH(h, hast, settings.prefix);
   }
+
+  /**
+   * Create a functional React component for a cell.
+   * We need this because GFM uses `align`, whereas React
+   * forbids that and wants `style.textAlign` instead.
+   */
+  function createTableCellComponent(tagName) {
+    return TableCell;
+
+    function TableCell(props) {
+      return createElement(tagName, xtend(props, {
+        align: undefined,
+        children: undefined,
+        style: {textAlign: props.align}
+      }), props.children);
+    }
+  }
 }
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
   "dependencies": {
     "hast-to-hyperscript": "^2.0.1",
     "hast-util-sanitize": "^1.0.0",
-    "mdast-util-to-hast": "^2.0.0"
+    "mdast-util-to-hast": "^2.0.0",
+    "xtend": "^4.0.1"
   },
   "devDependencies": {
     "mocha": "^3.1.0",
@@ -74,7 +75,9 @@
       "eqeqeq": [
         "error",
         "always",
-        {"null": "ignore"}
+        {
+          "null": "ignore"
+        }
       ]
     }
   },

diff --git a/readme.md b/readme.md
@@ -100,6 +100,12 @@ All options, including the `options` object itself, are optional:
     }
     ```
 
+    Note: as GFM uses `align` on `td` and `th`, and React doesn’t like that,
+    we [overwrite](https://github.com/mapbox/remark-react/blob/master/index.js#L94)
+    them through `remarkReactComponents` to use `style.textAlign` instead.
+    This means that if you set `td` or `td`, you’ll need to handle `align`
+    yourself.
+
 *   `toHast` (`object`, default: `{}`)
     — Provides options for transforming MDAST document to HAST.
     See [mdast-util-to-hast](https://github.com/wooorm/mdast-util-to-hast#api)

diff --git a/test/react/v0.14/fixtures/tables/output.html b/test/react/v0.14/fixtures/tables/output.html
@@ -1 +1 @@
-<div><table><thead><tr><th>Alpha</th><th>Bravo</th><th>Charlie</th><th>Delta</th></tr></thead><tbody><tr><td>Echo</td><td>Foxtrot</td><td><strong>Golf</strong></td><td></td></tr><tr><td>India</td><td>Juliett</td><td>Kilo</td><td>Lima</td></tr><tr><td>Mike</td><td>November</td><td>Oscar</td><td><del>Papa</del></td></tr><tr><td>Quebec</td><td><em>Romeo</em></td><td>Sierra</td><td>Tango</td></tr><tr><td>Uniform</td><td>Victor</td><td>Whiskey</td><td></td></tr></tbody></table></div>
+<div><table><thead><tr><th>Alpha</th><th style="text-align:left;">Bravo</th><th style="text-align:right;">Charlie</th><th style="text-align:center;">Delta</th></tr></thead><tbody><tr><td>Echo</td><td style="text-align:left;">Foxtrot</td><td style="text-align:right;"><strong>Golf</strong></td><td style="text-align:center;"></td></tr><tr><td>India</td><td style="text-align:left;">Juliett</td><td style="text-align:right;">Kilo</td><td style="text-align:center;">Lima</td></tr><tr><td>Mike</td><td style="text-align:left;">November</td><td style="text-align:right;">Oscar</td><td style="text-align:center;"><del>Papa</del></td></tr><tr><td>Quebec</td><td style="text-align:left;"><em>Romeo</em></td><td style="text-align:right;">Sierra</td><td style="text-align:center;">Tango</td></tr><tr><td>Uniform</td><td style="text-align:left;">Victor</td><td style="text-align:right;">Whiskey</td><td style="text-align:center;"></td></tr></tbody></table></div>