Self-closing hyphenated shortcoded tag is different when not void

[valse]

Subject of the issue

Hi, I'm dealing with a strange behavior: if I set a shortcode like this:

const shortcodes = {
 "cc-image": Image,
}

<MDXProvider components={shortcodes}>
   <MDXRenderer>{data.post.body}</MDXRenderer>
</MDXProvider>

and I use it self-closed

# Title

Paragraph

<cc-image />

the rendered html is like:

<h1>Title</h1>
<p>Paragraph</p>
<div class='image'></div>

if I use the same component but not self-closed, the final html include an extra wrapper paragraph for the component itself:

# Title

Paragraph

<cc-image></cc-image>

the rendered html is like:

<h1>Title</h1>
<p>Paragraph</p>
<p>
   <div class='image'></div>
</p>

Expected behaviour

Even if not self-closed the component must not be wrapped in an extra paragraph.

I don't know why but it happens only if the shortcoded tag includes an hyphen :-/

[johno]

Thanks for reporting! This looks like a bug in the remark tokenization.

[johno]

Also, strangely enough, if there's a newline between the open and close tag it is parsed they way we'd expect:

# Title

Paragraph

<cc-image>
</cc-image>

[wooorm]

Weird indeed! This will be fixed in 2.0.0 as we’re rewriting the parser to solve amongst other things, this problem!

[johno]

I’ve confirmed this is indeed fixed in the v2 prerelease, so going to go ahead and close this.

If you want to give it a shot now: @mdx-js/mdx@next.