el-text-editor 0.0.66 → 0.0.67

package/fesm2020/el-text-editor.mjs

@@ -293,12 +293,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 +392,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 +527,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);
         }
@@ -1164,73 +1230,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 +1256,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;