fix: table cell parsing isolation

Author: quantizor

.changeset/few-kiwis-retire.md

@@ -0,0 +1,5 @@
+---
+'markdown-to-jsx': patch
+---
+
+Fix parsing isolation of individual table cells.

index.compiler.spec.tsx

@@ -2319,6 +2319,66 @@ describe('GFM tables', () => {
       </table>
     `)
   })
+
+  it('#568 handle inline syntax around table separators', () => {
+    render(compiler(`|_foo|bar_|\n|-|-|\n|1|2|`))
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <table>
+        <thead>
+          <tr>
+            <th>
+              _foo
+            </th>
+            <th>
+              bar_
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              1
+            </td>
+            <td>
+              2
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `)
+  })
+
+  it('#568 handle inline code syntax around table separators', () => {
+    render(compiler(`|\`foo|bar\`|baz|\n|-|-|\n|1|2|`))
+
+    expect(root.innerHTML).toMatchInlineSnapshot(`
+      <table>
+        <thead>
+          <tr>
+            <th>
+              <code>
+                foo|bar
+              </code>
+            </th>
+            <th>
+              baz
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              1
+            </td>
+            <td>
+              2
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `)
+  })
 })
 
 describe('arbitrary HTML', () => {

index.tsx

@@ -623,7 +623,15 @@ function parseTableRow(
 ): MarkdownToJSX.ParserResult[][] {
   const prevInTable = state.inTable
   state.inTable = true
-  const tableRow = parse(source.trim(), state)
+  let tableRow = source
+    .trim()
+    // isolate situations where a pipe should be ignored (inline code, HTML)
+    .split(/( *(?:`[^`]*`|<.*?>.*?<\/.*?>(?!<\/.*?>)|\\\||\|) *)/)
+    .reduce((nodes, fragment, index, arr) => {
+      if (fragment.trim() === '|') nodes.push({ type: RuleType.tableSeparator })
+      else if (fragment !== '') nodes.push.apply(nodes, parse(fragment, state))
+      return nodes
+    }, [] as MarkdownToJSX.ParserResult[])
   state.inTable = prevInTable
 
   let cells = [[]]
@@ -1003,8 +1011,11 @@ function parseBlock(
   children,
   state: MarkdownToJSX.State
 ): MarkdownToJSX.ParserResult[] {
+  const isCurrentlyInline = state.inline || false
   state.inline = false
-  return parse(children, state)
+  const result = parse(children, state)
+  state.inline = isCurrentlyInline
+  return result
 }
 
 const parseCaptureInline: MarkdownToJSX.Parser<{
@@ -1772,24 +1783,6 @@ export function compiler(
       },
     },
 
-    [RuleType.tableSeparator]: {
-      match: function (source, state) {
-        if (!state.inTable) {
-          return null
-        }
-        state.inline = true
-        return TABLE_SEPARATOR_R.exec(source)
-      },
-      order: Priority.HIGH,
-      parse: function () {
-        return { type: RuleType.tableSeparator }
-      },
-      // These shouldn't be reached, but in case they are, be reasonable:
-      render() {
-        return ' | '
-      },
-    },
-
     [RuleType.text]: {
       // Here we look for anything followed by non-symbols,
       // double newlines, or double-space-newlines