@worktile/theia 2.1.4 → 2.1.8

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';
@@ -68,6 +68,7 @@ const TAB_SPACE = '    ';
 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";
@@ -98,6 +99,7 @@ var ElementKinds;
     ElementKinds["hr"] = "hr";
     ElementKinds["link"] = "link";
     ElementKinds["default"] = "paragraph";
+    ElementKinds["inlineCode"] = "inline-code";
 })(ElementKinds || (ElementKinds = {}));
 var Alignment;
 (function (Alignment) {
@@ -147,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) {
@@ -173,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 = [
@@ -208,13 +210,12 @@ var ToolbarItemMode;
 })(ToolbarItemMode || (ToolbarItemMode = {}));
 const DefaultGlobalToolbarDefinition = [
     ElementKinds.headingList,
-    MarkTypes.fontSize,
     ToolbarActionTypes.split,
     MarkTypes.bold,
     MarkTypes.italic,
     MarkTypes.underline,
     MarkTypes.strike,
-    MarkTypes.codeLine,
+    ElementKinds.inlineCode,
     MarkTypes.color,
     MarkTypes.backgroundColor,
     ToolbarActionTypes.split,
@@ -223,7 +224,6 @@ const DefaultGlobalToolbarDefinition = [
     ToolbarActionTypes.split,
     ElementKinds.numberedList,
     ElementKinds.bulletedList,
-    ElementKinds.checkItem,
     ToolbarActionTypes.split,
     ElementKinds.link,
     ElementKinds.image,
@@ -238,7 +238,7 @@ const DefaultInlineToolbarDefinition = [
     MarkTypes.italic,
     MarkTypes.underline,
     MarkTypes.strike,
-    MarkTypes.codeLine,
+    ElementKinds.inlineCode,
     MarkTypes.color,
     MarkTypes.backgroundColor,
     ToolbarActionTypes.split,
@@ -251,7 +251,6 @@ const DefaultQuickToolbarDefinition = [
     ToolbarActionTypes.split,
     ElementKinds.numberedList,
     ElementKinds.bulletedList,
-    ElementKinds.checkItem,
     ToolbarActionTypes.split,
     ElementKinds.link,
     ElementKinds.image,
@@ -397,9 +396,9 @@ class TheTextComponent extends BaseTextComponent {
         this.applyTextMark();
     }
 }
-TheTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTextComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTextComponent, selector: "span[theText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: `<slate-leaves [context]="context" [viewContext]="viewContext"></slate-leaves>`, isInline: true, components: [{ type: i1.SlateLeavesComponent, selector: "slate-leaves", inputs: ["context"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTextComponent, decorators: [{
+TheTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTextComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTextComponent, selector: "span[theText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: `<slate-leaves [context]="context" [viewContext]="viewContext"></slate-leaves>`, isInline: true, components: [{ type: i1.SlateLeavesComponent, selector: "slate-leaves", inputs: ["context"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theText]',
@@ -418,9 +417,9 @@ class TheBaseElementComponent extends BaseElementComponent {
         this.nativeElement.classList.add(`slate-element-${this.element.type}`, blockClass);
     }
 }
-TheBaseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheBaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheBaseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheBaseElementComponent, selector: "TheBaseElementComponent", usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheBaseElementComponent, decorators: [{
+TheBaseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheBaseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBaseElementComponent, selector: "TheBaseElementComponent", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBaseElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'TheBaseElementComponent',
@@ -430,9 +429,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 class TheDefaultElementComponent extends TheBaseElementComponent {
 }
-TheDefaultElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheDefaultElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheDefaultElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheDefaultElementComponent, selector: "[theDefaultElement]", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheDefaultElementComponent, decorators: [{
+TheDefaultElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheDefaultElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheDefaultElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheDefaultElementComponent, selector: "[theDefaultElement]", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheDefaultElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[theDefaultElement]',
@@ -1537,9 +1536,6 @@ function handleContinualInsertBreak(editor, lowestBlock, type) {
     const aboveResult = Editor.above(editor, {
         match: n => Editor.isBlock(editor, n) && n.type === type
     });
-    if (isEnd) {
-        editor.marks = {};
-    }
     if (aboveResult && aboveResult[0] && isEnd && isEmpty) {
         const wrapBlock = aboveResult[0];
         if (wrapBlock.type === type) {
@@ -1746,6 +1742,53 @@ 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, path) {
+        var _a;
+        const [inlineCode] = Editor.nodes(editor, {
+            at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+            match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode
+        });
+        return !!inlineCode;
+    }
+};
+
 const autoFormatRules = [
     {
         type: ElementKinds.heading_1,
@@ -1803,10 +1846,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,
@@ -1919,9 +1965,9 @@ class TheConversionHintComponent {
         clearInterval(this.closeTimer);
     }
 }
-TheConversionHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheConversionHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheConversionHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheConversionHintComponent, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0, template: "<ng-container>\n    <thy-alert\n        thyType=\"primary-weak\"\n        thyIcon=\"info-circle-fill\"\n        thyCloseable=\"true\"\n        thyMessage=\"\u68C0\u6D4B\u5230\u7C98\u8D34\u5185\u5BB9\u7B26\u5408Markdown\u8BED\u6CD5\"\n    >\n        <ng-template #operation>\n            <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\">\n                \u7ACB\u5373\u8F6C\u6362\n            </a>\n        </ng-template>\n    </thy-alert>\n</ng-container>\n", components: [{ type: i1$1.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyMessage", "thyIcon", "thyCloseable"] }], directives: [{ type: i1$1.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheConversionHintComponent, decorators: [{
+TheConversionHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheConversionHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheConversionHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheConversionHintComponent, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0, template: "<ng-container>\n    <thy-alert\n        thyType=\"primary-weak\"\n        thyIcon=\"info-circle-fill\"\n        thyCloseable=\"true\"\n        thyMessage=\"\u68C0\u6D4B\u5230\u7C98\u8D34\u5185\u5BB9\u7B26\u5408Markdown\u8BED\u6CD5\"\n    >\n        <ng-template #operation>\n            <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\">\n                \u7ACB\u5373\u8F6C\u6362\n            </a>\n        </ng-template>\n    </thy-alert>\n</ng-container>\n", components: [{ type: i1$1.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyMessage", "thyIcon", "thyCloseable"] }], directives: [{ type: i1$1.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheConversionHintComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-conversion-hint',
@@ -2002,6 +2048,35 @@ const getToolbarClass = (editor) => {
 const IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
 const CONTROL_KEY = IS_MAC ? '⌘' : 'Ctrl';
 
+/**
+ * whether the current node is a clean paragraph
+ * @param editor
+ * @param text
+ * @returns boolean
+ */
+const isCleanEmptyParagraph = (editor) => {
+    const isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && Range.isCollapsed(editor.selection);
+    if (!isCollapsedCursor) {
+        return false;
+    }
+    const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+    const textIndent = 'textIndent';
+    const align = 'align';
+    const hasTextIndent = block[textIndent];
+    const hasAlign = block[align];
+    if (Node.string(block) === '' &&
+        Element$1.isElement(block) &&
+        block.type === ElementKinds.paragraph &&
+        block.children.length === 1 &&
+        Text.isText(block.children[0]) &&
+        !Editor.isVoid(editor, block) &&
+        !hasTextIndent &&
+        !hasAlign) {
+        return true;
+    }
+    return false;
+};
+
 const withDeserializeMd = (options) => (editor) => {
     const { insertData, onKeydown } = editor;
     editor.onKeydown = (event) => {
@@ -2288,6 +2363,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');
     }
@@ -2302,9 +2384,9 @@ class TheContextService {
         this.fileList.splice(this.fileList.findIndex(item => item.file === file), 1);
     }
 }
-TheContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-TheContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextService, decorators: [{
+TheContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+TheContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheContextService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -2477,9 +2559,9 @@ class TheImageComponent extends TheBaseElementComponent {
         $event.stopPropagation();
     }
 }
-TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align || 'center'\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thyTips", "thyValue", "thySize", "thyMax"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheImageComponent, decorators: [{
+TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
+TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align || 'center'\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-image, [theImage]',
@@ -2962,14 +3044,17 @@ const insertListItem = (editor) => {
         }
         else {
             /**
-             * If end, insert a list item after and select it
+             * If end, split nodes
              */
             Editor.withoutNormalizing(editor, () => {
-                Transforms.insertNodes(editor, {
-                    type: ElementKinds.listItem,
-                    children: [{ type: ElementKinds.paragraph, children: [{ text: '' }] }]
-                }, { at: nextListItemPath });
-                Transforms.select(editor, nextListItemPath);
+                Transforms.splitNodes(editor, {
+                    always: true,
+                    mode: 'highest',
+                    match: node => {
+                        const path = node && TheEditor.findPath(editor, node);
+                        return path && path.length === nextListItemPath.length;
+                    }
+                });
             });
         }
         /**
@@ -3236,9 +3321,9 @@ class ElementStylePipe {
         return style;
     }
 }
-ElementStylePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ElementStylePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ElementStylePipe, name: "elementStyle" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ElementStylePipe, decorators: [{
+ElementStylePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ElementStylePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementStylePipe, name: "elementStyle" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elementStyle'
@@ -3254,9 +3339,9 @@ class ElementClassPipe {
         return classStr;
     }
 }
-ElementClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ElementClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ElementClassPipe, name: "elementClass" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ElementClassPipe, decorators: [{
+ElementClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ElementClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementClassPipe, name: "elementClass" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elementClass'
@@ -3283,9 +3368,9 @@ class TheNumberedListComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
     }
 }
-TheNumberedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheNumberedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0.ɵɵFactoryTarget.Component });
-TheNumberedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheNumberedListComponent, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "class": "this.class" } }, providers: [ElementClassPipe], 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: TheNumberedListComponent, decorators: [{
+TheNumberedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheNumberedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0.ɵɵFactoryTarget.Component });
+TheNumberedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheNumberedListComponent, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "class": "this.class" } }, providers: [ElementClassPipe], 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.15", ngImport: i0, type: TheNumberedListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol[theOl]',
@@ -3317,9 +3402,9 @@ class TheBulletedListComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
     }
 }
-TheBulletedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheBulletedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0.ɵɵFactoryTarget.Component });
-TheBulletedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheBulletedListComponent, selector: "ul[theUl]", host: { properties: { "class": "this.class" } }, providers: [ElementClassPipe], 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: TheBulletedListComponent, decorators: [{
+TheBulletedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBulletedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0.ɵɵFactoryTarget.Component });
+TheBulletedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBulletedListComponent, selector: "ul[theUl]", host: { properties: { "class": "this.class" } }, providers: [ElementClassPipe], 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.15", ngImport: i0, type: TheBulletedListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ul[theUl]',
@@ -3342,12 +3427,13 @@ class TheListItemComponent extends TheBaseElementComponent {
     }
     onContextChange() {
         super.onContextChange();
-        this.applyFontSize();
+        this.addFontSize();
+        this.addMultiDigit();
     }
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    applyFontSize() {
+    addFontSize() {
         var _a, _b;
         let firstText;
         for (const entry of Node.descendants(this.element)) {
@@ -3382,10 +3468,34 @@ class TheListItemComponent extends TheBaseElementComponent {
             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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheListItemComponent, decorators: [{
+TheListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.15", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheListItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'li[theLi]',
@@ -3706,14 +3816,14 @@ class TheTodoItemComponent extends TheBaseElementComponent {
         }
     }
 }
-TheTodoItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTodoItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTodoItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTodoItemComponent, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass" } }, usesInheritance: true, ngImport: i0, template: `
+TheTodoItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTodoItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTodoItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTodoItemComponent, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass" } }, usesInheritance: true, ngImport: i0, template: `
         <span contenteditable="false" class="todo-item-status">
             <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
         </span>
         <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: TheTodoItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTodoItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[theTodoItem]',
@@ -3799,14 +3909,14 @@ class TheHrComponent extends TheBaseElementComponent {
         });
     }
 }
-TheHrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheHrComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheHrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0, template: `
+TheHrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheHrComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheHrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0, template: `
         <div class="the-hr" contenteditable="false" [ngClass]="{ active: selection }">
             <hr class="the-hr" />
             <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
         </div>
     `, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheHrComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheHrComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-hr, [theHr]',
@@ -3999,7 +4109,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] : '';
@@ -4043,22 +4153,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;
 };
 
@@ -4131,6 +4254,7 @@ const withAutoFormat = ({ rules }) => (editor) => {
                     type,
                     between,
                     ignoreTrim,
+                    format,
                     markup: Array.isArray(markup) ? markup[0] : markup
                 })) {
                     return valid();
@@ -4449,7 +4573,7 @@ const withBlockCard = (editor) => {
 };
 
 const withMoveSelection = (editor) => {
-    const { onClick, deleteBackward } = editor;
+    const { onClick, deleteBackward, onKeydown } = editor;
     editor.onClick = (event) => {
         const domSelection = window.getSelection();
         if (domSelection && !domSelection.isCollapsed && event.detail >= 2 && editor.selection) {
@@ -5044,7 +5168,7 @@ function insertRow(opts, editor, count = 1, at // row index
 /**
  * Insert a new table
  */
-function insertTable(opts, editor, columns = 3, rows = 3, getCellContent) {
+function insertTable(opts, editor, rows = 3, columns = 3, getCellContent) {
     const { selection } = editor;
     if (!(selection === null || selection === void 0 ? void 0 : selection.anchor)) {
         return;
@@ -5457,14 +5581,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)
     }
 ];
 
@@ -5676,9 +5792,9 @@ class TheBlockquoteComponent extends TheBaseElementComponent {
         this.cdr = cdr;
     }
 }
-TheBlockquoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheBlockquoteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheBlockquoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheBlockquoteComponent, selector: "blockquote[theBlockquote]", 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: TheBlockquoteComponent, decorators: [{
+TheBlockquoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBlockquoteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheBlockquoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBlockquoteComponent, selector: "blockquote[theBlockquote]", 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.15", ngImport: i0, type: TheBlockquoteComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'blockquote[theBlockquote]',
@@ -5870,9 +5986,9 @@ class TheColorSelectComponent {
         this.popoverRef.close();
     }
 }
-TheColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorSelectComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: TheColorSelectComponent, decorators: [{
+TheColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorSelectComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-color-select',
@@ -5939,9 +6055,9 @@ class TheColorSelectService {
         }
     }
 }
-TheColorSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorSelectService, deps: [{ token: i1$3.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable });
-TheColorSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorSelectService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorSelectService, decorators: [{
+TheColorSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorSelectService, deps: [{ token: i1$3.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable });
+TheColorSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorSelectService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorSelectService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$3.ThyPopover }]; } });
 
@@ -5998,9 +6114,9 @@ class TheToolbarBaseItemComponent {
         }
     }
 }
-TheToolbarBaseItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarBaseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TheToolbarBaseItemComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarBaseItemComponent, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarBaseItemComponent, decorators: [{
+TheToolbarBaseItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarBaseItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TheToolbarBaseItemComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: TheToolbarBaseItemComponent, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarBaseItemComponent, decorators: [{
             type: Directive
         }] });
 
@@ -6062,8 +6178,8 @@ class TheColorToolbarItemComponent extends TheToolbarBaseItemComponent {
         }
     }
 }
-TheColorToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorToolbarItemComponent, deps: [{ token: i1$3.ThyPopover }], target: i0.ɵɵFactoryTarget.Component });
-TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: `
+TheColorToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorToolbarItemComponent, deps: [{ token: i1$3.ThyPopover }], target: i0.ɵɵFactoryTarget.Component });
+TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: `
         <a
             class="link-width-down"
             thyIconNavLink
@@ -6086,7 +6202,7 @@ TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             ></thy-icon>
         </a>
     `, isInline: true, components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-color-toolbar-item',
@@ -6360,9 +6476,9 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
             .withPositions([bottomPosition, topPosition]);
     }
 }
-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)" }, 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: [{
+TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.15", 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.15", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-toolbar-dropdown',
@@ -6414,9 +6530,9 @@ class NavSplitLineComponent {
     }
     ngOnInit() { }
 }
-NavSplitLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: NavSplitLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavSplitLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: NavSplitLineComponent, selector: "nav-split-line", inputs: { mode: "mode" }, host: { properties: { "class.the-nav-split-line": "this.theNavSplitLine", "class.horizontal": "this.horizontal", "class.vertical": "this.vertical" } }, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: NavSplitLineComponent, decorators: [{
+NavSplitLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: NavSplitLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavSplitLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: NavSplitLineComponent, selector: "nav-split-line", inputs: { mode: "mode" }, host: { properties: { "class.the-nav-split-line": "this.theNavSplitLine", "class.horizontal": "this.horizontal", "class.vertical": "this.vertical" } }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: NavSplitLineComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'nav-split-line',
@@ -6450,8 +6566,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,
@@ -6488,13 +6605,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() {
@@ -6536,11 +6661,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) {
@@ -6558,8 +6683,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 });
@@ -6586,13 +6712,18 @@ 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\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.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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheCodeComponent, decorators: [{
+TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.15", 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.15", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[theCode]',
@@ -6727,9 +6858,9 @@ class TheLinkHoverComponent {
         event.stopPropagation();
     }
 }
-TheLinkHoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheLinkHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkHoverComponent, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0, template: "<div class=\"link-hover-card\">\n    <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate\">\n        {{ link }}\n    </a>\n    <span class=\"operate-separator\"></span>\n    <button thyButtonIcon=\"edit\" thySize=\"xs\" (mousedown)=\"editLink($event)\"></button>\n    <span class=\"operate-separator\"></span>\n    <button thyButtonIcon=\"unlink-insert\" thySize=\"xs\" (mousedown)=\"removeLink($event)\"></button>\n</div>\n", components: [{ type: i1$5.ThyButtonIconComponent, selector: "thy-button-icon,[thy-button-icon],[thyButtonIcon]", inputs: ["thySize", "thyIcon", "thyButtonIcon", "thyShape", "thyLight", "thyActive", "thyTheme", "thyColor"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkHoverComponent, decorators: [{
+TheLinkHoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheLinkHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkHoverComponent, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0, template: "<div class=\"link-hover-card\">\n    <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate\">\n        {{ link }}\n    </a>\n    <span class=\"operate-separator\"></span>\n    <button thyButtonIcon=\"edit\" thySize=\"xs\" (mousedown)=\"editLink($event)\"></button>\n    <span class=\"operate-separator\"></span>\n    <button thyButtonIcon=\"unlink-insert\" thySize=\"xs\" (mousedown)=\"removeLink($event)\"></button>\n</div>\n", components: [{ type: i1$5.ThyButtonIconComponent, selector: "thy-button-icon,[thy-button-icon],[thyButtonIcon]", inputs: ["thySize", "thyIcon", "thyButtonIcon", "thyShape", "thyLight", "thyActive", "thyTheme", "thyColor"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkHoverComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-link-hover',
@@ -6814,9 +6945,9 @@ class TheLinkEditComponent {
         }
     }
 }
-TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: i2$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkEditComponent, decorators: [{
+TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: i2$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkEditComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-link-edit',
@@ -6873,7 +7004,9 @@ class TheBaseLinkComponent extends TheBaseElementComponent {
         }
     }
     mousedownHandle(event) {
-        this.openLinkHover();
+        if (!this.readonly && !this.editor.disabled) {
+            this.openLinkHover();
+        }
     }
     openLinkEdit(tag) {
         if (this.linkHoverOpened) {
@@ -6955,9 +7088,9 @@ class TheBaseLinkComponent extends TheBaseElementComponent {
         this.close(LinkCloseTypes.destroy);
     }
 }
-TheBaseLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheBaseLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.ThyPopover }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i1$6.ThyClickDispatcher }], target: i0.ɵɵFactoryTarget.Component });
-TheBaseLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheBaseLinkComponent, decorators: [{
+TheBaseLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBaseLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$3.ThyPopover }, { token: i2.Overlay }, { token: i0.ViewContainerRef }, { token: i1$6.ThyClickDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+TheBaseLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBaseLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[TheBaseLinkComponent]',
@@ -6968,21 +7101,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 args: ['click', ['$event']]
             }] } });
 class TheLinkComponent extends TheBaseLinkComponent {
+    constructor() {
+        super(...arguments);
+        // Put this at the start and end of an inline component to work around this Chromium bug:
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
+        this.inlineChromiumBugfix = '$' + String.fromCodePoint(160);
+    }
 }
-TheLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkComponent, selector: "span[theLink]", 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: TheLinkComponent, decorators: [{
+TheLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0, template: `
+    <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
+    <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+    <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theLink]',
-                    template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`
+                    template: `
+    <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
+    <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+    <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`
                 }]
         }] });
 class TheReadonlyLinkComponent extends TheBaseLinkComponent {
 }
-TheReadonlyLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheReadonlyLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheReadonlyLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheReadonlyLinkComponent, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, 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: TheReadonlyLinkComponent, decorators: [{
+TheReadonlyLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheReadonlyLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheReadonlyLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheReadonlyLinkComponent, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, 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.15", ngImport: i0, type: TheReadonlyLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'a[theLink]',
@@ -7074,9 +7219,9 @@ class TheTableSelectComponent {
         }
     }
 }
-TheTableSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$6.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0, template: "<div class=\"table-selector-container\">\n    <div\n        *ngFor=\"let item of tableData, let rowIndex = index\"\n        class=\"selector-row\"\n        (mousedown)=\"executeTable($event)\"\n    >\n        <span\n            *ngFor=\"let item of tableData, let colIndex = index\"\n            [ngClass]=\"{'active-cell': rowIndex<= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true}\"\n            (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n        >\n        </span>\n    </div>\n    <span class=\"selector-text\">{{maxRowIndex+1}} x {{maxColIndex+1}}</span>\n</div>\n", directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableSelectComponent, decorators: [{
+TheTableSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$6.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0, template: "<div class=\"table-selector-container\">\n    <div\n        *ngFor=\"let item of tableData, let rowIndex = index\"\n        class=\"selector-row\"\n        (mousedown)=\"executeTable($event)\"\n    >\n        <span\n            *ngFor=\"let item of tableData, let colIndex = index\"\n            [ngClass]=\"{'active-cell': rowIndex<= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true}\"\n            (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n        >\n        </span>\n    </div>\n    <span class=\"selector-text\">{{maxRowIndex+1}} x {{maxColIndex+1}}</span>\n</div>\n", directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'table-select',
@@ -7136,8 +7281,8 @@ class TheTableToolbarItemComponent extends TheToolbarBaseItemComponent {
         return this.tableSelectRef;
     }
 }
-TheTableToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$6.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
+TheTableToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$6.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
         <a
             thyIconNavLink
             class="link-with-down"
@@ -7150,7 +7295,7 @@ TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             <thy-icon class="link-down-icon font-size-sm text-desc table-down-icon" thyIconName="caret-down"> </thy-icon>
         </a>
     `, isInline: true, components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-toolbar-item',
@@ -7210,9 +7355,9 @@ class ColumnResizeNotifierSource {
         this.triggerResize = new Subject();
     }
 }
-ColumnResizeNotifierSource.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ColumnResizeNotifierSource.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ColumnResizeNotifierSource });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
+ColumnResizeNotifierSource.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnResizeNotifierSource.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ColumnResizeNotifierSource });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
             type: Injectable
         }] });
 
@@ -7255,9 +7400,9 @@ class TableCellEventDispatcher {
         }));
     }
 }
-TableCellEventDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableCellEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-TableCellEventDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableCellEventDispatcher });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableCellEventDispatcher, decorators: [{
+TableCellEventDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableCellEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+TableCellEventDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableCellEventDispatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableCellEventDispatcher, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -7813,9 +7958,9 @@ class TableStore {
         }
     }
 }
-TableStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TableStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableStore, decorators: [{
+TableStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TableStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -7969,9 +8114,9 @@ class TheTableToolbarComponent {
         });
     }
 }
-TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
+TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i3.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-toolbar',
@@ -8032,9 +8177,9 @@ class TheContextMenuComponent {
     }
     ngOnInit() { }
 }
-TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ 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.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextMenuComponent, decorators: [{
+TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ 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.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheContextMenuComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-contextmenu',
@@ -8231,9 +8376,9 @@ class TheTableContextMenuService {
         }
     }
 }
-TheTableContextMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TheColorSelectService }, { token: TableStore }, { token: i1$3.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-TheTableContextMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableContextMenuService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableContextMenuService, decorators: [{
+TheTableContextMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TheColorSelectService }, { token: TableStore }, { token: i1$3.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+TheTableContextMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableContextMenuService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableContextMenuService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: TheColorSelectService }, { type: TableStore }, { type: i1$3.ThyPopover }, { type: i0.NgZone }, { type: TheContextService }]; } });
 
@@ -8322,9 +8467,9 @@ class TableService {
         });
     }
 }
-TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableService, deps: [{ token: i1$3.ThyPopover }, { token: i2.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TableService, decorators: [{
+TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableService, deps: [{ token: i1$3.ThyPopover }, { token: i2.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$3.ThyPopover }, { type: i2.Overlay }, { type: TableStore }, { type: TheTableContextMenuService }, { type: i0.NgZone }, { type: TheContextService }]; } });
 
@@ -8404,9 +8549,9 @@ class TheInsertMarkComponent {
     }
     ngOnDestroy() { }
 }
-TheInsertMarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
+TheInsertMarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-insert-mark',
@@ -8504,9 +8649,9 @@ class TheColumnResizeDirective {
         this.destroyed.complete();
     }
 }
-TheColumnResizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TheTableToken }], target: i0.ɵɵFactoryTarget.Directive });
-TheColumnResizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.7", type: TheColumnResizeDirective, selector: "div[theColumnResize]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnResizeDirective, decorators: [{
+TheColumnResizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TheTableToken }], target: i0.ɵɵFactoryTarget.Directive });
+TheColumnResizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.15", type: TheColumnResizeDirective, selector: "div[theColumnResize]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[theColumnResize]'
@@ -8875,8 +9020,8 @@ class TheTableComponent extends TheBaseElementComponent {
         this.destroy$.complete();
     }
 }
-TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableComponent, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheContextService }, { token: TheTableContextMenuService }], target: i0.ɵɵFactoryTarget.Component });
-TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" } }, providers: [
+TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableComponent, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheContextService }, { token: TheTableContextMenuService }], target: i0.ɵɵFactoryTarget.Component });
+TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" } }, providers: [
         TableStore,
         TableService,
         TheTableContextMenuService,
@@ -8887,7 +9032,7 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             useExisting: TheTableComponent
         }
     ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div class=\"the-table-row-controls-wrapper\" *ngIf=\"!readonly && isInTable\">\n        <div>\n            <div\n                class=\"the-table-corner-controls\"\n                [ngClass]=\"{ active: isSelectedAllCell, dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0 }\"\n            >\n                <button type=\"button\" class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></button>\n                <div class=\"the-table-corner-controls-insert-row-marker\">\n                    <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n                <div class=\"the-table-corner-controls-insert-column-marker\">\n                    <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n            </div>\n            <div class=\"the-table-row-controls\">\n                <div class=\"the-table-row-controls-inner\">\n                    <div\n                        class=\"the-table-row-controls-button-wrap\"\n                        *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowCotrols\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                        }\"\n                    >\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-table-row-controls-button the-table-controls-button\"\n                        ></button>\n                        <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper>\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-table-col-controls\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColCotrols\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\n                            type=\"column\"\n                            [at]=\"i + 1\"\n                            [tableStore]=\"tableStore\"\n                        ></the-table-insert-mark>\n                        <div\n                            class=\"the-table-col-controls-inner\"\n                            [ngClass]=\"{\n                                active: tableStore.selectedColumnsIndex.includes(i),\n                                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                            }\"\n                        ></div>\n                    </th>\n                </tr>\n            </thead>\n            <tbody #tbody>\n                <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n            </tbody>\n        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table, [theTable]',
@@ -8992,9 +9137,9 @@ class TheTableRowComponent extends TheBaseElementComponent {
         }
     }
 }
-TheTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTableRowComponent, selector: "tr[theTableRow]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "style.height": "this.height" } }, 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: TheTableRowComponent, decorators: [{
+TheTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTableRowComponent, selector: "tr[theTableRow]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "style.height": "this.height" } }, 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.15", ngImport: i0, type: TheTableRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tr[theTableRow]',
@@ -9153,9 +9298,9 @@ class ColumnResizingStore {
         this.resizeRows.pop();
     }
 }
-ColumnResizingStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ColumnResizingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ColumnResizingStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ColumnResizingStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ColumnResizingStore, decorators: [{
+ColumnResizingStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ColumnResizingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnResizingStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ColumnResizingStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ColumnResizingStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -9300,9 +9445,9 @@ class TheColumnResizeOverlayHandleComponent {
         this.destroyed.complete();
     }
 }
-TheColumnResizeOverlayHandleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnResizeOverlayHandleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: DOCUMENT }, { token: ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Component });
-TheColumnResizeOverlayHandleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheColumnResizeOverlayHandleComponent, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnResizeOverlayHandleComponent, decorators: [{
+TheColumnResizeOverlayHandleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnResizeOverlayHandleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: DOCUMENT }, { token: ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Component });
+TheColumnResizeOverlayHandleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheColumnResizeOverlayHandleComponent, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnResizeOverlayHandleComponent, decorators: [{
             type: Component,
             args: [{
                     host: { class: 'the-table-resize-overlay-thumb' },
@@ -9951,9 +10096,9 @@ class TheTdComponent extends TheBaseElementComponent {
         this.destroy$.complete();
     }
 }
-TheTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTdComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.Overlay }, { token: ColumnResizingStore }, { token: i2.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component });
-TheTdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n    <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTdComponent, decorators: [{
+TheTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTdComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.Overlay }, { token: ColumnResizingStore }, { token: i2.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+TheTdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n    <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTdComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'td[theTd]',
@@ -10517,9 +10662,9 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
         }
     }
 }
-TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$6.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                [ngStyle]=\"menu?.styles\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
+TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$6.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                [ngStyle]=\"menu?.styles\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-toolbar-vertical-align-item',
@@ -10687,35 +10832,6 @@ const PaintFormatOptions = [
     }
 ];
 
-/**
- * whether the current node is a clean paragraph
- * @param editor
- * @param text
- * @returns boolean
- */
-const isCleanEmptyParagraph = (editor) => {
-    const isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && Range.isCollapsed(editor.selection);
-    if (!isCollapsedCursor) {
-        return false;
-    }
-    const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
-    const textIndent = 'textIndent';
-    const align = 'align';
-    const hasTextIndent = block[textIndent];
-    const hasAlign = block[align];
-    if (Node.string(block) === '' &&
-        Element$1.isElement(block) &&
-        block.type === ElementKinds.paragraph &&
-        block.children.length === 1 &&
-        Text.isText(block.children[0]) &&
-        !Editor.isVoid(editor, block) &&
-        !hasTextIndent &&
-        !hasAlign) {
-        return true;
-    }
-    return false;
-};
-
 class TheToolbarItemComponent extends TheToolbarBaseItemComponent {
     constructor(ngZone, cfr) {
         super();
@@ -10761,8 +10877,8 @@ 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: { 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: `
+TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.15", 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
@@ -10783,7 +10899,7 @@ TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
         <ng-container #toolbarContainer></ng-container>
     `, isInline: true, components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-toolbar-item',
@@ -10871,9 +10987,9 @@ class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
         super.ngOnDestroy();
     }
 }
-TheQuickToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickToolbarComponent, deps: [{ token: i1$3.ThyPopoverRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()" } }, usesInheritance: true, ngImport: i0, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [item]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i2$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["item", "editor", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickToolbarComponent, decorators: [{
+TheQuickToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickToolbarComponent, deps: [{ token: i1$3.ThyPopoverRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TheQuickToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()" } }, usesInheritance: true, ngImport: i0, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [item]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i2$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["item", "editor", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-quick-toolbar',
@@ -10993,11 +11109,43 @@ const withSoftBreak = (options = { rules: [{ hotkey: 'shift+enter' }] }) => (edi
 
 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;
+        }
+        // unset fontSize
+        if (FontSizeEditor.unsetFontSize(editor, size, fontSizeMark, isDefaultFontSize)) {
+            return;
+        }
+        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);
@@ -11056,6 +11204,116 @@ const FontSizeOptions = [
     ...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() {
+        super(...arguments);
+        // Put this at the start and end of an inline component to work around this Chromium bug:
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
+        this.inlineChromiumBugfix = '$' + String.fromCodePoint(160);
+    }
+}
+TheInlineCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheInlineCodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheInlineCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheInlineCodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[theInlineCode]',
+                    template: ` <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`
+                }]
+        }] });
+
+const withInlineCode = (editor) => {
+    const { isInline, renderElement, insertText, onKeydown } = 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.onKeydown = (event) => {
+        const { selection } = editor;
+        if (!selection || !selection.anchor || !selection.focus) {
+            onKeydown(event);
+            return;
+        }
+        const isMoveBackward = hotkeys.isMoveBackward(event);
+        const isMoveForward = hotkeys.isMoveForward(event);
+        const isCollapsed$1 = selection && isCollapsed(selection);
+        const isInlineCode = InlineCodeEditor.isInlineCodeActive(editor);
+        if (isCollapsed$1 && isMoveForward) {
+            let isInlineCodeBefore = false;
+            if (!isInlineCode) {
+                const { path } = Editor.after(editor, selection);
+                isInlineCodeBefore = InlineCodeEditor.isInlineCodeActive(editor, path);
+            }
+            if (isInlineCode || isInlineCodeBefore) {
+                event.preventDefault();
+                Transforms.move(editor, { unit: 'offset' });
+                return;
+            }
+        }
+        if (isCollapsed$1 && isMoveBackward) {
+            let isInlineCodeAfter = false;
+            if (!isInlineCode) {
+                const { path } = Editor.before(editor, selection);
+                isInlineCodeAfter = InlineCodeEditor.isInlineCodeActive(editor, path);
+            }
+            if (isInlineCode || isInlineCodeAfter) {
+                event.preventDefault();
+                Transforms.move(editor, { unit: 'offset', reverse: true });
+                return;
+            }
+        }
+        onKeydown(event);
+    };
+    editor = withRemoveEmptyNodes({ type: ElementKinds.inlineCode })(editor);
+    return editor;
+};
+
 const internalPlugins = [
     withTheHistory,
     withAutoInsertData(),
@@ -11095,7 +11353,8 @@ const internalPlugins = [
     withImage,
     withDeserializeHMTL,
     withDeserializeMd(),
-    withQuickInsert
+    withQuickInsert,
+    withInlineCode
 ];
 const internalToolbarItems = [
     ...AlignOptions,
@@ -11112,7 +11371,8 @@ const internalToolbarItems = [
     ...LinkOptions,
     ...TableOptions,
     ...VerticalAlignOptions,
-    ...PaintFormatOptions
+    ...PaintFormatOptions,
+    ...InlineCodeOptions
 ];
 const toolbarCompose = (toolbarItems = []) => {
     return [...internalToolbarItems, ...toolbarItems];
@@ -11134,14 +11394,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);
+            }
         }
     }
 };
@@ -11189,9 +11454,9 @@ class TheToolbarService {
         });
     }
 }
-TheToolbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TheToolbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarService, decorators: [{
+TheToolbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TheToolbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarService, decorators: [{
             type: Injectable
         }] });
 
@@ -11438,18 +11703,20 @@ class TheToolbarComponent {
         return TheToolbarItemComponent;
     }
     getDropdownItem(item) {
-        var _a;
+        var _a, _b, _c;
         let dropdownKey = item === null || item === void 0 ? void 0 : item.dropdownItemKey;
         // modify the fontsize option externally
-        if (item.key === MarkTypes.fontSize && this.fontSize) {
-            dropdownKey = this.fontSize;
+        const contextService = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.injector) === null || _b === void 0 ? void 0 : _b.get(TheContextService);
+        const fontSize = contextService === null || contextService === void 0 ? void 0 : contextService.getDefaultFontSize();
+        if (contextService && 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);
+        return (_c = item === null || item === void 0 ? void 0 : item.includes) === null || _c === void 0 ? void 0 : _c.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", fontSize: "fontSize", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarComponent, decorators: [{
+TheToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.15", 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-toolbar',
@@ -11467,8 +11734,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 type: Input
             }], align: [{
                 type: Input
-            }], fontSize: [{
-                type: Input
             }], containerClass: [{
                 type: Input
             }], isMore: [{
@@ -11575,15 +11840,15 @@ class TheInlineToolbarComponent {
         this.destroy$.complete();
     }
 }
-TheInlineToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i2.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
-TheInlineToolbarComponent.ɵcmp = i0.ɵɵ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, template: `<the-toolbar
+TheInlineToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheInlineToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i2.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
+TheInlineToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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, template: `<the-toolbar
         #inlineToolbar
         class="the-inline-toolbar"
         [editor]="editor"
         [toolbarItems]="toolbarItems"
         [isMore]="false"
-    ></the-toolbar> `, isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "fontSize", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineToolbarComponent, decorators: [{
+    ></the-toolbar> `, isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheInlineToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-inline-toolbar',
@@ -11613,6 +11878,7 @@ class TheQuickInsertComponent {
         this.renderer = renderer;
         this.elementRef = elementRef;
         this.cdr = cdr;
+        this.isVisible = false;
         this.isHide = true;
         this.defaultIconName = 'plus-circle-thin';
         this.iconNameFill = 'plus-circle-thin-fill';
@@ -11623,18 +11889,21 @@ class TheQuickInsertComponent {
         event.stopPropagation();
     }
     checkStatus() {
+        var _a;
         const { editor } = this;
-        if (isCleanEmptyParagraph(editor)) {
-            setTimeout(() => {
-                var _a;
-                const block = Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
-                const rootNode = AngularEditor.toDOMNode(editor, block);
-                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
-            });
+        if (this.isVisible && isCleanEmptyParagraph(editor) && !this.hasExcludeAttribute()) {
+            const block = Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
+            const rootNode = AngularEditor.toDOMNode(editor, block);
+            this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
             return;
         }
         this.isHide = true;
     }
+    hasExcludeAttribute() {
+        const marks = getSelectionMarks(this.editor);
+        const fontSizeMark = marks[MarkTypes.fontSize];
+        return fontSizeMark;
+    }
     updatePosition(left, top) {
         this.isHide = false;
         this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${top}px`);
@@ -11654,9 +11923,9 @@ class TheQuickInsertComponent {
         QuickInsertEditor.openQuickToolbar(this.editor, this.quickToolbarItems, this.iconElement.nativeElement);
     }
 }
-TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
+TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[theQuickInsert]',
@@ -11670,6 +11939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 type: Input
             }], quickToolbarItems: [{
                 type: Input
+            }], isVisible: [{
+                type: Input
             }], iconElement: [{
                 type: ViewChild,
                 args: ['iconElement', { read: ElementRef, static: false }]
@@ -11678,82 +11949,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 args: ['mousedown', ['$event']]
             }] } });
 
-class ThePlaceholderComponent {
-    constructor(renderer, elementRef, contextService) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.contextService = contextService;
-        this.isHide = true;
-    }
-    handleCompositionStart() {
-        var _a;
-        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) {
-            this.hide();
-        }
-    }
-    handleCompositionEnd(event) {
-        if (!event.data) {
-            this.checkStatus();
-        }
-    }
-    checkStatus() {
-        var _a, _b, _c;
-        const { editor } = this;
-        const isEmptyShow = typeof ((_a = this.options) === null || _a === void 0 ? void 0 : _a.isEmptyShowPlaceholder) === 'undefined' ? true : this.options.isEmptyShowPlaceholder;
-        const isMustShow = (_b = this.options) === null || _b === void 0 ? void 0 : _b.isMustShowPlaceholder;
-        const isReadonly = (_c = this.options) === null || _c === void 0 ? void 0 : _c.readonly;
-        // empty content and no selection processing
-        if (!isReadonly && isEmptyShow && isEmptyContent(editor.children)) {
-            const firstElementChild = this.contextService.getFirstElementChild();
-            const offsetTop = firstElementChild.offsetTop;
-            const offsetLeft = firstElementChild.offsetLeft;
-            this.updatePosition(offsetLeft, offsetTop);
-            return;
-        }
-        if (isMustShow && isCleanEmptyParagraph(editor)) {
-            setTimeout(() => {
-                var _a;
-                const block = Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
-                const rootNode = AngularEditor.toDOMNode(editor, block);
-                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
-            });
-            return;
-        }
-        this.isHide = true;
-    }
-    updatePosition(left, top) {
-        this.isHide = false;
-        this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${top}px`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${left}px`);
-    }
-    hide() {
-        this.isHide = true;
-    }
-}
-ThePlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
-ThePlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", options: "options" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0, template: `{{ options?.placeholder }}`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[thePlaceholder]',
-                    template: `{{ options?.placeholder }}`,
-                    host: {
-                        class: 'the-placeholder',
-                        '[class.hide]': 'isHide'
-                    }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TheContextService }]; }, propDecorators: { editor: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], handleCompositionStart: [{
-                type: HostListener,
-                args: ['document:compositionstart']
-            }], handleCompositionEnd: [{
-                type: HostListener,
-                args: ['document:compositionend', ['$event']]
-            }] } });
-
 class TheTemplateComponent {
     constructor() {
         this.renderElement = (element) => {
@@ -11782,9 +11977,9 @@ class TheTemplateComponent {
         };
     }
 }
-TheTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTemplateComponent, selector: "the-template,[theTemplate]", viewQueries: [{ propertyName: "paragraphTemplate", first: true, predicate: ["paragraph"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingOneTemplate", first: true, predicate: ["headingOne"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingTwoTemplate", first: true, predicate: ["headingTwo"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingThreeTemplate", first: true, predicate: ["headingThree"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFourTemplate", first: true, predicate: ["headingFour"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFiveTemplate", first: true, predicate: ["headingFive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingSixTemplate", first: true, predicate: ["headingSix"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #paragraph let-context=\"context\" let-viewContext=\"viewContext\">\n    <div theDefaultElement [context]=\"context\" [viewContext]=\"viewContext\" [ngStyle]=\"context.element | elementStyle\"></div>\n</ng-template>\n<ng-template #headingOne let-context=\"context\" let-viewContext=\"viewContext\">\n    <h1\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h1>\n</ng-template>\n<ng-template #headingTwo let-context=\"context\" let-viewContext=\"viewContext\">\n    <h2\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h2>\n</ng-template>\n<ng-template #headingThree let-context=\"context\" let-viewContext=\"viewContext\">\n    <h3\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h3>\n</ng-template>\n<ng-template #headingFour let-context=\"context\" let-viewContext=\"viewContext\">\n    <h4\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h4>\n</ng-template>\n<ng-template #headingFive let-context=\"context\" let-viewContext=\"viewContext\">\n    <h5\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h5>\n</ng-template>\n<ng-template #headingSix let-context=\"context\" let-viewContext=\"viewContext\">\n    <h6\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h6>\n</ng-template>\n", components: [{ type: TheDefaultElementComponent, selector: "[theDefaultElement]" }], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "elementStyle": ElementStylePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTemplateComponent, decorators: [{
+TheTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTemplateComponent, selector: "the-template,[theTemplate]", viewQueries: [{ propertyName: "paragraphTemplate", first: true, predicate: ["paragraph"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingOneTemplate", first: true, predicate: ["headingOne"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingTwoTemplate", first: true, predicate: ["headingTwo"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingThreeTemplate", first: true, predicate: ["headingThree"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFourTemplate", first: true, predicate: ["headingFour"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFiveTemplate", first: true, predicate: ["headingFive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingSixTemplate", first: true, predicate: ["headingSix"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #paragraph let-context=\"context\" let-viewContext=\"viewContext\">\n    <div theDefaultElement [context]=\"context\" [viewContext]=\"viewContext\" [ngStyle]=\"context.element | elementStyle\"></div>\n</ng-template>\n<ng-template #headingOne let-context=\"context\" let-viewContext=\"viewContext\">\n    <h1\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h1>\n</ng-template>\n<ng-template #headingTwo let-context=\"context\" let-viewContext=\"viewContext\">\n    <h2\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h2>\n</ng-template>\n<ng-template #headingThree let-context=\"context\" let-viewContext=\"viewContext\">\n    <h3\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h3>\n</ng-template>\n<ng-template #headingFour let-context=\"context\" let-viewContext=\"viewContext\">\n    <h4\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h4>\n</ng-template>\n<ng-template #headingFive let-context=\"context\" let-viewContext=\"viewContext\">\n    <h5\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h5>\n</ng-template>\n<ng-template #headingSix let-context=\"context\" let-viewContext=\"viewContext\">\n    <h6\n        theDefaultElement\n        [context]=\"context\"\n        [viewContext]=\"viewContext\"\n        [attr.id]=\"context.element.key\"\n        [ngStyle]=\"context.element | elementStyle\"\n    ></h6>\n</ng-template>\n", components: [{ type: TheDefaultElementComponent, selector: "[theDefaultElement]" }], directives: [{ type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "elementStyle": ElementStylePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTemplateComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-template,[theTemplate]',
@@ -11815,13 +12010,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }] } });
 
 class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
-    constructor(toolbarService, theContextService, viewContainerRef, elementRef, ngZone) {
+    constructor(toolbarService, theContextService, viewContainerRef, elementRef, ngZone, cdr) {
         super();
         this.toolbarService = toolbarService;
         this.theContextService = theContextService;
         this.viewContainerRef = viewContainerRef;
         this.elementRef = elementRef;
         this.ngZone = ngZone;
+        this.cdr = cdr;
         this.thePlugins = [];
         this.theOnSave = new EventEmitter();
         this.theOnDOMEvent = new EventEmitter();
@@ -11965,12 +12161,14 @@ 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;
             this.theEditorCreated.emit(this.editor);
-            (_a = this.placeholderInstance) === null || _a === void 0 ? void 0 : _a.checkStatus();
             this.applyAutoFocus();
         });
     }
@@ -11992,7 +12190,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         }
     }
     toolbarCalculate() {
-        var _a, _b;
+        var _a;
         const toolbar = (_a = this === null || this === void 0 ? void 0 : this.theOptions) === null || _a === void 0 ? void 0 : _a.toolbar;
         const toolbarItems = toolbarCompose(toolbar === null || toolbar === void 0 ? void 0 : toolbar.toolbarItems);
         const toolbarOption = this.toolbarService.initialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline, toolbar === null || toolbar === void 0 ? void 0 : toolbar.quick);
@@ -12003,7 +12201,6 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
             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();
         }
@@ -12013,6 +12210,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         const data = dataDeserialize((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.mode, value);
         // data-deserialize
         this.editorValue = data;
+        this.cdr.markForCheck();
     }
     registerOnChange(fn) {
         this.onChangeCallback = fn;
@@ -12022,13 +12220,16 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
     }
     valueChange(value) {
         var _a, _b, _c, _d, _e, _f;
-        (_a = this.theGlobalToolbarInstance) === null || _a === void 0 ? void 0 : _a.statusChange(this.editor);
-        (_b = this.quickInsertInstance) === null || _b === void 0 ? void 0 : _b.checkStatus();
-        (_c = this.placeholderInstance) === null || _c === void 0 ? void 0 : _c.checkStatus();
+        const isEditable = !((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.readonly) && !((_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.disabled);
+        (_c = this.theGlobalToolbarInstance) === null || _c === void 0 ? void 0 : _c.statusChange(this.editor);
+        // quick insert button
+        if (isEditable) {
+            (_d = this.quickInsertInstance) === null || _d === void 0 ? void 0 : _d.checkStatus();
+        }
         // auto scroll view
-        const scrollContainer = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.scrollContainer;
-        const maxHeight = (_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.maxHeight;
-        if (!((_f = this.theOptions) === null || _f === void 0 ? void 0 : _f.readonly) && (scrollContainer || maxHeight)) {
+        const scrollContainer = (_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.scrollContainer;
+        const maxHeight = (_f = this.theOptions) === null || _f === void 0 ? void 0 : _f.maxHeight;
+        if (isEditable && (scrollContainer || maxHeight)) {
             const container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
             this.autoScrollView(this.editor, container);
         }
@@ -12143,8 +12344,8 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         };
     }
 }
-TheEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorComponent, deps: [{ token: TheToolbarService }, { token: TheContextService }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated" }, host: { properties: { "class.the-editor-readonly": "theOptions?.readonly" }, classAttribute: "the-editor" }, providers: [
+TheEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorComponent, deps: [{ token: TheToolbarService }, { token: TheContextService }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated" }, host: { properties: { "class.the-editor-readonly": "theOptions?.readonly" }, classAttribute: "the-editor" }, providers: [
         TheToolbarService,
         TheContextService,
         TheColorSelectService,
@@ -12153,12 +12354,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    [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.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions?.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-editor, theEditor',
                     templateUrl: 'editor.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [
                         TheToolbarService,
                         TheContextService,
@@ -12174,7 +12376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         '[class.the-editor-readonly]': 'theOptions?.readonly'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: TheToolbarService }, { type: TheContextService }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { theOptions: [{
+        }], ctorParameters: function () { return [{ type: TheToolbarService }, { type: TheContextService }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { theOptions: [{
                 type: Input
             }], thePlugins: [{
                 type: Input
@@ -12199,19 +12401,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }], quickInsertInstance: [{
                 type: ViewChild,
                 args: ['quickInsert', { static: true }]
-            }], placeholderInstance: [{
-                type: ViewChild,
-                args: ['placeholder']
             }] } });
 
 const ENTRY_COMMON_COMPONENTS = [TheColumnResizeOverlayHandleComponent];
 const DIRECTIVES = [TheColumnResizeDirective];
 class TheColumnResizeCommonModule {
 }
-TheColumnResizeCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheColumnResizeCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnResizeCommonModule, declarations: [TheColumnResizeOverlayHandleComponent], exports: [TheColumnResizeOverlayHandleComponent] });
-TheColumnResizeCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnResizeCommonModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnResizeCommonModule, decorators: [{
+TheColumnResizeCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheColumnResizeCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnResizeCommonModule, declarations: [TheColumnResizeOverlayHandleComponent], exports: [TheColumnResizeOverlayHandleComponent] });
+TheColumnResizeCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnResizeCommonModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnResizeCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: ENTRY_COMMON_COMPONENTS,
@@ -12221,10 +12420,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
         }] });
 class TheColumnSizeModule {
 }
-TheColumnSizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheColumnSizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnSizeModule, declarations: [TheColumnResizeDirective], imports: [OverlayModule, TheColumnResizeCommonModule], exports: [TheColumnResizeDirective] });
-TheColumnSizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnSizeModule, imports: [[OverlayModule, TheColumnResizeCommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColumnSizeModule, decorators: [{
+TheColumnSizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheColumnSizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnSizeModule, declarations: [TheColumnResizeDirective], imports: [OverlayModule, TheColumnResizeCommonModule], exports: [TheColumnResizeDirective] });
+TheColumnSizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnSizeModule, imports: [[OverlayModule, TheColumnResizeCommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheColumnSizeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OverlayModule, TheColumnResizeCommonModule],
@@ -12316,9 +12515,9 @@ class TheToolbarGroupComponent {
         }
     }
 }
-TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarGroupComponent.ɵcmp = i0.ɵɵ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: TemplateRef, static: true }], ngImport: i0, 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.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "fontSize", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
+TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", 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: TemplateRef, static: true }], ngImport: i0, 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.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-toolbar-group',
@@ -12399,13 +12598,13 @@ const PLUGIN_COMPONENTS = [
     TheTableComponent,
     TheTableRowComponent,
     TheTdComponent,
-    ThePlaceholderComponent
+    TheInlineCodeComponent
 ];
 const PIPES = [ElementStylePipe, ElementClassPipe];
 class TheEditorModule {
 }
-TheEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorModule, declarations: [TheEditorComponent, ElementStylePipe, ElementClassPipe, TheToolbarComponent,
+TheEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorModule, declarations: [TheEditorComponent, ElementStylePipe, ElementClassPipe, TheToolbarComponent,
         TheToolbarDropdownComponent,
         TheToolbarGroupComponent,
         TheToolbarItemComponent,
@@ -12439,7 +12638,7 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableComponent,
         TheTableRowComponent,
         TheTdComponent,
-        ThePlaceholderComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
+        TheInlineCodeComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
         ThyAvatarModule,
         ThyNavModule,
         ThyFormModule,
@@ -12456,14 +12655,14 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         ThyAlertModule,
         ThyResizableModule,
         ThySwitchModule, CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent] });
-TheEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorModule, providers: [
+TheEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorModule, providers: [
         {
             provide: TheToolbarGroupToken,
             useValue: TheToolbarGroupComponent
         },
         THE_CODE_MODE_PROVIDER
     ], imports: [[CommonModule, SlateModule, FormsModule, ...TETHYS, CodemirrorModule, TheColumnSizeModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TheEditorComponent, ...PIPES, ...COMPONENTS, ...PLUGIN_COMPONENTS],
@@ -12488,5 +12687,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, 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, 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, isCleanEmptyParagraph, plainToTheia, toolbarCompose, withTheEditor };
 //# sourceMappingURL=worktile-theia.js.map