el-text-editor 0.0.42 → 0.0.44
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.
|
@@ -261,7 +261,6 @@ class ElTextEditorComponent {
|
|
|
261
261
|
// }
|
|
262
262
|
roleCheck() {
|
|
263
263
|
var _a;
|
|
264
|
-
console.log('his.userRole => el => ', this.userRole);
|
|
265
264
|
let userRoleName = [];
|
|
266
265
|
for (let i = 0; i <= this.userRole.length; ++i) {
|
|
267
266
|
userRoleName.push((_a = this.userRole[i]) === null || _a === void 0 ? void 0 : _a.name);
|
|
@@ -1102,12 +1101,12 @@ class ElTextEditorComponent {
|
|
|
1102
1101
|
case 'create-document':
|
|
1103
1102
|
this.imageEdit.emit();
|
|
1104
1103
|
data = { editIMG: true, from: 'createDocument', index: this.selectedItemIndex, id: this.editorFrom.id, sectionId: this.editorFrom.sectionId };
|
|
1105
|
-
// this.
|
|
1106
|
-
this.openDialog(data);
|
|
1104
|
+
// this.openDialog(data)
|
|
1107
1105
|
const compressedData3 = compress(JSON.stringify(this.imageEditUrl));
|
|
1108
1106
|
const compressedData4 = compress(this.editorText);
|
|
1109
1107
|
sessionStorage.setItem('editImageFromTemp2', compressedData3);
|
|
1110
1108
|
sessionStorage.setItem('textEditor2', compressedData4);
|
|
1109
|
+
this.navigateToIMGEditor(data);
|
|
1111
1110
|
break;
|
|
1112
1111
|
default:
|
|
1113
1112
|
null;
|
|
@@ -1341,14 +1340,14 @@ ElTextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
|
|
|
1341
1340
|
provide: NG_VALUE_ACCESSOR,
|
|
1342
1341
|
useExisting: forwardRef(() => ElTextEditorComponent),
|
|
1343
1342
|
multi: true
|
|
1344
|
-
}], 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 } });
|
|
1343
|
+
}], 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.color]=\"themeModeClr()\"\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 } });
|
|
1345
1344
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElTextEditorComponent, decorators: [{
|
|
1346
1345
|
type: Component,
|
|
1347
1346
|
args: [{ selector: 'text-editor', providers: [{
|
|
1348
1347
|
provide: NG_VALUE_ACCESSOR,
|
|
1349
1348
|
useExisting: forwardRef(() => ElTextEditorComponent),
|
|
1350
1349
|
multi: true
|
|
1351
|
-
}], 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"] }]
|
|
1350
|
+
}], 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.color]=\"themeModeClr()\"\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"] }]
|
|
1352
1351
|
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i2.DomSanitizer }]; }, propDecorators: { editorText: [{
|
|
1353
1352
|
type: Input
|
|
1354
1353
|
}], editorFrom: [{
|