This happens because the markdown regex for HTML blocks doesn't recognize the ComplexList element as HTML because of the nested element in the props.
It basically stops recognizing the block at: <ComplexList icon={<Icon type="check" />, which is not recognized as a finished tag.
What's happening next is that the markdown regex for HTML inlines recognizes it as an inline tag and does the following:
<ComplexList icon={<Icon type="check" /> is the opening inline tag
type="info">\n <ul>\n <li>Item 1</li>\n <li>Item 2</li>\n </ul> is parsed as inner HTML
This creates a Slate Text for the type="info"> part, then creates Slate Blocks for the list items
We try to create an Slate Inline for the ComplexList tag with Blocks as children
Slate crashes because this is not allowed
To fix the issue, the markdown regex for HTML have been updated to recognize React Elements as HTML tags completely, so now the HTML blocks regex properly recognize the ComplexList block as HTML.
It is then fully parsed as HTML using the HTMLParser, which ignores non-existing HTML tags and strips it.
You can see in the test file that the type="info"> text remains after stripping the element.
This happens because we use htmlparser2 that also stops its parsing for the tag at the nested element closing tag.
Currently, the markdown parser crashed if markdown includes a complex React Element such as:
This happens because the markdown regex for HTML blocks doesn't recognize the
ComplexListelement as HTML because of the nested element in the props. It basically stops recognizing the block at:<ComplexList icon={<Icon type="check" />, which is not recognized as a finished tag.What's happening next is that the markdown regex for HTML inlines recognizes it as an inline tag and does the following:
<ComplexList icon={<Icon type="check" />is the opening inline tagtype="info">\n <ul>\n <li>Item 1</li>\n <li>Item 2</li>\n </ul>is parsed as inner HTMLTextfor thetype="info">part, then creates SlateBlocksfor the list itemsInlinefor theComplexListtag withBlocksas childrenTo fix the issue, the markdown regex for HTML have been updated to recognize React Elements as HTML tags completely, so now the HTML blocks regex properly recognize the
ComplexListblock as HTML. It is then fully parsed as HTML using the HTMLParser, which ignores non-existing HTML tags and strips it.You can see in the test file that the
type="info">text remains after stripping the element. This happens because we usehtmlparser2that also stops its parsing for the tag at the nested element closing tag.