markdown in survey description

src/lib/SkillInput.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import markdownIt from 'markdown-it';
-
 	import InfoIcon from './components/icons/InfoIcon.svelte';
+	import MarkdownBlock from './components/MarkdownBlock.svelte';
 
 	export type SkillProps = {
 		id: string;
@@ -13,10 +12,6 @@
 	type Props = { skill: SkillProps };
 
 	let { skill = $bindable() }: Props = $props();
-
-	const md = markdownIt();
-
-	let description = $state(md.render(skill.description ?? ''));
 </script>
 
 <label for={skill.id} class="justify-self-end"
@@ -63,21 +58,5 @@
 	class="border border-slate-400 p-4 backdrop:bg-black/30 backdrop:backdrop-blur-sm"
 >
 	<h2 class="mb-2 text-2xl">{skill.title}</h2>
-	<p class="markdown text-left">{@html description}</p>
+	<MarkdownBlock value={skill.description ?? ''} />
 </div>
-
-<style>
-	.markdown {
-		:global(ul) {
-			list-style-type: disc;
-			margin-left: 1rem;
-		}
-		:global(ol) {
-			list-style-type: decimal;
-			margin-left: 1rem;
-		}
-		:global(a) {
-			color: blue;
-		}
-	}
-</style>

src/lib/components/MarkdownBlock.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { HTMLHtmlAttributes } from 'svelte/elements';
+	import markdownIt from 'markdown-it';
+
+	let { value, class: additionalClass }: { value: string } & HTMLHtmlAttributes = $props();
+
+	const md = markdownIt();
+
+	let htmlContent = $derived.by(() => md.render(value));
+</script>
+
+<p class="{additionalClass} markdown text-left">{@html htmlContent}</p>
+
+<style>
+	.markdown {
+		:global(ul) {
+			list-style-type: disc;
+			margin-left: 1rem;
+		}
+		:global(ol) {
+			list-style-type: decimal;
+			margin-left: 1rem;
+		}
+		:global(a) {
+			color: blue;
+		}
+	}
+</style>

src/routes/(app)/survey/[surveyId]/+page.svelte

@@ -10,6 +10,7 @@
 	import TrashIcon from '$lib/components/icons/TrashIcon.svelte';
 	import { goto } from '$app/navigation';
 	import { success } from '$lib/toast';
+	import MarkdownBlock from '$lib/components/MarkdownBlock.svelte';
 
 	let { data }: { data: PageData } = $props();
 
@@ -59,7 +60,7 @@
 	</div>
 </Navbar>
 {#if data.description}
-	<div class="ml-4 text-xs text-slate-500">{data.description}</div>
+	<MarkdownBlock class="ml-4 mt-4 text-xs text-slate-500" value={data.description} />
 {/if}
 
 <h2 class="ml-2 mt-4 text-2xl">Participants</h2>

src/routes/[accessToken]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import MarkdownBlock from '$lib/components/MarkdownBlock.svelte';
 	import Skills from '$lib/Skills.svelte';
 
 	import type { PageData } from './$types';
@@ -20,7 +21,7 @@
 	<h1 class="justify-self-start text-3xl">{data.title}</h1>
 </nav>
 {#if data.description}
-	<div class="ml-4 text-sm text-slate-500">{data.description}</div>
+	<MarkdownBlock class="ml-4 mt-4 text-sm text-slate-500" value={data.description} />
 {/if}
 <form method="POST" class="text-center">
 	<Skills bind:skills />