limel-markdown: component renders partial HTML if linebreaks separates some elements

[TommyLindh2]

Current behavior

This is a continued conversation from this issue: https://github.com/Lundalogik/lime-elements/issues/3149

Faulty rendering of HTML if line breaks separate opening and closing of elements Here's an example that will render incorrectly:

It will render the </style></span> as text

<div><span><style>

</style></span>

Hello2
</div>

Image from Lime elements docs - v37.61.8

Expected behavior

It shouldn't render the HTML elements, but instead render it as a complete HTML. The above example should just state the text Hello2

Suggested solution by John from previous issue

We should be able to do that. I did a quick test using Parse5 and added a small plugin to the pipeline.

.use(() => {
    return (tree: Node) => {
        visit(tree, 'html', (node: any) => {
            if (node.type === 'html') {
                const documentFragment = parse5.parseFragment(
                    node.value,
                );
                node.value = parse5.serialize(documentFragment);
            }
        });
    };
});

This proved to at least fix the specific example you gave above but we'd probably want to take a bit more time investigating and solving this. I'll create an issue for it on our cooldown board.

Environment

• lime-elements version: 37.61.8

[TommyLindh2]

@john-traas @adrianschmidt - I'll create a PR based on Johns code, and let's start from there

[TommyLindh2]

The component is not meant to render complex HTML, it is meant to render markdown and some simple HTML for formatting content more precise. So we will close this PR/Issue and it's up to the consumer to actually pass a valid content