rapid-text-editor 1.0.9 → 1.0.11

package/esm2020/lib/rapid-text-editor.module.mjs

@@ -5,6 +5,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i0 from "@angular/core";
 export class RapidTextEditorModule {
 }
@@ -12,12 +13,14 @@ RapidTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 RapidTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorModule, declarations: [RapidTextEditorComponent], imports: [CommonModule,
         MatIconModule,
         MatButtonModule,
-        MatDialogModule], exports: [RapidTextEditorComponent] });
+        MatDialogModule,
+        FormsModule, ReactiveFormsModule], exports: [RapidTextEditorComponent] });
 RapidTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorModule, imports: [[
             CommonModule,
             MatIconModule,
             MatButtonModule,
-            MatDialogModule
+            MatDialogModule,
+            FormsModule, ReactiveFormsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorModule, decorators: [{
             type: NgModule,
@@ -29,11 +32,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CommonModule,
                         MatIconModule,
                         MatButtonModule,
-                        MatDialogModule
+                        MatDialogModule,
+                        FormsModule, ReactiveFormsModule
                     ],
                     exports: [
                         RapidTextEditorComponent
                     ]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFwaWQtdGV4dC1lZGl0b3IubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvcmFwaWQtdGV4dC1lZGl0b3Ivc3JjL2xpYi9yYXBpZC10ZXh0LWVkaXRvci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUV6RSxhQUFhO0FBQ2IsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQWdCL0MsTUFBTSxPQUFPLHFCQUFxQjs7bUhBQXJCLHFCQUFxQjtvSEFBckIscUJBQXFCLGlCQVo5Qix3QkFBd0IsYUFHeEIsWUFBWTtRQUNaLGFBQWE7UUFDYixlQUFlO1FBQ2YsZUFBZSxhQUdmLHdCQUF3QjtvSEFHZixxQkFBcUIsWUFWdkI7WUFDUCxZQUFZO1lBQ1osYUFBYTtZQUNiLGVBQWU7WUFDZixlQUFlO1NBQ2hCOzRGQUtVLHFCQUFxQjtrQkFkakMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osd0JBQXdCO3FCQUN6QjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsWUFBWTt3QkFDWixhQUFhO3dCQUNiLGVBQWU7d0JBQ2YsZUFBZTtxQkFDaEI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLHdCQUF3QjtxQkFDekI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBSYXBpZFRleHRFZGl0b3JDb21wb25lbnQgfSBmcm9tICcuL3JhcGlkLXRleHQtZWRpdG9yLmNvbXBvbmVudCc7XHJcblxyXG4vL01hdCBNb2R1bGVzXHJcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcclxuaW1wb3J0IHsgTWF0QnV0dG9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uJztcclxuaW1wb3J0IHsgTWF0RGlhbG9nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgZGVjbGFyYXRpb25zOiBbXHJcbiAgICBSYXBpZFRleHRFZGl0b3JDb21wb25lbnRcclxuICBdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICAgIE1hdEljb25Nb2R1bGUsXHJcbiAgICBNYXRCdXR0b25Nb2R1bGUsXHJcbiAgICBNYXREaWFsb2dNb2R1bGVcclxuICBdLFxyXG4gIGV4cG9ydHM6IFtcclxuICAgIFJhcGlkVGV4dEVkaXRvckNvbXBvbmVudFxyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIFJhcGlkVGV4dEVkaXRvck1vZHVsZSB7IH1cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFwaWQtdGV4dC1lZGl0b3IubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvcmFwaWQtdGV4dC1lZGl0b3Ivc3JjL2xpYi9yYXBpZC10ZXh0LWVkaXRvci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUV6RSxhQUFhO0FBQ2IsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUMzRCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDM0QsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxXQUFXLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFpQmxFLE1BQU0sT0FBTyxxQkFBcUI7O21IQUFyQixxQkFBcUI7b0hBQXJCLHFCQUFxQixpQkFiOUIsd0JBQXdCLGFBR3hCLFlBQVk7UUFDWixhQUFhO1FBQ2IsZUFBZTtRQUNmLGVBQWU7UUFDZixXQUFXLEVBQUUsbUJBQW1CLGFBR2hDLHdCQUF3QjtvSEFHZixxQkFBcUIsWUFYdkI7WUFDUCxZQUFZO1lBQ1osYUFBYTtZQUNiLGVBQWU7WUFDZixlQUFlO1lBQ2YsV0FBVyxFQUFFLG1CQUFtQjtTQUNqQzs0RkFLVSxxQkFBcUI7a0JBZmpDLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLHdCQUF3QjtxQkFDekI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7d0JBQ1osYUFBYTt3QkFDYixlQUFlO3dCQUNmLGVBQWU7d0JBQ2YsV0FBVyxFQUFFLG1CQUFtQjtxQkFDakM7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLHdCQUF3QjtxQkFDekI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBSYXBpZFRleHRFZGl0b3JDb21wb25lbnQgfSBmcm9tICcuL3JhcGlkLXRleHQtZWRpdG9yLmNvbXBvbmVudCc7XHJcblxyXG4vL01hdCBNb2R1bGVzXHJcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcclxuaW1wb3J0IHsgTWF0QnV0dG9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uJztcclxuaW1wb3J0IHsgTWF0RGlhbG9nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgRm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgUmFwaWRUZXh0RWRpdG9yQ29tcG9uZW50XHJcbiAgXSxcclxuICBpbXBvcnRzOiBbXHJcbiAgICBDb21tb25Nb2R1bGUsXHJcbiAgICBNYXRJY29uTW9kdWxlLFxyXG4gICAgTWF0QnV0dG9uTW9kdWxlLFxyXG4gICAgTWF0RGlhbG9nTW9kdWxlLFxyXG4gICAgRm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGVcclxuICBdLFxyXG4gIGV4cG9ydHM6IFtcclxuICAgIFJhcGlkVGV4dEVkaXRvckNvbXBvbmVudFxyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIFJhcGlkVGV4dEVkaXRvck1vZHVsZSB7IH1cclxuIl19

package/fesm2015/rapid-text-editor.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, forwardRef, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i3 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 
@@ -38,7 +39,17 @@ class RapidTextEditorComponent {
         this.Math = Math;
         this.uploadedImages = [];
         //Two Way Data Binding Functionality
-        this.onChange = (content) => { };
+        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';
+            }
+        };
         this.onTouched = () => { };
         console.log('Build -1');
     }
@@ -103,16 +114,100 @@ class RapidTextEditorComponent {
     onBlur() {
         this.onTouched();
     }
-    format(command) {
-        document.execCommand(command, false, '');
+    setFontSize(event) {
+        var _a;
+        const select = event.target;
+        const size = select.value;
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        // If inside an existing span, update it
+        const parent = (_a = selection.anchorNode) === null || _a === void 0 ? void 0 : _a.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);
+        }
     }
     setHeading(event) {
-        const value = event.target.value;
-        document.execCommand('formatBlock', false, value);
+        const select = event.target;
+        const tag = select.value;
+        const selection = window.getSelection();
+        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';
+                newElem.style.fontWeight = 'bold';
+                break;
+            case 'H2':
+                newElem.style.fontSize = '28px';
+                newElem.style.fontWeight = 'bold';
+                break;
+            case 'H3':
+                newElem.style.fontSize = '24px';
+                newElem.style.fontWeight = 'bold';
+                break;
+            case 'H4':
+                newElem.style.fontSize = '20px';
+                newElem.style.fontWeight = 'bold';
+                break;
+            case 'H5':
+                newElem.style.fontSize = '18px';
+                newElem.style.fontWeight = '600';
+                break;
+            case 'H6':
+                newElem.style.fontSize = '16px';
+                newElem.style.fontWeight = '600';
+                break;
+            case 'P':
+            default:
+                newElem.style.fontSize = '14px';
+                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;
+        }
+        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) {
+        document.execCommand(command, false, '');
     }
     //Image Section
     allowDrop(event) {
-        event.preventDefault();
+        //event.preventDefault();
     }
     // Handle image drag start
     drag(event, imageUrl) {
@@ -121,12 +216,11 @@ class RapidTextEditorComponent {
     }
     // Handle drop event in the editor
     drop(event) {
-        var _a;
         event.preventDefault();
-        const imageUrl = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.getData("text");
-        if (imageUrl) {
-            this.insertImageInEditor(imageUrl);
-        }
+        // const imageUrl = event.dataTransfer?.getData("text");
+        // if (imageUrl) {
+        //   this.insertImageInEditor(imageUrl);
+        // }
     }
     // insertImage(event: any): void {
     //   const files: FileList = event.target.files;
@@ -300,7 +394,7 @@ class RapidTextEditorComponent {
     //   img.src = imageUrl;
     //   img.style.maxWidth = '100%';
     //   img.style.display = 'block';
-    //   img.style.width = '300px'; 
+    //   img.style.width = '300px';
     //   img.style.height = 'auto';
     //   editor.appendChild(img);
     // }
@@ -419,7 +513,6 @@ class RapidTextEditorComponent {
         const selection = window.getSelection();
         // Check if selection is inside the editor
         if (!this.isSelectionInsideEditor(editor, selection)) {
-            alert('Please place the cursor inside the table to make the first row a header.');
             return;
         }
         // Find the closest table to the selection
@@ -427,7 +520,6 @@ class RapidTextEditorComponent {
         const selectedNode = range.startContainer;
         const table = this.findClosestTable(selectedNode);
         if (!table) {
-            alert('No table found near the cursor.');
             return;
         }
         // Convert the first row cells to header cells
@@ -462,7 +554,6 @@ class RapidTextEditorComponent {
         const rowCount = parseInt(rows, 10);
         const colCount = parseInt(cols, 10);
         if (isNaN(rowCount) || isNaN(colCount) || rowCount < 1 || colCount < 1) {
-            alert('Please enter valid numbers for rows and columns.');
             return;
         }
         const editor = this.editor.nativeElement;
@@ -486,11 +577,11 @@ class RapidTextEditorComponent {
     }
     // Helper function: Create table HTML
     createTableHTML(rowCount, colCount) {
-        let tableHTML = '<table border="1" style="border-collapse: collapse; margin:5px">';
+        let tableHTML = '<table border="1" style="">';
         for (let i = 0; i < rowCount; i++) {
             tableHTML += '<tr>';
             for (let j = 0; j < colCount; j++) {
-                tableHTML += `<td style="font-size: 14px; min-width: 1.5em; height: 2em; padding: .4em; border: 1px solid black" 
+                tableHTML += `<td style="font-size: 14px; min-width: 1.5em; height: 2em; padding: .4em; border: 1px solid black"
                         role="textbox" contenteditable="true"></td>`;
             }
             tableHTML += '</tr>';
@@ -571,7 +662,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\" (change)=\"setHeading($event)\">\r\n              <option value=\"P\">Paragraph</option>\r\n              <option value=\"H1\">H1</option>\r\n              <option value=\"H2\">H2</option>\r\n              <option value=\"H3\">H3</option>\r\n              <option value=\"H4\">H4</option>\r\n              <option value=\"H5\">H5</option>\r\n              <option value=\"H6\">H6</option>\r\n          </select>\r\n            <button  (click)=\"format('bold')\" aria-label=\"Bold\">\r\n              <mat-icon>format_bold</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('italic')\" aria-label=\"Italic\">\r\n              <mat-icon>format_italic</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('underline')\" aria-label=\"Underline\">\r\n              <mat-icon>format_underline</mat-icon>\r\n            </button>\r\n            \r\n            <button  (click)=\"format('strikethrough')\" aria-label=\"Strikethrough\">\r\n              <mat-icon>strikethrough_s</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('justifyLeft')\" aria-label=\"Align Left\">\r\n              <mat-icon>format_align_left</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('justifyCenter')\" aria-label=\"Center\">\r\n              <mat-icon>format_align_center</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('justifyRight')\" aria-label=\"Align Right\">\r\n              <mat-icon>format_align_right</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('justifyFull')\" aria-label=\"Justify\">\r\n              <mat-icon>format_align_justify</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('insertUnorderedList')\" aria-label=\"Unordered List\">\r\n              <mat-icon>format_list_bulleted</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('insertOrderedList')\" 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\" 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)\" 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()\" 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}.editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}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;border-radius:5px;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;border-radius:5px;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}button:active{background-color:#0056b3}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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-rich-text-editor', providers: [
@@ -580,7 +671,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\" (change)=\"setHeading($event)\">\r\n              <option value=\"P\">Paragraph</option>\r\n              <option value=\"H1\">H1</option>\r\n              <option value=\"H2\">H2</option>\r\n              <option value=\"H3\">H3</option>\r\n              <option value=\"H4\">H4</option>\r\n              <option value=\"H5\">H5</option>\r\n              <option value=\"H6\">H6</option>\r\n          </select>\r\n            <button  (click)=\"format('bold')\" aria-label=\"Bold\">\r\n              <mat-icon>format_bold</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('italic')\" aria-label=\"Italic\">\r\n              <mat-icon>format_italic</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('underline')\" aria-label=\"Underline\">\r\n              <mat-icon>format_underline</mat-icon>\r\n            </button>\r\n            \r\n            <button  (click)=\"format('strikethrough')\" aria-label=\"Strikethrough\">\r\n              <mat-icon>strikethrough_s</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('justifyLeft')\" aria-label=\"Align Left\">\r\n              <mat-icon>format_align_left</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('justifyCenter')\" aria-label=\"Center\">\r\n              <mat-icon>format_align_center</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('justifyRight')\" aria-label=\"Align Right\">\r\n              <mat-icon>format_align_right</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('justifyFull')\" aria-label=\"Justify\">\r\n              <mat-icon>format_align_justify</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('insertUnorderedList')\" aria-label=\"Unordered List\">\r\n              <mat-icon>format_list_bulleted</mat-icon>\r\n            </button>\r\n            \r\n            <button (click)=\"format('insertOrderedList')\" 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\" 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)\" 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()\" 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}.editor{position:relative;min-height:300px;border:1px solid #ccc;padding:5px;overflow-y:auto;font-family:Calibri;outline:none!important;font-size:14px}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;border-radius:5px;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;border-radius:5px;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}button:active{background-color:#0056b3}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\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"] }]
         }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { contentCapture: [{
                 type: Input
             }], height: [{
@@ -603,12 +694,14 @@ RapidTextEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 RapidTextEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorModule, declarations: [RapidTextEditorComponent], imports: [CommonModule,
         MatIconModule,
         MatButtonModule,
-        MatDialogModule], exports: [RapidTextEditorComponent] });
+        MatDialogModule,
+        FormsModule, ReactiveFormsModule], exports: [RapidTextEditorComponent] });
 RapidTextEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorModule, imports: [[
             CommonModule,
             MatIconModule,
             MatButtonModule,
-            MatDialogModule
+            MatDialogModule,
+            FormsModule, ReactiveFormsModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RapidTextEditorModule, decorators: [{
             type: NgModule,
@@ -620,7 +713,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CommonModule,
                         MatIconModule,
                         MatButtonModule,
-                        MatDialogModule
+                        MatDialogModule,
+                        FormsModule, ReactiveFormsModule
                     ],
                     exports: [
                         RapidTextEditorComponent