Fix to not strip whitespace in th, td

[chitoku-k]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)
• If applicable, I’ve added docs and tests

Description of changes

Since #29 rehype-react removes any whitespaces in table elements but th and td should not be its target when filtering because whitespaces are valid to appear inside them and of course React does not warn about them. This PR removes th and td from the list of target table elements and adds tests to verify they remain the same. Thanks.

[wooorm]

Can you show an example where this is broken?

Here’s some related reading:

• No whitespace warning facebook/react#7081
• Improve validateDOMNesting message for whitespace facebook/react#7515
• table rendering not working remarkjs/remark-react#64
• Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <table> remarkjs/react-markdown#576

[chitoku-k]

Hi, thanks for your prompt response. I think I understood what exactly is happening.

I've made a small reproduction here:
https://github.com/chitoku-k/rehype-react-table-whitespace-test

At first check what happens with the current release:

npm install
npm start

Then apply changes in node_modules/rehype-react/lib/index.js, remove cache, and restart to see how it fixes the problem:

rm -rf node_modules/.cache
npm start

[wooorm]

Investigating this some more, most of why this is annoying is due to #32.

What makes it hard to investigate, is that React often does not show warnings. So it’s hard to check. But I did check, with this tree. Every commented out text is whitespace that React (including 18.2) warns about:

  const tree = h("div", [
    h("p", [" ", h("span", "a"), "\n", h("span", "b."), "\t"]),
    h("table", {}, [
      // " ",
      h("thead", [
        // " ",
        h("tr", [
          // " ",
          h("th", [" ", h("span", "c"), "\n", h("span", "d."), "\t"]),
          // "\n",
          h("th", "e.")
          // "\t"
        ]),
        // "\n",
        h("tr", [])
        // "\t"
      ]),
      // "\n",
      h("tbody", [
        // " ",
        h("tr", [
          // " ",
          h("td", [" ", h("span", "f"), "\n", h("span", "g."), "\t"]),
          // "\n",
          h("td", "h.")
          // "\t"
        ]),
        // "\n",
        h("tr", [])
        // "\t"
      ]),
      // "\t",
      h("tfoot", [
        // " ",
        h("tr", [
          // " ",
          h("td", [" ", h("span", "i"), "\n", h("span", "j."), "\t"]),
          // "\n",
          h("td", "k.")
          // "\t"
        ]),
        // "\n",
        h("tr", [])
        // "\t"
      ])
    ])
  ]);

[wooorm]

Thanks, released in 7.1.2!

[chitoku-k]

Thanks for your detailed explanation and the release too!