From 9ffa1995a02bfbffe1884e04881e6fa51ae983e7 Mon Sep 17 00:00:00 2001
From: Steffen Becker <stffn.becker@gmail.com>
Date: Sun, 24 May 2026 13:48:26 +0200
Subject: [PATCH] feat: add Editor component (TipTap instance, auto-save
 integration)

---
 src/lib/editor/Editor.svelte | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/lib/editor/Editor.svelte

diff --git a/src/lib/editor/Editor.svelte b/src/lib/editor/Editor.svelte
new file mode 100644
index 0000000..8f972b0
--- /dev/null
+++ b/src/lib/editor/Editor.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { Editor } from '@tiptap/core';
+  import { extensions } from './extensions';
+  import { saveDocument, loadDocument } from '../storage/autosave';
+  import '../../styles/editor.css';
+
+  let { editor = $bindable() }: { editor: Editor | null } = $props();
+
+  let element: HTMLDivElement;
+
+  onMount(() => {
+    const saved = loadDocument();
+
+    editor = new Editor({
+      element,
+      extensions,
+      content: saved || undefined,
+      onTransaction: () => {
+        // Force Svelte reactivity update
+        editor = editor;
+      },
+      onUpdate: ({ editor: e }) => {
+        saveDocument(e.getJSON());
+      },
+    });
+  });
+
+  onDestroy(() => {
+    editor?.destroy();
+  });
+</script>
+
+<div class="editor">
+  <div bind:this={element}></div>
+</div>