HTML table rows get rendered with paragraph tags

[thecodingwizard]

The following input in an mdx file:

<table>
    <tbody>
        <tr>
            <td>hello</td>
            <td>world</td>
        </tr>
        <tr>
            <td>0</td>
            <td>1</td>
        </tr>
    </tbody>
</table>

has the following output:

<table>
    <tbody>
        <tr>
            <p>
                <td>hello</td>
                <td>world</td>
            </p>
        </tr>
        <tr>
            <p>
                <td>0</td>
                <td>1</td>
            </p>
        </tr>
    </tbody>
</table>

The additional paragraph tags cause the table formatting to break. Is there a recommended workaround to this? (I'm not using GFM tables because I want to apply custom styles to some cells of the table.)

This works as expected but looks more messy:

<table>
    <tbody>
        <tr><td>hello</td>
            <td>world</td></tr>
        <tr><td>0</td>
            <td>1</td></tr>
    </tbody>
</table>

Output: (the <p> tag gets moved under tbody but it renders fine...)

<table>
    <tbody>
        <p>
            <tr>
                <td>hello</td>
                <td>world</td>
            </tr>
            <tr>
                <td>0</td>
                <td>1</td>
            </tr>
        </p>
    </tbody>
</table>

[wooorm]

Interesting case! This is somewhat related to https://github.com/wooorm/xdm/issues/38.

There are two ways around this:

Be more explicit about the paragraphs:

<table>
  <tr>
    <td>
      a
    </td>
    <td>
      b
    </td>
  </tr>
</table>

->

<table><tr><td><p>{"a"}</p></td><td><p>{"b"}</p></td></tr></table>

Or to explicitly enter JS(X)-only by using an expression:

{
  <table>
    <tr>
      <td>a</td>
      <td>b</td>
    </tr>
  </table>
}

->

<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

---

Currently, we’re “unraveling” paragraphs that contain a single JSX elements. We could expand that to unravel paragraphs with one or more JSX elements?

[thecodingwizard]

Or to explicitly enter JS(X)-only by using an expression:

Interesting, didn't consider that! Unfortunately that would also mean that the content inside the <td> tags isn't parsed by MDX (so I wouldn't be able to use Latex within the <td> tags). Is it possible to "break out" of the JSX expression and re-enter Markdown (ie. with something like {<td>This is JSX, and this is <MDX>**markdown**</MDX></td>}? This might also be useful when trying to pass in markdown as props, ie. <Tooltip tooltipContent={<MDX>Some **markdown**</MDX>}>Tooltip Text</Tooltip>)

We could expand that to unravel paragraphs with one or more JSX elements?

Would doing that break something like:

I expect this to be a **markdown** paragraph with a custom inline <Tooltip tooltipContent="hello world!">JSX Element</Tooltip>.

Where the Tooltip element will add a tooltip when the user hovers over the text "JSX Element"? (or more generally, how should it handle inline JSX tags that are supposed to be inline? just accept a list of acceptable "inline" JSX elements?) I would still expect the paragraph to be wrapped in a <p> tag in this situation.

[wooorm]

nope, no way to get “back” into MDX/markdown from JS(X)!

Would doing that break something like:

I mean “paragraph”s that contains only one or more JSX elements. Currently a single one is “unraveled”:

<a>whatever</a>

I propose one or more:

<a>whatever</a><b>whatever</b>

Or:

<a>whatever</a>
<b>whatever</b>

But not:

<a>whatever</a> and <b>whatever</b>

Or:

<a>whatever</a> or
<b>whatever</b>

[wooorm]

Released!

[thecodingwizard]

Thanks for pushing such a quick fix! ❤️