Remove whitespace between unraveled text nodes

Whitespace should be fine but React still fails on it. Closes GH-2000.
mdx-js · Feb 9, 2023 · 4dc5c8c · 4dc5c8c
1 parent 8f85b30
commit 4dc5c8c
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 2 deletions.
diff --git a/packages/mdx/lib/plugin/remark-mark-and-unravel.js b/packages/mdx/lib/plugin/remark-mark-and-unravel.js
@@ -1,4 +1,5 @@
 /**
+ * @typedef {import('mdast').Content} Content
  * @typedef {import('mdast').Root} Root
  *
  * @typedef {import('remark-mdx')} DoNotTouchAsThisImportItIncludesMdxInTree
@@ -47,6 +48,9 @@ export function remarkMarkAndUnravel() {
         if (all && oneOrMore) {
           offset = -1
 
+          /** @type {Array<Content>} */
+          const newChildren = []
+
           while (++offset < children.length) {
             const child = children[offset]
 
@@ -59,9 +63,18 @@ export function remarkMarkAndUnravel() {
               // @ts-expect-error: content model is fine.
               child.type = 'mdxFlowExpression'
             }
+
+            if (
+              child.type === 'text' &&
+              /^[\t\r\n ]+$/.test(String(child.value))
+            ) {
+              // Empty.
+            } else {
+              newChildren.push(child)
+            }
           }
 
-          parent.children.splice(index, 1, ...children)
+          parent.children.splice(index, 1, ...newChildren)
           return index
         }
       }

diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js
@@ -1256,7 +1256,7 @@ test('MDX (JSX)', async () => {
     renderToStaticMarkup(
       React.createElement(await run(compileSync('<a>b</a>\t<b>c</b>')))
     ),
-    '<a>b</a>\n\t\n<b>c</b>',
+    '<a>b</a>\n<b>c</b>',
     'should unravel JSX (text) and whitespace as only children'
   )
 
@@ -1363,6 +1363,46 @@ test('MDX (JSX)', async () => {
     '<i>the sum of one and one is: 2</i>',
     'should support JSX in expressions'
   )
+
+  // Important: there should not be whitespace in the `tr`.
+  // This is normally not present, but unraveling makes this a bit more complex.
+  // See: <https://github.com/mdx-js/mdx/issues/2000>.
+  assert.equal(
+    compileSync(`<table>
+  <thead>
+    <tr>
+      <th>a</th>
+      <th>b</th>
+    </tr>
+  </thead>
+</table>`).value,
+    [
+      '/*@jsxRuntime automatic @jsxImportSource react*/',
+      'import {jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";',
+      'function _createMdxContent(props) {',
+      '  return _jsx("table", {',
+      '    children: _jsx("thead", {',
+      '      children: _jsxs("tr", {',
+      '        children: [_jsx("th", {',
+      '          children: "a"',
+      '        }), _jsx("th", {',
+      '          children: "b"',
+      '        })]',
+      '      })',
+      '    })',
+      '  });',
+      '}',
+      'function MDXContent(props = {}) {',
+      '  const {wrapper: MDXLayout} = props.components || ({});',
+      '  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {',
+      '    children: _jsx(_createMdxContent, props)',
+      '  })) : _createMdxContent(props);',
+      '}',
+      'export default MDXContent;',
+      ''
+    ].join('\n'),
+    'should support JSX in expressions'
+  )
 })
 
 test('MDX (ESM)', async () => {