svedit 0.13.0 → 0.15.0

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "svedit",
-  "version": "0.13.0",
+  "version": "0.15.0",
+  "homepage": "https://svedit.dev",
   "license": "MIT",
   "files": [
     "dist",
@@ -26,34 +27,35 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.3",
+    "@eslint/compat": "^2.1.1",
     "@eslint/js": "^10.0.1",
-    "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.55.0",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@types/node": "^25.6.0",
-    "@typescript-eslint/eslint-plugin": "^8.57.0",
-    "@typescript-eslint/parser": "^8.57.0",
-    "@vitest/browser": "^4.1.0",
-    "@vitest/browser-preview": "^4.1.0",
-    "eslint": "^10.0.3",
+    "@sveltejs/adapter-static": "^4.0.0",
+    "@sveltejs/kit": "^3.0.0",
+    "@sveltejs/load-config": "^0.2.3",
+    "@sveltejs/package": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@types/node": "^26.6.4",
+    "@typescript-eslint/eslint-plugin": "^8.71.0",
+    "@typescript-eslint/parser": "^8.71.0",
+    "@vitest/browser-preview": "^5.0.3",
+    "eslint": "^10.11.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.15.1",
-    "globals": "^17.4.0",
-    "nanoid": "^5.1.6",
-    "prettier": "^3.8.1",
-    "prettier-plugin-svelte": "^3.5.1",
-    "publint": "^0.3.18",
-    "svelte": "^5.53.12",
-    "svelte-check": "^4.4.5",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.0",
-    "vitest": "^4.1.0",
-    "vitest-browser-svelte": "^2.1.0"
+    "eslint-plugin-svelte": "^3.23.0",
+    "globals": "^17.13.0",
+    "nanoid": "^6.0.1",
+    "prettier": "^3.9.9",
+    "prettier-plugin-svelte": "^4.1.1",
+    "publint": "^0.3.25",
+    "svelte": "^5.57.1",
+    "svelte-check": "^4.7.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3",
+    "vitest-browser-svelte": "^3.1.0"
   },
-  "allowScripts": {
-    "fsevents@2.3.3": true
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
   },
   "scripts": {
     "dev": "vite dev",

package/src/lib/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/src/lib/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/src/lib/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/src/lib/Session.svelte.ts

@@ -444,18 +444,23 @@ export default class Session<S extends DocumentSchema = DocumentSchema> {
 	 * @returns The next node insert caret selection, or null if none is available
 	 */
 	get_next_node_insert_caret(selection: Selection | null = this.selection): Selection | null {
-		// There's no parent path to insert into
-		if (!selection || selection.path.length <= 2) {
-			return null;
+		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) as number) + 1;
-		return {
-			type: 'node',
-			path: selection.path.slice(0, -2),
-			anchor_offset: node_offset,
-			focus_offset: node_offset
-		};
+		return null;
 	}
 
 	get_selected_text(): (Text & { nodes: Record<string, DocumentNode> }) | null {

package/src/lib/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/src/lib/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/src/lib/Transaction.svelte.ts

@@ -313,15 +313,20 @@ export default class Transaction {
 	}
 
 	// Takes a subgraph and constructs new nodes from it
-	// NOTE: all ids will be mapped to new unique ids.
+	// IDs are regenerated by default; paste can preserve a collision-free subgraph.
 	// NOTE: Omitted properties will be populated with default values.
-	build(node_id: NodeId, nodes: Record<string, DocumentNode>): NodeId {
+	build(
+		node_id: NodeId,
+		nodes: Record<string, DocumentNode>,
+		{ preserve_ids = false }: { preserve_ids?: boolean } = {}
+	): NodeId {
 		const depth_first_nodes = traverse(node_id, this.schema, nodes);
+		const keep_ids = preserve_ids && depth_first_nodes.every((node) => !this.doc.nodes[node.id]);
 		// This maps original ids to newly generated ids
 		const id_map: Record<string, string> = {};
 
 		for (const node of depth_first_nodes) {
-			const new_id = this.generate_id();
+			const new_id = keep_ids ? node.id : this.generate_id();
 			id_map[node.id] = new_id;
 			let new_node: DocumentNode = { ...node, id: new_id };
 			const node_schema = this.schema[node.type];
@@ -762,7 +767,8 @@ export default class Transaction {
 		node_ids: NodeId[],
 		marks: Array<Mark> = [],
 		annotations: Array<Annotation> = [],
-		nodes: Record<NodeId, DocumentNode> = {}
+		nodes: Record<NodeId, DocumentNode> = {},
+		{ preserve_ids = false }: { preserve_ids?: boolean } = {}
 	): this {
 		if (this.selection.type !== 'node') return this;
 
@@ -803,7 +809,7 @@ export default class Transaction {
 					const mark_node = nodes[mark.node_id];
 					if (!property_definition.mark_types?.includes(mark_node?.type)) return null;
 
-					const new_mark_node_id = this.build(mark.node_id, nodes);
+					const new_mark_node_id = this.build(mark.node_id, nodes, { preserve_ids });
 					return {
 						start_offset: start + mark.start_offset,
 						end_offset: start + mark.end_offset,
@@ -828,7 +834,7 @@ export default class Transaction {
 				const annotation_node = nodes[annotation.node_id];
 				if (!property_definition.annotation_types?.includes(annotation_node?.type)) return null;
 
-				const new_annotation_node_id = this.build(annotation.node_id, nodes);
+				const new_annotation_node_id = this.build(annotation.node_id, nodes, { preserve_ids });
 				return {
 					start_offset: start + annotation.start_offset,
 					end_offset: start + annotation.end_offset,

package/src/lib/html_export.ts

@@ -0,0 +1,37 @@
+import type { DocumentNode, SessionConfig, Text } from './types.js';
+import { escape_html } from './html_utils.js';
+
+/** Receives already escaped inline HTML. Exporters must escape attribute values. */
+export type MarkHtmlExporter = (node: DocumentNode, content: string) => string;
+
+/** Export exclusive marks as inline HTML; data-only annotations remain in the native payload. */
+export function export_text_html(
+	text: Text,
+	session: { doc: { nodes: Record<string, DocumentNode> }; config: SessionConfig },
+	nodes = session.doc.nodes
+): string {
+	const characters = [
+		...new Intl.Segmenter('en', { granularity: 'grapheme' }).segment(text.content)
+	].map((segment) => segment.segment);
+	const slice = (start: number, end: number) =>
+		escape_html(characters.slice(start, end).join('')).replace(/\r\n|\r|\n/g, '<br>');
+	let html = '';
+	let offset = 0;
+	for (const mark of [...text.marks].sort((a, b) => a.start_offset - b.start_offset)) {
+		if (
+			!Number.isInteger(mark.start_offset) ||
+			!Number.isInteger(mark.end_offset) ||
+			mark.start_offset < offset ||
+			mark.end_offset > characters.length ||
+			mark.end_offset <= mark.start_offset
+		)
+			continue;
+		html += slice(offset, mark.start_offset);
+		const content = slice(mark.start_offset, mark.end_offset);
+		const node = nodes[mark.node_id];
+		const exporter = node && session.config.mark_html_exporters?.[node.type];
+		html += exporter ? exporter(node, content) : content;
+		offset = mark.end_offset;
+	}
+	return html + slice(offset, characters.length);
+}