refactor(person-mention): move autoresize into PersonMentionEditor
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>
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user