bidirectional marking, expand on click

Author: Rich-Harris

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

@@ -113,6 +113,11 @@ export class Workspace {
 	#files = $state.raw<Item[]>([]);
 	#current = $state.raw() as File;
 
+	#handlers = {
+		hover: new Set<(pos: number) => void>(),
+		select: new Set<(from: number, to: number) => void>()
+	};
+
 	#onupdate: (file: File) => void;
 	#onreset: (items: Item[]) => void;
 
@@ -296,6 +301,22 @@ export class Workspace {
 		this.#files = this.#files.slice(0, to_index).concat(from).concat(this.#files.slice(to_index));
 	}
 
+	onhover(fn: (pos: number) => void) {
+		this.#handlers.hover.add(fn);
+
+		return () => {
+			this.#handlers.hover.delete(fn);
+		};
+	}
+
+	onselect(fn: (from: number, to: number) => void) {
+		this.#handlers.select.add(fn);
+
+		return () => {
+			this.#handlers.select.delete(fn);
+		};
+	}
+
 	remove(item: Item) {
 		const index = this.#files.indexOf(item);
 
@@ -474,9 +495,9 @@ export class Workspace {
 			EditorState.readOnly.of(this.#readonly),
 			EditorView.editable.of(!this.#readonly),
 			EditorView.updateListener.of((update) => {
-				if (update.docChanged) {
-					const state = this.#view!.state!;
+				const state = this.#view!.state!;
 
+				if (update.docChanged) {
 					this.#update_file({
 						...this.#current,
 						contents: state.doc.toString()
@@ -485,6 +506,26 @@ export class Workspace {
 					// preserve undo/redo across files
 					this.states.set(this.#current.name, state);
 				}
+
+				if (update.selectionSet) {
+					if (state.selection.ranges.length === 1) {
+						for (const handler of this.#handlers.select) {
+							const { from, to } = state.selection.ranges[0];
+							handler(from, to);
+						}
+					}
+				}
+			}),
+			EditorView.domEventObservers({
+				mousemove: (event, view) => {
+					const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
+
+					if (pos !== null) {
+						for (const handler of this.#handlers.hover) {
+							handler(pos);
+						}
+					}
+				}
 			})
 		];
 

packages/editor/src/lib/codemirror.css

@@ -306,7 +306,7 @@
 	}
 
 	.highlight {
-		background: hsl(60, 100%, 80%);
+		background: var(--sk-bg-highlight);
 		padding: 4px 0;
 	}
 }

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

@@ -17,72 +17,49 @@
 
 	let { key = '', value, path_nodes = [], autoscroll = true, onhover, depth = 0 }: Props = $props();
 
-	const { toggleable } = get_repl_context();
+	const { toggleable, workspace } = get_repl_context();
 
 	let root = depth === 0;
 	let open = $state(root);
 
-	let list_item_el = $state() as HTMLLIElement;
+	let li: HTMLLIElement;
 
 	let is_leaf = $derived(path_nodes[path_nodes.length - 1] === value);
+	let is_marked = $derived(!root && path_nodes.includes(value));
+
 	let is_array = $derived(Array.isArray(value));
 	let is_primitive = $derived(value === null || typeof value !== 'object');
-	let is_markable = $derived(
-		!is_primitive &&
-			'start' in value &&
-			'end' in value &&
-			typeof value.start === 'number' &&
-			typeof value.end === 'number'
-	);
 	let key_text = $derived(key ? `${key}:` : '');
 
 	$effect(() => {
-		open = path_nodes.includes(value);
-	});
+		if (typeof value === 'object' && value !== null) {
+			const offselect = workspace.onselect((from, to) => {
+				const nodes = value.type === 'Fragment' ? value.nodes : is_array ? value : [value];
 
-	$effect(() => {
-		if (autoscroll && is_leaf && !$toggleable) {
-			// wait for all nodes to render before scroll
-			tick().then(() => {
-				if (list_item_el) {
-					list_item_el.scrollIntoView();
+				const start = nodes[0]?.start;
+				const end = nodes[nodes.length - 1]?.end;
+
+				if (typeof start !== 'number' || typeof end !== 'number') {
+					return;
 				}
-			});
-		}
-	});
 
-	function handle_mark_text(e: MouseEvent | FocusEvent) {
-		if (is_markable) {
-			e.stopPropagation();
-
-			if (
-				'start' in value &&
-				'end' in value &&
-				typeof value.start === 'number' &&
-				typeof value.end === 'number'
-			) {
-				// TODO
-				// $module_editor?.markText({ from: value.start ?? 0, to: value.end ?? 0 });
-			}
-		}
-	}
+				// if node contains the current selection, open
+				if (start <= from && end >= to) {
+					open = true;
+					tick().then(() => {
+						li.scrollIntoView();
+					});
+				}
+			});
 
-	function handle_unmark_text(e: MouseEvent) {
-		if (is_markable) {
-			e.stopPropagation();
-			// TODO
-			// $module_editor?.unmarkText();
+			return () => {
+				offselect();
+			};
 		}
-	}
+	});
 </script>
 
-<li
-	bind:this={list_item_el}
-	class:marked={!root && is_leaf}
-	onmouseover={handle_mark_text}
-	onfocus={handle_mark_text}
-	onmouseleave={handle_unmark_text}
->
+<li bind:this={li} data-marked={is_marked} data-leaf={is_leaf}>
 	{#if is_primitive || (is_array && value.length === 0)}
 		<span class="value">
 			{#if key_text}
@@ -153,8 +130,9 @@
 		list-style-type: none;
 	}
 
-	.marked {
-		background-color: var(--sk-highlight-color);
+	[data-marked='true']:not(:has(> [open])),
+	[data-leaf='true'] {
+		background-color: var(--sk-bg-highlight);
 	}
 
 	summary {

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

@@ -15,13 +15,9 @@
 
 	let { workspace, ast, autoscroll = true }: Props = $props();
 
-	// $cursor_index may go over the max since ast computation is usually slower.
-	// clamping this helps prevent the collapse view flashing
-	// TODO reimplement
-	let max_cursor_index = 0;
-	// $: max_cursor_index = !ast ? $cursorIndex : Math.min($cursorIndex, get_ast_max_end(ast));
+	let cursor = $state(0);
 
-	let path_nodes = $derived(find_deepest_path(max_cursor_index, [ast]) || []);
+	let path_nodes = $derived(find_deepest_path(cursor, [ast]) || []);
 
 	function find_deepest_path(cursor: number, paths: Ast[]): Ast[] | undefined {
 		const value = paths[paths.length - 1];
@@ -47,17 +43,15 @@
 		}
 	}
 
-	function get_ast_max_end(ast: Ast) {
-		let max_end = 0;
+	$effect(() => {
+		const offhover = workspace.onhover((pos) => {
+			cursor = pos;
+		});
 
-		for (const node of Object.values(ast) as any[]) {
-			if (node && typeof node.end === 'number' && node.end > max_end) {
-				max_end = node.end;
-			}
-		}
-
-		return max_end;
-	}
+		return () => {
+			offhover();
+		};
+	});
 </script>
 
 <div class="ast-view">

packages/site-kit/src/lib/styles/tokens/colours.css

@@ -22,6 +22,7 @@
 	--sk-bg-4: hsl(0, 0%, 95%); /* hover states and highlights */
 	--sk-bg-accent: var(--sk-fg-accent);
 	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
+	--sk-bg-highlight: hsl(60, 100%, 80%);
 
 	/* Border color — use this for all borders, except 'active' borders (e.g. current nav) which use `--sk-fg-accent`  */
 	--sk-border: hsl(0, 0%, 92%);