Fix whitespace in table elements

Closes GH-576.
Closes GH-577.

Reviewed-by: Titus Wormer <tituswormer@gmail.com>

Author: fdcds

src/ast-to-react.js

@@ -154,6 +154,10 @@ exports.hastChildrenToReact = childrenToReact
 
 const own = {}.hasOwnProperty
 
+// The table-related elements that must not contain whitespace text according
+// to React.
+const tableElements = new Set(['table', 'thead', 'tbody', 'tfoot', 'tr'])
+
 /**
  * @param {Context} context
  * @param {Element|Root} node
@@ -171,7 +175,14 @@ function childrenToReact(context, node) {
     if (child.type === 'element') {
       children.push(toReact(context, child, childIndex, node))
     } else if (child.type === 'text') {
-      children.push(child.value)
+      /** @type {ReactMarkdownNames} */
+      // @ts-ignore assume a known HTML/SVG element.
+      const name = node.tagName
+      // React does not permit whitespace text elements as children of table:
+      // cf. https://github.com/remarkjs/react-markdown/issues/576
+      if (!tableElements.has(name) || child.value !== '\n') {
+        children.push(child.value)
+      }
     }
     // @ts-ignore `raw` nodes are non-standard
     else if (child.type === 'raw' && !context.options.skipHtml) {

test/__snapshots__/react-markdown.test.js.snap

@@ -2335,14 +2335,7 @@ exports[`should render link references 1`] = `"<p>Stuff were changed in <a href=
 
 exports[`should render partial tables 1`] = `
 "<p>User is writing a table by hand</p>
-<table>
-<thead>
-<tr>
-<th>Test</th>
-<th>Test</th>
-</tr>
-</thead>
-</table>"
+<table><thead><tr><th>Test</th><th>Test</th></tr></thead></table>"
 `;
 
 exports[`should render table of contents plugin 1`] = `
@@ -2446,36 +2439,7 @@ Array [
 
 exports[`should render tables 1`] = `
 "<p>Languages are fun, right?</p>
-<table>
-<thead>
-<tr>
-<th style=\\"text-align:left\\">ID</th>
-<th style=\\"text-align:center\\">English</th>
-<th style=\\"text-align:right\\">Norwegian</th>
-<th>Italian</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style=\\"text-align:left\\">1</td>
-<td style=\\"text-align:center\\">one</td>
-<td style=\\"text-align:right\\">en</td>
-<td>uno</td>
-</tr>
-<tr>
-<td style=\\"text-align:left\\">2</td>
-<td style=\\"text-align:center\\">two</td>
-<td style=\\"text-align:right\\">to</td>
-<td>due</td>
-</tr>
-<tr>
-<td style=\\"text-align:left\\">3</td>
-<td style=\\"text-align:center\\">three</td>
-<td style=\\"text-align:right\\">tre</td>
-<td>tre</td>
-</tr>
-</tbody>
-</table>"
+<table><thead><tr><th style=\\"text-align:left\\">ID</th><th style=\\"text-align:center\\">English</th><th style=\\"text-align:right\\">Norwegian</th><th>Italian</th></tr></thead><tbody><tr><td style=\\"text-align:left\\">1</td><td style=\\"text-align:center\\">one</td><td style=\\"text-align:right\\">en</td><td>uno</td></tr><tr><td style=\\"text-align:left\\">2</td><td style=\\"text-align:center\\">two</td><td style=\\"text-align:right\\">to</td><td>due</td></tr><tr><td style=\\"text-align:left\\">3</td><td style=\\"text-align:center\\">three</td><td style=\\"text-align:right\\">tre</td><td>tre</td></tr></tbody></table>"
 `;
 
 exports[`should set source position attributes if sourcePos option is enabled 1`] = `

test/react-markdown.test.js

@@ -406,7 +406,7 @@ test('should pass `isHeader: boolean` to `tr`s', () => {
     />
   )
   const expected =
-    '<table>\n<thead>\n<tr>\n<th>a</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>b</td>\n</tr>\n<tr>\n<td>c</td>\n</tr>\n</tbody>\n</table>'
+    '<table><thead><tr><th>a</th></tr></thead><tbody><tr><td>b</td></tr><tr><td>c</td></tr></tbody></table>'
   expect(actual).toEqual(expected)
 })
 
@@ -429,7 +429,7 @@ test('should pass `isHeader: true` to `th`s, `isHeader: false` to `td`s', () =>
     />
   )
   const expected =
-    '<table>\n<thead>\n<tr>\n<th>a</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>b</td>\n</tr>\n<tr>\n<td>c</td>\n</tr>\n</tbody>\n</table>'
+    '<table><thead><tr><th>a</th></tr></thead><tbody><tr><td>b</td></tr><tr><td>c</td></tr></tbody></table>'
   expect(actual).toEqual(expected)
 })
 
@@ -1169,7 +1169,7 @@ test('should support table cells w/ style', () => {
     <Markdown children={input} remarkPlugins={[gfm]} rehypePlugins={[plugin]} />
   )
   const expected =
-    '<table>\n<thead>\n<tr>\n<th style="color:red;text-align:left">a</th>\n</tr>\n</thead>\n</table>'
+    '<table><thead><tr><th style="color:red;text-align:left">a</th></tr></thead></table>'
 
   expect(actual).toEqual(expected)
 })