Wrong output If a first character in a paragraph of the HTML is <strong>

[Arcane36]

There is a bug, where if the first character in <p> in HTML is <strong>, it outputs wrong HTML. Basically I am trying to use the library to convert string HTML from RichText into a raw HTML in my page.

import React from "react";
import Markdown from 'markdown-to-jsx';

const markdownText = `<p><strong>Test</strong>asda sdasd asd asd asd as d</p>`;

export default function App() {
  return (
    <div>
      <Markdown>{markdownText}</Markdown>
    </div>
  );
}

this outputs to:

<p><strong>Test</strong><p>asda sdasd asd asd asd as d</p></p>

instead of

<p><strong>Test</strong>asda sdasd asd asd asd as d</p>

It basically nests the paragraphs which is invalid and creates errors in console.

If I change it to:

<p>T<strong>est</strong>asda sdasd asd asd asd as d</p>

it correctly outputs to:

<p>T<strong>est</strong>asda sdasd asd asd asd as d</p>

[marcinkrasowski]

I've encountered the same problem, and I believe it applies not only to strong but probably to every inline tag, as the same occurs for

<p><b>Lorem ipsum</b> dolor sit amet</p>

It also started happening only from 7.5.1, in older versions this did not occur.

[brianfryer]

I've encountered the same problem, and I believe it applies not only to strong but probably to every inline tag, as the same occurs for

<p><b>Lorem ipsum</b> dolor sit amet</p>

It also started happening only from 7.5.1, in older versions this did not occur.

Not just "inline tags". Rather, anything that looks like this:

<p><strong>text</strong> more text</p>
  ^^ the first child of the <p> is a <strong> and will result in:
     <p><strong>text</strong></p>
     <p>more text</p>

<p><em>text</em> more text</p>
  ^^ the first child of the <p> is a <em> and will result in:
     <p><em>text</em></p>
     <p>more text</p>

<p><CustomComponent /> more text</p>
  ^^ the first child of the <p> is a <CustomComponent> and will result in:
     <p><CustomComponent /></p>
     <p>more text</p>

<Tag><Tag /> more text</Tag>
    ^^ the first child of the <Tag> is a <Tag> and will result in:
       <Tag><Tag /></Tag>
       <Tag>more text</Tag>

When a text character is placed before the first child will render without issue:

<p>beginning text <strong>text</strong> more text</p>
  ^^ the first child of the <p> is plain text and will result in:
  <p>beginning text <strong>text</strong> more text</p>

<p>beginning text <em>text</em> more text</p>
  ^^ the first child of the <p> is plain text and will result in:
  <p>beginning text <em>text</em> more text</p>

<p>beginning text <CustomComponent /> more text</p>
  ^^ the first child of the <p> is a <CustomComponent /> and will result in:
  <p>beginning text <CustomComponent /> more text</p>

<Tag>beginning text <Tag /> more text</Tag>
    ^^ the first child of the <Tag> is a <Tag /> and will result in:
    <Tag><Tag /> more text</Tag>