svedit 0.13.0 → 0.15.0

package/README.md

@@ -436,6 +436,138 @@ Defaults make it safe to add new defaultable properties, but they are not a repl
 
 Documents need a config object that tells Svedit how to render and manipulate your content. See the full example in [`src/routes/demo_config.ts`](src/routes/demo_config.ts).
 
+### Importing pasted HTML
+
+Set `config.html_paste` to enable external HTML import. Without it, paste keeps its
+existing plain-text behavior. Native Svedit clipboard data and media paste keep
+their existing paths and bypass this importer.
+
+```ts
+import type { HtmlPasteConfig } from 'svedit';
+
+const html_paste: HtmlPasteConfig = {
+	blocks: {
+		p: { type: 'paragraph', text_property: 'content' },
+		h1: { type: 'heading1', text_property: 'content' },
+		h2: { type: 'heading2', text_property: 'content' }
+	},
+	marks: {
+		bold: { type: 'strong' },
+		link: ({ href }) => ({ type: 'link', properties: { href } })
+	}
+};
+
+const config = { /* other configuration */ html_paste };
+```
+
+Use your app's schema names (the demo uses `heading_1`, for example). Blocks accept
+`p` and `h1` through `h6`. Each mapping names a text node type and its text property.
+A block mapping can also be a synchronous factory returning the same descriptor,
+with extra node properties, or `null` to use the destination's default text node:
+
+```ts
+h1: ({ tag }) => ({
+	type: 'heading',
+	text_property: 'content',
+	properties: { level: Number(tag.slice(1)) }
+});
+```
+
+`<strong>` and `<b>` use the `bold` mapping. Link factories receive the decoded,
+trimmed `href`; they may return `null` to discard link formatting. The importer
+accepts HTTP(S), mailto, tel, and relative links, and drops unsafe schemes.
+Mappings describe data; they should not mutate the session. Svedit creates IDs
+and fills schema defaults through its normal insertion transaction.
+
+Map HTML lists separately because they contain an array of text nodes:
+
+```ts
+html_paste.lists = {
+	ul: {
+		type: 'list',
+		children_property: 'list_items',
+		item: { type: 'list_item', text_property: 'content' },
+		properties: { layout: 'square' }
+	},
+	ol: {
+		type: 'list',
+		children_property: 'list_items',
+		item: { type: 'list_item', text_property: 'content' },
+		properties: { layout: 'decimal' }
+	}
+};
+```
+
+All type and property names come from your schema. Nested HTML lists flatten into
+one list in item order, using the outer list's mapping. An item with multiple
+paragraphs becomes one text node. Unmapped or disallowed lists fall back to the
+destination's default text nodes; text fields receive flattened list text.
+
+If a destination requires a containing block, configure an optional wrapper:
+
+```ts
+html_paste.wrapper = { type: 'prose', children_property: 'body' };
+```
+
+The wrapper is used only when blocks cannot be mapped directly to the destination
+and the destination allows its type. Its `children_property` must be a node array;
+blocks are mapped against that property's allowed node types. Wrapper mappings
+also accept `properties` for schema-specific defaults.
+
+Import respects the destination's allowed node and mark types. Unmapped or
+disallowed headings fall back to its default text node; unsupported marks keep
+their text. Marks are exclusive in Svedit, so a supported link takes precedence
+over bold where they overlap. Existing active-mark insertion behavior still applies.
+
+At a node caret, HTML blocks become nodes. A single text block pasted into text
+retains the destination node type. A configured list follows the node insertion
+path, even when it contains only one item. Multiple blocks pasted into a text node
+follow the existing multi-paragraph behavior: insert nodes after that node without splitting
+or replacing its text. In block fields such as titles and captions, blocks are
+joined with blank lines, or spaces when `allow_newlines` is false.
+
+The importer recognizes semantic tags, common block wrappers, entities and
+`<br>`. Unsupported containers retain their text but do not import table
+structure, images, or CSS formatting. Lists retain structure when a list mapping
+is configured. Script/style content is ignored. Empty or
+unusable HTML, and mapping errors, fall back to the existing plain-text path.
+
+### Exporting copied rich text
+
+Copy and cut include both the embedded `data-svedit` payload and readable HTML.
+Configure `mark_html_exporters` to map your schema's marks to HTML. Unknown marks
+keep their text; data-only annotations remain in the native payload.
+
+```ts
+import { export_text_html, escape_html, safe_html_href } from 'svedit';
+import type { MarkHtmlExporter } from 'svedit';
+
+const mark_html_exporters = {
+	strong: (_node, content) => `<strong>${content}</strong>`,
+	link: (node, content) => {
+		const href = safe_html_href(node.href || '');
+		return href ? `<a href="${escape_html(href)}">${content}</a>` : content;
+	}
+} satisfies Record<string, MarkHtmlExporter>;
+
+const config = {
+	mark_html_exporters,
+	html_exporters: {
+		paragraph: (node, session) => `<p>${export_text_html(node.content, session)}</p>`,
+		heading1: (node, session) => `<h1>${export_text_html(node.content, session)}</h1>`
+	}
+};
+```
+
+Text selections and the default node exporter use this automatically. Existing
+custom `html_exporters` should call `export_text_html` for their text properties,
+as above. The helper escapes text, preserves line breaks with `<br>`, and uses
+Svedit's grapheme offsets. Mark exporters receive already escaped inline HTML;
+only attribute values need escaping. Import and export mappings are separate
+because import factories cannot be reliably reversed.
+
+### Custom handlers
+
 Two optional hooks are especially useful when integrating custom media workflows:
 
 - `handle_media_paste(session, pasted_media)`  
@@ -481,6 +613,7 @@ const session_config = {
 - **`system_components`** - Optional overrides for internal editor components and a slot for your own overlays:
   - `overlays` — A Svelte component rendered inside `<Svedit>` but outside the content canvas. Use it to add floating UI like link editors, image toolbars, or annotation popovers that appear near the current selection. See [`src/routes/components/Overlays.svelte`](src/routes/components/Overlays.svelte) for an example.
   - `node_gap`, `node_gap_markers`, `node_selection_markers` — Override the default system components if you need custom visuals for node gaps or selection indicators.
+  - `node_gap_tools` — A component rendered inside the active node gap marker, next to the caret. Use it for gap-scoped tools like an insert button: it inherits the `--row` orientation variable from the node array, and it appears and disappears together with the caret. Receives `{ path, offset, is_first, is_last }` (see the `NodeGapToolsProps` type). The marker has `pointer-events: none`, so interactive tools must set `pointer-events: auto`. See [`src/routes/components/GapInsertTool.svelte`](src/routes/components/GapInsertTool.svelte) for an example.
 - **`inserters`** - Functions that create blank nodes of each type and set up the selection
 - **`create_commands_and_keymap`** - Factory function that creates commands and keybindings for an editor instance
 - **`handle_image_paste`** - Optional handler for image paste events
@@ -1174,7 +1307,7 @@ For styling, you usually don't need the props at all: `<Node>` adds range classe
 
 ```css
 .anno-marker {
-	background: color-mix(in oklch, var(--app-primary-fill) 13%, transparent);
+	background: color-mix(in oklch, var(--accent) 13%, transparent);
 }
 ```
 
@@ -1452,12 +1585,33 @@ The source code is compact and readable — less than 3000 LOC across a handful
 
 ## Developing Svedit
 
+Development requires Node.js 22.17 or newer.
+
 Once you've cloned the Svedit repository and installed dependencies with `pnpm install`, start a development server:
 
 ```bash
 pnpm dev
 ```
 
+### Running tests
+
+Run the browser tests in Vitest's interactive watch mode:
+
+```bash
+pnpm test:unit
+```
+
+For a single run, use `pnpm test`.
+
+The tests exercise real browser focus, selection, and keyboard behavior. Keep the
+browser runner tab and window focused and let each run finish uninterrupted.
+Do not switch tabs or applications, open DevTools, or click inside the runner
+while tests are running. Losing focus can cause selection and keyboard tests to
+fail even when the editor works correctly.
+
+If a run was interrupted, return focus to the runner and rerun the tests. Failures
+that persist during a focused, uninterrupted run should be investigated.
+
 ## Building
 
 To create a production version of your app:

package/dist/NodeCaret.svelte

@@ -30,7 +30,7 @@
 		--_cp: var(--node-caret-row-inline-position, 50%);
 		content: '';
 		position: absolute;
-		background: var(--node-caret-bg, var(--svedit-editing-stroke));
+		background: var(--node-caret-bg, var(--editing));
 		/* Increase the visibility of the caret by contrasting it with a box shadow that's the inverted brightness of the current text color. */
 		/* Component developers must set their background color and text color on the node itself, not a child element, for this to work. */
 		box-shadow: var(--node-caret-shadow, 0 0 0 0.5px oklch(from currentColor calc(1 - l) c h));

package/dist/NodeGapMarkers.svelte

@@ -27,11 +27,20 @@
 	 * Reads visibility state directly from the registry. SvelteSet's per-key
 	 * tracking on `.has()` and iteration means this component only
 	 * re-evaluates when THIS array's visible-index set changes.
+	 *
+	 * The active marker (the one carrying the caret) additionally renders the
+	 * consumer's `system_components.node_gap_tools` component when configured
+	 * — an extension point for gap-scoped tools (e.g. an insert button).
+	 * Rendering inside the marker means the tool inherits --row for
+	 * orientation-aware styling and shows/hides together with the caret.
+	 * The marker has pointer-events: none — interactive tools must set
+	 * pointer-events: auto themselves.
 	 */
 
 	let { path, count }: { path: DocumentPath; count: number } = $props();
 
 	const svedit = getContext<SveditRenderContext>('svedit');
+	let NodeGapTools = $derived(svedit.session.config.system_components?.node_gap_tools);
 	let path_str = $derived(serialize_path(path));
 	let visible = $derived(svedit.visibility_registry.get_array_indices(path_str));
 
@@ -163,6 +172,9 @@
 	>
 		{#if gap.key === caret_gap_key}
 			<NodeCaret />
+			{#if NodeGapTools}
+				<NodeGapTools {path} offset={gap.offset} is_first={gap.is_first} is_last={gap.is_last} />
+			{/if}
 		{/if}
 	</div>
 {/each}
@@ -170,6 +182,7 @@
 <style>
 	/*
 	 * Public customization tokens (set on an ancestor or this component):
+	 * --editing-stroke
 	 * --node-caret-gap-color
 	 * --node-caret-symbol-size
 	 * --node-caret-symbol-stroke
@@ -611,8 +624,8 @@
 				calc(var(--_mi) + var(--_R) * 9999999px),
 				calc(50% + var(--_C) * 9999999px)
 			);
-			border-top: calc(var(--_C) * 1px) dashed var(--node-caret-gap-color, var(--svedit-canvas-stroke));
-			border-left: calc(var(--_R) * 1px) dashed var(--node-caret-gap-color, var(--svedit-canvas-stroke));
+			border-top: calc(var(--_C) * 1px) dashed var(--node-caret-gap-color, var(--editing-stroke));
+			border-left: calc(var(--_R) * 1px) dashed var(--node-caret-gap-color, var(--editing-stroke));
 			transform:
 				translateY(calc(var(--_C) * -0.5px))
 				translateX(calc(var(--_R) * -0.5px));
@@ -626,7 +639,7 @@
 		/* Empty array marker (dashed outline for discoverability). */
 		&.gap-empty::before {
 			inset: 0px;
-			border: var(--node-caret-empty-border, 1px dashed var(--node-caret-gap-color, var(--svedit-canvas-stroke)));
+			border: var(--node-caret-empty-border, 1px dashed var(--node-caret-gap-color, var(--editing-stroke)));
 			border-radius: var(--node-caret-empty-border-radius, 3px);
 		}
 
@@ -639,7 +652,7 @@
 			top: 50%;
 			left: 50%;
 			transform: translate(-50%, -50%);
-			background: var(--node-caret-symbol-bg, var(--node-caret-gap-color, var(--svedit-canvas-stroke)));
+			background: var(--node-caret-symbol-bg, var(--node-caret-gap-color, var(--editing-stroke)));
 			mask: var(--node-caret-symbol-mask,
 				linear-gradient(black, black) center / 100% var(--node-caret-symbol-stroke, 1px) no-repeat,
 				linear-gradient(black, black) center / var(--node-caret-symbol-stroke, 1px) 100% no-repeat

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

@@ -1 +1 @@
-{"version":3,"file":"NodeGapMarkers.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeGapMarkers.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAuB,MAAM,YAAY,CAAC;AAEnE,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAoKhE,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"NodeGapMarkers.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeGapMarkers.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAuB,MAAM,YAAY,CAAC;AAEnE,KAAK,gBAAgB,GAAI;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAgLhE,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/NodeSelectionMarkers.svelte

@@ -24,13 +24,18 @@
 {#if svedit.session.selection?.type === 'property'}
 	<div
 		class="selected-property-overlay"
+		class:unfocused={!svedit.canvas_focused}
 		style="position-anchor: --{serialize_path(svedit.session.selection.path)};"
 	></div>
 {/if}
 
 {#if selected_node_paths}
 	{#each selected_node_paths as path (serialize_path(path))}
-		<div class="selected-node-overlay" style="position-anchor: --{serialize_path(path)};"></div>
+		<div
+			class="selected-node-overlay"
+			class:unfocused={!svedit.canvas_focused}
+			style="position-anchor: --{serialize_path(path)};"
+		></div>
 	{/each}
 {/if}
 
@@ -50,8 +55,8 @@
 		   Performance note: outlines don't participate in layout, so
 		   selection changes can't trigger reflows. */
 		position: absolute;
-		background: var(--svedit-editing-fill);
-		outline: 1px solid var(--svedit-editing-stroke);
+		background: var(--editing-muted);
+		outline: 1px solid var(--editing);
 		outline-offset: -0.5px;
 		border-radius: 1px;
 		top: anchor(top);
@@ -61,4 +66,10 @@
 		pointer-events: none;
 		z-index: 12;
 	}
+
+	.selected-node-overlay.unfocused,
+	.selected-property-overlay.unfocused {
+		background: oklch(from var(--editing-muted) l 0 h / alpha);
+		outline-color: oklch(from var(--editing) l 0 h);
+	}
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"Session.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Session.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Session.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Session.svelte.ts"],"names":[],"mappings":"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"}

package/dist/Session.svelte.js

@@ -361,17 +361,25 @@ export default class Session {
      * @returns The next node insert caret selection, or null if none is available
      */
     get_next_node_insert_caret(selection = this.selection) {
-        // There's no parent path to insert into
-        if (!selection || selection.path.length <= 2) {
+        if (!selection)
             return null;
+        // Array indexes identify insertion positions. Single-node references can
+        // occur between arrays, so removing a fixed pair of segments is unsafe.
+        for (let index = selection.path.length - 1; index >= 1; index--) {
+            const node_index = selection.path[index];
+            if (typeof node_index !== 'number')
+                continue;
+            const parent_path = selection.path.slice(0, index);
+            if (this.inspect(parent_path).type !== 'node_array')
+                continue;
+            return {
+                type: 'node',
+                path: parent_path,
+                anchor_offset: node_index + 1,
+                focus_offset: node_index + 1
+            };
         }
-        const node_offset = selection.path.at(-2) + 1;
-        return {
-            type: 'node',
-            path: selection.path.slice(0, -2),
-            anchor_offset: node_offset,
-            focus_offset: node_offset
-        };
+        return null;
     }
     get_selected_text() {
         if (this.selection?.type !== 'text')

package/dist/Svedit.svelte

@@ -19,6 +19,9 @@
 		get_default_text_node,
 		create_plain_text_nodes_payload
 	} from './paste_utils.js';
+	import { export_text_html } from './html_export.js';
+	import { escape_html } from './html_utils.js';
+	import { parse_html_paste, map_html_text, map_html_blocks } from './html_paste.js';
 	import { create_node_visibility } from './node_visibility.svelte.js';
 	import DefaultNodeSelectionMarkers from './NodeSelectionMarkers.svelte';
 	import './styles/svedit-colors.css';
@@ -31,6 +34,7 @@
 		NodeSelection,
 		TextSelection,
 		PropertySelection,
+		PropertyDefinition,
 		DocumentNode,
 		DocumentPath,
 		DynamicRecord,
@@ -394,12 +398,12 @@ ${fallback_html}`;
 			if (prop_name === 'id' || prop_name === 'type') continue;
 			const property_definition = node_schema.properties[prop_name];
 			// Check if this is a text property.
-			if (property_definition.type === 'text') {
+			if (property_definition?.type === 'text') {
 				const text_content = prop_value.content;
 				if (text_content.trim()) {
-					html += `<p>${text_content}</p>`;
+					html += `<p>${export_text_html(prop_value, session)}</p>`;
 				}
-			} else if (property_definition.type === 'node_array') {
+			} else if (property_definition?.type === 'node_array') {
 				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;
@@ -480,7 +484,7 @@ ${fallback_html}`;
 		if (session.selection?.type === 'text') {
 			plain_text = session.get_selected_plain_text();
 			text = session.get_selected_text();
-			const fallback_html = `<span>${text.content}</span>`;
+			const fallback_html = `<span>${export_text_html(text, session, text.nodes)}</span>`;
 
 			// console.log('Text copy:', {
 			// 	text,
@@ -517,8 +521,12 @@ ${fallback_html}`;
 				type: property_definition.type,
 				value
 			};
-			html = create_svedit_html_format(json_data, `<span>${value}</span>`);
-			plain_text = String(value);
+			const fallback_html =
+				property_definition.type === 'text'
+					? export_text_html(value, session)
+					: escape_html(String(value));
+			html = create_svedit_html_format(json_data, `<span>${fallback_html}</span>`);
+			plain_text = property_definition.type === 'text' ? value.content : String(value);
 		}
 
 		// Write to clipboard using event.clipboardData
@@ -611,21 +619,22 @@ ${fallback_html}`;
 		const { nodes, main_nodes, marks = [], annotations = [] } = pasted_json || {};
 		if (!nodes || !main_nodes?.length) return false;
 
-		let tr = session.tr;
-		if (selection) {
-			tr.set_selection(selection);
-		}
-		if (tr.selection?.type !== 'node') return false;
-
-		const property_definition = session.inspect(tr.selection.path);
+		const target_selection = selection || session.selection;
+		if (target_selection?.type !== 'node') return false;
+		const property_definition = session.inspect(target_selection.path);
 		if (property_definition?.type !== 'node_array') return false;
 
+		const tr = session.tr;
+		if (selection) tr.set_selection(selection);
+
 		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
 		);
 
+		// Decide for the whole clipboard graph before creating any nodes or replacing the selection.
+		const preserve_ids = Object.values(nodes).every((node: DocumentNode) => !tr.doc.nodes[node.id]);
 		const nodes_to_insert = [];
 		let rejected = false;
 		for (const node_id of main_nodes) {
@@ -642,30 +651,36 @@ ${fallback_html}`;
 					default_text_node_type &&
 					target_text_property_name
 				) {
-					const new_node_id = tr.build('the_node', {
-						the_node: {
-							id: 'the_node',
-							type: default_text_node_type,
-							[target_text_property_name]: text_content || {
-								content: '',
-								marks: [],
-								annotations: []
+					// Keep the clipboard graph so converted text retains its marks and annotations.
+					const new_node_id = tr.build(
+						node_id,
+						{
+							...nodes,
+							[node_id]: {
+								id: node_id,
+								type: default_text_node_type,
+								[target_text_property_name]: text_content || {
+									content: '',
+									marks: [],
+									annotations: []
+								}
 							}
-						}
-					});
+						},
+						{ preserve_ids }
+					);
 					nodes_to_insert.push(new_node_id);
 				} else {
 					rejected = true;
 					break;
 				}
 			} else {
-				const new_node_id = tr.build(node_id, nodes);
+				const new_node_id = tr.build(node_id, nodes, { preserve_ids });
 				nodes_to_insert.push(new_node_id);
 			}
 		}
 
 		if (!rejected) {
-			tr.insert_nodes(nodes_to_insert, marks, annotations, nodes);
+			tr.insert_nodes(nodes_to_insert, marks, annotations, nodes, { preserve_ids });
 			session.apply(tr);
 			return true;
 		}
@@ -679,13 +694,62 @@ ${fallback_html}`;
 		return false;
 	}
 
+	function try_html_paste(html: string): boolean {
+		const config = session.config.html_paste;
+		const selection = session.selection;
+		if (!config || !selection) return false;
+		const blocks = parse_html_paste(html);
+		if (!blocks.length) return false;
+		if (selection.type === 'text') {
+			const owner = session.get(selection.path.slice(0, -1));
+			const insert_as_nodes =
+				blocks.length > 1 ||
+				blocks.some(
+					(block) =>
+						'items' in block && (config.lists?.[block.tag] || block.items.flat().length > 1)
+				);
+			if (insert_as_nodes && owner && session.kind(owner) === 'text') {
+				const caret = get_node_insert_caret_after_text_selection(selection);
+				if (caret) {
+					const payload = map_html_blocks(
+						blocks,
+						config,
+						session.schema,
+						session.inspect(caret.path) as unknown as PropertyDefinition
+					);
+					if (payload && try_node_paste(payload, caret)) return true;
+				}
+			}
+			const nodes: Record<string, DocumentNode> = {};
+			const text = map_html_text(
+				blocks,
+				config,
+				session.schema,
+				session.inspect(selection.path) as unknown as PropertyDefinition,
+				nodes
+			);
+			session.apply(session.tr.insert_text(text.content, text.marks, [], nodes));
+			return true;
+		}
+		const caret = get_target_node_insert_caret(selection);
+		if (!caret) return false;
+		const payload = map_html_blocks(
+			blocks,
+			config,
+			session.schema,
+			session.inspect(caret.path) as unknown as PropertyDefinition
+		);
+		return !!payload && try_node_paste(payload, caret);
+	}
+
 	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;
 		event.preventDefault();
 
-		let plain_text,
+		let html_content,
+			plain_text,
 			pasted_json,
 			pasted_media = [];
 
@@ -718,7 +782,7 @@ ${fallback_html}`;
 		} else {
 			// First try to extract svedit data from HTML format
 			try {
-				const html_content = event.clipboardData?.getData('text/html');
+				html_content = event.clipboardData?.getData('text/html');
 				if (html_content) {
 					pasted_json = extract_svedit_data_from_html(html_content);
 				}
@@ -733,6 +797,14 @@ ${fallback_html}`;
 				console.error('Failed to paste any content:', e);
 			}
 
+			if (!pasted_json && html_content && session.config.html_paste) {
+				try {
+					if (try_html_paste(html_content)) return;
+				} catch (error) {
+					console.warn('Failed to import pasted HTML; falling back to plain text:', error);
+				}
+			}
+
 			// Try to construct a node payload from plain text when applicable
 			if (!pasted_json && typeof plain_text === 'string') {
 				plain_text = normalize_line_endings(plain_text);
@@ -1683,7 +1755,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.
@@ -1699,7 +1771,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) {

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

@@ -1 +1 @@
-{"version":3,"file":"Svedit.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Svedit.svelte.ts"],"names":[],"mappings":"AAyBA,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AAExC,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EASX,MAAM,YAAY,CAAC;AAGrB,iBAAS,QAAQ,CAAC,CAAC,SAAS,cAAc;WA8lDb,WAAW,CAAC,CAAC,CAAC;aAAwB;QAAE,YAAY,aAAqB;KAAE;;;;EAAuE;AAC/K,cAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc;IAC5C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;;;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,cAAc,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACnZ,CAAC,CAAC,SAAS,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAClJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,MAAM,EAAE,qBAAmC,CAAC;AAChC,KAAK,MAAM,CAAC,CAAC,SAAS,cAAc,IAAI,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACzE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Svedit.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Svedit.svelte.ts"],"names":[],"mappings":"AA4BA,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AAExC,OAAO,KAAK,EACV,cAAc,EACd,WAAW,EAUX,MAAM,YAAY,CAAC;AAGrB,iBAAS,QAAQ,CAAC,CAAC,SAAS,cAAc;WAqqDb,WAAW,CAAC,CAAC,CAAC;aAAwB;QAAE,YAAY,aAAqB;KAAE;;;;EAAuE;AAC/K,cAAM,iBAAiB,CAAC,CAAC,SAAS,cAAc;IAC5C,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;;;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,cAAc,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACnZ,CAAC,CAAC,SAAS,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAClJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,MAAM,EAAE,qBAAmC,CAAC;AAChC,KAAK,MAAM,CAAC,CAAC,SAAS,cAAc,IAAI,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACzE,eAAe,MAAM,CAAC"}

package/dist/TextProperty.svelte

@@ -186,9 +186,9 @@
 		display: inline-block;
 		/* we use box-shadow to draw the caret shape, matching the native caret */
 		box-shadow:
-			0 -0.4cap 0 0.65px var(--svedit-caret-color, AccentColor),
-			0 0 0 0.65px var(--svedit-caret-color, AccentColor),
-			0 0.4cap 0 0.65px var(--svedit-caret-color, AccentColor);
+			0 -0.4cap 0 0.65px var(--editing, AccentColor),
+			0 0 0 0.65px var(--editing, AccentColor),
+			0 0.4cap 0 0.65px var(--editing, AccentColor);
 		animation: var(
 			--node-caret-animation,
 			node-caret-blink var(--node-caret-blink-duration, 1.1s) ease-in-out infinite
@@ -207,12 +207,12 @@
 
 	/* Dim the selection highlight when canvas loses native focus */
 	:global(.svedit-canvas:not(:focus-within)) .selection-highlight {
-		background: oklch(from var(--svedit-editing-fill) l 0 h / alpha);
+		background: oklch(from var(--editing-muted) l 0 h / alpha);
 	}
 
 	/* Make a collapsed caret visible */
 	:global(.svedit-canvas:not(:focus-within)) .selection-highlight:empty {
 		background: none;
-		outline: 0.5px solid oklch(from var(--svedit-editing-stroke) l 0 h / alpha);
+		outline: 0.5px solid oklch(from var(--editing) l 0 h / alpha);
 	}
 </style>

package/dist/Transaction.svelte.d.ts

@@ -109,7 +109,9 @@ export default class Transaction {
      * ```
      */
     set(path: DocumentPath, value: any): this;
-    build(node_id: NodeId, nodes: Record<string, DocumentNode>): NodeId;
+    build(node_id: NodeId, nodes: Record<string, DocumentNode>, { preserve_ids }?: {
+        preserve_ids?: boolean;
+    }): NodeId;
     /**
      * Creates a new node in the document.
      *
@@ -230,7 +232,9 @@ export default class Transaction {
      * @param nodes - Node graph for restored marks and annotations
      * @returns This transaction instance for method chaining
      */
-    insert_nodes(node_ids: NodeId[], marks?: Array<Mark>, annotations?: Array<Annotation>, nodes?: Record<NodeId, DocumentNode>): this;
+    insert_nodes(node_ids: NodeId[], marks?: Array<Mark>, annotations?: Array<Annotation>, nodes?: Record<NodeId, DocumentNode>, { preserve_ids }?: {
+        preserve_ids?: boolean;
+    }): this;
     /**
      * Inserts text at the current text selection position.
      *