magidoc
magidoc copied to clipboard
Markdown rendering for Svelte does not work with content nested in html tags like <details>
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