@worktile/theia 16.3.8 → 16.3.9

package/fesm2022/worktile-theia.mjs

@@ -4819,12 +4819,13 @@ class TheContextService {
         this.bindWindowResize();
     }
     getScrollContainer() {
-        return (this.options.nativeElement.closest(this.options.theOptions?.scrollContainer) ||
-            this.options.nativeElement.querySelector(this.options.theOptions?.scrollContainer));
+        const { scrollContainer } = this.options.editor?.options;
+        return this.options.nativeElement.closest(scrollContainer) || this.options.nativeElement.querySelector(scrollContainer);
     }
     rebindContainerScroll() {
         this.scrollSubscription?.unsubscribe();
-        if (this.options.theOptions?.scrollContainer) {
+        const { scrollContainer } = this.options.editor?.options;
+        if (scrollContainer) {
             const containerElement = this.getScrollContainer();
             if (containerElement) {
                 this.ngZone.runOutsideAngular(() => {
@@ -4882,11 +4883,8 @@ class TheContextService {
         }
         return this.options;
     }
-    getTheOptions() {
-        return this.options.theOptions;
-    }
     getDefaultFontSize() {
-        return this.options.theOptions?.fontSize || FontSizes.fontSize14;
+        return this.options.editor?.options?.fontSize || FontSizes.fontSize14;
     }
     getEditableElement() {
         return this.options.nativeElement.querySelector('.the-editor-typo');
@@ -6239,13 +6237,10 @@ const QuickInsertEditor = {
         const overlay = editor.injector.get(Overlay);
         const viewContainerRef = editor.injector.get(ViewContainerRef);
         const thyPopover = editor.injector.get(ThyPopover);
-        const thePresetConfig = editor.injector.get(THE_PRESET_CONFIG_TOKEN);
-        const presetPluginMenus = thePresetConfig?.options?.menu;
-        const pluginMenus = editor.options?.menu ?? presetPluginMenus;
         const pluginMenuRef = thyPopover.open(ThePluginMenuComponent, {
             initialState: {
                 editor,
-                thePluginMenu: pluginMenus
+                thePluginMenu: editor?.options?.menu
             },
             origin,
             viewContainerRef: viewContainerRef,
@@ -6954,8 +6949,7 @@ const AlignEditor = {
         return false;
     },
     isDisabled(editor) {
-        const contextService = editor?.injector?.get(TheContextService);
-        const { theOptions: { richMedia } } = contextService.getOptions();
+        const { richMedia } = editor.options;
         return getToolbarItemDisabled(editor, PluginKeys.align, richMedia ? [ElementKinds.image] : []);
     },
     setAlign(editor, alignment) {
@@ -9282,11 +9276,11 @@ class TheImageComponent extends TheBaseElementComponent {
             }, { at: this.selection });
         }
     }
-    cancelUpload(event) {
+    cancelUpload() {
         Transforms.removeNodes(this.editor, { at: this.selection });
     }
     isShouldOpen() {
-        const { theOptions: { richMedia } } = this.theContextService.getOptions();
+        const { richMedia } = this.editor?.options;
         return (!this?.readonly &&
             richMedia &&
             this.isCollapsedAndNonReadonly &&
@@ -16274,14 +16268,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 class TheEditorComponent {
+    get options() {
+        return this.editor?.options;
+    }
     get theGlobalToolbarInstance() {
         return this.theGlobalToolbar ? this.theGlobalToolbar : this.globalToolbarInstance;
     }
     get maxHeight() {
-        return this.theOptions?.maxHeight ? `${this.theOptions?.maxHeight}px` : null;
-    }
-    get inlineToolbarVisible() {
-        return this.theOptions?.inlineToolbarVisible ?? this.presetConfig?.options?.inlineToolbarVisible;
+        return this.options?.maxHeight ? `${this.options?.maxHeight}px` : null;
     }
     constructor(cdr, destroyRef, elementRef, injector, ngZone, viewContainerRef, theContextService, iconRegistry, presetConfig) {
         this.cdr = cdr;
@@ -16303,7 +16297,7 @@ class TheEditorComponent {
         this.onChangeCallback = () => { };
         this.onTouchedCallback = () => { };
         this.scrollSelectionIntoView = (e, domRange) => {
-            const { neededScrollIntoView } = this.theOptions;
+            const { neededScrollIntoView } = e.options;
             if (neededScrollIntoView && !neededScrollIntoView(this.editor)) {
                 return;
             }
@@ -16411,6 +16405,9 @@ class TheEditorComponent {
     }
     ngOnChanges(changes) {
         const options = changes.theOptions;
+        if (options && !options.firstChange) {
+            this.initializeOptions(options.currentValue);
+        }
         if (options && !options.firstChange && !isEqual(options.currentValue?.toolbar, options.previousValue?.toolbar)) {
             this.toolbarCalculate();
         }
@@ -16430,13 +16427,10 @@ class TheEditorComponent {
     initialize() {
         const plugins = this.getPlugins();
         this.editor = withTheia(withHistory(withAngular(createEditor(), CLIPBOARD_FORMAT_KEY)), plugins);
-        this.editor.options = this.theOptions;
-        this.editor.disabled = this.theOptions?.disabled;
-        this.editor.extraElementOptions = this.theOptions?.extraElementOptions;
         setEditorUUID(this.editor, idCreator());
         this.initializeMobileMode();
+        this.initializeOptions(this.theOptions);
         this.initializeContext();
-        this.initializeOptions();
         this.toolbarCalculate();
         this.initializeQuickInsert();
         this.initializeEvents();
@@ -16450,6 +16444,39 @@ class TheEditorComponent {
             this.applyAutoFocus();
         });
     }
+    initializeOptions(theOptions) {
+        const presetMode = this.presetConfig?.options?.mode;
+        const presetInlineToolbarVisible = this.presetConfig?.options?.inlineToolbarVisible;
+        const presetMenu = this.presetConfig?.options?.menu;
+        const presetToolbarAlign = this.presetConfig?.options?.toolbar?.align;
+        const presetGlobalToolbar = this.presetConfig?.options?.toolbar?.global;
+        const presetInlineToolbar = this.presetConfig?.options?.toolbar?.inline;
+        const optionsGlobalToolbar = theOptions?.toolbar?.global;
+        const optionsInlineToolbar = theOptions?.toolbar?.inline;
+        const options = {
+            readonly: false,
+            neededScrollIntoView: () => true,
+            ...theOptions,
+            mode: theOptions?.mode ?? presetMode ?? TheDataMode.html,
+            inlineToolbarVisible: theOptions?.inlineToolbarVisible ?? presetInlineToolbarVisible,
+            menu: theOptions?.menu ?? presetMenu ?? DefaultPluginMenu,
+            toolbar: {
+                align: theOptions?.toolbar?.align ?? presetToolbarAlign,
+                global: optionsGlobalToolbar ?? presetGlobalToolbar ?? DefaultGlobalToolbarDefinition,
+                inline: optionsInlineToolbar ?? presetInlineToolbar ?? DefaultInlineToolbarDefinition
+            }
+        };
+        this.editor.options = options;
+        this.editor.disabled = theOptions?.disabled;
+        this.editor.extraElementOptions = options?.extraElementOptions;
+    }
+    initializeContext() {
+        this.theContextService.initialize({
+            editor: this.editor,
+            nativeElement: this.elementRef.nativeElement,
+            viewContainerRef: this.viewContainerRef
+        });
+    }
     getPlugins() {
         const defaultPlugins = internalPlugins();
         const presetPlugins = this.presetConfig?.plugins ?? [];
@@ -16461,12 +16488,8 @@ class TheEditorComponent {
         this.isMobileMode = modeConfig && modeConfig.mode === TheMode.mobile;
     }
     toolbarCalculate() {
-        const optionsGlobalToolbar = this.theOptions?.toolbar?.global;
-        const optionsInlineToolbar = this.theOptions?.toolbar?.inline;
-        const presetGlobalToolbar = this.presetConfig?.options?.toolbar?.global;
-        const presetInlineToolbar = this.presetConfig?.options?.toolbar?.inline;
-        const globalToolbar = optionsGlobalToolbar ?? presetGlobalToolbar;
-        const inlineToolbar = optionsInlineToolbar ?? presetInlineToolbar;
+        const globalToolbar = this.options?.toolbar.global;
+        const inlineToolbar = this.options?.toolbar?.inline;
         const { globalToolbarClass, toolbarEntity } = createToolbar(this.editor, globalToolbar, inlineToolbar);
         this.globalToolbarClass = globalToolbarClass;
         this.toolbarEntity = toolbarEntity;
@@ -16476,35 +16499,11 @@ class TheEditorComponent {
             this.theGlobalToolbarInstance.editor = this.editor;
             this.theGlobalToolbarInstance.toolbarItems = this.toolbarEntity.global;
             this.theGlobalToolbarInstance.containerClass = this.globalToolbarClass;
-            this.theGlobalToolbarInstance.align = this?.theOptions?.toolbar?.align;
+            this.theGlobalToolbarInstance.align = this.options?.toolbar?.align;
             this.theGlobalToolbarInstance.setToolbarClass();
             this.theGlobalToolbarInstance.renderToolbarView();
         }
     }
-    initializeContext() {
-        this.theContextService.initialize({
-            theOptions: this.theOptions,
-            nativeElement: this.elementRef.nativeElement,
-            viewContainerRef: this.viewContainerRef
-        });
-    }
-    initializeOptions() {
-        const presetMode = this.presetConfig?.options?.mode;
-        const defaultMode = this.theOptions?.mode ?? presetMode ?? TheDataMode.html;
-        if (!this.theOptions) {
-            this.theOptions = {
-                readonly: false,
-                mode: defaultMode,
-                neededScrollIntoView: () => true
-            };
-        }
-        if (!this.theOptions.mode) {
-            this.theOptions = {
-                ...this.theOptions,
-                mode: defaultMode
-            };
-        }
-    }
     initializeQuickInsert() {
         const quickInsertPlugin = getPluginOptions(this.editor, PluginKeys.quickInsert);
         if (quickInsertPlugin.disabled || quickInsertPlugin.disabledPlus) {
@@ -16533,17 +16532,17 @@ class TheEditorComponent {
         });
     }
     applyAutoFocus() {
-        if (!this.theOptions?.disabled && !this.theOptions?.readonly) {
-            autoFocus(this.editor, this.theOptions?.autoFocus);
+        if (!this.options?.disabled && !this.options?.readonly) {
+            autoFocus(this.editor, this.options?.autoFocus);
         }
     }
     writeValue(value) {
-        const data = dataDeserialize(this.theOptions?.mode, value);
+        const data = dataDeserialize(this.options?.mode, value);
         // data-deserialize
         this.editorValue = data;
         this.cdr.markForCheck();
         setTimeout(() => {
-            if (!this.theOptions.readonly && AngularEditor.isFocused(this.editor) && this.editor.selection) {
+            if (!this.options.readonly && AngularEditor.isFocused(this.editor) && this.editor.selection) {
                 const selection = this.editor.selection;
                 Transforms.deselect(this.editor);
                 Transforms.select(this.editor, selection);
@@ -16567,14 +16566,15 @@ class TheEditorComponent {
         this.onChangeCallback(newValue);
     }
     serializingValue(value) {
-        if (this.theOptions?.mode === TheDataMode.html) {
+        const mode = this.options?.mode;
+        if (mode === TheDataMode.html) {
             let htmlValue = '';
             const isEmptyContent$1 = isEmptyContent(value);
             value.forEach((element) => {
                 let elementHtml = this.elementToHtml.get(element);
                 if (elementHtml === undefined) {
                     // serializing
-                    elementHtml = dataSerializing(this.theOptions?.mode, [element]);
+                    elementHtml = dataSerializing(mode, [element]);
                     htmlValue += elementHtml;
                     this.elementToHtml.set(element, elementHtml);
                     return;
@@ -16671,14 +16671,14 @@ class TheEditorComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: TheContextService }, { token: i4.ThyIconRegistry }, { token: THE_PRESET_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated", theUploadingStatus: "theUploadingStatus" }, host: { properties: { "class.the-editor-readonly": "theOptions?.readonly", "class.the-mobile-editor": "isMobileMode" }, classAttribute: "the-editor" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated", theUploadingStatus: "theUploadingStatus" }, host: { properties: { "class.the-editor-readonly": "editor.options?.readonly", "class.the-mobile-editor": "isMobileMode" }, classAttribute: "the-editor" }, providers: [
             TheContextService,
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TheEditorComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n  *ngIf=\"!theOptions?.readonly && !theGlobalToolbar && !isMobileMode\"\n  [ngClass]=\"{\n    'the-toolbar-disabled': theOptions?.disabled\n  }\"\n  #globalToolbar\n  [editor]=\"editor\"\n  [toolbarItems]=\"toolbarEntity.global\"\n  [containerClass]=\"globalToolbarClass\"\n  [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': theOptions?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"theOptions?.placeholder\"\n    [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n    [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  <ng-container *ngIf=\"!isMobileMode\">\n    <the-inline-toolbar\n      *ngIf=\"!theOptions?.readonly && inlineToolbarVisible\"\n      [editor]=\"editor\"\n      [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div *ngIf=\"!theOptions?.readonly\" theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n  </ng-container>\n\n  <the-template #templateInstance></the-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.ThyImageGroupComponent, selector: "thy-image-group, [thyImageGroup]" }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n  *ngIf=\"!options?.readonly && !theGlobalToolbar && !isMobileMode\"\n  [ngClass]=\"{\n    'the-toolbar-disabled': options?.disabled\n  }\"\n  #globalToolbar\n  [editor]=\"editor\"\n  [toolbarItems]=\"toolbarEntity.global\"\n  [containerClass]=\"globalToolbarClass\"\n  [align]=\"options?.toolbar?.align\"\n></the-toolbar>\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': options?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"options?.placeholder\"\n    [placeholderDecorate]=\"options?.placeholderDecorate ? options?.placeholderDecorate : null\"\n    [readonly]=\"options?.readonly || options?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  <ng-container *ngIf=\"!isMobileMode\">\n    <the-inline-toolbar\n      *ngIf=\"!options?.readonly && options?.inlineToolbarVisible\"\n      [editor]=\"editor\"\n      [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div *ngIf=\"!options?.readonly\" theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n  </ng-container>\n\n  <the-template #templateInstance></the-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.ThyImageGroupComponent, selector: "thy-image-group, [thyImageGroup]" }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
@@ -16691,9 +16691,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         }
                     ], host: {
                         class: 'the-editor',
-                        '[class.the-editor-readonly]': 'theOptions?.readonly',
+                        '[class.the-editor-readonly]': 'editor.options?.readonly',
                         '[class.the-mobile-editor]': 'isMobileMode'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<the-toolbar\n  *ngIf=\"!theOptions?.readonly && !theGlobalToolbar && !isMobileMode\"\n  [ngClass]=\"{\n    'the-toolbar-disabled': theOptions?.disabled\n  }\"\n  #globalToolbar\n  [editor]=\"editor\"\n  [toolbarItems]=\"toolbarEntity.global\"\n  [containerClass]=\"globalToolbarClass\"\n  [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': theOptions?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"theOptions?.placeholder\"\n    [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n    [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  <ng-container *ngIf=\"!isMobileMode\">\n    <the-inline-toolbar\n      *ngIf=\"!theOptions?.readonly && inlineToolbarVisible\"\n      [editor]=\"editor\"\n      [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div *ngIf=\"!theOptions?.readonly\" theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n  </ng-container>\n\n  <the-template #templateInstance></the-template>\n</div>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<the-toolbar\n  *ngIf=\"!options?.readonly && !theGlobalToolbar && !isMobileMode\"\n  [ngClass]=\"{\n    'the-toolbar-disabled': options?.disabled\n  }\"\n  #globalToolbar\n  [editor]=\"editor\"\n  [toolbarItems]=\"toolbarEntity.global\"\n  [containerClass]=\"globalToolbarClass\"\n  [align]=\"options?.toolbar?.align\"\n></the-toolbar>\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': options?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"options?.placeholder\"\n    [placeholderDecorate]=\"options?.placeholderDecorate ? options?.placeholderDecorate : null\"\n    [readonly]=\"options?.readonly || options?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  <ng-container *ngIf=\"!isMobileMode\">\n    <the-inline-toolbar\n      *ngIf=\"!options?.readonly && options?.inlineToolbarVisible\"\n      [editor]=\"editor\"\n      [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div *ngIf=\"!options?.readonly\" theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n  </ng-container>\n\n  <the-template #templateInstance></the-template>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: TheContextService }, { type: i4.ThyIconRegistry }, { type: undefined, decorators: [{
                     type: Optional
                 }, {