Parse raw HTML where needed

Finally support <img>s in descriptions and <details>s in comments, among others

Author: WarningImHack3r

package.json

@@ -36,6 +36,7 @@
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.6",
+		"rehype-raw": "^7.0.0",
 		"semver": "^7.6.3",
 		"shiki": "^1.14.1",
 		"svelte": "^4.2.19",

pnpm-lock.yaml

@@ -7,10 +7,12 @@
 	 */
 	import Markdown, { type Plugin } from "svelte-exmarkdown";
 	import { gfmPlugin } from "svelte-exmarkdown/gfm";
+	import rehypeRaw from "rehype-raw";
 	import { cn } from "$lib/utils";
 
 	export let markdown: string;
 	export let inline = false;
+	export let parseRawHtml = false;
 	export let additionalPlugins: Plugin[] = [];
 
 	let className: string | undefined | null = undefined;
@@ -26,5 +28,12 @@
 		className
 	)}
 >
-	<Markdown md={markdown} plugins={[gfmPlugin(), ...additionalPlugins]} />
+	<Markdown
+		md={markdown}
+		plugins={[
+			gfmPlugin(),
+			...(parseRawHtml ? [{ rehypePlugin: rehypeRaw }] : []),
+			...additionalPlugins
+		]}
+	/>
 </span>

src/lib/components/MarkdownRenderer.svelte

@@ -145,7 +145,7 @@
 					</Accordion.Trigger>
 					<!-- Body -->
 					<Accordion.Content class="mx-auto sm:w-3/4">
-						<MarkdownRenderer markdown={entity.body} class="max-w-full text-base" />
+						<MarkdownRenderer markdown={entity.body} parseRawHtml class="max-w-full text-base" />
 					</Accordion.Content>
 				</Accordion.Item>
 			{/each}
@@ -206,6 +206,7 @@
 					{:then highlighter}
 						<MarkdownRenderer
 							markdown={info.body || "_No description provided_"}
+							parseRawHtml
 							class="max-w-full"
 							additionalPlugins={[
 								{ renderer: { p: BodyRenderer } },
@@ -272,7 +273,11 @@
 					</div>
 					<!-- Body -->
 					<div class="p-4">
-						<MarkdownRenderer markdown={comment.body || "_Empty comment_"} class="w-full" />
+						<MarkdownRenderer
+							markdown={comment.body || "_Empty comment_"}
+							parseRawHtml
+							class="w-full"
+						/>
 					</div>
 				</div>
 			{/each}