svedit 0.9.0 → 0.11.0

package/dist/paste_utils.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @import { DocumentSchema } from './types.d.ts'
+ */
+export function normalize_line_endings(text: any): any;
+export function dedent_plain_text(plain_text: any): any;
+export function split_plain_text_paragraphs(plain_text: any): any;
+export function normalize_plain_text_for_single_line_property(plain_text: any): any;
+/**
+ * @param {string | null | undefined} node_type
+ * @param {DocumentSchema} schema
+ * @returns {string | null}
+ */
+export function get_text_property_name(node_type: string | null | undefined, schema: DocumentSchema): string | null;
+/**
+ * @param {any} node
+ * @param {DocumentSchema} schema
+ * @returns {{ text: string, annotations: any[] } | null}
+ */
+export function get_text_content(node: any, schema: DocumentSchema): {
+    text: string;
+    annotations: any[];
+} | null;
+/**
+ * @param {any} node
+ * @param {DocumentSchema} schema
+ * @returns {boolean}
+ */
+export function is_text_like_node_payload(node: any, schema: DocumentSchema): boolean;
+/**
+ * @param {any} node_array_property_definition
+ * @param {DocumentSchema} schema
+ * @returns {string | null}
+ */
+export function get_default_text_node(node_array_property_definition: any, schema: DocumentSchema): string | null;
+/**
+ * @param {string[]} paragraph_fragments
+ * @param {string | null | undefined} node_type
+ * @param {DocumentSchema} schema
+ * @returns {{ main_nodes: string[], nodes: Record<string, any> } | null}
+ */
+export function create_plain_text_nodes_payload(paragraph_fragments: string[], node_type: string | null | undefined, schema: DocumentSchema): {
+    main_nodes: string[];
+    nodes: Record<string, any>;
+} | null;
+import type { DocumentSchema } from './types.d.ts';
+//# sourceMappingURL=paste_utils.d.ts.map

package/dist/paste_utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paste_utils.d.ts","sourceRoot":"","sources":["../src/lib/paste_utils.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH,uDAEC;AAED,wDAkCC;AAED,kEAKC;AAED,oFAEC;AAED;;;;GAIG;AACH,kDAJW,MAAM,GAAG,IAAI,GAAG,SAAS,UACzB,cAAc,GACZ,MAAM,GAAG,IAAI,CAYzB;AAED;;;;GAIG;AACH,uCAJW,GAAG,UACH,cAAc,GACZ;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,GAAG,EAAE,CAAA;CAAE,GAAG,IAAI,CAoBvD;AAED;;;;GAIG;AACH,gDAJW,GAAG,UACH,cAAc,GACZ,OAAO,CAMnB;AAED;;;;GAIG;AACH,sEAJW,GAAG,UACH,cAAc,GACZ,MAAM,GAAG,IAAI,CAmBzB;AAED;;;;;GAKG;AACH,qEALW,MAAM,EAAE,aACR,MAAM,GAAG,IAAI,GAAG,SAAS,UACzB,cAAc,GACZ;IAAE,UAAU,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,GAAG,IAAI,CA8BvE;oCArKkC,cAAc"}

package/dist/paste_utils.js

@@ -0,0 +1,167 @@
+/**
+ * @import { DocumentSchema } from './types.d.ts'
+ */
+
+export function normalize_line_endings(text) {
+	return text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+}
+
+export function dedent_plain_text(plain_text) {
+	const lines = normalize_line_endings(plain_text).split('\n');
+	if (lines.length < 2) return plain_text;
+
+	const non_empty_lines = lines.filter((line) => line.trim().length > 0);
+	if (non_empty_lines.length === 0) return plain_text;
+
+	const indented_non_empty_lines = non_empty_lines.filter((line) => /^[\t ]+/.test(line));
+	const indented_line_ratio = indented_non_empty_lines.length / non_empty_lines.length;
+	if (indented_line_ratio < 0.8) return plain_text;
+
+	const leading_whitespace_lengths = indented_non_empty_lines
+		.map((line) => line.match(/^[\t ]+/)?.[0].length || 0)
+		.filter(Boolean);
+	if (leading_whitespace_lengths.length === 0) return plain_text;
+
+	const dedent_size = Math.min(...leading_whitespace_lengths);
+	if (dedent_size <= 0) return plain_text;
+
+	return lines
+		.map((line) => {
+			if (line.trim().length === 0) return line;
+			let removable_count = 0;
+			while (removable_count < dedent_size && removable_count < line.length) {
+				const char = line[removable_count];
+				if (char === ' ' || char === '\t') {
+					removable_count += 1;
+				} else {
+					break;
+				}
+			}
+			return line.slice(removable_count);
+		})
+		.join('\n');
+}
+
+export function split_plain_text_paragraphs(plain_text) {
+	return normalize_line_endings(plain_text)
+		.split(/\n{2,}/)
+		.map((fragment) => fragment.trim())
+		.filter(Boolean);
+}
+
+export function normalize_plain_text_for_single_line_property(plain_text) {
+	return normalize_line_endings(plain_text).replace(/\s*\n+\s*/g, ' ');
+}
+
+/**
+ * @param {string | null | undefined} node_type
+ * @param {DocumentSchema} schema
+ * @returns {string | null}
+ */
+export function get_text_property_name(node_type, schema) {
+	if (!node_type) return null;
+	const node_schema = schema[node_type];
+	if (!node_schema || node_schema.kind !== 'text') return null;
+	if (node_schema.properties?.content?.type === 'annotated_text') return 'content';
+	return (
+		Object.entries(node_schema.properties).find(([, property_definition]) => {
+			return property_definition.type === 'annotated_text';
+		})?.[0] || null
+	);
+}
+
+/**
+ * @param {any} node
+ * @param {DocumentSchema} schema
+ * @returns {{ text: string, annotations: any[] } | null}
+ */
+export function get_text_content(node, schema) {
+	if (!node || typeof node !== 'object') return null;
+
+	const text_property_name = get_text_property_name(node.type, schema);
+	if (
+		text_property_name &&
+		node[text_property_name] &&
+		typeof node[text_property_name].text === 'string' &&
+		Array.isArray(node[text_property_name].annotations)
+	) {
+		return node[text_property_name];
+	}
+
+	if (node.content && typeof node.content.text === 'string' && Array.isArray(node.content.annotations)) {
+		return node.content;
+	}
+
+	return null;
+}
+
+/**
+ * @param {any} node
+ * @param {DocumentSchema} schema
+ * @returns {boolean}
+ */
+export function is_text_like_node_payload(node, schema) {
+	if (!node || typeof node !== 'object') return false;
+	if (schema[node.type]?.kind === 'text') return true;
+	return !!get_text_content(node, schema);
+}
+
+/**
+ * @param {any} node_array_property_definition
+ * @param {DocumentSchema} schema
+ * @returns {string | null}
+ */
+export function get_default_text_node(node_array_property_definition, schema) {
+	if (
+		node_array_property_definition?.type !== 'node_array' ||
+		!Array.isArray(node_array_property_definition.node_types)
+	) {
+		return null;
+	}
+
+	const default_node_type = node_array_property_definition.default_node_type;
+	if (default_node_type && schema[default_node_type]?.kind === 'text') {
+		return default_node_type;
+	}
+
+	return (
+		node_array_property_definition.node_types.find((node_type) => schema[node_type]?.kind === 'text') ||
+		null
+	);
+}
+
+/**
+ * @param {string[]} paragraph_fragments
+ * @param {string | null | undefined} node_type
+ * @param {DocumentSchema} schema
+ * @returns {{ main_nodes: string[], nodes: Record<string, any> } | null}
+ */
+export function create_plain_text_nodes_payload(paragraph_fragments, node_type, schema) {
+	if (!Array.isArray(paragraph_fragments) || paragraph_fragments.length === 0 || !node_type) {
+		return null;
+	}
+
+	const text_property_name = get_text_property_name(node_type, schema);
+	if (!text_property_name) return null;
+
+	const payload = {
+		main_nodes: [],
+		nodes: {}
+	};
+
+	for (let i = 0; i < paragraph_fragments.length; i++) {
+		const fragment = paragraph_fragments[i];
+		const node_id = 'fragment_' + i;
+		payload.nodes[node_id] = {
+			id: node_id,
+			type: node_type,
+			[text_property_name]: {
+				text: fragment,
+				annotations: []
+			}
+		};
+		payload.main_nodes.push(node_id);
+	}
+
+	return payload;
+}

package/dist/styles/svedit-animations.css

@@ -0,0 +1,8 @@
+@layer svedit-defaults {
+	@keyframes node-caret-blink {
+		0%, 60% { opacity: 1; }
+		68% { opacity: 0; }
+		88% { opacity: 0; }
+		100% { opacity: 1; }
+	}
+}

package/dist/styles/svedit-colors.css

@@ -4,5 +4,6 @@
 		--svedit-editing-stroke: var(--svedit-brand);
 		--svedit-editing-fill: oklch(from var(--svedit-brand) l c h / 0.1);
 		--svedit-canvas-stroke: color-mix(in oklch, currentColor 25%, transparent);
+		--svedit-caret-color: var(--svedit-brand);
 	}
 }

package/dist/types.d.ts

@@ -11,12 +11,17 @@ import type { Component, Snippet } from 'svelte';
 // ===== SELECTION TYPE DEFINITIONS =====
 
 /**
- * A unique node identifier (ideally UUID)
+ * A unique node identifier.
+ *
+ * Node ids must be valid Svedit path string segments: they must start with
+ * a letter or underscore, contain only letters, numbers, underscores, or
+ * dashes, and must not contain `__`.
  */
 export type NodeId = string;
 
 /**
- * Array of IDs, property names (strings), or indexes (integers) that identify a node or property in the document
+ * Array of IDs, property names (strings), or indexes (integers) that identify a node or property in the document.
+ * String segments must follow the same path segment rules as NodeId.
  */
 export type DocumentPath = Array<string | number>;
 
@@ -269,7 +274,8 @@ export type PropertyDefinition =
 export type NodeKind = 'document' | 'block' | 'text' | 'annotation';
 
 /**
- * Schema for text nodes - must have a content property of type annotated_text
+ * Schema for text nodes - must have a content property of type annotated_text.
+ * Use define_document_schema to also check that content is the only annotated_text property.
  */
 export type TextNodeSchema = {
 	kind: 'text';
@@ -278,6 +284,43 @@ export type TextNodeSchema = {
 	} & Record<string, PropertyDefinition>;
 };
 
+export type AnnotatedTextPropertyNames<Properties> = {
+	[PropertyName in keyof Properties]: Properties[PropertyName] extends { type: 'annotated_text' }
+		? PropertyName
+		: never;
+}[keyof Properties];
+
+export type TextNodeSchemaError<Message extends string> = {
+	[SchemaError in `Svedit schema error: ${Message}`]: never;
+};
+
+export type TextNodeMissingContentError = TextNodeSchemaError<
+	'Text node schemas must define a "content" property of type annotated_text.'
+>;
+
+export type TextNodeExtraAnnotatedTextError<ExtraProperty extends string> = TextNodeSchemaError<
+	`Text node schemas must not define annotated_text property "${ExtraProperty}". Use "content" as the only annotated_text property.`
+>;
+
+export type ValidateTextNodeSchema<Schema> = Schema extends {
+	kind: 'text';
+	properties: infer Properties;
+}
+	? string extends keyof Properties
+		? Schema
+		: Properties extends { content: AnnotatedTextProperty }
+			? Exclude<AnnotatedTextPropertyNames<Properties>, 'content'> extends infer ExtraProperties
+				? [ExtraProperties] extends [never]
+					? Schema
+					: TextNodeExtraAnnotatedTextError<Extract<ExtraProperties, string>>
+				: never
+			: TextNodeMissingContentError
+	: Schema;
+
+export type ValidateDocumentSchema<Schema extends Record<string, NodeSchema>> = {
+	[NodeType in keyof Schema]: ValidateTextNodeSchema<Schema[NodeType]>;
+};
+
 /**
  * Schema for non-text nodes
  */

package/dist/utils.d.ts

@@ -129,6 +129,57 @@ export function join_annotated_text(first_text: AnnotatedText, second_text: Anno
  * snake_to_pascal('list_item') // Returns: 'ListItem'
  */
 export function snake_to_pascal(str: string): string;
+/**
+ * Check whether a string can be used as a Svedit path segment.
+ *
+ * Path string segments include node ids and schema property names. Keeping
+ * them restricted makes serialized paths reversible, valid as HTML ids, and
+ * safe to use as CSS anchor-name suffixes.
+ *
+ * @param {string} segment
+ * @returns {boolean}
+ */
+export function is_path_string_segment_valid(segment: string): boolean;
+/**
+ * Assert that a string can be used as a Svedit path segment.
+ *
+ * @param {string} segment
+ * @param {string} [label]
+ * @returns {void}
+ */
+export function assert_path_string_segment(segment: string, label?: string): void;
+/**
+ * Serialize a document path while preserving whether each segment is a
+ * property/key string or an array index number.
+ *
+ * The result is reversible and safe to use as a data attribute value, HTML id,
+ * or CSS anchor-name suffix.
+ *
+ * @param {Array<string | number>} path
+ * @returns {string}
+ *
+ * @example
+ * serialize_path(['page_1', 'body', 0, 'items']) // Returns: 'page_1__body__0__items'
+ */
+export function serialize_path(path: Array<string | number>): string;
+/**
+ * Deserialize a path string produced by serialize_path.
+ *
+ * @param {string} serialized_path
+ * @returns {Array<string | number>}
+ *
+ * @example
+ * deserialize_path('page_1__body__0__items') // Returns: ['page_1', 'body', 0, 'items']
+ */
+export function deserialize_path(serialized_path: string): Array<string | number>;
+/**
+ * Compare two document paths segment-by-segment, preserving segment types.
+ *
+ * @param {Array<string | number>} a
+ * @param {Array<string | number>} b
+ * @returns {boolean}
+ */
+export function paths_equal(a: Array<string | number>, b: Array<string | number>): boolean;
 export function traverse(node_id: any, schema: any, nodes: any): any[];
 /**
  * Extracts the normalized range from a text or node selection.
@@ -138,6 +189,7 @@ export function traverse(node_id: any, schema: any, nodes: any): any[];
  */
 export function get_selection_range(selection?: Selection): SelectionRange | null;
 export function is_selection_collapsed(selection: any): boolean;
+export const PATH_SEPARATOR: "__";
 import type { AnnotatedText } from './types.d.ts';
 import type { Selection } from './types.d.ts';
 import type { SelectionRange } from './types.d.ts';

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.js"],"names":[],"mappings":"AAMA;;;GAGG;AACH,qCAFa,OAAO,CAanB;AAGD;;;GAGG;AACH,6CAFa,OAAO,CAUnB;AAED;;;;;;;;;;;;;GAaG;AACH,qCARW,MAAM,GACJ,MAAM,CASlB;AAID;;;;;;;;;;;;;;GAcG;AACH,iCATW,MAAM,SACN,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;GAcG;AACH,gCATW,MAAM,SACN,MAAM,QACN,MAAM,GACJ,MAAM,CAYlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,gBACN,MAAM,GACJ,MAAM,CAmBlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,eACN,MAAM,GACJ,MAAM,CAelB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,4DAZW,aAAa,eACb,MAAM,GACJ,CAAC,aAAa,EAAE,aAAa,CAAC,CA6C1C;AAED;;;;;;;;;;;;;GAaG;AACH,gDARW,aAAa,eACb,aAAa,GACX,aAAa,CA4CzB;AAED;;;;;;;;GAQG;AACH,qCANW,MAAM,GACJ,MAAM,CAUlB;AAED,uEAgCC;AAED;;;;;GAKG;AACH,gDAHW,SAAS,GACP,cAAc,GAAG,IAAI,CAWjC;AAED,gEAMC;mCAhVwE,cAAc;+BAAd,cAAc;oCAAd,cAAc"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.js"],"names":[],"mappings":"AAMA;;;GAGG;AACH,qCAFa,OAAO,CAanB;AAGD;;;GAGG;AACH,6CAFa,OAAO,CAUnB;AAED;;;;;;;;;;;;;GAaG;AACH,qCARW,MAAM,GACJ,MAAM,CASlB;AAGD;;;;;;;;;;;;;;GAcG;AACH,iCATW,MAAM,SACN,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;GAcG;AACH,gCATW,MAAM,SACN,MAAM,QACN,MAAM,GACJ,MAAM,CAYlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,gBACN,MAAM,GACJ,MAAM,CAmBlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,eACN,MAAM,GACJ,MAAM,CAelB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,4DAZW,aAAa,eACb,MAAM,GACJ,CAAC,aAAa,EAAE,aAAa,CAAC,CA6C1C;AAED;;;;;;;;;;;;;GAaG;AACH,gDARW,aAAa,eACb,aAAa,GACX,aAAa,CA4CzB;AAED;;;;;;;;GAQG;AACH,qCANW,MAAM,GACJ,MAAM,CAUlB;AAMD;;;;;;;;;GASG;AACH,sDAHW,MAAM,GACJ,OAAO,CAQnB;AAED;;;;;;GAMG;AACH,oDAJW,MAAM,UACN,MAAM,GACJ,IAAI,CAQhB;AAED;;;;;;;;;;;;GAYG;AACH,qCANW,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GACpB,MAAM,CAmBlB;AAED;;;;;;;;GAQG;AACH,kDANW,MAAM,GACJ,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAuBlC;AAED;;;;;;GAMG;AACH,+BAJW,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KACtB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,GACpB,OAAO,CAKnB;AAED,uEAgCC;AAED;;;;;GAKG;AACH,gDAHW,SAAS,GACP,cAAc,GAAG,IAAI,CAWjC;AAED,gEAMC;AApKD,6BAA8B,IAAI,CAAC;mCAtRsC,cAAc;+BAAd,cAAc;oCAAd,cAAc"}

package/dist/utils.js

@@ -21,7 +21,7 @@ export function is_mobile_browser() {
 	);
 }
 
-// ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️ 
+// ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️
 /**
  * Detect if the current browser is Chrome on desktop
  * @returns {boolean} true if Chrome desktop browser, false otherwise
@@ -54,8 +54,7 @@ export function get_char_length(str) {
 	return [...SEGMENTER.segment(str)].length;
 }
 
-
-// ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️ 
+// ‼️‼️‼️‼️‼️‼️ UNUSED UTILITY BELOW ‼️‼️‼️‼️‼️‼️
 /**
  * Get a single character at the specified position (accounting for multi-byte characters)
  *
@@ -278,6 +277,113 @@ export function snake_to_pascal(str) {
 		.join('');
 }
 
+export const PATH_SEPARATOR = '__';
+const PATH_STRING_SEGMENT_RE = /^[A-Za-z_][A-Za-z0-9_-]*$/;
+const PATH_INDEX_SEGMENT_RE = /^(0|[1-9]\d*)$/;
+
+/**
+ * Check whether a string can be used as a Svedit path segment.
+ *
+ * Path string segments include node ids and schema property names. Keeping
+ * them restricted makes serialized paths reversible, valid as HTML ids, and
+ * safe to use as CSS anchor-name suffixes.
+ *
+ * @param {string} segment
+ * @returns {boolean}
+ */
+export function is_path_string_segment_valid(segment) {
+	return (
+		typeof segment === 'string' &&
+		PATH_STRING_SEGMENT_RE.test(segment) &&
+		!segment.includes(PATH_SEPARATOR)
+	);
+}
+
+/**
+ * Assert that a string can be used as a Svedit path segment.
+ *
+ * @param {string} segment
+ * @param {string} [label]
+ * @returns {void}
+ */
+export function assert_path_string_segment(segment, label = 'Path segment') {
+	if (!is_path_string_segment_valid(segment)) {
+		throw new Error(
+			`${label} must start with a letter or underscore and contain only letters, numbers, underscores, or dashes. It must not contain "${PATH_SEPARATOR}".`
+		);
+	}
+}
+
+/**
+ * Serialize a document path while preserving whether each segment is a
+ * property/key string or an array index number.
+ *
+ * The result is reversible and safe to use as a data attribute value, HTML id,
+ * or CSS anchor-name suffix.
+ *
+ * @param {Array<string | number>} path
+ * @returns {string}
+ *
+ * @example
+ * serialize_path(['page_1', 'body', 0, 'items']) // Returns: 'page_1__body__0__items'
+ */
+export function serialize_path(path) {
+	return path
+		.map((segment) => {
+			if (typeof segment === 'number') {
+				if (!Number.isInteger(segment) || segment < 0) {
+					throw new Error(`Path index must be a non-negative integer: ${segment}`);
+				}
+				return String(segment);
+			}
+
+			assert_path_string_segment(segment);
+			return segment;
+		})
+		.join(PATH_SEPARATOR);
+}
+
+/**
+ * Deserialize a path string produced by serialize_path.
+ *
+ * @param {string} serialized_path
+ * @returns {Array<string | number>}
+ *
+ * @example
+ * deserialize_path('page_1__body__0__items') // Returns: ['page_1', 'body', 0, 'items']
+ */
+export function deserialize_path(serialized_path) {
+	if (serialized_path === '') return [];
+
+	return serialized_path.split(PATH_SEPARATOR).map((segment) => {
+		if (segment === '') {
+			throw new Error(`Invalid serialized path: ${serialized_path}`);
+		}
+
+		if (/^\d+$/.test(segment)) {
+			if (!PATH_INDEX_SEGMENT_RE.test(segment)) {
+				throw new Error(`Invalid serialized path index: ${segment}`);
+			}
+			return Number(segment);
+		}
+
+		assert_path_string_segment(segment, 'Serialized path segment');
+		return segment;
+	});
+}
+
+/**
+ * Compare two document paths segment-by-segment, preserving segment types.
+ *
+ * @param {Array<string | number>} a
+ * @param {Array<string | number>} b
+ * @returns {boolean}
+ */
+export function paths_equal(a, b) {
+	if (a.length !== b.length) return false;
+	return a.every((segment, index) => segment === b[index]);
+}
+
 export function traverse(node_id, schema, nodes) {
 	const json = [];
 	const visited = {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.9.0",
+	"version": "0.11.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -45,6 +45,7 @@
 		"@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",
@@ -59,8 +60,8 @@
 		"publint": "^0.3.18",
 		"svelte": "^5.53.12",
 		"svelte-check": "^4.4.5",
-		"vite": "^8.0.0",
 		"typescript": "^5.9.3",
+		"vite": "^8.0.0",
 		"vitest": "^4.1.0",
 		"vitest-browser-svelte": "^2.1.0"
 	}

package/src/lib/AnnotatedTextProperty.svelte

@@ -1,6 +1,12 @@
 <script>
 	import { getContext } from 'svelte';
-	import { char_slice, get_char_length, snake_to_pascal, get_selection_range } from './utils.js';
+	import {
+		char_slice,
+		get_char_length,
+		paths_equal,
+		serialize_path,
+		get_selection_range
+	} from './utils.js';
 
 	/** @import { AnnotatedTextPropertyProps, Annotation, Fragment, SelectionRange } from './types.d.ts'; */
 
@@ -9,10 +15,11 @@
 	/** @type {AnnotatedTextPropertyProps} */
 	let { path, class: css_class, placeholder = '', tag = 'div', style = '', ...rest } = $props();
 
+	let path_str = $derived(serialize_path(path));
+
 	let is_focused = $derived.by(() => {
 		return (
-			svedit.session.selection?.type === 'text' &&
-			path.join('.') === svedit.session.selection?.path.join('.')
+			svedit.session.selection?.type === 'text' && paths_equal(path, svedit.session.selection.path)
 		);
 	});
 
@@ -111,12 +118,11 @@
 <svelte:element
 	this={tag}
 	data-type="text"
-	data-path={path.join('.')}
-	style="anchor-name: --{path.join('-')};{style}"
+	data-path={path_str}
+	style="anchor-name: --{path_str};{style}"
 	class="text svedit-selectable {css_class}"
 	class:empty={is_empty}
 	class:focused={is_focused}
-	class:editable={svedit.editable}
 	{placeholder}
 	{...rest}
 >
@@ -125,8 +131,7 @@
 				class="selection-highlight"
 				style="anchor-name: --selection-highlight;">{fragment.content}</span
 			>{:else if fragment.type === 'annotation'}
-			{@const AnnotationComponent =
-				svedit.session.config.node_components[snake_to_pascal(fragment.node.type)]}
+			{@const AnnotationComponent = svedit.session.config.node_components[fragment.node.type]}
 			<AnnotationComponent
 				path={[...path, 'annotations', fragment.annotation_index, 'node_id']}
 				content={fragment.content}
@@ -137,11 +142,13 @@
 </svelte:element>
 
 <style>
-	.text {
+	/* Editable text base layout; :where() allows easy override without specificity conflicts. */
+	:where(.text) {
 		white-space: pre-wrap;
 		overflow-wrap: anywhere;
 		box-sizing: content-box;
 	}
+
 	/* We switch from ::before to ::after when the element is focused. So the the caret is always before the placeholder. */
 	[placeholder].empty:not(.focused)::before,
 	[placeholder].empty.focused::after {
@@ -150,13 +157,36 @@
 		color: color-mix(in oklch, currentcolor 50%, transparent);
 	}
 
+	/* A virtual caret: to fix the caret vertical alignment issue in Chrome and Firefox for empty focused contenteditable with placeholders */
+	/* Browser BUG: iOS Safari only considers the caret color set on the top contenteditable element, not on nested elements (e.g. the second selector doesn't work in iOS Safari) */
+	:global(.svedit.editable .svedit-canvas:has([placeholder].empty.focused)),
+	:global(.svedit.editable) [placeholder].empty.focused {
+		caret-color: transparent !important;
+	}
+	:global(.svedit.editable) [placeholder].empty.focused::before {
+		content: '';
+		/* we limit width & height to avoid layout shifts in case the text has a lower natural height */
+		width: 0px;
+		height: 1cap;
+		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);
+		animation: var(
+			--node-caret-animation,
+			node-caret-blink var(--node-caret-blink-duration, 1.1s) ease-in-out infinite
+		);
+	}
+
 	/* Hide flickering: in Chrome, the caret jumps from end of placeholder string to start of text property when we focus */
 	.text:not(.focused) {
 		caret-color: transparent;
 	}
 
 	/* Disable text-transform when editable and focused so users see original text */
-	.text.editable.focused {
+	:global(.svedit.editable) .text.focused {
 		text-transform: none !important;
 	}