@stonecrop/atable 0.4.32 → 0.4.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/atable",
-  "version": "0.4.32",
+  "version": "0.4.33",
   "license": "MIT",
   "type": "module",
   "author": {
@@ -42,8 +42,8 @@
     "@vueuse/core": "^13.6.0",
     "pinia": "^3.0.3",
     "vue": "^3.5.18",
-    "@stonecrop/themes": "0.4.32",
-    "@stonecrop/utilities": "0.4.32"
+    "@stonecrop/themes": "0.4.33",
+    "@stonecrop/utilities": "0.4.33"
   },
   "devDependencies": {
     "@microsoft/api-documenter": "^7.26.31",

package/src/components/ACell.vue

@@ -11,7 +11,7 @@
 		@focus="onFocus"
 		@paste="updateCellData"
 		@input="debouncedUpdateCellData"
-		@click="showModal"
+		@click="onCellClick"
 		class="atable-cell"
 		:class="cellClasses">
 		<component
@@ -27,7 +27,7 @@
 <script setup lang="ts">
 import { KeypressHandlers, defaultKeypressHandlers, useKeyboardNav } from '@stonecrop/utilities'
 import { useDebounceFn, useElementBounding } from '@vueuse/core'
-import { computed, type CSSProperties, ref, useTemplateRef } from 'vue'
+import { computed, type CSSProperties, ref, useTemplateRef, nextTick } from 'vue'
 
 import { createTableStore } from '../stores/table'
 import { isHtmlString } from '../utils'
@@ -85,6 +85,14 @@ const cellClasses = computed(() => {
 	}
 })
 
+const onCellClick = () => {
+	// First, select all text if the cell is editable
+	selectAllText()
+
+	// Then handle modal display (original showModal behavior)
+	showModal()
+}
+
 const showModal = () => {
 	const { left, bottom, width, height } = useElementBounding(cellRef)
 
@@ -153,9 +161,91 @@ if (addNavigation) {
 // 	}
 // }
 
+const selectAllText = () => {
+	if (cellRef.value && column.edit) {
+		// Use the Selection API to select all text content in the contenteditable cell
+		const selection = window.getSelection()
+		if (selection) {
+			try {
+				const range = document.createRange()
+				if (range.selectNodeContents) {
+					range.selectNodeContents(cellRef.value)
+					selection.removeAllRanges()
+					selection.addRange(range)
+				}
+			} catch (error) {
+				// Fallback for environments where Range API is not fully supported
+				// This is expected in some test environments
+			}
+		}
+	}
+}
+
 const onFocus = () => {
 	if (cellRef.value) {
 		currentData.value = cellRef.value.textContent!
+		// Select all text when the cell receives focus
+		selectAllText()
+	}
+}
+
+const saveCursorPosition = () => {
+	try {
+		const selection = window.getSelection()
+		if (selection && selection.rangeCount > 0 && cellRef.value) {
+			const range = selection.getRangeAt(0)
+			// Save the offset from the start of the cell
+			const preCaretRange = range.cloneRange()
+			if (preCaretRange.selectNodeContents && preCaretRange.setEnd) {
+				preCaretRange.selectNodeContents(cellRef.value)
+				preCaretRange.setEnd(range.endContainer, range.endOffset)
+				return preCaretRange.toString().length
+			}
+		}
+	} catch (error) {
+		// Fallback for environments where Selection API is not fully supported
+	}
+	return 0
+}
+
+const restoreCursorPosition = (position: number) => {
+	if (!cellRef.value) return
+
+	try {
+		const selection = window.getSelection()
+		if (!selection) return
+
+		let charIndex = 0
+		const walker = document.createTreeWalker
+			? document.createTreeWalker(cellRef.value, NodeFilter.SHOW_TEXT, null)
+			: null
+
+		if (!walker) return
+
+		let node: Node | null
+		let range: Range | null = null
+
+		while ((node = walker.nextNode())) {
+			const textNode = node as Text
+			const nextCharIndex = charIndex + textNode.textContent!.length
+
+			if (position <= nextCharIndex) {
+				range = document.createRange()
+				if (range.setStart && range.setEnd) {
+					range.setStart(textNode, position - charIndex)
+					range.setEnd(textNode, position - charIndex)
+					break
+				}
+			}
+			charIndex = nextCharIndex
+		}
+
+		if (range && selection.removeAllRanges && selection.addRange) {
+			selection.removeAllRanges()
+			selection.addRange(range)
+		}
+	} catch (error) {
+		// Fallback for environments where DOM APIs are not fully supported
 	}
 }
 
@@ -165,6 +255,9 @@ const updateCellData = (payload: Event) => {
 		return
 	}
 
+	// Save cursor position before updating
+	const cursorPosition = saveCursorPosition()
+
 	currentData.value = target.textContent!
 
 	// only apply changes if the cell value has changed after being mounted
@@ -176,6 +269,11 @@ const updateCellData = (payload: Event) => {
 		cellModified.value = target.textContent !== originalData
 		store.setCellData(colIndex, rowIndex, target.textContent)
 	}
+
+	// Use nextTick to restore cursor position after Vue's reactive updates but before browser repaint
+	void nextTick().then(() => {
+		restoreCursorPosition(cursorPosition)
+	})
 }
 
 const debouncedUpdateCellData = useDebounceFn(updateCellData, debounce)