React-markdown: HTML parser: output adds extra spans

[bentranmyriota]

Hi guys,
I found an issue with HTML parser parsing inline HTML in the markdown file. I used the default configuration as mentioned in the Parsing HTML section.

Markdown content:

Something is not right!
<span>Are you sure?</span>
<span>Yes</span>

Rendered output in the browser:

<p>Something is not right!
<span></span>Are you sure?
<span></span><span></span>Yes
</p>

Any help is appreciated!
Thanks

[bentranmyriota]

I did more investigation. The output from remark-parse after the source is parsed, looks like below for the inline html:

type: "paragraph",
children: [
   0.{type: "html", value: "<span>", position: Position}
   1: {type: "text", value: "Are you sure?", position: Position}
   2: {type: "html", value: "</span>", position: Position}
   3: {type: "text", value: "↵", position: Position}
   4: {type: "html", value: "<span>", position: Position}
   5: {type: "text", value: "Yes", position: Position}
   6: {type: "html", value: "</span>", position: Position}
]

Any idea of how to resolve this?

[ChristianMurphy]

this will be resolved by https://github.com/rexxars/react-markdown/pull/428

[wooorm]

This may also be fixed on 5.0.0, with this change. Could someone confirm whether that works? Otherwise it’s just the HTML parser being funky and the plan is for that to be replaced next major.

[bentranmyriota]

I can confirm that the issue still persists.

Input

Something is not right!
<span>Are you sure?</span>
<span>Yes</span>

Output

<p>Something is not right!
<span></span>Are you sure?
<span></span><span></span>Yes</p>

[danestves]

I can confirm that i'm with this issue too:

Input

<span role="img" aria-label="party popper">🎉</span>

Output

<span>
  <span role="img" aria-label="party popper"></span>
  🎉
  <span></span>
</span>

And we really need this to work because we are transforming the markdown to a11y format