npm - el-text-editor - Versions diffs - 0.0.90 → 0.0.91 - Mend

el-text-editor 0.0.90 → 0.0.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/esm2020/lib/el-text-editor.component.mjs +160 -11
package/fesm2015/el-text-editor.mjs +159 -10
package/fesm2015/el-text-editor.mjs.map +1 -1
package/fesm2020/el-text-editor.mjs +159 -10
package/fesm2020/el-text-editor.mjs.map +1 -1
package/lib/el-text-editor.component.d.ts +7 -0
package/package.json +1 -1

package/fesm2015/el-text-editor.mjs CHANGED Viewed

@@ -51,6 +51,8 @@ class ElTextEditorComponent {
         this.fonts = ['Arial', 'Courier New', 'Georgia', 'Times New Roman', 'Verdana'];
         this.fontSizes = [10, 12, 14, 16, 18, 20, 24, 28, 32, 36];
         this.selectedFont = 'Arial';
+        this.currentListLevel = 0; // Track the current list level
+        this.listStyles = ["decimal", "lower-alpha", "lower-roman"];
         this.selectedFontSize = 14;
         this.isTableSelected = false;
         this.tableAdded = false;
@@ -754,23 +756,170 @@ class ElTextEditorComponent {
     //     this.selectedImage = null;
     //   }
     // }
+    // format(command: string, value?: any) {
+    //   const editor = document.getElementById('editor');
+    //   if (editor) {
+    //     editor.focus();
+    //     if (command === 'subscript') {
+    //       this.isSubscriptActive = !this.isSubscriptActive;
+    //       document.execCommand('subscript', false, '');
+    //     } else if (command === 'superscript') {
+    //       this.isSuperscriptActive = !this.isSuperscriptActive;
+    //       document.execCommand('superscript', false, '');;
+    //     } else {
+    //       document.execCommand(command, false, value ?? '');
+    //       if (value) {
+    //         const tag = value.toLowerCase().replace(/[<>]/g, '')
+    //         this.selectedFormatBlock = this.formatBlockDecode(tag);
+    //       }
+    //     }
+    //   }
+    //    this.checkActiveStates();
+    //    this.checkFormatBlock();
+    // }
+    // Helper function to find the closest <li> element
+    getClosestListItem(node) {
+        while (node && node !== document) {
+            if (node.nodeName === "LI") {
+                return node;
+            }
+            node = node.parentNode;
+        }
+        return null;
+    }
+    // Get the current nesting level of a list item
+    getListItemLevel(listItem) {
+        let level = 0;
+        let parent = listItem.parentElement;
+        while (parent) {
+            if (parent.nodeName === "UL" || parent.nodeName === "OL") {
+                let grandparent = parent.parentElement;
+                if (grandparent && grandparent.nodeName === "LI") {
+                    level++;
+                    parent = grandparent.parentElement;
+                }
+                else {
+                    break;
+                }
+            }
+            else {
+                parent = parent.parentElement;
+            }
+        }
+        return level;
+    }
+    // Increase the list level (Tab key)
+    increaseListLevel(listItem) {
+        const currentLevel = this.getListItemLevel(listItem);
+        if (currentLevel >= this.listStyles.length - 1)
+            return;
+        const parentList = listItem.parentElement;
+        const previousSibling = listItem.previousElementSibling;
+        if (!parentList || !previousSibling)
+            return;
+        const isOrderedList = parentList.tagName === "OL";
+        let sublist = previousSibling.querySelector("ol, ul");
+        if (!sublist) {
+            sublist = document.createElement(isOrderedList ? "ol" : "ul");
+            previousSibling.appendChild(sublist);
+        }
+        // Apply appropriate list styles
+        if (isOrderedList) {
+            sublist.style.listStyleType = this.listStyles[currentLevel + 1]; // For Ordered list styles
+        }
+        else {
+            const unorderedStyles = ["disc", "square", "circle"]; //For Unordered list styles
+            sublist.style.listStyleType =
+                unorderedStyles[Math.min(currentLevel + 1, unorderedStyles.length - 1)];
+        }
+        sublist.appendChild(listItem);
+        if (isOrderedList) {
+            listItem.style.listStyleType = this.listStyles[currentLevel + 1];
+        }
+        else {
+            listItem.style.listStyleType = sublist.style.listStyleType;
+        }
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(listItem);
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    // Decrease the list level (Shift+Tab key)
+    decreaseListLevel(listItem) {
+        const currentLevel = this.getListItemLevel(listItem);
+        if (currentLevel === 0)
+            return;
+        const parentList = listItem.parentElement;
+        const grandparentListItem = parentList === null || parentList === void 0 ? void 0 : parentList.parentElement;
+        if (!parentList ||
+            !grandparentListItem ||
+            grandparentListItem.nodeName !== "LI") {
+            return;
+        }
+        const grandparentList = grandparentListItem.parentElement;
+        if (!grandparentList ||
+            (grandparentList.nodeName !== "UL" && grandparentList.nodeName !== "OL")) {
+            return;
+        }
+        grandparentList.insertBefore(listItem, grandparentListItem.nextElementSibling);
+        if (!parentList.querySelector("li")) {
+            grandparentListItem.removeChild(parentList);
+        }
+        const isOrderedList = grandparentList.nodeName === "OL";
+        const unorderedStyles = ["disc", "square", "circle"];
+        if (isOrderedList) {
+            listItem.style.listStyleType = this.listStyles[currentLevel - 1];
+        }
+        else {
+            listItem.style.listStyleType =
+                unorderedStyles[Math.min(currentLevel - 1, unorderedStyles.length - 1)];
+        }
+        const selection = window.getSelection();
+        const range = document.createRange();
+        range.selectNodeContents(listItem);
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+    // Update the style of the current list item
+    updateCurrentListItemStyle(style) {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        const listItem = this.getClosestListItem(range.startContainer);
+        console.log("listitem", listItem);
+        if (listItem) {
+            let parentList = listItem.parentElement;
+            if (parentList &&
+                (parentList.nodeName === "OL" || parentList.nodeName === "UL")) {
+                parentList.style.listStyleType = style;
+            }
+        }
+    }
     format(command, value) {
-        const editor = document.getElementById('editor');
+        const editor = document.getElementById("editor");
         if (editor) {
             editor.focus();
-            if (command === 'subscript') {
+            if (command === "subscript") {
                 this.isSubscriptActive = !this.isSubscriptActive;
-                document.execCommand('subscript', false, '');
+                document.execCommand("subscript", false, "");
             }
-            else if (command === 'superscript') {
+            else if (command === "superscript") {
                 this.isSuperscriptActive = !this.isSuperscriptActive;
-                document.execCommand('superscript', false, '');
-                ;
+                document.execCommand("superscript", false, "");
+            }
+            else if (command === "insertOrderedList") {
+                document.execCommand(command, false, "");
+                // Apply the appropriate style for the current level
+                this.updateCurrentListItemStyle(this.listStyles[this.currentListLevel]);
             }
             else {
-                document.execCommand(command, false, value !== null && value !== void 0 ? value : '');
+                document.execCommand(command, false, value !== null && value !== void 0 ? value : "");
                 if (value) {
-                    const tag = value.toLowerCase().replace(/[<>]/g, '');
+                    const tag = value.toLowerCase().replace(/[<>]/g, "");
                     this.selectedFormatBlock = this.formatBlockDecode(tag);
                 }
             }
@@ -2044,14 +2193,14 @@ ElTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ElTextEditorComponent),
             multi: true
-        }], viewQueries: [{ propertyName: "TextEditor", first: true, predicate: ["textEditor"], descendants: true }, { propertyName: "fullscreen", first: true, predicate: ["fullscreen"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container els-text-editor px-0\" id=\"textEditor\" #fullscreen=\"ngxFullscreen\"\r\n                                        #textEditor\r\n                                            ngxFullscreen>\r\n    <div *ngIf=\"toolbarMode === 'fixed'\" class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\" role=\"toolbar\" [style.background]=\"themeModeBgClr()\"\r\n        [ngStyle]=\"{\r\n    'pointer-events': disableToolbar ? 'none' : 'auto',\r\n    'border-top-left-radius': IsOpen ? '0' : '20px',\r\n    'border-top-right-radius': IsOpen ? '0' : '20px'\r\n}\"\r\naria-label=\"Toolbar with button groups\"\r\nstyle=\"border-top-left-radius: 20px !important; border-top-right-radius: 20px !important;\"\r\n>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n            <div ngbDropdown class=\"dropdown\">\r\n                <button\r\n                    class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\" [style.border-radius]=\"'5px'\"\r\n                    id=\"headerDropdown\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\" ngbDropdownToggle>\r\n                    <span>{{selectedFormatBlock | titlecase}}</span> <i class=\"mdi mdi-chevron-down \"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n                    [style.border]=\"themeMode()\">\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h1>')\">\r\n                        <h1>Heading 1</h1>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h2>')\">\r\n                        <h2>Heading 2</h2>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h3>')\">\r\n                        <h3>Heading 3</h3>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h4>')\">\r\n                        <h4>Heading 4</h4>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h5>')\">\r\n                        <h5>Heading 5</h5>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h6>')\">\r\n                        <h6>Heading 6</h6>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<p>')\">\r\n                        <p>Normal</p>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n            <!-- <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff;border: 2px solid #7D6D6D !important;\" \r\n                [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n                <option class=\"els-form-option\" *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n            </select> -->\r\n            <div ngbDropdown class=\"dropdown\">\r\n                <button\r\n                    class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n                    id=\"headerDropdown\" style=\"width: 100px\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\"\r\n                    ngbDropdownToggle>\r\n                    <span style=\"width: 85px; font-weight: 700 !important;\" class=\"text-truncate\">{{selectedFont |\r\n                        titlecase}}</span>\r\n                    <i class=\"mdi mdi-chevron-down \"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n                    [style.border]=\"themeMode()\">\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" *ngFor=\"let font of fonts\"\r\n                        (click)=\"changeFont(font)\" [style.color]=\"themeModeClr()\">\r\n                        <span>{{ font }}</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"py-0\"  style=\"height: fit-content;\" [style.color]=\"themeModeClr()\">\r\n            <div class=\"btn-group els-button-group me-2 mr-2 \" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n                    (click)=\"format('bold')\">\r\n                    <i class=\"mdi mdi-format-bold\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n                    (click)=\"format('italic')\">\r\n                    <i class=\"mdi mdi-format-italic\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n                    (click)=\"format('underline')\">\r\n                    <i class=\"mdi mdi-format-underline\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n                    (click)=\"format('strikethrough')\">\r\n                    <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n                </button>\r\n                <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n                    <input type=\"color\" id=\"textColorPicker\"\r\n                        style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                        (change)=\"setTextColor($event)\">\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n                        (click)=\"openColorPicker('textColorPicker')\">\r\n                        <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n                    </button>\r\n                </div>\r\n                <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n                        (click)=\"openColorPicker('bgColorPicker')\">\r\n                        <i class=\"mdi mdi-alpha-a-box\"></i>\r\n                    </button>\r\n                    <input type=\"color\" id=\"bgColorPicker\"\r\n                        style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                        (change)=\"setBackgroundColor($event)\">\r\n                </div>\r\n                <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n                        class=\"mdi mdi-format-list-numbered\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"format('insertUnorderedList')\"><i class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n                <div ngbDropdown class=\"ql-align\">\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button  arrow-none text-secondary\"\r\n                        id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                        <i class=\"mdi mdi-format-align-left \"></i>\r\n                    </button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n                            (click)=\"format('justifyLeft')\"><i class=\"mdi mdi-format-align-left\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n                            (click)=\"format('justifyCenter')\"><i class=\"mdi mdi-format-align-center\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n                            (click)=\"format('justifyRight')\"><i class=\"mdi mdi-format-align-right\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n                            (click)=\"format('justifyFull')\"><i class=\"mdi mdi-format-align-justify\"></i></button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n                    (click)=\"format('subscript')\">\r\n                    <i class=\"mdi mdi-format-subscript\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n                    (click)=\"format('superscript')\">\r\n                    <i class=\"mdi mdi-format-superscript\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n                        class=\"mdi mdi-link-variant\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n                        class=\"mdi mdi-image\"></i></button>\r\n                <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\" accept=\"image/*\">\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n                        class=\"mdi mdi-table\"></i></button>\r\n                <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"addRow()\"><i class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n                <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n                <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n                <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n                    <button \r\n          \r\n          type=\"button\" \r\n          class=\"btn btn-white els-toolbar-button\" \r\n          *ngIf=\"isTableSelected\" \r\n          [style.color]=\"tHeadBgColor\" \r\n          (click)=\"openColorPicker('tHeadbgColorPicker')\" \r\n        > \r\n          <i class=\"mdi mdi-table-edit\"></i> \r\n        </button> \r\n        <input \r\n          type=\"color\" \r\n          id=\"tHeadbgColorPicker\" \r\n          style=\" \r\n            position: absolute; \r\n            top: 100%; \r\n            left: 0; \r\n            z-index: 100; \r\n            opacity: 0; \r\n          \" \r\n          (change)=\"setTheadBgColor($event)\" \r\n        />\r\n            </div>\r\n            <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"undo()\">\r\n                    <i class=\"mdi mdi-undo\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"redo()\">\r\n                    <i class=\"mdi mdi-redo\"></i>\r\n                </button>\r\n            </div> -->\r\n            <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n                <!-- <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n                            style=\"position: absolute;\">Edit Image</button> -->\r\n                <button class=\"btn btn-white els-toolbar-button\" (click)=\"clearTextEditor()\"\r\n                    style=\" width: fit-content !important;\">\r\n                    <i class=\"mdi mdi-close-circle\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n                <button class=\"btn btn-white els-toolbar-button\" (click)=\"toggleFullscreen1()\">\r\n                    <ng-container *ngIf=\"IsOpen; else fullscreenIcon\">\r\n                        <i class=\"mdi mdi-fullscreen-exit\"></i> <!-- Collapse Icon -->\r\n                    </ng-container>\r\n                    <ng-template #fullscreenIcon>\r\n                        <i class=\"mdi mdi-fullscreen\"></i> <!-- Expand Icon -->\r\n                    </ng-template>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"toolbarMode === 'bubble'\" class=\"bubble-toolbar border p-2\"\r\n        [ngStyle]=\"{'top.px': toolbarTop, 'left.px': toolbarLeft, 'display': showToolbar ? 'block' : 'none'}\">\r\n        <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n            <select class=\"els-form-select\" [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n                <option *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n            </select>\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n                (click)=\"format('bold')\">\r\n                <i class=\"mdi mdi-format-bold\"></i>\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n                (click)=\"format('italic')\">\r\n                <i class=\"mdi mdi-format-italic\"></i>\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n                (click)=\"format('underline')\">\r\n                <i class=\"mdi mdi-format-underline\"></i>\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n                (click)=\"format('strikethrough')\">\r\n                <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n            </button>\r\n        </div>\r\n        <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('blockquote')\"><i\r\n                        class=\"mdi mdi-format-quote-close\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertCodeBlock()\"><i \r\n                        class=\"mdi mdi-code-tags\"></i></button>\r\n            </div> -->\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n                    class=\"mdi mdi-format-list-numbered\"></i></button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertUnorderedList')\"><i\r\n                    class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n            <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Color Formatting\"> -->\r\n            <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n                <!-- <div ngbDropdown class=\"ql-align\">\r\n                                <button type=\"button\" class=\"btn btn-outline-primary arrow-none text-secondary\" id=\"dropdownBasic1\"\r\n                                    aria-expanded=\"false\" ngbDropdownToggle>\r\n                                    <i class=\"mdi mdi-format-color-fill\"></i>\r\n                                </button>\r\n                                <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 300px;\">\r\n                                    <color-sketch color=\"#fff\" (onChangeComplete)=\"setTextColor($event)\"></color-sketch>\r\n                                </div>\r\n                            </div> -->\r\n                <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\" ngx-colors-trigger [(ngModel)]=\"color\"\r\n                                (ngModelChange)=\"logEvent($event, 'ngModelChange')\"\r\n                                (change)=\"logEvent($event, 'change')\"\r\n                                (input)=\"logEvent($event, 'input')\"\r\n                                >\r\n                                <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"\r\n                                    [style]=\"{color: color}\"></i>\r\n                                <ngx-colors style=\"display: none;\" ></ngx-colors>\r\n                            </div> -->\r\n                <input type=\"color\" id=\"textColorPicker\"\r\n                    style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                    (change)=\"setTextColor($event)\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n                    (click)=\"openColorPicker('textColorPicker')\">\r\n                    <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n                </button>\r\n            </div>\r\n\r\n            <!-- <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\">\r\n                            <input type=\"color\" id=\"bgColorPicker\" style=\"display: none;\" (change)=\"setBackgroundColor($event)\">\r\n                            <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                                (click)=\"openColorPicker('bgColorPicker')\">\r\n                                <i class=\"mdi mdi-alpha-a-box\"></i>\r\n                            </button>\r\n                        </div> -->\r\n            <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n                    (click)=\"openColorPicker('bgColorPicker')\">\r\n                    <i class=\"mdi mdi-alpha-a-box\"></i>\r\n                </button>\r\n                <!-- <input style=\"width: 0px !important;\" id=\"bgColorPicker\" [cpPresetColors]=\"['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']\"\r\n                                [(colorPicker)]=\"color\" (change)=\"setBackgroundColor($event)\" /> -->\r\n                <input type=\"color\" id=\"bgColorPicker\"\r\n                    style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                    (change)=\"setBackgroundColor($event)\">\r\n            </div>\r\n\r\n\r\n            <!-- </div> -->\r\n        </div>\r\n        <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n                    <div class=\"dropdown\">\r\n                            <button class=\"btn btn-white els-toolbar-button dropdown-toggle\" type=\"button\" id=\"headerDropdown\"\r\n                                    data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                                    <i class=\"mdi mdi-format-header-1\"></i>\r\n                            </button>\r\n                            <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdown\">\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\"><i\r\n                                                    class=\"mdi mdi-format-header-1\"></i> Heading 1</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\"><i\r\n                                                    class=\"mdi mdi-format-header-2\"></i> Heading 2</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\"><i\r\n                                                    class=\"mdi mdi-format-header-3\"></i> Heading 3</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\"><i\r\n                                                    class=\"mdi mdi-format-header-4\"></i> Heading 4</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\"><i\r\n                                                    class=\"mdi mdi-format-header-5\"></i> Heading 5</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\"><i\r\n                                                    class=\"mdi mdi-format-header-6\"></i> Heading 6</button>\r\n                            </div>\r\n                    </div>\r\n            </div> -->\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n            <div ngbDropdown class=\"dropdown\">\r\n                <button class=\"btn btn-white els-toolbar-dropdown-button dropdown-toggle\" id=\"headerDropdown\"\r\n                    ngbDropdownToggle>\r\n                    <span style=\"width: 85px;\">{{selectedFormatBlock | titlecase}}</span> <i\r\n                        class=\"mdi mdi-chevron-down text-dark\"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"headerDropdown\">\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\">\r\n                        <h1>Heading 1</h1>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\">\r\n                        <h2>Heading 2</h2>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\">\r\n                        <h3>Heading 3</h3>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\">\r\n                        <h4>Heading 4</h4>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\">\r\n                        <h5>Heading 5</h5>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\">\r\n                        <h6>Heading 6</h6>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<p>')\">\r\n                        <p>Normal</p>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <!-- <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('superscript')\"><i\r\n                        class=\"mdi mdi-format-superscript\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('subscript')\"><i\r\n                        class=\"mdi mdi-format-subscript\"></i></button> -->\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n                (click)=\"format('subscript')\">\r\n                <i class=\"mdi mdi-format-subscript\"></i>\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n                (click)=\"format('superscript')\">\r\n                <i class=\"mdi mdi-format-superscript\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <div ngbDropdown class=\"ql-align\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n                    id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                    <i class=\"mdi mdi-format-align-left \"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyLeft')\"><i\r\n                            class=\"mdi mdi-format-align-left\"></i></button>\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyCenter')\"><i\r\n                            class=\"mdi mdi-format-align-center\"></i></button>\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyRight')\"><i\r\n                            class=\"mdi mdi-format-align-right\"></i></button>\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyFull')\"><i\r\n                            class=\"mdi mdi-format-align-justify\"></i></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('removeFormat')\"><i\r\n                    class=\"mdi mdi-format-clear\"></i></button>\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n                    class=\"mdi mdi-link-variant\"></i></button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n                    class=\"mdi mdi-image\"></i></button>\r\n            <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\" accept=\"image/*\">\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n                    class=\"mdi mdi-table\"></i></button>\r\n            <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addRow()\"><i\r\n                    class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n            <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n            <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n            <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n            <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n                style=\"position: absolute;\">Edit Image</button>\r\n        </div>\r\n\r\n\r\n        <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\">\r\n        <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"></i>\r\n        <ngx-colors [(ngModel)]=\"color\" (change)=\"colorChanged($event)\"></ngx-colors>\r\n    </div> -->\r\n        <!-- <div class=\"btn-group els-button-group\" ngbDropdown aria-label=\"Table Options\">\r\n                <button class=\"btn btn-white els-toolbar-button\" ngbDropdownToggle  (click)=\"addTable()\">\r\n                    <i class=\"mdi mdi-table\"></i>\r\n                </button>\r\n            \r\n                <div ngbDropdownMenu *ngIf=\"isTableSelected || tableAdded\">\r\n                    <button class=\"dropdown-item\" (click)=\"addRow()\">\r\n                        <i class=\"mdi mdi-table-row-plus-after\"></i> Add Row\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"deleteRow()\">\r\n                        <i class=\"mdi mdi-table-row-remove\"></i> Delete Row\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"addColumn()\">\r\n                        <i class=\"mdi mdi-table-column-plus-after\"></i> Add Column\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"deleteColumn()\">\r\n                        <i class=\"mdi mdi-table-column-remove\"></i> Delete Column\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"tableWidth\">Table Width</label>\r\n                        <input type=\"number\" id=\"tableWidth\" class=\"form-control\" (change)=\"adjustTableWidth($event)\"\r\n                            placeholder=\"Width\">\r\n                    </div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"cellWidth\">Cell Width</label>\r\n                        <input type=\"number\" id=\"cellWidth\" class=\"form-control\" (change)=\"adjustCellWidth($event)\"\r\n                            placeholder=\"Width\">\r\n                    </div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"cellHeight\">Cell Height</label>\r\n                        <input type=\"number\" id=\"cellHeight\" class=\"form-control\" (change)=\"adjustCellHeight($event)\"\r\n                            placeholder=\"Height\">\r\n                    </div>\r\n                </div>\r\n            </div> -->\r\n    </div>\r\n    <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n        style=\"position: relative !important;border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; border-bottom-left-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\" [style.border-top]=\"themeModeBorderTop()\"\r\n        [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n        [style.min-height]=\"IsOpen ? '85vh !important' :  '405px !important'\"\r\n        (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\" readonly (mouseup)=\"onTextSelect($event)\"\r\n        [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n        (click)=\"checkTableSelection($event)\">\r\n    </div> -->\r\n    <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus overflow-auto\" #editor\r\n         style=\"position: relative !important;\r\n               \" [style.background]=\"themeModeBgClr()\"\r\n        [style.border-top]=\"themeModeBorderTop()\"\r\n        \r\n        [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px',\r\n           'border-bottom-left-radius': isOpen ? '0' :'20px',\r\n           'border-bottom-right-radius': isOpen ? '0' :'20px'\r\n        }\"\r\n        [style.min-height]=\"IsOpen ? '93vh' : '405px'\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n        readonly (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\"\r\n        (focus)=\"onFocus()\" (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n    </div> -->\r\n    <div [attr.contenteditable]=\"contentEditable\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus overflow-auto\" #editor\r\n        style=\"position: relative !important; overflow: auto;\" [style.background]=\"themeModeBgClr()\"\r\n        [style.border-top]=\"themeModeBorderTop()\" [ngStyle]=\"{\r\n                'font-family': selectedFont, \r\n                'font-size': selectedFontSize + 'px',\r\n                'border-bottom-left-radius': IsOpen ? '0' :'20px',\r\n                'border-bottom-right-radius': IsOpen ? '0' :'20px',\r\n                'min-height': IsOpen ? '93vh' : '405px',\r\n                'max-height': IsOpen ? '93vh' : '405px'\r\n            }\" placeholder=\"Insert text here ...\" readonly (mouseup)=\"onTextSelect($event)\"\r\n        (input)=\"onModelChange($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\" (keydown.Tab)=\"handleTabKey($event)\">\r\n    </div>\r\n\r\n    <table *ngIf=\"parsedTable\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngFor=\"let header of parsedTable.headers\">{{ header }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of parsedTable.rows\">\r\n                <td *ngFor=\"let cell of row\">{{ cell }}</td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n\r\n</div>", styles: ["@charset \"UTF-8\";*{font-family:Noto Sans Telugu UI,sans-serif}#editor{position:relative!important;overflow:auto;max-height:405px;min-height:405px;padding:16px;box-sizing:border-box}#editor.open{max-height:93vh;border-bottom-left-radius:0;border-bottom-right-radius:0}#editor:focus{outline:none!important;border-color:transparent!important}#editor img{max-width:100%;height:auto}.bubble-toolbar{position:absolute;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026;z-index:1000;display:none}.els-text-editor{box-sizing:border-box}.els-btn-toolbar{width:\"1028px\"}.els-toolbar-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.els-toolbar-button-2{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:100px;color:#fff}.els-toolbar-button-2 :hover{color:#555!important}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:80%;padding-left:8px;padding-right:5px;position:relative;width:100%;color:#000}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#ccc}.els-border:focus{outline:none}.els-dropdown-item{width:50px!important}.els-toolbar-button.active,.btn-toolbar .btn.active,.btn-toolbar .btn:hover{color:#06c}.dropdown-toggle:after{display:none}.table-container{overflow-x:auto;width:100%}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse;table-layout:fixed}table td,table th{padding:.75rem;vertical-align:top;border:1px solid #dee2e6;word-wrap:break-word}@media (max-width: 576px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-spacing:0}table thead,table tbody,table tr,table th,table td{display:block}table thead tr{position:absolute;top:-9999px;left:-9999px}table tr{margin-bottom:.625rem;border:1px solid #ccc}table td,table th{border:none;border-bottom:1px solid #ddd;position:relative;padding-left:50%;white-space:normal;text-align:left}table td:before,table th:before{position:absolute;top:.75rem;left:.75rem;width:45%;padding-right:.75rem;white-space:nowrap;text-align:left;font-weight:700}}table.resizable{overflow:hidden;resize:both}.btn-group .btn{display:flex;align-items:center;justify-content:center}.btn-group .mdi{font-size:18px}.icon-with-underline{text-decoration:underline}pre{background-color:#f0f0f0;border:1px solid #ccc;border-radius:5px;overflow-x:auto}code{display:block;white-space:pre-wrap;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px}.parent-container{height:100%;overflow:visible}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;cursor:pointer}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#555}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.pasted-table{border-collapse:collapse;width:100%}.pasted-table td{border:1px solid black;padding:8px}.pasted-table tr:nth-child(even){background-color:#f2f2f2}.pasted-table tr:hover{background-color:#ddd}.vertical-line{height:28px;margin:0 auto}.image-edit-button{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;background-color:#fff!important;border:2px solid #fff!important;padding:10px!important;color:#313a46!important;z-index:1000!important;-webkit-user-select:none!important;user-select:none!important;opacity:.5!important;cursor:default!important;transition:none!important;animation:none!important;pointer-events:none!important}.image-edit-button:hover{background-color:#f0f0f0}img{position:relative}.els-text-format{font-weight:800!important}.els-text-format>button{color:#000!important}.els-text-format>button:hover{background-color:#7d6d6d!important;color:#fff!important}.fullscreen-editor{width:100vw!important;height:100vh!important;position:fixed;top:0;left:0;z-index:999;background-color:#fff;border:none;border-radius:0;padding:0!important}\n"], directives: [{ type: i3.NgxFullscreenDirective, selector: "[ngxFullscreen]", inputs: ["ngxFullscreen"], outputs: ["transition", "errors"], exportAs: ["ngxFullscreen"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i5.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i5.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "titlecase": i4.TitleCasePipe } });
+        }], viewQueries: [{ propertyName: "TextEditor", first: true, predicate: ["textEditor"], descendants: true }, { propertyName: "fullscreen", first: true, predicate: ["fullscreen"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"container els-text-editor px-0\"\r\n  id=\"textEditor\"\r\n  #fullscreen=\"ngxFullscreen\"\r\n  #textEditor\r\n  ngxFullscreen\r\n>\r\n  <div\r\n    *ngIf=\"toolbarMode === 'fixed'\"\r\n    class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\"\r\n    role=\"toolbar\"\r\n    [style.background]=\"themeModeBgClr()\"\r\n    [ngStyle]=\"{\r\n      'pointer-events': disableToolbar ? 'none' : 'auto',\r\n      'border-top-left-radius': IsOpen ? '0' : '20px',\r\n      'border-top-right-radius': IsOpen ? '0' : '20px'\r\n    }\"\r\n    aria-label=\"Toolbar with button groups\"\r\n    style=\"\r\n      border-top-left-radius: 20px !important;\r\n      border-top-right-radius: 20px !important;\r\n    \"\r\n  >\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Header Options\"\r\n    >\r\n      <div ngbDropdown class=\"dropdown\">\r\n        <button\r\n          class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n          [style.border-radius]=\"'5px'\"\r\n          id=\"headerDropdown\"\r\n          [style.border]=\"themeMode()\"\r\n          [style.color]=\"themeModeClr()\"\r\n          ngbDropdownToggle\r\n        >\r\n          <span>{{ selectedFormatBlock | titlecase }}</span>\r\n          <i class=\"mdi mdi-chevron-down\"></i>\r\n        </button>\r\n        <div\r\n          ngbDropdownMenu\r\n          aria-labelledby=\"headerDropdown\"\r\n          class=\"els-text-format\"\r\n          [style.border]=\"themeMode()\"\r\n        >\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h1>')\"\r\n          >\r\n            <h1>Heading 1</h1>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h2>')\"\r\n          >\r\n            <h2>Heading 2</h2>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h3>')\"\r\n          >\r\n            <h3>Heading 3</h3>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h4>')\"\r\n          >\r\n            <h4>Heading 4</h4>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h5>')\"\r\n          >\r\n            <h5>Heading 5</h5>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h6>')\"\r\n          >\r\n            <h6>Heading 6</h6>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<p>')\"\r\n          >\r\n            <p>Normal</p>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group\"\r\n      role=\"group\"\r\n      aria-label=\"Font Options\"\r\n    >\r\n      <!-- <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff;border: 2px solid #7D6D6D !important;\" \r\n                [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n                <option class=\"els-form-option\" *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n            </select> -->\r\n      <div ngbDropdown class=\"dropdown\">\r\n        <button\r\n          class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n          id=\"headerDropdown\"\r\n          style=\"width: 100px\"\r\n          [style.border]=\"themeMode()\"\r\n          [style.color]=\"themeModeClr()\"\r\n          ngbDropdownToggle\r\n        >\r\n          <span\r\n            style=\"width: 85px; font-weight: 700 !important\"\r\n            class=\"text-truncate\"\r\n            >{{ selectedFont | titlecase }}</span\r\n          >\r\n          <i class=\"mdi mdi-chevron-down\"></i>\r\n        </button>\r\n        <div\r\n          ngbDropdownMenu\r\n          aria-labelledby=\"headerDropdown\"\r\n          class=\"els-text-format\"\r\n          [style.border]=\"themeMode()\"\r\n        >\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            *ngFor=\"let font of fonts\"\r\n            (click)=\"changeFont(font)\"\r\n            [style.color]=\"themeModeClr()\"\r\n          >\r\n            <span>{{ font }}</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"py-0\"\r\n      style=\"height: fit-content\"\r\n      [style.color]=\"themeModeClr()\"\r\n    >\r\n      <div\r\n        class=\"btn-group els-button-group me-2 mr-2\"\r\n        role=\"group\"\r\n        aria-label=\"Text Formatting\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isBoldActive\"\r\n          (click)=\"format('bold')\"\r\n        >\r\n          <i class=\"mdi mdi-format-bold\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isItalicActive\"\r\n          (click)=\"format('italic')\"\r\n        >\r\n          <i class=\"mdi mdi-format-italic\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isUnderlineActive\"\r\n          (click)=\"format('underline')\"\r\n        >\r\n          <i class=\"mdi mdi-format-underline\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isStrikethroughActive\"\r\n          (click)=\"format('strikethrough')\"\r\n        >\r\n          <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n        </button>\r\n        <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n          <input\r\n            type=\"color\"\r\n            id=\"textColorPicker\"\r\n            style=\"\r\n              position: absolute;\r\n              top: 100%;\r\n              left: 0;\r\n              z-index: 100;\r\n              opacity: 0;\r\n            \"\r\n            (change)=\"setTextColor($event)\"\r\n          />\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            style=\"position: relative\"\r\n            (click)=\"openColorPicker('textColorPicker')\"\r\n          >\r\n            <i\r\n              class=\"mdi mdi-format-color-text icon-with-underline\"\r\n              [style.color]=\"selectedTextColor\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n        <div\r\n          class=\"btn-group\"\r\n          role=\"group\"\r\n          aria-label=\"Background Color\"\r\n          style=\"position: relative\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            [style.color]=\"backgroundColor\"\r\n            (click)=\"openColorPicker('bgColorPicker')\"\r\n          >\r\n            <i class=\"mdi mdi-alpha-a-box\"></i>\r\n          </button>\r\n          <input\r\n            type=\"color\"\r\n            id=\"bgColorPicker\"\r\n            style=\"\r\n              position: absolute;\r\n              top: 100%;\r\n              left: 0;\r\n              z-index: 100;\r\n              opacity: 0;\r\n            \"\r\n            (change)=\"setBackgroundColor($event)\"\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"vertical-line ms-2 border\"\r\n          [style.border-left]=\"themeModeClrVerticalLine()\"\r\n        ></div>\r\n      </div>\r\n      <div\r\n        class=\"btn-group els-button-group mr-2\"\r\n        role=\"group\"\r\n        aria-label=\"Text Formatting\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"format('insertOrderedList')\"\r\n        >\r\n          <i class=\"mdi mdi-format-list-numbered\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"format('insertUnorderedList')\"\r\n        >\r\n          <i class=\"mdi mdi-format-list-bulleted\"></i>\r\n        </button>\r\n        <div ngbDropdown class=\"ql-align\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n            id=\"dropdownBasic1\"\r\n            aria-expanded=\"false\"\r\n            ngbDropdownToggle\r\n          >\r\n            <i class=\"mdi mdi-format-align-left\"></i>\r\n          </button>\r\n          <div\r\n            ngbDropdownMenu\r\n            aria-labelledby=\"dropdownBasic1\"\r\n            style=\"width: 3px\"\r\n          >\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-white els-toolbar-button text-dark\"\r\n              (click)=\"format('justifyLeft')\"\r\n            >\r\n              <i class=\"mdi mdi-format-align-left\"></i>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-white els-toolbar-button text-dark\"\r\n              (click)=\"format('justifyCenter')\"\r\n            >\r\n              <i class=\"mdi mdi-format-align-center\"></i>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-white els-toolbar-button text-dark\"\r\n              (click)=\"format('justifyRight')\"\r\n            >\r\n              <i class=\"mdi mdi-format-align-right\"></i>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-white els-toolbar-button text-dark\"\r\n              (click)=\"format('justifyFull')\"\r\n            >\r\n              <i class=\"mdi mdi-format-align-justify\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"vertical-line ms-2 border\"\r\n          [style.border-left]=\"themeModeClrVerticalLine()\"\r\n        ></div>\r\n      </div>\r\n      <div\r\n        class=\"btn-group els-button-group mr-2\"\r\n        role=\"group\"\r\n        aria-label=\"Text Formatting\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isSubscriptActive\"\r\n          (click)=\"format('subscript')\"\r\n        >\r\n          <i class=\"mdi mdi-format-subscript\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isSuperscriptActive\"\r\n          (click)=\"format('superscript')\"\r\n        >\r\n          <i class=\"mdi mdi-format-superscript\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        class=\"btn-group els-button-group mr-2\"\r\n        role=\"group\"\r\n        aria-label=\"Text Formatting\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"addLink()\"\r\n        >\r\n          <i class=\"mdi mdi-link-variant\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"insertsImage()\"\r\n        >\r\n          <i class=\"mdi mdi-image\"></i>\r\n        </button>\r\n        <input\r\n          type=\"file\"\r\n          id=\"imageInput\"\r\n          style=\"display: none\"\r\n          (change)=\"handleImageUpload($event)\"\r\n          accept=\"image/*\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"btn-group els-button-group mr-2\"\r\n        role=\"group\"\r\n        aria-label=\"Table Options\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"addTable()\"\r\n        >\r\n          <i class=\"mdi mdi-table\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"isTableSelected\"\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"addRow()\"\r\n        >\r\n          <i class=\"mdi mdi-table-row-plus-after\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"isTableSelected\"\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"deleteRow()\"\r\n        >\r\n          <i class=\"mdi mdi-table-row-remove\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"isTableSelected\"\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"addColumn()\"\r\n        >\r\n          <i class=\"mdi mdi-table-column-plus-after\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"isTableSelected\"\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"deleteColumn()\"\r\n        >\r\n          <i class=\"mdi mdi-table-column-remove\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          *ngIf=\"isTableSelected\"\r\n          [style.color]=\"tHeadBgColor\"\r\n          (click)=\"openColorPicker('tHeadbgColorPicker')\"\r\n        >\r\n          <i class=\"mdi mdi-table-edit\"></i>\r\n        </button>\r\n        <input\r\n          type=\"color\"\r\n          id=\"tHeadbgColorPicker\"\r\n          style=\"\r\n            position: absolute;\r\n            top: 100%;\r\n            left: 0;\r\n            z-index: 100;\r\n            opacity: 0;\r\n          \"\r\n          (change)=\"setTheadBgColor($event)\"\r\n        />\r\n      </div>\r\n      <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"undo()\">\r\n                    <i class=\"mdi mdi-undo\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"redo()\">\r\n                    <i class=\"mdi mdi-redo\"></i>\r\n                </button>\r\n            </div> -->\r\n      <div\r\n        class=\"btn-group els-button-group\"\r\n        role=\"group\"\r\n        aria-label=\"Table Options\"\r\n      >\r\n        <!-- <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n                            style=\"position: absolute;\">Edit Image</button> -->\r\n        <button\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"clearTextEditor()\"\r\n          style=\"width: fit-content !important\"\r\n        >\r\n          <i class=\"mdi mdi-close-circle\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        class=\"btn-group els-button-group\"\r\n        role=\"group\"\r\n        aria-label=\"Table Options\"\r\n      >\r\n        <button\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"toggleFullscreen1()\"\r\n        >\r\n          <ng-container *ngIf=\"IsOpen; else fullscreenIcon\">\r\n            <i class=\"mdi mdi-fullscreen-exit\"></i>\r\n            <!-- Collapse Icon -->\r\n          </ng-container>\r\n          <ng-template #fullscreenIcon>\r\n            <i class=\"mdi mdi-fullscreen\"></i>\r\n            <!-- Expand Icon -->\r\n          </ng-template>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"toolbarMode === 'bubble'\"\r\n    class=\"bubble-toolbar border p-2\"\r\n    [ngStyle]=\"{\r\n      'top.px': toolbarTop,\r\n      'left.px': toolbarLeft,\r\n      display: showToolbar ? 'block' : 'none'\r\n    }\"\r\n  >\r\n    <div\r\n      class=\"btn-group els-button-group\"\r\n      role=\"group\"\r\n      aria-label=\"Font Options\"\r\n    >\r\n      <select\r\n        class=\"els-form-select\"\r\n        [(ngModel)]=\"selectedFont\"\r\n        (change)=\"changeFont($event)\"\r\n      >\r\n        <option *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n      </select>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isBoldActive\"\r\n        (click)=\"format('bold')\"\r\n      >\r\n        <i class=\"mdi mdi-format-bold\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isItalicActive\"\r\n        (click)=\"format('italic')\"\r\n      >\r\n        <i class=\"mdi mdi-format-italic\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isUnderlineActive\"\r\n        (click)=\"format('underline')\"\r\n      >\r\n        <i class=\"mdi mdi-format-underline\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isStrikethroughActive\"\r\n        (click)=\"format('strikethrough')\"\r\n      >\r\n        <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n      </button>\r\n    </div>\r\n    <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('blockquote')\"><i\r\n                        class=\"mdi mdi-format-quote-close\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertCodeBlock()\"><i \r\n                        class=\"mdi mdi-code-tags\"></i></button>\r\n            </div> -->\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"format('insertOrderedList')\"\r\n      >\r\n        <i class=\"mdi mdi-format-list-numbered\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"format('insertUnorderedList')\"\r\n      >\r\n        <i class=\"mdi mdi-format-list-bulleted\"></i>\r\n      </button>\r\n      <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Color Formatting\"> -->\r\n      <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n        <!-- <div ngbDropdown class=\"ql-align\">\r\n                                <button type=\"button\" class=\"btn btn-outline-primary arrow-none text-secondary\" id=\"dropdownBasic1\"\r\n                                    aria-expanded=\"false\" ngbDropdownToggle>\r\n                                    <i class=\"mdi mdi-format-color-fill\"></i>\r\n                                </button>\r\n                                <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 300px;\">\r\n                                    <color-sketch color=\"#fff\" (onChangeComplete)=\"setTextColor($event)\"></color-sketch>\r\n                                </div>\r\n                            </div> -->\r\n        <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\" ngx-colors-trigger [(ngModel)]=\"color\"\r\n                                (ngModelChange)=\"logEvent($event, 'ngModelChange')\"\r\n                                (change)=\"logEvent($event, 'change')\"\r\n                                (input)=\"logEvent($event, 'input')\"\r\n                                >\r\n                                <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"\r\n                                    [style]=\"{color: color}\"></i>\r\n                                <ngx-colors style=\"display: none;\" ></ngx-colors>\r\n                            </div> -->\r\n        <input\r\n          type=\"color\"\r\n          id=\"textColorPicker\"\r\n          style=\"\r\n            position: absolute;\r\n            top: 100%;\r\n            left: 0;\r\n            z-index: 100;\r\n            opacity: 0;\r\n          \"\r\n          (change)=\"setTextColor($event)\"\r\n        />\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          style=\"position: relative\"\r\n          (click)=\"openColorPicker('textColorPicker')\"\r\n        >\r\n          <i\r\n            class=\"mdi mdi-format-color-text icon-with-underline\"\r\n            [style.color]=\"selectedTextColor\"\r\n          ></i>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\">\r\n                            <input type=\"color\" id=\"bgColorPicker\" style=\"display: none;\" (change)=\"setBackgroundColor($event)\">\r\n                            <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                                (click)=\"openColorPicker('bgColorPicker')\">\r\n                                <i class=\"mdi mdi-alpha-a-box\"></i>\r\n                            </button>\r\n                        </div> -->\r\n      <div\r\n        class=\"btn-group\"\r\n        role=\"group\"\r\n        aria-label=\"Background Color\"\r\n        style=\"position: relative\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [style.color]=\"backgroundColor\"\r\n          (click)=\"openColorPicker('bgColorPicker')\"\r\n        >\r\n          <i class=\"mdi mdi-alpha-a-box\"></i>\r\n        </button>\r\n        <!-- <input style=\"width: 0px !important;\" id=\"bgColorPicker\" [cpPresetColors]=\"['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']\"\r\n                                [(colorPicker)]=\"color\" (change)=\"setBackgroundColor($event)\" /> -->\r\n        <input\r\n          type=\"color\"\r\n          id=\"bgColorPicker\"\r\n          style=\"\r\n            position: absolute;\r\n            top: 100%;\r\n            left: 0;\r\n            z-index: 100;\r\n            opacity: 0;\r\n          \"\r\n          (change)=\"setBackgroundColor($event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- </div> -->\r\n    </div>\r\n    <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n                    <div class=\"dropdown\">\r\n                            <button class=\"btn btn-white els-toolbar-button dropdown-toggle\" type=\"button\" id=\"headerDropdown\"\r\n                                    data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                                    <i class=\"mdi mdi-format-header-1\"></i>\r\n                            </button>\r\n                            <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdown\">\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\"><i\r\n                                                    class=\"mdi mdi-format-header-1\"></i> Heading 1</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\"><i\r\n                                                    class=\"mdi mdi-format-header-2\"></i> Heading 2</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\"><i\r\n                                                    class=\"mdi mdi-format-header-3\"></i> Heading 3</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\"><i\r\n                                                    class=\"mdi mdi-format-header-4\"></i> Heading 4</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\"><i\r\n                                                    class=\"mdi mdi-format-header-5\"></i> Heading 5</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\"><i\r\n                                                    class=\"mdi mdi-format-header-6\"></i> Heading 6</button>\r\n                            </div>\r\n                    </div>\r\n            </div> -->\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Header Options\"\r\n    >\r\n      <div ngbDropdown class=\"dropdown\">\r\n        <button\r\n          class=\"btn btn-white els-toolbar-dropdown-button dropdown-toggle\"\r\n          id=\"headerDropdown\"\r\n          ngbDropdownToggle\r\n        >\r\n          <span style=\"width: 85px\">{{ selectedFormatBlock | titlecase }}</span>\r\n          <i class=\"mdi mdi-chevron-down text-dark\"></i>\r\n        </button>\r\n        <div ngbDropdownMenu aria-labelledby=\"headerDropdown\">\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h1>')\"\r\n          >\r\n            <h1>Heading 1</h1>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h2>')\"\r\n          >\r\n            <h2>Heading 2</h2>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h3>')\"\r\n          >\r\n            <h3>Heading 3</h3>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h4>')\"\r\n          >\r\n            <h4>Heading 4</h4>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h5>')\"\r\n          >\r\n            <h5>Heading 5</h5>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h6>')\"\r\n          >\r\n            <h6>Heading 6</h6>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<p>')\"\r\n          >\r\n            <p>Normal</p>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <!-- <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('superscript')\"><i\r\n                        class=\"mdi mdi-format-superscript\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('subscript')\"><i\r\n                        class=\"mdi mdi-format-subscript\"></i></button> -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isSubscriptActive\"\r\n        (click)=\"format('subscript')\"\r\n      >\r\n        <i class=\"mdi mdi-format-subscript\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isSuperscriptActive\"\r\n        (click)=\"format('superscript')\"\r\n      >\r\n        <i class=\"mdi mdi-format-superscript\"></i>\r\n      </button>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <div ngbDropdown class=\"ql-align\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n          id=\"dropdownBasic1\"\r\n          aria-expanded=\"false\"\r\n          ngbDropdownToggle\r\n        >\r\n          <i class=\"mdi mdi-format-align-left\"></i>\r\n        </button>\r\n        <div\r\n          ngbDropdownMenu\r\n          aria-labelledby=\"dropdownBasic1\"\r\n          style=\"width: 3px\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            (click)=\"format('justifyLeft')\"\r\n          >\r\n            <i class=\"mdi mdi-format-align-left\"></i>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            (click)=\"format('justifyCenter')\"\r\n          >\r\n            <i class=\"mdi mdi-format-align-center\"></i>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            (click)=\"format('justifyRight')\"\r\n          >\r\n            <i class=\"mdi mdi-format-align-right\"></i>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            (click)=\"format('justifyFull')\"\r\n          >\r\n            <i class=\"mdi mdi-format-align-justify\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"format('removeFormat')\"\r\n      >\r\n        <i class=\"mdi mdi-format-clear\"></i>\r\n      </button>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"addLink()\"\r\n      >\r\n        <i class=\"mdi mdi-link-variant\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"insertsImage()\"\r\n      >\r\n        <i class=\"mdi mdi-image\"></i>\r\n      </button>\r\n      <input\r\n        type=\"file\"\r\n        id=\"imageInput\"\r\n        style=\"display: none\"\r\n        (change)=\"handleImageUpload($event)\"\r\n        accept=\"image/*\"\r\n      />\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Table Options\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"addTable()\"\r\n      >\r\n        <i class=\"mdi mdi-table\"></i>\r\n      </button>\r\n      <button\r\n        *ngIf=\"isTableSelected\"\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"addRow()\"\r\n      >\r\n        <i class=\"mdi mdi-table-row-plus-after\"></i>\r\n      </button>\r\n      <button\r\n        *ngIf=\"isTableSelected\"\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"deleteRow()\"\r\n      >\r\n        <i class=\"mdi mdi-table-row-remove\"></i>\r\n      </button>\r\n      <button\r\n        *ngIf=\"isTableSelected\"\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"addColumn()\"\r\n      >\r\n        <i class=\"mdi mdi-table-column-plus-after\"></i>\r\n      </button>\r\n      <button\r\n        *ngIf=\"isTableSelected\"\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"deleteColumn()\"\r\n      >\r\n        <i class=\"mdi mdi-table-column-remove\"></i>\r\n      </button>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Table Options\"\r\n    >\r\n      <button\r\n        *ngIf=\"selectedImage\"\r\n        class=\"btn btn-white els-toolbar-button-2\"\r\n        (click)=\"editImage()\"\r\n        style=\"position: absolute\"\r\n      >\r\n        Edit Image\r\n      </button>\r\n    </div>\r\n\r\n    <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\">\r\n        <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"></i>\r\n        <ngx-colors [(ngModel)]=\"color\" (change)=\"colorChanged($event)\"></ngx-colors>\r\n    </div> -->\r\n    <!-- <div class=\"btn-group els-button-group\" ngbDropdown aria-label=\"Table Options\">\r\n                <button class=\"btn btn-white els-toolbar-button\" ngbDropdownToggle  (click)=\"addTable()\">\r\n                    <i class=\"mdi mdi-table\"></i>\r\n                </button>\r\n            \r\n                <div ngbDropdownMenu *ngIf=\"isTableSelected || tableAdded\">\r\n                    <button class=\"dropdown-item\" (click)=\"addRow()\">\r\n                        <i class=\"mdi mdi-table-row-plus-after\"></i> Add Row\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"deleteRow()\">\r\n                        <i class=\"mdi mdi-table-row-remove\"></i> Delete Row\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"addColumn()\">\r\n                        <i class=\"mdi mdi-table-column-plus-after\"></i> Add Column\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"deleteColumn()\">\r\n                        <i class=\"mdi mdi-table-column-remove\"></i> Delete Column\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"tableWidth\">Table Width</label>\r\n                        <input type=\"number\" id=\"tableWidth\" class=\"form-control\" (change)=\"adjustTableWidth($event)\"\r\n                            placeholder=\"Width\">\r\n                    </div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"cellWidth\">Cell Width</label>\r\n                        <input type=\"number\" id=\"cellWidth\" class=\"form-control\" (change)=\"adjustCellWidth($event)\"\r\n                            placeholder=\"Width\">\r\n                    </div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"cellHeight\">Cell Height</label>\r\n                        <input type=\"number\" id=\"cellHeight\" class=\"form-control\" (change)=\"adjustCellHeight($event)\"\r\n                            placeholder=\"Height\">\r\n                    </div>\r\n                </div>\r\n            </div> -->\r\n  </div>\r\n  <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n        style=\"position: relative !important;border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; border-bottom-left-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\" [style.border-top]=\"themeModeBorderTop()\"\r\n        [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n        [style.min-height]=\"IsOpen ? '85vh !important' :  '405px !important'\"\r\n        (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\" readonly (mouseup)=\"onTextSelect($event)\"\r\n        [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n        (click)=\"checkTableSelection($event)\">\r\n    </div> -->\r\n  <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus overflow-auto\" #editor\r\n         style=\"position: relative !important;\r\n               \" [style.background]=\"themeModeBgClr()\"\r\n        [style.border-top]=\"themeModeBorderTop()\"\r\n        \r\n        [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px',\r\n           'border-bottom-left-radius': isOpen ? '0' :'20px',\r\n           'border-bottom-right-radius': isOpen ? '0' :'20px'\r\n        }\"\r\n        [style.min-height]=\"IsOpen ? '93vh' : '405px'\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n        readonly (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\"\r\n        (focus)=\"onFocus()\" (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n    </div> -->\r\n  <div\r\n    [attr.contenteditable]=\"contentEditable\"\r\n    id=\"editor\"\r\n    class=\"p-3 custom-scrollbar non-focus overflow-auto\"\r\n    #editor\r\n    style=\"position: relative !important; overflow: auto\"\r\n    [style.background]=\"themeModeBgClr()\"\r\n    [style.border-top]=\"themeModeBorderTop()\"\r\n    [ngStyle]=\"{\r\n      'font-family': selectedFont,\r\n      'font-size': selectedFontSize + 'px',\r\n      'border-bottom-left-radius': IsOpen ? '0' : '20px',\r\n      'border-bottom-right-radius': IsOpen ? '0' : '20px',\r\n      'min-height': IsOpen ? '93vh' : '405px',\r\n      'max-height': IsOpen ? '93vh' : '405px'\r\n    }\"\r\n    placeholder=\"Insert text here ...\"\r\n    readonly\r\n    (mouseup)=\"onTextSelect($event)\"\r\n    (input)=\"onModelChange($event)\"\r\n    [innerHTML]=\"sanitizedContent\"\r\n    (paste)=\"onPaste($event)\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onBlur()\"\r\n    (click)=\"checkTableSelection($event)\"\r\n    (keydown)=\"handleTabKey($event)\"\r\n  ></div>\r\n\r\n  <table *ngIf=\"parsedTable\">\r\n    <thead>\r\n      <tr>\r\n        <th *ngFor=\"let header of parsedTable.headers\">{{ header }}</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let row of parsedTable.rows\">\r\n        <td *ngFor=\"let cell of row\">{{ cell }}</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";*{font-family:Noto Sans Telugu UI,sans-serif}#editor{position:relative!important;overflow:auto;max-height:405px;min-height:405px;padding:16px;box-sizing:border-box}#editor.open{max-height:93vh;border-bottom-left-radius:0;border-bottom-right-radius:0}#editor:focus{outline:none!important;border-color:transparent!important}#editor img{max-width:100%;height:auto}.bubble-toolbar{position:absolute;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026;z-index:1000;display:none}.els-text-editor{box-sizing:border-box}.els-btn-toolbar{width:\"1028px\"}.els-toolbar-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.els-toolbar-button-2{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:100px;color:#fff}.els-toolbar-button-2 :hover{color:#555!important}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:80%;padding-left:8px;padding-right:5px;position:relative;width:100%;color:#000}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#ccc}.els-border:focus{outline:none}.els-dropdown-item{width:50px!important}.els-toolbar-button.active,.btn-toolbar .btn.active,.btn-toolbar .btn:hover{color:#06c}.dropdown-toggle:after{display:none}.table-container{overflow-x:auto;width:100%}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse;table-layout:fixed}table td,table th{padding:.75rem;vertical-align:top;border:1px solid #dee2e6;word-wrap:break-word}@media (max-width: 576px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-spacing:0}table thead,table tbody,table tr,table th,table td{display:block}table thead tr{position:absolute;top:-9999px;left:-9999px}table tr{margin-bottom:.625rem;border:1px solid #ccc}table td,table th{border:none;border-bottom:1px solid #ddd;position:relative;padding-left:50%;white-space:normal;text-align:left}table td:before,table th:before{position:absolute;top:.75rem;left:.75rem;width:45%;padding-right:.75rem;white-space:nowrap;text-align:left;font-weight:700}}table.resizable{overflow:hidden;resize:both}.btn-group .btn{display:flex;align-items:center;justify-content:center}.btn-group .mdi{font-size:18px}.icon-with-underline{text-decoration:underline}pre{background-color:#f0f0f0;border:1px solid #ccc;border-radius:5px;overflow-x:auto}code{display:block;white-space:pre-wrap;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px}.parent-container{height:100%;overflow:visible}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;cursor:pointer}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#555}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.pasted-table{border-collapse:collapse;width:100%}.pasted-table td{border:1px solid black;padding:8px}.pasted-table tr:nth-child(even){background-color:#f2f2f2}.pasted-table tr:hover{background-color:#ddd}.vertical-line{height:28px;margin:0 auto}.image-edit-button{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;background-color:#fff!important;border:2px solid #fff!important;padding:10px!important;color:#313a46!important;z-index:1000!important;-webkit-user-select:none!important;user-select:none!important;opacity:.5!important;cursor:default!important;transition:none!important;animation:none!important;pointer-events:none!important}.image-edit-button:hover{background-color:#f0f0f0}img{position:relative}.els-text-format{font-weight:800!important}.els-text-format>button{color:#000!important}.els-text-format>button:hover{background-color:#7d6d6d!important;color:#fff!important}.fullscreen-editor{width:100vw!important;height:100vh!important;position:fixed;top:0;left:0;z-index:999;background-color:#fff;border:none;border-radius:0;padding:0!important}\n"], directives: [{ type: i3.NgxFullscreenDirective, selector: "[ngxFullscreen]", inputs: ["ngxFullscreen"], outputs: ["transition", "errors"], exportAs: ["ngxFullscreen"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i5.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i5.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "titlecase": i4.TitleCasePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ElTextEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'text-editor', providers: [{
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ElTextEditorComponent),
                             multi: true
-                        }], template: "<div class=\"container els-text-editor px-0\" id=\"textEditor\" #fullscreen=\"ngxFullscreen\"\r\n                                        #textEditor\r\n                                            ngxFullscreen>\r\n    <div *ngIf=\"toolbarMode === 'fixed'\" class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\" role=\"toolbar\" [style.background]=\"themeModeBgClr()\"\r\n        [ngStyle]=\"{\r\n    'pointer-events': disableToolbar ? 'none' : 'auto',\r\n    'border-top-left-radius': IsOpen ? '0' : '20px',\r\n    'border-top-right-radius': IsOpen ? '0' : '20px'\r\n}\"\r\naria-label=\"Toolbar with button groups\"\r\nstyle=\"border-top-left-radius: 20px !important; border-top-right-radius: 20px !important;\"\r\n>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n            <div ngbDropdown class=\"dropdown\">\r\n                <button\r\n                    class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\" [style.border-radius]=\"'5px'\"\r\n                    id=\"headerDropdown\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\" ngbDropdownToggle>\r\n                    <span>{{selectedFormatBlock | titlecase}}</span> <i class=\"mdi mdi-chevron-down \"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n                    [style.border]=\"themeMode()\">\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h1>')\">\r\n                        <h1>Heading 1</h1>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h2>')\">\r\n                        <h2>Heading 2</h2>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h3>')\">\r\n                        <h3>Heading 3</h3>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h4>')\">\r\n                        <h4>Heading 4</h4>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h5>')\">\r\n                        <h5>Heading 5</h5>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<h6>')\">\r\n                        <h6>Heading 6</h6>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" [style.color]=\"themeModeClr()\"\r\n                        (click)=\"format('formatBlock', '<p>')\">\r\n                        <p>Normal</p>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n            <!-- <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff;border: 2px solid #7D6D6D !important;\" \r\n                [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n                <option class=\"els-form-option\" *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n            </select> -->\r\n            <div ngbDropdown class=\"dropdown\">\r\n                <button\r\n                    class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n                    id=\"headerDropdown\" style=\"width: 100px\" [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\"\r\n                    ngbDropdownToggle>\r\n                    <span style=\"width: 85px; font-weight: 700 !important;\" class=\"text-truncate\">{{selectedFont |\r\n                        titlecase}}</span>\r\n                    <i class=\"mdi mdi-chevron-down \"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\"\r\n                    [style.border]=\"themeMode()\">\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" *ngFor=\"let font of fonts\"\r\n                        (click)=\"changeFont(font)\" [style.color]=\"themeModeClr()\">\r\n                        <span>{{ font }}</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"py-0\"  style=\"height: fit-content;\" [style.color]=\"themeModeClr()\">\r\n            <div class=\"btn-group els-button-group me-2 mr-2 \" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n                    (click)=\"format('bold')\">\r\n                    <i class=\"mdi mdi-format-bold\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n                    (click)=\"format('italic')\">\r\n                    <i class=\"mdi mdi-format-italic\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n                    (click)=\"format('underline')\">\r\n                    <i class=\"mdi mdi-format-underline\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n                    (click)=\"format('strikethrough')\">\r\n                    <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n                </button>\r\n                <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n                    <input type=\"color\" id=\"textColorPicker\"\r\n                        style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                        (change)=\"setTextColor($event)\">\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n                        (click)=\"openColorPicker('textColorPicker')\">\r\n                        <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n                    </button>\r\n                </div>\r\n                <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n                        (click)=\"openColorPicker('bgColorPicker')\">\r\n                        <i class=\"mdi mdi-alpha-a-box\"></i>\r\n                    </button>\r\n                    <input type=\"color\" id=\"bgColorPicker\"\r\n                        style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                        (change)=\"setBackgroundColor($event)\">\r\n                </div>\r\n                <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n                        class=\"mdi mdi-format-list-numbered\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"format('insertUnorderedList')\"><i class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n                <div ngbDropdown class=\"ql-align\">\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button  arrow-none text-secondary\"\r\n                        id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                        <i class=\"mdi mdi-format-align-left \"></i>\r\n                    </button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n                            (click)=\"format('justifyLeft')\"><i class=\"mdi mdi-format-align-left\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n                            (click)=\"format('justifyCenter')\"><i class=\"mdi mdi-format-align-center\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n                            (click)=\"format('justifyRight')\"><i class=\"mdi mdi-format-align-right\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button text-dark\"\r\n                            (click)=\"format('justifyFull')\"><i class=\"mdi mdi-format-align-justify\"></i></button>\r\n                    </div>\r\n                </div>\r\n                <div class=\"vertical-line ms-2 border\" [style.border-left]=\"themeModeClrVerticalLine()\"></div>\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n                    (click)=\"format('subscript')\">\r\n                    <i class=\"mdi mdi-format-subscript\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n                    (click)=\"format('superscript')\">\r\n                    <i class=\"mdi mdi-format-superscript\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n                        class=\"mdi mdi-link-variant\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n                        class=\"mdi mdi-image\"></i></button>\r\n                <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\" accept=\"image/*\">\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n                        class=\"mdi mdi-table\"></i></button>\r\n                <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"addRow()\"><i class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n                <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n                <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n                <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n                    <button \r\n          \r\n          type=\"button\" \r\n          class=\"btn btn-white els-toolbar-button\" \r\n          *ngIf=\"isTableSelected\" \r\n          [style.color]=\"tHeadBgColor\" \r\n          (click)=\"openColorPicker('tHeadbgColorPicker')\" \r\n        > \r\n          <i class=\"mdi mdi-table-edit\"></i> \r\n        </button> \r\n        <input \r\n          type=\"color\" \r\n          id=\"tHeadbgColorPicker\" \r\n          style=\" \r\n            position: absolute; \r\n            top: 100%; \r\n            left: 0; \r\n            z-index: 100; \r\n            opacity: 0; \r\n          \" \r\n          (change)=\"setTheadBgColor($event)\" \r\n        />\r\n            </div>\r\n            <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"undo()\">\r\n                    <i class=\"mdi mdi-undo\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"redo()\">\r\n                    <i class=\"mdi mdi-redo\"></i>\r\n                </button>\r\n            </div> -->\r\n            <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n                <!-- <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n                            style=\"position: absolute;\">Edit Image</button> -->\r\n                <button class=\"btn btn-white els-toolbar-button\" (click)=\"clearTextEditor()\"\r\n                    style=\" width: fit-content !important;\">\r\n                    <i class=\"mdi mdi-close-circle\"></i>\r\n                </button>\r\n            </div>\r\n            <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Table Options\">\r\n                <button class=\"btn btn-white els-toolbar-button\" (click)=\"toggleFullscreen1()\">\r\n                    <ng-container *ngIf=\"IsOpen; else fullscreenIcon\">\r\n                        <i class=\"mdi mdi-fullscreen-exit\"></i> <!-- Collapse Icon -->\r\n                    </ng-container>\r\n                    <ng-template #fullscreenIcon>\r\n                        <i class=\"mdi mdi-fullscreen\"></i> <!-- Expand Icon -->\r\n                    </ng-template>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"toolbarMode === 'bubble'\" class=\"bubble-toolbar border p-2\"\r\n        [ngStyle]=\"{'top.px': toolbarTop, 'left.px': toolbarLeft, 'display': showToolbar ? 'block' : 'none'}\">\r\n        <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n            <select class=\"els-form-select\" [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n                <option *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n            </select>\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n                (click)=\"format('bold')\">\r\n                <i class=\"mdi mdi-format-bold\"></i>\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n                (click)=\"format('italic')\">\r\n                <i class=\"mdi mdi-format-italic\"></i>\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n                (click)=\"format('underline')\">\r\n                <i class=\"mdi mdi-format-underline\"></i>\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n                (click)=\"format('strikethrough')\">\r\n                <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n            </button>\r\n        </div>\r\n        <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('blockquote')\"><i\r\n                        class=\"mdi mdi-format-quote-close\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertCodeBlock()\"><i \r\n                        class=\"mdi mdi-code-tags\"></i></button>\r\n            </div> -->\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertOrderedList')\"><i\r\n                    class=\"mdi mdi-format-list-numbered\"></i></button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('insertUnorderedList')\"><i\r\n                    class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n            <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Color Formatting\"> -->\r\n            <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n                <!-- <div ngbDropdown class=\"ql-align\">\r\n                                <button type=\"button\" class=\"btn btn-outline-primary arrow-none text-secondary\" id=\"dropdownBasic1\"\r\n                                    aria-expanded=\"false\" ngbDropdownToggle>\r\n                                    <i class=\"mdi mdi-format-color-fill\"></i>\r\n                                </button>\r\n                                <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 300px;\">\r\n                                    <color-sketch color=\"#fff\" (onChangeComplete)=\"setTextColor($event)\"></color-sketch>\r\n                                </div>\r\n                            </div> -->\r\n                <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\" ngx-colors-trigger [(ngModel)]=\"color\"\r\n                                (ngModelChange)=\"logEvent($event, 'ngModelChange')\"\r\n                                (change)=\"logEvent($event, 'change')\"\r\n                                (input)=\"logEvent($event, 'input')\"\r\n                                >\r\n                                <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"\r\n                                    [style]=\"{color: color}\"></i>\r\n                                <ngx-colors style=\"display: none;\" ></ngx-colors>\r\n                            </div> -->\r\n                <input type=\"color\" id=\"textColorPicker\"\r\n                    style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                    (change)=\"setTextColor($event)\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n                    (click)=\"openColorPicker('textColorPicker')\">\r\n                    <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n                </button>\r\n            </div>\r\n\r\n            <!-- <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\">\r\n                            <input type=\"color\" id=\"bgColorPicker\" style=\"display: none;\" (change)=\"setBackgroundColor($event)\">\r\n                            <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                                (click)=\"openColorPicker('bgColorPicker')\">\r\n                                <i class=\"mdi mdi-alpha-a-box\"></i>\r\n                            </button>\r\n                        </div> -->\r\n            <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n                    (click)=\"openColorPicker('bgColorPicker')\">\r\n                    <i class=\"mdi mdi-alpha-a-box\"></i>\r\n                </button>\r\n                <!-- <input style=\"width: 0px !important;\" id=\"bgColorPicker\" [cpPresetColors]=\"['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']\"\r\n                                [(colorPicker)]=\"color\" (change)=\"setBackgroundColor($event)\" /> -->\r\n                <input type=\"color\" id=\"bgColorPicker\"\r\n                    style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                    (change)=\"setBackgroundColor($event)\">\r\n            </div>\r\n\r\n\r\n            <!-- </div> -->\r\n        </div>\r\n        <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n                    <div class=\"dropdown\">\r\n                            <button class=\"btn btn-white els-toolbar-button dropdown-toggle\" type=\"button\" id=\"headerDropdown\"\r\n                                    data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                                    <i class=\"mdi mdi-format-header-1\"></i>\r\n                            </button>\r\n                            <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdown\">\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\"><i\r\n                                                    class=\"mdi mdi-format-header-1\"></i> Heading 1</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\"><i\r\n                                                    class=\"mdi mdi-format-header-2\"></i> Heading 2</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\"><i\r\n                                                    class=\"mdi mdi-format-header-3\"></i> Heading 3</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\"><i\r\n                                                    class=\"mdi mdi-format-header-4\"></i> Heading 4</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\"><i\r\n                                                    class=\"mdi mdi-format-header-5\"></i> Heading 5</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\"><i\r\n                                                    class=\"mdi mdi-format-header-6\"></i> Heading 6</button>\r\n                            </div>\r\n                    </div>\r\n            </div> -->\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n            <div ngbDropdown class=\"dropdown\">\r\n                <button class=\"btn btn-white els-toolbar-dropdown-button dropdown-toggle\" id=\"headerDropdown\"\r\n                    ngbDropdownToggle>\r\n                    <span style=\"width: 85px;\">{{selectedFormatBlock | titlecase}}</span> <i\r\n                        class=\"mdi mdi-chevron-down text-dark\"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"headerDropdown\">\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\">\r\n                        <h1>Heading 1</h1>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\">\r\n                        <h2>Heading 2</h2>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\">\r\n                        <h3>Heading 3</h3>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\">\r\n                        <h4>Heading 4</h4>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\">\r\n                        <h5>Heading 5</h5>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\">\r\n                        <h6>Heading 6</h6>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"format('formatBlock', '<p>')\">\r\n                        <p>Normal</p>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <!-- <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('superscript')\"><i\r\n                        class=\"mdi mdi-format-superscript\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('subscript')\"><i\r\n                        class=\"mdi mdi-format-subscript\"></i></button> -->\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n                (click)=\"format('subscript')\">\r\n                <i class=\"mdi mdi-format-subscript\"></i>\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n                (click)=\"format('superscript')\">\r\n                <i class=\"mdi mdi-format-superscript\"></i>\r\n            </button>\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <div ngbDropdown class=\"ql-align\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n                    id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                    <i class=\"mdi mdi-format-align-left \"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyLeft')\"><i\r\n                            class=\"mdi mdi-format-align-left\"></i></button>\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyCenter')\"><i\r\n                            class=\"mdi mdi-format-align-center\"></i></button>\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyRight')\"><i\r\n                            class=\"mdi mdi-format-align-right\"></i></button>\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('justifyFull')\"><i\r\n                            class=\"mdi mdi-format-align-justify\"></i></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('removeFormat')\"><i\r\n                    class=\"mdi mdi-format-clear\"></i></button>\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n                    class=\"mdi mdi-link-variant\"></i></button>\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage()\"><i\r\n                    class=\"mdi mdi-image\"></i></button>\r\n            <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\" accept=\"image/*\">\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n                    class=\"mdi mdi-table\"></i></button>\r\n            <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addRow()\"><i\r\n                    class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n            <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n            <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n            <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n        </div>\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n            <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n                style=\"position: absolute;\">Edit Image</button>\r\n        </div>\r\n\r\n\r\n        <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\">\r\n        <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"></i>\r\n        <ngx-colors [(ngModel)]=\"color\" (change)=\"colorChanged($event)\"></ngx-colors>\r\n    </div> -->\r\n        <!-- <div class=\"btn-group els-button-group\" ngbDropdown aria-label=\"Table Options\">\r\n                <button class=\"btn btn-white els-toolbar-button\" ngbDropdownToggle  (click)=\"addTable()\">\r\n                    <i class=\"mdi mdi-table\"></i>\r\n                </button>\r\n            \r\n                <div ngbDropdownMenu *ngIf=\"isTableSelected || tableAdded\">\r\n                    <button class=\"dropdown-item\" (click)=\"addRow()\">\r\n                        <i class=\"mdi mdi-table-row-plus-after\"></i> Add Row\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"deleteRow()\">\r\n                        <i class=\"mdi mdi-table-row-remove\"></i> Delete Row\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"addColumn()\">\r\n                        <i class=\"mdi mdi-table-column-plus-after\"></i> Add Column\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"deleteColumn()\">\r\n                        <i class=\"mdi mdi-table-column-remove\"></i> Delete Column\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"tableWidth\">Table Width</label>\r\n                        <input type=\"number\" id=\"tableWidth\" class=\"form-control\" (change)=\"adjustTableWidth($event)\"\r\n                            placeholder=\"Width\">\r\n                    </div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"cellWidth\">Cell Width</label>\r\n                        <input type=\"number\" id=\"cellWidth\" class=\"form-control\" (change)=\"adjustCellWidth($event)\"\r\n                            placeholder=\"Width\">\r\n                    </div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"cellHeight\">Cell Height</label>\r\n                        <input type=\"number\" id=\"cellHeight\" class=\"form-control\" (change)=\"adjustCellHeight($event)\"\r\n                            placeholder=\"Height\">\r\n                    </div>\r\n                </div>\r\n            </div> -->\r\n    </div>\r\n    <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n        style=\"position: relative !important;border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; border-bottom-left-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\" [style.border-top]=\"themeModeBorderTop()\"\r\n        [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n        [style.min-height]=\"IsOpen ? '85vh !important' :  '405px !important'\"\r\n        (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\" readonly (mouseup)=\"onTextSelect($event)\"\r\n        [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n        (click)=\"checkTableSelection($event)\">\r\n    </div> -->\r\n    <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus overflow-auto\" #editor\r\n         style=\"position: relative !important;\r\n               \" [style.background]=\"themeModeBgClr()\"\r\n        [style.border-top]=\"themeModeBorderTop()\"\r\n        \r\n        [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px',\r\n           'border-bottom-left-radius': isOpen ? '0' :'20px',\r\n           'border-bottom-right-radius': isOpen ? '0' :'20px'\r\n        }\"\r\n        [style.min-height]=\"IsOpen ? '93vh' : '405px'\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n        readonly (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\"\r\n        (focus)=\"onFocus()\" (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n    </div> -->\r\n    <div [attr.contenteditable]=\"contentEditable\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus overflow-auto\" #editor\r\n        style=\"position: relative !important; overflow: auto;\" [style.background]=\"themeModeBgClr()\"\r\n        [style.border-top]=\"themeModeBorderTop()\" [ngStyle]=\"{\r\n                'font-family': selectedFont, \r\n                'font-size': selectedFontSize + 'px',\r\n                'border-bottom-left-radius': IsOpen ? '0' :'20px',\r\n                'border-bottom-right-radius': IsOpen ? '0' :'20px',\r\n                'min-height': IsOpen ? '93vh' : '405px',\r\n                'max-height': IsOpen ? '93vh' : '405px'\r\n            }\" placeholder=\"Insert text here ...\" readonly (mouseup)=\"onTextSelect($event)\"\r\n        (input)=\"onModelChange($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\" (keydown.Tab)=\"handleTabKey($event)\">\r\n    </div>\r\n\r\n    <table *ngIf=\"parsedTable\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngFor=\"let header of parsedTable.headers\">{{ header }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of parsedTable.rows\">\r\n                <td *ngFor=\"let cell of row\">{{ cell }}</td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n\r\n</div>", styles: ["@charset \"UTF-8\";*{font-family:Noto Sans Telugu UI,sans-serif}#editor{position:relative!important;overflow:auto;max-height:405px;min-height:405px;padding:16px;box-sizing:border-box}#editor.open{max-height:93vh;border-bottom-left-radius:0;border-bottom-right-radius:0}#editor:focus{outline:none!important;border-color:transparent!important}#editor img{max-width:100%;height:auto}.bubble-toolbar{position:absolute;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026;z-index:1000;display:none}.els-text-editor{box-sizing:border-box}.els-btn-toolbar{width:\"1028px\"}.els-toolbar-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.els-toolbar-button-2{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:100px;color:#fff}.els-toolbar-button-2 :hover{color:#555!important}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:80%;padding-left:8px;padding-right:5px;position:relative;width:100%;color:#000}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#ccc}.els-border:focus{outline:none}.els-dropdown-item{width:50px!important}.els-toolbar-button.active,.btn-toolbar .btn.active,.btn-toolbar .btn:hover{color:#06c}.dropdown-toggle:after{display:none}.table-container{overflow-x:auto;width:100%}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse;table-layout:fixed}table td,table th{padding:.75rem;vertical-align:top;border:1px solid #dee2e6;word-wrap:break-word}@media (max-width: 576px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-spacing:0}table thead,table tbody,table tr,table th,table td{display:block}table thead tr{position:absolute;top:-9999px;left:-9999px}table tr{margin-bottom:.625rem;border:1px solid #ccc}table td,table th{border:none;border-bottom:1px solid #ddd;position:relative;padding-left:50%;white-space:normal;text-align:left}table td:before,table th:before{position:absolute;top:.75rem;left:.75rem;width:45%;padding-right:.75rem;white-space:nowrap;text-align:left;font-weight:700}}table.resizable{overflow:hidden;resize:both}.btn-group .btn{display:flex;align-items:center;justify-content:center}.btn-group .mdi{font-size:18px}.icon-with-underline{text-decoration:underline}pre{background-color:#f0f0f0;border:1px solid #ccc;border-radius:5px;overflow-x:auto}code{display:block;white-space:pre-wrap;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px}.parent-container{height:100%;overflow:visible}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;cursor:pointer}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#555}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.pasted-table{border-collapse:collapse;width:100%}.pasted-table td{border:1px solid black;padding:8px}.pasted-table tr:nth-child(even){background-color:#f2f2f2}.pasted-table tr:hover{background-color:#ddd}.vertical-line{height:28px;margin:0 auto}.image-edit-button{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;background-color:#fff!important;border:2px solid #fff!important;padding:10px!important;color:#313a46!important;z-index:1000!important;-webkit-user-select:none!important;user-select:none!important;opacity:.5!important;cursor:default!important;transition:none!important;animation:none!important;pointer-events:none!important}.image-edit-button:hover{background-color:#f0f0f0}img{position:relative}.els-text-format{font-weight:800!important}.els-text-format>button{color:#000!important}.els-text-format>button:hover{background-color:#7d6d6d!important;color:#fff!important}.fullscreen-editor{width:100vw!important;height:100vh!important;position:fixed;top:0;left:0;z-index:999;background-color:#fff;border:none;border-radius:0;padding:0!important}\n"] }]
+                        }], template: "<div\r\n  class=\"container els-text-editor px-0\"\r\n  id=\"textEditor\"\r\n  #fullscreen=\"ngxFullscreen\"\r\n  #textEditor\r\n  ngxFullscreen\r\n>\r\n  <div\r\n    *ngIf=\"toolbarMode === 'fixed'\"\r\n    class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\"\r\n    role=\"toolbar\"\r\n    [style.background]=\"themeModeBgClr()\"\r\n    [ngStyle]=\"{\r\n      'pointer-events': disableToolbar ? 'none' : 'auto',\r\n      'border-top-left-radius': IsOpen ? '0' : '20px',\r\n      'border-top-right-radius': IsOpen ? '0' : '20px'\r\n    }\"\r\n    aria-label=\"Toolbar with button groups\"\r\n    style=\"\r\n      border-top-left-radius: 20px !important;\r\n      border-top-right-radius: 20px !important;\r\n    \"\r\n  >\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Header Options\"\r\n    >\r\n      <div ngbDropdown class=\"dropdown\">\r\n        <button\r\n          class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n          [style.border-radius]=\"'5px'\"\r\n          id=\"headerDropdown\"\r\n          [style.border]=\"themeMode()\"\r\n          [style.color]=\"themeModeClr()\"\r\n          ngbDropdownToggle\r\n        >\r\n          <span>{{ selectedFormatBlock | titlecase }}</span>\r\n          <i class=\"mdi mdi-chevron-down\"></i>\r\n        </button>\r\n        <div\r\n          ngbDropdownMenu\r\n          aria-labelledby=\"headerDropdown\"\r\n          class=\"els-text-format\"\r\n          [style.border]=\"themeMode()\"\r\n        >\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h1>')\"\r\n          >\r\n            <h1>Heading 1</h1>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h2>')\"\r\n          >\r\n            <h2>Heading 2</h2>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h3>')\"\r\n          >\r\n            <h3>Heading 3</h3>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h4>')\"\r\n          >\r\n            <h4>Heading 4</h4>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h5>')\"\r\n          >\r\n            <h5>Heading 5</h5>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<h6>')\"\r\n          >\r\n            <h6>Heading 6</h6>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            [style.color]=\"themeModeClr()\"\r\n            (click)=\"format('formatBlock', '<p>')\"\r\n          >\r\n            <p>Normal</p>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group\"\r\n      role=\"group\"\r\n      aria-label=\"Font Options\"\r\n    >\r\n      <!-- <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff;border: 2px solid #7D6D6D !important;\" \r\n                [(ngModel)]=\"selectedFont\" (change)=\"changeFont($event)\">\r\n                <option class=\"els-form-option\" *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n            </select> -->\r\n      <div ngbDropdown class=\"dropdown\">\r\n        <button\r\n          class=\"btn btn-white els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n          id=\"headerDropdown\"\r\n          style=\"width: 100px\"\r\n          [style.border]=\"themeMode()\"\r\n          [style.color]=\"themeModeClr()\"\r\n          ngbDropdownToggle\r\n        >\r\n          <span\r\n            style=\"width: 85px; font-weight: 700 !important\"\r\n            class=\"text-truncate\"\r\n            >{{ selectedFont | titlecase }}</span\r\n          >\r\n          <i class=\"mdi mdi-chevron-down\"></i>\r\n        </button>\r\n        <div\r\n          ngbDropdownMenu\r\n          aria-labelledby=\"headerDropdown\"\r\n          class=\"els-text-format\"\r\n          [style.border]=\"themeMode()\"\r\n        >\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            *ngFor=\"let font of fonts\"\r\n            (click)=\"changeFont(font)\"\r\n            [style.color]=\"themeModeClr()\"\r\n          >\r\n            <span>{{ font }}</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"py-0\"\r\n      style=\"height: fit-content\"\r\n      [style.color]=\"themeModeClr()\"\r\n    >\r\n      <div\r\n        class=\"btn-group els-button-group me-2 mr-2\"\r\n        role=\"group\"\r\n        aria-label=\"Text Formatting\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isBoldActive\"\r\n          (click)=\"format('bold')\"\r\n        >\r\n          <i class=\"mdi mdi-format-bold\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isItalicActive\"\r\n          (click)=\"format('italic')\"\r\n        >\r\n          <i class=\"mdi mdi-format-italic\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isUnderlineActive\"\r\n          (click)=\"format('underline')\"\r\n        >\r\n          <i class=\"mdi mdi-format-underline\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isStrikethroughActive\"\r\n          (click)=\"format('strikethrough')\"\r\n        >\r\n          <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n        </button>\r\n        <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n          <input\r\n            type=\"color\"\r\n            id=\"textColorPicker\"\r\n            style=\"\r\n              position: absolute;\r\n              top: 100%;\r\n              left: 0;\r\n              z-index: 100;\r\n              opacity: 0;\r\n            \"\r\n            (change)=\"setTextColor($event)\"\r\n          />\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            style=\"position: relative\"\r\n            (click)=\"openColorPicker('textColorPicker')\"\r\n          >\r\n            <i\r\n              class=\"mdi mdi-format-color-text icon-with-underline\"\r\n              [style.color]=\"selectedTextColor\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n        <div\r\n          class=\"btn-group\"\r\n          role=\"group\"\r\n          aria-label=\"Background Color\"\r\n          style=\"position: relative\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            [style.color]=\"backgroundColor\"\r\n            (click)=\"openColorPicker('bgColorPicker')\"\r\n          >\r\n            <i class=\"mdi mdi-alpha-a-box\"></i>\r\n          </button>\r\n          <input\r\n            type=\"color\"\r\n            id=\"bgColorPicker\"\r\n            style=\"\r\n              position: absolute;\r\n              top: 100%;\r\n              left: 0;\r\n              z-index: 100;\r\n              opacity: 0;\r\n            \"\r\n            (change)=\"setBackgroundColor($event)\"\r\n          />\r\n        </div>\r\n        <div\r\n          class=\"vertical-line ms-2 border\"\r\n          [style.border-left]=\"themeModeClrVerticalLine()\"\r\n        ></div>\r\n      </div>\r\n      <div\r\n        class=\"btn-group els-button-group mr-2\"\r\n        role=\"group\"\r\n        aria-label=\"Text Formatting\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"format('insertOrderedList')\"\r\n        >\r\n          <i class=\"mdi mdi-format-list-numbered\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"format('insertUnorderedList')\"\r\n        >\r\n          <i class=\"mdi mdi-format-list-bulleted\"></i>\r\n        </button>\r\n        <div ngbDropdown class=\"ql-align\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n            id=\"dropdownBasic1\"\r\n            aria-expanded=\"false\"\r\n            ngbDropdownToggle\r\n          >\r\n            <i class=\"mdi mdi-format-align-left\"></i>\r\n          </button>\r\n          <div\r\n            ngbDropdownMenu\r\n            aria-labelledby=\"dropdownBasic1\"\r\n            style=\"width: 3px\"\r\n          >\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-white els-toolbar-button text-dark\"\r\n              (click)=\"format('justifyLeft')\"\r\n            >\r\n              <i class=\"mdi mdi-format-align-left\"></i>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-white els-toolbar-button text-dark\"\r\n              (click)=\"format('justifyCenter')\"\r\n            >\r\n              <i class=\"mdi mdi-format-align-center\"></i>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-white els-toolbar-button text-dark\"\r\n              (click)=\"format('justifyRight')\"\r\n            >\r\n              <i class=\"mdi mdi-format-align-right\"></i>\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-white els-toolbar-button text-dark\"\r\n              (click)=\"format('justifyFull')\"\r\n            >\r\n              <i class=\"mdi mdi-format-align-justify\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"vertical-line ms-2 border\"\r\n          [style.border-left]=\"themeModeClrVerticalLine()\"\r\n        ></div>\r\n      </div>\r\n      <div\r\n        class=\"btn-group els-button-group mr-2\"\r\n        role=\"group\"\r\n        aria-label=\"Text Formatting\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isSubscriptActive\"\r\n          (click)=\"format('subscript')\"\r\n        >\r\n          <i class=\"mdi mdi-format-subscript\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [class.active]=\"isSuperscriptActive\"\r\n          (click)=\"format('superscript')\"\r\n        >\r\n          <i class=\"mdi mdi-format-superscript\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        class=\"btn-group els-button-group mr-2\"\r\n        role=\"group\"\r\n        aria-label=\"Text Formatting\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"addLink()\"\r\n        >\r\n          <i class=\"mdi mdi-link-variant\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"insertsImage()\"\r\n        >\r\n          <i class=\"mdi mdi-image\"></i>\r\n        </button>\r\n        <input\r\n          type=\"file\"\r\n          id=\"imageInput\"\r\n          style=\"display: none\"\r\n          (change)=\"handleImageUpload($event)\"\r\n          accept=\"image/*\"\r\n        />\r\n      </div>\r\n      <div\r\n        class=\"btn-group els-button-group mr-2\"\r\n        role=\"group\"\r\n        aria-label=\"Table Options\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"addTable()\"\r\n        >\r\n          <i class=\"mdi mdi-table\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"isTableSelected\"\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"addRow()\"\r\n        >\r\n          <i class=\"mdi mdi-table-row-plus-after\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"isTableSelected\"\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"deleteRow()\"\r\n        >\r\n          <i class=\"mdi mdi-table-row-remove\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"isTableSelected\"\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"addColumn()\"\r\n        >\r\n          <i class=\"mdi mdi-table-column-plus-after\"></i>\r\n        </button>\r\n        <button\r\n          *ngIf=\"isTableSelected\"\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"deleteColumn()\"\r\n        >\r\n          <i class=\"mdi mdi-table-column-remove\"></i>\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          *ngIf=\"isTableSelected\"\r\n          [style.color]=\"tHeadBgColor\"\r\n          (click)=\"openColorPicker('tHeadbgColorPicker')\"\r\n        >\r\n          <i class=\"mdi mdi-table-edit\"></i>\r\n        </button>\r\n        <input\r\n          type=\"color\"\r\n          id=\"tHeadbgColorPicker\"\r\n          style=\"\r\n            position: absolute;\r\n            top: 100%;\r\n            left: 0;\r\n            z-index: 100;\r\n            opacity: 0;\r\n          \"\r\n          (change)=\"setTheadBgColor($event)\"\r\n        />\r\n      </div>\r\n      <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"undo()\">\r\n                    <i class=\"mdi mdi-undo\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"redo()\">\r\n                    <i class=\"mdi mdi-redo\"></i>\r\n                </button>\r\n            </div> -->\r\n      <div\r\n        class=\"btn-group els-button-group\"\r\n        role=\"group\"\r\n        aria-label=\"Table Options\"\r\n      >\r\n        <!-- <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n                            style=\"position: absolute;\">Edit Image</button> -->\r\n        <button\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"clearTextEditor()\"\r\n          style=\"width: fit-content !important\"\r\n        >\r\n          <i class=\"mdi mdi-close-circle\"></i>\r\n        </button>\r\n      </div>\r\n      <div\r\n        class=\"btn-group els-button-group\"\r\n        role=\"group\"\r\n        aria-label=\"Table Options\"\r\n      >\r\n        <button\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          (click)=\"toggleFullscreen1()\"\r\n        >\r\n          <ng-container *ngIf=\"IsOpen; else fullscreenIcon\">\r\n            <i class=\"mdi mdi-fullscreen-exit\"></i>\r\n            <!-- Collapse Icon -->\r\n          </ng-container>\r\n          <ng-template #fullscreenIcon>\r\n            <i class=\"mdi mdi-fullscreen\"></i>\r\n            <!-- Expand Icon -->\r\n          </ng-template>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div\r\n    *ngIf=\"toolbarMode === 'bubble'\"\r\n    class=\"bubble-toolbar border p-2\"\r\n    [ngStyle]=\"{\r\n      'top.px': toolbarTop,\r\n      'left.px': toolbarLeft,\r\n      display: showToolbar ? 'block' : 'none'\r\n    }\"\r\n  >\r\n    <div\r\n      class=\"btn-group els-button-group\"\r\n      role=\"group\"\r\n      aria-label=\"Font Options\"\r\n    >\r\n      <select\r\n        class=\"els-form-select\"\r\n        [(ngModel)]=\"selectedFont\"\r\n        (change)=\"changeFont($event)\"\r\n      >\r\n        <option *ngFor=\"let font of fonts\" [value]=\"font\">{{ font }}</option>\r\n      </select>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isBoldActive\"\r\n        (click)=\"format('bold')\"\r\n      >\r\n        <i class=\"mdi mdi-format-bold\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isItalicActive\"\r\n        (click)=\"format('italic')\"\r\n      >\r\n        <i class=\"mdi mdi-format-italic\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isUnderlineActive\"\r\n        (click)=\"format('underline')\"\r\n      >\r\n        <i class=\"mdi mdi-format-underline\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isStrikethroughActive\"\r\n        (click)=\"format('strikethrough')\"\r\n      >\r\n        <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n      </button>\r\n    </div>\r\n    <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('blockquote')\"><i\r\n                        class=\"mdi mdi-format-quote-close\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertCodeBlock()\"><i \r\n                        class=\"mdi mdi-code-tags\"></i></button>\r\n            </div> -->\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"format('insertOrderedList')\"\r\n      >\r\n        <i class=\"mdi mdi-format-list-numbered\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"format('insertUnorderedList')\"\r\n      >\r\n        <i class=\"mdi mdi-format-list-bulleted\"></i>\r\n      </button>\r\n      <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Color Formatting\"> -->\r\n      <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n        <!-- <div ngbDropdown class=\"ql-align\">\r\n                                <button type=\"button\" class=\"btn btn-outline-primary arrow-none text-secondary\" id=\"dropdownBasic1\"\r\n                                    aria-expanded=\"false\" ngbDropdownToggle>\r\n                                    <i class=\"mdi mdi-format-color-fill\"></i>\r\n                                </button>\r\n                                <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 300px;\">\r\n                                    <color-sketch color=\"#fff\" (onChangeComplete)=\"setTextColor($event)\"></color-sketch>\r\n                                </div>\r\n                            </div> -->\r\n        <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\" ngx-colors-trigger [(ngModel)]=\"color\"\r\n                                (ngModelChange)=\"logEvent($event, 'ngModelChange')\"\r\n                                (change)=\"logEvent($event, 'change')\"\r\n                                (input)=\"logEvent($event, 'input')\"\r\n                                >\r\n                                <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"\r\n                                    [style]=\"{color: color}\"></i>\r\n                                <ngx-colors style=\"display: none;\" ></ngx-colors>\r\n                            </div> -->\r\n        <input\r\n          type=\"color\"\r\n          id=\"textColorPicker\"\r\n          style=\"\r\n            position: absolute;\r\n            top: 100%;\r\n            left: 0;\r\n            z-index: 100;\r\n            opacity: 0;\r\n          \"\r\n          (change)=\"setTextColor($event)\"\r\n        />\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          style=\"position: relative\"\r\n          (click)=\"openColorPicker('textColorPicker')\"\r\n        >\r\n          <i\r\n            class=\"mdi mdi-format-color-text icon-with-underline\"\r\n            [style.color]=\"selectedTextColor\"\r\n          ></i>\r\n        </button>\r\n      </div>\r\n\r\n      <!-- <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\">\r\n                            <input type=\"color\" id=\"bgColorPicker\" style=\"display: none;\" (change)=\"setBackgroundColor($event)\">\r\n                            <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                                (click)=\"openColorPicker('bgColorPicker')\">\r\n                                <i class=\"mdi mdi-alpha-a-box\"></i>\r\n                            </button>\r\n                        </div> -->\r\n      <div\r\n        class=\"btn-group\"\r\n        role=\"group\"\r\n        aria-label=\"Background Color\"\r\n        style=\"position: relative\"\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button\"\r\n          [style.color]=\"backgroundColor\"\r\n          (click)=\"openColorPicker('bgColorPicker')\"\r\n        >\r\n          <i class=\"mdi mdi-alpha-a-box\"></i>\r\n        </button>\r\n        <!-- <input style=\"width: 0px !important;\" id=\"bgColorPicker\" [cpPresetColors]=\"['#fff', '#000', '#2889e9', '#e920e9', '#fff500', 'rgb(236,64,64)']\"\r\n                                [(colorPicker)]=\"color\" (change)=\"setBackgroundColor($event)\" /> -->\r\n        <input\r\n          type=\"color\"\r\n          id=\"bgColorPicker\"\r\n          style=\"\r\n            position: absolute;\r\n            top: 100%;\r\n            left: 0;\r\n            z-index: 100;\r\n            opacity: 0;\r\n          \"\r\n          (change)=\"setBackgroundColor($event)\"\r\n        />\r\n      </div>\r\n\r\n      <!-- </div> -->\r\n    </div>\r\n    <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n                    <div class=\"dropdown\">\r\n                            <button class=\"btn btn-white els-toolbar-button dropdown-toggle\" type=\"button\" id=\"headerDropdown\"\r\n                                    data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n                                    <i class=\"mdi mdi-format-header-1\"></i>\r\n                            </button>\r\n                            <div class=\"dropdown-menu\" aria-labelledby=\"headerDropdown\">\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h1>')\"><i\r\n                                                    class=\"mdi mdi-format-header-1\"></i> Heading 1</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h2>')\"><i\r\n                                                    class=\"mdi mdi-format-header-2\"></i> Heading 2</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h3>')\"><i\r\n                                                    class=\"mdi mdi-format-header-3\"></i> Heading 3</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h4>')\"><i\r\n                                                    class=\"mdi mdi-format-header-4\"></i> Heading 4</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h5>')\"><i\r\n                                                    class=\"mdi mdi-format-header-5\"></i> Heading 5</button>\r\n                                    <button class=\"dropdown-item\" type=\"button\" (click)=\"format('formatBlock', '<h6>')\"><i\r\n                                                    class=\"mdi mdi-format-header-6\"></i> Heading 6</button>\r\n                            </div>\r\n                    </div>\r\n            </div> -->\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Header Options\"\r\n    >\r\n      <div ngbDropdown class=\"dropdown\">\r\n        <button\r\n          class=\"btn btn-white els-toolbar-dropdown-button dropdown-toggle\"\r\n          id=\"headerDropdown\"\r\n          ngbDropdownToggle\r\n        >\r\n          <span style=\"width: 85px\">{{ selectedFormatBlock | titlecase }}</span>\r\n          <i class=\"mdi mdi-chevron-down text-dark\"></i>\r\n        </button>\r\n        <div ngbDropdownMenu aria-labelledby=\"headerDropdown\">\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h1>')\"\r\n          >\r\n            <h1>Heading 1</h1>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h2>')\"\r\n          >\r\n            <h2>Heading 2</h2>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h3>')\"\r\n          >\r\n            <h3>Heading 3</h3>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h4>')\"\r\n          >\r\n            <h4>Heading 4</h4>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h5>')\"\r\n          >\r\n            <h5>Heading 5</h5>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<h6>')\"\r\n          >\r\n            <h6>Heading 6</h6>\r\n          </button>\r\n          <button\r\n            class=\"dropdown-item pb-0\"\r\n            type=\"button\"\r\n            (click)=\"format('formatBlock', '<p>')\"\r\n          >\r\n            <p>Normal</p>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <!-- <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('superscript')\"><i\r\n                        class=\"mdi mdi-format-superscript\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"format('subscript')\"><i\r\n                        class=\"mdi mdi-format-subscript\"></i></button> -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isSubscriptActive\"\r\n        (click)=\"format('subscript')\"\r\n      >\r\n        <i class=\"mdi mdi-format-subscript\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        [class.active]=\"isSuperscriptActive\"\r\n        (click)=\"format('superscript')\"\r\n      >\r\n        <i class=\"mdi mdi-format-superscript\"></i>\r\n      </button>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <div ngbDropdown class=\"ql-align\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n          id=\"dropdownBasic1\"\r\n          aria-expanded=\"false\"\r\n          ngbDropdownToggle\r\n        >\r\n          <i class=\"mdi mdi-format-align-left\"></i>\r\n        </button>\r\n        <div\r\n          ngbDropdownMenu\r\n          aria-labelledby=\"dropdownBasic1\"\r\n          style=\"width: 3px\"\r\n        >\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            (click)=\"format('justifyLeft')\"\r\n          >\r\n            <i class=\"mdi mdi-format-align-left\"></i>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            (click)=\"format('justifyCenter')\"\r\n          >\r\n            <i class=\"mdi mdi-format-align-center\"></i>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            (click)=\"format('justifyRight')\"\r\n          >\r\n            <i class=\"mdi mdi-format-align-right\"></i>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-white els-toolbar-button\"\r\n            (click)=\"format('justifyFull')\"\r\n          >\r\n            <i class=\"mdi mdi-format-align-justify\"></i>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"format('removeFormat')\"\r\n      >\r\n        <i class=\"mdi mdi-format-clear\"></i>\r\n      </button>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Text Formatting\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"addLink()\"\r\n      >\r\n        <i class=\"mdi mdi-link-variant\"></i>\r\n      </button>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"insertsImage()\"\r\n      >\r\n        <i class=\"mdi mdi-image\"></i>\r\n      </button>\r\n      <input\r\n        type=\"file\"\r\n        id=\"imageInput\"\r\n        style=\"display: none\"\r\n        (change)=\"handleImageUpload($event)\"\r\n        accept=\"image/*\"\r\n      />\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Table Options\"\r\n    >\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"addTable()\"\r\n      >\r\n        <i class=\"mdi mdi-table\"></i>\r\n      </button>\r\n      <button\r\n        *ngIf=\"isTableSelected\"\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"addRow()\"\r\n      >\r\n        <i class=\"mdi mdi-table-row-plus-after\"></i>\r\n      </button>\r\n      <button\r\n        *ngIf=\"isTableSelected\"\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"deleteRow()\"\r\n      >\r\n        <i class=\"mdi mdi-table-row-remove\"></i>\r\n      </button>\r\n      <button\r\n        *ngIf=\"isTableSelected\"\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"addColumn()\"\r\n      >\r\n        <i class=\"mdi mdi-table-column-plus-after\"></i>\r\n      </button>\r\n      <button\r\n        *ngIf=\"isTableSelected\"\r\n        type=\"button\"\r\n        class=\"btn btn-white els-toolbar-button\"\r\n        (click)=\"deleteColumn()\"\r\n      >\r\n        <i class=\"mdi mdi-table-column-remove\"></i>\r\n      </button>\r\n    </div>\r\n    <div\r\n      class=\"btn-group els-button-group mr-2\"\r\n      role=\"group\"\r\n      aria-label=\"Table Options\"\r\n    >\r\n      <button\r\n        *ngIf=\"selectedImage\"\r\n        class=\"btn btn-white els-toolbar-button-2\"\r\n        (click)=\"editImage()\"\r\n        style=\"position: absolute\"\r\n      >\r\n        Edit Image\r\n      </button>\r\n    </div>\r\n\r\n    <!-- <div class=\"btn btn-white els-toolbar-button custom-color-trigger\">\r\n        <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"color\"></i>\r\n        <ngx-colors [(ngModel)]=\"color\" (change)=\"colorChanged($event)\"></ngx-colors>\r\n    </div> -->\r\n    <!-- <div class=\"btn-group els-button-group\" ngbDropdown aria-label=\"Table Options\">\r\n                <button class=\"btn btn-white els-toolbar-button\" ngbDropdownToggle  (click)=\"addTable()\">\r\n                    <i class=\"mdi mdi-table\"></i>\r\n                </button>\r\n            \r\n                <div ngbDropdownMenu *ngIf=\"isTableSelected || tableAdded\">\r\n                    <button class=\"dropdown-item\" (click)=\"addRow()\">\r\n                        <i class=\"mdi mdi-table-row-plus-after\"></i> Add Row\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"deleteRow()\">\r\n                        <i class=\"mdi mdi-table-row-remove\"></i> Delete Row\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"addColumn()\">\r\n                        <i class=\"mdi mdi-table-column-plus-after\"></i> Add Column\r\n                    </button>\r\n                    <button class=\"dropdown-item\" (click)=\"deleteColumn()\">\r\n                        <i class=\"mdi mdi-table-column-remove\"></i> Delete Column\r\n                    </button>\r\n                    <div class=\"dropdown-divider\"></div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"tableWidth\">Table Width</label>\r\n                        <input type=\"number\" id=\"tableWidth\" class=\"form-control\" (change)=\"adjustTableWidth($event)\"\r\n                            placeholder=\"Width\">\r\n                    </div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"cellWidth\">Cell Width</label>\r\n                        <input type=\"number\" id=\"cellWidth\" class=\"form-control\" (change)=\"adjustCellWidth($event)\"\r\n                            placeholder=\"Width\">\r\n                    </div>\r\n                    <div class=\"dropdown-item\">\r\n                        <label for=\"cellHeight\">Cell Height</label>\r\n                        <input type=\"number\" id=\"cellHeight\" class=\"form-control\" (change)=\"adjustCellHeight($event)\"\r\n                            placeholder=\"Height\">\r\n                    </div>\r\n                </div>\r\n            </div> -->\r\n  </div>\r\n  <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus\" #editor\r\n        style=\"position: relative !important;border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; border-bottom-left-radius: 20px !important;\" [style.background]=\"themeModeBgClr()\" [style.border-top]=\"themeModeBorderTop()\"\r\n        [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n        [style.min-height]=\"IsOpen ? '85vh !important' :  '405px !important'\"\r\n        (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\" readonly (mouseup)=\"onTextSelect($event)\"\r\n        [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\r\n        (click)=\"checkTableSelection($event)\">\r\n    </div> -->\r\n  <!-- <div contenteditable=\"true\" id=\"editor\" class=\"p-3 custom-scrollbar non-focus overflow-auto\" #editor\r\n         style=\"position: relative !important;\r\n               \" [style.background]=\"themeModeBgClr()\"\r\n        [style.border-top]=\"themeModeBorderTop()\"\r\n        \r\n        [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px',\r\n           'border-bottom-left-radius': isOpen ? '0' :'20px',\r\n           'border-bottom-right-radius': isOpen ? '0' :'20px'\r\n        }\"\r\n        [style.min-height]=\"IsOpen ? '93vh' : '405px'\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n        readonly (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\"\r\n        (focus)=\"onFocus()\" (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n    </div> -->\r\n  <div\r\n    [attr.contenteditable]=\"contentEditable\"\r\n    id=\"editor\"\r\n    class=\"p-3 custom-scrollbar non-focus overflow-auto\"\r\n    #editor\r\n    style=\"position: relative !important; overflow: auto\"\r\n    [style.background]=\"themeModeBgClr()\"\r\n    [style.border-top]=\"themeModeBorderTop()\"\r\n    [ngStyle]=\"{\r\n      'font-family': selectedFont,\r\n      'font-size': selectedFontSize + 'px',\r\n      'border-bottom-left-radius': IsOpen ? '0' : '20px',\r\n      'border-bottom-right-radius': IsOpen ? '0' : '20px',\r\n      'min-height': IsOpen ? '93vh' : '405px',\r\n      'max-height': IsOpen ? '93vh' : '405px'\r\n    }\"\r\n    placeholder=\"Insert text here ...\"\r\n    readonly\r\n    (mouseup)=\"onTextSelect($event)\"\r\n    (input)=\"onModelChange($event)\"\r\n    [innerHTML]=\"sanitizedContent\"\r\n    (paste)=\"onPaste($event)\"\r\n    (focus)=\"onFocus()\"\r\n    (blur)=\"onBlur()\"\r\n    (click)=\"checkTableSelection($event)\"\r\n    (keydown)=\"handleTabKey($event)\"\r\n  ></div>\r\n\r\n  <table *ngIf=\"parsedTable\">\r\n    <thead>\r\n      <tr>\r\n        <th *ngFor=\"let header of parsedTable.headers\">{{ header }}</th>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let row of parsedTable.rows\">\r\n        <td *ngFor=\"let cell of row\">{{ cell }}</td>\r\n      </tr>\r\n    </tbody>\r\n  </table>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";*{font-family:Noto Sans Telugu UI,sans-serif}#editor{position:relative!important;overflow:auto;max-height:405px;min-height:405px;padding:16px;box-sizing:border-box}#editor.open{max-height:93vh;border-bottom-left-radius:0;border-bottom-right-radius:0}#editor:focus{outline:none!important;border-color:transparent!important}#editor img{max-width:100%;height:auto}.bubble-toolbar{position:absolute;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026;z-index:1000;display:none}.els-text-editor{box-sizing:border-box}.els-btn-toolbar{width:\"1028px\"}.els-toolbar-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.els-toolbar-button-2{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:100px;color:#fff}.els-toolbar-button-2 :hover{color:#555!important}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:80%;padding-left:8px;padding-right:5px;position:relative;width:100%;color:#000}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#ccc}.els-border:focus{outline:none}.els-dropdown-item{width:50px!important}.els-toolbar-button.active,.btn-toolbar .btn.active,.btn-toolbar .btn:hover{color:#06c}.dropdown-toggle:after{display:none}.table-container{overflow-x:auto;width:100%}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse;table-layout:fixed}table td,table th{padding:.75rem;vertical-align:top;border:1px solid #dee2e6;word-wrap:break-word}@media (max-width: 576px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-spacing:0}table thead,table tbody,table tr,table th,table td{display:block}table thead tr{position:absolute;top:-9999px;left:-9999px}table tr{margin-bottom:.625rem;border:1px solid #ccc}table td,table th{border:none;border-bottom:1px solid #ddd;position:relative;padding-left:50%;white-space:normal;text-align:left}table td:before,table th:before{position:absolute;top:.75rem;left:.75rem;width:45%;padding-right:.75rem;white-space:nowrap;text-align:left;font-weight:700}}table.resizable{overflow:hidden;resize:both}.btn-group .btn{display:flex;align-items:center;justify-content:center}.btn-group .mdi{font-size:18px}.icon-with-underline{text-decoration:underline}pre{background-color:#f0f0f0;border:1px solid #ccc;border-radius:5px;overflow-x:auto}code{display:block;white-space:pre-wrap;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px}.parent-container{height:100%;overflow:visible}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;cursor:pointer}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#555}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.pasted-table{border-collapse:collapse;width:100%}.pasted-table td{border:1px solid black;padding:8px}.pasted-table tr:nth-child(even){background-color:#f2f2f2}.pasted-table tr:hover{background-color:#ddd}.vertical-line{height:28px;margin:0 auto}.image-edit-button{position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-50%)!important;background-color:#fff!important;border:2px solid #fff!important;padding:10px!important;color:#313a46!important;z-index:1000!important;-webkit-user-select:none!important;user-select:none!important;opacity:.5!important;cursor:default!important;transition:none!important;animation:none!important;pointer-events:none!important}.image-edit-button:hover{background-color:#f0f0f0}img{position:relative}.els-text-format{font-weight:800!important}.els-text-format>button{color:#000!important}.els-text-format>button:hover{background-color:#7d6d6d!important;color:#fff!important}.fullscreen-editor{width:100vw!important;height:100vh!important;position:fixed;top:0;left:0;z-index:999;background-color:#fff;border:none;border-radius:0;padding:0!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i2.DomSanitizer }]; }, propDecorators: { editorText: [{
                 type: Input
             }], editorFrom: [{