remarkablemark / html-react-parser

📝 HTML to React parser.
https://b.remarkabl.org/html-react-parser
MIT License
2.13k stars 129 forks source link

Parsing wordpress category content #864

Open ElSeniorMikael opened 1 year ago

ElSeniorMikael commented 1 year ago

Expected Behavior

Parsing the \r\n

Actual Behavior

it remove \r and keep \n

Steps to Reproduce

const text = "toto \r\n toto"

parse(text)

output "toto toto"

description

Wordpress now output some \r\n inside their description field of their category and im using wordpress as an headless cms and i fetch the data on my nextjs project but when i parse the data, im losing the flow of my content and whenever i try to use the "replace" option with the parse, it already have cleaned the "\r" from the text and i only can see those "\n" is there anyway i could include those during the parsin or i would have to replace \n by something like =>

remarkablemark commented 1 year ago

@ElSeniorMikael can you help provide a reproducible example?

ElSeniorMikael commented 1 year ago

https://codesandbox.io/p/sandbox/wispy-haze-cd7wwp?file=%2Fpages%2Findex.js

ElSeniorMikael commented 1 year ago

I'm expecting for it to make it a breaking line

remarkablemark commented 1 year ago

I can confirm that I can reproduce the issue in https://codesandbox.io/p/sandbox/html-react-parser-864-0v3xvs

This bug is coming from html-dom-parser

remarkablemark commented 1 year ago

@ElSeniorMikael can you do this as a workaround?

const text = "toto \r\n toto"

parse(text.replace(/\r/g, "\n"))

Or:

const text = "toto \r\n toto"

parse(text.replace(/\r|\n/g, "<br>"))

See CodeSandbox

It seems that innerHTML strips out carriage returns on the client parser