Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML parser: output adds extra spans #460

Closed
bentranmyriota opened this issue Aug 26, 2020 · 11 comments · Fixed by #563
Closed

HTML parser: output adds extra spans #460

bentranmyriota opened this issue Aug 26, 2020 · 11 comments · Fixed by #563
Labels
🐛 type/bug This is a problem

Comments

@bentranmyriota
Copy link

bentranmyriota commented Aug 26, 2020 •
edited

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 bentranmyriota changed the title HTML parser stops working HTML parser output is incorrect! Aug 26, 2020
@bentranmyriota
Copy link
Author

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
Copy link
Member

this will be resolved by #428

@ChristianMurphy ChristianMurphy changed the title HTML parser output is incorrect! HTML parser output adds extra spans Oct 8, 2020
@ChristianMurphy ChristianMurphy added the 🐛 type/bug This is a problem label Oct 8, 2020
@wooorm
Copy link
Member

wooorm commented Oct 19, 2020

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.

@wooorm wooorm changed the title HTML parser output adds extra spans HTML parser: output adds extra spans Oct 19, 2020
@bentranmyriota
Copy link
Author

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>

@wooorm wooorm mentioned this issue Oct 29, 2020
Closed
@danestves

This comment has been minimized.

Sign in to view
@justnewbee

This comment has been minimized.

Sign in to view
@justnewbee
Copy link

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
Copy link
Member

wooorm commented Mar 8, 2021

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

@Gervwyk
Copy link

Gervwyk commented Mar 21, 2021 •
edited

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
Copy link
Member

wooorm commented Mar 21, 2021

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

@wooorm wooorm mentioned this issue Apr 9, 2021
Merged
wooorm added a commit that referenced this issue Apr 12, 2021
@wooorm
Replace renderers w/ components, remove HTML parser from core (#563)
77c680f 
* Replace `renderers` w/ `components`
* Replace `allowNode` w/ `allowElement`, which is now given a hast element (as
  the first parameter)
* Replace `allowedTypes` w/ `allowedElements`
* Replace `disallowedTypes` w/ `disallowedElements`
* Change signature of `linkTarget` and `transformLinkUri`, which are now given
  hast children (as the second parameter)
* Change signature of `transformImageUri`, which is now given the `alt` string
  as the second parameter (instead of the fourth)
* Replace `plugins` w/ `remarkPlugins` (backwards compatible change)
* Add `rehypePlugins`
* Change `includeNodeIndex` to `includeElementIndex`: it still sets an `index`,
  but that value now represents the number of preceding elements, it also sets a
  `siblingCount` (instead of `parentChildCount`) with the number of sibling
  elements in the parent
* The `columnAlignment` prop is no longer given to table elements: it’s
  available as `style` on `th` and `td` elements instead
* The `spread` prop is no longer given to list elements: it’s already handled

Remove buggy HTML parsers from core

* If you want HTML, add [`rehype-raw`](https://github.com/rehypejs/rehype-raw)
  to `rehypePlugins` and it’ll work without bugs!
* Remove `allowDangerousHtml` (previously called `escapeHtml`) option: pass
  `rehype-raw` in `rehypePlugins` to allow HTML instead
* Remove `with-html.js`, `plugins/html-parser.js` entries from library
* Remove naïve HTML parser too: either use `rehype-raw` to properly support
  HTML, or don’t allow it at all

Closes GH-549.
Closes GH-563.

The following issues are solved as rehype is now available:

Closes GH-522.
Closes GH-465.
Closes GH-427.
Closes GH-384.
Closes GH-356.

The following issues are solved as a proper HTML parser (`rehype-raw`) is now
available:

Closes GH-562.
Closes GH-460.
Closes GH-454.
Closes GH-452.
Closes GH-433.
Closes GH-386.
Closes GH-385.
Closes GH-345.
Closes GH-320.
Closes GH-302.
Closes GH-267.
Closes GH-259.

The following issues are solved as docs are improved:

Closes GH-251.
@wooorm
Copy link
Member

wooorm commented Apr 12, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 type/bug This is a problem
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Replace renderers w/ components, remove HTML parser from core remarkjs/react-markdown
6 participants
@wooorm @justnewbee @ChristianMurphy @Gervwyk @bentranmyriota @danestves