Fix HTML parsing of elements with a single child vs. multiple children (

remarkjs#297)
geekyarjun · Apr 15, 2019 · 4ced275 · 4ced275
1 parent 3ab5e62
commit 4ced275
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 1 deletion.
diff --git a/src/ast-to-react.js b/src/ast-to-react.js
@@ -196,7 +196,7 @@ function mergeNodeChildren(node, parsedChildren) {
   }
 
   if (el.props.children || parsedChildren) {
-    const children = (el.props.children || []).concat(parsedChildren)
+    const children = React.Children.toArray(el.props.children).concat(parsedChildren)
     return React.cloneElement(el, null, children)
   }
   return React.cloneElement(el, null)

diff --git a/test/__snapshots__/react-markdown.test.js.snap b/test/__snapshots__/react-markdown.test.js.snap
@@ -1209,6 +1209,37 @@ Array [
 ]
 `;
 
+exports[`should be able to render a table with a single child with HTML parser plugin 1`] = `
+<table>
+  <tbody>
+    <tr>
+      <td>
+        I am having so much fun
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`should be able to render a table with multiple children with HTML parser plugin 1`] = `
+<table>
+  <thead>
+    <tr>
+      <th>
+        Title
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        I am having so much fun
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
 exports[`should be able to render basic inline html without containers 1`] = `
 <p>
   I am having 

diff --git a/test/react-markdown.test.js b/test/react-markdown.test.js
@@ -312,6 +312,22 @@ test('should be able to render multiple inline html elements with self-closing t
   expect(component.toJSON()).toMatchSnapshot()
 })
 
+test('should be able to render a table with a single child with HTML parser plugin', () => {
+  const input = '<table><tbody><tr><td>I am having so much fun</td></tr></tbody></table>'
+  const component = renderer.create(
+    <Markdown source={input} escapeHtml={false} astPlugins={[htmlParser()]} />
+  )
+  expect(component.toJSON()).toMatchSnapshot()
+})
+
+test('should be able to render a table with multiple children with HTML parser plugin', () => {
+  const input = '<table><thead><tr><th>Title</th></tr></thead><tbody><tr><td>I am having so much fun</td></tr></tbody></table>'
+  const component = renderer.create(
+    <Markdown source={input} escapeHtml={false} astPlugins={[htmlParser()]} />
+  )
+  expect(component.toJSON()).toMatchSnapshot()
+})
+
 test('should be able to render replaced non-void html elements with HTML parser plugin', () => {
   const input = 'I am having <code>so much</code> fun'
   const config = {