svedit 0.5.0 → 0.6.0

package/dist/{util.d.ts → utils.d.ts}

@@ -1,6 +1,16 @@
 /**
- * @import { Annotation, AnnotatedText } from './types.d.ts';
+ * @import { Annotation, AnnotatedText, SelectionRange, Selection } from './types.d.ts';
  */
+/**
+ * Detect if the current browser is on a mobile device
+ * @returns {boolean} true if mobile browser, false otherwise
+ */
+export function is_mobile_browser(): boolean;
+/**
+ * Detect if the current browser is Chrome on desktop
+ * @returns {boolean} true if Chrome desktop browser, false otherwise
+ */
+export function is_chrome_desktop_browser(): boolean;
 /**
  * Get the actual character length (accounting for multi-byte characters)
  *
@@ -123,5 +133,15 @@ export function join_annotated_text(first_text: AnnotatedText, second_text: Anno
  */
 export function snake_to_pascal(str: string): string;
 export function traverse(node_id: any, schema: any, nodes: any): any[];
+/**
+ * Extracts the normalized range from a text or node selection.
+ * Returns start and end offsets in document order (start <= end), regardless of selection direction.
+ * @param {Selection} [selection] - The selection to extract the range from
+ * @returns {SelectionRange | null} The normalized selection range, or null if selection is null, undefined, or a property selection
+ */
+export function get_selection_range(selection?: Selection): SelectionRange | null;
+export function is_selection_collapsed(selection: any): boolean;
 import type { AnnotatedText } from './types.d.ts';
-//# sourceMappingURL=util.d.ts.map
+import type { Selection } from './types.d.ts';
+import type { SelectionRange } from './types.d.ts';
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.js"],"names":[],"mappings":"AAAA;;GAEG;AAEH;;;GAGG;AACH,qCAFa,OAAO,CAanB;AAED;;;GAGG;AACH,6CAFa,OAAO,CAUnB;AAED;;;;;;;;;;;;;GAaG;AACH,qCARW,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;GAcG;AACH,iCATW,MAAM,SACN,MAAM,GACJ,MAAM,CAWlB;AAED;;;;;;;;;;;;;;GAcG;AACH,gCATW,MAAM,SACN,MAAM,QACN,MAAM,GACJ,MAAM,CAalB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,gBACN,MAAM,GACJ,MAAM,CAoBlB;AAED;;;;;;;;;;;;;GAaG;AACH,0CARW,MAAM,eACN,MAAM,GACJ,MAAM,CAgBlB;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"}

package/dist/utils.js

@@ -0,0 +1,338 @@
+/**
+ * @import { Annotation, AnnotatedText, SelectionRange, Selection } from './types.d.ts';
+ */
+
+/**
+ * Detect if the current browser is on a mobile device
+ * @returns {boolean} true if mobile browser, false otherwise
+ */
+export function is_mobile_browser() {
+	if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+		return false;
+	}
+
+	const user_agent = navigator.userAgent;
+	return (
+		/iPhone|iPad|iPod|Android|Mobile/i.test(user_agent) ||
+		'ontouchstart' in window ||
+		navigator.maxTouchPoints > 0
+	);
+}
+
+/**
+ * Detect if the current browser is Chrome on desktop
+ * @returns {boolean} true if Chrome desktop browser, false otherwise
+ */
+export function is_chrome_desktop_browser() {
+	if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+		return false;
+	}
+	const user_agent = navigator.userAgent;
+	const is_chrome = user_agent.includes('Chrome') && !user_agent.includes('Edg');
+	const is_mobile = is_mobile_browser();
+	return is_chrome && !is_mobile;
+}
+
+/**
+ * Get the actual character length (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to count grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences are counted as single characters.
+ *
+ * @param {string} str - The string to measure
+ * @returns {number} The number of visual characters (grapheme clusters)
+ *
+ * @example
+ * get_char_length('Hello') // Returns: 5
+ * get_char_length('a😀b') // Returns: 3 (not 4)
+ * get_char_length('👋🏽') // Returns: 1 (not 4 - skin tone modifier treated as single char)
+ */
+export function get_char_length(str) {
+	const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+	return [...segmenter.segment(str)].length;
+}
+
+/**
+ * Get a single character at the specified position (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to access grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences are treated as single characters.
+ *
+ * @param {string} str - The string to access
+ * @param {number} index - Character position (0-based)
+ * @returns {string} The character at the specified position, or empty string if index is out of bounds
+ *
+ * @example
+ * get_char_at('Hello', 1) // Returns: 'e'
+ * get_char_at('a😀b', 1) // Returns: '😀' (full emoji)
+ * get_char_at('👋🏽', 0) // Returns: '👋🏽' (skin tone modifier included)
+ */
+export function get_char_at(str, index) {
+	const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+	const segments = [...segmenter.segment(str)];
+	return segments[index].segment;
+}
+
+/**
+ * Slice string by character positions (accounting for multi-byte characters)
+ *
+ * Uses Intl.Segmenter to slice by grapheme clusters rather than UTF-16 code units,
+ * ensuring emojis and other complex Unicode sequences remain intact.
+ *
+ * @param {string} str - The string to slice
+ * @param {number} start - Starting character position (inclusive)
+ * @param {number} [end] - Ending character position (exclusive). If undefined, slices to end
+ * @returns {string} The sliced string with complete characters
+ *
+ * @example
+ * char_slice('Hello 😀 World', 6, 8) // Returns: '😀 ' (emoji stays intact)
+ * char_slice('a👋🏽b', 1, 2) // Returns: '👋🏽' (skin tone modifier included)
+ */
+export function char_slice(str, start, end = undefined) {
+	const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+	const segments = [...segmenter.segment(str)];
+	return segments
+		.slice(start, end)
+		.map((s) => s.segment)
+		.join('');
+}
+
+/**
+ * Convert UTF-16 code unit offset to grapheme cluster offset within a string
+ *
+ * Converts DOM selection offsets (which use UTF-16 code units) to character-based
+ * offsets (grapheme clusters) for consistent text manipulation.
+ *
+ * @param {string} str - The string to convert offsets within
+ * @param {number} utf16_offset - The UTF-16 code unit offset from DOM
+ * @returns {number} The corresponding grapheme cluster offset
+ *
+ * @example
+ * // For string "a😀b" where 😀 uses 2 UTF-16 code units
+ * utf16_to_char_offset("a😀b", 3) // Returns: 2 (position after emoji)
+ */
+export function utf16_to_char_offset(str, utf16_offset) {
+	const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+	const segments = [...segmenter.segment(str)];
+	let char_offset = 0;
+	let utf16_count = 0;
+
+	for (const segment of segments) {
+		if (utf16_count >= utf16_offset) break;
+		utf16_count += segment.segment.length;
+		if (utf16_count > utf16_offset) break;
+		char_offset++;
+	}
+
+	return char_offset;
+}
+
+/**
+ * Convert grapheme cluster offset to UTF-16 code unit offset within a string
+ *
+ * Converts character-based offsets (grapheme clusters) to DOM selection offsets
+ * (UTF-16 code units) for proper DOM selection positioning.
+ *
+ * @param {string} str - The string to convert offsets within
+ * @param {number} char_offset - The grapheme cluster offset
+ * @returns {number} The corresponding UTF-16 code unit offset for DOM operations
+ *
+ * @example
+ * // For string "a😀b" where 😀 uses 2 UTF-16 code units
+ * char_to_utf16_offset("a😀b", 2) // Returns: 3 (UTF-16 position after emoji)
+ */
+export function char_to_utf16_offset(str, char_offset) {
+	const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
+	const segments = [...segmenter.segment(str)];
+	let utf16_offset = 0;
+
+	for (let i = 0; i < Math.min(char_offset, segments.length); i++) {
+		utf16_offset += segments[i].segment.length;
+	}
+
+	return utf16_offset;
+}
+
+/**
+ * Splits an annotated text at the specified character position.
+ *
+ * Annotations that span the split point will be divided appropriately,
+ * with offsets adjusted for each resulting part.
+ *
+ * @param {AnnotatedText} text_with_annotations - Annotated text object
+ * @param {number} at_position - Character position where to split (0-based)
+ * @returns {[AnnotatedText, AnnotatedText]} Tuple of [left_part, right_part]
+ *
+ * @example
+ * split_annotated_text({text: "Hello world", annotations: [{start_offset: 6, end_offset: 11, node_id: "strong"}]}, 8)
+ * // Returns:
+ * // [
+ * //   {text: "Hello wo", annotations: [{start_offset: 6, end_offset: 8, node_id: "strong"}]},
+ * //   {text: "rld", annotations: [{start_offset: 0, end_offset: 3, node_id: "strong"}]}
+ * // ]
+ */
+export function split_annotated_text(text_with_annotations, at_position) {
+	const { text, annotations } = text_with_annotations;
+
+	// Split the text using character-aware slicing
+	const left_text = char_slice(text, 0, at_position);
+	const right_text = char_slice(text, at_position);
+
+	/** @type {Array<Annotation>} */
+	const left_annotations = [];
+	/** @type {Array<Annotation>} */
+	const right_annotations = [];
+
+	// Process each annotation
+	for (const { start_offset, end_offset, node_id } of annotations) {
+		if (end_offset <= at_position) {
+			// Annotation is entirely in the left part
+			left_annotations.push({ start_offset, end_offset, node_id });
+		} else if (start_offset >= at_position) {
+			// Annotation is entirely in the right part - shift offsets
+			right_annotations.push({
+				start_offset: start_offset - at_position,
+				end_offset: end_offset - at_position,
+				node_id
+			});
+		} else {
+			// Annotation spans the split point - split it
+			left_annotations.push({ start_offset, end_offset: at_position, node_id });
+			right_annotations.push({ start_offset: 0, end_offset: end_offset - at_position, node_id });
+		}
+	}
+
+	return [
+		{ text: left_text, annotations: left_annotations },
+		{ text: right_text, annotations: right_annotations }
+	];
+}
+
+/**
+ * Joins two annotated texts into a single annotated text.
+ *
+ * Annotations from the second text will have their offsets shifted by the length
+ * of the first text. Adjacent annotations of the same type and data will be merged.
+ *
+ * @param {AnnotatedText} first_text - First annotated text object
+ * @param {AnnotatedText} second_text - Second annotated text object
+ * @returns {AnnotatedText} Combined annotated text object
+ *
+ * @example
+ * join_annotated_text({text: "Hello wo", annotations: [{start_offset: 6, end_offset: 8, node_id: "strong"}]}, {text: "rld", annotations: [{start_offset: 0, end_offset: 3, node_id: "strong"}]})
+ * // Returns: {text: "Hello world", annotations: [{start_offset: 6, end_offset: 11, node_id: "strong"}]}
+ */
+export function join_annotated_text(first_text, second_text) {
+	const { text: first_text_content, annotations: first_annotations } = first_text;
+	const { text: second_text_content, annotations: second_annotations } = second_text;
+
+	// Join the text content
+	const joined_text = first_text_content + second_text_content;
+
+	// Start with all annotations from the first text (unchanged)
+	/** @type {Array<Annotation>} */
+	const joined_annotations = [...first_annotations];
+
+	// Add annotations from the second text, shifting their offsets
+	const offset = get_char_length(first_text_content);
+	for (const { start_offset, end_offset, node_id } of second_annotations) {
+		/** @type {Annotation} */
+		const shifted_annotation = {
+			start_offset: start_offset + offset,
+			end_offset: end_offset + offset,
+			node_id
+		};
+
+		// Check if this annotation can be merged with the last annotation from first text
+		const last_annotation = joined_annotations[joined_annotations.length - 1];
+		if (
+			last_annotation &&
+			last_annotation.end_offset === shifted_annotation.start_offset && // annotations are adjacent
+			last_annotation.node_id === shifted_annotation.node_id
+		) {
+			// same node_id
+			// Merge by extending the end position of the last annotation
+			last_annotation.end_offset = shifted_annotation.end_offset;
+		} else {
+			// Add as separate annotation
+			joined_annotations.push(shifted_annotation);
+		}
+	}
+
+	return { text: joined_text, annotations: joined_annotations };
+}
+
+/**
+ * Convert snake_case string to PascalCase
+ *
+ * @param {string} str - The snake_case string to convert
+ * @returns {string} The converted PascalCase string
+ *
+ * @example
+ * snake_to_pascal('list_item') // Returns: 'ListItem'
+ */
+export function snake_to_pascal(str) {
+	return str
+		.split('_')
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join('');
+}
+
+export function traverse(node_id, schema, nodes) {
+	const json = [];
+	const visited = {};
+	const visit = (node) => {
+		if (!node || visited[node.id]) {
+			return;
+		}
+		visited[node.id] = true;
+		for (const [property_name, value] of Object.entries(node)) {
+			const property_definition = schema[node.type].properties[property_name];
+
+			if (property_definition?.type === 'node_array') {
+				for (const v of value) {
+					if (typeof v === 'string') {
+						visit(nodes[v]);
+					}
+				}
+			} else if (property_definition?.type === 'node') {
+				visit(nodes[value]);
+			} else if (property_definition?.type === 'annotated_text') {
+				for (const annotation of value.annotations) {
+					visit(nodes[annotation.node_id]);
+				}
+			}
+		}
+		// Finally add the node to the result.
+		// Deep clone, to make sure nothing of the original document is referenced.
+		json.push(structuredClone(node));
+	};
+	// Start with the root node (document_id)
+	visit(nodes[node_id]);
+	return json;
+}
+
+/**
+ * Extracts the normalized range from a text or node selection.
+ * Returns start and end offsets in document order (start <= end), regardless of selection direction.
+ * @param {Selection} [selection] - The selection to extract the range from
+ * @returns {SelectionRange | null} The normalized selection range, or null if selection is null, undefined, or a property selection
+ */
+export function get_selection_range(selection) {
+	if (selection && selection.type !== 'property') {
+		return {
+			start_offset: Math.min(selection.anchor_offset, selection.focus_offset),
+			end_offset: Math.max(selection.anchor_offset, selection.focus_offset)
+		};
+	} else {
+		return null;
+	}
+}
+
+export function is_selection_collapsed(selection) {
+	if (selection && selection.type !== 'property') {
+		return selection.anchor_offset === selection.focus_offset;
+	} else {
+		return false;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",
@@ -39,27 +39,29 @@
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.4.0",
-		"@eslint/js": "^9.36.0",
-		"@sveltejs/adapter-auto": "^6.1.0",
-		"@sveltejs/kit": "^2.43.7",
+		"@eslint/compat": "^1.4.1",
+		"@eslint/js": "^9.39.1",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.48.4",
 		"@sveltejs/package": "^2.5.4",
 		"@sveltejs/vite-plugin-svelte": "^6.2.1",
-		"@typescript-eslint/eslint-plugin": "^8.45.0",
-		"@typescript-eslint/parser": "^8.45.0",
-		"@vitest/browser": "^3.2.4",
-		"eslint": "^9.36.0",
+		"@typescript-eslint/eslint-plugin": "^8.46.3",
+		"@typescript-eslint/parser": "^8.46.3",
+		"@vitest/browser": "^4.0.8",
+		"@vitest/browser-preview": "^4.0.8",
+		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.12.4",
-		"globals": "^16.4.0",
+		"eslint-plugin-svelte": "^3.13.0",
+		"globals": "^16.5.0",
+		"nanoid": "^5.1.6",
 		"prettier": "^3.6.2",
 		"prettier-plugin-svelte": "^3.4.0",
-		"publint": "^0.3.13",
-		"svelte": "^5.39.8",
-		"svelte-check": "^4.3.2",
-		"vite": "^7.1.7",
-		"vitest": "^3.2.4",
-		"vitest-browser-svelte": "^1.1.0",
-		"nanoid": "^5.1.6"
+		"publint": "^0.3.15",
+		"svelte": "^5.43.4",
+		"svelte-check": "^4.3.3",
+		"vite": "^7.2.2",
+		"typescript": "^5.9.3",
+		"vitest": "^4.0.8",
+		"vitest-browser-svelte": "^2.0.1"
 	}
 }

package/src/lib/AnnotatedTextProperty.svelte

@@ -1,58 +1,77 @@
 <script>
 	import { getContext } from 'svelte';
-	import { char_slice, get_char_length, snake_to_pascal } from './util.js';
+	import { char_slice, get_char_length, snake_to_pascal, get_selection_range } from './utils.js';
 
-  /** @import { AnnotatedTextPropertyProps, Annotation, AnnotationFragment } from './types.d.ts'; */
+	/** @import { AnnotatedTextPropertyProps, Annotation, Fragment, SelectionRange } from './types.d.ts'; */
 
 	const svedit = getContext('svedit');
 
- /** @type {AnnotatedTextPropertyProps} */
-	let {
-		path,
-		class: css_class,
-		placeholder = '',
-	} = $props();
+	/** @type {AnnotatedTextPropertyProps} */
+	let { path, class: css_class, placeholder = '', tag = 'div' } = $props();
 
 	let is_focused = $derived.by(() => {
-		return svedit.doc.selection?.type === 'text' && path.join('.') === svedit.doc.selection?.path.join('.');
+		return (
+			svedit.session.selection?.type === 'text' &&
+			path.join('.') === svedit.session.selection?.path.join('.')
+		);
+	});
+
+	// Get selection highlight range if not inside an annotation
+	let selection_highlight_range = $derived.by(() => {
+		if (!is_focused) return null;
+		if (svedit.session.active_annotation()) return null;
+		const sel = svedit.session.selection;
+		if (!sel || sel.type !== 'text') return null;
+		return get_selection_range(sel);
 	});
 
 	/**
 	 * Converts text with annotations into renderable fragments for display.
 	 * @param {string} text - The plain text content
-	 * @param {Array<Annotation>} annotations - Array of annotations where each is {start_offset, end_offset, node_id}
-	 * @returns {Array<string|AnnotationFragment>} Array of fragments - strings for plain text, AnnotationFragment objects for annotated content
+	 * @param {Array<Annotation>} annotations - Array of annotations
+	 * @param {SelectionRange} [selection_highlight_range] - Optional selection highlight range
+	 * @returns {Array<Fragment>} Array of fragments
 	 */
-	function get_fragments(text, annotations) {
+	function get_fragments(text, annotations, selection_highlight_range) {
+		/** @type {Array<Fragment>} */
 		let fragments = [];
 		let last_index = 0;
 
-		// Sort annotations by start_offset
-		const sorted_annotations = [...annotations].sort((a, b) => a.start_offset - b.start_offset);
+		// Merge annotations with selection highlight and sort by start offset
+		const ranges = [
+			...annotations,
+			...(selection_highlight_range ? [selection_highlight_range] : [])
+		].sort((a, b) => a.start_offset - b.start_offset);
 
-		for (let [, annotation] of sorted_annotations.entries()) {
-			// Add text before the annotation using character-aware slicing
-			if (annotation.start_offset > last_index) {
-				fragments.push(char_slice(text, last_index, annotation.start_offset));
+		for (const range of ranges) {
+			// Add text before this range
+			if (range.start_offset > last_index) {
+				fragments.push(char_slice(text, last_index, range.start_offset));
 			}
 
-			// Add the annotated string using character-aware slicing
-			const annotated_content = char_slice(text, annotation.start_offset, annotation.end_offset);
-			const node = svedit.doc.get(annotation.node_id);
-			if (!node) throw new Error(`Node not found for annotation ${annotation.node_id}`);
-
-			fragments.push({
-			  node,
-				content: annotated_content,
-				// NOTE: We need to provide the original index here, because the source data
-				// is the address space.
-				annotation_index: annotations.indexOf(annotation),
-			});
+			const content = char_slice(text, range.start_offset, range.end_offset);
+
+			if ('node_id' in range) {
+				const node = svedit.session.get(range.node_id);
+				if (!node) throw new Error(`Node not found for annotation ${range.node_id}`);
+
+				fragments.push({
+					type: 'annotation',
+					node,
+					content,
+					annotation_index: annotations.indexOf(/** @type {Annotation} */ (range))
+				});
+			} else {
+				fragments.push({
+					type: 'selection_highlight',
+					content
+				});
+			}
 
-			last_index = annotation.end_offset;
+			last_index = range.end_offset;
 		}
 
-		// Add any remaining text after the last annotation using character-aware slicing
+		// Add any remaining text
 		if (last_index < get_char_length(text)) {
 			fragments.push(char_slice(text, last_index));
 		}
@@ -60,58 +79,86 @@
 		return fragments;
 	}
 
-	let fragments = $derived(get_fragments(svedit.doc.get(path).text, svedit.doc.get(path).annotations));
-	let plain_text = $derived(svedit.doc.get(path).text);
-
+	let fragments = $derived(
+		get_fragments(
+			svedit.session.get(path).text,
+			svedit.session.get(path).annotations,
+			selection_highlight_range
+		)
+	);
+	let plain_text = $derived(svedit.session.get(path).text);
+	let is_empty = $derived(
+		get_char_length(plain_text) === 0 && !(svedit.is_composing && is_focused)
+	);
 </script>
 
-{#key plain_text}
-  <!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
-  <div
-   	data-type="text"
-   	data-path={path.join('.')}
-   	style="anchor-name: --{path.join('-')};"
-   	class="text svedit-selectable {css_class}"
-   	class:empty={get_char_length(plain_text) === 0 && !(svedit.is_composing && is_focused)}
-    class:focused={is_focused}
-    placeholder={placeholder}
-  >
-    {#each fragments as fragment, index (index)}
-  		{#if typeof fragment === 'string'}{fragment}{:else}
-        {@const AnnotationComponent = svedit.doc.config.node_components[snake_to_pascal(fragment.node.type)]}
-        <AnnotationComponent path={[...path, 'annotations', fragment.annotation_index, 'node_id']} content={fragment.content} />
-      {/if}
-  	{/each}<!--
-    --><br>
-  </div>
-{/key}
+<!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->
+<!-- We need to use <br> so the element is reachable by Arrow Up/Down navigation. -->
+<!-- But as soon as the element is focused, we get rid of the <br> as it causes issues with caret positioning. -->
+<!-- Before, we were just hiding it on focus, but that caused the cursor to disappear on Safari Desktop (tested with v26). -->
+<!-- Edge Case: Shift Enter stops working if <br> is not present on a non-empty text property. -->
+<svelte:element
+	this={tag}
+	data-type="text"
+	data-path={path.join('.')}
+	style="anchor-name: --{path.join('-')};"
+	class="text svedit-selectable {css_class}"
+	class:empty={is_empty}
+	class:focused={is_focused}
+	{placeholder}
+>
+	{#each fragments as fragment, index (index)}
+		{#if typeof fragment === 'string'}{fragment}{:else if fragment.type === 'selection_highlight'}<span
+				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)]}
+			<AnnotationComponent
+				path={[...path, 'annotations', fragment.annotation_index, 'node_id']}
+				content={fragment.content}
+			/>
+		{/if}
+	{/each}<!--
+  -->{#if !is_focused || !is_empty}<br />{/if}
+</svelte:element>
 
 <style>
-  .text {
-    white-space: pre-wrap;
+	.text {
+		white-space: pre-wrap;
 		overflow-wrap: anywhere;
 		box-sizing: content-box;
 
 		&.heading1 {
-      text-wrap: var(--text-wrap);
-    }
-  }
-
-  [placeholder].empty::before {
-    content: attr(placeholder);
-    pointer-events: none;
-    color: color-mix(in oklch, currentcolor 50%, transparent);
-  }
-
-  /* We can safely hide the <br> element when the placeholder is empty and focused. */
-  /* No longer the cursor will be rendered after the placeholder when focused. */
-  /* ATTENTION: This hack has the side effect that in Safari Desktop the cursor sometimes disappears. */
-  [placeholder].empty.focused br {
-    display:none;
-  }
-
-  /*.text.focused {
+			text-wrap: var(--text-wrap);
+		}
+	}
+	/* 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 {
+		content: attr(placeholder);
+		pointer-events: none;
+		color: color-mix(in oklch, currentcolor 50%, transparent);
+	}
+
+	/* 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;
+	}
+
+	/*.text.focused {
     background: none;
     outline: 1px solid var(--editing-stroke-color);
   }*/
+
+	/* Dim the selection highlight when canvas loses native focus */
+	:global(.svedit-canvas:not(:focus)) .selection-highlight {
+		background: oklch(from var(--editing-fill-color) l 0.02 h / 0.3);
+	}
+
+	/* Make a collapsed cursor visible */
+	:global(.svedit-canvas:not(:focus)) .selection-highlight:empty {
+		background: none;
+		outline: 0.5px solid oklch(from var(--editing-stroke-color) l 0.02 h / 0.3);
+	}
 </style>