@worktile/theia 1.2.11 → 1.2.12

package/bundles/worktile-theia.umd.js

@@ -1440,6 +1440,25 @@
         });
         return nodes;
     }
+    /**
+     * 删除 text 节点的 颜色/背景色
+     * @param node
+     */
+    function deleteColorAndBackgroundColorOfText(node) {
+        node.children.forEach(function (child) {
+            if (slate.Text.isText(child)) {
+                if (child['color']) {
+                    delete child['color'];
+                }
+                if (child['background-color']) {
+                    delete child['background-color'];
+                }
+            }
+            else {
+                deleteColorAndBackgroundColorOfText(child);
+            }
+        });
+    }
 
     var isAcrossBlocks = function (editor, fragment) {
         var startBlock = getStartBlock(editor, fragment[0]);
@@ -1569,7 +1588,7 @@
         return marks;
     };
 
-    var isContainer = function (editor, value) { return slate.Element.isElement(value) && editor.isContainer(value); };
+    var isContainer = function (editor, value) { return slate.Element.isElement(value) && editor.isContainer && editor.isContainer(value); };
 
     var getContainerBlocks = function (editor) {
         var containerNode = slate.Editor.above(editor, {
@@ -1845,26 +1864,6 @@
         i1.AngularEditor.focus(editor);
     };
 
-    var insertTheElements = function (editor, nodes) {
-        if (slate.Range.isExpanded(editor.selection)) {
-            slate.Editor.deleteFragment(editor);
-        }
-        var isEmptyParagraph$1 = isEmptyParagraph(editor, editor.selection.anchor);
-        var parentPath = slate.Path.parent(editor.selection.anchor.path);
-        slate.Editor.withoutNormalizing(editor, function () {
-            slate.Transforms.insertNodes(editor, nodes);
-            if (parentPath.length && isEmptyParagraph$1) {
-                slate.Transforms.delete(editor, { at: parentPath });
-                var lastPath = parentPath.pop();
-                slate.Transforms.select(editor, slate.Editor.end(editor, __spreadArray(__spreadArray([], __read(parentPath)), [lastPath + nodes.length - 1])));
-            }
-            else {
-                var lastPath = parentPath.pop();
-                slate.Transforms.select(editor, slate.Editor.end(editor, __spreadArray(__spreadArray([], __read(parentPath)), [lastPath + nodes.length])));
-            }
-        });
-    };
-
     var THE_EDITOR_UUID = new WeakMap();
     var THE_EDITOR_CONVERSION_HINT_REF = new WeakMap();
     var THE_EDITOR_QUICK_TOOLBAR_REF = new WeakMap();
@@ -1929,7 +1928,6 @@
         splitNode: splitNode,
         deleteElement: deleteElement,
         setEndSelection: setEndSelection,
-        insertTheElements: insertTheElements,
         closeConversionHint: closeConversionHint,
         handleContinualDeleteBackward: handleContinualDeleteBackward,
         handleContinualInsertBreak: handleContinualInsertBreak
@@ -2412,7 +2410,7 @@
                                         editor.undo();
                                         setTimeout(function () {
                                             slate.Transforms.select(editor, oldRange);
-                                            insertTheElements(editor, fragment_1);
+                                            slate.Transforms.insertFragment(editor, fragment_1);
                                             i1.AngularEditor.focus(editor);
                                         });
                                         return;
@@ -11020,7 +11018,9 @@
                     insertData(data);
                     return;
                 }
-                insertTheElements(editor, fragment);
+                // 过滤 text 节点的 color/background-color 属性
+                fragment.forEach(function (node) { return deleteColorAndBackgroundColorOfText(node); });
+                slate.Transforms.insertFragment(editor, fragment);
                 return;
             }
             insertData(data);
@@ -11535,10 +11535,11 @@
             deleteBackward(unit);
         };
         editor.onChange = function () {
+            var _a;
             onChange();
             if (editor.selection) {
                 var editorComponent = editor.injector.get(TheEditorComponent);
-                editorComponent.quickInsertInstance.checkStatus();
+                (_a = editorComponent.quickInsertInstance) === null || _a === void 0 ? void 0 : _a.checkStatus();
                 var block = slate.Node.ancestor(editor, [editor.selection.anchor.path[0]]);
                 if (!isCleanEmptyParagraph(editor) && slate.Node.string(block) !== QUICK_TOOLBAR_HOTKEY) {
                     QuickInsertEditor.closeQuickToolbar(editor);
@@ -11714,6 +11715,7 @@
             this.ngZone = ngZone;
             this.toolbarGroupComponent = toolbarGroupComponent;
             this.toolbarItems = [];
+            this.containerClass = [];
             this.isMore = true;
             this.components = new Map();
             this.moreGroupMenu = ToolbarMoreGroup;
@@ -11739,9 +11741,9 @@
             }
         };
         TheToolbarComponent.prototype.setToolbarClass = function () {
-            if (this.editor) {
-                var toolbarClass = getToolbarClass(this.editor);
-                this.elementRef.nativeElement.classList.add(toolbarClass);
+            var _a;
+            if (this.editor && !!this.containerClass.length) {
+                (_a = this.elementRef.nativeElement.classList).add.apply(_a, __spreadArray([], __read(this.containerClass)));
             }
         };
         TheToolbarComponent.prototype.resizeElement = function () {
@@ -11969,7 +11971,7 @@
         return TheToolbarComponent;
     }());
     TheToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: TheToolbarGroupToken }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i2__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { classAttribute: "the-toolbar-container" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<thy-icon-nav [style.justifyContent]=\"align\">\n    <ng-container #toolbarContainer></ng-container>\n    <ng-content></ng-content>\n    <ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n</thy-icon-nav>\n", components: [{ type: i2__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11990,6 +11992,8 @@
                     type: i0.Input
                 }], align: [{
                     type: i0.Input
+                }], containerClass: [{
+                    type: i0.Input
                 }], isMore: [{
                     type: i0.Input
                 }], afterTemplate: [{
@@ -12106,7 +12110,7 @@
         return TheInlineToolbarComponent;
     }());
     TheInlineToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i2__namespace$1.ScrollDispatcher }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheInlineToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0__namespace, template: "<the-toolbar\n        #inlineToolbar\n        class=\"the-inline-toolbar\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarItems\"\n        [isMore]=\"false\"\n    ></the-toolbar> ", isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheInlineToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0__namespace, template: "<the-toolbar\n        #inlineToolbar\n        class=\"the-inline-toolbar\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarItems\"\n        [isMore]=\"false\"\n    ></the-toolbar> ", isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12214,20 +12218,22 @@
             }
         };
         ThePlaceholderComponent.prototype.checkStatus = function () {
-            var _a, _b, _c;
+            var _this = this;
+            var _a, _b;
             var editor = this.editor;
             // empty content and no selection processing
-            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.autoFocus) && !(editor === null || editor === void 0 ? void 0 : editor.selection) && isEmptyContent(editor.children)) {
+            if (!(editor === null || editor === void 0 ? void 0 : editor.selection) && isEmptyContent(editor.children)) {
                 // normal top is 28, but margin-top: -41px is set when maxHeight is set, so top is 69
-                var firstTop = ((_b = this.options) === null || _b === void 0 ? void 0 : _b.maxHeight) ? 69 : 28;
+                var firstTop = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.maxHeight) ? 69 : 28;
                 this.updatePosition(30, firstTop);
                 return;
             }
             if (isCleanEmptyParagraph(editor)) {
-                var block = slate.Node.ancestor(editor, [(_c = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _c === void 0 ? void 0 : _c.anchor.path[0]]);
-                var rootNode = i1.AngularEditor.toDOMNode(editor, block);
-                this.isHide = false;
-                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
+                var block = slate.Node.ancestor(editor, [(_b = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _b === void 0 ? void 0 : _b.anchor.path[0]]);
+                var rootNode_1 = i1.AngularEditor.toDOMNode(editor, block);
+                setTimeout(function () {
+                    _this.updatePosition(rootNode_1.offsetLeft, rootNode_1.offsetTop);
+                });
                 return;
             }
             this.isHide = true;
@@ -12514,10 +12520,12 @@
             var toolbar = (_a = this === null || this === void 0 ? void 0 : this.theOptions) === null || _a === void 0 ? void 0 : _a.toolbar;
             var toolbarItems = toolbarCompose(toolbar === null || toolbar === void 0 ? void 0 : toolbar.toolbarItems);
             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;
             if (this.theGlobalToolbar) {
                 this.theGlobalToolbarInstance.editor = this.editor;
                 this.theGlobalToolbarInstance.toolbarItems = toolbarOption.toolbarEntity.global;
+                this.theGlobalToolbarInstance.containerClass = this.globalToolbarClass;
                 this.theGlobalToolbarInstance.align = toolbar === null || toolbar === void 0 ? void 0 : toolbar.align;
                 this.theGlobalToolbarInstance.setToolbarClass();
                 this.theGlobalToolbarInstance.renderToolbarView();
@@ -12536,14 +12544,14 @@
             this.onTouchedCallback = fn;
         };
         TheEditorComponent.prototype.valueChange = function (value) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             (_a = this.theGlobalToolbarInstance) === null || _a === void 0 ? void 0 : _a.statusChange(this.editor);
-            this.quickInsertInstance.checkStatus();
+            (_b = this.quickInsertInstance) === null || _b === void 0 ? void 0 : _b.checkStatus();
             this.placeholderInstance.checkStatus();
             // auto scroll view
-            var scrollContainer = (_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.scrollContainer;
-            var maxHeight = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.maxHeight;
-            if (!((_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.readonly) && (scrollContainer || maxHeight)) {
+            var scrollContainer = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.scrollContainer;
+            var maxHeight = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.maxHeight;
+            if (!((_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.readonly) && (scrollContainer || maxHeight)) {
                 var container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
                 this.autoScrollView(this.editor, container);
             }
@@ -12619,18 +12627,18 @@
             }
         };
         TheEditorComponent.prototype.handleSelectAll = function () {
-            var _e;
+            var _f;
             var node;
             if (!this.editor.selection) {
                 setEndSelection(this.editor);
             }
-            var _f = __read(slate.Range.edges(this.editor.selection), 2), start = _f[0], end = _f[1];
+            var _g = __read(slate.Range.edges(this.editor.selection), 2), start = _g[0], end = _g[1];
             var selectionRange = slate.Editor.range(this.editor, start, end);
             var containerBlocks = getContainerBlocks(this.editor);
             for (var i = 0; i < containerBlocks.length; i++) {
-                _e = __read(getNodesByType(this.editor, containerBlocks[i]), 1), node = _e[0];
+                _f = __read(getNodesByType(this.editor, containerBlocks[i]), 1), node = _f[0];
                 if (node) {
-                    var _g = __read(node, 2), path = _g[1];
+                    var _h = __read(node, 2), path = _h[1];
                     var isStartParent = slate.Path.equals(path, start.path.slice(0, path.length));
                     var isEndParent = slate.Path.equals(path, end.path.slice(0, path.length));
                     if (isStartParent && isEndParent) {
@@ -12673,7 +12681,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 }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    class=\"the-global-toolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\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        [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        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [options]=\"theOptions\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "isStrictDecorate", "trackBy", "readonly", "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"] }, { type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "options"] }, { 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"] }] });
+        ], 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 }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: 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        [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        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions?.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [options]=\"theOptions\"></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", "isStrictDecorate", "trackBy", "readonly", "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"] }, { type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "options"] }, { 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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12718,7 +12726,7 @@
                     args: ['globalToolbar']
                 }], quickInsertInstance: [{
                     type: i0.ViewChild,
-                    args: ['quickInsert']
+                    args: ['quickInsert', { static: true }]
                 }], placeholderInstance: [{
                     type: i0.ViewChild,
                     args: ['placeholder']
@@ -12854,7 +12862,7 @@
         return TheToolbarGroupComponent;
     }());
     TheToolbarGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarGroupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }], directives: [{ type: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{