Mdx: Support Markdown in nested HTML

[morloy]

Subject of the issue

Currently, MDX crashes on Markdown in nested HTML.
Example:

<div>

* list

</div>

Works.

<div>
  <div>

  * list

  </div>
</div>

Crashes! Resulting in something like:

error UNHANDLED REJECTION


  SyntaxError: unknown: Expected corresponding JSX closing tag for <MDXTag> (30:0)
    28 | <MDXTag name="li" components={components} parentName="ul">
    29 | <MDXTag name="p" components={components} parentName="li">{`list`}</MDXTag>
  > 30 | </div>
       | ^
    31 | </MDXTag>
    32 | </MDXTag>
    33 | </div>

This makes it impossible to use Markdown in a table, since you need to nest some table, tr, and td tags in HTML.

Your environment

Tried with the create-react-app example:

    "mdx.macro": "^0.2.8",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8"

[johno]

Thanks for opening up an issue @morloy! This is something we plan on officially supporting in 1.1.0. I'm going to close this since it's related to #241.

[Undistraction]

@johno Do you plan to support Markdown in only HTML:

<div>
# Example
</div>

or inside a Component?

<Example>
# Example
</Example>

[morloy]

@Undistraction I think that’s already supported. But you need to add a space:

<Example>

# Example
</Example>

[Undistraction]

@morloy Thanks for replying. It seems it is supported, but not officially and is undocumented.

[joostdecock]

I just spent some time trying to figure out how to get this mdx to render the backticks properly:

<Note>
The `@beta` will be removed when we're out of beta
</Note>

Turns out all I had to do was write:

<Note>

The `@beta` will be removed when we're out of beta

</Note>

So yay because it just works but I think it is worthwhile to add this to the docs somewhere.

[polarathene]

@joostdecock That shouldn't be documented as is yet imo, it forces a block doesn't? See my comment in #241 . You can try the button example in the MDX websites playground, notice the style differs from inline declared button?(which doesn't require a newline).

I have a need to conditionally return an inline code block\some text`, which I've done with a separate MDX import to avoid messing with prose. It either renders plain text or requires forcing a newline(though this seems to be from the newline MDX embed wrapping that content in a

` tag, which is I guess understandable? The button is example is probably the same issue actually(I didn't inspect the markup at the time).

Still, if you document it, make it clear that by default the content is wrapped in a paragraph tag(as it becomes a new MDX context/embed?).