svedit 0.6.0 → 0.6.2

package/dist/AnnotatedTextProperty.svelte

@@ -16,8 +16,18 @@
 		);
 	});
 
+	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 is_collapsed = $derived(
+		is_focused && svedit.session.selection?.anchor_offset == svedit.session.selection?.focus_offset
+	);
+
 	// Get selection highlight range if not inside an annotation
 	let selection_highlight_range = $derived.by(() => {
+		if (is_collapsed) return null;
 		if (!is_focused) return null;
 		if (svedit.session.active_annotation()) return null;
 		const sel = svedit.session.selection;
@@ -25,6 +35,14 @@
 		return get_selection_range(sel);
 	});
 
+	let fragments = $derived(
+		get_fragments(
+			svedit.session.get(path).text,
+			svedit.session.get(path).annotations,
+			selection_highlight_range
+		)
+	);
+
 	/**
 	 * Converts text with annotations into renderable fragments for display.
 	 * @param {string} text - The plain text content
@@ -78,18 +96,6 @@
 
 		return fragments;
 	}
-
-	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>
 
 <!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->

package/dist/AnnotatedTextProperty.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotatedTextProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnnotatedTextProperty.svelte.js"],"names":[],"mappings":";;;;;AAuHA,2HAAoE"}
+{"version":3,"file":"AnnotatedTextProperty.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AnnotatedTextProperty.svelte.js"],"names":[],"mappings":";;;;;AA6HA,2HAAoE"}

package/dist/Svedit.svelte

@@ -4,8 +4,7 @@
 		snake_to_pascal,
 		get_char_length,
 		utf16_to_char_offset,
-		char_to_utf16_offset,
-		get_char_at
+		char_to_utf16_offset
 	} from './utils.js';
 
 	/** @import {
@@ -68,7 +67,9 @@
 	const key_mapper = getContext('key_mapper');
 
 	// Initialize commands and keymap on the session
-	session.initialize_commands(context);
+	$effect(() => {
+		session.initialize_commands(context);
+	});
 
 	// Handle focus - push session's keymap onto stack
 	function handle_canvas_focus() {
@@ -949,36 +950,44 @@ ${fallback_html}`;
 		if (!path) return null;
 
 		// EDGE CASE 1B: Cursor after trailing <br> at end of text
+		//
+		// AnnotatedTextProperty renders a trailing <br> for non-empty or non-focused text.
+		// When the user places their cursor after this <br>, focusNode is the container
+		// element (not a text node), and normal processing would return position 0.
+		// We detect this and return text_length instead.
 		const text_content = session.get(path).text;
 		const text_length = get_char_length(text_content);
-		if (text_length > 0) {
-			const last_char = get_char_at(text_content, text_length - 1);
+		const child_nodes = focus_root.childNodes;
+
+		if (
+			focus_node === anchor_node &&
+			focus_node === focus_root &&
+			focus_root.dataset?.type === 'text' &&
+			!focus_root.classList.contains('empty')
+		) {
+			// Find the last non-comment child node (comments are inserted by Svelte)
+			let last_element_index = child_nodes.length - 1;
+			while (last_element_index >= 0 && child_nodes[last_element_index].nodeType === Node.COMMENT_NODE) {
+				last_element_index--;
+			}
+
+			// Check if cursor is at or after the trailing <br>
 			if (
-				focus_node === anchor_node &&
-				focus_node === focus_root &&
-				focus_root.dataset?.type === 'text' &&
-				!focus_root.classList.contains('empty') &&
-				last_char === '\n'
+				last_element_index >= 0 &&
+				child_nodes[last_element_index].nodeName === 'BR' &&
+				focus_offset_in_node >= last_element_index
 			) {
-				const child_nodes = focus_root.childNodes;
-
-				if (
-					child_nodes.length > 0 &&
-					child_nodes[child_nodes.length - 1].nodeName === 'BR' &&
-					focus_offset_in_node >= child_nodes.length - 2
-				) {
-					return {
-						type: 'text',
-						path,
-						anchor_offset: text_length,
-						focus_offset: text_length
-					};
-				}
+				return {
+					type: 'text',
+					path,
+					anchor_offset: text_length,
+					focus_offset: text_length
+				};
 			}
 		}
 
-		let anchor_offset = 0;
-		let focus_offset = 0;
+		let start_offset = 0;
+		let end_offset = 0;
 		let current_offset = 0;
 
 		function processNode(node) {
@@ -988,12 +997,12 @@ ${fallback_html}`;
 				if (node === range.startContainer) {
 					// Convert UTF-16 offset to character offset
 					const char_start_offset = utf16_to_char_offset(nodeText, range.startOffset);
-					anchor_offset = current_offset + char_start_offset;
+					start_offset = current_offset + char_start_offset;
 				}
 				if (node === range.endContainer) {
 					// Convert UTF-16 offset to character offset
 					const char_end_offset = utf16_to_char_offset(nodeText, range.endOffset);
-					focus_offset = current_offset + char_end_offset;
+					end_offset = current_offset + char_end_offset;
 				}
 				current_offset += nodeCharLength;
 			} else if (node.nodeType === Node.ELEMENT_NODE) {
@@ -1001,7 +1010,7 @@ ${fallback_html}`;
 					processNode(childNode);
 				}
 			}
-			return focus_offset !== 0;
+			return end_offset !== 0;
 		}
 
 		// Process nodes to find offsets
@@ -1012,21 +1021,17 @@ ${fallback_html}`;
 		// Check if it's a backward selection
 		// When range is provided, we can't detect backward selection from the range alone
 		// since ranges are always normalized (start before end)
-		const is_backward = dom_selection
-			? dom_selection.anchorNode === range.endContainer &&
-				dom_selection.anchorOffset === range.endOffset
-			: false;
-
-		// Swap offsets if it's a backward selection
-		if (is_backward) {
-			[anchor_offset, focus_offset] = [focus_offset, anchor_offset];
-		}
+		const is_backward = dom_selection ? __is_dom_selection_backwards() : false;
+
+		// Assign to anchor/focus based on direction
+		const anchor_offset = is_backward ? end_offset : start_offset;
+		const focus_offset = is_backward ? start_offset : end_offset;
 
 		return {
 			type: 'text',
 			path,
-			anchor_offset: anchor_offset,
-			focus_offset: focus_offset
+			anchor_offset,
+			focus_offset
 		};
 	}
 
@@ -1163,8 +1168,6 @@ ${fallback_html}`;
 			`[data-path="${selection.path.join('.')}"][data-type="text"]`
 		);
 		const empty_text = session.get(selection.path).text.length === 0;
-
-		const range = window.document.createRange();
 		const dom_selection = window.getSelection();
 		let current_offset = 0;
 		/** @type {HTMLElement | Text} */
@@ -1241,24 +1244,14 @@ ${fallback_html}`;
 
 		// Set the range if both start and end were found
 		if (anchor_node && focus_node) {
-			// Always set range in document order (start to end)
-			if (is_backward) {
-				range.setStart(focus_node, focus_node_offset);
-				range.setEnd(anchor_node, anchor_node_offset);
-			} else {
-				range.setStart(anchor_node, anchor_node_offset);
-				range.setEnd(focus_node, focus_node_offset);
-			}
-
 			dom_selection.removeAllRanges();
-			if (is_backward) {
-				// For backward selections, collapse to end and extend to start
-				range.collapse(false); // collapse to end
-				dom_selection.addRange(range);
-				dom_selection.extend(focus_node, focus_node_offset);
-			} else {
-				dom_selection.addRange(range);
-			}
+			// NOTE: Only using setBaseAndExtent() will preserve selection direction
+			dom_selection.setBaseAndExtent(
+				anchor_node,
+				anchor_node_offset,
+				focus_node,
+				focus_node_offset
+			);
 			el.focus(); // needed?
 
 			// Scroll the selection into view
@@ -1323,6 +1316,7 @@ ${fallback_html}`;
 		onfocus={handle_canvas_focus}
 		onblur={handle_canvas_blur}
 		contenteditable={editable ? 'true' : 'false'}
+		tabindex="-1"
 		{autocapitalize}
 		{spellcheck}
 		{...{

package/dist/Svedit.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Svedit.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Svedit.svelte.js"],"names":[],"mappings":";;;;;;;AAszCA;;eAAqD;iCA9xC1C,cAAc"}
+{"version":3,"file":"Svedit.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Svedit.svelte.js"],"names":[],"mappings":";;;;;;;AA+yCA;;eAAqD;iCAxxC1C,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.6.0",
+	"version": "0.6.2",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/AnnotatedTextProperty.svelte

@@ -16,8 +16,18 @@
 		);
 	});
 
+	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 is_collapsed = $derived(
+		is_focused && svedit.session.selection?.anchor_offset == svedit.session.selection?.focus_offset
+	);
+
 	// Get selection highlight range if not inside an annotation
 	let selection_highlight_range = $derived.by(() => {
+		if (is_collapsed) return null;
 		if (!is_focused) return null;
 		if (svedit.session.active_annotation()) return null;
 		const sel = svedit.session.selection;
@@ -25,6 +35,14 @@
 		return get_selection_range(sel);
 	});
 
+	let fragments = $derived(
+		get_fragments(
+			svedit.session.get(path).text,
+			svedit.session.get(path).annotations,
+			selection_highlight_range
+		)
+	);
+
 	/**
 	 * Converts text with annotations into renderable fragments for display.
 	 * @param {string} text - The plain text content
@@ -78,18 +96,6 @@
 
 		return fragments;
 	}
-
-	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>
 
 <!-- ATTENTION: The comments are needed to prevent unwanted text nodes with whitespace. -->

package/src/lib/Svedit.svelte

@@ -4,8 +4,7 @@
 		snake_to_pascal,
 		get_char_length,
 		utf16_to_char_offset,
-		char_to_utf16_offset,
-		get_char_at
+		char_to_utf16_offset
 	} from './utils.js';
 
 	/** @import {
@@ -68,7 +67,9 @@
 	const key_mapper = getContext('key_mapper');
 
 	// Initialize commands and keymap on the session
-	session.initialize_commands(context);
+	$effect(() => {
+		session.initialize_commands(context);
+	});
 
 	// Handle focus - push session's keymap onto stack
 	function handle_canvas_focus() {
@@ -949,36 +950,44 @@ ${fallback_html}`;
 		if (!path) return null;
 
 		// EDGE CASE 1B: Cursor after trailing <br> at end of text
+		//
+		// AnnotatedTextProperty renders a trailing <br> for non-empty or non-focused text.
+		// When the user places their cursor after this <br>, focusNode is the container
+		// element (not a text node), and normal processing would return position 0.
+		// We detect this and return text_length instead.
 		const text_content = session.get(path).text;
 		const text_length = get_char_length(text_content);
-		if (text_length > 0) {
-			const last_char = get_char_at(text_content, text_length - 1);
+		const child_nodes = focus_root.childNodes;
+
+		if (
+			focus_node === anchor_node &&
+			focus_node === focus_root &&
+			focus_root.dataset?.type === 'text' &&
+			!focus_root.classList.contains('empty')
+		) {
+			// Find the last non-comment child node (comments are inserted by Svelte)
+			let last_element_index = child_nodes.length - 1;
+			while (last_element_index >= 0 && child_nodes[last_element_index].nodeType === Node.COMMENT_NODE) {
+				last_element_index--;
+			}
+
+			// Check if cursor is at or after the trailing <br>
 			if (
-				focus_node === anchor_node &&
-				focus_node === focus_root &&
-				focus_root.dataset?.type === 'text' &&
-				!focus_root.classList.contains('empty') &&
-				last_char === '\n'
+				last_element_index >= 0 &&
+				child_nodes[last_element_index].nodeName === 'BR' &&
+				focus_offset_in_node >= last_element_index
 			) {
-				const child_nodes = focus_root.childNodes;
-
-				if (
-					child_nodes.length > 0 &&
-					child_nodes[child_nodes.length - 1].nodeName === 'BR' &&
-					focus_offset_in_node >= child_nodes.length - 2
-				) {
-					return {
-						type: 'text',
-						path,
-						anchor_offset: text_length,
-						focus_offset: text_length
-					};
-				}
+				return {
+					type: 'text',
+					path,
+					anchor_offset: text_length,
+					focus_offset: text_length
+				};
 			}
 		}
 
-		let anchor_offset = 0;
-		let focus_offset = 0;
+		let start_offset = 0;
+		let end_offset = 0;
 		let current_offset = 0;
 
 		function processNode(node) {
@@ -988,12 +997,12 @@ ${fallback_html}`;
 				if (node === range.startContainer) {
 					// Convert UTF-16 offset to character offset
 					const char_start_offset = utf16_to_char_offset(nodeText, range.startOffset);
-					anchor_offset = current_offset + char_start_offset;
+					start_offset = current_offset + char_start_offset;
 				}
 				if (node === range.endContainer) {
 					// Convert UTF-16 offset to character offset
 					const char_end_offset = utf16_to_char_offset(nodeText, range.endOffset);
-					focus_offset = current_offset + char_end_offset;
+					end_offset = current_offset + char_end_offset;
 				}
 				current_offset += nodeCharLength;
 			} else if (node.nodeType === Node.ELEMENT_NODE) {
@@ -1001,7 +1010,7 @@ ${fallback_html}`;
 					processNode(childNode);
 				}
 			}
-			return focus_offset !== 0;
+			return end_offset !== 0;
 		}
 
 		// Process nodes to find offsets
@@ -1012,21 +1021,17 @@ ${fallback_html}`;
 		// Check if it's a backward selection
 		// When range is provided, we can't detect backward selection from the range alone
 		// since ranges are always normalized (start before end)
-		const is_backward = dom_selection
-			? dom_selection.anchorNode === range.endContainer &&
-				dom_selection.anchorOffset === range.endOffset
-			: false;
-
-		// Swap offsets if it's a backward selection
-		if (is_backward) {
-			[anchor_offset, focus_offset] = [focus_offset, anchor_offset];
-		}
+		const is_backward = dom_selection ? __is_dom_selection_backwards() : false;
+
+		// Assign to anchor/focus based on direction
+		const anchor_offset = is_backward ? end_offset : start_offset;
+		const focus_offset = is_backward ? start_offset : end_offset;
 
 		return {
 			type: 'text',
 			path,
-			anchor_offset: anchor_offset,
-			focus_offset: focus_offset
+			anchor_offset,
+			focus_offset
 		};
 	}
 
@@ -1163,8 +1168,6 @@ ${fallback_html}`;
 			`[data-path="${selection.path.join('.')}"][data-type="text"]`
 		);
 		const empty_text = session.get(selection.path).text.length === 0;
-
-		const range = window.document.createRange();
 		const dom_selection = window.getSelection();
 		let current_offset = 0;
 		/** @type {HTMLElement | Text} */
@@ -1241,24 +1244,14 @@ ${fallback_html}`;
 
 		// Set the range if both start and end were found
 		if (anchor_node && focus_node) {
-			// Always set range in document order (start to end)
-			if (is_backward) {
-				range.setStart(focus_node, focus_node_offset);
-				range.setEnd(anchor_node, anchor_node_offset);
-			} else {
-				range.setStart(anchor_node, anchor_node_offset);
-				range.setEnd(focus_node, focus_node_offset);
-			}
-
 			dom_selection.removeAllRanges();
-			if (is_backward) {
-				// For backward selections, collapse to end and extend to start
-				range.collapse(false); // collapse to end
-				dom_selection.addRange(range);
-				dom_selection.extend(focus_node, focus_node_offset);
-			} else {
-				dom_selection.addRange(range);
-			}
+			// NOTE: Only using setBaseAndExtent() will preserve selection direction
+			dom_selection.setBaseAndExtent(
+				anchor_node,
+				anchor_node_offset,
+				focus_node,
+				focus_node_offset
+			);
 			el.focus(); // needed?
 
 			// Scroll the selection into view
@@ -1323,6 +1316,7 @@ ${fallback_html}`;
 		onfocus={handle_canvas_focus}
 		onblur={handle_canvas_blur}
 		contenteditable={editable ? 'true' : 'false'}
+		tabindex="-1"
 		{autocapitalize}
 		{spellcheck}
 		{...{