React-markdown: HTML parser: content gets placed outside the html tag

[akshaykmr080]

The content inside a HTML tag gets placed outside the HTML in the final output

<a href=\"https://en.wikipedia.org/wiki/HTM\">HTML</a>
The above HTML gets rendered as

<a href=\"https://en.wikipedia.org/wiki/HTM\"></a>HTML

MY code -

const allowedMarkdownTypes = [
  'paragraph',
  'text',
  'emphasis',
  'strong',
  'link',
  'blockquote',
  'delete',
  'list',
  'listItem',
  'heading',
  'code',
  'thematicBreak',
  'table',
  'tableHead',
  'tableBody',
  'tableRow',
  'tableCell',
  'html',
]

const markdown = "<a href=\"https://en.wikipedia.org/wiki/HTM\">HTML</a>, and will require the <code>html-parser</code> AST plugin to be loaded, in addition to setting the <code>escapeHtml</code> property to false."


<ReactMarkdown
          source={markdown}
          allowedTypes={allowedMarkdownTypes}
          escapeHtml={false}
          linkTarget='_blank'
/>

[dancrevier]

Any luck on this? I'm hitting the same issue.

[dancrevier]

With a lot of debugging, I figured out what's going on. If you build the sample, you'll see it's got:
node_modules/unist-visit/node_modules/unist-util-visit-parents and from package-lock.json, you can see it's version 2.0.1.
node_modules/unist-visit-parents and from pacakge-lock.json, you can see this is version 1.1.2.
If you build the demo app, it includes both and the 2.0.1 wins. In my app, for whatever reason, 1.1.2 won. 1.1.2 doesn't support the reverse parameter and so when parseHtml calls visit, it doesn't do it in the reverse order and things get messed up.

I worked around this problem by adding:
"unist-util-visit-parents": "^2.0.0"
to my app's package.json.

I am not enough of an npm expert to know exactly what's going on and what the root cause is. I think react-markdown could work around the problem by adding the same line to the package.json, but there may be a better solution.

[burgessa23]

I'm seeing the same thing, de-duping to "unist-util-visit-parents": "^2.0.0" doesn't seem to have fixed issues with nested html tags like tables

[praneybehl]

Same Issue, content gets placed outside.
Adding "unist-util-visit-parents": "^2.0.0" to the package.json did fix it for me too.

[ricvillagrana]

Same issue "unist-util-visit-parents": "^2.0.0" didn't fix the problem for me.

[emptyOne322]

same issue

[NamespaceValentine]

Having the same issue, forcing "unist-util-visit-parents": "^2.0.0" did not solve it for me. Neither did forcing "unist-util-visit": "^2.0.0",

[NamespaceValentine]

For myself, I fixed this issue by using:
const ReactMarkdown = require("react-markdown/with-html");

It seems that the normal flow can no longer parse html effectively, not sure when/how that happened.

[emptyOne322]

For myself, I fixed this issue by using:
const ReactMarkdown = require("react-markdown/with-html");

It seems that the normal flow can no longer parse html effectively, not sure when/how that happened.

not solving issue for me. i have a ssr and everething is fine on server side. But issue apears in browser. Maybee something wrong with bundling with webpack.

[emptyOne322]

Same Issue, content gets placed outside.
Adding "unist-util-visit-parents": "^2.0.0" to the package.json did fix it for me too.

Solved issue for me

[h23]

Same Issue, content gets placed outside.
Adding "unist-util-visit-parents": "^2.0.0" to the package.json did fix it for me too.

Solved issue for me

Solved issue for me too

[ChristianMurphy]

this appears to be coming from

https://github.com/remarkjs/react-markdown/blob/9b4eb84a78c066a73c1d4a8cb8ed5428baef8e57/package-lock.json#L6662-L6669

which comes from

https://github.com/remarkjs/react-markdown/blob/9b4eb84a78c066a73c1d4a8cb8ed5428baef8e57/package.json#L42

this would need to be updated upstream at

https://gitlab.com/staltz/mdast-add-list-metadata#README

[wooorm]

I believe this is 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.