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.

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

HTML parser: comment introduces a span element #454

Closed
MuthuChess opened this issue Aug 10, 2020 · 4 comments · Fixed by #563
Closed

HTML parser: comment introduces a span element #454

MuthuChess opened this issue Aug 10, 2020 · 4 comments · Fixed by #563
Labels
🐛 type/bug This is a problem

Comments

@MuthuChess
Copy link

Hi,

While rendering the below markdown, a span gets introduced under anchor tag because of the comment. The highlighted code can be tested directly at https://rexxars.github.io/react-markdown/

# Overview

<!-- Please do not change this html logo with link -->

<a href="https://rexxars.github.io/" rel="nofollow"><img src="images/test.png" alt="React Markdown" width="300"/></a>

image

Without the comment it renders properly

# Overview

<a href="https://rexxars.github.io/" rel="nofollow"><img src="images/test.png" alt="React Markdown" width="300"/></a>

image

Please suggest how to discard the span introduced between a tag and img.

Regards,
Muthu.

@ChristianMurphy
Copy link
Member

The issue is likely with https://github.com/rexxars/react-markdown/blob/master/src/plugins/html-parser.js
This for example does not add an extra span

# Overview

<!-- Please do not change this html logo with link -->

<a href="https://rexxars.github.io/" rel="nofollow">
  <img src="images/test.png" alt="React Markdown" width="300"/>
</a>

#428 will resolve this issue.

@ChristianMurphy ChristianMurphy added the 🐛 type/bug This is a problem label Oct 8, 2020
@wooorm wooorm changed the title comment introduces a span tag HTML parser: comment introduces a span element Oct 19, 2020
wooorm added a commit that referenced this issue Apr 12, 2021
* 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!

@factoidforrest

This comment was marked as off-topic.

@wooorm
Copy link
Member

wooorm commented May 6, 2022

That is unrelated to this old issue. How to deal with HTML in markdown is documented in the readme: https://github.com/remarkjs/react-markdown#appendix-a-html-in-markdown

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

Successfully merging a pull request may close this issue.

4 participants