el-text-editor 0.0.75 → 0.0.77

package/fesm2020/el-text-editor.mjs

@@ -91,16 +91,6 @@ class ElTextEditorComponent {
                 this.isOpen.emit(this.IsOpen);
             }
         };
-        // private setCaretToEnd(element: HTMLElement) {
-        //   const range = document.createRange();
-        //   const sel = window.getSelection();
-        //     if (sel) {
-        //     range.selectNodeContents(element);
-        //   range.collapse(false);
-        //   sel.removeAllRanges();
-        //   sel.addRange(range);
-        //   }
-        // }
         // openColorPicker(inputId: string) {
         //   const inputElement = document.getElementById(inputId);
         //   if (inputElement) {
@@ -634,20 +624,20 @@ class ElTextEditorComponent {
             const tempDiv = document.createElement('div');
             tempDiv.innerHTML = newData;
             // Append the new data to the fragment (supports HTML insertion)
-            // while (tempDiv.firstChild) {
-            //   fragment.appendChild(tempDiv.firstChild);
-            // }
-            // // Insert the fragment at the caret position
-            // range.deleteContents(); // Remove any selected content if applicable
-            // range.insertNode(fragment);
-            // // Move the caret after the inserted content
-            // const lastChild = fragment.lastChild;
-            // if (lastChild) {
-            //   range.setStartAfter(lastChild);
-            //   range.setEndAfter(lastChild);
-            //   selection.removeAllRanges();
-            //   selection.addRange(range);
-            // }
+            while (tempDiv.firstChild) {
+                fragment.appendChild(tempDiv.firstChild);
+            }
+            // Insert the fragment at the caret position
+            range.deleteContents(); // Remove any selected content if applicable
+            range.insertNode(fragment);
+            // Move the caret after the inserted content
+            const lastChild = fragment.lastChild;
+            if (lastChild) {
+                range.setStartAfter(lastChild);
+                range.setEndAfter(lastChild);
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
             let editor = document.getElementById('editor');
             if (editor) {
                 this.moveCaretToEnd(editor);
@@ -699,29 +689,21 @@ class ElTextEditorComponent {
     setupMutationObserver(editor) {
         const observer = new MutationObserver(() => {
             // Move the caret to the end after content changes
-            this.moveCaretToEnd(editor);
+            // this.moveCaretToEnd(editor);
             // Update model with the current content
             this.onModelChange(editor.innerHTML);
         });
         observer.observe(editor, { childList: true, subtree: true, characterData: true });
     }
     moveCaretToEnd(editor) {
-        // 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);
-        // }
         const selection = window.getSelection();
-        if (selection?.rangeCount) {
-            const range = selection.getRangeAt(0);
-            if (editor.contains(range.commonAncestorContainer)) {
-                return range.cloneRange(); // Return the current caret range
-            }
+        const range = document.createRange();
+        if (editor.lastChild) {
+            range.selectNodeContents(editor);
+            range.collapse(false); // Collapse to the end
+            selection?.removeAllRanges();
+            selection?.addRange(range);
         }
-        return null;
     }
     //   init_Func(html: any) {
     //   if (html) {
@@ -919,7 +901,7 @@ class ElTextEditorComponent {
                     const imgWidth = img.width;
                     // If the image width exceeds the editor's width, fit it to the editor
                     const imgHTML = imgWidth > editorWidth
-                        ? `<img src="${img.src}" style="width: 100%; max-width: ${editorWidth}px; height: auto;">`
+                        ? `<img src="${img.src}" style=" max-width: ${700}px; height: auto;">`
                         : `<img src="${img.src}" style="width: ${imgWidth}px; height: auto;">`;
                     this.newImageAdded.emit();
                     // Insert the image into the editor
@@ -1165,6 +1147,16 @@ class ElTextEditorComponent {
             }
         }
     }
+    setCaretToEnd(element) {
+        const range = document.createRange();
+        const sel = window.getSelection();
+        if (sel) {
+            range.selectNodeContents(element);
+            range.collapse(false);
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+    }
     openColorPicker(inputId) {
         const inputElement = document.getElementById(inputId);
         if (inputElement) {