mdx: RFC: MDX v2 block parsing

Currently, as implemented in MDX v2, the block parser begins a paragraph inside lines that begin with a component. This was initially intended, but I’m not sure it makes sense in practice. It results in some unexpected behavior (IMO).

Consider the following MDX:

# Hello, world!

<Button>Weee</Button>

We end up with:

<h1>Hello, world!</h1>

<Button>
  <p>Weee</p>
</Button>

In v1 we result in:

<h1>Hello, world!</h1>

<Button>Weee</Button>

In v1, you could work around wanting a paragraph with something like:

# Hello, world!

<p>
  <Button>Weee</Button>
</p>

Another unexpected case is directly inlining your paragraph tag for the block:

# Hello, world!

<p>
  Weee
</p>

Which results in:

<h1>Hello, world!</h1>

<p>
  <p>Weee</p>
</p>

Why might you want to do that? It might make sense if your paragraph in MDXProvider has a styling API and you want to make a one off tweak: <p color='red'>Weeee</p>.

tl;dr I’m thinking that it likely makes the most sense to not continue block parsing inside blocks which begin with JSX. It’s more flexible that way.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 23 (13 by maintainers)

Most upvoted comments

For now, in the beta, you can use braces too I believe, as they “exit” markdown: {<Buton>x</Buton>} or <Buton>{x}</Buton>

wooorm on Aug 24, 2020

Hi all! I’m going to close this as it landed on the main, the (now default) branch we’re using to gear up to the MDX@2 release.

The reason is so that it’s more clear which issues still need to be solved already and don’t require further work.

Expect another next release soonish, which might include it, or maybe it’s already released as a beta!

For more info, see https://github.com/mdx-js/mdx/issues/1041.

wooorm on Dec 18, 2020

Thanks for confirming. I just tried it with next.8 and it rendered exactly what I wanted. 😍

michrome on Nov 18, 2020

It is not. Our docs still point to MDX@1 but our work and this thread are focussed on MDX@2

wooorm on Nov 18, 2020

There’s an interesting difference between when you do/don’t want automatic paragraphs injected.

E.g.

In this case you would probably expect the markdown syntax to “just work” including adding paragraphs for the 2 lines below the title:

<Layout>
	# Hello World!
    
    My **Blogpost

    Second Paragraph
</Layout>

However when you create a button like @johno was showing it makes no sense to inject an extra paragraph:

# Hello, world!

<Button>Weee</Button>

Then there’s also the case of “what if I want bold text in the button”:

# Hello, world!

<Button>**Weee**</Button>

Potentially this is a heuristic we could document, where multi-line blocks inject a paragraph for lines without headings and a single line does not.

timneutkens on Jul 23, 2020