From 49db82e1bd94b6b2184202c27e45963a0adce75f Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 29 Apr 2026 01:08:12 +0200
Subject: [PATCH] refactor(person-mention): move autoresize into
 PersonMentionEditor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Felix #5: TranscriptionBlock had a `\$effect(() => { void localText; ... })`
hack to re-trigger autoresize on text change, plus a captureTextarea
callback that the parent only used to size a node it didn't own.

The editor owns the textarea — it should also size it. Move the
autoresize \$effect into PersonMentionEditor so the parent only
captures the node when it genuinely needs to read selection bounds
(quote selection still works).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/PersonMentionEditor.svelte  | 14 ++++++++++++++
 .../src/lib/components/TranscriptionBlock.svelte   | 13 -------------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/PersonMentionEditor.svelte b/frontend/src/lib/components/PersonMentionEditor.svelte
index 78094c06..e194e0e2 100644
--- a/frontend/src/lib/components/PersonMentionEditor.svelte
+++ b/frontend/src/lib/components/PersonMentionEditor.svelte
@@ -43,6 +43,7 @@ let debounceTimer: ReturnType<typeof setTimeout> | undefined;
 
 function attachTextarea(node: HTMLTextAreaElement) {
 	textarea = node;
+	resizeTextarea();
 	const parentCleanup = captureTextarea?.(node);
 	return () => {
 		parentCleanup?.();
@@ -50,6 +51,19 @@ function attachTextarea(node: HTMLTextAreaElement) {
 	};
 }
 
+function resizeTextarea() {
+	if (!textarea) return;
+	textarea.style.height = 'auto';
+	textarea.style.height = `${textarea.scrollHeight}px`;
+}
+
+// Autoresize on every value change — read `value` so this $effect
+// re-runs whenever the bound prop is reassigned.
+$effect(() => {
+	void value;
+	resizeTextarea();
+});
+
 function handleInput() {
 	if (!textarea) return;
 	const cursorPos = textarea.selectionStart;
diff --git a/frontend/src/lib/components/TranscriptionBlock.svelte b/frontend/src/lib/components/TranscriptionBlock.svelte
index ff866e08..982b43ff 100644
--- a/frontend/src/lib/components/TranscriptionBlock.svelte
+++ b/frontend/src/lib/components/TranscriptionBlock.svelte
@@ -85,24 +85,11 @@ let textareaEl: HTMLTextAreaElement | null = null;
 
 function captureTextarea(node: HTMLTextAreaElement) {
 	textareaEl = node;
-	resizeTextarea();
 	return () => {
 		textareaEl = null;
 	};
 }
 
-function resizeTextarea() {
-	if (!textareaEl) return;
-	textareaEl.style.height = 'auto';
-	textareaEl.style.height = `${textareaEl.scrollHeight}px`;
-}
-
-$effect(() => {
-	// Re-run autoresize whenever the bound text changes.
-	void localText;
-	resizeTextarea();
-});
-
 function emitChange() {
 	onTextChange(localText, localMentions);
 }