el-text-editor 0.0.66 → 0.0.68

package/fesm2020/el-text-editor.mjs

@@ -41,6 +41,7 @@ class ElTextEditorComponent {
         this.imageEdit2 = new EventEmitter();
         this.placeHolderRemove = new EventEmitter();
         this.isOpen = new EventEmitter();
+        this.newImageAdded = new EventEmitter();
         this.value = '';
         this.showToolbar = false;
         this.toolbarTop = 0;
@@ -293,12 +294,65 @@ class ElTextEditorComponent {
         }
         return userRoleName;
     }
+    // private addClickListenerToImages() {
+    //   const editor = document.getElementById('editor');
+    //   const roles = this.roleCheck(); // Get user roles dynamically
+    //   const isAdmin = roles.includes('Admin');
+    //   const isCreator = roles.includes('Creator');
+    //   const isApprover = roles.includes('Approver');
+    //   if (isCreator || isAdmin) {
+    //     if (editor) {
+    //     editor.addEventListener('click', (event) => {
+    //       const target = event.target as HTMLElement;
+    //       if (target.tagName === 'IMG') {
+    //         this.selectedImage = target as HTMLImageElement;
+    //         this.imageEditUrl = this.selectedImage.src;
+    //         let container = this.selectedImage.parentElement;
+    //         if (!container || container.className !== 'image-container') {
+    //           container = document.createElement('div');
+    //           container.className = 'image-container';
+    //           container.style.position = 'relative';
+    //           container.style.display = 'inline-block';  
+    //           this.selectedImage.parentNode?.insertBefore(container, this.selectedImage);
+    //           container.appendChild(this.selectedImage);
+    //         }
+    //         const existingButton = container.querySelector('.image-edit-button');
+    //         if (existingButton) {
+    //           existingButton.remove();
+    //         }
+    //         const button = document.createElement('button');
+    //         button.textContent  = 'Edit Image';
+    //         button.className = 'image-edit-button btn btn-sm';
+    //         button.style.position = 'absolute';
+    //         button.style.top = '50%';
+    //         button.style.left = '50%';
+    //         button.style.transform = 'translate(-50%, -50%)';
+    //         button.style.zIndex = '1000';
+    //         button.style.backgroundColor = '#fff'; 
+    //         button.style.border = '2px solid #fff'; 
+    //         button.style.color = '#313a46';
+    //         button.style.cursor = 'pointer';
+    //         button.style.userSelect = 'none';
+    //         button.addEventListener('click', (e) => {
+    //           e.stopPropagation();
+    //           this.editImage();
+    //         });
+    //         container.appendChild(button);
+    //       } else {
+    //         this.selectedImage = null;
+    //         this.selectedItemIndex = null;
+    //         const buttons = document.querySelectorAll('.image-edit-button');
+    //         buttons.forEach(button => button.remove());
+    //       }
+    //     });
+    //   }
+    //   }
+    // }
     addClickListenerToImages() {
         const editor = document.getElementById('editor');
         const roles = this.roleCheck(); // Get user roles dynamically
         const isAdmin = roles.includes('Admin');
         const isCreator = roles.includes('Creator');
-        const isApprover = roles.includes('Approver');
         if (isCreator || isAdmin) {
             if (editor) {
                 editor.addEventListener('click', (event) => {
@@ -339,15 +393,31 @@ class ElTextEditorComponent {
                         container.appendChild(button);
                     }
                     else {
-                        this.selectedImage = null;
-                        this.selectedItemIndex = null;
-                        const buttons = document.querySelectorAll('.image-edit-button');
-                        buttons.forEach(button => button.remove());
+                        this.removeEditButtons();
                     }
                 });
+                // Monitor editor content changes to handle image deletion
+                const observer = new MutationObserver(() => {
+                    const buttons = editor.querySelectorAll('.image-edit-button');
+                    buttons.forEach((button) => {
+                        const container = button.parentElement;
+                        if (container && !container.querySelector('img')) {
+                            button.remove(); // Remove the button if the associated image is gone
+                            container.remove(); // Clean up the container
+                        }
+                    });
+                });
+                // Observe changes in the editor
+                observer.observe(editor, { childList: true, subtree: true });
             }
         }
     }
+    removeEditButtons() {
+        const buttons = document.querySelectorAll('.image-edit-button');
+        buttons.forEach((button) => button.remove());
+        this.selectedImage = null;
+        this.selectedItemIndex = null;
+    }
     // private addClickListenerToImages() {
     // const editor = document.getElementById('editor');
     // if (editor) {
@@ -458,9 +528,6 @@ class ElTextEditorComponent {
         if (value) {
             const VALUE = value;
             this.editorText = VALUE;
-            const editorContent = VALUE;
-            // Check if there's an image in the editor content
-            this.showEditButton = editorContent.includes('<img');
             this.onChange(VALUE);
             this.editorTextChange.emit(VALUE);
         }
@@ -846,6 +913,7 @@ class ElTextEditorComponent {
                     const imgHTML = imgWidth > editorWidth
                         ? `<img src="${img.src}" style="width: 100%; max-width: ${editorWidth}px; height: auto;">`
                         : `<img src="${img.src}" style="width: ${imgWidth}px; height: auto;">`;
+                    this.newImageAdded.emit();
                     // Insert the image into the editor
                     document.execCommand('insertHTML', false, imgHTML);
                 };
@@ -1164,73 +1232,24 @@ class ElTextEditorComponent {
         document.execCommand('foreColor', false, event);
         // this.logs.unshift([this.logs.length + 1, trigger, event]);
     }
-    // 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 };
-    //       const compressedData: string = compress(JSON.stringify(this.imageEditUrl));
-    //       sessionStorage.setItem('editImageFromTemp', compressedData);
-    //       const compressedData2 = compress(JSON.stringify(this.sanitizedContent));
-    //       sessionStorage.setItem('textEditor', compressedData2);
-    //       // alert('go to editor!')
-    //       this.navigateToIMGEditor(data);
-    //       this.imageEdit.emit()
-    //       break;
-    //     case 'create-document':
-    //       this.imageEdit.emit()
-    //       data = { editIMG: true, from: 'createDocument', index: this.selectedItemIndex, id: this.editorFrom.id, section: this.editorFrom.section, reportSectionId: this.editorFrom.reportSectionId };
-    //       // this.openDialog(data)
-    //       const compressedData3 = compress(JSON.stringify(this.imageEditUrl));
-    //       const compressedData4 = compress(this.editorText);
-    //       sessionStorage.setItem('editImageFromTemp2', compressedData3);
-    //       sessionStorage.setItem('textEditor2', compressedData4);
-    //       this.navigateToIMGEditor(data);
-    //       break;
-    //     default:
-    //       null
-    //       // sessionStorage.removeItem('editImageFromTemp');
-    //       // sessionStorage.removeItem('editImageFromTemp2');
-    //       // sessionStorage.removeItem('templateEditor');
-    //       // sessionStorage.removeItem('textEditor');
-    //       break;
-    //   }
-    //   // if (this.editorFrom === 'section-content') {
-    //   //   const data = {editIMG: true, from: 'htmlEditor', index: this.selectedItemIndex}
-    //   //   this.navigateToIMGEditor(data)
-    //   //   sessionStorage.setItem('editImageFromTemp', JSON.stringify(this.imageEditUrl))
-    //   //   sessionStorage.setItem('textEditor', this.editorText)
-    //   // }
-    // }
     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,
-                };
+                data = { editIMG: true, from: 'htmlEditor', index: this.selectedItemIndex, id: this.editorFrom.id };
                 const compressedData = compress(JSON.stringify(this.imageEditUrl));
                 sessionStorage.setItem('editImageFromTemp', compressedData);
                 const compressedData2 = compress(JSON.stringify(this.sanitizedContent));
                 sessionStorage.setItem('textEditor', compressedData2);
+                // alert('go to editor!')
                 this.navigateToIMGEditor(data);
                 this.imageEdit.emit();
                 break;
             case 'create-document':
                 this.imageEdit.emit();
-                data = {
-                    editIMG: true,
-                    from: 'createDocument',
-                    index: this.selectedItemIndex,
-                    id: this.editorFrom.id,
-                    section: this.editorFrom.section,
-                    reportSectionId: this.editorFrom.reportSectionId,
-                };
+                data = { editIMG: true, from: 'createDocument', index: this.selectedItemIndex, id: this.editorFrom.id, section: this.editorFrom.section, reportSectionId: this.editorFrom.reportSectionId };
+                // this.openDialog(data)
                 const compressedData3 = compress(JSON.stringify(this.imageEditUrl));
                 const compressedData4 = compress(this.editorText);
                 sessionStorage.setItem('editImageFromTemp2', compressedData3);
@@ -1239,8 +1258,18 @@ class ElTextEditorComponent {
                 break;
             default:
                 null;
+                // sessionStorage.removeItem('editImageFromTemp');
+                // sessionStorage.removeItem('editImageFromTemp2');
+                // sessionStorage.removeItem('templateEditor');
+                // sessionStorage.removeItem('textEditor');
                 break;
         }
+        // if (this.editorFrom === 'section-content') {
+        //   const data = {editIMG: true, from: 'htmlEditor', index: this.selectedItemIndex}
+        //   this.navigateToIMGEditor(data)
+        //   sessionStorage.setItem('editImageFromTemp', JSON.stringify(this.imageEditUrl))
+        //   sessionStorage.setItem('textEditor', this.editorText)
+        // } 
     }
     openDialog(item) {
         // let data: any;
@@ -1589,7 +1618,7 @@ class ElTextEditorComponent {
     }
 }
 ElTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ElTextEditorComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i0.Renderer2 }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-ElTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ElTextEditorComponent, selector: "text-editor", inputs: { editorText: "editorText", editorFrom: "editorFrom", editorAction: "editorAction", UserRole: "UserRole", style: "style", disableToolbar: "disableToolbar", placeHolder: "placeHolder", reportId: "reportId", backgroundImage: "backgroundImage", toolbarMode: "toolbarMode", value: "value" }, outputs: { editorTextChange: "editorTextChange", editorActionResponse: "editorActionResponse", editorTextClear: "editorTextClear", imageEdit: "imageEdit", imageEdit2: "imageEdit2", placeHolderRemove: "placeHolderRemove", isOpen: "isOpen" }, providers: [{
+ElTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ElTextEditorComponent, selector: "text-editor", inputs: { editorText: "editorText", editorFrom: "editorFrom", editorAction: "editorAction", UserRole: "UserRole", style: "style", disableToolbar: "disableToolbar", placeHolder: "placeHolder", reportId: "reportId", backgroundImage: "backgroundImage", toolbarMode: "toolbarMode", value: "value" }, outputs: { editorTextChange: "editorTextChange", editorActionResponse: "editorActionResponse", editorTextClear: "editorTextClear", imageEdit: "imageEdit", imageEdit2: "imageEdit2", placeHolderRemove: "placeHolderRemove", isOpen: "isOpen", newImageAdded: "newImageAdded" }, providers: [{
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ElTextEditorComponent),
             multi: true
@@ -1635,6 +1664,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                 type: Output
             }], isOpen: [{
                 type: Output
+            }], newImageAdded: [{
+                type: Output
             }], value: [{
                 type: Input
             }], TextEditor: [{