feat: basic rich text input & format

src/lib/components/RichTextInput.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import type { Delta } from 'typewriter-editor';
+
+	export let delta: Delta;
+
+	let className = '';
+	export { className as class };
+
+	const loadClientComponent = async () => {
+		if (!browser) return;
+		const { default: ClientInput } = await import('./RichTextInput/ClientInput.svelte');
+		return ClientInput;
+	};
+</script>
+
+{#await loadClientComponent() then Input}
+	<svelte:component this={Input} bind:delta class={className}><slot /></svelte:component>
+{/await}

src/lib/components/RichTextInput/ClientInput.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import InputFrame from '$lib/components/InputFrame.svelte';
+	import { tw } from '$lib/tw';
+	import { Delta, Editor, asRoot } from 'typewriter-editor';
+
+	let className = '';
+	export { className as class };
+
+	export let delta: Delta;
+
+	const editor = new Editor();
+	delta = editor.getDelta();
+	editor.on('change', () => {
+		delta = editor.getDelta();
+	});
+
+	$: editor.setDelta(delta);
+</script>
+
+<InputFrame class={tw('overflow-y-auto', className)}>
+	<div class="rich-text w-full outline-none" use:asRoot={editor}>
+		<slot />
+	</div>
+</InputFrame>