Mdx: Headers tags wraps with paragraph

[jeetiss]

Subject of the issue

h1 and H1 tags wraps with unnecessary paragraph tag

Steps to reproduce

you can reproduce this bug in playground

Expected behaviour

h1 and H1 tags renders without wrapping p

Actual behaviour

every h1 and H1 tag wraps with paragraph tag

[nkuehn]

Can confirm this in my project, GatsbyJS / React validates and warns with validateDOMNesting(...): <h2> cannot appear as a descendant of <p>.

It's actually not just unnecessary but not valid HTML.

Also mentioned here on spectrum: https://spectrum.chat/mdx/general/should-literal-h1-be-contained-in-a-p~d6bd0b1d-0a94-4641-b23d-b815e61914e7?authed=true

[chasemccoy]

Also seeing this on my site! In my case it caused some weird visual issues because of the invalid DOM nesting 🙈

[chasemccoy]

I am curious what version this broke in? I am currently on 1.0.20

[johno]

Looks like it was a 1.0 regression @chasemccoy. I've opened up #604 with a fix. Thanks for reporting @jeetiss!

[chasemccoy]

@johno thanks man!

[zero1five]

I can also reproduce this. Is there any new progress please?

[endiliey]

Anything blocking #604 ? :) Would love to help in some way

[johno]

Anything blocking #604 ? :) Would love to help in some way

Mostly just time : )

Happy to coach someone through picking that PR up, adding some tests and fixing the regex.

[johno]

Going to pick this back up today and see if I can get a fix in. Will keep you folks posted. 🤞

[endiliey]

Thank you @johno

Its unfortunate that im on the newbie side for markdown and ast parsing so cant help much. But will keep an eye on the repo and somehow help along if possible

Edit: i can help test if the fix is working later on though 😂

[johno]

This should now be fixed in @mdx-js/[email protected]. Please give it a try and let me know if you encounter any issues.

cc/ @endiliey (a thorough test would be greatly appreciated 💟)

[endiliey]

Seems to be working great.

Before

After

Great work :party