fix: #644 parsing issue inside table rows

Author: quantizor

__snapshots__/index.compiler.spec.tsx.snap

@@ -542,12 +542,15 @@ Markdown's email-style
     Setext-style headers are "underlined" using equal signs (for first-level
 headers) and dashes (for second-level headers). For example:
   </p>
-  <h1>
-    This is an H1
-  </h1>
-  <h2>
-    This is an H2
-  </h2>
+  <pre>
+    <code>
+      This is an H1
+=============
+
+This is an H2
+-------------
+    </code>
+  </pre>
   <p>
     Any number of underlining
     <code>

index.compiler.spec.tsx

@@ -2530,6 +2530,50 @@ describe('GFM tables', () => {
       </table>
     `)
   })
+
+  it('#644 handles nested inlines within table cells', () => {
+    render(
+      compiler(theredoc`
+      | Nested HTML                        | Link                         |
+      | ---------------------------------- | ---------------------------- |
+      | <div><strong>Nested</strong></div> | [I'm a \`link\`](www.google.com) |
+    `)
+    )
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <table>
+        <thead>
+          <tr>
+            <th>
+              Nested HTML
+            </th>
+            <th>
+              Link
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <div>
+                <strong>
+                  Nested
+                </strong>
+              </div>
+            </td>
+            <td>
+              <a href="www.google.com">
+                I'm a
+                <code>
+                  link
+                </code>
+              </a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `)
+  })
 })
 
 describe('arbitrary HTML', () => {

index.tsx

@@ -12,7 +12,7 @@ import * as React from 'react'
  * Analogous to `node.type`. Please note that the values here may change at any time,
  * so do not hard code against the value directly.
  */
-export const RuleType = {
+export var RuleType = {
   blockQuote: '0',
   breakLine: '1',
   breakThematic: '2',
@@ -54,6 +54,10 @@ export const RuleType = {
   unorderedList: '33',
 } as const
 
+if (process.env.NODE_ENV !== 'production') {
+  Object.keys(RuleType).forEach(key => (RuleType[key] = key))
+}
+
 export type RuleType = (typeof RuleType)[keyof typeof RuleType]
 
 const enum Priority {
@@ -622,24 +626,40 @@ function parseTableRow(
   tableOutput: boolean
 ): MarkdownToJSX.ParserResult[][] {
   const prevInTable = state.inTable
+
   state.inTable = true
-  let tableRow = source
+
+  const tableRow = [] as MarkdownToJSX.ParserResult[]
+  let cells = [[]]
+  let acc = ''
+
+  function flush() {
+    if (acc) {
+      tableRow.push.apply(tableRow, parse(acc, state))
+      acc = ''
+    }
+  }
+
+  source
     .trim()
     // isolate situations where a pipe should be ignored (inline code, escaped, etc)
     .split(/( *(?:`[^`]*`|\\\||\|) *)/)
-    .reduce((nodes, fragment) => {
-      if (fragment.trim() === '|')
-        nodes.push(
+    .forEach(fragment => {
+      if (fragment.trim() === '|') {
+        flush()
+
+        tableRow.push(
           tableOutput
             ? { type: RuleType.tableSeparator }
             : { type: RuleType.text, text: fragment }
         )
-      else if (fragment !== '') nodes.push.apply(nodes, parse(fragment, state))
-      return nodes
-    }, [] as MarkdownToJSX.ParserResult[])
-  state.inTable = prevInTable
+      } else if (fragment !== '') {
+        acc += fragment
+      }
+    })
+
+  flush()
 
-  let cells = [[]]
   tableRow.forEach(function (node, i) {
     if (node.type === RuleType.tableSeparator) {
       // Filter out empty table separators at the start/end:
@@ -658,6 +678,9 @@ function parseTableRow(
       cells[cells.length - 1].push(node)
     }
   })
+
+  state.inTable = prevInTable
+
   return cells
 }