@worktile/theia 2.1.7 → 2.1.11

package/bundles/worktile-theia.umd.js

@@ -2197,8 +2197,12 @@
         unwrapInlineCode: function (editor) {
             slate.Transforms.unwrapNodes(editor, { match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; } });
         },
-        isInlineCodeActive: function (editor) {
-            var _a = __read(slate.Editor.nodes(editor, { match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; } }), 1), inlineCode = _a[0];
+        isInlineCodeActive: function (editor, path) {
+            var _a;
+            var _b = __read(slate.Editor.nodes(editor, {
+                at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+                match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; }
+            }), 1), inlineCode = _b[0];
             return !!inlineCode;
         }
     };
@@ -2829,7 +2833,7 @@
                         height: value.element.height,
                         thumbUrl: value.element.thumbUrl,
                         originUrl: value.element.originUrl,
-                        align: value.element.align || exports.Alignment.center
+                        align: value.element.align || exports.Alignment.left
                     };
                 }
             };
@@ -2879,6 +2883,7 @@
                             this.imageEntry = {
                                 height: height,
                                 width: width,
+                                align: this.imageEntry.align || exports.Alignment.center,
                                 thumbUrl: this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(file))
                             };
                             this.uploading = true;
@@ -2995,7 +3000,7 @@
         return TheImageComponent;
     }(TheBaseElementComponent));
     TheImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align || 'center'\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheImageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5101,8 +5106,17 @@
         return editor;
     };
 
+    var isInline = function (editor, path) {
+        var _a;
+        var _b = __read(slate.Editor.nodes(editor, {
+            at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+            match: function (n) { return slate.Element.isElement(n) && slate.Editor.isInline(editor, n) && !slate.Editor.isVoid(editor, n); }
+        }), 1), inlineNode = _b[0];
+        return !!inlineNode;
+    };
+
     var withMoveSelection = function (editor) {
-        var onClick = editor.onClick, deleteBackward = editor.deleteBackward;
+        var onClick = editor.onClick, deleteBackward = editor.deleteBackward, onKeydown = editor.onKeydown;
         editor.onClick = function (event) {
             var domSelection = window.getSelection();
             if (domSelection && !domSelection.isCollapsed && event.detail >= 2 && editor.selection) {
@@ -5133,6 +5147,50 @@
             }
             deleteBackward(unit);
         };
+        editor.onKeydown = function (event) {
+            var selection = editor.selection;
+            if (!selection || !selection.anchor || !selection.focus) {
+                onKeydown(event);
+                return;
+            }
+            var isMoveBackward = i1.hotkeys.isMoveBackward(event);
+            var isMoveForward = i1.hotkeys.isMoveForward(event);
+            var isCollapsed$1 = selection && isCollapsed(selection);
+            var isInlineNode = isInline(editor);
+            if (isCollapsed$1 && isMoveForward) {
+                var isInlineCodeBefore = false;
+                if (!isInlineNode) {
+                    try {
+                        var path = slate.Editor.after(editor, selection).path;
+                        if (path) {
+                            isInlineCodeBefore = isInline(editor, path);
+                        }
+                    }
+                    catch (error) { }
+                }
+                if (isInlineNode || isInlineCodeBefore) {
+                    event.preventDefault();
+                    slate.Transforms.move(editor, { unit: 'offset' });
+                    return;
+                }
+            }
+            if (isCollapsed$1 && isMoveBackward) {
+                var isInlineCodeAfter = false;
+                if (!isInlineNode) {
+                    try {
+                        var path = slate.Editor.before(editor, selection).path;
+                        isInlineCodeAfter = isInline(editor, path);
+                    }
+                    catch (error) { }
+                }
+                if (isInlineNode || isInlineCodeAfter) {
+                    event.preventDefault();
+                    slate.Transforms.move(editor, { unit: 'offset', reverse: true });
+                    return;
+                }
+            }
+            onKeydown(event);
+        };
         return editor;
     };
 
@@ -6329,7 +6387,7 @@
                 return;
             }
             var props = {
-                align: alignment
+                align: alignment !== exports.Alignment.left ? alignment : null
             };
             slate.Transforms.setNodes(editor, props, {
                 at: editor.selection,
@@ -7295,7 +7353,7 @@
             this.options = Object.assign(Object.assign({}, this.options), { lineWrapping: this.element.autoWrap || false });
         };
         TheCodeComponent.prototype.useHeight = function () {
-            if (this.element.height) {
+            if (this.element.height && this.config.mode !== 'print') {
                 this.resizeHeight = this.element.height;
                 this.maxHeight = this.element.height;
             }
@@ -7723,17 +7781,21 @@
     var TheLinkComponent = /** @class */ (function (_super) {
         __extends(TheLinkComponent, _super);
         function TheLinkComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            // Put this at the start and end of an inline component to work around this Chromium bug:
+            // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
+            _this.inlineChromiumBugfix = '$' + String.fromCodePoint(160);
+            return _this;
         }
         return TheLinkComponent;
     }(TheBaseLinkComponent));
     TheLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    TheLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0__namespace, template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheLinkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[theLink]',
-                        template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>"
+                        template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>"
                     }]
             }] });
     var TheReadonlyLinkComponent = /** @class */ (function (_super) {
@@ -11977,7 +12039,8 @@
                 return;
             }
             // unset fontSize
-            if (FontSizeEditor.unsetFontSize(editor, size, fontSizeMark, isDefaultFontSize)) {
+            if (isDefaultFontSize && Number(defaultFontSize) === fontSizeMark) {
+                FontSizeEditor.unsetFontSize(editor, size);
                 return;
             }
             FontSizeEditor.setFontSizeMark(editor, size);
@@ -11990,21 +12053,17 @@
             // set paragraph text fontSize
             slate.Editor.addMark(editor, exports.MarkTypes.fontSize, Number(size));
         },
-        unsetFontSize: function (editor, size, fontSizeMark, isDefaultFontSize) {
+        unsetFontSize: function (editor, size) {
             var _a;
             var isTable = TableEditor.isActive(editor);
-            if (fontSizeMark && isDefaultFontSize) {
-                // unset Table selectedCells fontSize
-                if (isTable && TableEditor.toggleMark(editor, true, exports.MarkTypes.fontSize, Number(size))) {
-                    return true;
-                }
-                // unset paragraph text fontSize
-                setMarks(editor, (_a = {},
-                    _a[exports.MarkTypes.fontSize] = null,
-                    _a), editor.selection);
-                return true;
+            // unset Table selectedCells fontSize
+            if (isTable && TableEditor.toggleMark(editor, true, exports.MarkTypes.fontSize, Number(size))) {
+                return;
             }
-            return false;
+            // unset paragraph text fontSize
+            setMarks(editor, (_a = {},
+                _a[exports.MarkTypes.fontSize] = null,
+                _a), editor.selection);
         },
         isFontSizeActive: function (editor, size) {
             if (editor.selection) {
@@ -12076,32 +12135,27 @@
 
     var TheInlineCodeComponent = /** @class */ (function (_super) {
         __extends(TheInlineCodeComponent, _super);
-        function TheInlineCodeComponent(elementRef, cdr) {
-            var _this = _super.call(this, elementRef, cdr) || this;
-            _this.elementRef = elementRef;
-            _this.cdr = cdr;
+        function TheInlineCodeComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            // Put this at the start and end of an inline component to work around this Chromium bug:
+            // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
+            _this.inlineChromiumBugfix = '$' + String.fromCodePoint(160);
             return _this;
         }
-        TheInlineCodeComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        TheInlineCodeComponent.prototype.ngOnDestroy = function () {
-            _super.prototype.ngOnDestroy.call(this);
-        };
         return TheInlineCodeComponent;
     }(TheBaseElementComponent));
-    TheInlineCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInlineCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheInlineCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0__namespace, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    TheInlineCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInlineCodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheInlineCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0__namespace, template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheInlineCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[theInlineCode]',
-                        template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>'
+                        template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>"
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
+            }] });
 
     var withInlineCode = function (editor) {
-        var isInline = editor.isInline, renderElement = editor.renderElement, insertText = editor.insertText;
+        var isInline = editor.isInline, renderElement = editor.renderElement, insertText = editor.insertText, onKeydown = editor.onKeydown;
         editor.isInline = function (element) {
             return element.type === exports.ElementKinds.inlineCode ? true : isInline(element);
         };
@@ -13066,6 +13120,9 @@
             });
             this.toolbarCalculate();
             setTimeout(function () {
+                // You need to wait for the editor rendering to complete
+                // before triggering the external toolbar assignment detection
+                _this.globalToolbarInit();
                 _this.theEditorCreated.emit(_this.editor);
                 _this.applyAutoFocus();
             });
@@ -13094,11 +13151,14 @@
             var toolbarOption = this.toolbarService.initialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline, toolbar === null || toolbar === void 0 ? void 0 : toolbar.quick);
             this.globalToolbarClass = ['the-global-toolbar', getToolbarClass(this.editor)];
             this.toolbarEntity = toolbarOption.toolbarEntity;
+        };
+        TheEditorComponent.prototype.globalToolbarInit = function () {
+            var _a, _b;
             if (this.theGlobalToolbar) {
                 this.theGlobalToolbarInstance.editor = this.editor;
-                this.theGlobalToolbarInstance.toolbarItems = toolbarOption.toolbarEntity.global;
+                this.theGlobalToolbarInstance.toolbarItems = this.toolbarEntity.global;
                 this.theGlobalToolbarInstance.containerClass = this.globalToolbarClass;
-                this.theGlobalToolbarInstance.align = toolbar === null || toolbar === void 0 ? void 0 : toolbar.align;
+                this.theGlobalToolbarInstance.align = (_b = (_a = this === null || this === void 0 ? void 0 : this.theOptions) === null || _a === void 0 ? void 0 : _a.toolbar) === null || _b === void 0 ? void 0 : _b.align;
                 this.theGlobalToolbarInstance.setToolbarClass();
                 this.theGlobalToolbarInstance.renderToolbarView();
             }
@@ -13257,7 +13317,7 @@
                 useExisting: i0.forwardRef(function () { return TheEditorComponent; }),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\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    class=\"the-editable-container\"\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        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions?.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\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    class=\"the-editable-container\"\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        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToobarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{