From 6f3f7c7e039f951acbca6a2d2e1b79e0d06cc11b Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <cabassut.frederic@gmail.com>
Date: Thu, 5 Mar 2026 23:00:58 +0100
Subject: [PATCH] fix: undo/redo buttons now reactively update on editor
 changes

Add a tick counter that increments on every TipTap transaction,
propagated from TiptapEditor through NoteEditor to FormattingToolbar.
This forces Svelte 5 to re-evaluate canUndo/canRedo state in the
template since plain object method calls aren't tracked reactively.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/components/FormattingToolbar.svelte | 14 +++++++++-----
 src/lib/components/NoteEditor.svelte        |  4 +++-
 src/lib/components/TiptapEditor.svelte      |  4 +++-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/FormattingToolbar.svelte b/src/lib/components/FormattingToolbar.svelte
index 771136b..eb5bc59 100644
--- a/src/lib/components/FormattingToolbar.svelte
+++ b/src/lib/components/FormattingToolbar.svelte
@@ -26,10 +26,14 @@
 	} from 'lucide-svelte';
 
 	interface Props {
+		tick?: number;
 		editor: Editor | undefined;
 	}
 
-	let { editor }: Props = $props();
+	let { editor, tick }: Props = $props();
+
+	function canUndo() { void tick; return editor?.can().chain().focus().undo().run() ?? false; }
+	function canRedo() { void tick; return editor?.can().chain().focus().redo().run() ?? false; }
 
 	let openDropdown: string | null = $state(null);
 	let linkUrl: string = $state('');
@@ -111,8 +115,8 @@
 	<!-- History -->
 	<button
 		onclick={() => editor?.chain().focus().undo().run()}
-		disabled={!editor?.can().undo()}
-		class={btnClass(false, !editor?.can().undo())}
+		disabled={!canUndo()}
+		class={btnClass(false, !canUndo())}
 		title="Undo (Ctrl+Z)"
 		data-testid="format-undo"
 	>
@@ -120,8 +124,8 @@
 	</button>
 	<button
 		onclick={() => editor?.chain().focus().redo().run()}
-		disabled={!editor?.can().redo()}
-		class={btnClass(false, !editor?.can().redo())}
+		disabled={!canRedo()}
+		class={btnClass(false, !canRedo())}
 		title="Redo (Ctrl+Shift+Z)"
 		data-testid="format-redo"
 	>
diff --git a/src/lib/components/NoteEditor.svelte b/src/lib/components/NoteEditor.svelte
index 97f6c77..b71fdc8 100644
--- a/src/lib/components/NoteEditor.svelte
+++ b/src/lib/components/NoteEditor.svelte
@@ -29,6 +29,7 @@
 	let rawMarkdownMode = $state(false);
 	let textareaEl: HTMLTextAreaElement | undefined = $state();
 	let tiptapEditor: Editor | undefined = $state();
+	let editorTick = $state(0);
 
 	let bgStyle = $state('');
 	$effect(() => {
@@ -112,13 +113,14 @@
 				{content}
 				onUpdate={(md) => (content = md)}
 				onEditor={(e) => (tiptapEditor = e)}
+				onTransaction={() => editorTick++}
 				placeholder="Take a note..."
 			/>
 		{/if}
 
 		<!-- Formatting toolbar -->
 		{#if !rawMarkdownMode && !checklistMode}
-			<FormattingToolbar editor={tiptapEditor} />
+			<FormattingToolbar editor={tiptapEditor} tick={editorTick} />
 		{/if}
 
 		<!-- Toolbar -->
diff --git a/src/lib/components/TiptapEditor.svelte b/src/lib/components/TiptapEditor.svelte
index 73c83c1..6749be0 100644
--- a/src/lib/components/TiptapEditor.svelte
+++ b/src/lib/components/TiptapEditor.svelte
@@ -12,10 +12,11 @@
 		content: string;
 		onUpdate: (markdown: string) => void;
 		onEditor?: (editor: Editor) => void;
+		onTransaction?: () => void;
 		placeholder?: string;
 	}
 
-	let { content, onUpdate, onEditor, placeholder = 'Take a note...' }: Props = $props();
+	let { content, onUpdate, onEditor, onTransaction, placeholder = 'Take a note...' }: Props = $props();
 
 	let element: HTMLDivElement | undefined = $state();
 	let editor: Editor | undefined = $state();
@@ -38,6 +39,7 @@
 			onTransaction: () => {
 				// Trigger Svelte reactivity for active state checks
 				editor = editor;
+				onTransaction?.();
 			}
 		});