el-text-editor 0.0.69 → 0.0.70

package/fesm2020/el-text-editor.mjs

@@ -641,6 +641,8 @@ class ElTextEditorComponent {
             let editor = document.getElementById('editor');
             if (editor) {
                 this.moveCaretToEnd(editor);
+                this.onEditorClick(editor);
+                this.onKeyboardMove(editor);
             }
             this.placeHolderRemove.emit();
         }
@@ -666,6 +668,8 @@ class ElTextEditorComponent {
                 this.setupMutationObserver(editor);
                 // Move the caret to the end after initial content setup
                 this.moveCaretToEnd(editor);
+                this.onEditorClick(editor);
+                this.onKeyboardMove(editor);
                 //  Track caret position on mouse click
                 editor.addEventListener('click', () => {
                     if (editor) { // Ensure editor is not null
@@ -695,6 +699,16 @@ class ElTextEditorComponent {
         });
         observer.observe(editor, { childList: true, subtree: true, characterData: true });
     }
+    // private moveCaretToEnd(editor: HTMLElement) {
+    //   const selection = window.getSelection();
+    //   const range = document.createRange();
+    //   if (editor.lastChild) {
+    //     range.selectNodeContents(editor);
+    //     range.collapse(false); // Collapse to the end
+    //     selection?.removeAllRanges();
+    //     selection?.addRange(range);
+    //   }
+    // }
     moveCaretToEnd(editor) {
         const selection = window.getSelection();
         const range = document.createRange();
@@ -705,6 +719,39 @@ class ElTextEditorComponent {
             selection?.addRange(range);
         }
     }
+    onKeyboardMove(editor) {
+        editor.addEventListener('keydown', (event) => {
+            const selection = window.getSelection();
+            const range = document.createRange();
+            if (selection && selection.rangeCount > 0) {
+                const currentRange = selection.getRangeAt(0);
+                const currentCaretPosition = currentRange.startContainer;
+                if (event.key === 'ArrowRight' || event.key === 'ArrowLeft' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+                    // You can handle specific behavior for different arrow keys here
+                    // For example, move caret within a specific node or across nodes
+                }
+            }
+        });
+    }
+    onEditorClick(editor) {
+        editor.addEventListener('click', (event) => {
+            const selection = window.getSelection();
+            const range = document.createRange();
+            const clickedNode = event.target;
+            if (clickedNode && clickedNode !== editor) {
+                // Place the caret at the clicked position
+                range.setStart(clickedNode, 0);
+                range.setEnd(clickedNode, clickedNode?.length);
+            }
+            else {
+                // Move caret to the end if clicked inside the editor but not on text node
+                range.selectNodeContents(editor);
+                range.collapse(false);
+            }
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+        });
+    }
     //   init_Func(html: any) {
     //   if (html) {
     //     let editor = document.getElementById('editor');