From 0f8b8c9f2afb1c1071e75ad3e8fe387e994af0b7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 11 Jun 2025 01:53:39 -0700
Subject: [PATCH] Fix problematic onTransaction call

---
 src/lib/components/admin/Editor.svelte        |  3 +++
 .../components/admin/EditorWithUpload.svelte  | 22 ++++++++++++-------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/admin/Editor.svelte b/src/lib/components/admin/Editor.svelte
index c2e4f39..7419818 100644
--- a/src/lib/components/admin/Editor.svelte
+++ b/src/lib/components/admin/Editor.svelte
@@ -90,6 +90,9 @@
 			showLinkBubbleMenu={!simpleMode}
 			showTableBubbleMenu={false}
 			class="editor-content"
+			onEditorReady={(e) => {
+				editor = e
+			}}
 		/>
 	</div>
 </div>
diff --git a/src/lib/components/admin/EditorWithUpload.svelte b/src/lib/components/admin/EditorWithUpload.svelte
index 65d7964..f4348b4 100644
--- a/src/lib/components/admin/EditorWithUpload.svelte
+++ b/src/lib/components/admin/EditorWithUpload.svelte
@@ -58,8 +58,9 @@
 		showTableBubbleMenu = true,
 		onUpdate,
 		showToolbar = true,
-		placeholder = 'Type "/" for commands...'
-	}: EdraProps & { showToolbar?: boolean; placeholder?: string } = $props()
+		placeholder = 'Type "/" for commands...',
+		onEditorReady
+	}: EdraProps & { showToolbar?: boolean; placeholder?: string; onEditorReady?: (editor: Editor) => void } = $props()
 
 	let element = $state<HTMLElement>()
 	let isLoading = $state(true)
@@ -148,6 +149,9 @@
 		return 'Paragraph'
 	}
 
+	// Derived state for current text style to avoid reactive mutations
+	let currentTextStyle = $derived(editor ? getCurrentTextStyle(editor) : 'Paragraph')
+
 	// Calculate dropdown position
 	const updateDropdownPosition = () => {
 		if (dropdownTriggerRef) {
@@ -314,7 +318,7 @@
 	}
 
 	onMount(() => {
-		editor = initiateEditor(
+		const newEditor = initiateEditor(
 			element,
 			content,
 			limit,
@@ -341,10 +345,6 @@
 			{
 				editable,
 				onUpdate,
-				onTransaction: (props) => {
-					editor = undefined
-					editor = props.editor
-				},
 				editorProps: {
 					attributes: {
 						class: 'prose prose-sm max-w-none focus:outline-none'
@@ -354,6 +354,12 @@
 			},
 			placeholder
 		)
+		editor = newEditor
+		
+		// Notify parent component that editor is ready
+		if (onEditorReady) {
+			onEditorReady(newEditor)
+		}
 
 		// Add placeholder
 		if (placeholder && editor) {
@@ -377,7 +383,7 @@
 				<!-- Text Style Dropdown -->
 				<div class="text-style-dropdown">
 					<button bind:this={dropdownTriggerRef} class="dropdown-trigger" onclick={toggleDropdown}>
-						<span>{getCurrentTextStyle(editor)}</span>
+						<span>{currentTextStyle}</span>
 						<svg
 							width="12"
 							height="12"