Index.jsx

src/Form/form/Index.jsx

@@ -14,6 +14,9 @@ export const Input = () => {
   const [loading, setLoading] = useState(false);
   const [isNewTodoAdded, setIsNewTodoAdded] = useState(false);
   const editableRef = useRef(null);
+  const lastCursorPos = useRef(0);
+
+
   const debounceTimeout = useRef(null);
 
   const fetchTodos = useCallback(async () => {
@@ -32,37 +35,93 @@ export const Input = () => {
     fetchTodos();
   }, [fetchTodos]);
 
-  const saveSelection = () => {
-    const selection = window.getSelection();
-    if (selection.rangeCount > 0) {
-      return selection.getRangeAt(0);
+  const saveCursorPosition = () => {
+    try {
+      if (editableRef.current) {
+        const selection = window.getSelection();
+        if (selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0);
+          const preCaretRange = range.cloneRange();
+          preCaretRange.selectNodeContents(editableRef.current);
+          preCaretRange.setEnd(range.endContainer, range.endOffset);
+          lastCursorPos.current = preCaretRange.toString().length;
+        }
+      }
+    } catch (error) {
+      console.error("Error saving cursor position:", error);
     }
-    return null;
   };
 
-  const restoreSelection = (savedRange) => {
-    if (!savedRange) return;
-    
-    const selection = window.getSelection();
-    selection.removeAllRanges();
-    selection.addRange(savedRange);
+  const restoreCursorPosition = () => {
+    try {
+      if (editableRef.current) {
+        const range = document.createRange();
+        const selection = window.getSelection();
+
+        let found = false;
+        const findPosition = (node, remainingPos) => {
+          if (node.nodeType === Node.TEXT_NODE) {
+            const length = node.nodeValue.length;
+            if (remainingPos <= length) {
+              range.setStart(node, remainingPos);
+              found = true;
+              return;
+            }
+            remainingPos -= length;
+          } else {
+            for (let i = 0; i < node.childNodes.length && !found; i++) {
+              findPosition(node.childNodes[i], remainingPos);
+            }
+          }
+        };
+
+        findPosition(editableRef.current, lastCursorPos.current);
+        if (!found) {
+          range.selectNodeContents(editableRef.current);
+          range.collapse(false);
+        } else {
+          range.collapse(true);
+        }
+
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    } catch (error) {
+      console.error("Error restoring cursor position:", error);
+    }
   };
 
+  useEffect(() => {
+    if (editableRef.current && editIndex !== null) {
+      try {
+        editableRef.current.focus();
+        setTimeout(restoreCursorPosition, 0);
+      } catch (error) {
+        console.error("Error focusing editable element:", error);
+        setEditIndex(null);
+      }
+    }
+  }, [editIndex, editedTask]);
+
+ 
   const handleEdit = (e) => {
     try {
-      const savedRange = saveSelection();
+      saveCursorPosition();
       const newValue = e.currentTarget.textContent;
       setEditedTask(newValue);
 
+      
       const updatedStore = [...store];
       const original = updatedStore[editIndex];
       updatedStore[editIndex] = { ...original, task: newValue };
       setStore(updatedStore);
 
+     
       if (debounceTimeout.current) {
         clearTimeout(debounceTimeout.current);
       }
 
+    
       debounceTimeout.current = setTimeout(() => {
         uptTodo(original.id, {
           id: original.id,
@@ -72,14 +131,6 @@ export const Input = () => {
           console.error("Error saving todo:", error);
         });
       }, 1000);
-
-      // Restore selection after state updates
-      setTimeout(() => {
-        if (editableRef.current) {
-          editableRef.current.focus();
-          restoreSelection(savedRange);
-        }
-      }, 0);
     } catch (error) {
       console.error("Error during edit:", error);
       setEditIndex(null);
@@ -92,19 +143,6 @@ export const Input = () => {
     try {
       setEditIndex(index);
       setEditedTask(store[index].task);
-      
-      // Focus and set cursor at end by default
-      setTimeout(() => {
-        if (editableRef.current) {
-          editableRef.current.focus();
-          const range = document.createRange();
-          range.selectNodeContents(editableRef.current);
-          range.collapse(false);
-          const selection = window.getSelection();
-          selection.removeAllRanges();
-          selection.addRange(range);
-        }
-      }, 0);
     } catch (error) {
       console.error("Error starting edit:", error);
       setEditIndex(null);
@@ -128,7 +166,6 @@ export const Input = () => {
       setTimeout(() => setIsNewTodoAdded(false), 500);
     }
   };
-
   const Delete = async (id) => {
     const confirmDelete = window.confirm("Are you sure you want to delete?");
     if (confirmDelete) {
@@ -149,6 +186,7 @@ export const Input = () => {
         completed: !newStore[index].completed 
       };
       setStore(newStore);
+
       await uptTodo(newStore[index].id, newStore[index]);
     } catch (error) {
       console.error("Error toggling complete:", error);
@@ -171,15 +209,15 @@ export const Input = () => {
               e.currentTarget.blur();
             }
           }}
-          className={`${styles.task} ${store[editIndex]?.completed ? styles.completed : ''}`}
-          dangerouslySetInnerHTML={{ __html: editedTask }}
+          className={`${styles.task} ${store[editIndex]?.completed ? 'completed' : ''}`}
           style={{
             display: 'inline-block',
-            width: '100%',
-            boxSizing: 'border-box',
-            outline: 'none'
+            width:'100%',
+            boxSizing:'border-box'
           }}
-        />
+        >
+          {editedTask}
+        </div>
       );
     } catch (error) {
       console.error("Error rendering editable content:", error);
@@ -188,7 +226,9 @@ export const Input = () => {
           className={`${styles.task} ${store[editIndex]?.completed ? styles.completed : ''}`}
           onClick={() => startEdit(editIndex)}
         >
-          {store[editIndex]?.task}
+          {typeof store[editIndex]?.task === 'string'
+            ? store[editIndex].task
+            : JSON.stringify(store[editIndex]?.task)}
         </span>
       );
     }
@@ -229,4 +269,4 @@ export const Input = () => {
       </div>
     </MyTask.Provider>
   );
-};
\ No newline at end of file
+};