search

remarkjs / react-markdown

Markdown component for React
https://remarkjs.github.io/react-markdown/
MIT License
12.98k stars 866 forks source link

HTML parser: output adds extra spans #460

Closed bentranmyriota closed 3 years ago

bentranmyriota commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

wooorm commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

justnewbee commented 3 years ago

right... i also ran into this issue, and we really need it to work

react-markdown version is 5.0.3

input

<button data-xx>xx</button>

output

<span><button data-xx=""></button></span>xx<span></span>
justnewbee commented 3 years ago

I cannot wait... so I wrote a very small markdown component based on micromark - https://www.npmjs.com/package/@alicloud/rc-markdown It ships gfm and directive but no other extensions for the moment, suites my need now.

wooorm commented 3 years ago

You could also look at https://github.com/remarkjs/react-remark. Fwiw, if you’re having trouble with types, then PRs are appreciated.

Gervwyk commented 3 years ago

Same issue on our side: react-markdown version is 5.0.3

input
Score: <span style="color: #237804;" ><b>100</b></span>
output
<span>Score: <span><span style="color: #237804;"></span></span><b>93.6</b></span>

Anything we can do to help fix this?

wooorm commented 3 years ago

@Gervwyk Thanks for offering to help. Specifically, this issue is solved by https://github.com/remarkjs/react-markdown/issues/549. Alternatively, there are many ways to contribute, through code, financially, etc: https://github.com/remarkjs/.github/blob/main/contributing.md#contributions

wooorm commented 3 years ago

This should be solved by landing GH-563 today, which will soon be released in v6.0.0!