frontend/src/lib/components/TranscriptionBlock.svelte

@@ -36,10 +36,20 @@ let {
 	onRetry
 }: Props = $props();
 
+let localText = $state(text);
 let commentOpen = $state(false);
 let selectedQuote = $state<string | null>(null);
 let textareaEl = $state<HTMLTextAreaElement | null>(null);
 
+// Sync from prop only when switching to a different block (not on save responses)
+let prevBlockId = $state(blockId);
+$effect(() => {
+	if (blockId !== prevBlockId) {
+		localText = text;
+		prevBlockId = blockId;
+	}
+});
+
 let leftBorderClass = $derived(
 	saveState === 'error' ? 'border-l-2 border-error' : active ? 'border-l-2 border-turquoise' : ''
 );
@@ -65,6 +75,7 @@ function autoresize(node: HTMLTextAreaElement) {
 
 function handleInput(event: Event) {
 	const target = event.target as HTMLTextAreaElement;
+	localText = target.value;
 	onTextChange(target.value);
 }
 
@@ -79,7 +90,7 @@ function captureSelectionAndOpenComments() {
 		const start = textareaEl.selectionStart;
 		const end = textareaEl.selectionEnd;
 		if (start !== end) {
-			selectedQuote = textareaEl.value.substring(start, end);
+			selectedQuote = localText.substring(start, end);
 		} else {
 			selectedQuote = null;
 		}
@@ -110,11 +121,11 @@ function captureSelectionAndOpenComments() {
 
 		<!-- Textarea -->
 		<textarea
-			use:autoresize={text}
+			use:autoresize={localText}
 			class="w-full resize-none border-none bg-transparent font-serif text-base leading-relaxed text-ink outline-none placeholder:text-ink-3"
 			placeholder={m.transcription_block_placeholder()}
 			rows={1}
-			value={text}
+			value={localText}
 			oninput={handleInput}
 			onfocus={onFocus}
 		></textarea>