svedit 0.12.0 → 0.14.0

package/src/lib/TextProperty.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { getContext } from 'svelte';
 	import {
 		char_slice,
@@ -9,12 +9,24 @@
 		calculate_fragment_ranges
 	} from './utils.js';
 
-	/** @import { TextPropertyProps, Mark, Fragment, SelectionRange } from './types.d.ts'; */
-
-	const svedit = getContext('svedit');
-
-	/** @type {TextPropertyProps} */
-	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));
 
@@ -30,9 +42,12 @@
 	// 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 it does not touch marks.
 	// Only render selection highlight when canvas is NOT focused.
@@ -60,12 +75,12 @@
 	/**
 	 * Converts text with marks into renderable fragments for display.
 	 * Annotations never fragment the text; they are data-only.
-	 * @param {string} text - The plain text content
-	 * @param {Array<Mark>} marks - Marks to render in-place
-	 * @param {SelectionRange} [selection_highlight_range] - Optional selection highlight range
-	 * @returns {Array<Fragment>} Array of fragments
 	 */
-	function get_fragments(text, marks, selection_highlight_range) {
+	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
@@ -79,8 +94,7 @@
 			marks,
 			selection_highlight_range
 		);
-		/** @type {Array<Fragment>} */
-		let fragments = [];
+		const fragments: Array<Fragment> = [];
 
 		for (const range of ranges) {
 			const content = char_slice(text, range.start_offset, range.end_offset);
@@ -93,7 +107,7 @@
 					type: 'mark',
 					node,
 					content,
-					mark_index: range.mark_index
+					mark_index: range.mark_index!
 				});
 			} else if (range.type === 'selection_highlight') {
 				fragments.push({
@@ -172,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
@@ -193,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>