@worktile/theia 2.1.0 → 2.1.4

package/bundles/worktile-theia.umd.js

@@ -375,7 +375,6 @@
     var A_TAG_REL_ATTR = 'noopener noreferrer nofollow external ugc';
     var LINK_DEFAULT_TEXT = '链接';
     var TAB_SPACE = '    ';
-    var ZERO_WIDTH_CHAR = '\u200B';
     var CLIPBOARD_FORMAT_KEY = 'x-theia-fragment';
     var DEFAULT_SCROLL_CONTAINER = '.the-editable-container';
     var ELEMENT_UNIQUE_ID = 'key';
@@ -422,6 +421,34 @@
         VerticalAlignment["middle"] = "middle";
         VerticalAlignment["bottom"] = "bottom";
     })(exports.VerticalAlignment || (exports.VerticalAlignment = {}));
+    exports.FontSizes = void 0;
+    (function (FontSizes) {
+        FontSizes["fontSize12"] = "12";
+        FontSizes["fontSize13"] = "13";
+        FontSizes["fontSize14"] = "14";
+        FontSizes["fontSize15"] = "15";
+        FontSizes["fontSize16"] = "16";
+        FontSizes["fontSize18"] = "18";
+        FontSizes["fontSize20"] = "20";
+        FontSizes["fontSize24"] = "24";
+        FontSizes["fontSize28"] = "28";
+        FontSizes["fontSize32"] = "32";
+        FontSizes["fontSize40"] = "40";
+        FontSizes["fontSize48"] = "48";
+    })(exports.FontSizes || (exports.FontSizes = {}));
+    var FontSizeTypes = [
+        exports.FontSizes.fontSize12,
+        exports.FontSizes.fontSize13,
+        exports.FontSizes.fontSize14,
+        exports.FontSizes.fontSize15,
+        exports.FontSizes.fontSize16,
+        exports.FontSizes.fontSize20,
+        exports.FontSizes.fontSize24,
+        exports.FontSizes.fontSize28,
+        exports.FontSizes.fontSize32,
+        exports.FontSizes.fontSize40,
+        exports.FontSizes.fontSize48
+    ];
     exports.MarkTypes = void 0;
     (function (MarkTypes) {
         MarkTypes["bold"] = "bold";
@@ -2421,7 +2448,7 @@
                             editor: editor,
                             conversion: function () {
                                 try {
-                                    var html = marked__default["default"](plainFragment, { gfm: true });
+                                    var html = marked__default["default"](plainFragment.replace(/\n```/g, "\n\n```"), { gfm: true });
                                     var htmlDom = new DOMParser().parseFromString(html, 'text/html');
                                     var fragment_1 = selene.TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
                                     if (!isUnformatted(fragment_1)) {
@@ -3811,9 +3838,59 @@
         TheListItemComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
         };
+        TheListItemComponent.prototype.onContextChange = function () {
+            _super.prototype.onContextChange.call(this);
+            this.applyFontSize();
+        };
         TheListItemComponent.prototype.ngOnDestroy = function () {
             _super.prototype.ngOnDestroy.call(this);
         };
+        TheListItemComponent.prototype.applyFontSize = function () {
+            var e_1, _c;
+            var _a, _b;
+            var firstText;
+            try {
+                for (var _d = __values(slate.Node.descendants(this.element)), _e = _d.next(); !_e.done; _e = _d.next()) {
+                    var entry = _e.value;
+                    var node = entry[0];
+                    if (slate.Text.isText(node) && !firstText) {
+                        firstText = node;
+                        break;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_e && !_e.done && (_c = _d.return)) _c.call(_d);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (!firstText) {
+                return;
+            }
+            var text = firstText.text, rest = __rest(firstText, ["text"]);
+            var size = rest[exports.MarkTypes.fontSize];
+            if (size) {
+                var sizeClass = "font-size-" + size;
+                var isContains = (_b = (_a = this.elementRef.nativeElement) === null || _a === void 0 ? void 0 : _a.classList) === null || _b === void 0 ? void 0 : _b.contains(sizeClass);
+                if (isContains) {
+                    return;
+                }
+                this.clearFontSize();
+                this.elementRef.nativeElement.classList.add(sizeClass);
+                this.fontSizeClass = sizeClass;
+            }
+            else {
+                this.clearFontSize();
+            }
+        };
+        TheListItemComponent.prototype.clearFontSize = function () {
+            if (this.fontSizeClass) {
+                this.elementRef.nativeElement.classList.remove(this.fontSizeClass);
+                this.fontSizeClass = null;
+            }
+        };
         return TheListItemComponent;
     }(TheBaseElementComponent));
     TheListItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheListItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
@@ -4322,11 +4399,14 @@
                     delete marks[key];
                     editor.marks = marks;
                     var text = slate.Editor.string(e, selection.anchor.path);
-                    if (text === ZERO_WIDTH_CHAR) {
-                        slate.Transforms.unsetNodes(e, key, { at: selection.anchor.path });
+                    if (text !== '') {
+                        slate.Editor.setNormalizing(editor, false);
+                        e.insertText('');
+                        editor.marks = marks;
+                        slate.Editor.setNormalizing(editor, true);
                     }
-                    if (text !== ZERO_WIDTH_CHAR && text !== '') {
-                        e.insertText(ZERO_WIDTH_CHAR);
+                    else {
+                        slate.Transforms.unsetNodes(e, key, { at: selection.anchor.path });
                     }
                     if (shouldChange) {
                         editor.onChange();
@@ -4345,11 +4425,14 @@
                     var marks = Object.assign(Object.assign({}, (slate.Editor.marks(e) || {})), (_b = {}, _b[key] = value, _b));
                     editor.marks = marks;
                     var text = slate.Editor.string(e, selection.anchor.path);
-                    if (text === ZERO_WIDTH_CHAR) {
-                        slate.Transforms.setNodes(e, (_c = {}, _c[key] = value, _c), { at: selection.anchor.path });
+                    if (text !== '') {
+                        slate.Editor.setNormalizing(editor, false);
+                        e.insertText('');
+                        editor.marks = marks;
+                        slate.Editor.setNormalizing(editor, true);
                     }
-                    if (text !== ZERO_WIDTH_CHAR && text !== '') {
-                        e.insertText(ZERO_WIDTH_CHAR);
+                    else {
+                        slate.Transforms.setNodes(e, (_c = {}, _c[key] = value, _c), { at: selection.anchor.path });
                     }
                 }
             }
@@ -6018,6 +6101,7 @@
     var HeadingEditor = {
         setHeading: function (editor, heading) {
             slate.Editor.withoutNormalizing(editor, function () {
+                var _a;
                 var types = [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList, exports.ElementKinds.listItem];
                 slate.Transforms.unwrapNodes(editor, {
                     at: editor.selection,
@@ -6026,6 +6110,15 @@
                     split: true
                 });
                 slate.Transforms.setNodes(editor, { type: heading });
+                var entry = anchorBlockEntry(editor);
+                var unMarks = (_a = {},
+                    _a[exports.MarkTypes.fontSize] = null,
+                    _a);
+                if (entry) {
+                    setMarks(editor, unMarks, entry[1]);
+                    return;
+                }
+                setMarks(editor, unMarks, editor.selection);
             });
         },
         isHeadingActive: function (editor, heading) {
@@ -6042,6 +6135,7 @@
             name: '正文',
             key: exports.ElementKinds.headingList,
             type: exports.ToolbarItemType.toolDropdown,
+            dropdownItemKey: exports.ElementKinds.paragraph,
             includes: __spreadArray([exports.ElementKinds.paragraph], __read(STANDARD_HEADING_TYPES))
         },
         {
@@ -6136,6 +6230,7 @@
             key: exports.ToolbarActionTypes.alignType,
             type: exports.ToolbarItemType.toolDropdown,
             dropdownMode: exports.DropdownMode.icon,
+            dropdownItemKey: exports.ToolbarActionTypes.alignLeft,
             includes: [exports.ToolbarActionTypes.alignLeft, exports.ToolbarActionTypes.alignCenter, exports.ToolbarActionTypes.alignRight],
             name: '对齐方式'
         },
@@ -6734,6 +6829,7 @@
             _this.overlay = overlay;
             _this.mode = exports.DropdownMode.text;
             _this.dropdownMode = exports.DropdownMode;
+            _this.disabled = false;
             return _this;
         }
         Object.defineProperty(TheToolbarDropdownComponent.prototype, "item", {
@@ -6757,7 +6853,7 @@
         TheToolbarDropdownComponent.prototype.toggleDropdown = function (event) {
             var _a;
             _super.prototype.execute.call(this, event);
-            if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) {
+            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled) {
                 return;
             }
             this.openDropdownPopover();
@@ -6767,6 +6863,13 @@
                 this.closeDropdownPopover();
             }
         };
+        Object.defineProperty(TheToolbarDropdownComponent.prototype, "disabledState", {
+            get: function () {
+                return this.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TheToolbarDropdownComponent.prototype.ngOnInit = function () {
             var _a;
             if (!this.template) {
@@ -6780,12 +6883,14 @@
             }
         };
         TheToolbarDropdownComponent.prototype.statusChange = function (editor) {
+            var _a, _b;
+            this.disabled = ((_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.disable) ? (_b = this.toolbarItem) === null || _b === void 0 ? void 0 : _b.disable(editor) : false;
             var activeItem = this.menus.find(function (i) {
                 if (i === null || i === void 0 ? void 0 : i.active) {
                     return i === null || i === void 0 ? void 0 : i.active(editor);
                 }
             });
-            this.activeMenu = activeItem ? activeItem : this.menus[0];
+            this.activeMenu = activeItem ? activeItem : this.item;
         };
         TheToolbarDropdownComponent.prototype.itemMousedown = function (event, item) {
             _super.prototype.execute.call(this, event);
@@ -6840,7 +6945,7 @@
         return TheToolbarDropdownComponent;
     }(TheToolbarBaseItemComponent));
     TheToolbarDropdownComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarDropdownComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\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</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\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"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    TheToolbarDropdownComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\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</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\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"] }, { type: i5__namespace$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarDropdownComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6875,6 +6980,9 @@
                 }], handleDocumentMouseDown: [{
                     type: i0.HostListener,
                     args: ['document: mousedown', ['$event']]
+                }], disabledState: [{
+                    type: i0.HostBinding,
+                    args: ['class.disabled']
                 }] } });
 
     var NavSplitLineComponent = /** @class */ (function () {
@@ -7087,7 +7195,7 @@
         return TheCodeComponent;
     }(TheBaseElementComponent));
     TheCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$4.ThyNotifyService }, { token: TheContextService }, { token: i0__namespace.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isFocusCode && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"element.autoWrap\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div\n    thyResizable\n    [thyMinHeight]=\"42\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isFocusCode && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], 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"] }, { 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"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: i8.CodeMirrorComponent }], usesInheritance: true, ngImport: i0__namespace, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isFocusCode && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"> </the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n        <nav-split-line [mode]=\"ToolbarItemMode.vertical\"></nav-split-line>\n        <span class=\"auto-wrap d-flex align-items-center\">\n            <span>\u81EA\u52A8\u6362\u884C</span>\n            <thy-switch\n                class=\"auto-wrap-btn d-flex\"\n                [(ngModel)]=\"options.lineWrapping\"\n                (ngModelChange)=\"onChangeWrap($event)\"\n                thySize=\"sm\"\n            ></thy-switch>\n        </span>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n    thyResizable\n    [thyMinHeight]=\"46\"\n    [thyBounds]=\"resizeBounds\"\n    [style.height.px]=\"resizeHeight\"\n    (thyResize)=\"onResize($event)\"\n    (thyResizeEnd)=\"onEndResize()\"\n    class=\"resize-code-container\"\n>\n    <ng-codemirror\n        *ngIf=\"startRenderCodemirror\"\n        #codemirror\n        contenteditable=\"false\"\n        class=\"ng-codemirror-wrapper\"\n        [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n        [options]=\"options\"\n        [ngModel]=\"code\"\n        [delayRefreshTime]=\"300\"\n        (ngModelChange)=\"codeChange($event)\"\n        (focusChange)=\"focusChange($event)\"\n        [autoMaxHeight]=\"maxHeight\"\n    >\n    </ng-codemirror>\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isFocusCode && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3__namespace.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6__namespace$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8__namespace.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9__namespace.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], 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"] }, { 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"] }, { type: i9__namespace.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11514,8 +11622,19 @@
             _this.itemMode = exports.ToolbarItemMode.horizontal;
             _this.ToolbarItemMode = exports.ToolbarItemMode;
             _this.active = false;
+            _this.disabled = false;
             return _this;
         }
+        TheToolbarItemComponent.prototype.toggleDropdown = function (event) {
+            _super.prototype.execute.call(this, event);
+        };
+        Object.defineProperty(TheToolbarItemComponent.prototype, "disabledState", {
+            get: function () {
+                return this.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TheToolbarItemComponent.prototype.ngOnInit = function () {
             var _a, _b;
             if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.quickItemComponent) && i1.isComponentType((_b = this.item) === null || _b === void 0 ? void 0 : _b.quickItemComponent)) {
@@ -11523,13 +11642,14 @@
             }
         };
         TheToolbarItemComponent.prototype.statusChange = function (editor) {
-            var _a, _b;
-            this.active = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.active) ? (_b = this.item) === null || _b === void 0 ? void 0 : _b.active(editor) : false;
+            var _a, _b, _c, _d;
+            this.disabled = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.disable) ? (_b = this.item) === null || _b === void 0 ? void 0 : _b.disable(editor) : false;
+            this.active = ((_c = this.item) === null || _c === void 0 ? void 0 : _c.active) ? (_d = this.item) === null || _d === void 0 ? void 0 : _d.active(editor) : false;
         };
         TheToolbarItemComponent.prototype.execute = function (event) {
             var _a, _b, _c;
             _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.disabled) || this.disabled || !((_b = this.item) === null || _b === void 0 ? void 0 : _b.execute)) {
                 return;
             }
             (_c = this.item) === null || _c === void 0 ? void 0 : _c.execute(this.editor);
@@ -11547,7 +11667,7 @@
         return TheToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", 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.7", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { item: "item", editor: "editor", itemMode: "itemMode" }, host: { 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.7", 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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -11566,6 +11686,12 @@
                 }], toolbarContainer: [{
                     type: i0.ViewChild,
                     args: ['toolbarContainer', { read: i0.ViewContainerRef, static: true }]
+                }], toggleDropdown: [{
+                    type: i0.HostListener,
+                    args: ['mousedown', ['$event']]
+                }], disabledState: [{
+                    type: i0.HostBinding,
+                    args: ['class.disabled']
                 }] } });
 
     var TheQuickToolbarComponent = /** @class */ (function (_super) {
@@ -11738,140 +11864,69 @@
         };
     };
 
-    var TheFontSizeToolbarItemComponent = /** @class */ (function (_super) {
-        __extends(TheFontSizeToolbarItemComponent, _super);
-        function TheFontSizeToolbarItemComponent(elementRef, thyPopover, viewContainerRef, overlay) {
-            var _this = _super.call(this) || this;
-            _this.elementRef = elementRef;
-            _this.thyPopover = thyPopover;
-            _this.viewContainerRef = viewContainerRef;
-            _this.overlay = overlay;
-            _this.fontSizes = FontSizes;
-            _this.disabled = false;
-            _this.disableGroup = HEADING_TYPES;
-            _this.toolbarItemContainer = true;
-            _this.fontSizeToolbarItem = true;
-            return _this;
-        }
-        Object.defineProperty(TheFontSizeToolbarItemComponent.prototype, "isOpen", {
-            get: function () {
-                return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TheFontSizeToolbarItemComponent.prototype, "disableClass", {
-            get: function () {
-                return this.disabled;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TheFontSizeToolbarItemComponent.prototype.toggleDropdown = function (event) {
-            var _a;
-            _super.prototype.execute.call(this, event);
-            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled) {
+    var FontSizeEditor = {
+        setFontSize: function (editor, size) {
+            if (TableEditor.toggleMark(editor, false, exports.MarkTypes.fontSize, Number(size))) {
                 return;
             }
-            this.openDropdownPopover();
-        };
-        TheFontSizeToolbarItemComponent.prototype.handleDocumentMouseDown = function (event) {
-            if (!this.elementRef.nativeElement.contains(event.target)) {
-                this.closeDropdownPopover();
-            }
-        };
-        TheFontSizeToolbarItemComponent.prototype.ngOnInit = function () {
-            this.activeSize = this.fontSizes[2];
-        };
-        TheFontSizeToolbarItemComponent.prototype.statusChange = function (editor) {
+            slate.Editor.addMark(editor, exports.MarkTypes.fontSize, Number(size));
+        },
+        isFontSizeActive: function (editor, size) {
             if (editor.selection) {
                 var anchorBlock$1 = anchorBlock(editor);
-                if (anchorBlock$1 && this.disableGroup.includes(anchorBlock$1.type)) {
-                    this.activeSize = null;
-                    this.disabled = true;
-                    return;
+                switch (anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type) {
+                    case exports.ElementKinds.heading_1:
+                        return size === exports.FontSizes.fontSize28;
+                    case exports.ElementKinds.heading_2:
+                        return size === exports.FontSizes.fontSize24;
+                    case exports.ElementKinds.heading_3:
+                        return size === exports.FontSizes.fontSize20;
+                    case exports.ElementKinds.heading_4:
+                        return size === exports.FontSizes.fontSize18;
+                    case exports.ElementKinds.heading_5:
+                        return size === exports.FontSizes.fontSize16;
+                    case exports.ElementKinds.heading_6:
+                        return size === exports.FontSizes.fontSize14;
+                    case exports.ElementKinds.paragraph:
+                        var marks = getSelectionMarks(editor);
+                        var fontSizeMark = marks[exports.MarkTypes.fontSize];
+                        return Number(size) === fontSizeMark;
+                    default:
+                        return false;
                 }
-                var marks = getSelectionMarks(editor);
-                var fontSizeMark = marks[exports.MarkTypes.fontSize];
-                this.activeSize = fontSizeMark ? fontSizeMark : this.fontSizes[2];
-                this.disabled = false;
-            }
-        };
-        TheFontSizeToolbarItemComponent.prototype.itemMousedown = function (event, size) {
-            var _a, _b;
-            _super.prototype.execute.call(this, event);
-            this.closeDropdownPopover();
-            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.readOnly)) {
-                return;
-            }
-            var anchorBlock$1 = anchorBlock(this.editor);
-            if (anchorBlock$1 && this.disableGroup.includes(anchorBlock$1.type)) {
-                return;
             }
-            slate.Editor.addMark(this.editor, exports.MarkTypes.fontSize, size);
-        };
-        TheFontSizeToolbarItemComponent.prototype.openDropdownPopover = function () {
-            var _a;
-            this.dropdownPopoverRef = this.thyPopover.open(this.dropdownTemplate, {
-                origin: this.elementRef,
-                panelClass: ['the-toolbar-dropdown-popover', (_a = this.item) === null || _a === void 0 ? void 0 : _a.key],
-                placement: 'bottomLeft',
-                insideClosable: false,
-                backdropClosable: true,
-                hasBackdrop: false,
-                offset: 10,
-                viewContainerRef: this.viewContainerRef,
-                scrollStrategy: this.overlay.scrollStrategies.reposition()
-            });
-        };
-        TheFontSizeToolbarItemComponent.prototype.closeDropdownPopover = function () {
-            var _a;
-            if (this.dropdownPopoverRef) {
-                (_a = this.dropdownPopoverRef) === null || _a === void 0 ? void 0 : _a.close();
+            return false;
+        },
+        isDisabled: function (editor) {
+            if (editor.selection) {
+                var disableGroup = HEADING_TYPES;
+                var anchorBlock$1 = anchorBlock(editor);
+                return anchorBlock$1 && disableGroup.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
             }
-        };
-        return TheFontSizeToolbarItemComponent;
-    }(TheToolbarBaseItemComponent));
-    TheFontSizeToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheFontSizeToolbarItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheFontSizeToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheFontSizeToolbarItemComponent, selector: "the-font-size-toolbar-item", inputs: { editor: "editor", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.the-toolbar-dropdown-container": "this.toolbarItemContainer", "class.the-font-size-toolbar-item": "this.fontSizeToolbarItem", "class.disabled": "this.disableClass" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "<a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\">\n    <span *ngIf=\"activeSize\" class=\"show-text\">{{ activeSize }}</span>\n    <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let size of fontSizes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"size === activeSize\"\n                (mousedown)=\"itemMousedown($event, size)\"\n            >\n                <span thyActionMenuItemName>{{ size }}</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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheFontSizeToolbarItemComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'the-font-size-toolbar-item',
-                        templateUrl: './toolbar-item.component.html'
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$3.ThyPopover }, { type: i0__namespace.ViewContainerRef }, { type: i2__namespace.Overlay }]; }, propDecorators: { editor: [{
-                    type: i0.Input
-                }], item: [{
-                    type: i0.Input
-                }], dropdownTemplate: [{
-                    type: i0.ViewChild,
-                    args: ['dropdownTemplate', { static: true }]
-                }], toolbarItemContainer: [{
-                    type: i0.HostBinding,
-                    args: ['class.the-toolbar-dropdown-container']
-                }], fontSizeToolbarItem: [{
-                    type: i0.HostBinding,
-                    args: ['class.the-font-size-toolbar-item']
-                }], disableClass: [{
-                    type: i0.HostBinding,
-                    args: ['class.disabled']
-                }], toggleDropdown: [{
-                    type: i0.HostListener,
-                    args: ['mousedown', ['$event']]
-                }], handleDocumentMouseDown: [{
-                    type: i0.HostListener,
-                    args: ['document: mousedown', ['$event']]
-                }] } });
+            return false;
+        }
+    };
 
-    var FontSizes = [12, 13, 14, 15, 16, 19, 22, 24, 29, 32, 40, 48];
-    var FontSizeOptions = [
+    var sizeOptions = function () {
+        return FontSizeTypes.map(function (fontSize) {
+            return {
+                key: fontSize,
+                name: fontSize,
+                execute: function (editor) { return FontSizeEditor.setFontSize(editor, fontSize); },
+                active: function (editor) { return FontSizeEditor.isFontSizeActive(editor, fontSize); }
+            };
+        });
+    };
+    var FontSizeOptions = __spreadArray([
         {
             key: exports.MarkTypes.fontSize,
             name: '字号',
-            iconComponent: TheFontSizeToolbarItemComponent
+            type: exports.ToolbarItemType.toolDropdown,
+            dropdownItemKey: exports.FontSizes.fontSize14,
+            includes: FontSizeTypes,
+            disable: function (editor) { return FontSizeEditor.isDisabled(editor); }
         }
-    ];
+    ], __read(sizeOptions()));
 
     var internalPlugins = [
         withTheHistory,
@@ -12076,9 +12131,9 @@
             }
         };
         TheToolbarComponent.prototype.setToolbarClass = function () {
-            var _a;
+            var _b;
             if (this.editor && !!this.containerClass.length) {
-                (_a = this.elementRef.nativeElement.classList).add.apply(_a, __spreadArray([], __read(this.containerClass)));
+                (_b = this.elementRef.nativeElement.classList).add.apply(_b, __spreadArray([], __read(this.containerClass)));
             }
         };
         TheToolbarComponent.prototype.resizeElement = function () {
@@ -12086,7 +12141,7 @@
             var editableElement = this.elementRef.nativeElement;
             // @ts-ignore
             this.resizeObserver = new ResizeObserver(function (entries) {
-                var e_1, _a;
+                var e_1, _b;
                 try {
                     for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
                         var entry = entries_1_1.value;
@@ -12100,7 +12155,7 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (entries_1_1 && !entries_1_1.done && (_a = entries_1.return)) _a.call(entries_1);
+                        if (entries_1_1 && !entries_1_1.done && (_b = entries_1.return)) _b.call(entries_1);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -12108,7 +12163,7 @@
             this.resizeObserver.observe(editableElement);
         };
         TheToolbarComponent.prototype.statusChange = function (editor) {
-            var e_2, _a;
+            var e_2, _b;
             var toolbarItems = __spreadArray(__spreadArray([], __read(this.toolbarItems)), [this.moreGroupMenu]);
             try {
                 for (var toolbarItems_1 = __values(toolbarItems), toolbarItems_1_1 = toolbarItems_1.next(); !toolbarItems_1_1.done; toolbarItems_1_1 = toolbarItems_1.next()) {
@@ -12124,7 +12179,7 @@
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (toolbarItems_1_1 && !toolbarItems_1_1.done && (_a = toolbarItems_1.return)) _a.call(toolbarItems_1);
+                    if (toolbarItems_1_1 && !toolbarItems_1_1.done && (_b = toolbarItems_1.return)) _b.call(toolbarItems_1);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
@@ -12136,7 +12191,7 @@
             var toolbarItems = this.toolbarItemsCompose();
             var items = toolbarItems.items, group = toolbarItems.group;
             this.ngZone.run(function () {
-                var e_3, _a;
+                var e_3, _b;
                 try {
                     for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
                         var item = items_1_1.value;
@@ -12150,7 +12205,7 @@
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (items_1_1 && !items_1_1.done && (_a = items_1.return)) _a.call(items_1);
+                        if (items_1_1 && !items_1_1.done && (_b = items_1.return)) _b.call(items_1);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
@@ -12173,7 +12228,7 @@
          * set aside 50px
          */
         TheToolbarComponent.prototype.toolbarItemsCompose = function () {
-            var e_4, _a;
+            var e_4, _b;
             var elementWidth = this.isMore ? this.elementWidth : null;
             var maxItemWidth = 50;
             var defaultItemWidth = 35;
@@ -12183,8 +12238,8 @@
             var items = [];
             var group = [];
             try {
-                for (var _b = __values(this.toolbarItems), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var item = _c.value;
+                for (var _c = __values(this.toolbarItems), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var item = _d.value;
                     if (!this.isMore) {
                         items.push(item);
                         continue;
@@ -12213,7 +12268,7 @@
             catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                 }
                 finally { if (e_4) throw e_4.error; }
             }
@@ -12226,12 +12281,12 @@
          * externally designated more group
          */
         TheToolbarComponent.prototype.toolbarItemsAndMoreCompose = function () {
-            var e_5, _a;
+            var e_5, _b;
             var items = [];
             var group = [];
             try {
-                for (var _b = __values(this.toolbarItems), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var item = _c.value;
+                for (var _c = __values(this.toolbarItems), _d = _c.next(); !_d.done; _d = _c.next()) {
+                    var item = _d.value;
                     if (item.key === exports.ToolbarActionTypes.split) {
                         items.push(item);
                         continue;
@@ -12242,7 +12297,7 @@
             catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
                 }
                 finally { if (e_5) throw e_5.error; }
             }
@@ -12269,14 +12324,15 @@
             });
         };
         TheToolbarComponent.prototype.createToolbarItem = function (item) {
-            var iconComponent = item.iconComponent, type = item.type, dropdownMode = item.dropdownMode, args = __rest(item, ["iconComponent", "type", "dropdownMode"]);
+            var iconComponent = item.iconComponent, type = item.type, dropdownMode = item.dropdownMode, dropdownItemKey = item.dropdownItemKey, includes = item.includes, args = __rest(item, ["iconComponent", "type", "dropdownMode", "dropdownItemKey", "includes"]);
             var viewComponent = this.viewComponentType(type);
+            var dropdownItem = this.getDropdownItem(item);
             var factory = this.cfr.resolveComponentFactory(iconComponent ? iconComponent : viewComponent);
             var compRef = this.toolbarContainer.createComponent(factory);
             compRef.instance.editor = this.editor;
             compRef.instance.toolbarItem = item;
-            compRef.instance.menus = args.includes;
-            compRef.instance.item = (args === null || args === void 0 ? void 0 : args.includes) && args.includes.length > 0 ? args.includes[0] : args;
+            compRef.instance.menus = includes;
+            compRef.instance.item = includes && dropdownItem ? dropdownItem : args;
             compRef.instance.mode = dropdownMode;
             this.components.set(item.key, compRef);
         };
@@ -12303,10 +12359,19 @@
             }
             return TheToolbarItemComponent;
         };
+        TheToolbarComponent.prototype.getDropdownItem = function (item) {
+            var _a;
+            var dropdownKey = item === null || item === void 0 ? void 0 : item.dropdownItemKey;
+            // modify the fontsize option externally
+            if (item.key === exports.MarkTypes.fontSize && this.fontSize) {
+                dropdownKey = this.fontSize;
+            }
+            return (_a = item === null || item === void 0 ? void 0 : item.includes) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item.key === dropdownKey; });
+        };
         return TheToolbarComponent;
     }());
     TheToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarComponent, deps: [{ token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: TheToolbarGroupToken }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", 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"] }] });
+    TheToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", fontSize: "fontSize", 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.7", ngImport: i0__namespace, type: TheToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12327,6 +12392,8 @@
                     type: i0.Input
                 }], align: [{
                     type: i0.Input
+                }], fontSize: [{
+                    type: i0.Input
                 }], containerClass: [{
                     type: i0.Input
                 }], isMore: [{
@@ -12447,7 +12514,7 @@
         return TheInlineToolbarComponent;
     }());
     TheInlineToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i2__namespace.ScrollDispatcher }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheInlineToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0__namespace, template: "<the-toolbar\n        #inlineToolbar\n        class=\"the-inline-toolbar\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarItems\"\n        [isMore]=\"false\"\n    ></the-toolbar> ", isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheInlineToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0__namespace, template: "<the-toolbar\n        #inlineToolbar\n        class=\"the-inline-toolbar\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarItems\"\n        [isMore]=\"false\"\n    ></the-toolbar> ", isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "fontSize", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12709,14 +12776,14 @@
                 return leaf ? leaf : null;
             };
             _this.renderText = function (text) {
-                if (text.text.length === 0) {
-                    return;
-                }
                 for (var key in exports.MarkTypes) {
                     if (text[exports.MarkTypes[key]]) {
                         return TheTextComponent;
                     }
                 }
+                if (text.text.length === 0) {
+                    return;
+                }
             };
             _this.onKeyDown = function (event) {
                 shortcuts(_this.editor, event);
@@ -12872,7 +12939,7 @@
             }
         };
         TheEditorComponent.prototype.toolbarCalculate = function () {
-            var _a;
+            var _a, _b;
             var toolbar = (_a = this === null || this === void 0 ? void 0 : this.theOptions) === null || _a === void 0 ? void 0 : _a.toolbar;
             var toolbarItems = toolbarCompose(toolbar === null || toolbar === void 0 ? void 0 : toolbar.toolbarItems);
             var toolbarOption = this.toolbarService.initialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline, toolbar === null || toolbar === void 0 ? void 0 : toolbar.quick);
@@ -12883,6 +12950,7 @@
                 this.theGlobalToolbarInstance.toolbarItems = toolbarOption.toolbarEntity.global;
                 this.theGlobalToolbarInstance.containerClass = this.globalToolbarClass;
                 this.theGlobalToolbarInstance.align = toolbar === null || toolbar === void 0 ? void 0 : toolbar.align;
+                this.theGlobalToolbarInstance.fontSize = (_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.fontSize;
                 this.theGlobalToolbarInstance.setToolbarClass();
                 this.theGlobalToolbarInstance.renderToolbarView();
             }
@@ -13037,7 +13105,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 }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [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 #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [options]=\"theOptions\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "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"] }, { type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "options"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n    [fontSize]=\"theOptions?.fontSize\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [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 #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [options]=\"theOptions\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "fontSize", "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"] }, { type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "options"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13218,7 +13286,7 @@
         return TheToolbarGroupComponent;
     }());
     TheToolbarGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarGroupComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheToolbarGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: i0.TemplateRef, static: true }], ngImport: i0__namespace, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i3__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "fontSize", "containerClass", "isMore", "afterTemplate"] }], directives: [{ 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.7", ngImport: i0__namespace, type: TheToolbarGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13280,8 +13348,7 @@
         TheTableSelectComponent,
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
-        TheVerticalToolbarItemComponent,
-        TheFontSizeToolbarItemComponent
+        TheVerticalToolbarItemComponent
     ];
     var PLUGIN_COMPONENTS = [
         TheImageComponent,
@@ -13327,8 +13394,7 @@
             TheTableSelectComponent,
             TheTableToolbarItemComponent,
             TheConversionHintComponent,
-            TheVerticalToolbarItemComponent,
-            TheFontSizeToolbarItemComponent, TheImageComponent,
+            TheVerticalToolbarItemComponent, TheImageComponent,
             TheTemplateComponent,
             TheHrComponent,
             TheBlockquoteComponent,
@@ -13415,6 +13481,7 @@
     exports.DefaultInlineToolbarDefinition = DefaultInlineToolbarDefinition;
     exports.DefaultQuickToolbarDefinition = DefaultQuickToolbarDefinition;
     exports.ELEMENT_UNIQUE_ID = ELEMENT_UNIQUE_ID;
+    exports.FontSizeTypes = FontSizeTypes;
     exports.HEADING_TYPES = HEADING_TYPES;
     exports.HeadingEditor = HeadingEditor;
     exports.HrEditor = HrEditor;
@@ -13462,7 +13529,6 @@
     exports.ToolbarMoreGroup = ToolbarMoreGroup;
     exports.VOID_BLOCK_TYPES = VOID_BLOCK_TYPES;
     exports.VerticalAlignEditor = VerticalAlignEditor;
-    exports.ZERO_WIDTH_CHAR = ZERO_WIDTH_CHAR;
     exports.createEmptyParagraph = createEmptyParagraph;
     exports.dataDeserialize = dataDeserialize;
     exports.dataSerializing = dataSerializing;