markdown-to-jsx
markdown-to-jsx copied to clipboard
quantizor
Nested `<p>` when paragraph declared in input
I've got a bit of an odd case where the markdown being pulled in contains some HTML from legacy records. Those look something like this:
Each of the nine characters embodies a way of being in the world — with unique behaviors, motivations, and fears.
<p>
The stories in our latest Dry Gables collection are offered in long-form divided in three parts — so you can save them for long car rides or times when you want to dive deep.
</p>
Effectively, there's a regular markdown paragraph followed by a single newline, and then an HTML paragraph tag opens. I think both rhetorical paragraphs are being treated as a single Markdown paragraph, which results in the entire block getting wrapped in a <p>. The output looks like this:
<p>Each of the nine characters embodies a way of being in the world — with unique behaviors, motivations, and fears.
<p>The stories in our latest Dry Gables collection are offered in long-form divided in three parts — so you can save them for long car rides or times when you want to dive deep.<br></p></p>
Note that there are two closing tags at the end (i.e., it's p > p, not p + p or invalid HTML). Of course, React's validateDOMNesting is complaining about this quite a bit.
I'm not sure if this is something you'd expect markdown-to-jsx to handle gracefully or if I need to find another way of doctoring the input to mitigate the issue. Any advice is welcome!
Given the restrictions of the p-element, wouldn't some other element (div?) be a better default choice for the outer element when rendering as block?
I'm thinking I'm going to look into this issue, since it's quite problematic for my team. Are you able to provide any pointers on where it would be relevant to start looking into the code?
