svedit 0.6.0 → 0.6.1

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

@@ -68,7 +68,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() {
@@ -977,8 +979,8 @@ ${fallback_html}`;
 			}
 		}
 
-		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 +990,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 +1003,7 @@ ${fallback_html}`;
 					processNode(childNode);
 				}
 			}
-			return focus_offset !== 0;
+			return end_offset !== 0;
 		}
 
 		// Process nodes to find offsets
@@ -1012,21 +1014,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 +1161,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 +1237,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

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":";;;;;;;AAwyCA;;eAAqD;iCAhxC1C,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svedit",
-	"version": "0.6.0",
+	"version": "0.6.1",
 	"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

@@ -68,7 +68,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() {
@@ -977,8 +979,8 @@ ${fallback_html}`;
 			}
 		}
 
-		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 +990,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 +1003,7 @@ ${fallback_html}`;
 					processNode(childNode);
 				}
 			}
-			return focus_offset !== 0;
+			return end_offset !== 0;
 		}
 
 		// Process nodes to find offsets
@@ -1012,21 +1014,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 +1161,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 +1237,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