el-text-editor 0.0.75 → 0.0.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/el-text-editor.component.mjs +33 -41
- package/fesm2015/el-text-editor.mjs +32 -40
- package/fesm2015/el-text-editor.mjs.map +1 -1
- package/fesm2020/el-text-editor.mjs +32 -40
- package/fesm2020/el-text-editor.mjs.map +1 -1
- package/lib/el-text-editor.component.d.ts +1 -0
- package/package.json +1 -1
@@ -91,16 +91,6 @@ class ElTextEditorComponent {
|
|
91
91
|
this.isOpen.emit(this.IsOpen);
|
92
92
|
}
|
93
93
|
};
|
94
|
-
// private setCaretToEnd(element: HTMLElement) {
|
95
|
-
// const range = document.createRange();
|
96
|
-
// const sel = window.getSelection();
|
97
|
-
// if (sel) {
|
98
|
-
// range.selectNodeContents(element);
|
99
|
-
// range.collapse(false);
|
100
|
-
// sel.removeAllRanges();
|
101
|
-
// sel.addRange(range);
|
102
|
-
// }
|
103
|
-
// }
|
104
94
|
// openColorPicker(inputId: string) {
|
105
95
|
// const inputElement = document.getElementById(inputId);
|
106
96
|
// if (inputElement) {
|
@@ -636,20 +626,20 @@ class ElTextEditorComponent {
|
|
636
626
|
const tempDiv = document.createElement('div');
|
637
627
|
tempDiv.innerHTML = newData;
|
638
628
|
// Append the new data to the fragment (supports HTML insertion)
|
639
|
-
|
640
|
-
|
641
|
-
|
642
|
-
//
|
643
|
-
|
644
|
-
|
645
|
-
//
|
646
|
-
|
647
|
-
|
648
|
-
|
649
|
-
|
650
|
-
|
651
|
-
|
652
|
-
|
629
|
+
while (tempDiv.firstChild) {
|
630
|
+
fragment.appendChild(tempDiv.firstChild);
|
631
|
+
}
|
632
|
+
// Insert the fragment at the caret position
|
633
|
+
range.deleteContents(); // Remove any selected content if applicable
|
634
|
+
range.insertNode(fragment);
|
635
|
+
// Move the caret after the inserted content
|
636
|
+
const lastChild = fragment.lastChild;
|
637
|
+
if (lastChild) {
|
638
|
+
range.setStartAfter(lastChild);
|
639
|
+
range.setEndAfter(lastChild);
|
640
|
+
selection.removeAllRanges();
|
641
|
+
selection.addRange(range);
|
642
|
+
}
|
653
643
|
let editor = document.getElementById('editor');
|
654
644
|
if (editor) {
|
655
645
|
this.moveCaretToEnd(editor);
|
@@ -701,29 +691,21 @@ class ElTextEditorComponent {
|
|
701
691
|
setupMutationObserver(editor) {
|
702
692
|
const observer = new MutationObserver(() => {
|
703
693
|
// Move the caret to the end after content changes
|
704
|
-
this.moveCaretToEnd(editor);
|
694
|
+
// this.moveCaretToEnd(editor);
|
705
695
|
// Update model with the current content
|
706
696
|
this.onModelChange(editor.innerHTML);
|
707
697
|
});
|
708
698
|
observer.observe(editor, { childList: true, subtree: true, characterData: true });
|
709
699
|
}
|
710
700
|
moveCaretToEnd(editor) {
|
711
|
-
// const selection = window.getSelection();
|
712
|
-
// const range = document.createRange();
|
713
|
-
// if (editor.lastChild) {
|
714
|
-
// range.selectNodeContents(editor);
|
715
|
-
// range.collapse(false); // Collapse to the end
|
716
|
-
// selection?.removeAllRanges();
|
717
|
-
// selection?.addRange(range);
|
718
|
-
// }
|
719
701
|
const selection = window.getSelection();
|
720
|
-
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
702
|
+
const range = document.createRange();
|
703
|
+
if (editor.lastChild) {
|
704
|
+
range.selectNodeContents(editor);
|
705
|
+
range.collapse(false); // Collapse to the end
|
706
|
+
selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
|
707
|
+
selection === null || selection === void 0 ? void 0 : selection.addRange(range);
|
725
708
|
}
|
726
|
-
return null;
|
727
709
|
}
|
728
710
|
// init_Func(html: any) {
|
729
711
|
// if (html) {
|
@@ -921,7 +903,7 @@ class ElTextEditorComponent {
|
|
921
903
|
const imgWidth = img.width;
|
922
904
|
// If the image width exceeds the editor's width, fit it to the editor
|
923
905
|
const imgHTML = imgWidth > editorWidth
|
924
|
-
? `<img src="${img.src}" style="width: 100%; max-width: ${
|
906
|
+
? `<img src="${img.src}" style="width: 100%; max-width: ${700}px; height: auto;">`
|
925
907
|
: `<img src="${img.src}" style="width: ${imgWidth}px; height: auto;">`;
|
926
908
|
this.newImageAdded.emit();
|
927
909
|
// Insert the image into the editor
|
@@ -1169,6 +1151,16 @@ class ElTextEditorComponent {
|
|
1169
1151
|
}
|
1170
1152
|
}
|
1171
1153
|
}
|
1154
|
+
setCaretToEnd(element) {
|
1155
|
+
const range = document.createRange();
|
1156
|
+
const sel = window.getSelection();
|
1157
|
+
if (sel) {
|
1158
|
+
range.selectNodeContents(element);
|
1159
|
+
range.collapse(false);
|
1160
|
+
sel.removeAllRanges();
|
1161
|
+
sel.addRange(range);
|
1162
|
+
}
|
1163
|
+
}
|
1172
1164
|
openColorPicker(inputId) {
|
1173
1165
|
const inputElement = document.getElementById(inputId);
|
1174
1166
|
if (inputElement) {
|