svedit 0.11.1 → 0.13.0

package/dist/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
-	// near_map / 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) {
@@ -185,21 +176,21 @@
 		}
 
 		if (event.inputType === 'formatBold' && session.selection?.type === 'text') {
-			session.apply(session.tr.annotate_text('strong'));
+			session.apply(session.tr.toggle_mark('strong'));
 			event.preventDefault();
 			event.stopPropagation();
 		}
 
 		if (event.inputType === 'formatItalic' && session.selection?.type === 'text') {
-			session.apply(session.tr.annotate_text('emphasis'));
+			session.apply(session.tr.toggle_mark('emphasis'));
 			event.preventDefault();
 			event.stopPropagation();
 		}
 
-		// NOTE: underline doesn't make much sense as a semantic annotation,
+		// NOTE: underline doesn't make much sense as a semantic mark,
 		// so we rewire `cmd + u` to toggle highlights
 		if (event.inputType === 'formatUnderline' && session.selection?.type === 'text') {
-			session.apply(session.tr.annotate_text('highlight'));
+			session.apply(session.tr.toggle_mark('highlight'));
 			event.preventDefault();
 			event.stopPropagation();
 		}
@@ -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,21 +382,25 @@ ${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];
 
 		for (const [prop_name, prop_value] of Object.entries(node)) {
 			if (prop_name === 'id' || prop_name === 'type') continue;
 			const property_definition = node_schema.properties[prop_name];
-			// Check if this is an annotated_text property (object with text property)
-			if (property_definition.type === 'annotated_text') {
-				const text_content = prop_value.text;
+			// Check if this is a text property.
+			if (property_definition.type === 'text') {
+				const text_content = prop_value.content;
 				if (text_content.trim()) {
 					html += `<p>${text_content}</p>`;
 				}
 			} else if (property_definition.type === 'node_array') {
-				for (const child_id of prop_value) {
+				for (const child_id of prop_value.nodes) {
 					const child = session.get(child_id);
 					const child_exporter = html_exporters[child.type] || default_node_html_exporter;
 					html += child_exporter(child, session, html_exporters);
@@ -415,19 +410,19 @@ ${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)) {
 			if (prop_name === 'id' || prop_name === 'type') continue;
 
-			// Check if this is an annotated_text property (object with text property)
+			// Check if this is a text property value.
 			if (
 				typeof prop_value === 'object' &&
 				prop_value !== null &&
-				typeof prop_value.text === 'string'
+				typeof prop_value.content === 'string'
 			) {
-				const text_content = prop_value.text;
+				const text_content = prop_value.content;
 				if (text_content.trim()) {
 					plain_text += `${text_content.trim()}\n\n`;
 				}
@@ -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) {
@@ -468,33 +463,11 @@ ${fallback_html}`;
 		return plain_text.trim();
 	}
 
-	/**
-	 * @param {NodeId[]} selected_node_ids
-	 */
-	function prepare_copy_payload(selected_node_ids) {
-		const nodes = {};
-
-		// Get subgraph for each selected node using session.traverse()
-		for (const node_id of selected_node_ids) {
-			const subgraph = session.traverse(node_id);
-
-			// Add all nodes from this subgraph to our nodes collection
-			for (const node of subgraph) {
-				if (!nodes[node.id]) {
-					nodes[node.id] = node;
-				}
-			}
-		}
-
-		// Keep original IDs - we'll generate new ones during paste
-		return { nodes, main_nodes: selected_node_ids };
-	}
-
 	/**
 	 * @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;
@@ -502,24 +475,23 @@ ${fallback_html}`;
 		event.preventDefault();
 		event.stopPropagation();
 
-		let plain_text, annotated_text, html;
+		let plain_text, text, html;
 
 		if (session.selection?.type === 'text') {
 			plain_text = session.get_selected_plain_text();
-			annotated_text = session.get_selected_annotated_text();
-			const fallback_html = `<span>${annotated_text.text}</span>`;
+			text = session.get_selected_text();
+			const fallback_html = `<span>${text.content}</span>`;
 
 			// console.log('Text copy:', {
-			// 	annotated_text,
+			// 	text,
 			// 	plain_text,
 			// 	html
 			// });
 
-			html = create_svedit_html_format(annotated_text, fallback_html);
+			html = create_svedit_html_format(text, fallback_html);
 		} else if (session.selection?.type === 'node') {
-			const selected_nodes = session.get_selected_nodes();
-			const { nodes, main_nodes } = prepare_copy_payload(selected_nodes);
-			const json_data = { nodes, main_nodes };
+			const json_data = session.get_selected_annotated_nodes();
+			const { nodes, main_nodes } = json_data;
 
 			// console.log('Node copy:', {
 			// 	selected_nodes,
@@ -562,13 +534,11 @@ ${fallback_html}`;
 		}
 	}
 
-	function oncut(event) {
+	function oncut(event: ClipboardEvent) {
 		if (!editable) return;
 		oncopy(event, true);
 	}
 
-
-
 	/**
 	 * @returns {NodeSelection|null}
 	 */
@@ -587,13 +557,13 @@ ${fallback_html}`;
 
 		const node_array_path = [...path, preferred_property_name];
 		const node_array = session.get(node_array_path);
-		if (!Array.isArray(node_array)) return null;
+		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.length,
-			focus_offset: node_array.length
+			anchor_offset: node_array.nodes.length,
+			focus_offset: node_array.nodes.length
 		};
 	}
 
@@ -620,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
@@ -638,8 +607,8 @@ ${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) {
-		const { nodes, main_nodes } = pasted_json || {};
+	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;
 
 		let tr = session.tr;
@@ -652,7 +621,10 @@ ${fallback_html}`;
 		if (property_definition?.type !== 'node_array') return false;
 
 		const default_text_node_type = get_default_text_node(property_definition, session.schema);
-		const target_text_property_name = get_text_property_name(default_text_node_type, session.schema);
+		const target_text_property_name = get_text_property_name(
+			default_text_node_type,
+			session.schema
+		);
 
 		const nodes_to_insert = [];
 		let rejected = false;
@@ -674,7 +646,11 @@ ${fallback_html}`;
 						the_node: {
 							id: 'the_node',
 							type: default_text_node_type,
-							[target_text_property_name]: text_content || { text: '', annotations: [] }
+							[target_text_property_name]: text_content || {
+								content: '',
+								marks: [],
+								annotations: []
+							}
 						}
 					});
 					nodes_to_insert.push(new_node_id);
@@ -689,7 +665,7 @@ ${fallback_html}`;
 		}
 
 		if (!rejected) {
-			tr.insert_nodes(nodes_to_insert);
+			tr.insert_nodes(nodes_to_insert, marks, annotations, nodes);
 			session.apply(tr);
 			return true;
 		}
@@ -703,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;
@@ -766,7 +742,7 @@ ${fallback_html}`;
 
 				if (session.selection?.type === 'text') {
 					const property_definition = session.inspect(session.selection.path);
-					if (property_definition?.type === 'annotated_text' && !property_definition.allow_newlines) {
+					if (property_definition?.type === 'text' && !property_definition.allow_newlines) {
 						plain_text = normalize_plain_text_for_single_line_property(plain_text);
 					}
 
@@ -777,7 +753,10 @@ ${fallback_html}`;
 						const node_array_property_definition = session.inspect(
 							session.selection.path.slice(0, -2)
 						);
-						const default_text_node_type = get_default_text_node(node_array_property_definition, session.schema);
+						const default_text_node_type = get_default_text_node(
+							node_array_property_definition,
+							session.schema
+						);
 						const node_insert_caret = get_node_insert_caret_after_text_selection(session.selection);
 						const plain_text_nodes_payload = create_plain_text_nodes_payload(
 							plain_text_fragments,
@@ -796,7 +775,10 @@ ${fallback_html}`;
 					const target_node_insert_caret = get_target_node_insert_caret(session.selection);
 					if (target_node_insert_caret) {
 						const node_array_property_definition = session.inspect(target_node_insert_caret.path);
-						const default_text_node_type = get_default_text_node(node_array_property_definition, session.schema);
+						const default_text_node_type = get_default_text_node(
+							node_array_property_definition,
+							session.schema
+						);
 						pasted_json = create_plain_text_nodes_payload(
 							plain_text_fragments,
 							default_text_node_type,
@@ -831,10 +813,15 @@ ${fallback_html}`;
 					session.apply(session.tr.set(session.selection.path, pasted_json.value));
 				}
 			}
-		} else if (session.selection?.type === 'text' && pasted_json?.text) {
+		} else if (session.selection?.type === 'text' && pasted_json?.content) {
 			// Paste text at a text selection
 			session.apply(
-				session.tr.insert_text(pasted_json.text, pasted_json.annotations, pasted_json.nodes)
+				session.tr.insert_text(
+					pasted_json.content,
+					pasted_json.marks,
+					pasted_json.annotations,
+					pasted_json.nodes
+				)
 			);
 		} else if (
 			session.selection?.type === 'text' &&
@@ -848,7 +835,12 @@ ${fallback_html}`;
 			);
 			if (text_property) {
 				session.apply(
-					session.tr.insert_text(text_property.text, text_property.annotations, pasted_json.nodes)
+					session.tr.insert_text(
+						text_property.content,
+						text_property.marks,
+						text_property.annotations,
+						pasted_json.nodes
+					)
 				);
 			}
 		} else if (['text', 'property'].includes(session.selection?.type) && pasted_json?.nodes) {
@@ -863,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
@@ -881,7 +873,7 @@ ${fallback_html}`;
 		// reuses gap elements with shifted data-gap-offset), so for those
 		// we always rerender to scroll the cursor into view.
 		const is_empty_text_selection =
-			selection.type === 'text' && session.get(selection.path).text.length === 0;
+			selection.type === 'text' && session.get(selection.path).content.length === 0;
 		if (dom_driven && !is_empty_text_selection) {
 			const prev_selection = __get_selection_from_dom();
 			if (
@@ -893,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));
 		}
@@ -940,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;
 	}
 
 	/**
@@ -960,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.
@@ -975,17 +965,17 @@ ${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);
 			const node_array = session.get(array_path);
-			if (Array.isArray(node_array) && node_array.length === 0) {
+			if (node_array?.nodes?.length === 0) {
 				return {
 					type: 'node',
 					path: array_path,
@@ -997,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);
@@ -1011,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);
@@ -1114,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) {
@@ -1151,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
@@ -1173,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 {
@@ -1210,7 +1204,7 @@ ${fallback_html}`;
 
 		// EDGE CASE 1B: Caret after trailing <br> at end of text
 		//
-		// AnnotatedTextProperty renders a trailing <br> for non-empty or non-focused text.
+		// TextProperty renders a trailing <br> for non-empty or non-focused text.
 		// When the user places their caret after this <br>, focusNode is the container
 		// element (not a text node), and normal processing would return position 0.
 		// We detect this and return the current DOM text length instead.
@@ -1250,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);
@@ -1277,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"]`
@@ -1291,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);
@@ -1312,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) {
@@ -1336,7 +1330,10 @@ ${fallback_html}`;
 			if (!anchor_sel || !focus_sel) return;
 
 			if (is_backward) {
-				dom_selection.removeAllRanges();
+				// setBaseAndExtent replaces the current selection, so no
+				// removeAllRanges is needed — every selection-API call forces a
+				// synchronous layout when the DOM is dirty, and this runs right
+				// after the per-change reconcile on every apply.
 				dom_selection.setBaseAndExtent(anchor_sel, 1, focus_sel, 1);
 			} else {
 				range.setStart(anchor_sel, 1);
@@ -1345,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
@@ -1352,28 +1350,49 @@ ${fallback_html}`;
 		// — so an unconditional scroll would yank the viewport on each of
 		// them. cursor_offset is a gap offset and the gap has no box of
 		// its own, so visibility is judged from the nodes flanking it.
-		setTimeout(() => {
-			// Collapsed: anchor === focus, so focus is the gap offset.
-			// Range: cursor sits at the focus end (anchor when backward).
-			const cursor_offset = is_backward ? selection.anchor_offset : selection.focus_offset;
-			const array_length = session.get(node_array_path).length;
+		const node_array = session.get(node_array_path);
+		if (!node_array?.nodes) return;
+
+		// Collapsed: anchor === focus, so focus is the gap offset.
+		// Range: cursor sits at the focus end (anchor when backward).
+		const cursor_offset = is_backward ? selection.anchor_offset : selection.focus_offset;
+		const array_length = node_array.nodes.length;
+
+		// node_before is null at offset 0: cursor_offset - 1 would be -1,
+		// and serialize_path rejects a negative index.
+		const node_before =
+			cursor_offset > 0 ? __get_node_element(node_array_path, cursor_offset - 1) : null;
+		const node_after = __get_node_element(node_array_path, cursor_offset);
+
+		let scroll_target = null;
+		let scroll_array_to_start = false;
+		let scroll_array_to_end = false;
+
+		if (cursor_offset === 0) {
+			scroll_array_to_start = true;
+		} else if (cursor_offset >= array_length) {
+			scroll_array_to_end = true;
+		} else {
+			// A range selection's selected node IS node_before; scrolling
+			// node_after would reveal the following node and leave the
+			// selection itself off-screen. For a collapsed caret node_after's
+			// leading edge is the cursor, so that stays the right target.
+			scroll_target = is_collapsed ? node_after : node_before;
+		}
 
+		setTimeout(() => {
 			// If either node flanking the cursor is already (even
 			// partially) on screen, the cursor is visible — keep the
-			// viewport stable and scroll nothing. node_before is null at
-			// offset 0: cursor_offset - 1 would be -1, and serialize_path
-			// rejects a negative index.
-			const node_before =
-				cursor_offset > 0 ? __get_node_element(node_array_path, cursor_offset - 1) : null;
-			const node_after = __get_node_element(node_array_path, cursor_offset);
+			// viewport stable and scroll nothing. Do this layout read in the
+			// deferred callback, after Svelte/browser layout has settled.
 			if (__intersects_viewport(node_before) || __intersects_viewport(node_after)) return;
 
-			if (cursor_offset === 0) {
+			if (scroll_array_to_start) {
 				node_array_el.scrollLeft = 0;
 				node_array_el.scrollTop = 0;
 				return;
 			}
-			if (cursor_offset >= array_length) {
+			if (scroll_array_to_end) {
 				const max_left = Math.max(0, node_array_el.scrollWidth - node_array_el.clientWidth);
 				const max_top = Math.max(0, node_array_el.scrollHeight - node_array_el.clientHeight);
 				node_array_el.scrollLeft = max_left;
@@ -1383,19 +1402,14 @@ ${fallback_html}`;
 				}
 				return;
 			}
-			// A range selection's selected node IS node_before; scrolling
-			// node_after would reveal the following node and leave the
-			// selection itself off-screen. For a collapsed caret node_after's
-			// leading edge is the cursor, so that stays the right target.
-			const target = is_collapsed ? node_after : node_before;
-			target?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+			scroll_target?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 		}, 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"]`
 		);
 
@@ -1409,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).text.length === 0;
+		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);
 
@@ -1473,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
 				}
@@ -1498,8 +1509,10 @@ ${fallback_html}`;
 
 		// Set the range if both start and end were found
 		if (anchor_node && focus_node) {
-			dom_selection.removeAllRanges();
-			// NOTE: Only using setBaseAndExtent() will preserve selection direction
+			// NOTE: Only using setBaseAndExtent() will preserve selection direction.
+			// It also replaces the current selection, so no removeAllRanges is
+			// needed — every selection-API call forces a synchronous layout when
+			// the DOM is dirty, and this runs on every apply.
 			dom_selection.setBaseAndExtent(
 				anchor_node,
 				anchor_node_offset,
@@ -1507,20 +1520,27 @@ ${fallback_html}`;
 				focus_node_offset
 			);
 
-			// Scroll the selection into view
-			setTimeout(() => {
-				const selectedElement = dom_selection.focusNode.parentElement;
-				if (selectedElement) {
-					selectedElement.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(
@@ -1528,11 +1548,14 @@ ${fallback_html}`;
 		);
 		if (!text_el) return;
 
-		const model_text = session.get(selection.path).text;
+		const model_text = session.get(selection.path).content;
 		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 ?? '';
@@ -1598,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>
 
@@ -1625,7 +1652,7 @@ ${fallback_html}`;
 	-->
 	<div
 		class="svedit-canvas {css_class}"
-		class:hide-selection={session.selection?.type === 'node'}
+		class:hide-selection={editable && session.selection?.type === 'node'}
 		class:node-caret={session.selection?.type === 'node' &&
 			session.selection.anchor_offset === session.selection.focus_offset}
 		class:property-selection={session.selection?.type === 'property'}