el-text-editor 0.0.68 → 0.0.70

package/fesm2020/el-text-editor.mjs

@@ -496,12 +496,6 @@ class ElTextEditorComponent {
             if (index >= 0) {
                 images[index].setAttribute('src', newSrc);
             }
-            else {
-                console.warn(`Index ${index} is out of bounds. Total images: ${images.length}`);
-            }
-        }
-        else {
-            console.error('Editor element not found');
         }
     }
     initEditor() {
@@ -647,12 +641,10 @@ class ElTextEditorComponent {
             let editor = document.getElementById('editor');
             if (editor) {
                 this.moveCaretToEnd(editor);
+                this.onEditorClick(editor);
+                this.onKeyboardMove(editor);
             }
             this.placeHolderRemove.emit();
-            console.log('New data inserted at caret.');
-        }
-        else {
-            console.log('No caret position found.');
         }
     }
     //   // Move caret to the end of the editor content
@@ -676,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
@@ -705,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();
@@ -715,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');
@@ -1234,7 +1271,6 @@ class ElTextEditorComponent {
     }
     editImage() {
         let data;
-        console.log('this.editorFrom =', this.editorFrom);
         switch (this.editorFrom.name) {
             case 'section-content':
                 data = { editIMG: true, from: 'htmlEditor', index: this.selectedItemIndex, id: this.editorFrom.id };
@@ -1296,12 +1332,6 @@ class ElTextEditorComponent {
                 imgTags[index].setAttribute('src', newSrc);
                 this.editorText = doc.body.innerHTML;
             }
-            else {
-                console.error(`Invalid index ${index}. There are only ${imgTags.length} <img> tags.`);
-            }
-        }
-        else {
-            console.error('No <img> tags found in the editor text.');
         }
     }
     navigateToIMGEditor(data) {