@worktile/theia 2.1.8 → 2.1.12

package/fesm2015/worktile-theia.js

@@ -196,74 +196,6 @@ const LIST_BLOCK_TYPES = [ElementKinds.numberedList, ElementKinds.bulletedList];
 const VOID_BLOCK_TYPES = [ElementKinds.image, ElementKinds.hr];
 const BLOCK_DELETEBACKWARD_TYPES = [ElementKinds.tableCell];
 
-const TheToolbarGroupToken = new InjectionToken('the-toolbar-group-token');
-const QUICK_TOOLBAR_HOTKEY = '/';
-var DropdownMode;
-(function (DropdownMode) {
-    DropdownMode["icon"] = "icon-mode";
-    DropdownMode["text"] = "text-mode";
-})(DropdownMode || (DropdownMode = {}));
-var ToolbarItemMode;
-(function (ToolbarItemMode) {
-    ToolbarItemMode[ToolbarItemMode["horizontal"] = 0] = "horizontal";
-    ToolbarItemMode[ToolbarItemMode["vertical"] = 1] = "vertical";
-})(ToolbarItemMode || (ToolbarItemMode = {}));
-const DefaultGlobalToolbarDefinition = [
-    ElementKinds.headingList,
-    ToolbarActionTypes.split,
-    MarkTypes.bold,
-    MarkTypes.italic,
-    MarkTypes.underline,
-    MarkTypes.strike,
-    ElementKinds.inlineCode,
-    MarkTypes.color,
-    MarkTypes.backgroundColor,
-    ToolbarActionTypes.split,
-    ToolbarActionTypes.alignType,
-    ToolbarActionTypes.verticalAlign,
-    ToolbarActionTypes.split,
-    ElementKinds.numberedList,
-    ElementKinds.bulletedList,
-    ToolbarActionTypes.split,
-    ElementKinds.link,
-    ElementKinds.image,
-    ElementKinds.table,
-    ElementKinds.blockquote,
-    ElementKinds.code
-];
-const DefaultInlineToolbarDefinition = [
-    ToolbarActionTypes.clean,
-    ToolbarActionTypes.split,
-    MarkTypes.bold,
-    MarkTypes.italic,
-    MarkTypes.underline,
-    MarkTypes.strike,
-    ElementKinds.inlineCode,
-    MarkTypes.color,
-    MarkTypes.backgroundColor,
-    ToolbarActionTypes.split,
-    ToolbarActionTypes.alignType,
-    ToolbarActionTypes.split,
-    ElementKinds.link
-];
-const DefaultQuickToolbarDefinition = [
-    ...STANDARD_HEADING_TYPES,
-    ToolbarActionTypes.split,
-    ElementKinds.numberedList,
-    ElementKinds.bulletedList,
-    ToolbarActionTypes.split,
-    ElementKinds.link,
-    ElementKinds.image,
-    ElementKinds.table,
-    ElementKinds.blockquote,
-    ElementKinds.hr,
-    ElementKinds.code
-];
-const ToolbarMoreGroup = {
-    key: 'more',
-    icon: 'more'
-};
-
 var ErrorCodes;
 (function (ErrorCodes) {
     ErrorCodes[ErrorCodes["UNKNOW_ERROR"] = 1000] = "UNKNOW_ERROR";
@@ -353,6 +285,74 @@ const THE_CODE_MODE_PROVIDER = {
 };
 const CODEMIRROR_PADDING_TOP = 10;
 
+const TheToolbarGroupToken = new InjectionToken('the-toolbar-group-token');
+const QUICK_TOOLBAR_HOTKEY = '/';
+var DropdownMode;
+(function (DropdownMode) {
+    DropdownMode["icon"] = "icon-mode";
+    DropdownMode["text"] = "text-mode";
+})(DropdownMode || (DropdownMode = {}));
+var ToolbarItemMode;
+(function (ToolbarItemMode) {
+    ToolbarItemMode[ToolbarItemMode["horizontal"] = 0] = "horizontal";
+    ToolbarItemMode[ToolbarItemMode["vertical"] = 1] = "vertical";
+})(ToolbarItemMode || (ToolbarItemMode = {}));
+const DefaultGlobalToolbarDefinition = [
+    ElementKinds.headingList,
+    ToolbarActionTypes.split,
+    MarkTypes.bold,
+    MarkTypes.italic,
+    MarkTypes.underline,
+    MarkTypes.strike,
+    ElementKinds.inlineCode,
+    MarkTypes.color,
+    MarkTypes.backgroundColor,
+    ToolbarActionTypes.split,
+    ToolbarActionTypes.alignType,
+    ToolbarActionTypes.verticalAlign,
+    ToolbarActionTypes.split,
+    ElementKinds.numberedList,
+    ElementKinds.bulletedList,
+    ToolbarActionTypes.split,
+    ElementKinds.link,
+    ElementKinds.image,
+    ElementKinds.table,
+    ElementKinds.blockquote,
+    ElementKinds.code
+];
+const DefaultInlineToolbarDefinition = [
+    ToolbarActionTypes.clean,
+    ToolbarActionTypes.split,
+    MarkTypes.bold,
+    MarkTypes.italic,
+    MarkTypes.underline,
+    MarkTypes.strike,
+    ElementKinds.inlineCode,
+    MarkTypes.color,
+    MarkTypes.backgroundColor,
+    ToolbarActionTypes.split,
+    ToolbarActionTypes.alignType,
+    ToolbarActionTypes.split,
+    ElementKinds.link
+];
+const DefaultQuickToolbarDefinition = [
+    ...STANDARD_HEADING_TYPES,
+    ToolbarActionTypes.split,
+    ElementKinds.numberedList,
+    ElementKinds.bulletedList,
+    ToolbarActionTypes.split,
+    ElementKinds.link,
+    ElementKinds.image,
+    ElementKinds.table,
+    ElementKinds.blockquote,
+    ElementKinds.hr,
+    ElementKinds.code
+];
+const ToolbarMoreGroup = {
+    key: 'more',
+    icon: 'more'
+};
+
 class TheTextComponent extends BaseTextComponent {
     constructor(elementRef, renderer2, cdr) {
         super(elementRef, cdr);
@@ -2410,7 +2410,7 @@ class TheImageComponent extends TheBaseElementComponent {
                     height: value.element.height,
                     thumbUrl: value.element.thumbUrl,
                     originUrl: value.element.originUrl,
-                    align: value.element.align || Alignment.center
+                    align: value.element.align || Alignment.left
                 };
             }
         };
@@ -2451,6 +2451,7 @@ class TheImageComponent extends TheBaseElementComponent {
             this.imageEntry = {
                 height,
                 width,
+                align: this.imageEntry.align || Alignment.center,
                 thumbUrl: this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(file))
             };
             this.uploading = true;
@@ -2560,7 +2561,7 @@ class TheImageComponent extends TheBaseElementComponent {
     }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵ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, 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵ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, 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
             args: [{
@@ -4572,6 +4573,15 @@ const withBlockCard = (editor) => {
     return editor;
 };
 
+const isInline = (editor, path) => {
+    var _a;
+    const [inlineNode] = Editor.nodes(editor, {
+        at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+        match: n => Element$1.isElement(n) && Editor.isInline(editor, n) && !Editor.isVoid(editor, n)
+    });
+    return !!inlineNode;
+};
+
 const withMoveSelection = (editor) => {
     const { onClick, deleteBackward, onKeydown } = editor;
     editor.onClick = (event) => {
@@ -4604,6 +4614,50 @@ const withMoveSelection = (editor) => {
         }
         deleteBackward(unit);
     };
+    editor.onKeydown = (event) => {
+        const { selection } = editor;
+        if (!selection || !selection.anchor || !selection.focus) {
+            onKeydown(event);
+            return;
+        }
+        const isMoveBackward = hotkeys.isMoveBackward(event);
+        const isMoveForward = hotkeys.isMoveForward(event);
+        const isCollapsed$1 = selection && isCollapsed(selection);
+        const isInlineNode = isInline(editor);
+        if (isCollapsed$1 && isMoveForward) {
+            let isInlineCodeBefore = false;
+            if (!isInlineNode) {
+                try {
+                    const { path } = Editor.after(editor, selection);
+                    if (path) {
+                        isInlineCodeBefore = isInline(editor, path);
+                    }
+                }
+                catch (error) { }
+            }
+            if (isInlineNode || isInlineCodeBefore) {
+                event.preventDefault();
+                Transforms.move(editor, { unit: 'offset' });
+                return;
+            }
+        }
+        if (isCollapsed$1 && isMoveBackward) {
+            let isInlineCodeAfter = false;
+            if (!isInlineNode) {
+                try {
+                    const { path } = Editor.before(editor, selection);
+                    isInlineCodeAfter = isInline(editor, path);
+                }
+                catch (error) { }
+            }
+            if (isInlineNode || isInlineCodeAfter) {
+                event.preventDefault();
+                Transforms.move(editor, { unit: 'offset', reverse: true });
+                return;
+            }
+        }
+        onKeydown(event);
+    };
     return editor;
 };
 
@@ -5744,7 +5798,7 @@ const AlignEditor = {
             return;
         }
         const props = {
-            align: alignment
+            align: alignment !== Alignment.left ? alignment : null
         };
         Transforms.setNodes(editor, props, {
             at: editor.selection,
@@ -6695,7 +6749,7 @@ class TheCodeComponent extends TheBaseElementComponent {
         this.options = Object.assign(Object.assign({}, this.options), { lineWrapping: this.element.autoWrap || false });
     }
     useHeight() {
-        if (this.element.height) {
+        if (this.element.height && this.config.mode !== 'print') {
             this.resizeHeight = this.element.height;
             this.maxHeight = this.element.height;
         }
@@ -7109,18 +7163,16 @@ class TheLinkComponent extends TheBaseLinkComponent {
     }
 }
 TheLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0, template: `
-    <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
-    <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-    <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+TheLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theLink]',
-                    template: `
-    <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
-    <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-    <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`
+                    template: ` <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`
                 }]
         }] });
 class TheReadonlyLinkComponent extends TheBaseLinkComponent {
@@ -10630,7 +10682,7 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
     execute(event) {
         var _a, _b;
         super.execute(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();
@@ -10663,7 +10715,7 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$6.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, 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.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, 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.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -11118,7 +11170,8 @@ const FontSizeEditor = {
             return;
         }
         // unset fontSize
-        if (FontSizeEditor.unsetFontSize(editor, size, fontSizeMark, isDefaultFontSize)) {
+        if (isDefaultFontSize && Number(defaultFontSize) === fontSizeMark) {
+            FontSizeEditor.unsetFontSize(editor, size);
             return;
         }
         FontSizeEditor.setFontSizeMark(editor, size);
@@ -11131,20 +11184,16 @@ const FontSizeEditor = {
         // set paragraph text fontSize
         Editor.addMark(editor, MarkTypes.fontSize, Number(size));
     },
-    unsetFontSize(editor, size, fontSizeMark, isDefaultFontSize) {
+    unsetFontSize(editor, size) {
         const isTable = TableEditor.isActive(editor);
-        if (fontSizeMark && isDefaultFontSize) {
-            // unset Table selectedCells fontSize
-            if (isTable && TableEditor.toggleMark(editor, true, MarkTypes.fontSize, Number(size))) {
-                return true;
-            }
-            // unset paragraph text fontSize
-            setMarks(editor, {
-                [MarkTypes.fontSize]: null
-            }, editor.selection);
-            return true;
+        // unset Table selectedCells fontSize
+        if (isTable && TableEditor.toggleMark(editor, true, MarkTypes.fontSize, Number(size))) {
+            return;
         }
-        return false;
+        // unset paragraph text fontSize
+        setMarks(editor, {
+            [MarkTypes.fontSize]: null
+        }, editor.selection);
     },
     isFontSizeActive(editor, size) {
         if (editor.selection) {
@@ -11274,42 +11323,6 @@ const withInlineCode = (editor) => {
             insertText(text);
         }
     };
-    editor.onKeydown = (event) => {
-        const { selection } = editor;
-        if (!selection || !selection.anchor || !selection.focus) {
-            onKeydown(event);
-            return;
-        }
-        const isMoveBackward = hotkeys.isMoveBackward(event);
-        const isMoveForward = hotkeys.isMoveForward(event);
-        const isCollapsed$1 = selection && isCollapsed(selection);
-        const isInlineCode = InlineCodeEditor.isInlineCodeActive(editor);
-        if (isCollapsed$1 && isMoveForward) {
-            let isInlineCodeBefore = false;
-            if (!isInlineCode) {
-                const { path } = Editor.after(editor, selection);
-                isInlineCodeBefore = InlineCodeEditor.isInlineCodeActive(editor, path);
-            }
-            if (isInlineCode || isInlineCodeBefore) {
-                event.preventDefault();
-                Transforms.move(editor, { unit: 'offset' });
-                return;
-            }
-        }
-        if (isCollapsed$1 && isMoveBackward) {
-            let isInlineCodeAfter = false;
-            if (!isInlineCode) {
-                const { path } = Editor.before(editor, selection);
-                isInlineCodeAfter = InlineCodeEditor.isInlineCodeActive(editor, path);
-            }
-            if (isInlineCode || isInlineCodeAfter) {
-                event.preventDefault();
-                Transforms.move(editor, { unit: 'offset', reverse: true });
-                return;
-            }
-        }
-        onKeydown(event);
-    };
     editor = withRemoveEmptyNodes({ type: ElementKinds.inlineCode })(editor);
     return editor;
 };
@@ -12168,6 +12181,9 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         });
         this.toolbarCalculate();
         setTimeout(() => {
+            // 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();
         });
@@ -12196,11 +12212,14 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         const 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;
+    }
+    globalToolbarInit() {
+        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();
         }
@@ -12354,7 +12373,7 @@ TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => 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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{