better implementation

Author: Rich-Harris

packages/editor/src/lib/Workspace.svelte.ts

@@ -257,11 +257,17 @@ export class Workspace {
 		});
 	}
 
-	highlight_range(node: { start: number; end: number } | null) {
+	highlight_range(node: { start: number; end: number } | null, scroll = false) {
 		if (!this.#view) return;
 
+		const effects: StateEffect<any>[] = [set_highlight.of(node)];
+
+		if (scroll && node) {
+			effects.push(EditorView.scrollIntoView(node.start, { y: 'center' }));
+		}
+
 		this.#view.dispatch({
-			effects: set_highlight.of(node)
+			effects
 		});
 	}
 

packages/repl/src/lib/Output/Output.svelte

@@ -91,7 +91,13 @@
 			const v = view; // so that TS doesn't think it could become something different
 			const output = v === 'js' ? js_workspace : css_workspace;
 
-			const highlight = (line: number, a: SourceMapSegment, b: SourceMapSegment) => {
+			const highlight = (
+				line: number,
+				a: SourceMapSegment,
+				b: SourceMapSegment,
+				scroll_input: boolean,
+				scroll_output: boolean
+			) => {
 				const split = {
 					original: workspace.current!.contents.split('\n'),
 					generated: current!.result![v]!.code.split('\n')
@@ -107,8 +113,8 @@
 					end: split.generated.slice(0, line).join('\n').length + 1 + b[0]
 				};
 
-				workspace.highlight_range(original);
-				output.highlight_range(generated);
+				workspace.highlight_range(original, scroll_input);
+				output.highlight_range(generated, scroll_output);
 			};
 
 			const clear = () => {
@@ -137,16 +143,7 @@
 						if (b[2]! === line && b[3]! < column) continue;
 
 						// if we're still here, we have a match
-						highlight(i, a, b);
-
-						if (should_scroll) {
-							tick().then(() => {
-								document.querySelector('#output .highlight').scrollIntoView({
-									block: 'center'
-								});
-							});
-						}
-
+						highlight(i, a, b, false, should_scroll);
 						return;
 					}
 
@@ -168,16 +165,7 @@
 					const b = segments[i + 1];
 
 					if (a[0] <= column && b[0] >= column) {
-						highlight(line, a, b);
-
-						if (should_scroll) {
-							tick().then(() => {
-								document.querySelector('#input .highlight').scrollIntoView({
-									block: 'center'
-								});
-							});
-						}
-
+						highlight(line, a, b, should_scroll, false);
 						return;
 					}
 

packages/repl/src/lib/Repl.svelte

@@ -176,15 +176,15 @@
 			max="-4.1rem"
 		>
 			{#snippet a()}
-				<section id="input">
+				<section>
 					<ComponentSelector {runes} {onchange} {workspace} {can_migrate} />
 
 					<Editor {workspace} />
 				</section>
 			{/snippet}
 
 			{#snippet b()}
-				<section id="output">
+				<section>
 					<Output
 						status={status_visible ? status : null}
 						{embedded}