el-text-editor 0.0.39 → 0.0.41
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.
@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, EventEmitter, forwardRef, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
|
3
3
|
import * as i6 from '@angular/forms';
|
4
4
|
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
5
|
+
import { compress } from 'lz-string';
|
5
6
|
import * as i1 from '@angular/router';
|
6
7
|
import * as i2 from '@angular/platform-browser';
|
7
8
|
import * as i3 from '@ultimate/ngx-fullscreen';
|
@@ -25,7 +26,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
|
|
25
26
|
}]
|
26
27
|
}], ctorParameters: function () { return []; } });
|
27
28
|
|
28
|
-
// import { ImageEditorModalComponent } from '../modals/image-editor-modal/image-editor-modal.component';
|
29
29
|
class ElTextEditorComponent {
|
30
30
|
constructor(router, route, renderer, sanitizer) {
|
31
31
|
this.router = router;
|
@@ -1088,8 +1088,10 @@ class ElTextEditorComponent {
|
|
1088
1088
|
switch (this.editorFrom.name) {
|
1089
1089
|
case 'section-content':
|
1090
1090
|
data = { editIMG: true, from: 'htmlEditor', index: this.selectedItemIndex, id: this.editorFrom.id };
|
1091
|
-
|
1092
|
-
|
1091
|
+
const compressedData = compress(JSON.stringify(this.imageEditUrl));
|
1092
|
+
sessionStorage.setItem('editImageFromTemp', compressedData);
|
1093
|
+
const compressedData2 = compress(this.editorText);
|
1094
|
+
sessionStorage.setItem('textEditor', compressedData2);
|
1093
1095
|
// alert('go to editor!')
|
1094
1096
|
this.navigateToIMGEditor(data);
|
1095
1097
|
break;
|
@@ -1098,8 +1100,10 @@ class ElTextEditorComponent {
|
|
1098
1100
|
data = { editIMG: true, from: 'createDocument', index: this.selectedItemIndex, id: this.editorFrom.id, sectionId: this.editorFrom.sectionId };
|
1099
1101
|
// this.navigateToIMGEditor(data);
|
1100
1102
|
this.openDialog(data);
|
1101
|
-
|
1102
|
-
|
1103
|
+
const compressedData3 = compress(JSON.stringify(this.imageEditUrl));
|
1104
|
+
const compressedData4 = compress(this.editorText);
|
1105
|
+
sessionStorage.setItem('editImageFromTemp2', compressedData3);
|
1106
|
+
sessionStorage.setItem('textEditor2', compressedData4);
|
1103
1107
|
break;
|
1104
1108
|
default:
|
1105
1109
|
null;
|
@@ -1332,14 +1336,14 @@ ElTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
1332
1336
|
provide: NG_VALUE_ACCESSOR,
|
1333
1337
|
useExisting: forwardRef(() => ElTextEditorComponent),
|
1334
1338
|
multi: true
|
1335
|
-
}], 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)\">\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 </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)\">\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 contenteditable=\"true\" 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)\">\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 } });
|
1339
|
+
}], 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)\">\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 </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)\">\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 contenteditable=\"true\" 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)\">\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 } });
|
1336
1340
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElTextEditorComponent, decorators: [{
|
1337
1341
|
type: Component,
|
1338
1342
|
args: [{ selector: 'text-editor', providers: [{
|
1339
1343
|
provide: NG_VALUE_ACCESSOR,
|
1340
1344
|
useExisting: forwardRef(() => ElTextEditorComponent),
|
1341
1345
|
multi: true
|
1342
|
-
}], 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)\">\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 </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)\">\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 contenteditable=\"true\" 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)\">\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"] }]
|
1346
|
+
}], 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)\">\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 </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)\">\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 contenteditable=\"true\" 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)\">\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"] }]
|
1343
1347
|
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i2.DomSanitizer }]; }, propDecorators: { editorText: [{
|
1344
1348
|
type: Input
|
1345
1349
|
}], editorFrom: [{
|