svedit 0.12.0 → 0.14.0

package/src/lib/Svedit.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts" generics="S extends DocumentSchema">
 	import { flushSync, getContext, setContext } from 'svelte';
 	import {
 		get_char_length,
@@ -24,17 +24,21 @@
 	import './styles/svedit-colors.css';
 	import './styles/svedit-animations.css';
 
-	/** @import {
-	 *   SveditProps,
-	 *   Selection,
-	 *   TextSelection,
-	 *   NodeSelection,
-	 *   PropertySelection,
-	 *   NodeId
-	 * } from './types.d.ts';
-	 */
+	import type {
+		DocumentSchema,
+		SveditProps,
+		Selection,
+		NodeSelection,
+		TextSelection,
+		PropertySelection,
+		DocumentNode,
+		DocumentPath,
+		DynamicRecord,
+		NodeHtmlExporter
+	} from './types.js';
+	import type { KeyMapper } from './KeyMapper.svelte.js';
+	import type Session from './Session.svelte.js';
 
-	/** @type {SveditProps} */
 	let {
 		session,
 		editable = $bindable(false),
@@ -42,9 +46,9 @@
 		class: css_class,
 		autocapitalize = 'on',
 		spellcheck = 'true'
-	} = $props();
+	}: SveditProps<S> = $props();
 
-	let canvas_el;
+	let canvas_el: HTMLElement | undefined;
 	let root_node = $derived(session.get(path));
 	let Overlays = $derived(session.config.system_components?.overlays);
 	let NodeSelectionMarkers = $derived(
@@ -54,7 +58,13 @@
 
 	let is_composing = $state(false);
 	let canvas_focused = $state(false);
-	let before_composition_selection = null;
+	let before_composition_selection: TextSelection | null = null;
+	// Selection restoration and selection revealing are separate concerns.
+	// DOM changes (for example, toggling an annotation) can require rebuilding
+	// the native selection even when the logical selection did not move. Keep
+	// the last selection rendered while focused so those rebuilds do not also
+	// move the viewport.
+	let last_rendered_selection_snapshot: string | null = null;
 	// Set by onselectionchange before it commits a DOM-derived selection
 	// to the model. render_selection consumes-and-clears it to skip
 	// rerender on DOM-driven changes (the DOM is already in place).
@@ -98,8 +108,7 @@
 	function check_duplicate_paths() {
 		if (!canvas_el) return;
 
-		/** @type {Record<string, true>} */
-		const mounted_paths = Object.create(null);
+		const mounted_paths: Record<string, true> = Object.create(null);
 
 		for (const element of canvas_el.querySelectorAll('[data-path]')) {
 			if (element.closest('.svedit-canvas') !== canvas_el) continue;
@@ -117,26 +126,8 @@
 		}
 	}
 
-	// Test-only hook: expose the svedit context so test specs can read
-	// array_indices / edge_map for diagnostics. Gated on `import.meta.env.MODE`
-	// — Vite replaces the literal so the comparison is constant-false in
-	// production and the branch is dead-code-eliminated. Wrapped in an
-	// effect so unmount clears the reference and tests don't leak state
-	// across remounts.
-	if (import.meta.env?.MODE === 'test') {
-		$effect(() => {
-			const g = /** @type {any} */ (globalThis);
-			g.__svedit_ctx_for_test = context;
-			return () => {
-				if (g.__svedit_ctx_for_test === context) {
-					delete g.__svedit_ctx_for_test;
-				}
-			};
-		});
-	}
-
 	// Get KeyMapper from context (may be undefined if not provided)
-	const key_mapper = getContext('key_mapper');
+	const key_mapper = getContext<KeyMapper>('key_mapper');
 
 	// Initialize commands and keymap on the session
 	$effect(() => {
@@ -146,7 +137,7 @@
 	/**
 	 * @param {InputEvent} event
 	 */
-	async function onbeforeinput(event) {
+	async function onbeforeinput(event: InputEvent) {
 		// console.log(`onbeforeinput: ${event.inputType}, data: "${event.data}", isComposing: ${event.isComposing}`, event);
 
 		if (event.inputType === 'historyUndo' && is_composing) {
@@ -277,7 +268,7 @@
 	 * Handles composition end events for input methods like dead keys
 	 * This occurs when composition is complete (e.g., after typing 'a' following backtick to get 'à')
 	 */
-	function oncompositionend(event) {
+	function oncompositionend(event: CompositionEvent) {
 		// console.log('DEBUG: oncompositionend, insert:', event.data, event);
 		if (!canvas_el?.contains(document.activeElement)) return;
 		if (session.selection?.type === 'text') {
@@ -350,7 +341,7 @@
 	 * @param {string} fallback_html - HTML for cross-app compatibility
 	 * @returns {string} HTML with embedded svedit data
 	 */
-	function create_svedit_html_format(json_data, fallback_html) {
+	function create_svedit_html_format(json_data: unknown, fallback_html: string): string {
 		// Use encodeURIComponent to handle Unicode, then base64 encode
 		const json_string = JSON.stringify(json_data);
 		const encoded_data = btoa(encodeURIComponent(json_string));
@@ -367,7 +358,7 @@ ${fallback_html}`;
 	 * @param {string} html - HTML content from clipboard
 	 * @returns {Object|null} Parsed svedit data or null if not found
 	 */
-	function extract_svedit_data_from_html(html) {
+	function extract_svedit_data_from_html(html: string): DynamicRecord | null {
 		const svedit_regex = /data-svedit="([^"]+)"/;
 		const match = html.match(svedit_regex);
 
@@ -391,7 +382,11 @@ ${fallback_html}`;
 	 * @param {Object} node - Node object
 	 * @returns {string} HTML representation
 	 */
-	function default_node_html_exporter(node, session, html_exporters) {
+	function default_node_html_exporter(
+		node: DocumentNode,
+		session: Session<S>,
+		html_exporters: Record<string, NodeHtmlExporter<S>>
+	): string {
 		let html = '';
 		const node_schema = session.schema[node.type];
 
@@ -415,7 +410,7 @@ ${fallback_html}`;
 		return html;
 	}
 
-	function default_node_plain_text_exporter(node) {
+	function default_node_plain_text_exporter(node: DocumentNode): string {
 		let plain_text = '';
 
 		for (const [prop_name, prop_value] of Object.entries(node)) {
@@ -442,7 +437,7 @@ ${fallback_html}`;
 	 * @param {Object[]} nodes - Array of node objects
 	 * @returns {string} HTML representation
 	 */
-	function export_html(nodes) {
+	function export_html(nodes: DocumentNode[]): string {
 		let html = '';
 
 		for (const node of nodes) {
@@ -459,7 +454,7 @@ ${fallback_html}`;
 		return html;
 	}
 
-	function export_plain_text(nodes) {
+	function export_plain_text(nodes: DocumentNode[]): string {
 		let plain_text = '';
 
 		for (const node of nodes) {
@@ -472,7 +467,7 @@ ${fallback_html}`;
 	 * @param {ClipboardEvent} event
 	 * @param {boolean} delete_selection - used by oncut()
 	 */
-	function oncopy(event, delete_selection = false) {
+	function oncopy(event: ClipboardEvent, delete_selection = false) {
 		// Only handle copy events if editable and focus is within the canvas
 		if (!editable) return;
 		if (!canvas_el?.contains(document.activeElement)) return;
@@ -539,7 +534,7 @@ ${fallback_html}`;
 		}
 	}
 
-	function oncut(event) {
+	function oncut(event: ClipboardEvent) {
 		if (!editable) return;
 		oncopy(event, true);
 	}
@@ -565,7 +560,7 @@ ${fallback_html}`;
 		if (!node_array || !Array.isArray(node_array.nodes)) return null;
 
 		return {
-			type: /** @type {const} */ ('node'),
+			type: 'node' as const,
 			path: node_array_path,
 			anchor_offset: node_array.nodes.length,
 			focus_offset: node_array.nodes.length
@@ -595,11 +590,10 @@ ${fallback_html}`;
 	 */
 	function get_node_insert_caret_after_text_selection(selection = session.selection) {
 		if (selection?.type !== 'text') return null;
-		const node_index = parseInt(String(selection.path.at(-2)), 10);
-		if (Number.isNaN(node_index)) return null;
+		const node_index = selection.path.at(-2) as number;
 
 		return {
-			type: /** @type {const} */ ('node'),
+			type: 'node' as const,
 			path: selection.path.slice(0, -2),
 			anchor_offset: node_index + 1,
 			focus_offset: node_index + 1
@@ -613,7 +607,7 @@ ${fallback_html}`;
 	 * @param {Selection} [selection] - Optional selection (node caret) where the payload should be pasted
 	 * @returns {boolean} True if the paste operation was successful, false otherwise
 	 */
-	function try_node_paste(pasted_json, selection) {
+	function try_node_paste(pasted_json: DynamicRecord | null, selection?: Selection): boolean {
 		const { nodes, main_nodes, marks = [], annotations = [] } = pasted_json || {};
 		if (!nodes || !main_nodes?.length) return false;
 
@@ -653,10 +647,10 @@ ${fallback_html}`;
 							id: 'the_node',
 							type: default_text_node_type,
 							[target_text_property_name]: text_content || {
-							content: '',
-							marks: [],
-							annotations: []
-						}
+								content: '',
+								marks: [],
+								annotations: []
+							}
 						}
 					});
 					nodes_to_insert.push(new_node_id);
@@ -685,7 +679,7 @@ ${fallback_html}`;
 		return false;
 	}
 
-	async function onpaste(event) {
+	async function onpaste(event: ClipboardEvent) {
 		// Only handle paste events if editable and focus is within the canvas
 		if (!editable) return;
 		if (!canvas_el?.contains(document.activeElement)) return;
@@ -861,8 +855,8 @@ ${fallback_html}`;
 		}
 	}
 
-	function render_selection(dom_driven = false) {
-		const selection = /** @type {Selection} */ (session.selection);
+	function render_selection(dom_driven = false, should_scroll_selection_into_view = true) {
+		const selection = session.selection as Selection;
 
 		if (!selection) {
 			// No model selection -> just leave things as they are
@@ -891,11 +885,11 @@ ${fallback_html}`;
 		}
 
 		if (selection?.type === 'text') {
-			__render_text_selection();
+			__render_text_selection(should_scroll_selection_into_view);
 		} else if (selection?.type === 'node') {
-			__render_node_selection();
+			__render_node_selection(should_scroll_selection_into_view);
 		} else if (selection?.type === 'property') {
-			__render_property_selection();
+			__render_property_selection(should_scroll_selection_into_view);
 		} else {
 			console.warn('unsupported selection', $state.snapshot(selection));
 		}
@@ -938,17 +932,15 @@ ${fallback_html}`;
 	 * @param {HTMLElement} el
 	 * @returns {HTMLElement | null}
 	 */
-	function __resolve_node_from_gap(el) {
-		const gap = /** @type {HTMLElement | null} */ (el.closest('[data-gap-array-path]'));
+	function __resolve_node_from_gap(el: Element): HTMLElement | null {
+		const gap = el.closest('[data-gap-array-path]') as HTMLElement | null;
 		if (!gap) return null;
 		const array_path = deserialize_path(gap.dataset.gapArrayPath);
 		const offset = parseInt(gap.dataset.gapOffset, 10);
 		const node_idx = offset > 0 ? offset - 1 : 0;
-		return /** @type {HTMLElement | null} */ (
-			canvas_el.querySelector(
-				`[data-path="${serialize_path([...array_path, node_idx])}"][data-type="node"]`
-			)
-		);
+		return canvas_el.querySelector<HTMLElement>(
+			`[data-path="${serialize_path([...array_path, node_idx])}"][data-type="node"]`
+		) as HTMLElement | null;
 	}
 
 	/**
@@ -958,12 +950,12 @@ ${fallback_html}`;
 	 * @returns {NodeSelection | null} A NodeSelection object if the DOM selection
 	 *   represents a valid node selection, null otherwise
 	 */
-	function __get_node_selection_from_dom() {
+	function __get_node_selection_from_dom(): NodeSelection | null {
 		const dom_selection = window.getSelection();
 		if (dom_selection.rangeCount === 0) return null;
 
-		let focus_node = /** @type {HTMLElement} */ (dom_selection.focusNode);
-		let anchor_node = /** @type {HTMLElement} */ (dom_selection.anchorNode);
+		let focus_node = dom_selection.focusNode as HTMLElement;
+		let anchor_node = dom_selection.anchorNode as HTMLElement;
 
 		// If focus_node or anchor_node not an element node (e.g. a text node), we need
 		// to use the parent element, so we can perform the closest() query on it.
@@ -973,12 +965,12 @@ ${fallback_html}`;
 		// EDGE CASE: Collapsed selection inside an empty node placeholder.
 		// Firefox can place the DOM selection on the placeholder node itself,
 		// which otherwise looks like selecting node index 0 in an empty array.
-		const focus_empty_placeholder = /** @type {HTMLElement | null} */ (
-			focus_node.closest('.empty-node-placeholder[data-path][data-type="node"]')
-		);
-		const anchor_empty_placeholder = /** @type {HTMLElement | null} */ (
-			anchor_node.closest('.empty-node-placeholder[data-path][data-type="node"]')
-		);
+		const focus_empty_placeholder = focus_node.closest(
+			'.empty-node-placeholder[data-path][data-type="node"]'
+		) as HTMLElement | null;
+		const anchor_empty_placeholder = anchor_node.closest(
+			'.empty-node-placeholder[data-path][data-type="node"]'
+		) as HTMLElement | null;
 		if (focus_empty_placeholder && focus_empty_placeholder === anchor_empty_placeholder) {
 			const empty_placeholder_path = deserialize_path(focus_empty_placeholder.dataset.path);
 			const array_path = empty_placeholder_path.slice(0, -1);
@@ -995,7 +987,7 @@ ${fallback_html}`;
 
 		// EDGE CASE: Collapsed selection inside a node gap (gap-after or gap-before).
 		// Gaps are siblings of nodes with data-gap-array-path and data-gap-offset.
-		const gap_el = /** @type {HTMLElement | null} */ (focus_node.closest('[data-gap-array-path]'));
+		const gap_el = focus_node.closest('[data-gap-array-path]') as HTMLElement | null;
 		if (gap_el && focus_node === anchor_node) {
 			const array_path = deserialize_path(gap_el.dataset.gapArrayPath);
 			const gap_offset = parseInt(gap_el.dataset.gapOffset, 10);
@@ -1009,12 +1001,12 @@ ${fallback_html}`;
 
 		let focus_root =
 			__resolve_node_from_gap(focus_node) ??
-			/** @type {HTMLElement} */ (focus_node.closest('[data-path][data-type="node"]'));
+			(focus_node.closest('[data-path][data-type="node"]') as HTMLElement);
 		if (!focus_root) return null;
 
 		let anchor_root =
 			__resolve_node_from_gap(anchor_node) ??
-			/** @type {HTMLElement} */ (anchor_node.closest('[data-path][data-type="node"]'));
+			(anchor_node.closest('[data-path][data-type="node"]') as HTMLElement);
 		if (!anchor_root) return null;
 
 		let focus_root_path = deserialize_path(focus_root.dataset.path);
@@ -1112,17 +1104,17 @@ ${fallback_html}`;
 	 * @returns {PropertySelection | null} A PropertySelection object if the DOM selection
 	 *   represents a valid property selection, null otherwise
 	 */
-	function __get_property_selection_from_dom() {
+	function __get_property_selection_from_dom(): PropertySelection | null {
 		const dom_selection = window.getSelection();
 		if (dom_selection.rangeCount === 0) return null;
 
-		let focus_root = /** @type {HTMLElement} */ (
-			dom_selection.focusNode.parentElement?.closest('[data-path][data-type="property"]')
-		);
+		let focus_root = dom_selection.focusNode.parentElement?.closest(
+			'[data-path][data-type="property"]'
+		) as HTMLElement;
 		if (!focus_root) return null;
-		let anchor_root = /** @type {HTMLElement} */ (
-			dom_selection.anchorNode.parentElement?.closest('[data-path][data-type="property"]')
-		);
+		let anchor_root = dom_selection.anchorNode.parentElement?.closest(
+			'[data-path][data-type="property"]'
+		) as HTMLElement;
 		if (!anchor_root) return null;
 
 		if (focus_root === anchor_root) {
@@ -1149,10 +1141,13 @@ ${fallback_html}`;
 	 * @returns {TextSelection | null} A TextSelection object if the DOM selection
 	 *   represents a valid text selection, null otherwise
 	 */
-	function __get_text_selection_from_dom(range = null) {
-		let dom_selection;
-		let focus_node, anchor_node;
-		let focus_offset_in_node; // anchor_offset_in_node;
+	function __get_text_selection_from_dom(
+		range: Range | StaticRange | null = null
+	): TextSelection | null {
+		let dom_selection: globalThis.Selection | null = null;
+		let focus_node: Node | null;
+		let anchor_node: Node | null;
+		let focus_offset_in_node: number; // anchor_offset_in_node;
 
 		if (range) {
 			// When range is provided, use it directly
@@ -1171,23 +1166,24 @@ ${fallback_html}`;
 			range = dom_selection.getRangeAt(0);
 		}
 
-		function get_text_root(node) {
+		function get_text_root(node: Node | null): HTMLElement | null {
 			if (!node) return null;
 
-			if (node.nodeType === Node.ELEMENT_NODE) {
-				return /** @type {HTMLElement | null} */ (
-					node.closest?.('[data-path][data-type="text"]') ?? null
-				);
+			if (node instanceof Element) {
+				return node.closest<HTMLElement>('[data-path][data-type="text"]');
 			}
 
-			return /** @type {HTMLElement | null} */ (
-				node.parentElement?.closest('[data-path][data-type="text"]') ?? null
-			);
+			return node.parentElement?.closest<HTMLElement>('[data-path][data-type="text"]') ?? null;
 		}
 
-		let focus_root, anchor_root;
+		let focus_root: HTMLElement | null;
+		let anchor_root: HTMLElement | null;
 
-		if (focus_node === anchor_node && focus_node.dataset?.type === 'text') {
+		if (
+			focus_node === anchor_node &&
+			focus_node instanceof HTMLElement &&
+			focus_node.dataset.type === 'text'
+		) {
 			// EDGE CASE 1: Either text node is empty (only a <br> is present), or caret is after a <br> at the very end of the text node
 			focus_root = anchor_root = focus_node;
 		} else {
@@ -1248,7 +1244,7 @@ ${fallback_html}`;
 			}
 		}
 
-		function get_text_offset(container, offset) {
+		function get_text_offset(container: Node, offset: number): number {
 			const offset_range = window.document.createRange();
 			offset_range.setStart(focus_root, 0);
 			offset_range.setEnd(container, offset);
@@ -1275,7 +1271,7 @@ ${fallback_html}`;
 		};
 	}
 
-	function __get_node_element(node_array_path, node_offset) {
+	function __get_node_element(node_array_path: DocumentPath, node_offset: number): Element | null {
 		if (!canvas_el) return null;
 		return canvas_el.querySelector(
 			`[data-path="${serialize_path([...node_array_path, node_offset])}"][data-type="node"]`
@@ -1289,14 +1285,14 @@ ${fallback_html}`;
 	 * node clipped only by an inner scroll container still counts visible.
 	 * @param {Element | null | undefined} el
 	 */
-	function __intersects_viewport(el) {
+	function __intersects_viewport(el: Element | null | undefined): boolean {
 		if (!el) return false;
 		const r = el.getBoundingClientRect();
 		return r.bottom > 0 && r.top < window.innerHeight && r.right > 0 && r.left < window.innerWidth;
 	}
 
-	function __render_node_selection() {
-		const selection = /** @type {NodeSelection} */ (session.selection);
+	function __render_node_selection(should_scroll_selection_into_view = true) {
+		const selection = session.selection as NodeSelection;
 		const node_array_path = selection.path;
 		const node_array_path_str = serialize_path(node_array_path);
 		const is_collapsed = is_selection_collapsed(selection);
@@ -1310,7 +1306,7 @@ ${fallback_html}`;
 		const dom_selection = window.getSelection();
 		const range = window.document.createRange();
 
-		const gap_selector = (offset) =>
+		const gap_selector = (offset: number) =>
 			`[data-gap-array-path="${node_array_path_str}"][data-gap-offset="${offset}"]`;
 
 		if (is_collapsed) {
@@ -1346,6 +1342,7 @@ ${fallback_html}`;
 				dom_selection.addRange(range);
 			}
 		}
+		if (!should_scroll_selection_into_view) return;
 
 		// Scroll the cursor into view, but only when it is genuinely
 		// off-screen. This runs on every node-selection re-render — a
@@ -1409,10 +1406,10 @@ ${fallback_html}`;
 		}, 0);
 	}
 
-	function __render_property_selection() {
+	function __render_property_selection(should_scroll_selection_into_view = true) {
 		const selection = session.selection;
 		// The element that holds the property
-		const el = canvas_el.querySelector(
+		const el = canvas_el.querySelector<HTMLElement>(
 			`[data-path="${serialize_path(selection.path)}"][data-type="property"]`
 		);
 
@@ -1426,36 +1423,33 @@ ${fallback_html}`;
 		dom_selection.removeAllRanges();
 		dom_selection.addRange(range);
 
-		// Scroll the selection into view
-		setTimeout(() => {
-			el.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-		}, 0);
+		if (should_scroll_selection_into_view) {
+			setTimeout(() => {
+				el.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+			}, 0);
+		}
 	}
 
-	function __render_text_selection() {
-		const selection = /** @type {any} */ (session.selection);
+	function __render_text_selection(should_scroll_selection_into_view = true) {
+		const selection = session.selection as TextSelection;
 		// The element that holds the annotated string
-		const el = canvas_el.querySelector(
+		const el = canvas_el.querySelector<HTMLElement>(
 			`[data-path="${serialize_path(selection.path)}"][data-type="text"]`
 		);
 		const empty_text = session.get(selection.path).content.length === 0;
 		const dom_selection = window.getSelection();
 		let current_offset = 0;
-		/** @type {HTMLElement | Text} */
-		let anchor_node;
-		/** @type {HTMLElement | Text} */
-		let focus_node;
-		/** @type {number} */
-		let anchor_node_offset;
-		/** @type {number} */
-		let focus_node_offset;
+		let anchor_node: HTMLElement | Text;
+		let focus_node: HTMLElement | Text;
+		let anchor_node_offset: number;
+		let focus_node_offset: number;
 		const is_backward = selection.anchor_offset > selection.focus_offset;
 		const start_offset = Math.min(selection.anchor_offset, selection.focus_offset);
 		const end_offset = Math.max(selection.anchor_offset, selection.focus_offset);
 
 		// Helper function to process each node
-		function process_node(node) {
-			if (node.nodeType === Node.TEXT_NODE) {
+		function process_node(node: Node) {
+			if (node instanceof Text) {
 				const node_text = node.textContent;
 				const node_char_length = get_char_length(node_text);
 
@@ -1490,7 +1484,7 @@ ${fallback_html}`;
 					}
 				}
 				current_offset += node_char_length;
-			} else if (node.nodeType === Node.ELEMENT_NODE) {
+			} else if (node instanceof HTMLElement) {
 				for (const child_node of node.childNodes) {
 					if (process_node(child_node)) return true; // Stop iteration if end found
 				}
@@ -1526,22 +1520,27 @@ ${fallback_html}`;
 				focus_node_offset
 			);
 
-			// Scroll the rendered selection into view. Capture the target now:
-			// the browser selection is live and may be cleared before this
-			// deferred callback runs, e.g. when app UI focuses an external input.
-			const selected_element = focus_node.parentElement;
-			setTimeout(() => {
-				if (selected_element?.isConnected) {
-					selected_element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-				}
-			}, 0);
+			if (should_scroll_selection_into_view) {
+				// Scroll the rendered selection into view. Capture the target now:
+				// the browser selection is live and may be cleared before this
+				// deferred callback runs, e.g. when app UI focuses an external input.
+				const selected_element = focus_node.parentElement;
+				setTimeout(() => {
+					if (selected_element?.isConnected) {
+						selected_element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+					}
+				}, 0);
+			}
 		}
 	}
 
 	// Utils
 	// --------------------------
 
-	function __remove_native_composition_text(selection, inserted_text) {
+	function __remove_native_composition_text(
+		selection: TextSelection | null,
+		inserted_text: string
+	) {
 		if (!selection || selection.type !== 'text' || !inserted_text) return;
 
 		const text_el = canvas_el.querySelector(
@@ -1553,7 +1552,10 @@ ${fallback_html}`;
 		if ((text_el.textContent ?? '') === model_text) return;
 
 		let current_offset = 0;
-		function get_dom_text_position(root, target_offset) {
+		function get_dom_text_position(
+			root: Node,
+			target_offset: number
+		): { node: Node; offset: number } | null {
 			for (const node of root.childNodes) {
 				if (node.nodeType === Node.TEXT_NODE) {
 					const node_text = node.textContent ?? '';
@@ -1619,7 +1621,11 @@ ${fallback_html}`;
 		const dom_driven = selection_source_is_dom;
 		selection_source_is_dom = false;
 		if (!canvas_focused) return;
-		render_selection(dom_driven);
+		const selection_snapshot = JSON.stringify(session.selection);
+		const should_scroll_selection_into_view =
+			!dom_driven && selection_snapshot !== last_rendered_selection_snapshot;
+		render_selection(dom_driven, should_scroll_selection_into_view);
+		last_rendered_selection_snapshot = selection_snapshot;
 	});
 </script>
 
@@ -1677,7 +1683,7 @@ ${fallback_html}`;
 
 <style>
 	.svedit-canvas {
-		caret-color: var(--svedit-caret-color);
+		caret-color: var(--editing);
 		caret-shape: bar;
 		/* Default to vertical/ column flow with: --row: 0; (the most common case)
 		Prevents silent failures when developers forget to set the row property in their top level node component.
@@ -1693,7 +1699,7 @@ ${fallback_html}`;
 	   the :where(), but the wrapper zeroes its specificity contribution.
 	   Final specificity is just (0,0,1), trivially beatable. */
 	:where(.svedit-canvas) :global(::selection) {
-		background: var(--svedit-editing-fill);
+		background: var(--editing-muted);
 	}
 
 	@media not (pointer: coarse) {