init

src/lib/components/MarkdownEditor.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import Markdown from './Markdown.svelte';
+
+	let {
+		value = $bindable(),
+		name
+	}: { value: string; onsave?: () => Promise<void>; name?: string } = $props();
+
+	let area: HTMLTextAreaElement = $state()!;
+</script>
+
+<div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
+	<div
+		class="relative min-h-40 w-full rounded-lg border-0 bg-gray-50 text-sm focus:border-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-700 dark:focus:ring-primary-500"
+	>
+		<textarea
+			bind:value
+			bind:this={area}
+			{name}
+			class="min-h-full w-full rounded-lg border-0 bg-gray-50 p-2.5 dark:bg-gray-700"
+		></textarea>
+	</div>
+
+	<Markdown src={value} class="overflow-scroll" />
+</div>