Fix to improve removal of whitespace between tables

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

Related-to GH-28.
Related-to GH-29.
Closes GH-32.

lib/index.js

@@ -26,6 +26,7 @@
 import {toH} from 'hast-to-hyperscript'
 // @ts-expect-error: hush.
 import tableCellStyle from '@mapbox/hast-util-table-cell-style'
+import {whitespace} from 'hast-util-whitespace'
 
 const own = {}.hasOwnProperty
 const tableElements = new Set([
@@ -90,7 +91,7 @@ export default function rehypeReact(options) {
     // See: <https://github.com/facebook/react/pull/7515>.
     // See: <https://github.com/remarkjs/remark-react/issues/64>.
     if (children && tableElements.has(name)) {
-      children = children.filter((child) => child !== '\n')
+      children = children.filter((child) => !whitespace(child))
     }
 
     if (options.components && own.call(options.components, name)) {

package.json

@@ -49,6 +49,7 @@
     "@types/hast": "^2.0.0",
     "@types/react": "^17.0.0",
     "hast-to-hyperscript": "^10.0.0",
+    "hast-util-whitespace": "^2.0.0",
     "unified": "^10.0.0"
   },
   "devDependencies": {

test.js

@@ -168,6 +168,22 @@ test('React ' + React.version, (t) => {
     'should transform an element with align property'
   )
 
+  t.deepEqual(
+    processor.stringify(
+      u('root', [
+        h('table', {}, ['\n  ', h('tbody', {}, ['\n  ', h('tr', {})])])
+      ])
+    ),
+    React.createElement('div', {}, [
+      React.createElement('table', {key: 'h-1'}, [
+        React.createElement('tbody', {key: 'h-2'}, [
+          React.createElement('tr', {key: 'h-3'}, undefined)
+        ])
+      ])
+    ]),
+    'should transform a table with whitespace'
+  )
+
   const headingNode = h('h1')
   /** @param {object} props */
   const Heading1 = function (props) {