@worktile/theia 2.1.11 → 2.1.15

package/bundles/worktile-theia.umd.js

@@ -506,73 +506,6 @@
     var VOID_BLOCK_TYPES = [exports.ElementKinds.image, exports.ElementKinds.hr];
     var BLOCK_DELETEBACKWARD_TYPES = [exports.ElementKinds.tableCell];
 
-    var TheToolbarGroupToken = new i0.InjectionToken('the-toolbar-group-token');
-    var QUICK_TOOLBAR_HOTKEY = '/';
-    exports.DropdownMode = void 0;
-    (function (DropdownMode) {
-        DropdownMode["icon"] = "icon-mode";
-        DropdownMode["text"] = "text-mode";
-    })(exports.DropdownMode || (exports.DropdownMode = {}));
-    exports.ToolbarItemMode = void 0;
-    (function (ToolbarItemMode) {
-        ToolbarItemMode[ToolbarItemMode["horizontal"] = 0] = "horizontal";
-        ToolbarItemMode[ToolbarItemMode["vertical"] = 1] = "vertical";
-    })(exports.ToolbarItemMode || (exports.ToolbarItemMode = {}));
-    var DefaultGlobalToolbarDefinition = [
-        exports.ElementKinds.headingList,
-        exports.ToolbarActionTypes.split,
-        exports.MarkTypes.bold,
-        exports.MarkTypes.italic,
-        exports.MarkTypes.underline,
-        exports.MarkTypes.strike,
-        exports.ElementKinds.inlineCode,
-        exports.MarkTypes.color,
-        exports.MarkTypes.backgroundColor,
-        exports.ToolbarActionTypes.split,
-        exports.ToolbarActionTypes.alignType,
-        exports.ToolbarActionTypes.verticalAlign,
-        exports.ToolbarActionTypes.split,
-        exports.ElementKinds.numberedList,
-        exports.ElementKinds.bulletedList,
-        exports.ToolbarActionTypes.split,
-        exports.ElementKinds.link,
-        exports.ElementKinds.image,
-        exports.ElementKinds.table,
-        exports.ElementKinds.blockquote,
-        exports.ElementKinds.code
-    ];
-    var DefaultInlineToolbarDefinition = [
-        exports.ToolbarActionTypes.clean,
-        exports.ToolbarActionTypes.split,
-        exports.MarkTypes.bold,
-        exports.MarkTypes.italic,
-        exports.MarkTypes.underline,
-        exports.MarkTypes.strike,
-        exports.ElementKinds.inlineCode,
-        exports.MarkTypes.color,
-        exports.MarkTypes.backgroundColor,
-        exports.ToolbarActionTypes.split,
-        exports.ToolbarActionTypes.alignType,
-        exports.ToolbarActionTypes.split,
-        exports.ElementKinds.link
-    ];
-    var DefaultQuickToolbarDefinition = __spreadArray(__spreadArray([], __read(STANDARD_HEADING_TYPES)), [
-        exports.ToolbarActionTypes.split,
-        exports.ElementKinds.numberedList,
-        exports.ElementKinds.bulletedList,
-        exports.ToolbarActionTypes.split,
-        exports.ElementKinds.link,
-        exports.ElementKinds.image,
-        exports.ElementKinds.table,
-        exports.ElementKinds.blockquote,
-        exports.ElementKinds.hr,
-        exports.ElementKinds.code
-    ]);
-    var ToolbarMoreGroup = {
-        key: 'more',
-        icon: 'more'
-    };
-
     exports.ErrorCodes = void 0;
     (function (ErrorCodes) {
         ErrorCodes[ErrorCodes["UNKNOW_ERROR"] = 1000] = "UNKNOW_ERROR";
@@ -665,6 +598,73 @@
     };
     var CODEMIRROR_PADDING_TOP = 10;
 
+    var TheToolbarGroupToken = new i0.InjectionToken('the-toolbar-group-token');
+    var QUICK_TOOLBAR_HOTKEY = '/';
+    exports.DropdownMode = void 0;
+    (function (DropdownMode) {
+        DropdownMode["icon"] = "icon-mode";
+        DropdownMode["text"] = "text-mode";
+    })(exports.DropdownMode || (exports.DropdownMode = {}));
+    exports.ToolbarItemMode = void 0;
+    (function (ToolbarItemMode) {
+        ToolbarItemMode[ToolbarItemMode["horizontal"] = 0] = "horizontal";
+        ToolbarItemMode[ToolbarItemMode["vertical"] = 1] = "vertical";
+    })(exports.ToolbarItemMode || (exports.ToolbarItemMode = {}));
+    var DefaultGlobalToolbarDefinition = [
+        exports.ElementKinds.headingList,
+        exports.ToolbarActionTypes.split,
+        exports.MarkTypes.bold,
+        exports.MarkTypes.italic,
+        exports.MarkTypes.underline,
+        exports.MarkTypes.strike,
+        exports.ElementKinds.inlineCode,
+        exports.MarkTypes.color,
+        exports.MarkTypes.backgroundColor,
+        exports.ToolbarActionTypes.split,
+        exports.ToolbarActionTypes.alignType,
+        exports.ToolbarActionTypes.verticalAlign,
+        exports.ToolbarActionTypes.split,
+        exports.ElementKinds.numberedList,
+        exports.ElementKinds.bulletedList,
+        exports.ToolbarActionTypes.split,
+        exports.ElementKinds.link,
+        exports.ElementKinds.image,
+        exports.ElementKinds.table,
+        exports.ElementKinds.blockquote,
+        exports.ElementKinds.code
+    ];
+    var DefaultInlineToolbarDefinition = [
+        exports.ToolbarActionTypes.clean,
+        exports.ToolbarActionTypes.split,
+        exports.MarkTypes.bold,
+        exports.MarkTypes.italic,
+        exports.MarkTypes.underline,
+        exports.MarkTypes.strike,
+        exports.ElementKinds.inlineCode,
+        exports.MarkTypes.color,
+        exports.MarkTypes.backgroundColor,
+        exports.ToolbarActionTypes.split,
+        exports.ToolbarActionTypes.alignType,
+        exports.ToolbarActionTypes.split,
+        exports.ElementKinds.link
+    ];
+    var DefaultQuickToolbarDefinition = __spreadArray(__spreadArray([], __read(STANDARD_HEADING_TYPES)), [
+        exports.ToolbarActionTypes.split,
+        exports.ElementKinds.numberedList,
+        exports.ElementKinds.bulletedList,
+        exports.ToolbarActionTypes.split,
+        exports.ElementKinds.link,
+        exports.ElementKinds.image,
+        exports.ElementKinds.table,
+        exports.ElementKinds.blockquote,
+        exports.ElementKinds.hr,
+        exports.ElementKinds.code
+    ]);
+    var ToolbarMoreGroup = {
+        key: 'more',
+        icon: 'more'
+    };
+
     var TheTextComponent = /** @class */ (function (_super) {
         __extends(TheTextComponent, _super);
         function TheTextComponent(elementRef, renderer2, cdr) {
@@ -689,10 +689,7 @@
                 }
             }
             var fontSize = this.text[exports.MarkTypes.fontSize];
-            if (fontSize) {
-                var attr = "the-" + exports.MarkTypes.fontSize;
-                this.renderer2.setAttribute(this.elementRef.nativeElement, attr, fontSize);
-            }
+            this.renderer2.setAttribute(this.elementRef.nativeElement, "the-" + exports.MarkTypes.fontSize, fontSize ? fontSize : null);
             if (this.text[exports.MarkTypes.color]) {
                 this.renderer2.setStyle(this.elementRef.nativeElement, 'color', this.text[exports.MarkTypes.color]);
             }
@@ -2080,6 +2077,13 @@
                         slate.Transforms.setNodes(editor, { type: exports.ElementKinds.paragraph, checked: undefined }, // todo remove checked
                         { at: path });
                     }
+                    else if (slate.Element.isElement(node) && node.type === exports.ElementKinds.paragraph) {
+                        var textIndent = node.textIndent;
+                        if (textIndent) {
+                            slate.Transforms.setNodes(editor, { textIndent: undefined }, // remove textIndent
+                            { at: path });
+                        }
+                    }
                     if (slate.Node.parent(editor, path).type !== exports.ElementKinds.listItem) {
                         slate.Transforms.wrapNodes(editor, { type: exports.ElementKinds.listItem, children: [] }, {
                             at: path,
@@ -7335,10 +7339,41 @@
             }
             i1.AngularEditor.focus(this.editor);
             slate.Transforms.select(this.editor, i1.AngularEditor.findPath(this.editor, this.element));
-            document.execCommand('copy');
-            this.thyNotifyService.success('复制成功');
+            if (i1.IS_SAFARI) {
+                this.safariCopy();
+                return;
+            }
+            document.execCommand('copy') ? this.thyNotifyService.success('复制成功') : this.thyNotifyService.error('复制失败');
             i1.AngularEditor.deselect(this.editor);
         };
+        TheCodeComponent.prototype.safariCopy = function () {
+            var currentElement = i1.AngularEditor.toDOMNode(this.editor, this.element);
+            var blockCard = currentElement.closest('.slate-block-card');
+            var span = document.createElement('pre');
+            span.appendChild(blockCard.cloneNode(true));
+            span.textContent = this.element.content;
+            if (this.element.language) {
+                span.setAttribute('data-language', this.element.language);
+            }
+            if (this.element.autoWrap) {
+                span.setAttribute('data-auto-wrap', String(this.element.autoWrap));
+            }
+            if (this.element.height) {
+                span.setAttribute('data-height', String(this.element.height));
+            }
+            document.body.appendChild(span);
+            var selection = window.getSelection();
+            var range = document.createRange();
+            if (selection) {
+                selection.removeAllRanges();
+                range.selectNode(span);
+                selection.addRange(range);
+                document.execCommand('copy') ? this.thyNotifyService.success('复制成功') : this.thyNotifyService.error('复制失败');
+                selection.removeAllRanges();
+                document.body.removeChild(span);
+                i1.AngularEditor.deselect(this.editor);
+            }
+        };
         TheCodeComponent.prototype.focusChange = function (codeMirrorFocused) {
             if (codeMirrorFocused) {
                 this.isHightLight = false;
@@ -7784,7 +7819,7 @@
             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);
+            _this.inlineChromiumBugfix = String.fromCodePoint(160);
             return _this;
         }
         return TheLinkComponent;
@@ -10030,7 +10065,7 @@
         ColumnResizingStore.prototype.restoreTopRows = function (deltaY) {
             var index = this.resizeRows.length - 1;
             while (index >= 0 && deltaY > 0) {
-                var currentHeight = coercePixelsFromCssValue(this.resizeRows[index].rowElement.style.height);
+                var currentHeight = this.resizeRows[index].rowElement.getBoundingClientRect().height;
                 if (this.resizeRows[index].baseHeight > currentHeight) {
                     if (this.resizeRows[index].baseHeight > currentHeight + deltaY) {
                         this.resizeRows[index].rowElement.style.height = coercion.coerceCssPixelValue(currentHeight + deltaY);
@@ -10691,10 +10726,23 @@
                 .pipe(takeUntilDestroyed, operators.filter(function (columnSize) { return columnSize.tableCell === _this.elementRef.nativeElement; }))
                 .subscribe(function (_c) {
                 var deltaSize = _c.deltaSize, previousSize = _c.previousSize, completeImmediately = _c.completeImmediately;
-                _this.elementRef.nativeElement.classList.add(OVERLAY_ACTIVE_CLASS);
-                _this.applySize(deltaSize, previousSize);
-                if (completeImmediately) {
-                    _this._completeResizeOperation();
+                var _d = _this.elementRef.nativeElement.getBoundingClientRect(), top = _d.top, left = _d.left, height = _d.height, width = _d.width;
+                var clientY = event.clientY, clientX = event.clientX;
+                var isApplySize = false;
+                if (_this.isXAxisHover) {
+                    var cellWidth = _this.hoverdDirection === 'left' ? 0 : width;
+                    isApplySize = deltaSize > 0 && left + cellWidth - clientX <= 0;
+                }
+                else {
+                    var cellHeight = _this.hoverdDirection === 'bottom' ? 0 : height;
+                    isApplySize = deltaSize > 0 && top + cellHeight - clientY <= 0;
+                }
+                if (isApplySize || deltaSize < 0) {
+                    _this.elementRef.nativeElement.classList.add(OVERLAY_ACTIVE_CLASS);
+                    _this.applySize(deltaSize, previousSize);
+                    if (completeImmediately) {
+                        _this._completeResizeOperation();
+                    }
                 }
             });
             rxjs.merge(this.resizeNotifier.resizeCanceled, this.resizeNotifier.resizeCompleted)
@@ -11552,7 +11600,7 @@
         TheVerticalToolbarItemComponent.prototype.execute = function (event) {
             var _a, _b;
             _super.prototype.execute.call(this, event);
-            if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.execute) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.readOnly) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
                 return;
             }
             this.openPopover();
@@ -11586,7 +11634,7 @@
         return TheVerticalToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheVerticalToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$6.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheVerticalToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                [ngStyle]=\"menu?.styles\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    TheVerticalToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: i0.TemplateRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheVerticalToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11831,7 +11879,7 @@
         return TheToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarItemComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { item: "item", editor: "editor", itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { 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: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { editor: "editor", item: "item", itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { 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: i5__namespace$1.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.15", ngImport: i0__namespace, type: TheToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11841,9 +11889,9 @@
                             class: 'the-toolbar-item'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { item: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.NgZone }, { type: i0__namespace.ComponentFactoryResolver }]; }, propDecorators: { editor: [{
                     type: i0.Input
-                }], editor: [{
+                }], item: [{
                     type: i0.Input
                 }], itemMode: [{
                     type: i0.Input
@@ -11870,14 +11918,17 @@
         }
         TheQuickToolbarComponent.prototype.handleMouseDown = function (event) {
             if (!this.elementRef.nativeElement.contains(event.target)) {
-                this.popoverRef.close();
+                QuickInsertEditor.closeQuickToolbar(this.editor);
             }
             else {
                 event.preventDefault();
             }
         };
         TheQuickToolbarComponent.prototype.handleEnter = function () {
-            this.popoverRef.close();
+            QuickInsertEditor.closeQuickToolbar(this.editor);
+        };
+        TheQuickToolbarComponent.prototype.handleEsc = function () {
+            QuickInsertEditor.closeQuickToolbar(this.editor);
         };
         TheQuickToolbarComponent.prototype.ngOnInit = function () {
             this.editorElement = i1.AngularEditor.toDOMNode(this.editor, this.editor);
@@ -11894,7 +11945,7 @@
         };
         TheQuickToolbarComponent.prototype.removeHotKey = function () {
             var node = slate.Node.get(this.editor, this.editor.selection.anchor.path);
-            if (node && slate.Text.equals({ text: QUICK_TOOLBAR_HOTKEY }, node)) {
+            if (node && QUICK_TOOLBAR_HOTKEY === node.text) {
                 slate.Editor.deleteBackward(this.editor);
             }
         };
@@ -11904,7 +11955,7 @@
         return TheQuickToolbarComponent;
     }(core.mixinUnsubscribe(core.MixinBase)));
     TheQuickToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickToolbarComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheQuickToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()" } }, usesInheritance: true, ngImport: i0__namespace, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [item]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i2__namespace$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["item", "editor", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    TheQuickToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0__namespace, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [item]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i2__namespace$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5__namespace$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["editor", "item", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheQuickToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11921,6 +11972,9 @@
                 }], handleEnter: [{
                     type: i0.HostListener,
                     args: ['document: keydown.enter']
+                }], handleEsc: [{
+                    type: i0.HostListener,
+                    args: ['document: keydown.escape']
                 }] } });
 
     var OperationTypes = ['insert_text', 'remove_node', 'merge_node'];
@@ -12039,7 +12093,7 @@
                 return;
             }
             // unset fontSize
-            if (isDefaultFontSize && Number(defaultFontSize) === fontSizeMark) {
+            if (isDefaultFontSize) {
                 FontSizeEditor.unsetFontSize(editor, size);
                 return;
             }
@@ -12139,18 +12193,18 @@
             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);
+            _this.inlineChromiumBugfix = String.fromCodePoint(160);
             return _this;
         }
         return TheInlineCodeComponent;
     }(TheBaseElementComponent));
     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"] }] });
+    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: " <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>"
+                        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>"
                     }]
             }] });
 
@@ -12372,8 +12426,9 @@
     };
 
     var TheToolbarComponent = /** @class */ (function () {
-        function TheToolbarComponent(cfr, elementRef, ngZone, toolbarGroupComponent) {
+        function TheToolbarComponent(cfr, cdr, elementRef, ngZone, toolbarGroupComponent) {
             this.cfr = cfr;
+            this.cdr = cdr;
             this.elementRef = elementRef;
             this.ngZone = ngZone;
             this.toolbarGroupComponent = toolbarGroupComponent;
@@ -12484,6 +12539,7 @@
                 }
                 _this.createMoreGroup(group);
             });
+            this.cdr.markForCheck();
         };
         /**
          * calculation display toolbar and more grouped toolbars
@@ -12645,7 +12701,7 @@
         };
         return TheToolbarComponent;
     }());
-    TheToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheToolbarComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ChangeDetectorRef }, { 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.15", 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: i3__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.15", ngImport: i0__namespace, type: TheToolbarComponent, decorators: [{
                 type: i0.Component,
@@ -12657,7 +12713,7 @@
                         }
                     }]
             }], ctorParameters: function () {
-            return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
+            return [{ type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: undefined, decorators: [{
                             type: i0.Inject,
                             args: [TheToolbarGroupToken]
                         }] }];