@worktile/theia 2.1.8 → 2.1.12

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) {
@@ -2833,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
                     };
                 }
             };
@@ -2883,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;
@@ -2999,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: [{
@@ -5105,6 +5106,15 @@
         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, onKeydown = editor.onKeydown;
         editor.onClick = function (event) {
@@ -5137,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;
     };
 
@@ -6333,7 +6387,7 @@
                 return;
             }
             var props = {
-                align: alignment
+                align: alignment !== exports.Alignment.left ? alignment : null
             };
             slate.Transforms.setNodes(editor, props, {
                 at: editor.selection,
@@ -7299,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;
             }
@@ -7736,12 +7790,12 @@
         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: "\n    <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"] }] });
+    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: "\n    <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>"
                     }]
             }] });
     var TheReadonlyLinkComponent = /** @class */ (function (_super) {
@@ -11498,7 +11552,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();
@@ -11532,7 +11586,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: [{
@@ -11985,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);
@@ -11998,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) {
@@ -12140,42 +12191,6 @@
                 insertText(text);
             }
         };
-        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 isInlineCode = InlineCodeEditor.isInlineCodeActive(editor);
-            if (isCollapsed$1 && isMoveForward) {
-                var isInlineCodeBefore = false;
-                if (!isInlineCode) {
-                    var path = slate.Editor.after(editor, selection).path;
-                    isInlineCodeBefore = InlineCodeEditor.isInlineCodeActive(editor, path);
-                }
-                if (isInlineCode || isInlineCodeBefore) {
-                    event.preventDefault();
-                    slate.Transforms.move(editor, { unit: 'offset' });
-                    return;
-                }
-            }
-            if (isCollapsed$1 && isMoveBackward) {
-                var isInlineCodeAfter = false;
-                if (!isInlineCode) {
-                    var path = slate.Editor.before(editor, selection).path;
-                    isInlineCodeAfter = InlineCodeEditor.isInlineCodeActive(editor, path);
-                }
-                if (isInlineCode || isInlineCodeAfter) {
-                    event.preventDefault();
-                    slate.Transforms.move(editor, { unit: 'offset', reverse: true });
-                    return;
-                }
-            }
-            onKeydown(event);
-        };
         editor = withRemoveEmptyNodes({ type: exports.ElementKinds.inlineCode })(editor);
         return editor;
     };
@@ -13105,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();
             });
@@ -13133,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();
             }
@@ -13296,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: [{