better bidirectional highlighting on AST

Author: Rich-Harris

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

@@ -114,7 +114,7 @@ export class Workspace {
 	#current = $state.raw() as File;
 
 	#handlers = {
-		hover: new Set<(pos: number) => void>(),
+		hover: new Set<(pos: number | null) => void>(),
 		select: new Set<(from: number, to: number) => void>()
 	};
 
@@ -307,7 +307,7 @@ export class Workspace {
 		this.#files = this.#files.slice(0, to_index).concat(from).concat(this.#files.slice(to_index));
 	}
 
-	onhover(fn: (pos: number) => void) {
+	onhover(fn: (pos: number | null) => void) {
 		$effect(() => {
 			this.#handlers.hover.add(fn);
 
@@ -535,6 +535,11 @@ export class Workspace {
 							handler(pos);
 						}
 					}
+				},
+				mouseleave: (event, view) => {
+					for (const handler of this.#handlers.hover) {
+						handler(null);
+					}
 				}
 			})
 		];

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

@@ -82,9 +82,14 @@
 		<details
 			bind:open
 			onfocusin={(e) => (e.stopPropagation(), onhover(value))}
-			onfocusout={(e) => onhover(null)}
-			onmouseover={() => onhover(value)}
+			onfocusout={() => onhover(null)}
+			onmouseover={(e) => (e.stopPropagation(), onhover(value))}
 			onmouseleave={() => onhover(null)}
+			ontoggle={(e) => {
+				if (e.currentTarget.open && value && typeof value.start === 'number') {
+					workspace.highlight_range(value, true);
+				}
+			}}
 		>
 			<summary>
 				{#if key}
@@ -104,7 +109,15 @@
 				{/if}
 			</summary>
 
-			<ul>
+			<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+			<ul
+				onclick={(e) => {
+					if (value && typeof value.start === 'number') {
+						workspace.highlight_range(value, true);
+						e.stopPropagation();
+					}
+				}}
+			>
 				{#each Object.entries(value) as [k, v]}
 					<AstNode
 						key={is_array ? undefined : k}

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

@@ -15,14 +15,15 @@
 
 	let { workspace, ast, active = true }: Props = $props();
 
-	let cursor = $state(0);
+	let cursor = $state<number | null>(0);
 
 	let path_nodes = $derived(find_deepest_path(cursor, [ast]) || []);
 
-	function find_deepest_path(cursor: number, paths: Ast[]): Ast[] | undefined {
+	function find_deepest_path(cursor: number | null, paths: Ast[]): Ast[] | undefined {
+		if (cursor === null) return null;
 		const value = paths[paths.length - 1];
 
-		if (!value) return;
+		if (!value) return null;
 
 		for (const v of Object.values(value)) {
 			if (typeof v === 'object') {
@@ -43,8 +44,23 @@
 		}
 	}
 
-	workspace.onhover((pos) => {
-		cursor = pos;
+	$effect(() => {
+		if (active) {
+			workspace.onhover((pos) => {
+				cursor = pos;
+			});
+		}
+	});
+
+	$effect(() => {
+		if (active) {
+			const leaf = path_nodes.at(-1) ?? null;
+			workspace.highlight_range(leaf);
+		}
+
+		return () => {
+			workspace.highlight_range(null);
+		};
 	});
 </script>
 
@@ -62,6 +78,7 @@
 								node === null ||
 								(node.type !== undefined && node.start !== undefined && node.end !== undefined)
 							) {
+								cursor = node && node.start + 1;
 								workspace.highlight_range(node);
 							}
 						}}

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

@@ -173,10 +173,10 @@
 				}
 			};
 
-			workspace.onhover((pos) => from_input(pos, false));
+			workspace.onhover((pos) => (pos === null ? clear() : from_input(pos, false)));
 			workspace.onselect((from, to) => from === to && from_input(from, true));
 
-			output.onhover((pos) => from_output(pos, false));
+			output.onhover((pos) => (pos === null ? clear() : from_output(pos, false)));
 			output.onselect((from, to) => from === to && from_output(from, true));
 		}
 	});