svedit 0.11.0 → 0.12.0

package/src/lib/KeyMapper.svelte.js

@@ -1,3 +1,5 @@
+import { is_virtual_keyboard_active } from './utils.js';
+
 const MODIFIER_KEYS = ['meta', 'ctrl', 'alt', 'shift'];
 const MODIFIER_EVENT_KEYS = {
 	meta: 'metaKey',
@@ -34,7 +36,7 @@ export function define_keymap(keymap) {
  * Matches a keyboard event against a key combo string.
  * Example: 'meta+e,ctrl+e' matches either (metaKey && key==='e') OR (ctrlKey && key==='e')
  */
-function matches_key_combo(key_combo, event) {
+function matches_key_combo(key_combo, event, virtual_keyboard_active = false) {
 	const alternatives = key_combo.split(',');
 
 	return alternatives.some((alternative) => {
@@ -42,14 +44,22 @@ function matches_key_combo(key_combo, event) {
 		const modifiers = parts.filter((part) => MODIFIER_KEYS.includes(part));
 		const non_modifier = parts.find((part) => !MODIFIER_KEYS.includes(part));
 
+		if (virtual_keyboard_active && modifiers.length > 0) {
+			return false;
+		}
+
 		// Check if all specified modifiers are pressed
 		const modifiers_match = modifiers.every((mod) => event[MODIFIER_EVENT_KEYS[mod]]);
 
 		// Check if no unspecified modifiers are pressed
-		const no_extra_modifiers = MODIFIER_KEYS.every((mod) => {
-			if (modifiers.includes(mod)) return true; // This modifier is expected
-			return !event[MODIFIER_EVENT_KEYS[mod]]; // This modifier should NOT be pressed
-		});
+		// NOTE: On virtual keyboards (iOS / Anroid) modifier keys are just ignored, because
+		// they must be assumed accidental (e.g. Shift activated as a result of auto-capitalization)
+		const no_extra_modifiers = virtual_keyboard_active
+			? true
+			: MODIFIER_KEYS.every((mod) => {
+				if (modifiers.includes(mod)) return true; // This modifier is expected
+				return !event[MODIFIER_EVENT_KEYS[mod]]; // This modifier should NOT be pressed
+			});
 
 		// Check if the key matches
 		const key_matches = event.key.toLowerCase() === non_modifier;
@@ -65,8 +75,10 @@ function matches_key_combo(key_combo, event) {
  * but don't crash the application.
  */
 function handle_key_map(key_map, event) {
+	const virtual_keyboard_active = is_virtual_keyboard_active();
+
 	for (const [key_combo, commands] of Object.entries(key_map)) {
-		if (matches_key_combo(key_combo, event)) {
+		if (matches_key_combo(key_combo, event, virtual_keyboard_active)) {
 			// Find the first enabled command and execute it
 			const enabled_command = commands.find((cmd) => cmd.is_enabled());
 			if (enabled_command) {

package/src/lib/Node.svelte

@@ -16,17 +16,45 @@
 	let child_index = $derived(node_array_meta ? parseInt(String(path.at(-1)), 10) : -1);
 	let is_first = $derived(node_array_meta && child_index === 0);
 	let is_last = $derived(node_array_meta && child_index === node_array_meta.length - 1);
+
+	// Marks and annotations covering this node become classes automatically:
+	// `mark-<type>`/`anno-<type>`, plus `-start`/`-end` variants on the run's
+	// first/last covered node. This allows styling ranges (including
+	// annotations, which never render wrapper components) with pure CSS. For
+	// richer rendering, node components still receive the `mark` and
+	// `annotations` props.
+	let range_classes = $derived.by(() => {
+		if (child_index < 0 || !node_array_meta?.annotations_for) return '';
+		const classes = [];
+
+		const add_classes = (range, prefix) => {
+			const range_type = range?.node?.type;
+			if (!range_type) return;
+			classes.push(`${prefix}-${range_type}`);
+			if (range.is_start) classes.push(`${prefix}-${range_type}-start`);
+			if (range.is_end) classes.push(`${prefix}-${range_type}-end`);
+		};
+
+		add_classes(node_array_meta.mark_for?.(child_index), 'mark');
+		for (const annotation of node_array_meta.annotations_for(child_index)) {
+			add_classes(annotation, 'anno');
+		}
+		return classes.join(' ');
+	});
 </script>
 
 <svelte:element
 	this={tag}
 	id={node.id}
-	class="node-{node.type} {css_class}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
+	class="node-{node.type} {css_class}{range_classes
+		? ` ${range_classes}`
+		: ''}{is_first ? ' first' : ''}{is_last ? ' last' : ''}"
 	data-node-id={node.id}
 	data-path={path_str}
 	data-type="node"
 	style="anchor-name: --{path_str};{style}"
 	{...rest}
+	{@attach svedit.visibility_registry.track_node(path_str)}
 >
 	{@render children()}
 </svelte:element>

package/src/lib/NodeArrayProperty.svelte

@@ -1,11 +1,11 @@
 <script>
 	import { getContext, setContext } from 'svelte';
 	import UnknownNode from './UnknownNode.svelte';
-	import { serialize_path } from './utils.js';
+	import { serialize_path, calculate_fragment_ranges } from './utils.js';
 	import DefaultNodeGap from './NodeGap.svelte';
 	import DefaultNodeGapMarkers from './NodeGapMarkers.svelte';
 
-	/** @import { NodeArrayPropertyProps } from './types.d.ts'; */
+	/** @import { NodeArrayPropertyProps, NodeArrayAttachmentContext } from './types.d.ts'; */
 
 	const svedit = getContext('svedit');
 	let NodeGap = $derived(svedit.session.config.system_components?.node_gap ?? DefaultNodeGap);
@@ -20,10 +20,85 @@
 	// NodeGap's should_position_gap call to avoid N+1 joins per render.
 	let path_str = $derived(serialize_path(path));
 
-	let node_ids = $derived(svedit.session.get(path));
-	let nodes = $derived(node_ids.map((id) => svedit.session.get(id)));
+	let raw_value = $derived(svedit.session.get(path));
+	let node_ids = $derived(raw_value.nodes);
+	let marks = $derived(raw_value.marks);
+	let annotations = $derived(raw_value.annotations);
 
-	// Mirrors the AnnotatedTextProperty pattern: a `focused` class follows
+	let fragments = $derived(get_fragments(node_ids, marks));
+
+	function get_fragments(node_ids, marks) {
+		const ranges = calculate_fragment_ranges(node_ids.length, marks);
+		let fragments = [];
+
+		for (const range of ranges) {
+			const nodes_slice = node_ids.slice(range.start_offset, range.end_offset);
+
+			if (range.type === 'mark') {
+				const node = svedit.session.get(range.node_id);
+				fragments.push({
+					type: 'mark',
+					node,
+					nodes: nodes_slice,
+					start_index: range.start_offset,
+					mark_index: range.mark_index
+				});
+			} else if (range.type === 'content') {
+				fragments.push({
+					type: 'nodes',
+					nodes: nodes_slice,
+					start_index: range.start_offset
+				});
+			}
+		}
+		return fragments;
+	}
+
+	function get_node_key(node_id, index) {
+		let occurrence = 0;
+		for (let current_index = 0; current_index < index; current_index++) {
+			if (node_ids[current_index] === node_id) occurrence += 1;
+		}
+		return `${node_id}:${occurrence}`;
+	}
+
+	/**
+	 * @returns {NodeArrayAttachmentContext}
+	 */
+	function get_range_context(range, index, node_index) {
+		const node = svedit.session.get(range.node_id);
+		const is_start = node_index === range.start_offset;
+		const is_end = node_index === range.end_offset - 1;
+
+		return {
+			...range,
+			index,
+			node,
+			is_start,
+			is_middle: !is_start && !is_end,
+			is_end
+		};
+	}
+
+	function get_covering_ranges(ranges, node_index) {
+		return ranges
+			.map((range, index) => ({ range, index }))
+			.filter(({ range }) => range.start_offset <= node_index && node_index < range.end_offset)
+			.map(({ range, index }) => get_range_context(range, index, node_index));
+	}
+
+	function get_annotation_contexts(node_index) {
+		return get_covering_ranges(annotations, node_index);
+	}
+
+	function get_mark(node_index) {
+		// The single mark wrapping this node, or null. Mark exclusivity
+		// guarantees at most one. Annotations never wrap and are exposed via
+		// `annotations` instead.
+		return get_covering_ranges(marks, node_index)[0] ?? null;
+	}
+
+	// Mirrors the TextProperty pattern: a `focused` class follows
 	// the model selection. Used by the CSS rule below to hide the empty-array
 	// NodeGap while the caret is in the placeholder, so its <br> isn't a
 	// second arrow-key stop (issue #260).
@@ -35,6 +110,15 @@
 	setContext('node_array_meta', {
 		get length() {
 			return node_ids.length;
+		},
+		// Lets Node self-serve the marks and annotations covering a child, so
+		// node wrappers can carry range classes without every node component
+		// having to thread the `mark`/`annotations` props through.
+		mark_for(node_index) {
+			return get_mark(node_index);
+		},
+		annotations_for(node_index) {
+			return get_annotation_contexts(node_index);
 		}
 	});
 </script>
@@ -48,6 +132,7 @@
 	data-path={path_str}
 	style="anchor-name: --{path_str};{style ? ` ${style}` : ''}"
 	{...rest}
+	{@attach svedit.visibility_registry.track_array(path_str)}
 >
 	{#if node_ids.length === 0 && svedit.editable}
 		<div
@@ -55,17 +140,39 @@
 			data-path={serialize_path([...path, 0])}
 			data-type="node"
 			style="anchor-name: --{serialize_path([...path, 0])};"
+			{@attach svedit.visibility_registry.track_node(serialize_path([...path, 0]))}
 		>
 			<NodeGap array_path={path} offset={0} count={0} empty />
 		</div>
 	{/if}
-	{#each nodes as node, index (index)}
-		<NodeGap array_path={path} offset={index} count={nodes.length} />
-		{@const Component = svedit.session.config.node_components[node.type]}
-		{#if Component}
-			<Component path={[...path, index]} />
-		{:else}
-			<UnknownNode path={[...path, index]} />
+	{#snippet render_nodes(nodes_slice, start_index)}
+		{#each nodes_slice as id, slice_index (get_node_key(id, start_index + slice_index))}
+			{@const index = start_index + slice_index}
+			{@const node = svedit.session.get(id)}
+			{@const mark = get_mark(index)}
+			{@const annotations = get_annotation_contexts(index)}
+			<NodeGap array_path={path} offset={index} count={node_ids.length} />
+			{@const Component = svedit.session.config.node_components[node.type]}
+			{#if Component}
+				<Component path={[...path, index]} {mark} {annotations} />
+			{:else}
+				<UnknownNode path={[...path, index]} />
+			{/if}
+		{/each}
+	{/snippet}
+
+	{#each fragments as fragment, fragment_index (fragment_index)}
+		{#if fragment.type === 'nodes'}
+			{@render render_nodes(fragment.nodes, fragment.start_index)}
+		{:else if fragment.type === 'mark'}
+			{@const MarkComponent = svedit.session.config.node_components[fragment.node.type]}
+			{#if MarkComponent}
+				<MarkComponent path={[...path, 'marks', fragment.mark_index, 'node_id']}>
+					{@render render_nodes(fragment.nodes, fragment.start_index)}
+				</MarkComponent>
+			{:else}
+				{@render render_nodes(fragment.nodes, fragment.start_index)}
+			{/if}
 		{/if}
 	{/each}
 	{#if node_ids.length > 0}

package/src/lib/NodeGap.svelte

@@ -13,6 +13,7 @@
 <script>
 	import { serialize_path } from './utils.js';
 	import { getContext } from 'svelte';
+	import { should_position_gap } from './node_visibility.svelte.js';
 
 	/**
 	 * ┌─────────────────────────────────────────────────────────────────┐
@@ -37,10 +38,13 @@
 	 *
 	 * Always present in the DOM when editable (stable structure for
 	 * selection anchoring, scrollTo, etc.). Anchor positioning is
-	 * activated lazily via the `.positioned` class, toggled imperatively
-	 * by the IO callback / MO / bootstrap in node_visibility — keeps
-	 * NodeGap allocation-free of per-instance Svelte signals, which
-	 * matters at 1000+ NodeGaps per scroll frame.
+	 * activated lazily via the `.positioned` class, derived reactively
+	 * from the visibility registry's array_indices / edge_map. Svelte's
+	 * reactive collections track reads at per-key granularity, so a
+	 * registry write only
+	 * re-evaluates the adjacent gaps. Applying the class declaratively
+	 * (instead of imperative classList toggles) means it survives DOM
+	 * recreation without a document change (e.g. dev-mode HMR).
 	 *
 	 * `position-visibility: anchors-visible` does NOT skip anchor
 	 * resolution — the browser resolves all anchor() then hides the
@@ -62,6 +66,22 @@
 	let is_last = $derived(offset === count);
 	let type = $derived(is_first ? 'gap-before' : 'gap-after');
 
+	let path_str = $derived(serialize_path(array_path));
+	// Two-derived split is load-bearing: get_array_indices lazily
+	// creates the set, and Svelte doesn't track deps on state created
+	// inside the reading derived — so acquire here, read in `positioned`.
+	let near_indices = $derived(svedit.visibility_registry.get_array_indices(path_str));
+	let positioned = $derived(
+		is_editable &&
+			should_position_gap(
+				near_indices,
+				svedit.visibility_registry.edge_map.get(path_str),
+				offset,
+				is_last,
+				empty
+			)
+	);
+
 	let gap_style = $derived.by(() => {
 		if (!is_editable) return '';
 		const prev_idx = offset - 1;
@@ -87,8 +107,9 @@
 		class:gap-after={!is_first}
 		class:empty
 		class:last={is_last}
+		class:positioned
 		data-type={type}
-		data-gap-array-path={serialize_path(array_path)}
+		data-gap-array-path={path_str}
 		data-gap-offset={offset}
 		style={gap_style}
 	>
@@ -111,9 +132,30 @@
 	}
 
 	/* ------------------------------------------------------------------ */
-	/* Un-positioned: minimal in-DOM presence, no anchor resolution        */
+	/* Un-positioned: no layout box at all                                 */
 	/* ------------------------------------------------------------------ */
 
+	/*
+	 * display: none is load-bearing for large documents. A zero-size
+	 * absolutely-positioned selectable still belongs to the containing
+	 * block's out-of-flow list, and the browser lays out EVERY such box
+	 * on EVERY layout pass — measured ~430ms per pass at 2000 nodes
+	 * (~3500 gaps) in Chrome vs ~23ms with the boxes removed. That cost
+	 * hits every keystroke (the per-change reconcile reads a rect for
+	 * every node, and selection rendering forces layout), every window
+	 * resize frame, and every scroll-triggered layout.
+	 *
+	 * Off-screen gaps therefore contribute no layout box. DOM structure
+	 * stays stable (the .node-gap wrapper and selectable elements remain),
+	 * and DOM Ranges may still point into display:none elements, so
+	 * programmatic node selections targeting off-screen gaps keep working.
+	 * Empty-array gaps are excluded: they must stay clickable/visible even
+	 * before reconcile positions them.
+	 */
+	:global(.node-gap:not(.positioned):not(.empty) .svedit-selectable) {
+		display: none;
+	}
+
 	:global(.node-gap:not(.positioned) .svedit-selectable) {
 		position: absolute;
 		pointer-events: none;