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 | 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); }