@worktile/theia 16.2.2 → 16.2.4

package/fesm2022/worktile-theia.mjs

@@ -99,10 +99,10 @@ class TheBaseElementComponent extends BaseElementComponent {
         const blockClass = this.editor.isInline(this.element) ? 'slate-inline-block' : 'slate-block';
         this.nativeElement.classList.add(`slate-element-${this.element.type}`, blockClass);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheBaseElementComponent, selector: "TheBaseElementComponent", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheBaseElementComponent, selector: "TheBaseElementComponent", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBaseElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'TheBaseElementComponent',
@@ -114,10 +114,10 @@ class TheDefaultElementComponent extends TheBaseElementComponent {
     get indent() {
         return this.element?.indent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheDefaultElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheDefaultElementComponent, selector: "[theDefaultElement]", host: { properties: { "attr.the-indent": "this.indent" } }, usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheDefaultElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheDefaultElementComponent, selector: "[theDefaultElement]", host: { properties: { "attr.the-indent": "this.indent" } }, usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheDefaultElementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheDefaultElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[theDefaultElement]',
@@ -744,10 +744,10 @@ class ElementStylePipe {
         }
         return style;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: ElementStylePipe, name: "elementStyle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: ElementStylePipe, name: "elementStyle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ElementStylePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ElementStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elementStyle'
@@ -762,10 +762,10 @@ class ElementClassPipe {
         }
         return classStr;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: ElementClassPipe, name: "elementClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: ElementClassPipe, name: "elementClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ElementClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ElementClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elementClass'
@@ -778,10 +778,10 @@ class PluginMenuPipe {
         }
         return icon;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PluginMenuPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: PluginMenuPipe, name: "getMenuIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: PluginMenuPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: PluginMenuPipe, name: "getMenuIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: PluginMenuPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: PluginMenuPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'getMenuIcon'
@@ -815,10 +815,10 @@ class TheTemplateComponent {
             return null;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", 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", dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TheDefaultElementComponent, selector: "[theDefaultElement]" }, { kind: "pipe", type: ElementStylePipe, name: "elementStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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", dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TheDefaultElementComponent, selector: "[theDefaultElement]" }, { kind: "pipe", type: ElementStylePipe, name: "elementStyle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTemplateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-template,[theTemplate]', changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }], propDecorators: { paragraphTemplate: [{
@@ -883,10 +883,10 @@ class TheTextComponent extends BaseTextComponent {
         super.onContextChange();
         this.applyTextMark();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTextComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", 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, dependencies: [{ kind: "component", type: i1.SlateLeaves, selector: "slate-leaves", inputs: ["context"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTextComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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, dependencies: [{ kind: "component", type: i1.SlateLeaves, selector: "slate-leaves", inputs: ["context"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theText]',
@@ -2674,10 +2674,10 @@ class TheBaseToolbarItem {
             this.active = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: TheBaseToolbarItem, inputs: { toolbarItem: "toolbarItem", editor: "editor", itemMousedownHandle: "itemMousedownHandle" }, host: { properties: { "class.disabled": "this.disabledState", "class.active": "this.activeState" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBaseToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: TheBaseToolbarItem, inputs: { toolbarItem: "toolbarItem", editor: "editor", itemMousedownHandle: "itemMousedownHandle" }, host: { properties: { "class.disabled": "this.disabledState", "class.active": "this.activeState" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBaseToolbarItem, decorators: [{
             type: Directive
         }], propDecorators: { toolbarItem: [{
                 type: Input
@@ -2712,10 +2712,10 @@ class TheBaseToolbarDropdown extends TheBaseToolbarItem {
             this.activeMenuItem = activeItem ? activeItem : this.defaultDropdownItem;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseToolbarDropdown, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: TheBaseToolbarDropdown, inputs: { menus: "menus", mode: "mode", dropdownItemKey: "dropdownItemKey" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBaseToolbarDropdown, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: TheBaseToolbarDropdown, inputs: { menus: "menus", mode: "mode", dropdownItemKey: "dropdownItemKey" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseToolbarDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBaseToolbarDropdown, decorators: [{
             type: Directive
         }], propDecorators: { menus: [{
                 type: Input
@@ -2838,10 +2838,10 @@ class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
             .withPush(false)
             .withPositions([bottomPosition, topPosition]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", host: { properties: { "class": "this.className" } }, 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: "<a\n  *ngIf=\"mode === dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"icon-mode\"\n  thyAction\n  [thyActionIcon]=\"activeIcon\"\n  [thyActionActive]=\"activeDropdown\"\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <thy-icon *ngIf=\"!toolbarItem.isHideDropdownActionIcon\" class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n<a\n  *ngIf=\"mode !== dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"text-mode\"\n  thyAction\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of menus\">\n      <a\n        *ngIf=\"menu.key !== 'split'\"\n        class=\"d-flex justify-content-between text-secondary\"\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [ngStyle]=\"menu?.styles\"\n        [thyDropdownMenuItemActive]=\"activeKeys.includes(menu.key)\"\n        (mousedown)=\"preventDefault($event)\"\n        (click)=\"itemMousedown($event, menu)\"\n      >\n        <div class=\"d-flex align-items-center\">\n          <thy-icon\n            class=\"text-secondary\"\n            *ngIf=\"menu?.icon && mode === dropdownMode.icon\"\n            thyDropdownMenuItemIcon\n            [thyIconName]=\"menu.icon\"\n          ></thy-icon>\n          <span class=\"text-body\" *ngIf=\"menu?.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\n        </div>\n        <div class=\"menu-item-right font-size-sm text-muted\" *ngIf=\"menu?.shortcutKey\">{{ menu.shortcutKey }}</div>\n      </a>\n      <thy-dropdown-menu-divider *ngIf=\"menu.key === 'split'\"></thy-dropdown-menu-divider>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", host: { properties: { "class": "this.className" } }, 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: "<a\n  *ngIf=\"mode === dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"icon-mode\"\n  thyAction\n  [thyActionIcon]=\"activeIcon\"\n  [thyActionActive]=\"activeDropdown\"\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <thy-icon *ngIf=\"!toolbarItem.isHideDropdownActionIcon\" class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n<a\n  *ngIf=\"mode !== dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"text-mode\"\n  thyAction\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of menus\">\n      <a\n        *ngIf=\"menu.key !== 'split'\"\n        class=\"d-flex justify-content-between text-secondary\"\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [ngStyle]=\"menu?.styles\"\n        [thyDropdownMenuItemActive]=\"activeKeys.includes(menu.key)\"\n        (mousedown)=\"preventDefault($event)\"\n        (click)=\"itemMousedown($event, menu)\"\n      >\n        <div class=\"d-flex align-items-center\">\n          <thy-icon\n            class=\"text-secondary\"\n            *ngIf=\"menu?.icon && mode === dropdownMode.icon\"\n            thyDropdownMenuItemIcon\n            [thyIconName]=\"menu.icon\"\n          ></thy-icon>\n          <span class=\"text-body\" *ngIf=\"menu?.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\n        </div>\n        <div class=\"menu-item-right font-size-sm text-muted\" *ngIf=\"menu?.shortcutKey\">{{ menu.shortcutKey }}</div>\n      </a>\n      <thy-dropdown-menu-divider *ngIf=\"menu.key === 'split'\"></thy-dropdown-menu-divider>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-dropdown', template: "<a\n  *ngIf=\"mode === dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"icon-mode\"\n  thyAction\n  [thyActionIcon]=\"activeIcon\"\n  [thyActionActive]=\"activeDropdown\"\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <thy-icon *ngIf=\"!toolbarItem.isHideDropdownActionIcon\" class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n<a\n  *ngIf=\"mode !== dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"text-mode\"\n  thyAction\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of menus\">\n      <a\n        *ngIf=\"menu.key !== 'split'\"\n        class=\"d-flex justify-content-between text-secondary\"\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [ngStyle]=\"menu?.styles\"\n        [thyDropdownMenuItemActive]=\"activeKeys.includes(menu.key)\"\n        (mousedown)=\"preventDefault($event)\"\n        (click)=\"itemMousedown($event, menu)\"\n      >\n        <div class=\"d-flex align-items-center\">\n          <thy-icon\n            class=\"text-secondary\"\n            *ngIf=\"menu?.icon && mode === dropdownMode.icon\"\n            thyDropdownMenuItemIcon\n            [thyIconName]=\"menu.icon\"\n          ></thy-icon>\n          <span class=\"text-body\" *ngIf=\"menu?.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\n        </div>\n        <div class=\"menu-item-right font-size-sm text-muted\" *ngIf=\"menu?.shortcutKey\">{{ menu.shortcutKey }}</div>\n      </a>\n      <thy-dropdown-menu-divider *ngIf=\"menu.key === 'split'\"></thy-dropdown-menu-divider>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2$1.Overlay }]; }, propDecorators: { className: [{
@@ -2881,8 +2881,8 @@ class TheToolbarItemComponent extends TheBaseToolbarItem {
         }
         this.toolbarItem?.execute(this.editor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheToolbarItemComponent, selector: "the-toolbar-item", host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheToolbarItemComponent, selector: "the-toolbar-item", host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
         <a
             href="javascript:;"
             thyAction
@@ -2897,7 +2897,7 @@ class TheToolbarItemComponent extends TheBaseToolbarItem {
         <ng-template #tooltip let-data> {{ data?.name }} {{ data?.shortcutKey }} </ng-template>
     `, isInline: true, dependencies: [{ kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-toolbar-item',
@@ -3150,10 +3150,10 @@ class TheToolbarComponent {
         }
         return TheToolbarItemComponent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { properties: { "style.justifyContent": "this.justifyContent" }, classAttribute: "the-toolbar-container d-flex align-items-center" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #toolbarContainer></ng-container>\n<ng-content></ng-content>\n<ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheToolbarComponent, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { properties: { "style.justifyContent": "this.justifyContent" }, classAttribute: "the-toolbar-container d-flex align-items-center" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #toolbarContainer></ng-container>\n<ng-content></ng-content>\n<ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar', host: {
                         class: 'the-toolbar-container d-flex align-items-center'
@@ -3304,10 +3304,10 @@ class TheContextService {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheContextService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheContextService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -3376,49 +3376,185 @@ var TableSelectCellDirection;
     TableSelectCellDirection[TableSelectCellDirection["left"] = 3] = "left";
 })(TableSelectCellDirection || (TableSelectCellDirection = {}));
 
-/**
- * Create a new cell
- */
-function createCell(opts, nodes) {
-    return {
-        type: opts.typeCell,
-        children: nodes || [createEmptyContent(opts)]
-    };
+function calcSpanForRow(table, targetIndex) {
+    const rowspans = [];
+    table.children
+        .filter((row, rowIndex) => rowIndex < targetIndex)
+        .forEach((row, rowIndex) => {
+        row.children.forEach((cell, columnIndex) => {
+            if (cell.rowspan && cell.rowspan > 1) {
+                const rect = {
+                    x: rowIndex,
+                    y: columnIndex,
+                    width: cell.colspan || 1,
+                    height: cell.rowspan || 1
+                };
+                rowspans.push(rect);
+            }
+        });
+    });
+    return table.children[0].children.map((cell, columnIndex) => {
+        return rowspans.some(rowspan => isInside(rowspan, targetIndex, columnIndex));
+    });
 }
-/**
- * Create a new default content block
- */
-function createEmptyContent(opts) {
-    return {
-        type: opts.typeContent,
-        children: [{ text: '' }]
-    };
+function calcSpanForColumn(table, targetIndex) {
+    const rowspans = [];
+    table.children.forEach((row, rowIndex) => {
+        row.children
+            .filter((cell, columnIndex) => columnIndex < targetIndex)
+            .forEach((cell, columnIndex) => {
+            if (cell.colspan && cell.colspan > 1) {
+                const rect = {
+                    x: rowIndex,
+                    y: columnIndex,
+                    width: cell.colspan || 1,
+                    height: cell.rowspan || 1
+                };
+                rowspans.push(rect);
+            }
+        });
+    });
+    return table.children.map((cell, rowIndx) => {
+        return rowspans.some(rowspan => isInside(rowspan, rowIndx, targetIndex));
+    });
+}
+function getOriginCell(table, targetRowIndex, targetColumnIndex) {
+    for (let rowIndex = 0; rowIndex <= targetRowIndex; rowIndex++) {
+        const row = table.children[rowIndex];
+        const originCell = row.children
+            .filter((cell, columnIndex) => columnIndex <= targetColumnIndex)
+            .find((cell, columnIndex) => {
+            if (cell.rowspan > 1 || cell.colspan > 1) {
+                const rect = {
+                    x: rowIndex,
+                    y: columnIndex,
+                    width: cell.colspan || 1,
+                    height: cell.rowspan || 1
+                };
+                return isInside(rect, targetRowIndex, targetColumnIndex);
+            }
+        });
+        if (originCell) {
+            return originCell;
+        }
+    }
+}
+function isInside(cellRect, rowIndex, columnIndex) {
+    if (rowIndex >= cellRect.x &&
+        rowIndex <= cellRect.x + cellRect.height - 1 &&
+        columnIndex >= cellRect.y &&
+        columnIndex <= cellRect.y + cellRect.width - 1) {
+        return true;
+    }
+    return false;
 }
 
 /**
- * Create a new row block
+ * 计算最小行跨距单元格
+ * @param element TableElement
+ * @returns
  */
-function createRow(opts, columns, getCellContent) {
-    const cellNodes = new Array(columns).fill(1).map(i => createCell(opts, getCellContent ? getCellContent(i) : undefined));
-    return {
-        type: opts.typeRow,
-        children: cellNodes
-    };
-}
-
+const calculateMinRowSpanCellForRows = (element) => {
+    const cells = element.children.map((row, index) => {
+        const noHiddenCells = row.children.filter(cell => !cell.hidden);
+        if (noHiddenCells.length > 0) {
+            const minRowspan = Math.min.apply(Math, noHiddenCells.map(cell => {
+                return cell.rowspan || 1;
+            }));
+            const cell = row.children.find(item => !item.hidden && (item.rowspan || 1) === minRowspan);
+            return {
+                cell,
+                rowIndex: index
+            };
+        }
+        else {
+            return {
+                rowIndex: index
+            };
+        }
+    });
+    return cells;
+};
 /**
- * Create a table
+ * 计算行控件的平均高度
+ * @param previousCombineRowIndex
+ * @param previousRowIndex
+ * @param rowControls
  */
-function createTable(opts, columns, rows, getCellContent) {
-    const rowNodes = new Array(rows).fill(1).map(i => createRow(opts, columns, getCellContent ? getCellContent.bind(null, i) : undefined));
-    return {
-        type: opts.typeTable,
-        children: rowNodes,
-        options: {
-            headerRow: true
+const calculateRowControlsAvgHeight = (previousCombineRowIndex, previousRowIndex, rowControls) => {
+    const rowControl = rowControls[previousRowIndex];
+    const count = previousCombineRowIndex - previousRowIndex;
+    const avgHeight = Math.floor(rowControl.height / (count + 1));
+    const firstHeight = rowControl.height - avgHeight * count;
+    rowControl.height = firstHeight;
+    rowControls
+        .filter((_, index) => index > previousRowIndex && index <= previousCombineRowIndex)
+        .forEach(rowControl => {
+        rowControl.height = avgHeight;
+    });
+};
+const getBelowRowHeight = (editor, cells, index, rowIndex, rowspan) => {
+    let belowRowlHeight = 0;
+    cells.slice(index + 1, cells.length).map(item => {
+        if (!item.cell) {
+            return;
         }
-    };
-}
+        if (rowIndex + rowspan > item.rowIndex) {
+            const cellDom = AngularEditor.toDOMNode(editor, item.cell);
+            if (item.cell.rowspan > 1) {
+                // 如果下方单元格的rowspan > 1，递归计算
+                const height = getBelowRowHeight(editor, cells, cells.findIndex(cell => cell.rowIndex === item.rowIndex), item.rowIndex, item.cell.rowspan);
+                belowRowlHeight += getElementHeight(cellDom) - height;
+            }
+            else {
+                belowRowlHeight += getElementHeight(cellDom);
+            }
+        }
+    });
+    return belowRowlHeight;
+};
+const calculateRowControls = (editor, element) => {
+    const minRowSpanCellForRows = calculateMinRowSpanCellForRows(element);
+    const rowControls = [];
+    let previousRowIndex = 0;
+    let previousCombineRowIndex = 0;
+    minRowSpanCellForRows.forEach((cellInfo, index) => {
+        if (!cellInfo.cell) {
+            rowControls.push({
+                height: 0,
+                rowIndex: index
+            });
+            previousCombineRowIndex = index;
+            if (index === minRowSpanCellForRows.length - 1) {
+                calculateRowControlsAvgHeight(previousCombineRowIndex, previousRowIndex, rowControls);
+            }
+            return;
+        }
+        // calculate combine row height
+        if (previousCombineRowIndex > previousRowIndex) {
+            calculateRowControlsAvgHeight(previousCombineRowIndex, previousRowIndex, rowControls);
+            previousCombineRowIndex = 0;
+        }
+        const cellDom = AngularEditor.toDOMNode(editor, cellInfo.cell);
+        let height = getElementHeight(cellDom);
+        // 当cell为合并的单元格(rowspan > 1)，计算其实际高度（当前单元格的高度 - 下方合并单元格的高度）
+        if (cellInfo.cell.rowspan > 1) {
+            const calcHeight = height - getBelowRowHeight(editor, minRowSpanCellForRows, index, cellInfo.rowIndex, cellInfo.cell.rowspan);
+            rowControls.push({
+                height: calcHeight,
+                rowIndex: cellInfo.rowIndex
+            });
+        }
+        else {
+            rowControls.push({
+                height,
+                rowIndex: cellInfo.rowIndex
+            });
+        }
+        previousRowIndex = index;
+    });
+    return rowControls;
+};
 
 class TablePosition {
     constructor(options = {
@@ -3661,315 +3797,47 @@ class TablePosition {
 }
 
 const createTablePosition = (editor, path) => {
-    path = path || editor.selection.anchor?.path;
+    path = path || editor.selection?.anchor?.path;
     if (!path) {
         throw new Error('Path invalid');
     }
     return TablePosition.create(new TableOptions(), editor, path);
 };
 
+/* cell-position 有关的函数 */
 /**
- * True if the given range is inside one table
+ * 判断是否选中了所有的单元格
+ * @param editor 编辑器对象
+ * @param selectedCellPositions 选中的单元格位置数组
+ * @returns 是否选中了所有的单元格
  */
-function isRangeInTable(opts, editor, range) {
-    const { focus } = range;
-    const startPosition = createTablePosition(editor);
-    const endPosition = createTablePosition(editor, focus.path);
-    // Only handle events in tables
-    if (!startPosition.isInTable() || !endPosition.isInTable()) {
+const isSelectedAllCell = (editor, selectedCellPositions) => {
+    if (!AngularEditor.isFocused(editor)) {
         return false;
     }
-    // Inside the same table
-    return startPosition.table === endPosition.table;
-}
-
+    const pos = createTablePosition(editor);
+    return !!selectedCellPositions.length && pos.getHeight() * pos.getWidth() === selectedCellPositions.length;
+};
 /**
- * Is the selection in a table
+ * 获取选中的单元格位置数组
+ * @param editor 编辑器对象
+ * @param selectedCells 选中的单元格
+ * @returns 选中的单元格位置
  */
-function isSelectionInTable(opts, editor) {
-    if (!editor.selection) {
-        return false;
-    }
-    return isRangeInTable(opts, editor, editor.selection);
-}
+const getSelectedCellPositions = (editor, selectedCells) => {
+    return selectedCells?.map((cell) => {
+        const path = AngularEditor.findPath(editor, cell);
+        const [row, col] = path.slice(-2);
+        return { row, col };
+    });
+};
 /**
- * 传入的单元格能否组成一个矩形
- * @param editor
- * @param cells
- * @returns boolean
- */
-function isRectangularInTableCells(editor, cells) {
-    let selectCellSize = cells.length;
-    if (selectCellSize === 0) {
-        return false;
-    }
-    const { row, col } = cells[0];
-    let maxCol = col;
-    let minCol = col;
-    let maxRow = row;
-    let minRow = row;
-    const pos = createTablePosition(editor);
-    for (let { row, col } of cells) {
-        const { hidden, rowspan, colspan } = pos.findCellByPath({ row, col });
-        if (hidden) {
-            selectCellSize--;
-            continue;
-        }
-        if (rowspan || colspan) {
-            const colSpan = colspan ?? 1;
-            const rowSpan = rowspan ?? 1;
-            // 更新视觉选中的个数
-            selectCellSize = selectCellSize + (rowSpan * colSpan - 1);
-            // 纠正合并单元格下的 row 和 col 的真实值
-            row = row + rowSpan - 1;
-            col = col + colSpan - 1;
-        }
-        maxCol = col > maxCol ? col : maxCol;
-        minCol = col < minCol ? col : minCol;
-        maxRow = row > maxRow ? row : maxRow;
-        minRow = row < minRow ? row : minRow;
-    }
-    return (maxRow + 1 - minRow) * (maxCol + 1 - minCol) === selectCellSize;
-}
-
-function calcSpanForRow(table, targetIndex) {
-    const rowspans = [];
-    table.children
-        .filter((row, rowIndex) => rowIndex < targetIndex)
-        .forEach((row, rowIndex) => {
-        row.children.forEach((cell, columnIndex) => {
-            if (cell.rowspan && cell.rowspan > 1) {
-                const rect = {
-                    x: rowIndex,
-                    y: columnIndex,
-                    width: cell.colspan || 1,
-                    height: cell.rowspan || 1
-                };
-                rowspans.push(rect);
-            }
-        });
-    });
-    return table.children[0].children.map((cell, columnIndex) => {
-        return rowspans.some(rowspan => isInside(rowspan, targetIndex, columnIndex));
-    });
-}
-function calcSpanForColumn(table, targetIndex) {
-    const rowspans = [];
-    table.children.forEach((row, rowIndex) => {
-        row.children
-            .filter((cell, columnIndex) => columnIndex < targetIndex)
-            .forEach((cell, columnIndex) => {
-            if (cell.colspan && cell.colspan > 1) {
-                const rect = {
-                    x: rowIndex,
-                    y: columnIndex,
-                    width: cell.colspan || 1,
-                    height: cell.rowspan || 1
-                };
-                rowspans.push(rect);
-            }
-        });
-    });
-    return table.children.map((cell, rowIndx) => {
-        return rowspans.some(rowspan => isInside(rowspan, rowIndx, targetIndex));
-    });
-}
-function getOriginCell(table, targetRowIndex, targetColumnIndex) {
-    for (let rowIndex = 0; rowIndex <= targetRowIndex; rowIndex++) {
-        const row = table.children[rowIndex];
-        const originCell = row.children
-            .filter((cell, columnIndex) => columnIndex <= targetColumnIndex)
-            .find((cell, columnIndex) => {
-            if (cell.rowspan > 1 || cell.colspan > 1) {
-                const rect = {
-                    x: rowIndex,
-                    y: columnIndex,
-                    width: cell.colspan || 1,
-                    height: cell.rowspan || 1
-                };
-                return isInside(rect, targetRowIndex, targetColumnIndex);
-            }
-        });
-        if (originCell) {
-            return originCell;
-        }
-    }
-}
-function isInside(cellRect, rowIndex, columnIndex) {
-    if (rowIndex >= cellRect.x &&
-        rowIndex <= cellRect.x + cellRect.height - 1 &&
-        columnIndex >= cellRect.y &&
-        columnIndex <= cellRect.y + cellRect.width - 1) {
-        return true;
-    }
-    return false;
-}
-
-function isVirtualKey(e) {
-    const isMod = e.ctrlKey || e.metaKey;
-    const isAlt = isKeyHotkey('alt', e);
-    const isShift = isKeyHotkey('shift', e);
-    const isCapsLock = e.key.includes('CapsLock');
-    const isTab = e.key.includes('Tab');
-    const isEsc = e.key.includes('Escape');
-    const isF = e.key.startsWith('F');
-    const isArrow = e.key.includes('Arrow') ? true : false;
-    return isCapsLock || isMod || isAlt || isArrow || isShift || isTab || isEsc || isF;
-}
-
-/**
- * 获取标题行网格列宽值
- * @param editor
- * @param headerRow 标题行
- * @param cellsWidth
- * @returns string
- */
-const getGridColumns = (headerRow, cellsWidth) => {
-    let result = '';
-    Array.from(headerRow.childNodes)
-        .filter((n) => n.nodeType === 1)
-        .forEach((node, i) => {
-        const col = node.getAttribute('colspan');
-        const display = node.style.display;
-        if (display === 'none') {
-            return;
-        }
-        if (col) {
-            const colSpan = Number(col) ?? 1;
-            let width = 0;
-            Array.from({ length: colSpan }, (_, j) => {
-                width += cellsWidth[i + j];
-            });
-            result += width + 'px ';
-        }
-        else {
-            result += cellsWidth[i] + 'px ';
-        }
-    });
-    return result;
-};
-const getColumnsWidth = (cellRow, isColgroup = false) => {
-    const result = [];
-    Array.from(cellRow.childNodes)
-        .filter((n) => n.nodeType === 1)
-        .forEach((item) => {
-        if (isColgroup && IS_SAFARI) {
-            result.push(item.offsetWidth);
-            return;
-        }
-        if (item.getBoundingClientRect) {
-            result.push(item.getBoundingClientRect().width);
-        }
-    });
-    return result;
-};
-/**
- * 计算表格列宽
- * @param isReadonly
- * @param element
- * @param tableWidth
- * @param mode
- * @returns number[]
- */
-const calcColumnGroups = (isReadonly, element, tableWidth, mode) => {
-    const columns = element?.columns;
-    if (isReadonly) {
-        if (columns) {
-            const opts = new TableOptions();
-            const isPrint = mode === TheMode.print;
-            const newColumns = isPrint
-                ? calcPrintColumnWidth(element, opts.minWidthPx)
-                : calcColumnWidth(element, tableWidth, opts.minWidthPx);
-            return newColumns;
-        }
-        return [];
-    }
-    else {
-        return columns;
-    }
-};
-/**
- * 计算表格列宽
- * @param element
- * @param tableWidth
- * @param minWidthPx
- * @returns number[]
- */
-const calcColumnWidth = (element, tableWidth, minWidthPx) => {
-    const columns = element?.columns;
-    const numberedColumnWidth = element?.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
-    const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
-    // 总列宽大于当前表格宽度时，按照设置时的总列宽计算
-    const columnTotalWidth = Math.max(columnsWidth, tableWidth - numberedColumnWidth);
-    return columns.map(column => {
-        const cellWidth = (column.width / columnsWidth) * columnTotalWidth;
-        return { width: Math.max(cellWidth, minWidthPx) };
-    });
-};
-/**
- * 打印模式下，按照原宽度比例基于当前表格宽度计算列宽
- * 1. 所有列的最小列宽总和大于表格宽度时，所有列返回最小宽度
- * @param element
- * @param minWidthPx
- * @returns number[]
- */
-const calcPrintColumnWidth = (element, minWidthPx) => {
-    const columns = element?.columns;
-    const numberedColumnWidth = element?.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
-    // 按照 DPI 96 的 A4 纸宽度是 794, 打印时左右 80px 的边距，所以这里取 794 - 80 * 2 = 634
-    // 如果存在序号列，还需要在 634 基础上减去序号列的宽度，剩下的才是内容区域的宽度
-    let columnTotalWidth = 634 - numberedColumnWidth;
-    const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
-    // 计算所有列的 minWidth 总和
-    const totalMinWidth = minWidthPx * columns.length;
-    if (totalMinWidth > columnTotalWidth) {
-        // 如果所有列的 minWidth 总和大于 columnTotalWidth，所有列返回最小宽度
-        return columns.map(() => ({ width: minWidthPx }));
-    }
-    // 在剩余的宽度中按比例分配
-    const remainingWidth = columnTotalWidth - totalMinWidth;
-    const remainingWidthRatio = columns.map(column => column.width / columnsWidth);
-    // 为什么减 1， 因为这个宽度是内容区域宽度，但 td 右侧还有一个边框，所以减去 1
-    let newColumnsWidth = remainingWidthRatio.map(ratio => minWidthPx + Math.floor(ratio * remainingWidth) - 1);
-    return columns.map((_, index) => ({
-        width: newColumnsWidth[index]
-    }));
-};
-
-/* cell-position 有关的函数 */
-/**
- * 判断是否选中了所有的单元格
- * @param editor 编辑器对象
- * @param selectedCellPositions 选中的单元格位置数组
- * @returns 是否选中了所有的单元格
- */
-const isSelectedAllCell = (editor, selectedCellPositions) => {
-    if (!AngularEditor.isFocused(editor)) {
-        return false;
-    }
-    const pos = createTablePosition(editor);
-    return !!selectedCellPositions.length && pos.getHeight() * pos.getWidth() === selectedCellPositions.length;
-};
-/**
- * 获取选中的单元格位置数组
- * @param editor 编辑器对象
- * @param selectedCells 选中的单元格
- * @returns 选中的单元格位置
- */
-const getSelectedCellPositions = (editor, selectedCells) => {
-    return selectedCells?.map((cell) => {
-        const path = AngularEditor.findPath(editor, cell);
-        const [row, col] = path.slice(-2);
-        return { row, col };
-    });
-};
-/**
- * 获取一定范围内所有的单元格位置
- * @param startRow 起始行
- * @param startCol 起始列
- * @param endRow 结束行
- * @param endCol 结束列
- * @returns 单元格位置
+ * 获取一定范围内所有的单元格位置
+ * @param startRow 起始行
+ * @param startCol 起始列
+ * @param endRow 结束行
+ * @param endCol 结束列
+ * @returns 单元格位置
  */
 const getCellPositionsFromRange = (startRow, startCol, endRow, endCol) => {
     const positions = [];
@@ -3995,125 +3863,208 @@ const uniqueCellPosition = (cells, selectedCellPositions) => {
 };
 
 /**
- * 计算最小行跨距单元格
- * @param element TableElement
- * @returns
+ * Create a new cell
  */
-const calculateMinRowSpanCellForRows = (element) => {
-    const cells = element.children.map((row, index) => {
-        const noHiddenCells = row.children.filter(cell => !cell.hidden);
-        if (noHiddenCells.length > 0) {
-            const minRowspan = Math.min.apply(Math, noHiddenCells.map(cell => {
-                return cell.rowspan || 1;
-            }));
-            const cell = row.children.find(item => !item.hidden && (item.rowspan || 1) === minRowspan);
-            return {
-                cell,
-                rowIndex: index
-            };
-        }
-        else {
-            return {
-                rowIndex: index
-            };
-        }
-    });
-    return cells;
-};
+function createCell(opts, nodes) {
+    return {
+        type: opts.typeCell,
+        children: nodes || [createEmptyContent(opts)]
+    };
+}
 /**
- * 计算行控件的平均高度
- * @param previousCombineRowIndex
- * @param previousRowIndex
- * @param rowControls
+ * Create a new default content block
  */
-const calculateRowControlsAvgHeight = (previousCombineRowIndex, previousRowIndex, rowControls) => {
-    const rowControl = rowControls[previousRowIndex];
-    const count = previousCombineRowIndex - previousRowIndex;
-    const avgHeight = Math.floor(rowControl.height / (count + 1));
-    const firstHeight = rowControl.height - avgHeight * count;
-    rowControl.height = firstHeight;
-    rowControls
-        .filter((_, index) => index > previousRowIndex && index <= previousCombineRowIndex)
-        .forEach(rowControl => {
-        rowControl.height = avgHeight;
-    });
-};
-const getBelowRowHeight = (editor, cells, index, rowIndex, rowspan) => {
-    let belowRowlHeight = 0;
-    cells.slice(index + 1, cells.length).map(item => {
-        if (!item.cell) {
-            return;
-        }
-        if (rowIndex + rowspan > item.rowIndex) {
-            const cellDom = AngularEditor.toDOMNode(editor, item.cell);
-            if (item.cell.rowspan > 1) {
-                // 如果下方单元格的rowspan > 1，递归计算
-                const height = getBelowRowHeight(editor, cells, cells.findIndex(cell => cell.rowIndex === item.rowIndex), item.rowIndex, item.cell.rowspan);
-                belowRowlHeight += getElementHeight(cellDom) - height;
-            }
-            else {
-                belowRowlHeight += getElementHeight(cellDom);
-            }
-        }
-    });
-    return belowRowlHeight;
-};
-const calculateRowControls = (editor, element) => {
-    const minRowSpanCellForRows = calculateMinRowSpanCellForRows(element);
-    const rowControls = [];
-    let previousRowIndex = 0;
-    let previousCombineRowIndex = 0;
-    minRowSpanCellForRows.forEach((cellInfo, index) => {
-        if (!cellInfo.cell) {
-            rowControls.push({
-                height: 0,
-                rowIndex: index
-            });
-            previousCombineRowIndex = index;
-            if (index === minRowSpanCellForRows.length - 1) {
-                calculateRowControlsAvgHeight(previousCombineRowIndex, previousRowIndex, rowControls);
-            }
-            return;
-        }
-        // calculate combine row height
-        if (previousCombineRowIndex > previousRowIndex) {
-            calculateRowControlsAvgHeight(previousCombineRowIndex, previousRowIndex, rowControls);
-            previousCombineRowIndex = 0;
+function createEmptyContent(opts) {
+    return {
+        type: opts.typeContent,
+        children: [{ text: '' }]
+    };
+}
+
+/**
+ * Create a new row block
+ */
+function createRow(opts, columns, getCellContent) {
+    const cellNodes = new Array(columns).fill(1).map(i => createCell(opts, getCellContent ? getCellContent(i) : undefined));
+    return {
+        type: opts.typeRow,
+        children: cellNodes
+    };
+}
+
+/**
+ * Create a table
+ */
+function createTable(opts, columns, rows, getCellContent) {
+    const rowNodes = new Array(rows).fill(1).map(i => createRow(opts, columns, getCellContent ? getCellContent.bind(null, i) : undefined));
+    return {
+        type: opts.typeTable,
+        children: rowNodes,
+        options: {
+            headerRow: true
         }
-        const cellDom = AngularEditor.toDOMNode(editor, cellInfo.cell);
-        let height = getElementHeight(cellDom);
-        // 当cell为合并的单元格(rowspan > 1)，计算其实际高度（当前单元格的高度 - 下方合并单元格的高度）
-        if (cellInfo.cell.rowspan > 1) {
-            const calcHeight = height - getBelowRowHeight(editor, minRowSpanCellForRows, index, cellInfo.rowIndex, cellInfo.cell.rowspan);
-            rowControls.push({
-                height: calcHeight,
-                rowIndex: cellInfo.rowIndex
+    };
+}
+
+/**
+ * 获取标题行网格列宽值
+ * @param editor
+ * @param headerRow 标题行
+ * @param cellsWidth
+ * @returns string
+ */
+const getGridColumns = (headerRow, cellsWidth) => {
+    let result = '';
+    Array.from(headerRow.childNodes)
+        .filter((n) => n.nodeType === 1)
+        .forEach((node, i) => {
+        const col = node.getAttribute('colspan');
+        const display = node.style.display;
+        if (display === 'none') {
+            return;
+        }
+        if (col) {
+            const colSpan = Number(col) ?? 1;
+            let width = 0;
+            Array.from({ length: colSpan }, (_, j) => {
+                width += cellsWidth[i + j];
             });
+            result += width + 'px ';
         }
         else {
-            rowControls.push({
-                height,
-                rowIndex: cellInfo.rowIndex
-            });
+            result += cellsWidth[i] + 'px ';
         }
-        previousRowIndex = index;
     });
-    return rowControls;
+    return result;
+};
+const getColumnsWidth = (cellRow, isColgroup = false) => {
+    const result = [];
+    Array.from(cellRow.childNodes)
+        .filter((n) => n.nodeType === 1)
+        .forEach((item) => {
+        if (isColgroup && IS_SAFARI) {
+            result.push(item.offsetWidth);
+            return;
+        }
+        if (item.getBoundingClientRect) {
+            result.push(item.getBoundingClientRect().width);
+        }
+    });
+    return result;
 };
-
 /**
- * compatible with old data
- * @returns
+ * 计算表格列宽
+ * @param isReadonly
+ * @param element
+ * @param tableWidth
+ * @param mode
+ * @returns number[]
  */
-function isHeaderRow(element) {
-    if (element?.options?.headerRow) {
-        return true;
+const calcColumnGroups = (isReadonly, element, tableWidth, mode) => {
+    const columns = element?.columns;
+    if (isReadonly) {
+        if (columns) {
+            const opts = new TableOptions();
+            const isPrint = mode === TheMode.print;
+            const newColumns = isPrint
+                ? calcPrintColumnWidth(element, opts.minWidthPx)
+                : calcColumnWidth(element, tableWidth, opts.minWidthPx);
+            return newColumns;
+        }
+        return [];
     }
-    // compat old data
-    if (element?.children[0].header) {
-        return true;
+    else {
+        return columns;
     }
-}
+};
+/**
+ * 计算表格列宽
+ * @param element
+ * @param tableWidth
+ * @param minWidthPx
+ * @returns number[]
+ */
+const calcColumnWidth = (element, tableWidth, minWidthPx) => {
+    const columns = element?.columns;
+    const numberedColumnWidth = element?.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
+    const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
+    // 总列宽大于当前表格宽度时，按照设置时的总列宽计算
+    const columnTotalWidth = Math.max(columnsWidth, tableWidth - numberedColumnWidth);
+    return columns.map(column => {
+        const cellWidth = (column.width / columnsWidth) * columnTotalWidth;
+        return { width: Math.max(cellWidth, minWidthPx) };
+    });
+};
+/**
+ * 打印模式下，按照原宽度比例基于当前表格宽度计算列宽
+ * 1. 所有列的最小列宽总和大于表格宽度时，所有列返回最小宽度
+ * @param element
+ * @param minWidthPx
+ * @returns number[]
+ */
+const calcPrintColumnWidth = (element, minWidthPx) => {
+    const columns = element?.columns;
+    const numberedColumnWidth = element?.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
+    // 按照 DPI 96 的 A4 纸宽度是 794, 打印时左右 80px 的边距，所以这里取 794 - 80 * 2 = 634
+    // 如果存在序号列，还需要在 634 基础上减去序号列的宽度，剩下的才是内容区域的宽度
+    let columnTotalWidth = 634 - numberedColumnWidth;
+    const columnsWidth = columns.reduce((a, b) => a + b.width, 0);
+    // 计算所有列的 minWidth 总和
+    const totalMinWidth = minWidthPx * columns.length;
+    if (totalMinWidth > columnTotalWidth) {
+        // 如果所有列的 minWidth 总和大于 columnTotalWidth，所有列返回最小宽度
+        return columns.map(() => ({ width: minWidthPx }));
+    }
+    // 在剩余的宽度中按比例分配
+    const remainingWidth = columnTotalWidth - totalMinWidth;
+    const remainingWidthRatio = columns.map(column => column.width / columnsWidth);
+    // 为什么减 1， 因为这个宽度是内容区域宽度，但 td 右侧还有一个边框，所以减去 1
+    let newColumnsWidth = remainingWidthRatio.map(ratio => minWidthPx + Math.floor(ratio * remainingWidth) - 1);
+    return columns.map((_, index) => ({
+        width: newColumnsWidth[index]
+    }));
+};
+
+const getNextCell = (e, direction, cellPath) => {
+    const [row, col] = cellPath;
+    const pos = createTablePosition(e);
+    let cell;
+    switch (direction) {
+        case TableSelectCellDirection.up:
+            const aboveRow = pos.table.children[pos.getRowIndex() - 1];
+            cell = aboveRow && aboveRow.children[pos.getColumnIndex()];
+            break;
+        case TableSelectCellDirection.down:
+            let belowRowIndex = pos.getRowIndex() + 1;
+            if (pos.cell.rowspan > 1) {
+                belowRowIndex = pos.getRowIndex() + pos.cell.rowspan;
+            }
+            const belowRow = pos.table.children[belowRowIndex];
+            cell = belowRow && belowRow.children[pos.getColumnIndex()];
+            break;
+        case TableSelectCellDirection.right:
+            const afterPoint = Editor.after(e, e.selection);
+            const afterPosition = afterPoint && createTablePosition(e, afterPoint.path);
+            if (afterPosition && afterPosition.cell?.hidden) {
+                cell = afterPosition.findNext();
+            }
+            else {
+                cell = pos.findCellByPath({ row: row, col: col + 1 });
+            }
+            break;
+        case TableSelectCellDirection.left:
+            const beforePoint = Editor.before(e, e.selection);
+            const beforePosition = beforePoint && createTablePosition(e, beforePoint.path);
+            if (beforePosition && beforePosition.cell?.hidden) {
+                cell = beforePosition.findPrevious();
+            }
+            else {
+                cell = pos.findCellByPath({ row: row, col: col - 1 });
+            }
+            break;
+    }
+    return cell;
+};
 
 function getSelectCellNode(editor, selectedCells) {
     const pos = createTablePosition(editor);
@@ -4135,6 +4086,96 @@ function focusCell(editor, path) {
     Transforms.select(editor, at);
 }
 
+/**
+ * compatible with old data
+ * @returns
+ */
+function isHeaderRow(element) {
+    if (element?.options?.headerRow) {
+        return true;
+    }
+    // compat old data
+    if (element?.children[0].header) {
+        return true;
+    }
+}
+
+/**
+ * True if the given range is inside one table
+ */
+function isRangeInTable(opts, editor, range) {
+    const { focus } = range;
+    const startPosition = createTablePosition(editor);
+    const endPosition = createTablePosition(editor, focus.path);
+    // Only handle events in tables
+    if (!startPosition.isInTable() || !endPosition.isInTable()) {
+        return false;
+    }
+    // Inside the same table
+    return startPosition.table === endPosition.table;
+}
+
+/**
+ * Is the selection in a table
+ */
+function isSelectionInTable(opts, editor) {
+    if (!editor.selection) {
+        return false;
+    }
+    return isRangeInTable(opts, editor, editor.selection);
+}
+/**
+ * 传入的单元格能否组成一个矩形
+ * @param editor
+ * @param cells
+ * @returns boolean
+ */
+function isRectangularInTableCells(editor, cells) {
+    let selectCellSize = cells.length;
+    if (selectCellSize === 0) {
+        return false;
+    }
+    const { row, col } = cells[0];
+    let maxCol = col;
+    let minCol = col;
+    let maxRow = row;
+    let minRow = row;
+    const pos = createTablePosition(editor);
+    for (let { row, col } of cells) {
+        const { hidden, rowspan, colspan } = pos.findCellByPath({ row, col });
+        if (hidden) {
+            selectCellSize--;
+            continue;
+        }
+        if (rowspan || colspan) {
+            const colSpan = colspan ?? 1;
+            const rowSpan = rowspan ?? 1;
+            // 更新视觉选中的个数
+            selectCellSize = selectCellSize + (rowSpan * colSpan - 1);
+            // 纠正合并单元格下的 row 和 col 的真实值
+            row = row + rowSpan - 1;
+            col = col + colSpan - 1;
+        }
+        maxCol = col > maxCol ? col : maxCol;
+        minCol = col < minCol ? col : minCol;
+        maxRow = row > maxRow ? row : maxRow;
+        minRow = row < minRow ? row : minRow;
+    }
+    return (maxRow + 1 - minRow) * (maxCol + 1 - minCol) === selectCellSize;
+}
+
+function isVirtualKey(e) {
+    const isMod = e.ctrlKey || e.metaKey;
+    const isAlt = isKeyHotkey('alt', e);
+    const isShift = isKeyHotkey('shift', e);
+    const isCapsLock = e.key.includes('CapsLock');
+    const isTab = e.key.includes('Tab');
+    const isEsc = e.key.includes('Escape');
+    const isF = e.key.startsWith('F');
+    const isArrow = e.key.includes('Arrow') ? true : false;
+    return isCapsLock || isMod || isAlt || isArrow || isShift || isTab || isEsc || isF;
+}
+
 const setMarks = (editor, marks, at) => {
     Transforms.setNodes(editor, marks, {
         at,
@@ -5498,10 +5539,10 @@ class TheBaseSuggestion {
     handleMousedown(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: TheBaseSuggestion, inputs: { editor: "editor", type: "type", keywords: "keywords" }, host: { listeners: { "mousedown": "handleMousedown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBaseSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: TheBaseSuggestion, inputs: { editor: "editor", type: "type", keywords: "keywords" }, host: { listeners: { "mousedown": "handleMousedown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseSuggestion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBaseSuggestion, decorators: [{
             type: Directive
         }], propDecorators: { editor: [{
                 type: Input
@@ -5542,10 +5583,10 @@ class TheTableSelectComponent {
             this.maxRowIndex = -1;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor", beforeInsert: "beforeInsert" }, ngImport: i0, template: "<div class=\"table-selector-container\">\n  <div *ngFor=\"let item of tableData; let rowIndex = index\" class=\"selector-row\" (mousedown)=\"executeTable($event)\">\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", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor", beforeInsert: "beforeInsert" }, ngImport: i0, template: "<div class=\"table-selector-container\">\n  <div *ngFor=\"let item of tableData; let rowIndex = index\" class=\"selector-row\" (mousedown)=\"executeTable($event)\">\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", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'table-select', template: "<div class=\"table-selector-container\">\n  <div *ngFor=\"let item of tableData; let rowIndex = index\" class=\"selector-row\" (mousedown)=\"executeTable($event)\">\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" }]
         }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { optionsParam: [{
@@ -5597,15 +5638,15 @@ class TheListboxOptionDirective {
     getActive() {
         return this._active;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheListboxOptionDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_PARENT_GROUP_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: { theOptionValue: "theOptionValue", theOptionDisabled: "theOptionDisabled" }, host: { properties: { "class": "this.className" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheListboxOptionDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_PARENT_GROUP_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: { theOptionValue: "theOptionValue", theOptionDisabled: "theOptionDisabled" }, host: { properties: { "class": "this.className" } }, providers: [
             {
                 provide: THE_LISTBOX_PARENT_OPTION_TOKEN,
                 useExisting: TheListboxOptionDirective
             }
         ], queries: [{ propertyName: "_options", predicate: i0.forwardRef(function () { return TheListboxOptionDirective; }), descendants: true }], exportAs: ["theListboxOption"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheListboxOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheListboxOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListboxOption]',
@@ -5680,15 +5721,15 @@ class TheListboxGroupDirective {
     getLast() {
         return this.options[this.options.length - 1];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheListboxGroupDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: { horizontalColumn: "horizontalColumn" }, host: { properties: { "class": "this.className" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheListboxGroupDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: { horizontalColumn: "horizontalColumn" }, host: { properties: { "class": "this.className" } }, providers: [
             {
                 provide: THE_LISTBOX_PARENT_GROUP_TOKEN,
                 useExisting: TheListboxGroupDirective
             }
         ], queries: [{ propertyName: "_options", predicate: TheListboxOptionDirective, descendants: true }], exportAs: ["theListboxGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheListboxGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheListboxGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListboxGroup]',
@@ -5891,15 +5932,15 @@ class TheListboxDirective {
         this._optionChangesSubscription.unsubscribe();
         this._keyboardSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheListboxDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: TheListboxDirective, selector: "[theListBox]", inputs: { keyboardContainer: "keyboardContainer", autoActiveFirstItem: "autoActiveFirstItem" }, outputs: { theListboxChange: "theListboxChange" }, host: { properties: { "class": "this.className" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheListboxDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: TheListboxDirective, selector: "[theListBox]", inputs: { keyboardContainer: "keyboardContainer", autoActiveFirstItem: "autoActiveFirstItem" }, outputs: { theListboxChange: "theListboxChange" }, host: { properties: { "class": "this.className" } }, providers: [
             {
                 provide: THE_LISTBOX_TOKEN,
                 useExisting: TheListboxDirective
             }
         ], queries: [{ propertyName: "_groups", predicate: TheListboxGroupDirective, descendants: true }, { propertyName: "_options", predicate: TheListboxOptionDirective, descendants: true }], exportAs: ["theListBox"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheListboxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheListboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListBox]',
@@ -5932,10 +5973,10 @@ class ThePreventDefaultDirective {
     mousedown(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ThePreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", host: { listeners: { "mousedown": "mousedown($event)" } }, exportAs: ["thePreventDefault"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ThePreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", host: { listeners: { "mousedown": "mousedown($event)" } }, exportAs: ["thePreventDefault"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ThePreventDefaultDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ThePreventDefaultDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thePreventDefault]',
@@ -6100,10 +6141,10 @@ class ThePluginMenuComponent extends mixinUnsubscribe(MixinBase) {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ThePluginMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: ThePluginMenuComponent, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu", sceneKey: "sceneKey", subPanelClass: "subPanelClass", autoActiveFirstItem: "autoActiveFirstItem" }, host: { properties: { "class": "this.containerClassName" } }, viewQueries: [{ propertyName: "dropdownTriggers", predicate: ["dropdownTriggers"], descendants: true, read: ThyDropdownDirective }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else thyEmpty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <div *ngIf=\"iconMenu?.length > 0\" theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n    <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n      <a\n        *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n        href=\"javascript:;\"\n        class=\"mt-2\"\n        thyAction\n        theListboxOption\n        [theOptionValue]=\"item\"\n        [thyActionIcon]=\"item.icon\"\n        [thyTooltip]=\"item?.name\"\n        [thyDisabled]=\"item.disabled\"\n        [theOptionDisabled]=\"item.disabled\"\n        thePreventDefault\n        (click)=\"handleItemSelection(item)\"\n      ></a>\n    </ng-container>\n  </div>\n\n  <thy-divider *ngIf=\"this.iconMenu?.length\" class=\"my-2\"></thy-divider>\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #thyEmpty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i6$1.ThyInputSearchComponent, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i6.ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: i6.ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: i6.ThyDropdownMenuGroupComponent, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: i10.ThyEmptyComponent, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "directive", type: i1$1.ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "component", type: TheTableSelectComponent, selector: "table-select", inputs: ["optionsParam", "editor", "beforeInsert"] }, { kind: "directive", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: ["theOptionValue", "theOptionDisabled"], exportAs: ["theListboxOption"] }, { kind: "directive", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: ["horizontalColumn"], exportAs: ["theListboxGroup"] }, { kind: "directive", type: TheListboxDirective, selector: "[theListBox]", inputs: ["keyboardContainer", "autoActiveFirstItem"], outputs: ["theListboxChange"], exportAs: ["theListBox"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }, { kind: "pipe", type: PluginMenuPipe, name: "getMenuIcon" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ThePluginMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ThePluginMenuComponent, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu", sceneKey: "sceneKey", subPanelClass: "subPanelClass", autoActiveFirstItem: "autoActiveFirstItem" }, host: { properties: { "class": "this.containerClassName" } }, viewQueries: [{ propertyName: "dropdownTriggers", predicate: ["dropdownTriggers"], descendants: true, read: ThyDropdownDirective }], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else thyEmpty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <div *ngIf=\"iconMenu?.length > 0\" theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n    <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n      <a\n        *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n        href=\"javascript:;\"\n        class=\"mt-2\"\n        thyAction\n        theListboxOption\n        [theOptionValue]=\"item\"\n        [thyActionIcon]=\"item.icon\"\n        [thyTooltip]=\"item?.name\"\n        [thyDisabled]=\"item.disabled\"\n        [theOptionDisabled]=\"item.disabled\"\n        thePreventDefault\n        (click)=\"handleItemSelection(item)\"\n      ></a>\n    </ng-container>\n  </div>\n\n  <thy-divider *ngIf=\"this.iconMenu?.length\" class=\"my-2\"></thy-divider>\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #thyEmpty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i6$1.ThyInputSearchComponent, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i6.ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: i6.ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: i6.ThyDropdownMenuGroupComponent, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: i10.ThyEmptyComponent, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "directive", type: i1$1.ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "component", type: TheTableSelectComponent, selector: "table-select", inputs: ["optionsParam", "editor", "beforeInsert"] }, { kind: "directive", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: ["theOptionValue", "theOptionDisabled"], exportAs: ["theListboxOption"] }, { kind: "directive", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: ["horizontalColumn"], exportAs: ["theListboxGroup"] }, { kind: "directive", type: TheListboxDirective, selector: "[theListBox]", inputs: ["keyboardContainer", "autoActiveFirstItem"], outputs: ["theListboxChange"], exportAs: ["theListBox"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }, { kind: "pipe", type: PluginMenuPipe, name: "getMenuIcon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-plugin-menu', template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else thyEmpty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <div *ngIf=\"iconMenu?.length > 0\" theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n    <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n      <a\n        *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n        href=\"javascript:;\"\n        class=\"mt-2\"\n        thyAction\n        theListboxOption\n        [theOptionValue]=\"item\"\n        [thyActionIcon]=\"item.icon\"\n        [thyTooltip]=\"item?.name\"\n        [thyDisabled]=\"item.disabled\"\n        [theOptionDisabled]=\"item.disabled\"\n        thePreventDefault\n        (click)=\"handleItemSelection(item)\"\n      ></a>\n    </ng-container>\n  </div>\n\n  <thy-divider *ngIf=\"this.iconMenu?.length\" class=\"my-2\"></thy-divider>\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #thyEmpty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { dropdownTriggers: [{
@@ -6271,10 +6312,10 @@ class TheVerticalToolbarItemComponent extends TheBaseToolbarDropdown {
             this.dropdownPopoverRef.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", 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  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", 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  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-vertical-align-item', host: {
                         class: 'the-toolbar-dropdown-container verticalAlign',
@@ -7056,10 +7097,10 @@ class TheBlockquoteComponent extends TheBaseElementComponent {
         this.elementRef = elementRef;
         this.cdr = cdr;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBlockquoteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheBlockquoteComponent, selector: "blockquote[theBlockquote]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBlockquoteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheBlockquoteComponent, selector: "blockquote[theBlockquote]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBlockquoteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBlockquoteComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'blockquote[theBlockquote]',
@@ -7353,10 +7394,10 @@ class TheCodeComponent extends TheBaseElementComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdownComponent", first: true, predicate: TheToolbarDropdownComponent, descendants: true, read: TheToolbarDropdownComponent }], usesInheritance: true, ngImport: i0, template: "<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: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\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=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>\u81EA\u52A8\u6362\u884C</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options.lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (click)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      thyTooltip=\"\u5220\u9664\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { kind: "component", type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: i10$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: i13.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown" }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdownComponent", first: true, predicate: TheToolbarDropdownComponent, descendants: true, read: TheToolbarDropdownComponent }], usesInheritance: true, ngImport: i0, template: "<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: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\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=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>\u81EA\u52A8\u6362\u884C</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options.lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (click)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      thyTooltip=\"\u5220\u9664\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { kind: "component", type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: i10$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: i13.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown" }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheCodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[theCode]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\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=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>\u81EA\u52A8\u6362\u884C</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options.lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (click)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      thyTooltip=\"\u5220\u9664\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.ThyNotifyService }, { type: TheContextService }, { type: i0.NgZone }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2$1.Overlay }]; }, propDecorators: { toolbar: [{
@@ -7467,10 +7508,10 @@ class TheColorToolbarItemComponent extends TheBaseToolbarItem {
         Transforms.select(this.editor, this.editor.selection);
         ColorEditor.setColor(this.editor, this.selectedColor, this.type);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColorToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"toolbarItem.name\"\n  thyTooltipPlacement=\"top\"\n  thyColorPicker\n  thyPlacement=\"bottomLeft\"\n  [(ngModel)]=\"selectedColor\"\n  (ngModelChange)=\"changeColor($event)\"\n  (mousedown)=\"preventDefault($event)\"\n>\n  <thy-icon\n    [thyIconName]=\"toolbarItem.icon\"\n    thyIconType=\"twotone\"\n    [thyTwotoneColor]=\"active ?? (toolbarItem.key === 'color' ? defaultColorLine : defaultBackgroundColorLine)\"\n  ></thy-icon>\n  <thy-icon class=\"link-down-icon font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColorToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"toolbarItem.name\"\n  thyTooltipPlacement=\"top\"\n  thyColorPicker\n  thyPlacement=\"bottomLeft\"\n  [(ngModel)]=\"selectedColor\"\n  (ngModelChange)=\"changeColor($event)\"\n  (mousedown)=\"preventDefault($event)\"\n>\n  <thy-icon\n    [thyIconName]=\"toolbarItem.icon\"\n    thyIconType=\"twotone\"\n    [thyTwotoneColor]=\"active ?? (toolbarItem.key === 'color' ? defaultColorLine : defaultBackgroundColorLine)\"\n  ></thy-icon>\n  <thy-icon class=\"link-down-icon font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n", dependencies: [{ kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-color-toolbar-item', host: {
                         class: 'the-toolbar-item'
@@ -8221,10 +8262,10 @@ class TheConversionHintComponent {
     clearCloseTimer() {
         clearInterval(this.closeTimer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheConversionHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", 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 thyType=\"primary-weak\" thyIcon=\"info-circle-fill\" thyCloseable=\"true\" thyMessage=\"\u68C0\u6D4B\u5230\u7C98\u8D34\u5185\u5BB9\u7B26\u5408Markdown\u8BED\u6CD5\">\n    <ng-template #operation>\n      <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\"> \u7ACB\u5373\u8F6C\u6362 </a>\n    </ng-template>\n  </thy-alert>\n</ng-container>\n", dependencies: [{ kind: "component", type: i1$3.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyTheme", "thyMessage", "thyIcon", "thyCloseable"] }, { kind: "directive", type: i1$3.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheConversionHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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 thyType=\"primary-weak\" thyIcon=\"info-circle-fill\" thyCloseable=\"true\" thyMessage=\"\u68C0\u6D4B\u5230\u7C98\u8D34\u5185\u5BB9\u7B26\u5408Markdown\u8BED\u6CD5\">\n    <ng-template #operation>\n      <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\"> \u7ACB\u5373\u8F6C\u6362 </a>\n    </ng-template>\n  </thy-alert>\n</ng-container>\n", dependencies: [{ kind: "component", type: i1$3.ThyAlertComponent, selector: "thy-alert", inputs: ["thyType", "thyTheme", "thyMessage", "thyIcon", "thyCloseable"] }, { kind: "directive", type: i1$3.ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheConversionHintComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheConversionHintComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-conversion-hint', host: {
                         class: 'the-conversion-hint'
@@ -8597,15 +8638,15 @@ class TheHrComponent extends TheBaseElementComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheHrComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheHrComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0, template: `
         <div class="the-hr" contenteditable="false" [ngClass]="{ active: isCollapsedAndNonReadonly }">
             <hr class="the-hr" />
             <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheHrComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheHrComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-hr, [theHr]',
@@ -9056,10 +9097,10 @@ class TheImageComponent extends TheBaseElementComponent {
         event.preventDefault();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: i4$1.ThyImageGroupComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\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\" [class.readonly]=\"readonly\"></div>\n  </div>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i9$1.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "directive", type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }, { token: i4$1.ThyImageGroupComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\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\" [class.readonly]=\"readonly\"></div>\n  </div>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i9$1.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "directive", type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-image, [theImage]', template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.cursor-pointer]=\"!selection\">\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\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\" [class.readonly]=\"readonly\"></div>\n  </div>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
@@ -9257,12 +9298,12 @@ class TheInlineCodeComponent extends TheBaseElementComponent {
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
         this.inlineChromiumBugfix = String.fromCodePoint(160);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheInlineCodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: `<span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheInlineCodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: `<span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
         <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
         <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheInlineCodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheInlineCodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theInlineCode]',
@@ -9362,10 +9403,10 @@ class TheLinkHoverComponent {
         this.deleteHandle();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheLinkHoverComponent, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0, template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n", dependencies: [{ kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheLinkHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheLinkHoverComponent, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0, template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n", dependencies: [{ kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkHoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheLinkHoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-link-hover', template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { link: [{
@@ -9443,10 +9484,10 @@ class TheLinkEditComponent {
             form.validator.setElementErrorMessage(`link`, '请输入正确的链接');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", 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 thyForm #linkForm=\"thyForm\" [thyFormValidatorConfig]=\"validatorConfig\" name=\"linkForm\">\n  <thy-form-group thyLabelText=\"\u6587\u672C\">\n    <input thyInput placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\" required name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n  </thy-form-group>\n  <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n    <input name=\"link\" thyInput placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\" required type=\"text\" #linkControl=\"ngModel\" [(ngModel)]=\"link\" />\n  </thy-form-group>\n  <thy-form-group-footer>\n    <div class=\"btn-pair\">\n      <button thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"closePopover()\">\u53D6\u6D88</button>\n      <button thyButton=\"primary-square\" thySize=\"sm\" (thyFormSubmit)=\"applyLink(linkForm)\">\u5E94\u7528</button>\n    </div>\n  </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$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]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i3.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i3.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i3.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: i5$1.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: i6$1.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: i6$2.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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 thyForm #linkForm=\"thyForm\" [thyFormValidatorConfig]=\"validatorConfig\" name=\"linkForm\">\n  <thy-form-group thyLabelText=\"\u6587\u672C\">\n    <input thyInput placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\" required name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n  </thy-form-group>\n  <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n    <input name=\"link\" thyInput placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\" required type=\"text\" #linkControl=\"ngModel\" [(ngModel)]=\"link\" />\n  </thy-form-group>\n  <thy-form-group-footer>\n    <div class=\"btn-pair\">\n      <button thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"closePopover()\">\u53D6\u6D88</button>\n      <button thyButton=\"primary-square\" thySize=\"sm\" (thyFormSubmit)=\"applyLink(linkForm)\">\u5E94\u7528</button>\n    </div>\n  </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$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]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i3.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i3.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i3.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: i5$1.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: i6$1.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: i6$2.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheLinkEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-link-edit', template: "<form thyForm #linkForm=\"thyForm\" [thyFormValidatorConfig]=\"validatorConfig\" name=\"linkForm\">\n  <thy-form-group thyLabelText=\"\u6587\u672C\">\n    <input thyInput placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\" required name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n  </thy-form-group>\n  <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n    <input name=\"link\" thyInput placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\" required type=\"text\" #linkControl=\"ngModel\" [(ngModel)]=\"link\" />\n  </thy-form-group>\n  <thy-form-group-footer>\n    <div class=\"btn-pair\">\n      <button thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"closePopover()\">\u53D6\u6D88</button>\n      <button thyButton=\"primary-square\" thySize=\"sm\" (thyFormSubmit)=\"applyLink(linkForm)\">\u5E94\u7528</button>\n    </div>\n  </thy-form-group-footer>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { className: [{
@@ -9584,10 +9625,10 @@ class TheBaseLinkComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
         this.close(LinkCloseTypes.destroy);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBaseLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBaseLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBaseLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[TheBaseLinkComponent]',
@@ -9604,12 +9645,12 @@ class TheLinkComponent extends TheBaseLinkComponent {
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
         this.inlineChromiumBugfix = String.fromCodePoint(160);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheLinkComponent, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheLinkComponent, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
         <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
         <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'a[theLink]',
@@ -10264,10 +10305,10 @@ class TheNumberedListComponent extends TheBaseElementComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheNumberedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheNumberedListComponent, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheNumberedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheNumberedListComponent, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheNumberedListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheNumberedListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol[theOl]',
@@ -10296,10 +10337,10 @@ class TheBulletedListComponent extends TheBaseElementComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBulletedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheBulletedListComponent, selector: "ul[theUl]", host: { properties: { "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBulletedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheBulletedListComponent, selector: "ul[theUl]", host: { properties: { "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheBulletedListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheBulletedListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ul[theUl]',
@@ -10385,10 +10426,10 @@ class TheListItemComponent extends TheBaseElementComponent {
             this.elementRef.nativeElement.removeAttribute(multiDigit);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheListItemComponent, selector: "li[theLi]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheListItemComponent, selector: "li[theLi]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheListItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheListItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'li[theLi]',
@@ -11154,7 +11195,70 @@ const createSoftBreakPlugin = createPluginFactory({
             }
         ]
     }
-});
+});
+
+class TheTableRowComponent extends TheBaseElementComponent {
+    constructor(elementRef, cdr, renderer) {
+        super(elementRef, cdr);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.renderer = renderer;
+        this.numberedColumn = false;
+        this.rowNumber = '';
+    }
+    onContextChange() {
+        super.onContextChange();
+        const path = TheEditor.findPath(this.editor, this.element);
+        const tablePosition = createTablePosition(this.editor, path.concat(0));
+        const rowIndex = tablePosition.getRowIndex();
+        if (rowIndex === 0) {
+            this.renderer.addClass(this.elementRef.nativeElement, 'the-sticky-row');
+        }
+        else {
+            this.renderer.removeClass(this.elementRef.nativeElement, 'the-sticky-row');
+        }
+        if (this.initialized) {
+            this.useHeight();
+        }
+        this.setNumberColumn(tablePosition, rowIndex);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.useHeight();
+    }
+    useHeight() {
+        if (this.element.height) {
+            this.height = this.element.height + 'px';
+        }
+    }
+    setNumberColumn(ps, rowIndex) {
+        const headerRow = isHeaderRow(ps.table);
+        this.numberedColumn = ps.table?.options?.numberedColumn;
+        this.rowNumber = headerRow && rowIndex === 0 ? '' : headerRow ? rowIndex : rowIndex + 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheTableRowComponent, selector: "tr[theTableRow]", host: { properties: { "style.height": "this.height" } }, usesInheritance: true, ngImport: i0, template: `
+        <td *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
+            {{ rowNumber }}
+        </td>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tr[theTableRow]',
+                    template: `
+        <td *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
+            {{ rowNumber }}
+        </td>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { height: [{
+                type: HostBinding,
+                args: ['style.height']
+            }] } });
 
 class TheToolbarGroupComponent {
     set item(i) {
@@ -11245,10 +11349,10 @@ class TheToolbarGroupComponent {
             this.groupPopoverRef.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "document:mouseup": "documentMouseupHandle($event)", "click": "clickHandle($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "document:mouseup": "documentMouseupHandle($event)", "click": "clickHandle($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-group', template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }]; }, propDecorators: { className: [{
@@ -11293,10 +11397,10 @@ class ColumnResizeNotifierSource {
         /** Triggers a resize action. */
         this.triggerResize = new Subject();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ColumnResizeNotifierSource }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ColumnResizeNotifierSource }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
             type: Injectable
         }] });
 
@@ -11345,10 +11449,10 @@ class TableCellEventDispatcher {
             complete: () => observer.complete()
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableCellEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableCellEventDispatcher }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableCellEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableCellEventDispatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableCellEventDispatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableCellEventDispatcher, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -11566,10 +11670,10 @@ class TheContextMenuComponent {
         this.wrap = true;
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i5$1.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$1.ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: i7$1.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i5$1.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$1.ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: i7$1.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheContextMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-contextmenu', template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
@@ -12157,33 +12261,16 @@ class TableStore {
         }
     }
     selectCellInDirection(direction) {
-        const pos = createTablePosition(this.editor);
         const [row, col] = this.focusCellPath.slice(-2);
-        let nextCellPath = [row, col];
-        switch (direction) {
-            case TableSelectCellDirection.up:
-                nextCellPath = [row - 1, col];
-                break;
-            case TableSelectCellDirection.right:
-                nextCellPath = [row, col + 1];
-                break;
-            case TableSelectCellDirection.down:
-                nextCellPath = [row + 1, col];
-                break;
-            case TableSelectCellDirection.left:
-                nextCellPath = [row, col - 1];
-                break;
-        }
-        const nextCellPosition = { row: nextCellPath[0], col: nextCellPath[1] };
-        const cell = pos.findCellByPath(nextCellPosition);
-        if (cell) {
-            this.setAreaSelectionCells(cell);
+        const nextCell = getNextCell(this.editor, direction, [row, col]);
+        if (nextCell) {
+            this.setAreaSelectionCells(nextCell);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -12443,10 +12530,10 @@ class TheTableContextMenuService {
             return this.menuRef.afterClosed();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TableStore }, { token: i1$1.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableContextMenuService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TableStore }, { token: i1$1.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableContextMenuService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableContextMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableContextMenuService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: TableStore }, { type: i1$1.ThyPopover }, { type: i0.NgZone }, { type: TheContextService }]; } });
 
@@ -12468,10 +12555,10 @@ class TableFreezeColumnPipe {
         const mergeColumnCells = rows && rows.map(cells => cells[0]).filter(item => item.colspan && item.colspan !== 1);
         return !!(tablePluginOptions?.freezeColumnHeader && table.options?.headerColumn && !mergeColumnCells.length && stickyColumn);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableFreezeColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: TableFreezeColumnPipe, name: "freezeColumn" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableFreezeColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: TableFreezeColumnPipe, name: "freezeColumn" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableFreezeColumnPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableFreezeColumnPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'freezeColumn' }]
         }] });
@@ -12484,10 +12571,10 @@ class TableFreezeRowPipe {
         }
         return false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableFreezeRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: TableFreezeRowPipe, name: "freezeRow" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableFreezeRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: TableFreezeRowPipe, name: "freezeRow" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableFreezeRowPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableFreezeRowPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'freezeRow' }]
         }] });
@@ -12541,8 +12628,8 @@ class TheTableOptionsComponent {
             Transforms.setNodes(this.editor, { header: null }, { at: rowPath });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableOptionsComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { editor: "editor" }, host: { classAttribute: "the-table-options" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableOptionsComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { editor: "editor" }, host: { classAttribute: "the-table-options" }, ngImport: i0, template: `
         <div class="thy-dropdown-menu table-drop-menu">
             <ng-container *ngFor="let option of tableDropdownList">
                 <a thyDropdownMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
@@ -12555,7 +12642,7 @@ class TheTableOptionsComponent {
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableOptionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableOptionsComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-options',
@@ -12722,10 +12809,10 @@ class TheTableToolbarComponent {
             viewContainerRef: this.viewContainerRef
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }, { token: i1$2.ThyNotifyService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (click)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (click)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (click)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (click)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }, { token: i1$2.ThyNotifyService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (click)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (click)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (click)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (click)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-toolbar', template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (click)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (click)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (click)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (click)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }, { type: i1$2.ThyNotifyService }, { type: i0.ViewContainerRef }]; }, propDecorators: { tableStore: [{
@@ -12744,12 +12831,11 @@ class TableService {
     get isOpened() {
         return this.toolbarRef && this.toolbarRef.componentInstance;
     }
-    constructor(thyPopover, overlay, tableStore, ngZone, theContextService) {
+    constructor(thyPopover, overlay, tableStore, ngZone) {
         this.thyPopover = thyPopover;
         this.overlay = overlay;
         this.tableStore = tableStore;
         this.ngZone = ngZone;
-        this.theContextService = theContextService;
         this.backdropClosable = false;
         this.hasBackdrop = false;
         this.insideClosable = false;
@@ -12768,7 +12854,6 @@ class TableService {
                 tableStore: this.tableStore,
                 tableElement
             },
-            viewContainerRef: this.theContextService.getOptions().viewContainerRef,
             origin: this.getOrigin(origin),
             backdropClosable: this.backdropClosable,
             panelClass: 'the-plugin-toolbar-popover',
@@ -12872,12 +12957,119 @@ class TableService {
             e.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableService, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: TableStore }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableService, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: TableStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: TableStore }, { type: i0.NgZone }, { type: TheContextService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: TableStore }, { type: i0.NgZone }]; } });
+
+function calculateAnchorPositionInCell(editor, at) {
+    at = at || editor.selection.anchor;
+    const entry = anchorBlockEntry(editor, at);
+    const [block, blockPath] = entry;
+    const blockDom = AngularEditor.toDOMNode(editor, block);
+    const valueRangeRect = blockDom.getBoundingClientRect();
+    const blockHeight = window.getComputedStyle(blockDom).lineHeight;
+    const nativeSelection = window.getSelection();
+    const nativeRange = nativeSelection && nativeSelection.getRangeAt(0);
+    const nativeRangeRect = nativeRange && nativeRange.getBoundingClientRect();
+    let isFirstLine = false;
+    let isLastLine = false;
+    if (valueRangeRect && nativeRangeRect && blockHeight) {
+        const lineHeight = parseInt(blockHeight, 10);
+        isFirstLine = nativeRangeRect.top - valueRangeRect.top < lineHeight;
+        isLastLine = valueRangeRect.bottom - nativeRangeRect.bottom < lineHeight;
+    }
+    return {
+        isFirstLine,
+        isLastLine,
+        blockPath
+    };
+}
+
+const keyShiftDir = {
+    'shift+up': TableSelectCellDirection.up,
+    'shift+right': TableSelectCellDirection.right,
+    'shift+down': TableSelectCellDirection.down,
+    'shift+left': TableSelectCellDirection.left
+};
+const getHotKey = (e) => {
+    const hotkey = ['shift+up', 'shift+right', 'shift+down', 'shift+left'].find(key => isKeyHotkey(key, e));
+    return hotkey;
+};
+/**
+ * 处理单元格内 shift + up/down/left/right 行为
+ * @param editor 编辑器对象
+ * @param e 键盘事件对象
+ */
+const moveSelectionFromCell = (editor, e) => {
+    const hotkey = getHotKey(e);
+    if (!hotkey) {
+        return;
+    }
+    const { selection } = editor;
+    const cursor = selection.focus;
+    const tablePosition = createTablePosition(editor);
+    const tableComponent = ELEMENT_TO_COMPONENT.get(tablePosition.table);
+    const tableStore = tableComponent.tableStore;
+    const selectedCells = tableStore.getSelectedCellPositions();
+    const endPosition = createTablePosition(editor, cursor.path);
+    const cellPath = endPosition.cellEntry[1];
+    const isStart = Editor.isStart(editor, selection.focus, cellPath);
+    const isEnd = Editor.isEnd(editor, selection.focus, cellPath);
+    const isUp = isKeyHotkey('shift+up', e);
+    const isDown = isKeyHotkey('shift+down', e);
+    const isLeft = isKeyHotkey('shift+left', e);
+    const isRight = isKeyHotkey('shift+right', e);
+    // 当前已经没有选中单元格
+    if (selectedCells.length === 0) {
+        if (isUp || isDown) {
+            const cellStartPath = Editor.start(editor, cellPath).path;
+            const cellEndPath = Editor.end(editor, cellPath).path;
+            const { isFirstLine, isLastLine } = calculateAnchorPositionInCell(editor, cursor);
+            const [, anchorBlockPath] = anchorBlockEntry(editor, cursor);
+            const anchorPosition = createTablePosition(editor, selection.anchor.path);
+            const startCellPosition = createTablePosition(editor, cellStartPath);
+            const endCellPosition = createTablePosition(editor, cellEndPath);
+            const isSameCellByStart = Path.equals(anchorPosition.cellEntry[1], startCellPosition.cellEntry[1]);
+            const isSameCellByEnd = Path.equals(anchorPosition.cellEntry[1], endCellPosition.cellEntry[1]);
+            cellStartPath.pop();
+            cellEndPath.pop();
+            // 同一单元格内，当前光标不在首行或当前是跨行，则执行默认逻辑
+            if (isUp && isSameCellByStart && (!isFirstLine || !Path.equals(anchorBlockPath, cellStartPath))) {
+                return;
+            }
+            // 同一单元格内，当前光标不在最后一行或当前是跨行，则执行默认逻辑
+            if (isDown && isSameCellByEnd && (!isLastLine || !Path.equals(anchorBlockPath, cellEndPath))) {
+                return;
+            }
+        }
+        if (isLeft) {
+            const beforePoint = Editor.before(editor, selection);
+            const beforePosition = beforePoint && createTablePosition(editor, beforePoint.path);
+            // 如果不是单元格或不在起始位置，则不处理
+            if (!beforePosition?.cell || !isStart) {
+                return;
+            }
+        }
+        if (isRight) {
+            const afterPoint = Editor.after(editor, selection);
+            const afterPosition = afterPoint && createTablePosition(editor, afterPoint.path);
+            // 如果不是单元格或不是单元格尾部，则不处理
+            if (!afterPosition?.cell || !isEnd) {
+                return;
+            }
+        }
+    }
+    tableStore.selectCellInDirection(keyShiftDir[hotkey]);
+    setTimeout(() => {
+        const tableService = tableComponent.tableService;
+        const isMobile = isMobileMode(editor);
+        const focusElement = tableComponent.tbodyNativeElement?.querySelector('.focused-cell') || tableStore.focusCellElement;
+        tableService.afterSelectedCells(focusElement, tableComponent.element, isMobile);
+    });
+};
 
 const TABLE_SELECTOR = '.the-table';
 const TABLE_WRAPPER_SELECTOR = '.the-table-wrapper';
@@ -12964,10 +13156,10 @@ class TheColumnResizeDirective {
         this.destroyed.next();
         this.destroyed.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: THE_TABLE_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.4", type: TheColumnResizeDirective, selector: "div[theColumnResize]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: THE_TABLE_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: TheColumnResizeDirective, selector: "div[theColumnResize]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColumnResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColumnResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[theColumnResize]'
@@ -13052,10 +13244,10 @@ class TheInsertMarkComponent {
             return result + 'px';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, 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", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, 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", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.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: "16.2.4", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-insert-mark', host: {
                         class: 'the-table-insert-mark'
@@ -13093,9 +13285,6 @@ class TheTableComponent extends TheBaseElementComponent {
             Promise.resolve().then(() => {
                 this.tableStore.emitTableChange();
                 this.tableStore.setSelectedColumnsAndRowIndex();
-                if (!this.tableStore.selectedCells.length && this.tableService.isOpened) {
-                    this.tableService.closeToolbar();
-                }
                 this.bindTableScrollingShadow();
                 this.useRowControls();
                 this.setHeaderCellStyle();
@@ -13165,8 +13354,11 @@ class TheTableComponent extends TheBaseElementComponent {
         this.tableStore
             .selectedCellsChange()
             .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
+            .subscribe(cells => {
             this.isSelectedAllCell = isSelectedAllCell(this.editor, this.tableStore.getSelectedCellPositions());
+            if (!cells.length && this.tableService.isOpened) {
+                this.tableService.closeToolbar();
+            }
         });
     }
     getWrapperWidth() {
@@ -13708,17 +13900,13 @@ class TheTableComponent extends TheBaseElementComponent {
                 if (isKeyHotkey('shift', e)) {
                     this.tableService.handleKeydownForAreaSelection(e, this.tbodyNativeElement);
                 }
-                if (isKeyHotkey('shift+up', e)) {
-                    this.tableStore.selectCellInDirection(TableSelectCellDirection.up);
-                }
-                if (isKeyHotkey('shift+down', e)) {
-                    this.tableStore.selectCellInDirection(TableSelectCellDirection.down);
+                // 处理单元格内 shift + up/down/left/right 行为
+                if (this.isInTable) {
+                    moveSelectionFromCell(this.editor, e);
                 }
-                if (isKeyHotkey('shift+left', e)) {
-                    this.tableStore.selectCellInDirection(TableSelectCellDirection.left);
-                }
-                if (isKeyHotkey('shift+right', e)) {
-                    this.tableStore.selectCellInDirection(TableSelectCellDirection.right);
+                // 触发上下左右键时，清除选中的单元格
+                if (isKeyHotkey(['up', 'down', 'left', 'right'], e) && this.tableStore.selectCells?.length > 0) {
+                    this.tableStore.clearSelectedCells();
                 }
             });
         });
@@ -13813,11 +14001,13 @@ class TheTableComponent extends TheBaseElementComponent {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this.tableService.closeToolbar();
+        this.theTableContextMenuService.closeContextMenu();
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableComponent, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "freezeColumnPipe.transform(element, tablePluginOptions)", "class.the-numbered-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableComponent, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "freezeColumnPipe.transform(element, tablePluginOptions)", "class.the-numbered-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput" } }, providers: [
             TableStore,
             TableService,
             TheTableContextMenuService,
@@ -13831,7 +14021,7 @@ class TheTableComponent extends TheBaseElementComponent {
             }
         ], 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 }, { propertyName: "tableRowControlsWrapper", first: true, predicate: ["tableRowControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "columnControlsWrapper", first: true, predicate: ["columnControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "cornerControl", first: true, predicate: ["cornerControl"], descendants: true, read: ElementRef }, { propertyName: "rowControlsInner", first: true, predicate: ["rowControlsInner"], descendants: true, read: ElementRef }, { propertyName: "headerRowLeftShadow", first: true, predicate: ["headerRowLeftShadow"], descendants: true, read: ElementRef }, { propertyName: "headerRowRightShadow", first: true, predicate: ["headerRowRightShadow"], descendants: true, read: ElementRef }, { propertyName: "colgroup", first: true, predicate: ["colgroup"], descendants: true, read: ElementRef }, { propertyName: "rowControlsButtonWrapper", predicate: ["rowControlsButtonWrapper"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls the-sticky-corner-controls\"\n      #cornerControl\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n      <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow && !isMobileMode\">\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\" *ngIf=\"!element?.options?.headerColumn && !isMobileMode\">\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\" #rowControlsInner>\n        <div\n          class=\"the-table-row-controls-button-wrap\"\n          #rowControlsButtonWrapper\n          *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n          [ngClass]=\"{\n            'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n          }\"\n        >\n          <ng-container\n            *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn\"\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          </ng-container>\n          <ng-container *ngIf=\"element?.options?.numberedColumn\">\n            <div\n              [contentEditable]=\"false\"\n              contenteditable=\"false\"\n              (mousedown)=\"onRowMousedown($event, control.rowIndex)\"\n              class=\"the-table-numbered-controls-button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n            >\n              <p class=\"row-number d-flex align-items-center\">{{ headerRow && i === 0 ? '' : headerRow ? i : i + 1 }}</p>\n            </div>\n          </ng-container>\n          <the-table-insert-mark *ngIf=\"!isMobileMode\" type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\">\n          </the-table-insert-mark>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup *ngIf=\"columns\">\n        <col *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\" />\n        <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          <th *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\"></th>\n          <th\n            #colControl\n            class=\"the-table-col-controls\"\n            *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedColumnsIndex.includes(i),\n              dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n            }\"\n            (mousedown)=\"onColMousedown($event, i)\"\n          >\n            <the-table-insert-mark\n              *ngIf=\"(isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !isMobileMode\"\n              type=\"column\"\n              [at]=\"i + 1\"\n              [tableStore]=\"tableStore\"\n              [parentElement]=\"colControl\"\n            >\n            </the-table-insert-mark>\n          </th>\n        </tr>\n      </thead>\n      <tbody #tbody>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n      </tbody>\n      <div\n        *ngIf=\"!element?.options?.headerColumn\"\n        #headerRowLeftShadow\n        class=\"header-row-shadow header-row-left-shadow\"\n        contenteditable=\"false\"\n      ></div>\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { kind: "component", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore", "parentElement"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table, [theTable]', providers: [
                         TableStore,
@@ -13892,116 +14082,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                 args: ['mousedown', ['$event']]
             }] } });
 
-/**
- * Clear the content of the given node
- */
-function clearTableNode(opts, editor, isTopToBot) {
-    const { selection } = editor;
-    const element = createTablePosition(editor, selection.focus.path);
-    const rowIndex = element.getRowIndex();
-    const colIndex = element.getColumnIndex();
-    const removeRow = isTopToBot ? 0 : rowIndex + 1;
-    for (let i = 0; i < element.getWidth(); i++) {
-        const inColRange = Range.includes(selection, [...element.tableEntry[1], rowIndex, i]);
-        if (inColRange && i !== colIndex) {
-            Transforms.removeNodes(editor, { at: [...element.tableEntry[1], rowIndex, i] });
-            Transforms.insertNodes(editor, createCell(opts), { at: [...element.tableEntry[1], rowIndex, i] });
-        }
-    }
-    for (let i = 0; i < element.getHeight(); i++) {
-        const inRowRange = Range.includes(selection, [...element.tableEntry[1], i]);
-        if (inRowRange && i !== rowIndex) {
-            Transforms.removeNodes(editor, { at: [...element.tableEntry[1], removeRow] });
-        }
-    }
-}
-
-function calculateAnchorPositionInCell(editor) {
-    let isFirstLine = false;
-    let isLastLine = false;
-    const anchorBlock$1 = anchorBlock(editor);
-    const anchorBlockPath = findPath(editor, anchorBlock$1);
-    const anchorBlockDom = AngularEditor.toDOMNode(editor, anchorBlock$1);
-    const valueRangeRect = anchorBlockDom.getBoundingClientRect();
-    const anchorBlockHeight = window.getComputedStyle(anchorBlockDom).lineHeight;
-    const nativeSelection = window.getSelection();
-    const nativeRange = nativeSelection && nativeSelection.getRangeAt(0);
-    const nativeRangeRect = nativeRange && nativeRange.getBoundingClientRect();
-    if (valueRangeRect && nativeRangeRect && anchorBlockHeight) {
-        const lineHeight = parseInt(anchorBlockHeight, 10);
-        isFirstLine = nativeRangeRect.top - valueRangeRect.top < lineHeight;
-        isLastLine = valueRangeRect.bottom - nativeRangeRect.bottom < lineHeight;
-    }
-    return {
-        isFirstLine,
-        isLastLine,
-        anchorBlockPath
-    };
-}
-
-class TheTableRowComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr, renderer) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.renderer = renderer;
-        this.numberedColumn = false;
-        this.rowNumber = '';
-    }
-    onContextChange() {
-        super.onContextChange();
-        const path = TheEditor.findPath(this.editor, this.element);
-        const tablePosition = createTablePosition(this.editor, path.concat(0));
-        const rowIndex = tablePosition.getRowIndex();
-        if (rowIndex === 0) {
-            this.renderer.addClass(this.elementRef.nativeElement, 'the-sticky-row');
-        }
-        else {
-            this.renderer.removeClass(this.elementRef.nativeElement, 'the-sticky-row');
-        }
-        if (this.initialized) {
-            this.useHeight();
-        }
-        this.setNumberColumn(tablePosition, rowIndex);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.useHeight();
-    }
-    useHeight() {
-        if (this.element.height) {
-            this.height = this.element.height + 'px';
-        }
-    }
-    setNumberColumn(ps, rowIndex) {
-        const headerRow = isHeaderRow(ps.table);
-        this.numberedColumn = ps.table?.options?.numberedColumn;
-        this.rowNumber = headerRow && rowIndex === 0 ? '' : headerRow ? rowIndex : rowIndex + 1;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableRowComponent, selector: "tr[theTableRow]", host: { properties: { "style.height": "this.height" } }, usesInheritance: true, ngImport: i0, template: `
-        <td *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
-            {{ rowNumber }}
-        </td>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableRowComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'tr[theTableRow]',
-                    template: `
-        <td *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
-            {{ rowNumber }}
-        </td>
-        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { height: [{
-                type: HostBinding,
-                args: ['style.height']
-            }] } });
-
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -14152,10 +14232,10 @@ class TheColumnResizeOverlayHandleComponent {
         this.destroyed.next();
         this.destroyed.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", 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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheColumnResizeOverlayHandleComponent, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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: "16.2.4", ngImport: i0, type: TheColumnResizeOverlayHandleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColumnResizeOverlayHandleComponent, decorators: [{
             type: Component,
             args: [{
                     host: { class: 'the-table-resize-overlay-thumb' },
@@ -14311,10 +14391,10 @@ class ColumnResizingStore {
     popRow() {
         this.resizeRows.pop();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ColumnResizingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ColumnResizingStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ColumnResizingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ColumnResizingStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: ColumnResizingStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ColumnResizingStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -14964,10 +15044,10 @@ class TheTdComponent extends TheBaseElementComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", 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$1.Overlay }, { token: ColumnResizingStore }, { token: i2$1.ScrollDispatcher }, { token: TableFreezeColumnPipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", 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], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n  <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", 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$1.Overlay }, { token: ColumnResizingStore }, { token: i2$1.ScrollDispatcher }, { token: TableFreezeColumnPipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n  <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTdComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTdComponent, decorators: [{
             type: Component,
             args: [{ selector: 'td[theTd]', providers: [ColumnResizingStore], template: "<div #cellInner>\n  <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2$1.Overlay }, { type: ColumnResizingStore }, { type: i2$1.ScrollDispatcher }, { type: TableFreezeColumnPipe }]; }, propDecorators: { backgroundColor: [{
@@ -14984,36 +15064,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                 args: ['style.display']
             }] } });
 
-const normalizeTable = (table) => {
-    const normalizedNodes = [];
-    const rowHeight = table.children.length;
-    const columnWidth = table.children[0].children.length;
-    table.children.forEach((row, rowIndex) => {
-        row.children.forEach((cell, columnIndex) => {
-            // case 1
-            if (cell.colspan || cell.rowspan) {
-                const rowspan = cell.rowspan || 1;
-                const colspan = cell.colspan || 1;
-                if (rowspan > rowHeight - rowIndex) {
-                    cell.rowspan = rowHeight - rowIndex;
-                }
-                if (colspan > columnWidth - columnIndex) {
-                    cell.colspan = columnWidth - columnIndex;
-                }
-                return;
-            }
-            // case 2
-            if (cell.hidden && !normalizedNodes.includes(cell)) {
-                const origin = getOriginCell(table, rowIndex, columnIndex);
-                if (!origin) {
-                    delete table.children[rowIndex].children[columnIndex].hidden;
-                }
-            }
-        });
-    });
-    return table;
-};
-
 class TheTableToolbarItemComponent extends TheBaseToolbarItem {
     get isOpenTableSelect() {
         return this.tableSelectRef && this.tableSelectRef.componentInstance;
@@ -15056,8 +15106,8 @@ class TheTableToolbarItemComponent extends TheBaseToolbarItem {
         });
         return this.tableSelectRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
         <a
             href="javascript:;"
             class="link-with-down"
@@ -15073,7 +15123,7 @@ class TheTableToolbarItemComponent extends TheBaseToolbarItem {
         </a>
     `, isInline: true, dependencies: [{ kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-toolbar-item',
@@ -15098,6 +15148,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i2$1.Overlay }]; } });
 
+/**
+ * Clear the content of the given node
+ */
+function clearTableNode(opts, editor, isTopToBot) {
+    const { selection } = editor;
+    const element = createTablePosition(editor, selection.focus.path);
+    const rowIndex = element.getRowIndex();
+    const colIndex = element.getColumnIndex();
+    const removeRow = isTopToBot ? 0 : rowIndex + 1;
+    for (let i = 0; i < element.getWidth(); i++) {
+        const inColRange = Range.includes(selection, [...element.tableEntry[1], rowIndex, i]);
+        if (inColRange && i !== colIndex) {
+            Transforms.removeNodes(editor, { at: [...element.tableEntry[1], rowIndex, i] });
+            Transforms.insertNodes(editor, createCell(opts), { at: [...element.tableEntry[1], rowIndex, i] });
+        }
+    }
+    for (let i = 0; i < element.getHeight(); i++) {
+        const inRowRange = Range.includes(selection, [...element.tableEntry[1], i]);
+        if (inRowRange && i !== rowIndex) {
+            Transforms.removeNodes(editor, { at: [...element.tableEntry[1], removeRow] });
+        }
+    }
+}
+
 const isLegalTable = (editor, element, path) => {
     try {
         const nodePath = path || TheEditor.findPath(editor, element);
@@ -15110,6 +15184,36 @@ const isLegalTable = (editor, element, path) => {
     }
 };
 
+const normalizeTable = (table) => {
+    const normalizedNodes = [];
+    const rowHeight = table.children.length;
+    const columnWidth = table.children[0].children.length;
+    table.children.forEach((row, rowIndex) => {
+        row.children.forEach((cell, columnIndex) => {
+            // case 1
+            if (cell.colspan || cell.rowspan) {
+                const rowspan = cell.rowspan || 1;
+                const colspan = cell.colspan || 1;
+                if (rowspan > rowHeight - rowIndex) {
+                    cell.rowspan = rowHeight - rowIndex;
+                }
+                if (colspan > columnWidth - columnIndex) {
+                    cell.colspan = columnWidth - columnIndex;
+                }
+                return;
+            }
+            // case 2
+            if (cell.hidden && !normalizedNodes.includes(cell)) {
+                const origin = getOriginCell(table, rowIndex, columnIndex);
+                if (!origin) {
+                    delete table.children[rowIndex].children[columnIndex].hidden;
+                }
+            }
+        });
+    });
+    return table;
+};
+
 const withTable = (editor) => {
     const { deleteBackward, deleteForward, onKeydown, setFragmentData, insertData, normalizeNode, isBlockCard, renderElement, deleteCutData, isContainer, onChange, onClick } = editor;
     editor.deleteBackward = unit => {
@@ -15649,15 +15753,15 @@ class TheTodoItemComponent extends TheBaseElementComponent {
         }
         setNode(this.editor, { checked }, this.element);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTodoItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheTodoItemComponent, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass", "class.the-todo-item-selectable": "this.checkItemSelectable", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTodoItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheTodoItemComponent, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass", "class.the-todo-item-selectable": "this.checkItemSelectable", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `
         <span contenteditable="false" class="todo-item-status">
             <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
         </span>
         <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
     `, isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildren, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheTodoItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheTodoItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[theTodoItem]',
@@ -15922,8 +16026,8 @@ class TheInlineToolbarComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheInlineToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", 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
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheInlineToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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"
@@ -15931,7 +16035,7 @@ class TheInlineToolbarComponent {
         [isMore]="false"
     ></the-toolbar> `, isInline: true, dependencies: [{ kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheInlineToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheInlineToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-inline-toolbar',
@@ -16052,10 +16156,10 @@ class TheQuickInsertComponent {
             this.updateIconDisplay();
         }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], usesOnChanges: true, 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", dependencies: [{ kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], usesOnChanges: true, 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", dependencies: [{ kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
             type: Component,
             args: [{ selector: '[theQuickInsert]', 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" }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { className: [{
@@ -16443,8 +16547,8 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
             text
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheEditorComponent, deps: [{ token: i0.Injector }, { token: TheContextService }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i4.ThyIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated", theUploadingStatus: "theUploadingStatus" }, host: { properties: { "class.the-editor-readonly": "theOptions?.readonly", "class.the-mobile-editor": "isMobileMode" }, classAttribute: "the-editor" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheEditorComponent, deps: [{ token: i0.Injector }, { token: TheContextService }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i4.ThyIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated", theUploadingStatus: "theUploadingStatus" }, host: { properties: { "class.the-editor-readonly": "theOptions?.readonly", "class.the-mobile-editor": "isMobileMode" }, classAttribute: "the-editor" }, providers: [
             TheContextService,
             {
                 provide: NG_VALUE_ACCESSOR,
@@ -16453,7 +16557,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
             }
         ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n  *ngIf=\"!theOptions?.readonly && !theGlobalToolbar && !isMobileMode\"\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  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\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    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n  ></slate-editable>\n  <ng-container *ngIf=\"!isMobileMode\">\n    <the-inline-toolbar\n      *ngIf=\"!theOptions?.readonly && theOptions?.inlineToolbarVisible\"\n      [editor]=\"editor\"\n      [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div *ngIf=\"!theOptions?.readonly\" theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n  </ng-container>\n\n  <the-template #templateInstance></the-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.ThyImageGroupComponent, selector: "thy-image-group, [thyImageGroup]" }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-editor, theEditor', providers: [
                         TheContextService,
@@ -16499,11 +16603,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
 const ENTRY_COMMON_COMPONENTS = [TheColumnResizeOverlayHandleComponent];
 const DIRECTIVES = [TheColumnResizeDirective];
 class TheColumnResizeCommonModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: TheColumnResizeCommonModule, declarations: [TheColumnResizeOverlayHandleComponent], exports: [TheColumnResizeOverlayHandleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColumnResizeCommonModule }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: TheColumnResizeCommonModule, declarations: [TheColumnResizeOverlayHandleComponent], exports: [TheColumnResizeOverlayHandleComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColumnResizeCommonModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColumnResizeCommonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColumnResizeCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: ENTRY_COMMON_COMPONENTS,
@@ -16511,11 +16615,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
                 }]
         }] });
 class TheColumnSizeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColumnSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: TheColumnSizeModule, declarations: [TheColumnResizeDirective], imports: [OverlayModule, TheColumnResizeCommonModule], exports: [TheColumnResizeDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColumnSizeModule, imports: [OverlayModule, TheColumnResizeCommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColumnSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: TheColumnSizeModule, declarations: [TheColumnResizeDirective], imports: [OverlayModule, TheColumnResizeCommonModule], exports: [TheColumnResizeDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColumnSizeModule, imports: [OverlayModule, TheColumnResizeCommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheColumnSizeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheColumnSizeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OverlayModule, TheColumnResizeCommonModule],
@@ -16596,8 +16700,8 @@ const PLUGIN_COMPONENTS = [
 ];
 const PIPES = [ElementStylePipe, ElementClassPipe, TableFreezeColumnPipe, TableFreezeRowPipe, PluginMenuPipe];
 class TheEditorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.4", ngImport: i0, type: TheEditorModule, declarations: [TheEditorComponent, ElementStylePipe, ElementClassPipe, TableFreezeColumnPipe, TableFreezeRowPipe, PluginMenuPipe, TheToolbarComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.5", ngImport: i0, type: TheEditorModule, declarations: [TheEditorComponent, ElementStylePipe, ElementClassPipe, TableFreezeColumnPipe, TableFreezeRowPipe, PluginMenuPipe, TheToolbarComponent,
             TheToolbarDropdownComponent,
             TheToolbarGroupComponent,
             TheToolbarItemComponent,
@@ -16668,7 +16772,7 @@ class TheEditorModule {
             TheListboxGroupDirective,
             TheListboxDirective,
             ThePreventDefaultDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheEditorModule, providers: [
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheEditorModule, providers: [
             {
                 provide: TheToolbarGroupToken,
                 useValue: TheToolbarGroupComponent
@@ -16676,7 +16780,7 @@ class TheEditorModule {
             THE_MODE_PROVIDER
         ], imports: [CommonModule, ScrollingModule, SlateModule, FormsModule, TETHYS, CodemirrorModule, TheColumnSizeModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TheEditorComponent, ...PIPES, ...COMPONENTS, ...PLUGIN_COMPONENTS],
@@ -16740,10 +16844,10 @@ class TheToolbarService {
             return item;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheToolbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: TheToolbarService, decorators: [{
             type: Injectable
         }] });