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) {
|
function attachTextarea(node: HTMLTextAreaElement) {
|
||||||
textarea = node;
|
textarea = node;
|
||||||
|
resizeTextarea();
|
||||||
const parentCleanup = captureTextarea?.(node);
|
const parentCleanup = captureTextarea?.(node);
|
||||||
return () => {
|
return () => {
|
||||||
parentCleanup?.();
|
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() {
|
function handleInput() {
|
||||||
if (!textarea) return;
|
if (!textarea) return;
|
||||||
const cursorPos = textarea.selectionStart;
|
const cursorPos = textarea.selectionStart;
|
||||||
|
|||||||
@@ -85,24 +85,11 @@ let textareaEl: HTMLTextAreaElement | null = null;
|
|||||||
|
|
||||||
function captureTextarea(node: HTMLTextAreaElement) {
|
function captureTextarea(node: HTMLTextAreaElement) {
|
||||||
textareaEl = node;
|
textareaEl = node;
|
||||||
resizeTextarea();
|
|
||||||
return () => {
|
return () => {
|
||||||
textareaEl = null;
|
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() {
|
function emitChange() {
|
||||||
onTextChange(localText, localMentions);
|
onTextChange(localText, localMentions);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user