svedit 0.11.1 → 0.13.0

package/src/lib/{AnnotatedTextProperty.svelte → TextProperty.svelte}

@@ -1,19 +1,32 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import {
 		char_slice,
 		get_char_length,
 		paths_equal,
 		serialize_path,
-		get_selection_range
+		get_selection_range,
+		calculate_fragment_ranges
 	} from './utils.js';
 
-	/** @import { AnnotatedTextPropertyProps, Annotation, Fragment, SelectionRange } from './types.d.ts'; */
-
-	const svedit = getContext('svedit');
-
-	/** @type {AnnotatedTextPropertyProps} */
-	let { path, class: css_class, placeholder = '', tag = 'div', style = '', ...rest } = $props();
+	import type {
+		TextPropertyProps,
+		Mark,
+		Fragment,
+		SelectionRange,
+		SveditContext
+	} from './types.js';
+
+	const svedit = getContext<SveditContext>('svedit');
+
+	let {
+		path,
+		class: css_class,
+		placeholder = '',
+		tag = 'div',
+		style = '',
+		...rest
+	}: TextPropertyProps = $props();
 
 	let path_str = $derived(serialize_path(path));
 
@@ -23,16 +36,20 @@
 		);
 	});
 
-	let plain_text = $derived(svedit.session.get(path).text);
-	let is_empty = $derived(
-		get_char_length(plain_text) === 0 && !(svedit.is_composing && is_focused)
-	);
+	let plain_text = $derived(svedit.session.get(path).content);
+	// A string has zero grapheme clusters iff it has zero code units, so a
+	// plain length check avoids a full Intl.Segmenter pass (this derived
+	// re-runs for every text property on every document change).
+	let is_empty = $derived(plain_text.length === 0 && !(svedit.is_composing && is_focused));
 
-	let is_collapsed = $derived(
-		is_focused && svedit.session.selection?.anchor_offset == svedit.session.selection?.focus_offset
-	);
+	let is_collapsed = $derived.by(() => {
+		const selection = svedit.session.selection;
+		return (
+			is_focused && selection?.type === 'text' && selection.anchor_offset === selection.focus_offset
+		);
+	});
 
-	// Get selection highlight range if not inside an annotation
+	// Get selection highlight range if it does not touch marks.
 	// Only render selection highlight when canvas is NOT focused.
 	// This avoids DOM mutations (splitting text nodes for highlight spans)
 	// while the user is actively selecting, which would cause selection
@@ -41,7 +58,7 @@
 		if (svedit.canvas_focused) return null;
 		if (is_collapsed) return null;
 		if (!is_focused) return null;
-		if (svedit.session.active_annotation()) return null;
+		if (svedit.session.selected_marks.length > 0) return null;
 		const sel = svedit.session.selection;
 		if (!sel || sel.type !== 'text') return null;
 		return get_selection_range(sel);
@@ -49,61 +66,57 @@
 
 	let fragments = $derived(
 		get_fragments(
-			svedit.session.get(path).text,
-			svedit.session.get(path).annotations,
+			svedit.session.get(path).content,
+			svedit.session.get(path).marks,
 			selection_highlight_range
 		)
 	);
 
 	/**
-	 * Converts text with annotations into renderable fragments for display.
-	 * @param {string} text - The plain text content
-	 * @param {Array<Annotation>} annotations - Array of annotations
-	 * @param {SelectionRange} [selection_highlight_range] - Optional selection highlight range
-	 * @returns {Array<Fragment>} Array of fragments
+	 * Converts text with marks into renderable fragments for display.
+	 * Annotations never fragment the text; they are data-only.
 	 */
-	function get_fragments(text, annotations, selection_highlight_range) {
-		/** @type {Array<Fragment>} */
-		let fragments = [];
-		let last_index = 0;
+	function get_fragments(
+		text: string,
+		marks: Array<Mark>,
+		selection_highlight_range?: SelectionRange | null
+	): Array<Fragment> {
+		// Fast path: no marks and no selection highlight means the whole text
+		// is a single content fragment. This runs for EVERY text property on
+		// EVERY document change, so skipping the two full Intl.Segmenter passes
+		// (get_char_length + char_slice over the whole text) matters at scale.
+		if (marks.length === 0 && !selection_highlight_range) {
+			return text.length > 0 ? [text] : [];
+		}
 
-		// 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);
+		const ranges = calculate_fragment_ranges(
+			get_char_length(text),
+			marks,
+			selection_highlight_range
+		);
+		const fragments: Array<Fragment> = [];
 
 		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));
-			}
-
 			const content = char_slice(text, range.start_offset, range.end_offset);
 
-			if ('node_id' in range) {
+			if (range.type === 'mark') {
 				const node = svedit.session.get(range.node_id);
-				if (!node) throw new Error(`Node not found for annotation ${range.node_id}`);
+				if (!node) throw new Error(`Node not found for mark ${range.node_id}`);
 
 				fragments.push({
-					type: 'annotation',
+					type: 'mark',
 					node,
 					content,
-					annotation_index: annotations.indexOf(/** @type {Annotation} */ (range))
+					mark_index: range.mark_index!
 				});
-			} else {
+			} else if (range.type === 'selection_highlight') {
 				fragments.push({
 					type: 'selection_highlight',
 					content
 				});
+			} else {
+				fragments.push(content);
 			}
-
-			last_index = range.end_offset;
-		}
-
-		// Add any remaining text
-		if (last_index < get_char_length(text)) {
-			fragments.push(char_slice(text, last_index));
 		}
 
 		return fragments;
@@ -130,12 +143,14 @@
 		{#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[fragment.node.type]}
-			<AnnotationComponent
-				path={[...path, 'annotations', fragment.annotation_index, 'node_id']}
-				content={fragment.content}
-			/>
+			>{:else if fragment.type === 'mark'}
+			{@const MarkComponent = svedit.session.config.node_components[fragment.node.type]}
+			{#if MarkComponent}
+				<MarkComponent
+					path={[...path, 'marks', fragment.mark_index, 'node_id']}
+					content={fragment.content}
+				/>
+			{:else}<span class="mark-{fragment.node.type}">{fragment.content}</span>{/if}
 		{/if}
 	{/each}<!--
   -->{#if !is_focused || !is_empty}<br />{/if}