rapid-text-editor 1.0.10 → 1.0.12

package/fesm2020/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,99 @@ class RapidTextEditorComponent {
     onBlur() {
         this.onTouched();
     }
-    format(command) {
-        document.execCommand(command, false, '');
+    setFontSize(event) {
+        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 = 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);
+        }
     }
     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,9 +215,9 @@ class RapidTextEditorComponent {
     // Handle drop event in the editor
     drop(event) {
         event.preventDefault();
-        // const imageUrl = event.dataTransfer?.getData("text"); 
+        // const imageUrl = event.dataTransfer?.getData("text");
         // if (imageUrl) {
-        //   this.insertImageInEditor(imageUrl); 
+        //   this.insertImageInEditor(imageUrl);
         // }
     }
     // insertImage(event: any): void {
@@ -298,7 +392,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);
     // }
@@ -417,7 +511,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
@@ -425,7 +518,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
@@ -460,7 +552,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;
@@ -484,11 +575,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>';
@@ -569,7 +660,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()\" (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"] }] });
+    ], 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: 'rapid-text-editor', providers: [
@@ -578,7 +669,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()\" (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: [{
@@ -601,12 +692,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,
@@ -618,7 +711,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CommonModule,
                         MatIconModule,
                         MatButtonModule,
-                        MatDialogModule
+                        MatDialogModule,
+                        FormsModule, ReactiveFormsModule
                     ],
                     exports: [
                         RapidTextEditorComponent