@worktile/theia 2.1.1 → 2.1.5

package/fesm2015/worktile-theia.js

@@ -20,7 +20,7 @@ import * as i2 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i1$1 from 'ngx-tethys/alert';
 import { ThyAlertModule } from 'ngx-tethys/alert';
-import { map, take, delay, startWith, distinctUntilChanged, skip, share, filter, throttleTime, takeUntil, mapTo, debounceTime, pairwise } from 'rxjs/operators';
+import { map, takeUntil, take, delay, startWith, distinctUntilChanged, skip, share, filter, throttleTime, mapTo, debounceTime, pairwise } from 'rxjs/operators';
 import { ThyUploadStatus } from 'ngx-tethys/uploader';
 import * as i1$2 from '@angular/platform-browser';
 import { fromEvent, timer, Subject, combineLatest, Observable, BehaviorSubject, merge, ReplaySubject } from 'rxjs';
@@ -65,10 +65,10 @@ const PICTURE_ACCEPTED_UPLOAD_SIZE = 20;
 const A_TAG_REL_ATTR = 'noopener noreferrer nofollow external ugc';
 const LINK_DEFAULT_TEXT = '链接';
 const TAB_SPACE = '    ';
-const ZERO_WIDTH_CHAR = '\u200B';
 const CLIPBOARD_FORMAT_KEY = 'x-theia-fragment';
 const DEFAULT_SCROLL_CONTAINER = '.the-editable-container';
 const ELEMENT_UNIQUE_ID = 'key';
+const ZERO_WIDTH_CHAR = '\u200B';
 var TheMode;
 (function (TheMode) {
     TheMode["fullMode"] = "full";
@@ -99,6 +99,7 @@ var ElementKinds;
     ElementKinds["hr"] = "hr";
     ElementKinds["link"] = "link";
     ElementKinds["default"] = "paragraph";
+    ElementKinds["inlineCode"] = "inline-code";
 })(ElementKinds || (ElementKinds = {}));
 var Alignment;
 (function (Alignment) {
@@ -112,6 +113,34 @@ var VerticalAlignment;
     VerticalAlignment["middle"] = "middle";
     VerticalAlignment["bottom"] = "bottom";
 })(VerticalAlignment || (VerticalAlignment = {}));
+var FontSizes;
+(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";
+})(FontSizes || (FontSizes = {}));
+const FontSizeTypes = [
+    FontSizes.fontSize12,
+    FontSizes.fontSize13,
+    FontSizes.fontSize14,
+    FontSizes.fontSize15,
+    FontSizes.fontSize16,
+    FontSizes.fontSize20,
+    FontSizes.fontSize24,
+    FontSizes.fontSize28,
+    FontSizes.fontSize32,
+    FontSizes.fontSize40,
+    FontSizes.fontSize48
+];
 var MarkTypes;
 (function (MarkTypes) {
     MarkTypes["bold"] = "bold";
@@ -120,8 +149,8 @@ var MarkTypes;
     MarkTypes["strike"] = "strike";
     MarkTypes["color"] = "color";
     MarkTypes["backgroundColor"] = "background-color";
-    MarkTypes["codeLine"] = "code-line";
     MarkTypes["fontSize"] = "font-size";
+    MarkTypes["codeLine"] = "code-line";
 })(MarkTypes || (MarkTypes = {}));
 var ToolbarActionTypes;
 (function (ToolbarActionTypes) {
@@ -146,12 +175,12 @@ var ToolbarActionTypes;
 const MarkProps = [
     MarkTypes.backgroundColor,
     MarkTypes.bold,
-    MarkTypes.codeLine,
     MarkTypes.color,
     MarkTypes.italic,
     MarkTypes.strike,
     MarkTypes.underline,
-    MarkTypes.fontSize
+    MarkTypes.fontSize,
+    MarkTypes.codeLine
 ];
 const THE_INLINE_TOOLBAR_TYPES = [ElementKinds.default, ElementKinds.listItem, ElementKinds.checkItem];
 const STANDARD_HEADING_TYPES = [
@@ -187,7 +216,7 @@ const DefaultGlobalToolbarDefinition = [
     MarkTypes.italic,
     MarkTypes.underline,
     MarkTypes.strike,
-    MarkTypes.codeLine,
+    ElementKinds.inlineCode,
     MarkTypes.color,
     MarkTypes.backgroundColor,
     ToolbarActionTypes.split,
@@ -196,7 +225,7 @@ const DefaultGlobalToolbarDefinition = [
     ToolbarActionTypes.split,
     ElementKinds.numberedList,
     ElementKinds.bulletedList,
-    ElementKinds.checkItem,
+    // ElementKinds.checkItem,
     ToolbarActionTypes.split,
     ElementKinds.link,
     ElementKinds.image,
@@ -211,7 +240,7 @@ const DefaultInlineToolbarDefinition = [
     MarkTypes.italic,
     MarkTypes.underline,
     MarkTypes.strike,
-    MarkTypes.codeLine,
+    ElementKinds.inlineCode,
     MarkTypes.color,
     MarkTypes.backgroundColor,
     ToolbarActionTypes.split,
@@ -224,7 +253,7 @@ const DefaultQuickToolbarDefinition = [
     ToolbarActionTypes.split,
     ElementKinds.numberedList,
     ElementKinds.bulletedList,
-    ElementKinds.checkItem,
+    // ElementKinds.checkItem,
     ToolbarActionTypes.split,
     ElementKinds.link,
     ElementKinds.image,
@@ -1719,6 +1748,49 @@ const BlockquoteEditor = {
     }
 };
 
+const InlineCodeEditor = {
+    toggleInlineCode(editor, text) {
+        const isActive = InlineCodeEditor.isInlineCodeActive(editor);
+        if (isActive) {
+            InlineCodeEditor.unwrapInlineCode(editor);
+            return;
+        }
+        if (Range.isCollapsed(editor.selection)) {
+            InlineCodeEditor.wrapInlineCode(editor, text);
+        }
+        else {
+            const fragment = Node.fragment(editor, editor.selection)[0];
+            const selectNode = Node.get(fragment, []);
+            const selectText = Node.string(selectNode);
+            InlineCodeEditor.wrapInlineCode(editor, selectText);
+        }
+    },
+    wrapInlineCode(editor, text = '') {
+        if (InlineCodeEditor.isInlineCodeActive(editor)) {
+            InlineCodeEditor.unwrapInlineCode(editor);
+        }
+        const { selection } = editor;
+        const isCollapsed = selection && Range.isCollapsed(selection);
+        const inlineCode = {
+            type: ElementKinds.inlineCode,
+            children: isCollapsed ? [{ text: text ? text : ZERO_WIDTH_CHAR }] : []
+        };
+        if (isCollapsed) {
+            Transforms.insertNodes(editor, inlineCode);
+        }
+        else {
+            Transforms.wrapNodes(editor, inlineCode, { split: true });
+        }
+    },
+    unwrapInlineCode(editor) {
+        Transforms.unwrapNodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode });
+    },
+    isInlineCodeActive(editor) {
+        const [inlineCode] = Editor.nodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode });
+        return !!inlineCode;
+    }
+};
+
 const autoFormatRules = [
     {
         type: ElementKinds.heading_1,
@@ -1776,10 +1848,13 @@ const autoFormatRules = [
         insertTrigger: true
     },
     {
-        type: MarkTypes.codeLine,
+        type: ElementKinds.inlineCode,
         between: ['`', '`'],
         mode: 'inline',
-        insertTrigger: true
+        format: (editor, text) => {
+            InlineCodeEditor.toggleInlineCode(editor, text);
+            Transforms.select(editor, Editor.after(editor, editor.selection));
+        }
     },
     {
         type: MarkTypes.strike,
@@ -2002,7 +2077,7 @@ const withDeserializeMd = (options) => (editor) => {
                         editor,
                         conversion: () => {
                             try {
-                                const html = marked(plainFragment, { gfm: true });
+                                const html = marked(plainFragment.replace(/\n```/g, "\n\n```"), { gfm: true });
                                 const htmlDom = new DOMParser().parseFromString(html, 'text/html');
                                 const fragment = TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
                                 if (!isUnformatted(fragment)) {
@@ -2261,6 +2336,13 @@ class TheContextService {
         }
         return this.options;
     }
+    getTheOptions() {
+        return this.options.theOptions;
+    }
+    getDefaultFontSize() {
+        var _a;
+        return ((_a = this.options.theOptions) === null || _a === void 0 ? void 0 : _a.fontSize) || FontSizes.fontSize14;
+    }
     getEditableElement() {
         return this.options.nativeElement.querySelector('.the-editor-typo');
     }
@@ -3313,9 +3395,73 @@ class TheListItemComponent extends TheBaseElementComponent {
     ngOnInit() {
         super.ngOnInit();
     }
+    onContextChange() {
+        super.onContextChange();
+        this.addFontSize();
+        this.addMultiDigit();
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
     }
+    addFontSize() {
+        var _a, _b;
+        let firstText;
+        for (const entry of Node.descendants(this.element)) {
+            const node = entry[0];
+            if (Text.isText(node) && !firstText) {
+                firstText = node;
+                break;
+            }
+        }
+        if (!firstText) {
+            return;
+        }
+        const { text } = firstText, rest = __rest(firstText, ["text"]);
+        const size = rest[MarkTypes.fontSize];
+        if (size) {
+            const sizeClass = `font-size-${size}`;
+            const 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();
+        }
+    }
+    clearFontSize() {
+        if (this.fontSizeClass) {
+            this.elementRef.nativeElement.classList.remove(this.fontSizeClass);
+            this.fontSizeClass = null;
+        }
+    }
+    getStart() {
+        const parent = this.elementRef.nativeElement.closest('.slate-element-numbered-list');
+        const start = (parent === null || parent === void 0 ? void 0 : parent.getAttribute('start')) || 1;
+        return Number(start);
+    }
+    getLiIndex() {
+        const path = findPath(this.editor, this.element);
+        const index = path[path.length - 1];
+        return index || 0;
+    }
+    addMultiDigit() {
+        const start = this.getStart();
+        const index = this.getLiIndex();
+        const multiDigit = 'data-multi-digit';
+        // start number + index
+        // when it is greater than 9, it is a multi-digit serial number
+        // exclude Font size >= 20
+        if (start + index > 9) {
+            this.elementRef.nativeElement.setAttribute(multiDigit, true);
+        }
+        else {
+            this.elementRef.nativeElement.removeAttribute(multiDigit);
+        }
+    }
 }
 TheListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TheListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheListItemComponent, selector: "li[theLi]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
@@ -3832,11 +3978,14 @@ const withMark = () => (editor) => {
                 delete marks[key];
                 editor.marks = marks;
                 const text = Editor.string(e, selection.anchor.path);
-                if (text === ZERO_WIDTH_CHAR) {
-                    Transforms.unsetNodes(e, key, { at: selection.anchor.path });
+                if (text !== '') {
+                    Editor.setNormalizing(editor, false);
+                    e.insertText('');
+                    editor.marks = marks;
+                    Editor.setNormalizing(editor, true);
                 }
-                if (text !== ZERO_WIDTH_CHAR && text !== '') {
-                    e.insertText(ZERO_WIDTH_CHAR);
+                else {
+                    Transforms.unsetNodes(e, key, { at: selection.anchor.path });
                 }
                 if (shouldChange) {
                     editor.onChange();
@@ -3854,11 +4003,14 @@ const withMark = () => (editor) => {
                 const marks = Object.assign(Object.assign({}, (Editor.marks(e) || {})), { [key]: value });
                 editor.marks = marks;
                 const text = Editor.string(e, selection.anchor.path);
-                if (text === ZERO_WIDTH_CHAR) {
-                    Transforms.setNodes(e, { [key]: value }, { at: selection.anchor.path });
+                if (text !== '') {
+                    Editor.setNormalizing(editor, false);
+                    e.insertText('');
+                    editor.marks = marks;
+                    Editor.setNormalizing(editor, true);
                 }
-                if (text !== ZERO_WIDTH_CHAR && text !== '') {
-                    e.insertText(ZERO_WIDTH_CHAR);
+                else {
+                    Transforms.setNodes(e, { [key]: value }, { at: selection.anchor.path });
                 }
             }
         }
@@ -3927,7 +4079,7 @@ const autoFormatBlock = (editor, type, at, { preFormat, format }, markups) => {
     }
 };
 
-const autoFormatInline = (editor, { type, between, markup, ignoreTrim }) => {
+const autoFormatInline = (editor, { type, between, markup, ignoreTrim, format }) => {
     const selection = editor.selection;
     const startMarkup = between ? between[0] : markup;
     const endMarkup = between ? between[1] : '';
@@ -3971,22 +4123,35 @@ const autoFormatInline = (editor, { type, between, markup, ignoreTrim }) => {
             }
         });
     }
-    // add mark to the text between the markups
-    Transforms.select(editor, markupRange);
-    editor.addMark(type, true);
-    Transforms.collapse(editor, { edge: 'end' });
-    editor.removeMark(type, false);
-    // delete start markup
     const startMarkupPointBefore = getPointBefore(editor, selection, {
         matchString: startMarkup,
         skipInvalid: true
     });
-    Transforms.delete(editor, {
-        at: {
-            anchor: startMarkupPointBefore,
-            focus: startMarkupPointAfter
-        }
-    });
+    if (format) {
+        const markupText = getText(editor, markupRange);
+        format(editor, markupText);
+        // delete start to end selection
+        Transforms.delete(editor, {
+            at: {
+                anchor: startMarkupPointBefore,
+                focus: selection.anchor
+            }
+        });
+    }
+    else {
+        // add mark to the text between the markups
+        Transforms.select(editor, markupRange);
+        editor.addMark(type, true);
+        Transforms.collapse(editor, { edge: 'end' });
+        editor.removeMark(type, false);
+        // delete start markup
+        Transforms.delete(editor, {
+            at: {
+                anchor: startMarkupPointBefore,
+                focus: startMarkupPointAfter
+            }
+        });
+    }
     return true;
 };
 
@@ -4059,6 +4224,7 @@ const withAutoFormat = ({ rules }) => (editor) => {
                     type,
                     between,
                     ignoreTrim,
+                    format,
                     markup: Array.isArray(markup) ? markup[0] : markup
                 })) {
                     return valid();
@@ -5385,14 +5551,6 @@ const MarkOptions = [
         shortcutKey: `${CONTROL_KEY}+U`,
         execute: editor => MarkEditor.toggleMark(editor, MarkTypes.underline),
         active: editor => MarkEditor.isMarkActive(editor, MarkTypes.underline)
-    },
-    {
-        key: MarkTypes.codeLine,
-        icon: 'code',
-        name: '行内代码',
-        shortcutKey: `${CONTROL_KEY}+E`,
-        execute: editor => MarkEditor.toggleMark(editor, MarkTypes.codeLine),
-        active: editor => MarkEditor.isMarkActive(editor, MarkTypes.codeLine)
     }
 ];
 
@@ -5450,6 +5608,15 @@ const HeadingEditor = {
                 split: true
             });
             Transforms.setNodes(editor, { type: heading });
+            const entry = anchorBlockEntry(editor);
+            const unMarks = {
+                [MarkTypes.fontSize]: null
+            };
+            if (entry) {
+                setMarks(editor, unMarks, entry[1]);
+                return;
+            }
+            setMarks(editor, unMarks, editor.selection);
         });
     },
     isHeadingActive(editor, heading) {
@@ -5466,6 +5633,7 @@ const HeadingOptions = [
         name: '正文',
         key: ElementKinds.headingList,
         type: ToolbarItemType.toolDropdown,
+        dropdownItemKey: ElementKinds.paragraph,
         includes: [ElementKinds.paragraph, ...STANDARD_HEADING_TYPES]
     },
     {
@@ -5560,6 +5728,7 @@ const AlignOptions = [
         key: ToolbarActionTypes.alignType,
         type: ToolbarItemType.toolDropdown,
         dropdownMode: DropdownMode.icon,
+        dropdownItemKey: ToolbarActionTypes.alignLeft,
         includes: [ToolbarActionTypes.alignLeft, ToolbarActionTypes.alignCenter, ToolbarActionTypes.alignRight],
         name: '对齐方式'
     },
@@ -6176,6 +6345,7 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
         this.overlay = overlay;
         this.mode = DropdownMode.text;
         this.dropdownMode = DropdownMode;
+        this.disabled = false;
     }
     set item(i) {
         this._item = i;
@@ -6190,7 +6360,7 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
     toggleDropdown(event) {
         var _a;
         super.execute(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();
@@ -6200,6 +6370,9 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
             this.closeDropdownPopover();
         }
     }
+    get disabledState() {
+        return this.disabled;
+    }
     ngOnInit() {
         var _a;
         if (!this.template) {
@@ -6213,12 +6386,14 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
         }
     }
     statusChange(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;
         const activeItem = this.menus.find(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;
     }
     itemMousedown(event, item) {
         super.execute(event);
@@ -6272,7 +6447,7 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarDropdownComponent.ɵcmp = i0.ɵɵ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, 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.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"] }, { type: i5$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheToolbarDropdownComponent.ɵcmp = i0.ɵɵ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, 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.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"] }, { type: i5$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -6307,6 +6482,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }], handleDocumentMouseDown: [{
                 type: HostListener,
                 args: ['document: mousedown', ['$event']]
+            }], disabledState: [{
+                type: HostBinding,
+                args: ['class.disabled']
             }] } });
 
 class NavSplitLineComponent {
@@ -6358,8 +6536,9 @@ class TheCodeComponent extends TheBaseElementComponent {
         this.menus = CODE_MODES.map(item => {
             return { key: item.value, name: item.showName };
         });
+        this.destroy$ = new Subject();
         this.ToolbarItemMode = ToolbarItemMode;
-        this.isFocusCode = false;
+        this.isHightLight = false;
         this.resizeHeight = null;
         this.options = {
             mode: this.menus[0].key,
@@ -6396,13 +6575,21 @@ class TheCodeComponent extends TheBaseElementComponent {
             if (this.resizeHeight !== this.element.height) {
                 this.useHeight();
             }
-            if (!this.isCollapsed) {
-                this.isFocusCode = false;
-            }
         }
     }
     ngOnInit() {
         super.ngOnInit();
+        this.ngZone.runOutsideAngular(() => {
+            fromEvent(this.nativeElement, 'mousedown')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(event => {
+                event.stopPropagation();
+                const isBlockOperation = this.isCollapsed &&
+                    this.nativeElement.querySelector('.the-code-block-operation').contains(event.target);
+                const isCodemirror = this.nativeElement.querySelector('.ng-codemirror').contains(event.target);
+                this.isHightLight = !isCodemirror && !isBlockOperation;
+            });
+        });
         this.elementRef.nativeElement.classList.add('the-code-container');
     }
     ngAfterViewInit() {
@@ -6444,11 +6631,11 @@ class TheCodeComponent extends TheBaseElementComponent {
         }
     }
     codeChange($event) {
+        this.isHightLight = false;
         CodeEditor.setCodeAttribute(this.editor, this.element, { content: $event });
     }
     onDelete(event) {
         event.preventDefault();
-        this.isFocusCode = false;
         deleteElement(this.editor, this.element);
     }
     onCopy(event) {
@@ -6466,8 +6653,9 @@ class TheCodeComponent extends TheBaseElementComponent {
         AngularEditor.deselect(this.editor);
     }
     focusChange(codeMirrorFocused) {
-        if (codeMirrorFocused)
-            this.isFocusCode = codeMirrorFocused;
+        if (codeMirrorFocused) {
+            this.isHightLight = false;
+        }
     }
     useMode() {
         this.options = Object.assign(Object.assign({}, this.options), { mode: this.element.language });
@@ -6494,12 +6682,17 @@ class TheCodeComponent extends TheBaseElementComponent {
         CodeEditor.setCodeAttribute(this.editor, this.element, { height: this.resizeHeight });
     }
     onChangeWrap(value) {
+        this.isHightLight = false;
         this.options = Object.assign(Object.assign({}, this.options), { lineWrapping: value || false });
         CodeEditor.setCodeAttribute(this.editor, this.element, { autoWrap: value ? value : null });
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
 }
 TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
-TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, 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<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.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { 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"] }, { type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, template: "<div contenteditable=\"false\" class=\"the-code-block-operation\" *ngIf=\"isCollapsed && codemirror && !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    [ngClass]=\"{ focus: isCollapsed, readonly: options.readOnly, active: isHightLight && isCollapsed }\"\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=\"isCollapsed && !options.readOnly\"></thy-resize-handle>\n</div>\n", components: [{ type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }, { type: i6$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i8.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }, { type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { 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"] }, { type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
             args: [{
@@ -6781,7 +6974,9 @@ class TheBaseLinkComponent extends TheBaseElementComponent {
         }
     }
     mousedownHandle(event) {
-        this.openLinkHover();
+        if (!this.readonly && !this.editor.disabled) {
+            this.openLinkHover();
+        }
     }
     openLinkEdit(tag) {
         if (this.linkHoverOpened) {
@@ -10632,6 +10827,13 @@ class TheToolbarItemComponent extends TheToolbarBaseItemComponent {
         this.itemMode = ToolbarItemMode.horizontal;
         this.ToolbarItemMode = ToolbarItemMode;
         this.active = false;
+        this.disabled = false;
+    }
+    toggleDropdown(event) {
+        super.execute(event);
+    }
+    get disabledState() {
+        return this.disabled;
     }
     ngOnInit() {
         var _a, _b;
@@ -10640,13 +10842,14 @@ class TheToolbarItemComponent extends TheToolbarBaseItemComponent {
         }
     }
     statusChange(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;
     }
     execute(event) {
         var _a, _b, _c;
         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.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);
@@ -10662,7 +10865,7 @@ class TheToolbarItemComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarItemComponent, deps: [{ token: i0.NgZone }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarItemComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+TheToolbarItemComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
         <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
             <a
                 thyIconNavLink
@@ -10721,6 +10924,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }], toolbarContainer: [{
                 type: ViewChild,
                 args: ['toolbarContainer', { read: ViewContainerRef, static: true }]
+            }], toggleDropdown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], disabledState: [{
+                type: HostBinding,
+                args: ['class.disabled']
             }] } });
 
 class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
@@ -10885,130 +11094,178 @@ const withSoftBreak = (options = { rules: [{ hotkey: 'shift+enter' }] }) => (edi
     return editor;
 };
 
-class TheFontSizeToolbarItemComponent extends TheToolbarBaseItemComponent {
-    constructor(elementRef, thyPopover, viewContainerRef, overlay) {
-        super();
-        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;
-    }
-    get isOpen() {
-        return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
-    }
-    get disableClass() {
-        return this.disabled;
-    }
-    toggleDropdown(event) {
-        var _a;
-        super.execute(event);
-        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled) {
+const FontSizeEditor = {
+    setFontSize(editor, size) {
+        const contextService = editor.injector.get(TheContextService);
+        const defaultFontSize = contextService.getDefaultFontSize();
+        const marks = getSelectionMarks(editor);
+        const fontSizeMark = marks[MarkTypes.fontSize];
+        const isDefaultFontSize = size === defaultFontSize;
+        if (!fontSizeMark && isDefaultFontSize) {
             return;
         }
-        this.openDropdownPopover();
-    }
-    handleDocumentMouseDown(event) {
-        if (!this.elementRef.nativeElement.contains(event.target)) {
-            this.closeDropdownPopover();
+        // unset fontSize
+        if (FontSizeEditor.unsetFontSize(editor, size, fontSizeMark, isDefaultFontSize)) {
+            return;
         }
-    }
-    ngOnInit() {
-        this.activeSize = this.fontSizes[2];
-    }
-    statusChange(editor) {
+        FontSizeEditor.setFontSizeMark(editor, size);
+    },
+    setFontSizeMark(editor, size) {
+        // set Table selectedCells fontSize
+        if (TableEditor.toggleMark(editor, false, MarkTypes.fontSize, Number(size))) {
+            return;
+        }
+        // set paragraph text fontSize
+        Editor.addMark(editor, MarkTypes.fontSize, Number(size));
+    },
+    unsetFontSize(editor, size, fontSizeMark, isDefaultFontSize) {
+        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;
+        }
+        return false;
+    },
+    isFontSizeActive(editor, size) {
         if (editor.selection) {
             const 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 ElementKinds.heading_1:
+                    return size === FontSizes.fontSize28;
+                case ElementKinds.heading_2:
+                    return size === FontSizes.fontSize24;
+                case ElementKinds.heading_3:
+                    return size === FontSizes.fontSize20;
+                case ElementKinds.heading_4:
+                    return size === FontSizes.fontSize18;
+                case ElementKinds.heading_5:
+                    return size === FontSizes.fontSize16;
+                case ElementKinds.heading_6:
+                    return size === FontSizes.fontSize14;
+                case ElementKinds.paragraph:
+                    const marks = getSelectionMarks(editor);
+                    const fontSizeMark = marks[MarkTypes.fontSize];
+                    return Number(size) === fontSizeMark;
+                default:
+                    return false;
             }
-            const marks = getSelectionMarks(editor);
-            const fontSizeMark = marks[MarkTypes.fontSize];
-            this.activeSize = fontSizeMark ? fontSizeMark : this.fontSizes[2];
-            this.disabled = false;
-        }
-    }
-    itemMousedown(event, size) {
-        var _a, _b;
-        super.execute(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;
         }
-        const anchorBlock$1 = anchorBlock(this.editor);
-        if (anchorBlock$1 && this.disableGroup.includes(anchorBlock$1.type)) {
-            return;
-        }
-        Editor.addMark(this.editor, MarkTypes.fontSize, size);
-    }
-    openDropdownPopover() {
-        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()
-        });
-    }
-    closeDropdownPopover() {
-        var _a;
-        if (this.dropdownPopoverRef) {
-            (_a = this.dropdownPopoverRef) === null || _a === void 0 ? void 0 : _a.close();
+        return false;
+    },
+    isDisabled(editor) {
+        if (editor.selection) {
+            const disableGroup = HEADING_TYPES;
+            const anchorBlock$1 = anchorBlock(editor);
+            return anchorBlock$1 && disableGroup.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
         }
+        return false;
     }
-}
-TheFontSizeToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheFontSizeToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheFontSizeToolbarItemComponent.ɵcmp = i0.ɵɵ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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheFontSizeToolbarItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'the-font-size-toolbar-item',
-                    templateUrl: './toolbar-item.component.html'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2.Overlay }]; }, propDecorators: { editor: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], dropdownTemplate: [{
-                type: ViewChild,
-                args: ['dropdownTemplate', { static: true }]
-            }], toolbarItemContainer: [{
-                type: HostBinding,
-                args: ['class.the-toolbar-dropdown-container']
-            }], fontSizeToolbarItem: [{
-                type: HostBinding,
-                args: ['class.the-font-size-toolbar-item']
-            }], disableClass: [{
-                type: HostBinding,
-                args: ['class.disabled']
-            }], toggleDropdown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }], handleDocumentMouseDown: [{
-                type: HostListener,
-                args: ['document: mousedown', ['$event']]
-            }] } });
+};
 
-const FontSizes = [12, 13, 14, 15, 16, 19, 22, 24, 29, 32, 40, 48];
+const sizeOptions = () => {
+    return FontSizeTypes.map(fontSize => {
+        return {
+            key: fontSize,
+            name: fontSize,
+            execute: editor => FontSizeEditor.setFontSize(editor, fontSize),
+            active: editor => FontSizeEditor.isFontSizeActive(editor, fontSize)
+        };
+    });
+};
 const FontSizeOptions = [
     {
         key: MarkTypes.fontSize,
         name: '字号',
-        iconComponent: TheFontSizeToolbarItemComponent
+        type: ToolbarItemType.toolDropdown,
+        dropdownItemKey: FontSizes.fontSize14,
+        includes: FontSizeTypes,
+        disable: editor => FontSizeEditor.isDisabled(editor)
+    },
+    ...sizeOptions()
+];
+
+const InlineCodeOptions = [
+    {
+        key: ElementKinds.inlineCode,
+        icon: 'code',
+        name: '行内代码',
+        shortcutKey: `${CONTROL_KEY}+E`,
+        execute: editor => InlineCodeEditor.toggleInlineCode(editor),
+        active: editor => InlineCodeEditor.isInlineCodeActive(editor)
     }
 ];
 
+class TheInlineCodeComponent extends TheBaseElementComponent {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+TheInlineCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheInlineCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineCodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[theInlineCode]',
+                    template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+const withInlineCode = (editor) => {
+    const { isInline, renderElement, insertText } = editor;
+    editor.isInline = (element) => {
+        return element.type === ElementKinds.inlineCode ? true : isInline(element);
+    };
+    editor.renderElement = (element) => {
+        if (element.type === ElementKinds.inlineCode) {
+            return TheInlineCodeComponent;
+        }
+        return renderElement(element);
+    };
+    editor.insertText = text => {
+        if (text && InlineCodeEditor.isInlineCodeActive(editor)) {
+            let selection = editor.selection;
+            const currentNodeText = Editor.string(editor, editor.selection.anchor.path);
+            insertText(text);
+            if (currentNodeText == ZERO_WIDTH_CHAR) {
+                const inlineCodePath = Editor.path(editor, editor.selection);
+                let range = {
+                    anchor: Editor.before(editor, selection.anchor),
+                    focus: selection.anchor
+                };
+                if (Editor.isStart(editor, selection.anchor, inlineCodePath)) {
+                    range = {
+                        anchor: editor.selection.anchor,
+                        focus: Editor.after(editor, editor.selection)
+                    };
+                }
+                Transforms.delete(editor, {
+                    at: range
+                });
+            }
+        }
+        else {
+            insertText(text);
+        }
+    };
+    editor = withRemoveEmptyNodes({ type: ElementKinds.inlineCode })(editor);
+    return editor;
+};
+
 const internalPlugins = [
     withTheHistory,
     withAutoInsertData(),
@@ -11048,7 +11305,8 @@ const internalPlugins = [
     withImage,
     withDeserializeHMTL,
     withDeserializeMd(),
-    withQuickInsert
+    withQuickInsert,
+    withInlineCode
 ];
 const internalToolbarItems = [
     ...AlignOptions,
@@ -11065,7 +11323,8 @@ const internalToolbarItems = [
     ...LinkOptions,
     ...TableOptions,
     ...VerticalAlignOptions,
-    ...PaintFormatOptions
+    ...PaintFormatOptions,
+    ...InlineCodeOptions
 ];
 const toolbarCompose = (toolbarItems = []) => {
     return [...internalToolbarItems, ...toolbarItems];
@@ -11087,14 +11346,19 @@ const HOTKEYS = {
     'mod+b': MarkTypes.bold,
     'mod+i': MarkTypes.italic,
     'mod+u': MarkTypes.underline,
-    'mod+e': MarkTypes.codeLine
+    'mod+e': ElementKinds.inlineCode
 };
 const markShortcuts = (editor, event) => {
     for (const hotkey in HOTKEYS) {
         if (isHotkey(hotkey, event)) {
             event.preventDefault();
             const mark = HOTKEYS[hotkey];
-            MarkEditor.toggleMark(editor, mark);
+            if (mark === ElementKinds.inlineCode) {
+                InlineCodeEditor.toggleInlineCode(editor);
+            }
+            else {
+                MarkEditor.toggleMark(editor, mark);
+            }
         }
     }
 };
@@ -11127,7 +11391,7 @@ class TheToolbarService {
         return entity;
     }
     getToolbarItemByKeys(keys, toolbarItems) {
-        return keys.map(key => {
+        return keys.map((key) => {
             if (key === `split`) {
                 return { key: `split` };
             }
@@ -11355,14 +11619,15 @@ class TheToolbarComponent {
         });
     }
     createToolbarItem(item) {
-        const { iconComponent, type, dropdownMode } = item, args = __rest(item, ["iconComponent", "type", "dropdownMode"]);
+        const { iconComponent, type, dropdownMode, dropdownItemKey, includes } = item, args = __rest(item, ["iconComponent", "type", "dropdownMode", "dropdownItemKey", "includes"]);
         const viewComponent = this.viewComponentType(type);
+        const dropdownItem = this.getDropdownItem(item);
         const factory = this.cfr.resolveComponentFactory(iconComponent ? iconComponent : viewComponent);
         const 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);
     }
@@ -11389,6 +11654,17 @@ class TheToolbarComponent {
         }
         return TheToolbarItemComponent;
     }
+    getDropdownItem(item) {
+        var _a;
+        let dropdownKey = item === null || item === void 0 ? void 0 : item.dropdownItemKey;
+        // modify the fontsize option externally
+        const contextService = this.editor.injector.get(TheContextService);
+        const fontSize = contextService.getDefaultFontSize();
+        if (item.key === MarkTypes.fontSize && fontSize) {
+            dropdownKey = fontSize;
+        }
+        return (_a = item === null || item === void 0 ? void 0 : item.includes) === null || _a === void 0 ? void 0 : _a.find((item) => item.key === dropdownKey);
+    }
 }
 TheToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component });
 TheToolbarComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, 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.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
@@ -11784,14 +12060,14 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
             return leaf ? leaf : null;
         };
         this.renderText = (text) => {
-            if (text.text.length === 0) {
-                return;
-            }
             for (const key in MarkTypes) {
                 if (text[MarkTypes[key]]) {
                     return TheTextComponent;
                 }
             }
+            if (text.text.length === 0) {
+                return;
+            }
         };
         this.onKeyDown = (event) => {
             shortcuts(this.editor, event);
@@ -11906,7 +12182,11 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.editor.disabled = (_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.disabled;
         this.editor.extraElementOptions = (_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.extraElementOptions;
         setEditorUUID(this.editor, idCreator());
-        this.theContextService.initialize({ nativeElement: this.elementRef.nativeElement, viewContainerRef: this.viewContainerRef });
+        this.theContextService.initialize({
+            theOptions: this.theOptions,
+            nativeElement: this.elementRef.nativeElement,
+            viewContainerRef: this.viewContainerRef
+        });
         this.toolbarCalculate();
         setTimeout(() => {
             var _a;
@@ -12093,12 +12373,13 @@ 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 }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: 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        [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.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.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"] }] });
+    ], 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, 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.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.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.7", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-editor, theEditor',
                     templateUrl: 'editor.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         TheToolbarService,
                         TheContextService,
@@ -12319,8 +12600,7 @@ const COMPONENTS = [
     TheTableSelectComponent,
     TheTableToolbarItemComponent,
     TheConversionHintComponent,
-    TheVerticalToolbarItemComponent,
-    TheFontSizeToolbarItemComponent
+    TheVerticalToolbarItemComponent
 ];
 const PLUGIN_COMPONENTS = [
     TheImageComponent,
@@ -12340,7 +12620,8 @@ const PLUGIN_COMPONENTS = [
     TheTableComponent,
     TheTableRowComponent,
     TheTdComponent,
-    ThePlaceholderComponent
+    ThePlaceholderComponent,
+    TheInlineCodeComponent
 ];
 const PIPES = [ElementStylePipe, ElementClassPipe];
 class TheEditorModule {
@@ -12363,8 +12644,7 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableSelectComponent,
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
-        TheVerticalToolbarItemComponent,
-        TheFontSizeToolbarItemComponent, TheImageComponent,
+        TheVerticalToolbarItemComponent, TheImageComponent,
         TheTemplateComponent,
         TheHrComponent,
         TheBlockquoteComponent,
@@ -12381,7 +12661,8 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableComponent,
         TheTableRowComponent,
         TheTdComponent,
-        ThePlaceholderComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
+        ThePlaceholderComponent,
+        TheInlineCodeComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
         ThyAvatarModule,
         ThyNavModule,
         ThyFormModule,
@@ -12430,5 +12711,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, QUICK_TOOLBAR_HOTKEY, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_CODE_MODE_PROVIDER, THE_CODE_MODE_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheCodeConfig, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, index$1 as TheQueries, TheToolbarBaseItemComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, createEmptyParagraph, dataDeserialize, dataSerializing, getToolbarClass, htmlToTheia, inValidTypes, plainToTheia, toolbarCompose, withTheEditor };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, QUICK_TOOLBAR_HOTKEY, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_CODE_MODE_PROVIDER, THE_CODE_MODE_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheCodeConfig, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, index$1 as TheQueries, TheToolbarBaseItemComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, createEmptyParagraph, dataDeserialize, dataSerializing, getToolbarClass, htmlToTheia, inValidTypes, plainToTheia, toolbarCompose, withTheEditor };
 //# sourceMappingURL=worktile-theia.js.map