rapid-text-editor 1.0.12 → 1.0.14

package/fesm2020/rapid-text-editor.mjs

@@ -29,7 +29,7 @@ class RapidTextEditorComponent {
         this.renderer = renderer;
         this.elRef = elRef;
         this.contentCapture = false;
-        this.height = "300px";
+        this.height = "auto";
         this.width = "auto";
         this.contentChange = new EventEmitter();
         this.editorContent = '';
@@ -38,13 +38,9 @@ class RapidTextEditorComponent {
         this.grid = Array(49).fill(0);
         this.Math = Math;
         this.uploadedImages = [];
-        //Two Way Data Binding Functionality
         this.selectedHead = 'P';
         this.selectedFont = '14';
         this.onChange = (content) => {
-            setTimeout(() => {
-                console.log(this.editor.nativeElement.innerHTML);
-            }, 0);
             if (this.editor.nativeElement.innerHTML == '<br>' || this.editor.nativeElement.innerHTML == '') {
                 this.selectedHead = 'P';
                 this.selectedFont = '14';
@@ -67,17 +63,29 @@ class RapidTextEditorComponent {
         }
     }
     applyDimensions() {
-        const editorElement = this.elRef.nativeElement.querySelector('.dimension');
+        const dimensionElement = this.elRef.nativeElement.querySelector('.dimension');
+        if (this.width) {
+            this.renderer.setStyle(dimensionElement, 'width', this.width);
+        }
+        const editorElement = this.elRef.nativeElement.querySelector('.editor');
         if (this.height) {
             this.renderer.setStyle(editorElement, 'height', this.height);
         }
-        if (this.width) {
-            this.renderer.setStyle(editorElement, 'width', this.width);
-        }
     }
     ngAfterViewInit() {
         const editor = this.el.nativeElement.querySelector('.editor');
-        if (!editor) {
+        if (editor && (editor.innerHTML.trim() === "" || editor.innerHTML.trim() === "<br>")) {
+            editor.focus();
+            const range = document.createRange();
+            range.setStart(editor, 0);
+            range.collapse(true);
+            const selection = window.getSelection();
+            if (selection) {
+                selection.removeAllRanges();
+                selection.addRange(range);
+            }
+        }
+        else {
             console.error('Editor element not found.');
         }
     }
@@ -97,17 +105,14 @@ class RapidTextEditorComponent {
     getContent() {
         return this.editorContent;
     }
-    // Called by Angular to update the value programmatically
     writeValue(content) {
         if (this.editor && this.editor.nativeElement) {
             this.editor.nativeElement.innerHTML = content || '';
         }
     }
-    // Registers the onChange callback to notify Angular of content changes
     registerOnChange(fn) {
         this.onChange = fn;
     }
-    // Registers the onTouched callback for blur events
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
@@ -121,19 +126,32 @@ class RapidTextEditorComponent {
         if (!selection || selection.rangeCount === 0)
             return;
         const range = selection.getRangeAt(0);
-        // If inside an existing span, update it
-        const parent = selection.anchorNode?.parentElement;
-        if (parent &&
-            parent.classList &&
-            Array.from(parent.classList).some((c) => c.startsWith('fs-'))) {
-            parent.style.fontSize = `${size}px`;
-            parent.className = `fs-${size}`;
+        if (!range.collapsed) {
+            const parent = selection.anchorNode?.parentElement;
+            if (parent &&
+                parent.classList &&
+                Array.from(parent.classList).some((c) => c.startsWith('fs-'))) {
+                parent.style.fontSize = `${size}px`;
+                parent.className = `fs-${size}`;
+            }
+            else {
+                const span = document.createElement('span');
+                span.style.fontSize = `${size}px`;
+                span.classList.add(`fs-${size}`);
+                range.surroundContents(span);
+            }
         }
         else {
             const span = document.createElement('span');
             span.style.fontSize = `${size}px`;
             span.classList.add(`fs-${size}`);
-            range.surroundContents(span);
+            span.appendChild(document.createTextNode('\u200B')); // zero-width space
+            range.insertNode(span);
+            const newRange = document.createRange();
+            newRange.setStart(span.firstChild, 1);
+            newRange.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
         }
     }
     setHeading(event) {
@@ -143,13 +161,10 @@ class RapidTextEditorComponent {
         if (!selection || selection.rangeCount === 0)
             return;
         const range = selection.getRangeAt(0);
-        // Get editor reference
         const editor = document.getElementById('editor');
         if (!editor)
             return;
-        // Create the new element (heading or paragraph)
         const newElem = document.createElement(tag);
-        // Apply styles based on the selected tag
         switch (tag) {
             case 'H1':
                 newElem.style.fontSize = '32px';
@@ -181,7 +196,6 @@ class RapidTextEditorComponent {
                 newElem.style.fontWeight = 'normal';
                 break;
         }
-        // Get any selected text, or use a zero-width space if none is selected
         const selectedText = selection.toString();
         if (selectedText) {
             newElem.textContent = selectedText;
@@ -189,16 +203,13 @@ class RapidTextEditorComponent {
         else {
             newElem.innerHTML = '\u200B'; // Zero-width space to keep cursor visible
         }
-        // Delete the selected content and insert new heading/paragraph
         range.deleteContents();
         range.insertNode(newElem);
-        // Set the cursor at the end of the inserted node
         const newRange = document.createRange();
         newRange.setStart(newElem, newElem.childNodes.length);
         newRange.collapse(true);
         selection.removeAllRanges();
         selection.addRange(newRange);
-        // Refocus the editor
         editor.focus();
     }
     format(command) {
@@ -215,35 +226,7 @@ class RapidTextEditorComponent {
     // Handle drop event in the editor
     drop(event) {
         event.preventDefault();
-        // const imageUrl = event.dataTransfer?.getData("text");
-        // if (imageUrl) {
-        //   this.insertImageInEditor(imageUrl);
-        // }
-    }
-    // insertImage(event: any): void {
-    //   const files: FileList = event.target.files;
-    //   if (!files || files.length === 0) {
-    //     console.error('No files selected.');
-    //     return;
-    //   }
-    //   Array.from(files).forEach((file) => {
-    //     // Check file type
-    //     if (file.type !== 'image/png' && !file.type.startsWith('image/')) {
-    //       console.error('Unsupported file type:', file.type);
-    //       return;
-    //     }
-    //     // Read the image file
-    //     const reader = new FileReader();
-    //     reader.onload = (e: any) => {
-    //       const imageUrl = e.target.result;
-    //       // Add image to the uploaded images list
-    //       this.uploadedImages.push(imageUrl);
-    //       // Call insertImageInEditor to add the image to the editor
-    //       this.insertImageInEditor(imageUrl);
-    //     };
-    //     reader.readAsDataURL(file);
-    //   });
-    // } -> for PNG
+    }
     removeImage(index) {
         this.uploadedImages.splice(index, 1);
     }
@@ -382,20 +365,6 @@ class RapidTextEditorComponent {
             reader.readAsDataURL(file);
         });
     }
-    // insertImageByDrag(imageUrl: string): void {
-    //   const editor = document.querySelector('.editor') as HTMLElement;
-    //   if (!editor) {
-    //     console.error('Editor element not found.');
-    //     return;
-    //   }
-    //   const img = document.createElement('img');
-    //   img.src = imageUrl;
-    //   img.style.maxWidth = '100%';
-    //   img.style.display = 'block';
-    //   img.style.width = '300px';
-    //   img.style.height = 'auto';
-    //   editor.appendChild(img);
-    // }
     insertImageToEditor(event) {
         const file = event.target.files[0];
         if (file) {
@@ -482,6 +451,7 @@ class RapidTextEditorComponent {
         }
     }
     openTableDialog(event) {
+        this.insertMarker();
         this.rows = 1;
         this.cols = 1;
         const dialogRef = this.dialog.open(this.tableDialog, {
@@ -548,6 +518,16 @@ class RapidTextEditorComponent {
         }
         return null;
     }
+    insertMarker() {
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0).cloneRange();
+            const marker = document.createElement('span');
+            marker.id = 'table-marker';
+            marker.style.display = 'none';
+            range.insertNode(marker);
+        }
+    }
     insertTable(rows, cols) {
         const rowCount = parseInt(rows, 10);
         const colCount = parseInt(cols, 10);
@@ -555,25 +535,21 @@ class RapidTextEditorComponent {
             return;
         }
         const editor = this.editor.nativeElement;
-        const selection = window.getSelection();
-        // Ensure selection is inside the editor
-        if (!this.isSelectionInsideEditor(editor, selection)) {
-            // Append the table at the end if selection is outside editor
-            this.appendTable(editor, rowCount, colCount);
-            return;
-        }
-        // Proceed to insert the table if selection is valid
+        const marker = editor.querySelector('#table-marker');
         const tableHTML = this.createTableHTML(rowCount, colCount);
-        const range = selection.getRangeAt(0);
-        range.deleteContents(); // Remove any selected content
         const tempDiv = document.createElement('div');
         tempDiv.innerHTML = tableHTML;
-        range.insertNode(tempDiv.firstChild); // Insert the table
-        // Move the cursor to the first cell of the new table
-        this.setCursorToFirstCell(tempDiv.firstChild);
-        editor.focus();
+        const table = tempDiv.firstElementChild;
+        if (marker && table) {
+            marker.parentNode.replaceChild(table, marker);
+            this.setCursorToFirstCell(table);
+            editor.focus();
+        }
+        else {
+            // fallback if no marker, just append
+            this.appendTable(editor, rowCount, colCount);
+        }
     }
-    // Helper function: Create table HTML
     createTableHTML(rowCount, colCount) {
         let tableHTML = '<table border="1" style="">';
         for (let i = 0; i < rowCount; i++) {
@@ -587,21 +563,17 @@ class RapidTextEditorComponent {
         tableHTML += '</table>';
         return tableHTML;
     }
-    // Helper function: Append a table at the end of the editor
     appendTable(editor, rowCount, colCount) {
         const tableHTML = this.createTableHTML(rowCount, colCount);
         editor.innerHTML += tableHTML;
-        // Set cursor inside the first cell of the new table
         const lastInsertedTable = editor.querySelector('table:last-child');
         this.setCursorToFirstCell(lastInsertedTable);
         editor.focus();
     }
-    // Helper function: Check if selection is inside the editor
     isSelectionInsideEditor(editor, selection) {
         if (!selection.rangeCount)
             return false;
         let node = selection.getRangeAt(0).commonAncestorContainer;
-        // Traverse up to see if the node belongs to the editor
         while (node) {
             if (node === editor)
                 return true;
@@ -609,26 +581,11 @@ class RapidTextEditorComponent {
         }
         return false;
     }
-    // Helper function: Move cursor to the first cell
-    // private setCursorToFirstCell(table: HTMLElement) {
-    //   const firstCell = table.querySelector('tr:first-child td:first-child') as HTMLElement;
-    //   if (firstCell) {
-    //     const newRange = document.createRange();
-    //     newRange.setStart(firstCell, 0); // Start at the beginning of the cell
-    //     newRange.collapse(true);
-    //     const selection = window.getSelection();
-    //     selection!.removeAllRanges();
-    //     selection!.addRange(newRange);
-    //   }
-    // }
     setCursorToFirstCell(table) {
         const firstCell = table.querySelector('tr:first-child td:first-child, tr:first-child th:first-child');
         if (firstCell) {
-            // Ensure the cell is contenteditable
             firstCell.setAttribute('contenteditable', 'true');
-            // Focus the cell
             firstCell.focus();
-            // Create a range and place the cursor at the start of the cell
             const newRange = document.createRange();
             newRange.selectNodeContents(firstCell); // Select the contents of the cell
             newRange.collapse(true); // Collapse to the start
@@ -647,10 +604,7 @@ class RapidTextEditorComponent {
         const editor = this.editor.nativeElement;
         const content = editor.innerHTML; // Get the HTML content from the editor
         const plainTextContent = editor.innerText; // Optionally, get plain text content
-        // For demonstration, you can log it or process it as needed
         this.onChange(content);
-        // Example: You could send this data to a server or use it elsewhere in your application
-        // this.yourService.submitContent({ content }); // Replace with your service call
     }
 }
 RapidTextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorComponent, deps: [{ token: i1.MatDialog }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -660,7 +614,7 @@ RapidTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
             useExisting: forwardRef(() => RapidTextEditorComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }, { propertyName: "tableDialog", first: true, predicate: ["tableDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dimension\">\r\n\r\n\r\n<div class=\"rich-text-editor\">\r\n  <!-- Toolbar -->\r\n  <div class=\"toolbar\">\r\n\r\n        <select class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n          <option value=\"P\" style=\"font-size: 14px;\">Paragraph</option>\r\n          <option value=\"H1\" style=\"font-size: 32px; font-weight: bold;\">H1</option>\r\n          <option value=\"H2\" style=\"font-size: 28px; font-weight: bold;\">H2</option>\r\n          <option value=\"H3\" style=\"font-size: 24px; font-weight: bold;\">H3</option>\r\n          <option value=\"H4\" style=\"font-size: 20px; font-weight: bold;\">H4</option>\r\n          <option value=\"H5\" style=\"font-size: 18px; font-weight: 600;\">H5</option>\r\n          <option value=\"H6\" style=\"font-size: 16px; font-weight: 600;\">H6</option>\r\n        </select>\r\n\r\n\r\n        <select class=\"select-wrapper\" (change)=\"onChange(null)\" [(ngModel)]=\"selectedFont\" (change)=\"setFontSize($event)\">\r\n          <option value=\"12\">12px</option>\r\n          <option value=\"13\">13px</option>\r\n          <option value=\"14\" selected>14px</option>\r\n          <option value=\"16\">16px</option>\r\n          <option value=\"18\">18px</option>\r\n          <option value=\"20\">20px</option>\r\n          <option value=\"24\">24px</option>\r\n          <option value=\"28\">28px</option>\r\n        </select>\r\n\r\n\r\n        <button (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\">\r\n          <mat-icon>format_bold</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\">\r\n          <mat-icon>format_italic</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\">\r\n          <mat-icon>format_underline</mat-icon>\r\n        </button>\r\n\r\n        <button  (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\">\r\n          <mat-icon>strikethrough_s</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\">\r\n          <mat-icon>format_align_left</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\">\r\n          <mat-icon>format_align_center</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\">\r\n          <mat-icon>format_align_right</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\">\r\n          <mat-icon>format_align_justify</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\">\r\n          <mat-icon>format_list_bulleted</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\">\r\n          <mat-icon>format_list_numbered</mat-icon>\r\n        </button>\r\n\r\n\r\n\r\n        <button color=\"secondary\" aria-label=\"Insert Image\" type=\"button\" style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\">\r\n          <input\r\n            type=\"file\"\r\n            (change)=\"insertImageToEditor($event)\"\r\n            style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n            aria-hidden=\"true\"\r\n          />\r\n\r\n          <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon>\r\n        </button>\r\n\r\n\r\n        <button (click)=\"openTableDialog($event)\" type=\"button\" color=\"secondary\" aria-label=\"Choose table rows and columns\">\r\n          <mat-icon>border_all</mat-icon>\r\n        </button>\r\n\r\n        <button class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" color=\"secondary\" aria-label=\"Make Header\">\r\n          <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n            page_header\r\n          </span>\r\n        </button>\r\n\r\n\r\n\r\n  </div>\r\n\r\n  <!-- Editable Area -->\r\n   <!-- (keypress)=\"onContentChange()\" need to be included -->\r\n  <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor  (input)=\"submitContent()\" (blur)=\"onBlur()\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\" >\r\n      <!-- Your content goes here -->\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- <button mat-stroked-button class=\"submit\" (click)=\"submitContent()\">Submit</button> -->\r\n\r\n\r\n<ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n<h2 mat-dialog-title>Choose Table Size</h2>\r\n<mat-dialog-content>\r\n  <div class=\"grid-container\">\r\n    <div\r\n      *ngFor=\"let cell of grid; let i = index\"\r\n      [ngClass]=\"{\r\n        'grid-item': true,\r\n        'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n      }\"\r\n      (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n      (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"\r\n    ></div>\r\n  </div>\r\n  <p>{{ rows }} x {{ cols }} </p>\r\n</mat-dialog-content>\r\n</ng-template>\r\n\r\n<!-- <div>\r\n  <input class=\"mt-2\" type=\"file\" placeholder=\"Upload your images here...\" (change)=\"insertImage($event)\" accept=\"image/png,image/*\" multiple  />\r\n  <div class=\"uploaded-images\" *ngIf=\"uploadedImages.length > 0\">\r\n    <div *ngFor=\"let imageUrl of uploadedImages; let i = index\" class=\"image-preview\">\r\n      <img [src]=\"imageUrl\" alt=\"Uploaded Image\"\r\n          draggable=\"true\"  width=\"100px\" height=\"100px\"\r\n          (dragstart)=\"drag($event, imageUrl)\" />\r\n      <mat-icon style=\"color: red;\r\n      position: absolute\" (click)=\"removeImage(i)\">cancel</mat-icon>\r\n\r\n    </div>\r\n  </div>\r\n</div> -->\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri!important;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%;border-collapse:collapse;margin:5px}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-16{font-size:16px}.fs-18{font-size:18px}.fs-20{font-size:20px}.fs-24{font-size:24px}.fs-28{font-size:28px}.editor h1{font-size:32px;font-weight:700;margin:0}.editor h2{font-size:28px;font-weight:700;margin:0}.editor h3{font-size:24px;font-weight:700;margin:0}.editor h4{font-size:20px;font-weight:700;margin:0}.editor h5{font-size:18px;font-weight:600;margin:0}.editor h6{font-size:16px;font-weight:600;margin:0}.editor p{font-size:14px;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:150px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}mat-icon{font-size:20px;color:inherit}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.submit{margin-top:10px;width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.submit:hover{border:none;background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    ], viewQueries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true, static: true }, { propertyName: "tableDialog", first: true, predicate: ["tableDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"dimension\">\r\n  <div class=\"rich-text-editor\">\r\n    <!-- Toolbar -->\r\n    <div class=\"toolbar\">\r\n      <select class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n        <option value=\"P\" style=\"font-size: 14px;\">Paragraph</option>\r\n        <option value=\"H1\" style=\"font-size: 32px; font-weight: bold;\">H1</option>\r\n        <option value=\"H2\" style=\"font-size: 28px; font-weight: bold;\">H2</option>\r\n        <option value=\"H3\" style=\"font-size: 24px; font-weight: bold;\">H3</option>\r\n        <option value=\"H4\" style=\"font-size: 20px; font-weight: bold;\">H4</option>\r\n        <option value=\"H5\" style=\"font-size: 18px; font-weight: 600;\">H5</option>\r\n        <option value=\"H6\" style=\"font-size: 16px; font-weight: 600;\">H6</option>\r\n      </select>\r\n      <select class=\"select-wrapper\" (change)=\"onChange(null)\" [(ngModel)]=\"selectedFont\"\r\n        (change)=\"setFontSize($event)\">\r\n        <option style=\"font-size: 12px;\" value=\"12\">12px</option>\r\n        <option style=\"font-size: 14px;\" value=\"14\" selected>14px</option>\r\n        <option style=\"font-size: 16px;\" value=\"16\">16px</option>\r\n        <option style=\"font-size: 18px;\" value=\"18\">18px</option>\r\n        <option style=\"font-size: 24px;\" value=\"24\">24px</option>\r\n        <option style=\"font-size: 32px;\" value=\"32\">32px</option>\r\n        <option style=\"font-size: 48px;\" value=\"48\">48px</option>\r\n      </select>\r\n      <button (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\">\r\n        <mat-icon>format_bold</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\">\r\n        <mat-icon>format_italic</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\">\r\n        <mat-icon>format_underline</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\">\r\n        <mat-icon>strikethrough_s</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\">\r\n        <mat-icon>format_align_left</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\">\r\n        <mat-icon>format_align_center</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\">\r\n        <mat-icon>format_align_right</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\">\r\n        <mat-icon>format_align_justify</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\">\r\n        <mat-icon>format_list_bulleted</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\">\r\n        <mat-icon>format_list_numbered</mat-icon>\r\n      </button>\r\n      <button color=\"secondary\" aria-label=\"Insert Image\" type=\"button\"\r\n        style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\">\r\n        <input type=\"file\" (change)=\"insertImageToEditor($event)\"\r\n          style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n          aria-hidden=\"true\" />\r\n        <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon>\r\n      </button>\r\n      <button (click)=\"openTableDialog($event)\" type=\"button\" color=\"secondary\"\r\n        aria-label=\"Choose table rows and columns\">\r\n        <mat-icon>border_all</mat-icon>\r\n      </button>\r\n\r\n      <button class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" color=\"secondary\" aria-label=\"Make Header\">\r\n        <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n          page_header\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor (input)=\"submitContent()\" (blur)=\"onBlur()\"\r\n      (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\r\n    </div>\r\n  </div>\r\n  <ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n    <h2 mat-dialog-title>Choose Table Size</h2>\r\n    <mat-dialog-content>\r\n      <div class=\"grid-container\">\r\n        <div *ngFor=\"let cell of grid; let i = index\" [ngClass]=\"{\r\n        'grid-item': true,\r\n        'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n      }\" (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n          (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"></div>\r\n      </div>\r\n      <p>{{ rows }} x {{ cols }} </p>\r\n    </mat-dialog-content>\r\n  </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri!important;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%;border-collapse:collapse;margin:5px}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-16{font-size:16px}.fs-18{font-size:18px}.fs-20{font-size:20px}.fs-24{font-size:24px}.fs-28{font-size:28px}.editor h1{font-size:32px;font-weight:700;margin:0}.editor h2{font-size:28px;font-weight:700;margin:0}.editor h3{font-size:24px;font-weight:700;margin:0}.editor h4{font-size:20px;font-weight:700;margin:0}.editor h5{font-size:18px;font-weight:600;margin:0}.editor h6{font-size:16px;font-weight:600;margin:0}.editor p{font-size:14px;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:70px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}mat-icon{font-size:20px;color:inherit}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.submit{margin-top:10px;width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.submit:hover{border:none;background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'rapid-text-editor', providers: [
@@ -669,7 +623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             useExisting: forwardRef(() => RapidTextEditorComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"dimension\">\r\n\r\n\r\n<div class=\"rich-text-editor\">\r\n  <!-- Toolbar -->\r\n  <div class=\"toolbar\">\r\n\r\n        <select class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n          <option value=\"P\" style=\"font-size: 14px;\">Paragraph</option>\r\n          <option value=\"H1\" style=\"font-size: 32px; font-weight: bold;\">H1</option>\r\n          <option value=\"H2\" style=\"font-size: 28px; font-weight: bold;\">H2</option>\r\n          <option value=\"H3\" style=\"font-size: 24px; font-weight: bold;\">H3</option>\r\n          <option value=\"H4\" style=\"font-size: 20px; font-weight: bold;\">H4</option>\r\n          <option value=\"H5\" style=\"font-size: 18px; font-weight: 600;\">H5</option>\r\n          <option value=\"H6\" style=\"font-size: 16px; font-weight: 600;\">H6</option>\r\n        </select>\r\n\r\n\r\n        <select class=\"select-wrapper\" (change)=\"onChange(null)\" [(ngModel)]=\"selectedFont\" (change)=\"setFontSize($event)\">\r\n          <option value=\"12\">12px</option>\r\n          <option value=\"13\">13px</option>\r\n          <option value=\"14\" selected>14px</option>\r\n          <option value=\"16\">16px</option>\r\n          <option value=\"18\">18px</option>\r\n          <option value=\"20\">20px</option>\r\n          <option value=\"24\">24px</option>\r\n          <option value=\"28\">28px</option>\r\n        </select>\r\n\r\n\r\n        <button (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\">\r\n          <mat-icon>format_bold</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\">\r\n          <mat-icon>format_italic</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\">\r\n          <mat-icon>format_underline</mat-icon>\r\n        </button>\r\n\r\n        <button  (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\">\r\n          <mat-icon>strikethrough_s</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\">\r\n          <mat-icon>format_align_left</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\">\r\n          <mat-icon>format_align_center</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\">\r\n          <mat-icon>format_align_right</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\">\r\n          <mat-icon>format_align_justify</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\">\r\n          <mat-icon>format_list_bulleted</mat-icon>\r\n        </button>\r\n\r\n        <button (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\">\r\n          <mat-icon>format_list_numbered</mat-icon>\r\n        </button>\r\n\r\n\r\n\r\n        <button color=\"secondary\" aria-label=\"Insert Image\" type=\"button\" style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\">\r\n          <input\r\n            type=\"file\"\r\n            (change)=\"insertImageToEditor($event)\"\r\n            style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n            aria-hidden=\"true\"\r\n          />\r\n\r\n          <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon>\r\n        </button>\r\n\r\n\r\n        <button (click)=\"openTableDialog($event)\" type=\"button\" color=\"secondary\" aria-label=\"Choose table rows and columns\">\r\n          <mat-icon>border_all</mat-icon>\r\n        </button>\r\n\r\n        <button class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" color=\"secondary\" aria-label=\"Make Header\">\r\n          <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n            page_header\r\n          </span>\r\n        </button>\r\n\r\n\r\n\r\n  </div>\r\n\r\n  <!-- Editable Area -->\r\n   <!-- (keypress)=\"onContentChange()\" need to be included -->\r\n  <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor  (input)=\"submitContent()\" (blur)=\"onBlur()\" (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\" >\r\n      <!-- Your content goes here -->\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- <button mat-stroked-button class=\"submit\" (click)=\"submitContent()\">Submit</button> -->\r\n\r\n\r\n<ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n<h2 mat-dialog-title>Choose Table Size</h2>\r\n<mat-dialog-content>\r\n  <div class=\"grid-container\">\r\n    <div\r\n      *ngFor=\"let cell of grid; let i = index\"\r\n      [ngClass]=\"{\r\n        'grid-item': true,\r\n        'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n      }\"\r\n      (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n      (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"\r\n    ></div>\r\n  </div>\r\n  <p>{{ rows }} x {{ cols }} </p>\r\n</mat-dialog-content>\r\n</ng-template>\r\n\r\n<!-- <div>\r\n  <input class=\"mt-2\" type=\"file\" placeholder=\"Upload your images here...\" (change)=\"insertImage($event)\" accept=\"image/png,image/*\" multiple  />\r\n  <div class=\"uploaded-images\" *ngIf=\"uploadedImages.length > 0\">\r\n    <div *ngFor=\"let imageUrl of uploadedImages; let i = index\" class=\"image-preview\">\r\n      <img [src]=\"imageUrl\" alt=\"Uploaded Image\"\r\n          draggable=\"true\"  width=\"100px\" height=\"100px\"\r\n          (dragstart)=\"drag($event, imageUrl)\" />\r\n      <mat-icon style=\"color: red;\r\n      position: absolute\" (click)=\"removeImage(i)\">cancel</mat-icon>\r\n\r\n    </div>\r\n  </div>\r\n</div> -->\r\n\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri!important;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%;border-collapse:collapse;margin:5px}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-16{font-size:16px}.fs-18{font-size:18px}.fs-20{font-size:20px}.fs-24{font-size:24px}.fs-28{font-size:28px}.editor h1{font-size:32px;font-weight:700;margin:0}.editor h2{font-size:28px;font-weight:700;margin:0}.editor h3{font-size:24px;font-weight:700;margin:0}.editor h4{font-size:20px;font-weight:700;margin:0}.editor h5{font-size:18px;font-weight:600;margin:0}.editor h6{font-size:16px;font-weight:600;margin:0}.editor p{font-size:14px;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:150px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}mat-icon{font-size:20px;color:inherit}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.submit{margin-top:10px;width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.submit:hover{border:none;background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}\n"] }]
+                    ], template: "<div class=\"dimension\">\r\n  <div class=\"rich-text-editor\">\r\n    <!-- Toolbar -->\r\n    <div class=\"toolbar\">\r\n      <select class=\"select-wrapper\" [(ngModel)]=\"selectedHead\" (change)=\"setHeading($event)\">\r\n        <option value=\"P\" style=\"font-size: 14px;\">Paragraph</option>\r\n        <option value=\"H1\" style=\"font-size: 32px; font-weight: bold;\">H1</option>\r\n        <option value=\"H2\" style=\"font-size: 28px; font-weight: bold;\">H2</option>\r\n        <option value=\"H3\" style=\"font-size: 24px; font-weight: bold;\">H3</option>\r\n        <option value=\"H4\" style=\"font-size: 20px; font-weight: bold;\">H4</option>\r\n        <option value=\"H5\" style=\"font-size: 18px; font-weight: 600;\">H5</option>\r\n        <option value=\"H6\" style=\"font-size: 16px; font-weight: 600;\">H6</option>\r\n      </select>\r\n      <select class=\"select-wrapper\" (change)=\"onChange(null)\" [(ngModel)]=\"selectedFont\"\r\n        (change)=\"setFontSize($event)\">\r\n        <option style=\"font-size: 12px;\" value=\"12\">12px</option>\r\n        <option style=\"font-size: 14px;\" value=\"14\" selected>14px</option>\r\n        <option style=\"font-size: 16px;\" value=\"16\">16px</option>\r\n        <option style=\"font-size: 18px;\" value=\"18\">18px</option>\r\n        <option style=\"font-size: 24px;\" value=\"24\">24px</option>\r\n        <option style=\"font-size: 32px;\" value=\"32\">32px</option>\r\n        <option style=\"font-size: 48px;\" value=\"48\">48px</option>\r\n      </select>\r\n      <button (click)=\"format('bold')\" type=\"button\" aria-label=\"Bold\">\r\n        <mat-icon>format_bold</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('italic')\" type=\"button\" aria-label=\"Italic\">\r\n        <mat-icon>format_italic</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('underline')\" type=\"button\" aria-label=\"Underline\">\r\n        <mat-icon>format_underline</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('strikethrough')\" type=\"button\" aria-label=\"Strikethrough\">\r\n        <mat-icon>strikethrough_s</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('justifyLeft')\" type=\"button\" aria-label=\"Align Left\">\r\n        <mat-icon>format_align_left</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('justifyCenter')\" type=\"button\" aria-label=\"Center\">\r\n        <mat-icon>format_align_center</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('justifyRight')\" type=\"button\" aria-label=\"Align Right\">\r\n        <mat-icon>format_align_right</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('justifyFull')\" type=\"button\" aria-label=\"Justify\">\r\n        <mat-icon>format_align_justify</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('insertUnorderedList')\" type=\"button\" aria-label=\"Unordered List\">\r\n        <mat-icon>format_list_bulleted</mat-icon>\r\n      </button>\r\n\r\n      <button (click)=\"format('insertOrderedList')\" type=\"button\" aria-label=\"Ordered List\">\r\n        <mat-icon>format_list_numbered</mat-icon>\r\n      </button>\r\n      <button color=\"secondary\" aria-label=\"Insert Image\" type=\"button\"\r\n        style=\"position: relative; display: inline-flex; align-items: center; justify-content: center;\">\r\n        <input type=\"file\" (change)=\"insertImageToEditor($event)\"\r\n          style=\"position: absolute; left: -50%; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;\"\r\n          aria-hidden=\"true\" />\r\n        <mat-icon style=\"pointer-events: none;\">insert_photo_outlined</mat-icon>\r\n      </button>\r\n      <button (click)=\"openTableDialog($event)\" type=\"button\" color=\"secondary\"\r\n        aria-label=\"Choose table rows and columns\">\r\n        <mat-icon>border_all</mat-icon>\r\n      </button>\r\n\r\n      <button class=\"mb-1\" (click)=\"makeFirstRowHeader()\" type=\"button\" color=\"secondary\" aria-label=\"Make Header\">\r\n        <span style=\"font-size: 20px;\" class=\"material-symbols-outlined\">\r\n          page_header\r\n        </span>\r\n      </button>\r\n    </div>\r\n    <div class=\"editor\" id=\"editor\" contenteditable=\"true\" #editor (input)=\"submitContent()\" (blur)=\"onBlur()\"\r\n      (drop)=\"drop($event)\" (dragover)=\"allowDrop($event)\">\r\n    </div>\r\n  </div>\r\n  <ng-template #tableDialog let-dialogRef=\"dialogRef\">\r\n    <h2 mat-dialog-title>Choose Table Size</h2>\r\n    <mat-dialog-content>\r\n      <div class=\"grid-container\">\r\n        <div *ngFor=\"let cell of grid; let i = index\" [ngClass]=\"{\r\n        'grid-item': true,\r\n        'highlighted': i % 7 < cols && Math.floor(i / 7) < rows\r\n      }\" (mouseenter)=\"updatePreview(i % 7 + 1, Math.floor(i / 7) + 1)\"\r\n          (click)=\"updateSelection(i % 7 + 1, Math.floor(i / 7) + 1, dialogRef)\"></div>\r\n      </div>\r\n      <p>{{ rows }} x {{ cols }} </p>\r\n    </mat-dialog-content>\r\n  </ng-template>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.rich-text-editor{border:1px solid #ccc;border-radius:5px;font-family:Calibri}::ng-deep .editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri!important;outline:none!important;font-size:14px}::ng-deep .editor table{width:100%;border-collapse:collapse;margin:5px}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}.fs-16{font-size:16px}.fs-18{font-size:18px}.fs-20{font-size:20px}.fs-24{font-size:24px}.fs-28{font-size:28px}.editor h1{font-size:32px;font-weight:700;margin:0}.editor h2{font-size:28px;font-weight:700;margin:0}.editor h3{font-size:24px;font-weight:700;margin:0}.editor h4{font-size:20px;font-weight:700;margin:0}.editor h5{font-size:18px;font-weight:600;margin:0}.editor h6{font-size:16px;font-weight:600;margin:0}.editor p{font-size:14px;font-weight:400;margin:0}button{width:20px;height:20px;background:none;border:none;margin-left:5px;cursor:pointer}button[mat-icon-button]{margin:0 4px;width:20px!important;height:20px;background:none;border:none}.small-icon-button{width:30px;height:30px;padding:4px}.small-icon-button mat-icon{font-size:16px}button[mat-icon-button]{position:relative;overflow:hidden}input[type=file]{padding:5px;cursor:pointer;margin-left:10px}.fileInput{display:flex;justify-content:center;align-items:center}.select-wrapper{display:inline-block;position:relative;width:70px}.select-wrapper select{appearance:none;width:100%;padding:10px 40px 10px 15px;font-size:16px;color:#333;background-color:#f4f4f4;border:1px solid #ddd;cursor:pointer;outline:none}.select-wrapper:after{content:\"\\25bc\";position:absolute;top:50%;right:15px;transform:translateY(-50%);pointer-events:none;color:#777;font-size:12px}.select-wrapper select:hover{background-color:#e9e9e9;border-color:#bbb}.select-wrapper select:focus{border-color:#007bff;background-color:#fff}.select-wrapper option{padding:8px;font-size:16px;color:#333;background-color:#fff}.toolbar{display:flex;flex-wrap:wrap;align-items:center;background-color:#f4f4f4;padding:10px;border-radius:8px;box-shadow:0 2px 8px #0000001a;gap:10px}.select-wrapper{padding:8px;font-size:14px;border:1px solid #ddd;cursor:pointer;background-color:#fff}.select-wrapper:focus{outline:none;border-color:#007bff}button{border:none;border-radius:5px;padding:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}button:hover{color:#007bff}mat-icon{font-size:20px;color:inherit}input[type=number]{width:60px;padding:5px;font-size:14px;border:1px solid #ddd;border-radius:5px;text-align:center}input[type=file]{border:1px solid #ddd;border-radius:5px;padding:5px;font-size:14px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#007bff}.table{width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.table:hover{background-color:#0056b3;color:#fff!important}.submit{margin-top:10px;width:100px;height:30px;color:#007bff!important;font-weight:700;border:1px solid #007bff}.submit:hover{border:none;background-color:#0056b3;color:#fff!important}.custom-dialog-container{width:auto;max-width:200px}.grid-container{display:grid;grid-template-columns:repeat(7,20px);grid-gap:5px;gap:5px}.grid-item{width:20px;height:20px;border:1px solid #ddd}.highlighted{background-color:#2196f3}div[contenteditable=false]{display:inline-block;position:relative;resize:both;overflow:hidden;border:1px dashed #ccc;margin:5px}div[contenteditable=false]:hover{border-color:#007bff}div[contenteditable=false] img{display:block;width:100%;height:auto}.uploaded-images{display:flex;flex-wrap:wrap;margin-bottom:20px}.image-preview{margin:10px;padding:5px;border:1px dashed #ccc;cursor:pointer}.image-preview img{max-width:100px;max-height:100px;object-fit:cover}.editor{border:1px solid #ccc;min-height:300px;padding:20px;position:relative}.remove_btn{position:relative;top:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { contentCapture: [{
                 type: Input
             }], height: [{