@worktile/theia 2.1.4 → 2.1.5

package/bundles/worktile-theia.umd.js

@@ -378,6 +378,7 @@
     var CLIPBOARD_FORMAT_KEY = 'x-theia-fragment';
     var DEFAULT_SCROLL_CONTAINER = '.the-editable-container';
     var ELEMENT_UNIQUE_ID = 'key';
+    var ZERO_WIDTH_CHAR = '\u200B';
     exports.TheMode = void 0;
     (function (TheMode) {
         TheMode["fullMode"] = "full";
@@ -408,6 +409,7 @@
         ElementKinds["hr"] = "hr";
         ElementKinds["link"] = "link";
         ElementKinds["default"] = "paragraph";
+        ElementKinds["inlineCode"] = "inline-code";
     })(exports.ElementKinds || (exports.ElementKinds = {}));
     exports.Alignment = void 0;
     (function (Alignment) {
@@ -457,8 +459,8 @@
         MarkTypes["strike"] = "strike";
         MarkTypes["color"] = "color";
         MarkTypes["backgroundColor"] = "background-color";
-        MarkTypes["codeLine"] = "code-line";
         MarkTypes["fontSize"] = "font-size";
+        MarkTypes["codeLine"] = "code-line";
     })(exports.MarkTypes || (exports.MarkTypes = {}));
     exports.ToolbarActionTypes = void 0;
     (function (ToolbarActionTypes) {
@@ -483,12 +485,12 @@
     var MarkProps = [
         exports.MarkTypes.backgroundColor,
         exports.MarkTypes.bold,
-        exports.MarkTypes.codeLine,
         exports.MarkTypes.color,
         exports.MarkTypes.italic,
         exports.MarkTypes.strike,
         exports.MarkTypes.underline,
-        exports.MarkTypes.fontSize
+        exports.MarkTypes.fontSize,
+        exports.MarkTypes.codeLine
     ];
     var THE_INLINE_TOOLBAR_TYPES = [exports.ElementKinds.default, exports.ElementKinds.listItem, exports.ElementKinds.checkItem];
     var STANDARD_HEADING_TYPES = [
@@ -524,7 +526,7 @@
         exports.MarkTypes.italic,
         exports.MarkTypes.underline,
         exports.MarkTypes.strike,
-        exports.MarkTypes.codeLine,
+        exports.ElementKinds.inlineCode,
         exports.MarkTypes.color,
         exports.MarkTypes.backgroundColor,
         exports.ToolbarActionTypes.split,
@@ -533,7 +535,7 @@
         exports.ToolbarActionTypes.split,
         exports.ElementKinds.numberedList,
         exports.ElementKinds.bulletedList,
-        exports.ElementKinds.checkItem,
+        // ElementKinds.checkItem,
         exports.ToolbarActionTypes.split,
         exports.ElementKinds.link,
         exports.ElementKinds.image,
@@ -548,7 +550,7 @@
         exports.MarkTypes.italic,
         exports.MarkTypes.underline,
         exports.MarkTypes.strike,
-        exports.MarkTypes.codeLine,
+        exports.ElementKinds.inlineCode,
         exports.MarkTypes.color,
         exports.MarkTypes.backgroundColor,
         exports.ToolbarActionTypes.split,
@@ -560,7 +562,7 @@
         exports.ToolbarActionTypes.split,
         exports.ElementKinds.numberedList,
         exports.ElementKinds.bulletedList,
-        exports.ElementKinds.checkItem,
+        // ElementKinds.checkItem,
         exports.ToolbarActionTypes.split,
         exports.ElementKinds.link,
         exports.ElementKinds.image,
@@ -2163,6 +2165,50 @@
         }
     };
 
+    var InlineCodeEditor = {
+        toggleInlineCode: function (editor, text) {
+            var isActive = InlineCodeEditor.isInlineCodeActive(editor);
+            if (isActive) {
+                InlineCodeEditor.unwrapInlineCode(editor);
+                return;
+            }
+            if (slate.Range.isCollapsed(editor.selection)) {
+                InlineCodeEditor.wrapInlineCode(editor, text);
+            }
+            else {
+                var fragment = slate.Node.fragment(editor, editor.selection)[0];
+                var selectNode = slate.Node.get(fragment, []);
+                var selectText = slate.Node.string(selectNode);
+                InlineCodeEditor.wrapInlineCode(editor, selectText);
+            }
+        },
+        wrapInlineCode: function (editor, text) {
+            if (text === void 0) { text = ''; }
+            if (InlineCodeEditor.isInlineCodeActive(editor)) {
+                InlineCodeEditor.unwrapInlineCode(editor);
+            }
+            var selection = editor.selection;
+            var isCollapsed = selection && slate.Range.isCollapsed(selection);
+            var inlineCode = {
+                type: exports.ElementKinds.inlineCode,
+                children: isCollapsed ? [{ text: text ? text : ZERO_WIDTH_CHAR }] : []
+            };
+            if (isCollapsed) {
+                slate.Transforms.insertNodes(editor, inlineCode);
+            }
+            else {
+                slate.Transforms.wrapNodes(editor, inlineCode, { split: true });
+            }
+        },
+        unwrapInlineCode: function (editor) {
+            slate.Transforms.unwrapNodes(editor, { match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; } });
+        },
+        isInlineCodeActive: function (editor) {
+            var _a = __read(slate.Editor.nodes(editor, { match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; } }), 1), inlineCode = _a[0];
+            return !!inlineCode;
+        }
+    };
+
     var autoFormatRules = [
         {
             type: exports.ElementKinds.heading_1,
@@ -2220,10 +2266,13 @@
             insertTrigger: true
         },
         {
-            type: exports.MarkTypes.codeLine,
+            type: exports.ElementKinds.inlineCode,
             between: ['`', '`'],
             mode: 'inline',
-            insertTrigger: true
+            format: function (editor, text) {
+                InlineCodeEditor.toggleInlineCode(editor, text);
+                slate.Transforms.select(editor, slate.Editor.after(editor, editor.selection));
+            }
         },
         {
             type: exports.MarkTypes.strike,
@@ -2708,6 +2757,13 @@
             }
             return this.options;
         };
+        TheContextService.prototype.getTheOptions = function () {
+            return this.options.theOptions;
+        };
+        TheContextService.prototype.getDefaultFontSize = function () {
+            var _a;
+            return ((_a = this.options.theOptions) === null || _a === void 0 ? void 0 : _a.fontSize) || exports.FontSizes.fontSize14;
+        };
         TheContextService.prototype.getEditableElement = function () {
             return this.options.nativeElement.querySelector('.the-editor-typo');
         };
@@ -3840,12 +3896,13 @@
         };
         TheListItemComponent.prototype.onContextChange = function () {
             _super.prototype.onContextChange.call(this);
-            this.applyFontSize();
+            this.addFontSize();
+            this.addMultiDigit();
         };
         TheListItemComponent.prototype.ngOnDestroy = function () {
             _super.prototype.ngOnDestroy.call(this);
         };
-        TheListItemComponent.prototype.applyFontSize = function () {
+        TheListItemComponent.prototype.addFontSize = function () {
             var e_1, _c;
             var _a, _b;
             var firstText;
@@ -3891,6 +3948,30 @@
                 this.fontSizeClass = null;
             }
         };
+        TheListItemComponent.prototype.getStart = function () {
+            var parent = this.elementRef.nativeElement.closest('.slate-element-numbered-list');
+            var start = (parent === null || parent === void 0 ? void 0 : parent.getAttribute('start')) || 1;
+            return Number(start);
+        };
+        TheListItemComponent.prototype.getLiIndex = function () {
+            var path = findPath(this.editor, this.element);
+            var index = path[path.length - 1];
+            return index || 0;
+        };
+        TheListItemComponent.prototype.addMultiDigit = function () {
+            var start = this.getStart();
+            var index = this.getLiIndex();
+            var 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);
+            }
+        };
         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 });
@@ -4510,7 +4591,7 @@
     };
 
     var autoFormatInline = function (editor, _a) {
-        var type = _a.type, between = _a.between, markup = _a.markup, ignoreTrim = _a.ignoreTrim;
+        var type = _a.type, between = _a.between, markup = _a.markup, ignoreTrim = _a.ignoreTrim, format = _a.format;
         var selection = editor.selection;
         var startMarkup = between ? between[0] : markup;
         var endMarkup = between ? between[1] : '';
@@ -4554,22 +4635,35 @@
                 }
             });
         }
-        // add mark to the text between the markups
-        slate.Transforms.select(editor, markupRange);
-        editor.addMark(type, true);
-        slate.Transforms.collapse(editor, { edge: 'end' });
-        editor.removeMark(type, false);
-        // delete start markup
         var startMarkupPointBefore = getPointBefore(editor, selection, {
             matchString: startMarkup,
             skipInvalid: true
         });
-        slate.Transforms.delete(editor, {
-            at: {
-                anchor: startMarkupPointBefore,
-                focus: startMarkupPointAfter
-            }
-        });
+        if (format) {
+            var markupText = getText(editor, markupRange);
+            format(editor, markupText);
+            // delete start to end selection
+            slate.Transforms.delete(editor, {
+                at: {
+                    anchor: startMarkupPointBefore,
+                    focus: selection.anchor
+                }
+            });
+        }
+        else {
+            // add mark to the text between the markups
+            slate.Transforms.select(editor, markupRange);
+            editor.addMark(type, true);
+            slate.Transforms.collapse(editor, { edge: 'end' });
+            editor.removeMark(type, false);
+            // delete start markup
+            slate.Transforms.delete(editor, {
+                at: {
+                    anchor: startMarkupPointBefore,
+                    focus: startMarkupPointAfter
+                }
+            });
+        }
         return true;
     };
 
@@ -4645,6 +4739,7 @@
                             type: type,
                             between: between,
                             ignoreTrim: ignoreTrim,
+                            format: format,
                             markup: Array.isArray(markup) ? markup[0] : markup
                         })) {
                             return { value: valid() };
@@ -6044,14 +6139,6 @@
             shortcutKey: CONTROL_KEY + "+U",
             execute: function (editor) { return MarkEditor.toggleMark(editor, exports.MarkTypes.underline); },
             active: function (editor) { return MarkEditor.isMarkActive(editor, exports.MarkTypes.underline); }
-        },
-        {
-            key: exports.MarkTypes.codeLine,
-            icon: 'code',
-            name: '行内代码',
-            shortcutKey: CONTROL_KEY + "+E",
-            execute: function (editor) { return MarkEditor.toggleMark(editor, exports.MarkTypes.codeLine); },
-            active: function (editor) { return MarkEditor.isMarkActive(editor, exports.MarkTypes.codeLine); }
         }
     ];
 
@@ -7044,8 +7131,9 @@
             _this.menus = CODE_MODES.map(function (item) {
                 return { key: item.value, name: item.showName };
             });
+            _this.destroy$ = new rxjs.Subject();
             _this.ToolbarItemMode = exports.ToolbarItemMode;
-            _this.isFocusCode = false;
+            _this.isHightLight = false;
             _this.resizeHeight = null;
             _this.options = {
                 mode: _this.menus[0].key,
@@ -7087,13 +7175,22 @@
                 if (this.resizeHeight !== this.element.height) {
                     this.useHeight();
                 }
-                if (!this.isCollapsed) {
-                    this.isFocusCode = false;
-                }
             }
         };
         TheCodeComponent.prototype.ngOnInit = function () {
+            var _this = this;
             _super.prototype.ngOnInit.call(this);
+            this.ngZone.runOutsideAngular(function () {
+                rxjs.fromEvent(_this.nativeElement, 'mousedown')
+                    .pipe(operators.takeUntil(_this.destroy$))
+                    .subscribe(function (event) {
+                    event.stopPropagation();
+                    var isBlockOperation = _this.isCollapsed &&
+                        _this.nativeElement.querySelector('.the-code-block-operation').contains(event.target);
+                    var isCodemirror = _this.nativeElement.querySelector('.ng-codemirror').contains(event.target);
+                    _this.isHightLight = !isCodemirror && !isBlockOperation;
+                });
+            });
             this.elementRef.nativeElement.classList.add('the-code-container');
         };
         TheCodeComponent.prototype.ngAfterViewInit = function () {
@@ -7137,11 +7234,11 @@
             }
         };
         TheCodeComponent.prototype.codeChange = function ($event) {
+            this.isHightLight = false;
             CodeEditor.setCodeAttribute(this.editor, this.element, { content: $event });
         };
         TheCodeComponent.prototype.onDelete = function (event) {
             event.preventDefault();
-            this.isFocusCode = false;
             deleteElement(this.editor, this.element);
         };
         TheCodeComponent.prototype.onCopy = function (event) {
@@ -7159,8 +7256,9 @@
             i1.AngularEditor.deselect(this.editor);
         };
         TheCodeComponent.prototype.focusChange = function (codeMirrorFocused) {
-            if (codeMirrorFocused)
-                this.isFocusCode = codeMirrorFocused;
+            if (codeMirrorFocused) {
+                this.isHightLight = false;
+            }
         };
         TheCodeComponent.prototype.useMode = function () {
             var _this = this;
@@ -7189,13 +7287,18 @@
             CodeEditor.setCodeAttribute(this.editor, this.element, { height: this.resizeHeight });
         };
         TheCodeComponent.prototype.onChangeWrap = function (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 });
         };
+        TheCodeComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
         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)]=\"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 });
+    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=\"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__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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: [{
@@ -7492,7 +7595,9 @@
             }
         };
         TheBaseLinkComponent.prototype.mousedownHandle = function (event) {
-            this.openLinkHover();
+            if (!this.readonly && !this.editor.disabled) {
+                this.openLinkHover();
+            }
         };
         TheBaseLinkComponent.prototype.openLinkEdit = function (tag) {
             var _this = this;
@@ -11866,11 +11971,44 @@
 
     var FontSizeEditor = {
         setFontSize: function (editor, size) {
+            var contextService = editor.injector.get(TheContextService);
+            var defaultFontSize = contextService.getDefaultFontSize();
+            var marks = getSelectionMarks(editor);
+            var fontSizeMark = marks[exports.MarkTypes.fontSize];
+            var isDefaultFontSize = size === defaultFontSize;
+            if (!fontSizeMark && isDefaultFontSize) {
+                return;
+            }
+            // unset fontSize
+            if (FontSizeEditor.unsetFontSize(editor, size, fontSizeMark, isDefaultFontSize)) {
+                return;
+            }
+            FontSizeEditor.setFontSizeMark(editor, size);
+        },
+        setFontSizeMark: function (editor, size) {
+            // set Table selectedCells fontSize
             if (TableEditor.toggleMark(editor, false, exports.MarkTypes.fontSize, Number(size))) {
                 return;
             }
+            // set paragraph text fontSize
             slate.Editor.addMark(editor, exports.MarkTypes.fontSize, Number(size));
         },
+        unsetFontSize: function (editor, size, fontSizeMark, isDefaultFontSize) {
+            var _a;
+            var isTable = TableEditor.isActive(editor);
+            if (fontSizeMark && isDefaultFontSize) {
+                // unset Table selectedCells fontSize
+                if (isTable && TableEditor.toggleMark(editor, true, exports.MarkTypes.fontSize, Number(size))) {
+                    return true;
+                }
+                // unset paragraph text fontSize
+                setMarks(editor, (_a = {},
+                    _a[exports.MarkTypes.fontSize] = null,
+                    _a), editor.selection);
+                return true;
+            }
+            return false;
+        },
         isFontSizeActive: function (editor, size) {
             if (editor.selection) {
                 var anchorBlock$1 = anchorBlock(editor);
@@ -11928,6 +12066,84 @@
         }
     ], __read(sizeOptions()));
 
+    var InlineCodeOptions = [
+        {
+            key: exports.ElementKinds.inlineCode,
+            icon: 'code',
+            name: '行内代码',
+            shortcutKey: CONTROL_KEY + "+E",
+            execute: function (editor) { return InlineCodeEditor.toggleInlineCode(editor); },
+            active: function (editor) { return InlineCodeEditor.isInlineCodeActive(editor); }
+        }
+    ];
+
+    var TheInlineCodeComponent = /** @class */ (function (_super) {
+        __extends(TheInlineCodeComponent, _super);
+        function TheInlineCodeComponent(elementRef, cdr) {
+            var _this = _super.call(this, elementRef, cdr) || this;
+            _this.elementRef = elementRef;
+            _this.cdr = cdr;
+            return _this;
+        }
+        TheInlineCodeComponent.prototype.ngOnInit = function () {
+            _super.prototype.ngOnInit.call(this);
+        };
+        TheInlineCodeComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        return TheInlineCodeComponent;
+    }(TheBaseElementComponent));
+    TheInlineCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheInlineCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0__namespace, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineCodeComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'span[theInlineCode]',
+                        template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>'
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
+
+    var withInlineCode = function (editor) {
+        var isInline = editor.isInline, renderElement = editor.renderElement, insertText = editor.insertText;
+        editor.isInline = function (element) {
+            return element.type === exports.ElementKinds.inlineCode ? true : isInline(element);
+        };
+        editor.renderElement = function (element) {
+            if (element.type === exports.ElementKinds.inlineCode) {
+                return TheInlineCodeComponent;
+            }
+            return renderElement(element);
+        };
+        editor.insertText = function (text) {
+            if (text && InlineCodeEditor.isInlineCodeActive(editor)) {
+                var selection = editor.selection;
+                var currentNodeText = slate.Editor.string(editor, editor.selection.anchor.path);
+                insertText(text);
+                if (currentNodeText == ZERO_WIDTH_CHAR) {
+                    var inlineCodePath = slate.Editor.path(editor, editor.selection);
+                    var range = {
+                        anchor: slate.Editor.before(editor, selection.anchor),
+                        focus: selection.anchor
+                    };
+                    if (slate.Editor.isStart(editor, selection.anchor, inlineCodePath)) {
+                        range = {
+                            anchor: editor.selection.anchor,
+                            focus: slate.Editor.after(editor, editor.selection)
+                        };
+                    }
+                    slate.Transforms.delete(editor, {
+                        at: range
+                    });
+                }
+            }
+            else {
+                insertText(text);
+            }
+        };
+        editor = withRemoveEmptyNodes({ type: exports.ElementKinds.inlineCode })(editor);
+        return editor;
+    };
+
     var internalPlugins = [
         withTheHistory,
         withAutoInsertData(),
@@ -11967,9 +12183,10 @@
         withImage,
         withDeserializeHMTL,
         withDeserializeMd(),
-        withQuickInsert
+        withQuickInsert,
+        withInlineCode
     ];
-    var internalToolbarItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(AlignOptions)), __read(MarkOptions)), __read(ColorOptions)), __read(HeadingOptions)), __read(FontSizeOptions)), __read(TodoItemOptions)), __read(ListOptions)), __read(ImageOptions)), __read(HrOptions)), __read(BlockquoteOptions)), __read(CodeOptions)), __read(LinkOptions)), __read(TableOptions)), __read(VerticalAlignOptions)), __read(PaintFormatOptions));
+    var internalToolbarItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(AlignOptions)), __read(MarkOptions)), __read(ColorOptions)), __read(HeadingOptions)), __read(FontSizeOptions)), __read(TodoItemOptions)), __read(ListOptions)), __read(ImageOptions)), __read(HrOptions)), __read(BlockquoteOptions)), __read(CodeOptions)), __read(LinkOptions)), __read(TableOptions)), __read(VerticalAlignOptions)), __read(PaintFormatOptions)), __read(InlineCodeOptions));
     var toolbarCompose = function (toolbarItems) {
         if (toolbarItems === void 0) { toolbarItems = []; }
         return __spreadArray(__spreadArray([], __read(internalToolbarItems)), __read(toolbarItems));
@@ -11991,14 +12208,19 @@
         'mod+b': exports.MarkTypes.bold,
         'mod+i': exports.MarkTypes.italic,
         'mod+u': exports.MarkTypes.underline,
-        'mod+e': exports.MarkTypes.codeLine
+        'mod+e': exports.ElementKinds.inlineCode
     };
     var markShortcuts = function (editor, event) {
         for (var hotkey in HOTKEYS) {
             if (isHotkey__default["default"](hotkey, event)) {
                 event.preventDefault();
                 var mark = HOTKEYS[hotkey];
-                MarkEditor.toggleMark(editor, mark);
+                if (mark === exports.ElementKinds.inlineCode) {
+                    InlineCodeEditor.toggleInlineCode(editor);
+                }
+                else {
+                    MarkEditor.toggleMark(editor, mark);
+                }
             }
         }
     };
@@ -12363,15 +12585,17 @@
             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;
+            var contextService = this.editor.injector.get(TheContextService);
+            var fontSize = contextService.getDefaultFontSize();
+            if (item.key === exports.MarkTypes.fontSize && fontSize) {
+                dropdownKey = 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", 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"] }] });
+    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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12392,8 +12616,6 @@
                     type: i0.Input
                 }], align: [{
                     type: i0.Input
-                }], fontSize: [{
-                    type: i0.Input
                 }], containerClass: [{
                     type: i0.Input
                 }], isMore: [{
@@ -12514,7 +12736,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", "fontSize", "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", "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: [{
@@ -12912,7 +13134,11 @@
             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(function () {
                 var _a;
@@ -12939,7 +13165,7 @@
             }
         };
         TheEditorComponent.prototype.toolbarCalculate = function () {
-            var _a, _b;
+            var _a;
             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);
@@ -12950,7 +13176,6 @@
                 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();
             }
@@ -13105,12 +13330,13 @@
                 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    [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"] }] });
+        ], 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"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-editor, theEditor',
                         templateUrl: 'editor.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         providers: [
                             TheToolbarService,
                             TheContextService,
@@ -13286,7 +13512,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", "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"] }] });
+    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"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13368,7 +13594,8 @@
         TheTableComponent,
         TheTableRowComponent,
         TheTdComponent,
-        ThePlaceholderComponent
+        ThePlaceholderComponent,
+        TheInlineCodeComponent
     ];
     var PIPES = [ElementStylePipe, ElementClassPipe];
     var TheEditorModule = /** @class */ (function () {
@@ -13411,7 +13638,8 @@
             TheTableComponent,
             TheTableRowComponent,
             TheTdComponent,
-            ThePlaceholderComponent], imports: [i6.CommonModule, i1.SlateModule, i4$2.FormsModule, i4$1.ThyIconModule,
+            ThePlaceholderComponent,
+            TheInlineCodeComponent], imports: [i6.CommonModule, i1.SlateModule, i4$2.FormsModule, i4$1.ThyIconModule,
             avatar.ThyAvatarModule,
             i3.ThyNavModule,
             i2$1.ThyFormModule,
@@ -13529,6 +13757,7 @@
     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;