magidoc icon indicating copy to clipboard operation
magidoc copied to clipboard

Markdown rendering for Svelte does not work with content nested in html tags like <details>

Open anly2 opened this issue 6 months ago • 2 comments

Describe the bug

The rendering of markdown contents breaks when there is nested content in html tags like <details>

Example:

<details>
  <summary>Examples</summary>

```
// Amazing code
```
</details>

Marked parses the contents correctly, but probably not in the expected way.
The resulting tokens for the above example are (abbreviated):

[
  {"type": "html", "text": "<details>\n  <summary>Examples</summary>"},
  {"type": "code", "code": "// Amazing code" }
  {"type": "html", "text": "</details>"}
]

Notice how the opening <details> and its corresponding closing tag </details> are in separate tokens.

Then the rendering - the recursive component instantiation - does its thing.
But the MarkdownHtml component, relies on the svelte {@html} directive, and messes things up (because of the unexpected token structure).
The {@html} directive implicitly closes unterminated tags. Which is the root cause of the problem.

Technically, marked parsed things correctly, because if the html it would produce was just joined together and rendered as a whole, things would work fine.

Reproduction

Try to render the following in svelte:

<details>
  <summary>Examples</summary>

```
// Amazing code
```
</details>

Logs

No response

System Info

"svelte": "^4.2.8",
"@sveltejs/kit": "^1.30.4",

Any browser, though tried with Firefox.

Severity

Serious, but I can work around it

anly2 avatar Jul 25 '24 18:07 anly2