svedit 0.11.1 → 0.13.0

package/dist/CustomProperty.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CustomProperty.svelte.js"],"names":[],"mappings":";;;;;AA4BA,sFAA6D;yCApBnB,cAAc"}
+{"version":3,"file":"CustomProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/CustomProperty.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAuBtD,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/KeyMapper.svelte.d.ts

@@ -1,10 +1,21 @@
+/**
+ * A command as required by the key mapper: anything with is_enabled/execute.
+ */
+type KeymapCommand = {
+    is_enabled: () => boolean;
+    execute: () => unknown;
+};
+/**
+ * A keymap maps key combo strings to arrays of commands.
+ */
+export type Keymap = Record<string, KeymapCommand[]>;
 /**
  * Validates and defines a keymap.
  * Throws an error if any key combo is invalid.
  * Valid formats: 'meta+e,ctrl+e' or 'meta+shift+a'
  * Invalid: 'meta+e+a' (only one non-modifier key allowed)
  */
-export function define_keymap(keymap: any): any;
+export declare function define_keymap<K extends Keymap>(keymap: K): K;
 /**
  * KeyMapper manages keyboard shortcuts using a stack-based scope system.
  *
@@ -17,20 +28,22 @@ export function define_keymap(keymap: any): any;
  *   mapper.push_scope(editor_keymap);     // When editor gains focus
  *   mapper.pop_scope();                   // When editor loses focus
  */
-export class KeyMapper {
-    scope_stack: any[];
+export declare class KeyMapper {
+    scope_stack: Keymap[];
     skip_onkeydown: boolean;
+    constructor();
     /**
      * Push a new scope onto the stack (becomes highest priority)
      */
-    push_scope(keymap: any): void;
+    push_scope(keymap: Keymap): void;
     /**
      * Pop the most recent scope from the stack
      */
-    pop_scope(): any;
+    pop_scope(): Keymap | undefined;
     /**
      * Handle keyboard event by trying scopes from top to bottom
      */
-    handle_keydown(event: any): void;
+    handle_keydown(event: KeyboardEvent): void;
 }
+export {};
 //# sourceMappingURL=KeyMapper.svelte.d.ts.map

package/dist/KeyMapper.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeyMapper.svelte.d.ts","sourceRoot":"","sources":["../src/lib/KeyMapper.svelte.js"],"names":[],"mappings":"AAUA;;;;;GAKG;AACH,gDAgBC;AAuED;;;;;;;;;;;GAWG;AACH;IAEE,mBAAqB;IACrB,wBAA2B;IAG5B;;OAEG;IACH,8BAGC;IAED;;OAEG;IACH,iBAIC;IAED;;OAEG;IACH,iCAUC;CACD"}
+{"version":3,"file":"KeyMapper.svelte.d.ts","sourceRoot":"","sources":["../src/lib/KeyMapper.svelte.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,KAAK,aAAa,GAAG;IAAE,UAAU,EAAE,MAAM,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,OAAO,CAAA;CAAE,CAAC;AAE3E;;GAEG;AACH,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;AAErD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAgB5D;AA2ED;;;;;;;;;;;GAWG;AACH,qBAAa,SAAS;IACrB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;;IAOxB;;OAEG;IACH,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAKhC;;OAEG;IACH,SAAS,IAAI,MAAM,GAAG,SAAS;IAM/B;;OAEG;IACH,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;CAW1C"}

package/dist/KeyMapper.svelte.js

@@ -1,13 +1,11 @@
 import { is_virtual_keyboard_active } from './utils.js';
-
 const MODIFIER_KEYS = ['meta', 'ctrl', 'alt', 'shift'];
 const MODIFIER_EVENT_KEYS = {
-	meta: 'metaKey',
-	ctrl: 'ctrlKey',
-	alt: 'altKey',
-	shift: 'shiftKey'
+    meta: 'metaKey',
+    ctrl: 'ctrlKey',
+    alt: 'altKey',
+    shift: 'shiftKey'
 };
-
 /**
  * Validates and defines a keymap.
  * Throws an error if any key combo is invalid.
@@ -15,58 +13,48 @@ const MODIFIER_EVENT_KEYS = {
  * Invalid: 'meta+e+a' (only one non-modifier key allowed)
  */
 export function define_keymap(keymap) {
-	for (const [key_combo] of Object.entries(keymap)) {
-		const alternatives = key_combo.split(',');
-
-		for (const alternative of alternatives) {
-			const parts = alternative.trim().toLowerCase().split('+');
-			const non_modifiers = parts.filter((part) => !MODIFIER_KEYS.includes(part));
-
-			if (non_modifiers.length !== 1) {
-				throw new Error(
-					`Invalid key combo: "${alternative}". Must have exactly one non-modifier key. Found: ${non_modifiers.length}`
-				);
-			}
-		}
-	}
-	return keymap;
+    for (const [key_combo] of Object.entries(keymap)) {
+        const alternatives = key_combo.split(',');
+        for (const alternative of alternatives) {
+            const parts = alternative.trim().toLowerCase().split('+');
+            const non_modifiers = parts.filter((part) => !MODIFIER_KEYS.includes(part));
+            if (non_modifiers.length !== 1) {
+                throw new Error(`Invalid key combo: "${alternative}". Must have exactly one non-modifier key. Found: ${non_modifiers.length}`);
+            }
+        }
+    }
+    return 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, virtual_keyboard_active = false) {
-	const alternatives = key_combo.split(',');
-
-	return alternatives.some((alternative) => {
-		const parts = alternative.trim().toLowerCase().split('+');
-		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
-		// 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;
-		return modifiers_match && no_extra_modifiers && key_matches;
-	});
+    const alternatives = key_combo.split(',');
+    return alternatives.some((alternative) => {
+        const parts = alternative.trim().toLowerCase().split('+');
+        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
+        // 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;
+        return modifiers_match && no_extra_modifiers && key_matches;
+    });
 }
-
 /**
  * Handles a key map by matching keyboard event against registered key combos
  * and executing the first enabled command.
@@ -75,32 +63,27 @@ function matches_key_combo(key_combo, event, virtual_keyboard_active = false) {
  * 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, virtual_keyboard_active)) {
-			// Find the first enabled command and execute it
-			const enabled_command = commands.find((cmd) => cmd.is_enabled());
-			if (enabled_command) {
-				event.preventDefault();
-
-				// Execute command (may be sync or async)
-				const result = enabled_command.execute();
-
-				// If it's a promise, handle errors (fire-and-forget)
-				if (result instanceof Promise) {
-					result.catch((err) => {
-						console.error('Command execution failed:', err);
-					});
-				}
-
-				return true;
-			}
-		}
-	}
-	return false;
+    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, virtual_keyboard_active)) {
+            // Find the first enabled command and execute it
+            const enabled_command = commands.find((cmd) => cmd.is_enabled());
+            if (enabled_command) {
+                event.preventDefault();
+                // Execute command (may be sync or async)
+                const result = enabled_command.execute();
+                // If it's a promise, handle errors (fire-and-forget)
+                if (result instanceof Promise) {
+                    result.catch((err) => {
+                        console.error('Command execution failed:', err);
+                    });
+                }
+                return true;
+            }
+        }
+    }
+    return false;
 }
-
 /**
  * KeyMapper manages keyboard shortcuts using a stack-based scope system.
  *
@@ -114,40 +97,40 @@ function handle_key_map(key_map, event) {
  *   mapper.pop_scope();                   // When editor loses focus
  */
 export class KeyMapper {
-	constructor() {
-		this.scope_stack = [];
-		this.skip_onkeydown = false;
-	}
-
-	/**
-	 * Push a new scope onto the stack (becomes highest priority)
-	 */
-	push_scope(keymap) {
-		// console.log('pushed keymap', keymap);
-		this.scope_stack.push(keymap);
-	}
-
-	/**
-	 * Pop the most recent scope from the stack
-	 */
-	pop_scope() {
-		const keymap = this.scope_stack.pop();
-		// console.log('popped keymap', keymap);
-		return keymap;
-	}
-
-	/**
-	 * Handle keyboard event by trying scopes from top to bottom
-	 */
-	handle_keydown(event) {
-		// Key handling temporarily disabled (e.g. while character composition takes place)
-		if (this.skip_onkeydown) return;
-		// console.log('KeyMapper.handle_keydown', event);
-		// Try from most specific (top of stack) to most general (bottom)
-		for (let i = this.scope_stack.length - 1; i >= 0; i--) {
-			if (handle_key_map(this.scope_stack[i], event)) {
-				return;
-			}
-		}
-	}
+    scope_stack;
+    skip_onkeydown;
+    constructor() {
+        this.scope_stack = [];
+        this.skip_onkeydown = false;
+    }
+    /**
+     * Push a new scope onto the stack (becomes highest priority)
+     */
+    push_scope(keymap) {
+        // console.log('pushed keymap', keymap);
+        this.scope_stack.push(keymap);
+    }
+    /**
+     * Pop the most recent scope from the stack
+     */
+    pop_scope() {
+        const keymap = this.scope_stack.pop();
+        // console.log('popped keymap', keymap);
+        return keymap;
+    }
+    /**
+     * Handle keyboard event by trying scopes from top to bottom
+     */
+    handle_keydown(event) {
+        // Key handling temporarily disabled (e.g. while character composition takes place)
+        if (this.skip_onkeydown)
+            return;
+        // console.log('KeyMapper.handle_keydown', event);
+        // Try from most specific (top of stack) to most general (bottom)
+        for (let i = this.scope_stack.length - 1; i >= 0; i--) {
+            if (handle_key_map(this.scope_stack[i], event)) {
+                return;
+            }
+        }
+    }
 }

package/dist/Node.svelte

@@ -1,32 +1,63 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import { serialize_path } from './utils.js';
+	import type {
+		NodeArrayAttachmentContext,
+		NodeArrayRenderContext,
+		NodeProps,
+		SveditRenderContext
+	} from './types.js';
 
-	/** @import { NodeProps } from './types.d.ts'; */
+	const svedit = getContext<SveditRenderContext>('svedit');
 
-	const svedit = getContext('svedit');
-
-	/** @type {NodeProps} */
-	let { path, children, tag = 'div', class: css_class, style = '', ...rest } = $props();
+	let { path, children, tag = 'div', class: css_class, style = '', ...rest }: NodeProps = $props();
 
 	let node = $derived(svedit.session.get(path));
 	let path_str = $derived(serialize_path(path));
 
-	const node_array_meta = getContext('node_array_meta');
-	let child_index = $derived(node_array_meta ? parseInt(String(path.at(-1)), 10) : -1);
+	const node_array_meta = getContext<NodeArrayRenderContext | undefined>('node_array_meta');
+	let child_index = $derived(node_array_meta ? (path.at(-1) as number) : -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: string[] = [];
+
+		const add_classes = (range: NodeArrayAttachmentContext | null | undefined, prefix: string) => {
+			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/dist/Node.svelte.d.ts

@@ -1,7 +1,5 @@
+import type { NodeProps } from './types.js';
+declare const Node: import("svelte").Component<NodeProps, {}, "">;
+type Node = ReturnType<typeof Node>;
 export default Node;
-type Node = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<NodeProps>): void;
-};
-declare const Node: import("svelte").Component<import("./types.d.ts").NodeProps, {}, "">;
 //# sourceMappingURL=Node.svelte.d.ts.map

package/dist/Node.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Node.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Node.svelte.js"],"names":[],"mappings":";;;;;AAkCA,yFAAmD"}
+{"version":3,"file":"Node.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Node.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGV,SAAS,EAET,MAAM,YAAY,CAAC;AAuDrB,QAAA,MAAM,IAAI,+CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/NodeArrayProperty.svelte

@@ -1,29 +1,121 @@
-<script>
+<script lang="ts">
 	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 type {
+		NodeArrayPropertyProps,
+		NodeArrayAttachmentContext,
+		NodeArrayFragment,
+		NodeId,
+		Attachment,
+		Mark,
+		NodeArrayRenderContext,
+		SveditRenderContext
+	} from './types.js';
 
-	/** @import { NodeArrayPropertyProps } from './types.d.ts'; */
-
-	const svedit = getContext('svedit');
+	const svedit = getContext<SveditRenderContext>('svedit');
 	let NodeGap = $derived(svedit.session.config.system_components?.node_gap ?? DefaultNodeGap);
 	let NodeGapMarkers = $derived(
 		svedit.session.config.system_components?.node_gap_markers ?? DefaultNodeGapMarkers
 	);
 
-	/** @type {NodeArrayPropertyProps} */
-	let { path, tag = 'div', class: css_class, style = '', ...rest } = $props();
+	let {
+		path,
+		tag = 'div',
+		class: css_class,
+		style = '',
+		...rest
+	}: NodeArrayPropertyProps = $props();
 
 	// Pre-joined once per path change; reused by data-path and by every
 	// 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);
+
+	let fragments = $derived(get_fragments(node_ids, marks));
+
+	function get_fragments(node_ids: NodeId[], marks: Mark[]): NodeArrayFragment[] {
+		const ranges = calculate_fragment_ranges(node_ids.length, marks);
+		const fragments: NodeArrayFragment[] = [];
+
+		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: NodeId, index: number): string {
+		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}`;
+	}
+
+	function get_range_context(
+		range: Attachment,
+		index: number,
+		node_index: number
+	): NodeArrayAttachmentContext {
+		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: Attachment[],
+		node_index: number
+	): NodeArrayAttachmentContext[] {
+		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: number): NodeArrayAttachmentContext[] {
+		return get_covering_ranges(annotations, node_index);
+	}
 
-	// Mirrors the AnnotatedTextProperty pattern: a `focused` class follows
+	function get_mark(node_index: number): NodeArrayAttachmentContext | null {
+		// 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).
@@ -32,9 +124,18 @@
 			serialize_path(svedit.session.selection.path) === path_str
 	);
 
-	setContext('node_array_meta', {
+	setContext<NodeArrayRenderContext>('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: number) {
+			return get_mark(node_index);
+		},
+		annotations_for(node_index: number) {
+			return get_annotation_contexts(node_index);
 		}
 	});
 </script>
@@ -48,6 +149,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 +157,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: NodeId[], start_index: number)}
+		{#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/dist/NodeArrayProperty.svelte.d.ts

@@ -1,7 +1,5 @@
+import type { NodeArrayPropertyProps } from './types.js';
+declare const NodeArrayProperty: import("svelte").Component<NodeArrayPropertyProps, {}, "">;
+type NodeArrayProperty = ReturnType<typeof NodeArrayProperty>;
 export default NodeArrayProperty;
-type NodeArrayProperty = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<NodeArrayPropertyProps>): void;
-};
-declare const NodeArrayProperty: import("svelte").Component<import("./types.d.ts").NodeArrayPropertyProps, {}, "">;
 //# sourceMappingURL=NodeArrayProperty.svelte.d.ts.map

package/dist/NodeArrayProperty.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeArrayProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeArrayProperty.svelte.js"],"names":[],"mappings":";;;;;AA8EA,mHAAgE"}
+{"version":3,"file":"NodeArrayProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeArrayProperty.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,sBAAsB,EAQtB,MAAM,YAAY,CAAC;AAwLrB,QAAA,MAAM,iBAAiB,4DAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/NodeCaret.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	/**
 	 * Visual insertion caret rendered inside the active insertion marker.
 	 *

package/dist/NodeCaret.svelte.d.ts

@@ -1,18 +1,5 @@
-export default NodeCaret;
-type NodeCaret = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
-};
-declare const NodeCaret: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,4 +11,9 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const NodeCaret: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NodeCaret = InstanceType<typeof NodeCaret>;
+export default NodeCaret;
 //# sourceMappingURL=NodeCaret.svelte.d.ts.map