svedit 0.14.0 → 0.15.1

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);

package/src/lib/Transaction.svelte.ts

@@ -313,15 +313,22 @@ 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> = {};
+		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Transaction-local ownership lookup.
+		const used_attachment_ids = new Set<NodeId>();
 
 		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];
@@ -333,7 +340,12 @@ export default class Transaction {
 
 				const remap_ranges = (ranges: Attachment[] | undefined) =>
 					(ranges ?? []).map(({ start_offset, end_offset, node_id }) => {
-						return { start_offset, end_offset, node_id: id_map[node_id] || node_id };
+						// Clipboard subtrees may contain legacy shared attachments; detach each occurrence.
+						const next_id = used_attachment_ids.has(node_id)
+							? this.build(node_id, nodes)
+							: id_map[node_id] || node_id;
+						used_attachment_ids.add(node_id);
+						return { start_offset, end_offset, node_id: next_id };
 					});
 
 				if (prop_type === 'node_array' && value && typeof value === 'object') {
@@ -762,7 +774,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 +816,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 +841,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);
+}

package/src/lib/html_paste.ts

@@ -0,0 +1,279 @@
+import { safe_html_href } from './html_utils.js';
+import type { DocumentNode, DocumentSchema, PropertyDefinition, Text } from './types.js';
+import { get_default_text_node, get_text_property_name } from './paste_utils.js';
+
+export type HtmlBlockTag = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type HtmlBlockMapping = {
+	type: string;
+	text_property: string;
+	properties?: Record<string, unknown>;
+};
+export type HtmlListTag = 'ul' | 'ol';
+export type HtmlContainerMapping = {
+	type: string;
+	children_property: string;
+	properties?: Record<string, unknown>;
+};
+export type HtmlListMapping = HtmlContainerMapping & { item: HtmlBlockMapping };
+export type HtmlMarkMapping = { type: string; properties?: Record<string, unknown> };
+export type HtmlPasteConfig = {
+	blocks?: Partial<
+		Record<
+			HtmlBlockTag,
+			HtmlBlockMapping | ((context: { tag: HtmlBlockTag }) => HtmlBlockMapping | null)
+		>
+	>;
+	lists?: Partial<Record<HtmlListTag, HtmlListMapping>>;
+	wrapper?: HtmlContainerMapping;
+	marks?: {
+		bold?: HtmlMarkMapping;
+		link?: HtmlMarkMapping | ((context: { href: string }) => HtmlMarkMapping | null);
+	};
+};
+type InlineStyle = { bold?: boolean; href?: string };
+type Run = InlineStyle & { text: string };
+type HtmlTextBlock = { tag: HtmlBlockTag; runs: Run[] };
+type HtmlListBlock = { tag: HtmlListTag; items: HtmlTextBlock[][] };
+export type HtmlPasteBlock = HtmlTextBlock | HtmlListBlock;
+
+/** Parse a detached document; never insert clipboard HTML into the editor DOM. */
+export function parse_html_paste(html: string): HtmlPasteBlock[] {
+	const doc = new DOMParser().parseFromString(html, 'text/html');
+	const blocks: HtmlPasteBlock[] = [];
+	let current: HtmlTextBlock = { tag: 'p', runs: [] };
+	let current_list: HtmlListBlock | null = null;
+	let current_item: HtmlTextBlock[] | null = null;
+	const flush = () => {
+		// HTML whitespace collapses across inline elements, but explicit breaks survive.
+		while (current.runs.length && !current.runs[0].text.replace(/^ +/, '')) current.runs.shift();
+		if (current.runs.length) current.runs[0].text = current.runs[0].text.replace(/^ +/, '');
+		while (current.runs.length && !current.runs.at(-1)!.text.replace(/ +$/, '')) current.runs.pop();
+		if (current.runs.length)
+			current.runs.at(-1)!.text = current.runs.at(-1)!.text.replace(/ +$/, '');
+		// Drop empty paragraphs such as <p><br></p> or Word's <p>&nbsp;</p>.
+		if (current.runs.some((run) => run.text.trim())) (current_item || blocks).push(current);
+		current = { tag: 'p', runs: [] };
+	};
+	const walk = (node: Node, style: InlineStyle) => {
+		if (node.nodeType === 3) {
+			let text = (node.textContent || '').replace(/[\t\n\r\f ]+/g, ' ');
+			if (!current.runs.length || /[ \n]$/.test(current.runs.at(-1)!.text))
+				text = text.replace(/^ /, '');
+			if (text) current.runs.push({ ...style, text });
+			return;
+		}
+		if (node.nodeType !== 1) return;
+		const element = node as Element;
+		const tag = element.localName;
+		if (
+			['script', 'style', 'template', 'noscript', 'iframe', 'object', 'svg', 'math'].includes(tag)
+		)
+			return;
+		if (tag === 'br') {
+			current.runs.push({ ...style, text: '\n' });
+			return;
+		}
+		const next_style = { ...style };
+		if (tag === 'b' || tag === 'strong') next_style.bold = true;
+		// Inline font-weight wins over the tag: Google Docs wraps the whole clipboard in
+		// <b style="font-weight:normal">, and Docs and Word express bold as styled spans.
+		const font_weight = (element as HTMLElement).style?.fontWeight;
+		if (font_weight) {
+			next_style.bold = ['bold', 'bolder'].includes(font_weight) || Number(font_weight) >= 600;
+		}
+		if (tag === 'a') next_style.href = safe_html_href(element.getAttribute('href') || '');
+		if ((tag === 'ul' || tag === 'ol') && !current_list) {
+			flush();
+			const list: HtmlListBlock = { tag, items: [] };
+			current_list = list;
+			for (const child of element.childNodes) walk(child, next_style);
+			flush();
+			current_list = null;
+			list.items = list.items.filter((item) => item.length);
+			if (list.items.length) blocks.push(list);
+			return;
+		}
+		// Nested items join the outer list while retaining their own text blocks.
+		if (tag === 'li' && current_list) {
+			flush();
+			const parent_item = current_item;
+			current_item = [];
+			current_list.items.push(current_item);
+			for (const child of element.childNodes) walk(child, next_style);
+			flush();
+			current_item = parent_item;
+			return;
+		}
+		const is_block =
+			/^(p|h[1-6]|div|section|article|header|footer|main|aside|blockquote|pre|ul|ol|li|table|tr|td|th)$/.test(
+				tag
+			);
+		if (is_block) {
+			flush();
+			current.tag = /^h[1-6]$/.test(tag) ? (tag as HtmlBlockTag) : 'p';
+		}
+		for (const child of element.childNodes) walk(child, next_style);
+		if (is_block) flush();
+	};
+	for (const child of doc.body.childNodes) walk(child, {});
+	flush();
+	return blocks;
+}
+
+/** Map runs to exclusive Svedit marks. Supported links take precedence over bold. */
+export function map_html_text(
+	blocks: HtmlPasteBlock[],
+	config: HtmlPasteConfig,
+	schema: DocumentSchema,
+	property: PropertyDefinition,
+	nodes: Record<string, DocumentNode>
+): Text {
+	const result: Text = { content: '', marks: [], annotations: [] };
+	const allowed = property.type === 'text' ? property.mark_types || [] : [];
+	let previous_key = '';
+	const supported = (mapping: HtmlMarkMapping | null | undefined) =>
+		mapping && schema[mapping.type]?.kind === 'mark' && allowed.includes(mapping.type)
+			? mapping
+			: null;
+	const text_blocks = blocks.flatMap((block) => ('items' in block ? block.items.flat() : [block]));
+	for (const [index, block] of text_blocks.entries()) {
+		if (index) {
+			result.content += property.type === 'text' && property.allow_newlines ? '\n\n' : ' ';
+			previous_key = '';
+		}
+		for (const run of block.runs) {
+			let text =
+				property.type === 'text' && property.allow_newlines
+					? run.text
+					: run.text.replace(/[ \t\r\n\f]+/g, ' ');
+			if (property.type === 'text' && !property.allow_newlines && result.content.endsWith(' ')) {
+				text = text.replace(/^ +/, '');
+			}
+			const start_offset = result.content.length;
+			result.content += text;
+			const end_offset = result.content.length;
+			const link = config.marks?.link;
+			const mapping =
+				(run.href && supported(typeof link === 'function' ? link({ href: run.href }) : link)) ||
+				(run.bold && supported(config.marks?.bold));
+			const key = mapping ? JSON.stringify(mapping) : '';
+			if (mapping && end_offset > start_offset) {
+				const previous = result.marks.at(-1);
+				if (previous && previous_key === key && previous.end_offset === start_offset)
+					previous.end_offset = end_offset;
+				else {
+					let id_index = Object.keys(nodes).length;
+					while (nodes[`html_mark_${id_index}`]) id_index++;
+					const id = `html_mark_${id_index}`;
+					nodes[id] = { ...mapping.properties, id, type: mapping.type };
+					result.marks.push({ node_id: id, start_offset, end_offset });
+				}
+			}
+			previous_key = key;
+		}
+	}
+	// Convert UTF-16 ranges only after the complete string is assembled: a grapheme
+	// (such as a combining accent or emoji) can span adjacent HTML elements.
+	const boundaries = [
+		...new Intl.Segmenter('en', { granularity: 'grapheme' }).segment(result.content)
+	].map((segment) => segment.index);
+	boundaries.push(result.content.length);
+	let offset = 0;
+	for (const mark of result.marks) {
+		while (boundaries[offset + 1] <= mark.start_offset) offset++;
+		mark.start_offset = offset;
+		while (boundaries[offset + 1] <= mark.end_offset) offset++;
+		mark.end_offset = offset;
+	}
+	result.marks = result.marks.filter((mark) => {
+		if (mark.end_offset > mark.start_offset) return true;
+		delete nodes[mark.node_id];
+		return false;
+	});
+	return result;
+}
+
+export function map_html_blocks(
+	blocks: HtmlPasteBlock[],
+	config: HtmlPasteConfig,
+	schema: DocumentSchema,
+	property: PropertyDefinition
+) {
+	if (property.type !== 'node_array') return null;
+	const nodes: Record<string, DocumentNode> = {};
+	let node_index = 0;
+	const add_node = (type: string, properties: Record<string, unknown>) => {
+		const id = `html_block_${node_index++}`;
+		nodes[id] = { ...properties, id, type };
+		return id;
+	};
+	const add_text = (blocks: HtmlTextBlock[], mapping: HtmlBlockMapping) =>
+		add_node(mapping.type, {
+			...mapping.properties,
+			[mapping.text_property]: map_html_text(
+				blocks,
+				config,
+				schema,
+				schema[mapping.type].properties[mapping.text_property],
+				nodes
+			)
+		});
+	const add_container = (mapping: HtmlContainerMapping, children: string[]) =>
+		add_node(mapping.type, {
+			...mapping.properties,
+			[mapping.children_property]: { nodes: children, marks: [], annotations: [] }
+		});
+	const map_blocks = (blocks: HtmlPasteBlock[], target: PropertyDefinition): string[] | null => {
+		if (target.type !== 'node_array') return null;
+		const ids: string[] = [];
+		for (const block of blocks) {
+			if ('items' in block) {
+				const mapping = config.lists?.[block.tag];
+				const children = mapping && schema[mapping.type]?.properties[mapping.children_property];
+				if (
+					mapping &&
+					target.node_types.includes(mapping.type) &&
+					children?.type === 'node_array' &&
+					children.node_types.includes(mapping.item.type) &&
+					schema[mapping.item.type]?.kind === 'text' &&
+					schema[mapping.item.type].properties[mapping.item.text_property]?.type === 'text'
+				) {
+					ids.push(
+						add_container(
+							mapping,
+							block.items.map((item) => add_text(item, mapping.item))
+						)
+					);
+				} else {
+					const items = map_blocks(block.items.flat(), target);
+					if (!items) return null;
+					ids.push(...items);
+				}
+				continue;
+			}
+			const rule = config.blocks?.[block.tag];
+			let mapping = typeof rule === 'function' ? rule({ tag: block.tag }) : rule;
+			if (
+				!mapping ||
+				!target.node_types.includes(mapping.type) ||
+				schema[mapping.type]?.kind !== 'text' ||
+				schema[mapping.type]?.properties[mapping.text_property]?.type !== 'text'
+			) {
+				const type = get_default_text_node(target, schema);
+				const text_property = get_text_property_name(type, schema);
+				if (!type || !text_property || !target.node_types.includes(type)) return null;
+				mapping = { type, text_property };
+			}
+			ids.push(add_text([block], mapping));
+		}
+		return ids.length ? ids : null;
+	};
+	let main_nodes = map_blocks(blocks, property);
+	const wrapper = config.wrapper;
+	if (!main_nodes && wrapper && property.node_types.includes(wrapper.type)) {
+		const children = schema[wrapper.type]?.properties[wrapper.children_property];
+		const ids = children && map_blocks(blocks, children);
+		if (ids) main_nodes = [add_container(wrapper, ids)];
+	}
+	return main_nodes ? { nodes, main_nodes } : null;
+}

package/src/lib/html_utils.ts

@@ -0,0 +1,17 @@
+/** Escape text or a quoted HTML attribute value. */
+export function escape_html(value: string): string {
+	return value
+		.replace(/&/g, '&')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;')
+		.replace(/'/g, '&#39;');
+}
+
+export function safe_html_href(value: string): string | undefined {
+	const href = value.trim();
+	if (!href || [...href].some((char) => char.charCodeAt(0) <= 32 || char.charCodeAt(0) === 127))
+		return;
+	const scheme = href.match(/^([a-z][a-z\d+.-]*):/i)?.[1].toLowerCase();
+	return !scheme || ['http', 'https', 'mailto', 'tel'].includes(scheme) ? href : undefined;
+}

package/src/lib/index.ts

@@ -85,3 +85,17 @@ export { KeyMapper, define_keymap } from './KeyMapper.svelte.js';
 // Transforms and utilities
 export * from './transforms.svelte.js';
 export * from './utils.js';
+
+export type {
+	HtmlPasteConfig,
+	HtmlBlockTag,
+	HtmlBlockMapping,
+	HtmlMarkMapping,
+	HtmlListTag,
+	HtmlListMapping,
+	HtmlContainerMapping
+} from './html_paste.js';
+
+export { export_text_html } from './html_export.js';
+export type { MarkHtmlExporter } from './html_export.js';
+export { escape_html, safe_html_href } from './html_utils.js';

package/src/lib/transforms.svelte.ts

@@ -55,6 +55,20 @@ export function break_text_node(tr: Transaction): boolean {
 	const content = tr.get(selection.path);
 	const [left_text, right_text] = split_text(content, split_at_position);
 
+	// Each attachment occurrence belongs to one range after the paragraph split.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Transaction-local ownership lookup.
+	const used_attachment_ids = new Set(
+		[...left_text.marks, ...left_text.annotations].map((range) => range.node_id)
+	);
+	for (const range of [...right_text.marks, ...right_text.annotations]) {
+		const original_id = range.node_id;
+		if (used_attachment_ids.has(original_id)) {
+			range.node_id = tr.build(original_id, tr.doc.nodes);
+		} else {
+			used_attachment_ids.add(original_id);
+		}
+	}
+
 	tr.set([node.id, 'content'], left_text);
 
 	const node_insert_position: Selection = {

package/src/lib/types.ts

@@ -21,7 +21,12 @@ export type NodeId = string;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DynamicRecord = Record<string, any>;
-export type SessionConfig = DynamicRecord;
+export type SessionConfig = DynamicRecord & {
+	html_paste?: import('./html_paste.js').HtmlPasteConfig;
+	mark_html_exporters?: Record<string, import('./html_export.js').MarkHtmlExporter>;
+	view_classes?: boolean;
+	visibility_culling?: boolean;
+};
 export type CommandRegistry = DynamicRecord;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DocumentOperation = [string, ...any[]];