@worktile/theia 14.3.9 → 14.3.10

package/fesm2015/worktile-theia.mjs

@@ -2,7 +2,7 @@ import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, HostBinding, InjectionToken, Pipe, TemplateRef, ViewChild, Directive, Input, HostListener, ViewContainerRef, Inject, Injectable, ChangeDetectorRef, ElementRef, Optional, SkipSelf, ContentChildren, EventEmitter, Output, ViewChildren, forwardRef, NgModule } from '@angular/core';
-import * as i2$2 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from 'slate-angular';
 import { BaseElementComponent, BaseTextComponent, NODE_TO_PARENT, NODE_TO_INDEX, AngularEditor, hotkeys, IS_SAFARI, ELEMENT_TO_COMPONENT, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, getPlainText as getPlainText$1, EDITOR_TO_ELEMENT, withAngular, SlateModule } from 'slate-angular';
@@ -16,7 +16,7 @@ import * as i1$1 from 'ngx-tethys/popover';
 import { ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
 import * as i2$1 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
-import * as i3 from 'ngx-tethys/icon';
+import * as i4 from 'ngx-tethys/icon';
 import { ThyIconModule } from 'ngx-tethys/icon';
 import * as i5 from 'ngx-tethys/action';
 import { ThyActionModule } from 'ngx-tethys/action';
@@ -26,7 +26,7 @@ import * as i8 from 'ngx-tethys/tooltip';
 import { ThyTooltipModule } from 'ngx-tethys/tooltip';
 import * as i12 from 'ngx-tethys/divider';
 import { ThyDividerComponent, ThyDividerModule } from 'ngx-tethys/divider';
-import * as i2$3 from '@angular/cdk/scrolling';
+import * as i2$2 from '@angular/cdk/scrolling';
 import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling';
 import { mixinUnsubscribe, MixinBase, ScrollToService } from 'ngx-tethys/core';
 import { isKeyHotkey, isHotkey } from 'is-hotkey';
@@ -46,20 +46,22 @@ import marked from 'marked';
 import * as i1$3 from 'ngx-tethys/alert';
 import { ThyAlertModule } from 'ngx-tethys/alert';
 import { ThyUploadStatus } from 'ngx-tethys/upload';
-import * as i4 from 'ngx-tethys/image';
+import * as i4$1 from 'ngx-tethys/image';
 import { ThyImageModule } from 'ngx-tethys/image';
 import * as i9$1 from 'ngx-tethys/progress';
 import { ThyProgressModule } from 'ngx-tethys/progress';
 import isUrl from 'is-url';
 import * as i3$1 from 'ngx-tethys/form';
 import { ThyFormModule } from 'ngx-tethys/form';
-import * as i4$1 from 'ngx-tethys/shared';
+import * as i5$2 from 'ngx-tethys/shared';
 import { ThySharedModule } from 'ngx-tethys/shared';
 import * as i6$1 from 'ngx-tethys/button';
 import { ThyButtonModule } from 'ngx-tethys/button';
 import * as i10$1 from 'ngx-tethys/empty';
 import { ThyEmptyModule } from 'ngx-tethys/empty';
 import { DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ENTER } from '@angular/cdk/keycodes';
+import * as i7 from 'ngx-tethys/input-number';
+import { ThyInputNumberModule } from 'ngx-tethys/input-number';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
 import { ThyAutocompleteModule } from 'ngx-tethys/autocomplete';
@@ -98,9 +100,9 @@ class TheBaseElementComponent extends BaseElementComponent {
         this.nativeElement.classList.add(`slate-element-${this.element.type}`, blockClass);
     }
 }
-TheBaseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheBaseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheBaseElementComponent, selector: "TheBaseElementComponent", usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBaseElementComponent, decorators: [{
+TheBaseElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheBaseElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheBaseElementComponent, selector: "TheBaseElementComponent", usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'TheBaseElementComponent',
@@ -114,9 +116,9 @@ class TheDefaultElementComponent extends TheBaseElementComponent {
         return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
     }
 }
-TheDefaultElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheDefaultElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheDefaultElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheDefaultElementComponent, decorators: [{
+TheDefaultElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheDefaultElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheDefaultElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheDefaultElementComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[theDefaultElement]',
@@ -740,6 +742,68 @@ const initializeDefaultMenuIcons = (iconRegistry) => {
     }
 };
 
+const Colors = [
+    '#FFFFFF',
+    '#333333',
+    '#FF0100',
+    '#FFDA00',
+    '#A4E143',
+    '#38D9F0',
+    '#4EA8EE',
+    '#9570E7',
+    '#F3F3F3',
+    '#CCCCCC',
+    '#FEF3F1',
+    '#FEFCDA',
+    '#EDF6E8',
+    '#E6FBFA',
+    '#EBF4FC',
+    '#F1EDF7',
+    '#DDDDDD',
+    '#A5A5A5',
+    '#FCD5D0',
+    '#F9EDA6',
+    '#D4E9D7',
+    '#C8E6EA',
+    '#CCE0F2',
+    '#DAD6EA',
+    '#888888',
+    '#494949',
+    '#EE7976',
+    '#E7B323',
+    '#99C191',
+    '#79C6CE',
+    '#6EAAD7',
+    '#9D8EC2',
+    '#41464C',
+    '#000000',
+    '#BF1A1E',
+    '#AD720E',
+    '#1C7232',
+    '#1C7892',
+    '#18439D',
+    '#521B78'
+];
+const BackgroundColors = [
+    '#FFFFFF',
+    '#FACCCC',
+    '#FFEBCC',
+    '#FFFFCC',
+    '#CDE8CC',
+    '#CCE0F5',
+    '#EBD6FF',
+    '#F3F3F3',
+    '#F06665',
+    '#FFC266',
+    '#FFFF66',
+    '#66B966',
+    '#66A3E0',
+    '#C285FF'
+];
+const SpecialTextColor = '#333333';
+const SpecialBackgroundColor = '#FFFFFF';
+const TableHeaderBackgroundColor = '#F3F3F3';
+
 class ElementStylePipe {
     transform(element, align) {
         const style = {};
@@ -752,9 +816,9 @@ class ElementStylePipe {
         return style;
     }
 }
-ElementStylePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ElementStylePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ElementStylePipe, name: "elementStyle" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ElementStylePipe, decorators: [{
+ElementStylePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ElementStylePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: ElementStylePipe, name: "elementStyle" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ElementStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elementStyle'
@@ -770,9 +834,9 @@ class ElementClassPipe {
         return classStr;
     }
 }
-ElementClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ElementClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: ElementClassPipe, name: "elementClass" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ElementClassPipe, decorators: [{
+ElementClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ElementClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: ElementClassPipe, name: "elementClass" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ElementClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elementClass'
@@ -807,9 +871,9 @@ class TheTemplateComponent {
         };
     }
 }
-TheTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: "14.2.12", ngImport: i0, type: TheTemplateComponent, decorators: [{
+TheTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", 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: [{
@@ -875,9 +939,9 @@ class TheTextComponent extends BaseTextComponent {
         this.applyTextMark();
     }
 }
-TheTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTextComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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.SlateLeavesComponent, selector: "slate-leaves", inputs: ["context"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTextComponent, decorators: [{
+TheTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTextComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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.SlateLeavesComponent, selector: "slate-leaves", inputs: ["context"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theText]',
@@ -2525,9 +2589,9 @@ class TheBaseToolbarItem {
         }
     }
 }
-TheBaseToolbarItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBaseToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TheBaseToolbarItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TheBaseToolbarItem, inputs: { toolbarItem: "toolbarItem", editor: "editor" }, host: { properties: { "class.disabled": "this.disabledState", "class.active": "this.activeState" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBaseToolbarItem, decorators: [{
+TheBaseToolbarItem.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TheBaseToolbarItem.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TheBaseToolbarItem, inputs: { toolbarItem: "toolbarItem", editor: "editor" }, host: { properties: { "class.disabled": "this.disabledState", "class.active": "this.activeState" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseToolbarItem, decorators: [{
             type: Directive
         }], propDecorators: { toolbarItem: [{
                 type: Input
@@ -2561,9 +2625,9 @@ class TheBaseToolbarDropdown extends TheBaseToolbarItem {
         }
     }
 }
-TheBaseToolbarDropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBaseToolbarDropdown, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TheBaseToolbarDropdown.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TheBaseToolbarDropdown, inputs: { menus: "menus", mode: "mode", dropdownItemKey: "dropdownItemKey" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBaseToolbarDropdown, decorators: [{
+TheBaseToolbarDropdown.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseToolbarDropdown, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+TheBaseToolbarDropdown.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TheBaseToolbarDropdown, inputs: { menus: "menus", mode: "mode", dropdownItemKey: "dropdownItemKey" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseToolbarDropdown, decorators: [{
             type: Directive
         }], propDecorators: { menus: [{
                 type: Input
@@ -2688,9 +2752,9 @@ class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
             .withPositions([bottomPosition, topPosition]);
     }
 }
-TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { itemMousedownHandle: "itemMousedownHandle" }, 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: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: i5.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: "14.2.12", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
+TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { itemMousedownHandle: "itemMousedownHandle" }, 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: i5.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: "14.2.0", 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: [{
@@ -2734,8 +2798,8 @@ class TheToolbarItemComponent extends TheBaseToolbarItem {
         (_d = this.toolbarItem) === null || _d === void 0 ? void 0 : _d.execute(this.editor);
     }
 }
-TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheToolbarItemComponent, selector: "the-toolbar-item", host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
+TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheToolbarItemComponent, selector: "the-toolbar-item", host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
         <a
             href="javascript:;"
             thyAction
@@ -2749,7 +2813,7 @@ TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         ></a>
         <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: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-toolbar-item',
@@ -3003,9 +3067,9 @@ class TheToolbarComponent {
         return TheToolbarItemComponent;
     }
 }
-TheToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: "14.2.12", ngImport: i0, type: TheToolbarComponent, decorators: [{
+TheToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component });
+TheToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: TheToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar', host: {
                         class: 'the-toolbar-container d-flex align-items-center'
@@ -3081,9 +3145,9 @@ class TheContextService {
         this.uploadingFiles.splice(this.uploadingFiles.findIndex(item => item.url === file.url), 1);
     }
 }
-TheContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-TheContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheContextService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheContextService, decorators: [{
+TheContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+TheContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheContextService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheContextService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
@@ -3163,9 +3227,9 @@ class TheColorSelectComponent {
         this.popoverRef.close();
     }
 }
-TheColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColorSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", 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: "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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i5$1.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColorSelectComponent, decorators: [{
+TheColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColorSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", 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: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.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.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColorSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-color-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { selectedColor: [{
@@ -3230,9 +3294,9 @@ class TheColorSelectService {
         }
     }
 }
-TheColorSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColorSelectService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable });
-TheColorSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColorSelectService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColorSelectService, decorators: [{
+TheColorSelectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColorSelectService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable });
+TheColorSelectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColorSelectService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColorSelectService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }]; } });
 
@@ -3270,6 +3334,13 @@ class TableOptions {
         this.typeContent = typeContent;
     }
 }
+var TableInsertType;
+(function (TableInsertType) {
+    TableInsertType["insertRowsUp"] = "insert-rows-up";
+    TableInsertType["insertRowsDown"] = "insert-rows-down";
+    TableInsertType["insertColumnsLeft"] = "insert-columns-left";
+    TableInsertType["insertColumnsRight"] = "insert-columns-right";
+})(TableInsertType || (TableInsertType = {}));
 
 /**
  * Create a new cell
@@ -3579,6 +3650,25 @@ function isSelectionInTable(opts, editor) {
     }
     return isRangeInTable(opts, editor, editor.selection);
 }
+/**
+ * Whether the cells passed in can form a rectangle
+ * @param cells
+ * @returns boolean
+ */
+function isRectangularInTableCells(cells) {
+    const { row, col } = cells[0];
+    let maxCol = col;
+    let minCol = col;
+    let maxRow = row;
+    let minRow = row;
+    for (const cell of cells) {
+        maxCol = cell.col > maxCol ? cell.col : maxCol;
+        minCol = cell.col < minCol ? cell.col : minCol;
+        maxRow = cell.row > maxRow ? cell.row : maxRow;
+        minRow = cell.row < minRow ? cell.row : minRow;
+    }
+    return (maxRow + 1 - minRow) * (maxCol + 1 - minCol) === cells.length;
+}
 
 function calcSpanForRow(table, targetIndex) {
     const rowspans = [];
@@ -3653,125 +3743,6 @@ function isInside(cellRect, rowIndex, columnIndex) {
     return false;
 }
 
-function addColumns(table, columnsCount, insertIndex) {
-    if (table.columns.length < columnsCount) {
-        if (!insertIndex && insertIndex !== 0) {
-            insertIndex = table.columns.length;
-        }
-        const opts = new TableOptions();
-        let columns = table.columns.slice(0, columnsCount).map(item => {
-            return { width: item.width };
-        });
-        const preTotalWidth = table.columns.reduce((prevValue, column) => {
-            return prevValue + column.width;
-        }, 0);
-        for (let i = 0; i < columnsCount - table.columns.length; i++) {
-            columns.splice(insertIndex, 0, { width: opts.defaultWidth });
-        }
-        const currentTotalWidth = columns.reduce((prevValue, column) => {
-            return prevValue + column.width;
-        }, 0);
-        const percentage = preTotalWidth / currentTotalWidth;
-        return columns.map((column, index) => {
-            const width = Math.round(column.width * percentage > opts.minWidthPx ? column.width * percentage : opts.minWidthPx);
-            return { width };
-        });
-    }
-    return table.columns;
-}
-
-/**
- * Insert a new column in current table
- */
-function insertColumn(opts, editor, count = 1, at, // Column index
-getCell) {
-    const { selection } = editor;
-    const { anchor: { path } } = selection;
-    const tablePosition = TablePosition.create(opts, editor, path);
-    const { table, tableEntry } = tablePosition;
-    const insertColumnIndex = typeof at === 'undefined' ? tablePosition.getColumnIndex() + 1 : at;
-    // Insert the new cell
-    Editor.withoutNormalizing(editor, () => {
-        const colspan = calcSpanForColumn(table, insertColumnIndex);
-        for (let i = 0; i < count; i++) {
-            table.children.forEach((row, rowIndex) => {
-                const isInside = colspan[rowIndex];
-                const newCell = getCell ? getCell(insertColumnIndex, rowIndex) : createCell(opts);
-                if (isInside) {
-                    newCell.hidden = true;
-                    const dirtyCell = row.children.find((cell, columnIndex) => !cell.hidden &&
-                        columnIndex < insertColumnIndex &&
-                        cell.colspan &&
-                        cell.colspan + columnIndex > insertColumnIndex);
-                    if (dirtyCell) {
-                        Transforms.setNodes(editor, { colspan: dirtyCell.colspan + 1 }, {
-                            at: tablePosition.tableEntry[1].concat(rowIndex).concat(row.children.indexOf(dirtyCell))
-                        });
-                    }
-                }
-                Transforms.insertNodes(editor, [newCell], {
-                    at: tablePosition.tableEntry[1].concat(rowIndex).concat(insertColumnIndex)
-                });
-            });
-        }
-        if (table.columns) {
-            Transforms.setNodes(editor, { columns: addColumns(table, table.columns.length + 1, insertColumnIndex) }, { at: tableEntry[1] });
-        }
-    });
-}
-/**
- * Insert new column in the row
- */
-function insertColumnAtRow(opts, editor, count = 1, tableEntry, rowIndex, columnIndex, getCell) {
-    Editor.withoutNormalizing(editor, () => {
-        for (let i = 0; i < count; i++) {
-            const newCell = getCell ? getCell(columnIndex, rowIndex) : createCell(opts);
-            Transforms.insertNodes(editor, [newCell], {
-                at: tableEntry[1].concat([rowIndex, columnIndex])
-            });
-        }
-    });
-}
-
-/**
- * Insert a new row in current table
- */
-function insertRow(opts, editor, count = 1, at // row index
-) {
-    const tablePosition = TablePosition.create(opts, editor, editor.selection.anchor.path);
-    const { table, row } = tablePosition;
-    // Create a new row with the right count of cells
-    const columns = table.children[0].children.length;
-    const newRows = [];
-    const rowIndex = tablePosition.getRowIndex();
-    const insertRowIndex = typeof at === 'undefined' ? rowIndex + 1 : at;
-    for (let i = 0; i < count; i++) {
-        const newRow = createRow(opts, columns);
-        newRows.push(newRow);
-    }
-    if (newRows.length === 1) {
-        const rowspan = calcSpanForRow(table, insertRowIndex);
-        newRows[0].children.forEach((cell, columnIndex) => {
-            const isInside = rowspan[columnIndex];
-            if (isInside) {
-                cell.hidden = true;
-                const dirtyRow = table.children.find((row, rowIndex) => !row.children[columnIndex].hidden &&
-                    rowIndex < insertRowIndex &&
-                    row.children[columnIndex].rowspan &&
-                    row.children[columnIndex].rowspan + rowIndex > insertRowIndex);
-                if (dirtyRow) {
-                    Transforms.setNodes(editor, { rowspan: dirtyRow.children[columnIndex].rowspan + 1 }, {
-                        at: tablePosition.tableEntry[1].concat(table.children.indexOf(dirtyRow)).concat(columnIndex)
-                    });
-                }
-            }
-        });
-    }
-    Transforms.insertNodes(editor, newRows, {
-        at: tablePosition.tableEntry[1].concat(insertRowIndex)
-    });
-}
-
 const setMarks = (editor, marks, at) => {
     Transforms.setNodes(editor, marks, {
         at,
@@ -4017,85 +3988,146 @@ function insertTable(opts, editor, rows = 3, columns = 3, getCellContent) {
     insertElements(editor, table);
 }
 
+function getInsertRowState(opts, editor, count = 1, at) {
+    const tablePosition = TablePosition.create(opts, editor, editor.selection.anchor.path);
+    let table = tablePosition.table;
+    let tableEntry = tablePosition.tableEntry;
+    // Create a new row with the right count of cells
+    const columns = table.children[0].children.length;
+    const rowIndex = tablePosition.getRowIndex();
+    const insertRowIndex = typeof at === 'undefined' ? rowIndex + 1 : at;
+    return { table, tableEntry, columns, rowIndex, insertRowIndex };
+}
+function packNewRow(opts, editor, count = 1, at) {
+    const { table, tableEntry, columns, insertRowIndex } = getInsertRowState(opts, editor, count, at);
+    const rowspan = calcSpanForRow(table, insertRowIndex);
+    const newRow = createRow(opts, columns);
+    newRow.children.forEach((cell, columnIndex) => {
+        const isInside = rowspan[columnIndex];
+        if (isInside) {
+            cell.hidden = true;
+            const dirtyRow = table.children.find((row, rowIndex) => !row.children[columnIndex].hidden &&
+                rowIndex < insertRowIndex &&
+                row.children[columnIndex].rowspan &&
+                row.children[columnIndex].rowspan + rowIndex > insertRowIndex);
+            if (dirtyRow) {
+                Transforms.setNodes(editor, { rowspan: dirtyRow.children[columnIndex].rowspan + 1 }, {
+                    at: tableEntry[1].concat(table.children.indexOf(dirtyRow)).concat(columnIndex)
+                });
+            }
+        }
+    });
+    return newRow;
+}
 /**
- * Clear the content of the given cell
+ * Insert a new row in current table
  */
-function clearCell(opts, editor, cellEntry) {
-    Transforms.removeNodes(editor, { at: cellEntry[1] });
-    const cellNode = Object.assign(Object.assign({}, cellEntry[0]), createCell(opts));
-    Transforms.insertNodes(editor, Object.assign({}, cellNode), { at: cellEntry[1] });
+function insertRow(opts, editor, count = 1, at // row index
+) {
+    const { tableEntry, insertRowIndex } = getInsertRowState(opts, editor, count, at);
+    const newRows = [];
+    for (let i = 0; i < count; i++) {
+        const newRow = packNewRow(opts, editor, count, at);
+        newRows.push(newRow);
+    }
+    Transforms.insertNodes(editor, newRows, {
+        at: tableEntry[1].concat(insertRowIndex)
+    });
 }
 
-function removeColumns(table, columnsCount, index) {
-    if (table.columns.length > columnsCount) {
-        let removeColumns = [];
-        if ((index && index > 0) || index === 0) {
-            removeColumns = table.columns.slice(index, index + 1);
-        }
-        else {
-            removeColumns = table.columns.slice(columnsCount);
+function addColumns(table, columnsCount, insertIndex) {
+    if (table.columns.length < columnsCount) {
+        if (!insertIndex && insertIndex !== 0) {
+            insertIndex = table.columns.length;
         }
-        if (removeColumns.length) {
-            const addWidth = removeColumns.reduce((totalWidth, cell) => {
-                return (totalWidth += cell.width);
-            }, 0) / columnsCount;
-            return table.columns
-                .filter(item => !removeColumns.includes(item))
-                .map(item => {
-                return { width: item.width + Math.round(addWidth) };
-            });
+        const opts = new TableOptions();
+        let columns = table.columns.slice(0, columnsCount).map(item => {
+            return { width: item.width };
+        });
+        const preTotalWidth = table.columns.reduce((prevValue, column) => {
+            return prevValue + column.width;
+        }, 0);
+        for (let i = 0; i < columnsCount - table.columns.length; i++) {
+            columns.splice(insertIndex, 0, { width: opts.defaultWidth });
         }
+        const currentTotalWidth = columns.reduce((prevValue, column) => {
+            return prevValue + column.width;
+        }, 0);
+        const percentage = preTotalWidth / currentTotalWidth;
+        return columns.map((column, index) => {
+            const width = Math.round(column.width * percentage > opts.minWidthPx ? column.width * percentage : opts.minWidthPx);
+            return { width };
+        });
     }
     return table.columns;
 }
 
-function removeColumn(opts, editor, selectColIndex) {
+/**
+ * Insert a new column in current table
+ */
+function insertColumn(opts, editor, count = 1, at, // Column index
+getCell) {
     const { selection } = editor;
     const { anchor: { path } } = selection;
     const tablePosition = TablePosition.create(opts, editor, path);
-    const { tableEntry, table, row, cellEntry: [cellNode, cellPath] } = tablePosition;
-    const rows = tableEntry[0].children;
-    selectColIndex = selectColIndex === undefined ? [...cellPath].pop() : selectColIndex;
+    let table = tablePosition.table;
+    let tableEntry = tablePosition.tableEntry;
+    const insertColumnIndex = typeof at === 'undefined' ? tablePosition.getColumnIndex() + 1 : at;
+    // Insert the new cell
     Editor.withoutNormalizing(editor, () => {
-        table.children.map((row, rowIndex) => {
-            const dirtyCell = row.children.find((cell, columnIndex) => !cell.hidden && columnIndex < selectColIndex && cell.colspan && cell.colspan + columnIndex > selectColIndex);
-            if (dirtyCell) {
-                const colspan = dirtyCell.colspan - 1 > 1 ? dirtyCell.colspan - 1 : null;
-                Transforms.setNodes(editor, { colspan }, {
-                    at: tablePosition.tableEntry[1].concat(rowIndex).concat(row.children.indexOf(dirtyCell))
-                });
-            }
-            const removeCell = row.children[selectColIndex];
-            const nextCell = row.children[selectColIndex + 1];
-            if (nextCell && nextCell.hidden && removeCell.colspan > 1) {
-                const colspan = removeCell.colspan - 1 > 1 ? removeCell.colspan - 1 : null;
-                Transforms.setNodes(editor, { colspan, rowspan: removeCell.rowspan || null, hidden: null }, { at: tablePosition.tableEntry[1].concat(rowIndex).concat(row.children.indexOf(nextCell)) });
-            }
-        });
-    });
-    // Remove the cell from every row
-    Editor.withoutNormalizing(editor, () => {
-        if (tablePosition.getWidth() > 1) {
-            rows.forEach((row, rowIndex) => {
-                const at = tableEntry[1].concat([rowIndex, selectColIndex]);
-                Transforms.removeNodes(editor, { at });
+        const colspan = calcSpanForColumn(table, insertColumnIndex);
+        for (let i = 0; i < count; i++) {
+            table.children.forEach((row, rowIndex) => {
+                const isInside = colspan[rowIndex];
+                const newCell = getCell ? getCell(insertColumnIndex, rowIndex) : createCell(opts);
+                if (isInside) {
+                    newCell.hidden = true;
+                    const dirtyCell = row.children.find((cell, columnIndex) => !cell.hidden &&
+                        columnIndex < insertColumnIndex &&
+                        cell.colspan &&
+                        cell.colspan + columnIndex > insertColumnIndex);
+                    if (dirtyCell) {
+                        Transforms.setNodes(editor, { colspan: dirtyCell.colspan + 1 }, {
+                            at: tablePosition.tableEntry[1].concat(rowIndex).concat(row.children.indexOf(dirtyCell))
+                        });
+                        const position = TablePosition.create(opts, editor, path);
+                        table = position.table;
+                        tableEntry = position.tableEntry;
+                    }
+                }
+                Transforms.insertNodes(editor, [newCell], {
+                    at: tablePosition.tableEntry[1].concat(rowIndex).concat(insertColumnIndex)
+                });
             });
-            if (table.columns) {
-                Transforms.setNodes(editor, { columns: removeColumns(table, table.columns.length - 1, selectColIndex) }, { at: tableEntry[1] });
-            }
         }
-        else {
-            // If last column, clear text in cells instead
-            rows.forEach((row, rowIndex) => {
-                row.children.forEach((cell, cellIndex) => {
-                    const at = tableEntry[1].concat([rowIndex, cellIndex]);
-                    clearCell(opts, editor, [cell, at]);
-                });
+        if (table.columns) {
+            Transforms.setNodes(editor, { columns: addColumns(table, table.columns.length + 1, insertColumnIndex) }, { at: tableEntry[1] });
+        }
+    });
+}
+/**
+ * Insert new column in the row
+ */
+function insertColumnAtRow(opts, editor, count = 1, tableEntry, rowIndex, columnIndex, getCell) {
+    Editor.withoutNormalizing(editor, () => {
+        for (let i = 0; i < count; i++) {
+            const newCell = getCell ? getCell(columnIndex, rowIndex) : createCell(opts);
+            Transforms.insertNodes(editor, [newCell], {
+                at: tableEntry[1].concat([rowIndex, columnIndex])
             });
         }
     });
 }
 
+/**
+ * Clear the content of the given cell
+ */
+function clearCell(opts, editor, cellEntry) {
+    Transforms.removeNodes(editor, { at: cellEntry[1] });
+    const cellNode = Object.assign(Object.assign({}, cellEntry[0]), createCell(opts));
+    Transforms.insertNodes(editor, Object.assign({}, cellNode), { at: cellEntry[1] });
+}
+
 function removeRow(opts, editor, selectRowIndex) {
     const { selection } = editor;
     const { anchor: { path } } = selection;
@@ -4143,6 +4175,76 @@ function removeRow(opts, editor, selectRowIndex) {
     }
 }
 
+function removeColumns(table, columnsCount, index) {
+    if (table.columns.length > columnsCount) {
+        let removeColumns = [];
+        if ((index && index > 0) || index === 0) {
+            removeColumns = table.columns.slice(index, index + 1);
+        }
+        else {
+            removeColumns = table.columns.slice(columnsCount);
+        }
+        if (removeColumns.length) {
+            const addWidth = removeColumns.reduce((totalWidth, cell) => {
+                return (totalWidth += cell.width);
+            }, 0) / columnsCount;
+            return table.columns
+                .filter(item => !removeColumns.includes(item))
+                .map(item => {
+                return { width: item.width + Math.round(addWidth) };
+            });
+        }
+    }
+    return table.columns;
+}
+
+function removeColumn(opts, editor, selectColIndex) {
+    const { selection } = editor;
+    const { anchor: { path } } = selection;
+    const tablePosition = TablePosition.create(opts, editor, path);
+    const { tableEntry, table, row, cellEntry: [cellNode, cellPath] } = tablePosition;
+    const rows = tableEntry[0].children;
+    selectColIndex = selectColIndex === undefined ? [...cellPath].pop() : selectColIndex;
+    Editor.withoutNormalizing(editor, () => {
+        table.children.map((row, rowIndex) => {
+            const dirtyCell = row.children.find((cell, columnIndex) => !cell.hidden && columnIndex < selectColIndex && cell.colspan && cell.colspan + columnIndex > selectColIndex);
+            if (dirtyCell) {
+                const colspan = dirtyCell.colspan - 1 > 1 ? dirtyCell.colspan - 1 : null;
+                Transforms.setNodes(editor, { colspan }, {
+                    at: tablePosition.tableEntry[1].concat(rowIndex).concat(row.children.indexOf(dirtyCell))
+                });
+            }
+            const removeCell = row.children[selectColIndex];
+            const nextCell = row.children[selectColIndex + 1];
+            if (nextCell && nextCell.hidden && removeCell.colspan > 1) {
+                const colspan = removeCell.colspan - 1 > 1 ? removeCell.colspan - 1 : null;
+                Transforms.setNodes(editor, { colspan, rowspan: removeCell.rowspan || null, hidden: null }, { at: tablePosition.tableEntry[1].concat(rowIndex).concat(row.children.indexOf(nextCell)) });
+            }
+        });
+    });
+    // Remove the cell from every row
+    Editor.withoutNormalizing(editor, () => {
+        if (tablePosition.getWidth() > 1) {
+            rows.forEach((row, rowIndex) => {
+                const at = tableEntry[1].concat([rowIndex, selectColIndex]);
+                Transforms.removeNodes(editor, { at });
+            });
+            if (table.columns) {
+                Transforms.setNodes(editor, { columns: removeColumns(table, table.columns.length - 1, selectColIndex) }, { at: tableEntry[1] });
+            }
+        }
+        else {
+            // If last column, clear text in cells instead
+            rows.forEach((row, rowIndex) => {
+                row.children.forEach((cell, cellIndex) => {
+                    const at = tableEntry[1].concat([rowIndex, cellIndex]);
+                    clearCell(opts, editor, [cell, at]);
+                });
+            });
+        }
+    });
+}
+
 const NextPath = (path) => {
     const [last, ...rest] = [...path].reverse();
     return [...rest.reverse(), last + 1];
@@ -4193,6 +4295,81 @@ function removeTable(opts, editor) {
     }
 }
 
+const IndentEditor = {
+    getAllowedTypes(editor) {
+        var _a, _b;
+        return (_b = (_a = getPluginOptions(editor, PluginKeys.indent)) === null || _a === void 0 ? void 0 : _a.allowedTypes) !== null && _b !== void 0 ? _b : [];
+    },
+    setIndent(editor) {
+        var _a, _b;
+        if (TableEditor.setIndent(editor)) {
+            return;
+        }
+        const allowedTypes = IndentEditor.getAllowedTypes(editor);
+        const maxIndent = (_b = (_a = getPluginOptions(editor, PluginKeys.indent)) === null || _a === void 0 ? void 0 : _a.maxIndent) !== null && _b !== void 0 ? _b : [];
+        const nodes = Array.from(Editor.nodes(editor, {
+            mode: 'highest',
+            match: n => Element$1.isElement(n) && allowedTypes.includes(n.type)
+        }));
+        const [startBlock] = nodes;
+        if (startBlock) {
+            let [{ indent }] = startBlock;
+            indent = indent ? ++indent : 1;
+            if (indent <= maxIndent) {
+                Transforms.setNodes(editor, { indent }, {
+                    mode: 'highest',
+                    match: n => Element$1.isElement(n) && allowedTypes.includes(n.type)
+                });
+            }
+        }
+    },
+    cancelIndent(editor) {
+        if (TableEditor.cancelIndent(editor)) {
+            return;
+        }
+        const allowedTypes = IndentEditor.getAllowedTypes(editor);
+        const nodes = Array.from(Editor.nodes(editor, {
+            mode: 'highest',
+            match: n => Element$1.isElement(n) && allowedTypes.includes(n.type)
+        }));
+        const [startBlock] = nodes;
+        if (startBlock) {
+            let [{ indent }] = startBlock;
+            indent = indent ? --indent : 0;
+            Transforms.setNodes(editor, { indent }, {
+                mode: 'highest',
+                match: n => Element$1.isElement(n) && allowedTypes.includes(n.type)
+            });
+        }
+    },
+    setTextIndent(editor, kinds, textIndent) {
+        Transforms.setNodes(editor, { textIndent }, {
+            mode: 'highest',
+            match: node => Element$1.isElement(node) && kinds.includes(node.type)
+        });
+    },
+    cancelTextIntent(editor, event, anchorBlock, kinds) {
+        let { textIndent, indent } = anchorBlock;
+        if (textIndent > 2) {
+            event.preventDefault();
+            textIndent -= 2;
+            IndentEditor.setTextIndent(editor, kinds, textIndent);
+            return true;
+        }
+        if (textIndent === 2) {
+            event.preventDefault();
+            IndentEditor.setTextIndent(editor, kinds, null);
+            return true;
+        }
+        if (indent) {
+            event.preventDefault();
+            IndentEditor.cancelIndent(editor);
+            return true;
+        }
+        return false;
+    }
+};
+
 const TableEditor = {
     insertTable(editor, optionsParam) {
         const opts = new TableOptions(optionsParam);
@@ -4353,12 +4530,75 @@ const TableEditor = {
         const [tableRowEntry] = Editor.nodes(editor, { match: (n) => n.type === ElementKinds.tableRow });
         return tableRowEntry && tableRowEntry[0] && tableRowEntry[0].header;
     },
+    isActiveHeaderRow(editor) {
+        const tableNode = getAboveByType(editor, ElementKinds.table);
+        const cells = TableEditor.getSelectedCells(editor);
+        const { row, col } = cells[0];
+        const cellPath = [...tableNode[1], row, col];
+        const cellRange = { anchor: Editor.start(editor, cellPath), focus: Editor.end(editor, cellPath) };
+        const [headerRow] = Editor.nodes(editor, {
+            match: n => Element$1.isElement(n) && n.type === ElementKinds.tableRow && n.header,
+            at: cellRange
+        });
+        return headerRow;
+    },
+    isActiveHeaderColumn(editor) {
+        var _a, _b;
+        const [table] = Editor.nodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.table });
+        const { anchor, focus } = editor.selection;
+        const opts = new TableOptions();
+        const anchorPosition = TablePosition.create(opts, editor, anchor.path);
+        const focusPosition = TablePosition.create(opts, editor, focus.path);
+        const anchorIndex = anchorPosition.getColumnIndex();
+        const focusIndex = focusPosition.getColumnIndex();
+        const isContainHeaderColumn = anchorIndex === 0 || focusIndex === 0;
+        const isHeaderColumn = table && table[0] && ((_b = (_a = table[0]) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.headerColumn);
+        return isHeaderColumn && isContainHeaderColumn;
+    },
     selectOriginCell(editor, table, rowIndex, columnIndex, isStart) {
         const origin = getOriginCell(table, rowIndex, columnIndex);
         if (origin) {
             const path = AngularEditor.findPath(editor, origin);
             Transforms.select(editor, isStart ? Editor.start(editor, path) : Editor.end(editor, path));
         }
+    },
+    setIndent(editor) {
+        return TableEditor.handleSelectedCells(editor, (cellPath, cellRange) => {
+            var _a, _b;
+            const allowedTypes = IndentEditor.getAllowedTypes(editor);
+            const maxIndent = (_b = (_a = getPluginOptions(editor, PluginKeys.indent)) === null || _a === void 0 ? void 0 : _a.maxIndent) !== null && _b !== void 0 ? _b : [];
+            const children = getNode(editor, cellPath).children;
+            if (children.length) {
+                children.forEach((child, index) => {
+                    let { indent } = child;
+                    indent = indent ? ++indent : 1;
+                    if (indent <= maxIndent) {
+                        Transforms.setNodes(editor, { indent }, {
+                            at: [...cellPath, index],
+                            mode: 'highest',
+                            match: n => Element$1.isElement(n) && allowedTypes.includes(n.type)
+                        });
+                    }
+                });
+            }
+        });
+    },
+    cancelIndent(editor) {
+        return TableEditor.handleSelectedCells(editor, (cellPath, cellRange) => {
+            const allowedTypes = IndentEditor.getAllowedTypes(editor);
+            const children = getNode(editor, cellPath).children;
+            if (children.length) {
+                children.forEach((child, index) => {
+                    let { indent } = child;
+                    indent = indent ? --indent : 0;
+                    Transforms.setNodes(editor, { indent }, {
+                        at: [...cellPath, index],
+                        mode: 'highest',
+                        match: n => Element$1.isElement(n) && allowedTypes.includes(n.type)
+                    });
+                });
+            }
+        });
     }
 };
 
@@ -5125,9 +5365,9 @@ class TheBlockquoteComponent extends TheBaseElementComponent {
         this.cdr = cdr;
     }
 }
-TheBlockquoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBlockquoteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheBlockquoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBlockquoteComponent, decorators: [{
+TheBlockquoteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBlockquoteComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheBlockquoteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBlockquoteComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'blockquote[theBlockquote]',
@@ -5215,9 +5455,9 @@ class ThePreventDefaultDirective {
         event.preventDefault();
     }
 }
-ThePreventDefaultDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ThePreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ThePreventDefaultDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", host: { listeners: { "mousedown": "mousedown($event)" } }, exportAs: ["thePreventDefault"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ThePreventDefaultDirective, decorators: [{
+ThePreventDefaultDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ThePreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ThePreventDefaultDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", host: { listeners: { "mousedown": "mousedown($event)" } }, exportAs: ["thePreventDefault"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ThePreventDefaultDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thePreventDefault]',
@@ -5446,9 +5686,9 @@ class TheCodeComponent extends TheBaseElementComponent {
         this.destroy$.complete();
     }
 }
-TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_MODE_TOKEN }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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\"></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.SlateChildrenComponent, 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", "thyResizeEnd", "thyResizeStart"] }, { kind: "component", type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: i10.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.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", inputs: ["itemMousedownHandle"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheCodeComponent, decorators: [{
+TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_MODE_TOKEN }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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\"></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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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", "thyResizeEnd", "thyResizeStart"] }, { kind: "component", type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: i10.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.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", inputs: ["itemMousedownHandle"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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\"></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 () {
@@ -5516,68 +5756,6 @@ const createCodePlugin = createPluginFactory({
     }
 });
 
-const Colors = [
-    '#FFFFFF',
-    '#333333',
-    '#FF0100',
-    '#FFDA00',
-    '#A4E143',
-    '#38D9F0',
-    '#4EA8EE',
-    '#9570E7',
-    '#F3F3F3',
-    '#CCCCCC',
-    '#FEF3F1',
-    '#FEFCDA',
-    '#EDF6E8',
-    '#E6FBFA',
-    '#EBF4FC',
-    '#F1EDF7',
-    '#DDDDDD',
-    '#A5A5A5',
-    '#FCD5D0',
-    '#F9EDA6',
-    '#D4E9D7',
-    '#C8E6EA',
-    '#CCE0F2',
-    '#DAD6EA',
-    '#888888',
-    '#494949',
-    '#EE7976',
-    '#E7B323',
-    '#99C191',
-    '#79C6CE',
-    '#6EAAD7',
-    '#9D8EC2',
-    '#41464C',
-    '#000000',
-    '#BF1A1E',
-    '#AD720E',
-    '#1C7232',
-    '#1C7892',
-    '#18439D',
-    '#521B78'
-];
-const BackgroundColors = [
-    '#FFFFFF',
-    '#FACCCC',
-    '#FFEBCC',
-    '#FFFFCC',
-    '#CDE8CC',
-    '#CCE0F5',
-    '#EBD6FF',
-    '#F3F3F3',
-    '#F06665',
-    '#FFC266',
-    '#FFFF66',
-    '#66B966',
-    '#66A3E0',
-    '#C285FF'
-];
-const SpecialTextColor = '#333333';
-const SpecialBackgroundColor = '#FFFFFF';
-const TableHeaderBackgroundColor = '#F3F3F3';
-
 const ColorEditor = {
     getActiveColor(editor, type) {
         var _a;
@@ -5681,8 +5859,8 @@ class TheColorToolbarItemComponent extends TheBaseToolbarItem {
         }
     }
 }
-TheColorToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColorToolbarItemComponent, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Component });
-TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: `
+TheColorToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColorToolbarItemComponent, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Component });
+TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheColorToolbarItemComponent, selector: "the-color-toolbar-item", host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: `
         <a
             href="javascript:;"
             thyAction
@@ -5699,8 +5877,8 @@ TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             ></thy-icon>
             <thy-icon class="link-down-icon font-size-sm text-desc ml-1" thyIconName="caret-down"></thy-icon>
         </a>
-    `, isInline: true, dependencies: [{ kind: "component", type: i3.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: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
+    `, 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: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-color-toolbar-item',
@@ -6561,9 +6739,9 @@ class TheConversionHintComponent {
         clearInterval(this.closeTimer);
     }
 }
-TheConversionHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheConversionHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheConversionHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: "14.2.12", ngImport: i0, type: TheConversionHintComponent, decorators: [{
+TheConversionHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheConversionHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheConversionHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: TheConversionHintComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-conversion-hint', host: {
                         class: 'the-conversion-hint'
@@ -6931,14 +7109,14 @@ class TheHrComponent extends TheBaseElementComponent {
         });
     }
 }
-TheHrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheHrComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheHrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0, template: `
+TheHrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheHrComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheHrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheHrComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheHrComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-hr, [theHr]',
@@ -7357,16 +7535,16 @@ class TheImageComponent extends TheBaseElementComponent {
         event.stopPropagation();
     }
 }
-TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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: i4.ThyImageService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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 }], 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.pointer]=\"!selection\">\n        <img\n            #img\n            thyImage\n            [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n            [class.image-collapsed]=\"selection && !uploading\"\n            class=\"main-image\"\n            (load)=\"imageLoaded($event)\"\n            (mousedown)=\"preventDefault($event)\"\n            [thySrc]=\"imageEntry.thumbUrl\"\n            [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n            [thyOriginSrc]=\"imageEntry.originUrl\"\n            [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n            [alt]=\"imageEntry.name\"\n        />\n        <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\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\"></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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i3.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.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheImageComponent, decorators: [{
+TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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: i4$1.ThyImageService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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 }], 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.pointer]=\"!selection\">\n        <img\n            #img\n            thyImage\n            [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n            [class.image-collapsed]=\"selection && !uploading\"\n            class=\"main-image\"\n            (load)=\"imageLoaded($event)\"\n            (mousedown)=\"preventDefault($event)\"\n            [thySrc]=\"imageEntry.thumbUrl\"\n            [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n            [thyOriginSrc]=\"imageEntry.originUrl\"\n            [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n            [alt]=\"imageEntry.name\"\n        />\n        <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\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\"></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.SlateChildrenComponent, 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"] }, { kind: "directive", type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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.pointer]=\"!selection\">\n        <img\n            #img\n            thyImage\n            [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n            [class.image-collapsed]=\"selection && !uploading\"\n            class=\"main-image\"\n            (load)=\"imageLoaded($event)\"\n            (mousedown)=\"preventDefault($event)\"\n            [thySrc]=\"imageEntry.thumbUrl\"\n            [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n            [thyOriginSrc]=\"imageEntry.originUrl\"\n            [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n            [alt]=\"imageEntry.name\"\n        />\n        <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n\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\"></thy-divider>\n        </ng-container>\n    </thy-actions>\n</ng-template>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [THE_UPLOAD_SERVICE_TOKEN]
-                    }] }, { type: i0.ChangeDetectorRef }, { type: TheContextService }, { type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: i4.ThyImageService }, { type: i0.ViewContainerRef }];
+                    }] }, { type: i0.ChangeDetectorRef }, { type: TheContextService }, { type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: i4$1.ThyImageService }, { type: i0.ViewContainerRef }];
     }, propDecorators: { imageContent: [{
                 type: ViewChild,
                 args: ['imageContent']
@@ -7444,76 +7622,6 @@ const createImagePlugin = createPluginFactory({
     }
 });
 
-const IndentEditor = {
-    getAllowedTypes(editor) {
-        var _a, _b;
-        return (_b = (_a = getPluginOptions(editor, PluginKeys.indent)) === null || _a === void 0 ? void 0 : _a.allowedTypes) !== null && _b !== void 0 ? _b : [];
-    },
-    setIndent(editor) {
-        var _a, _b;
-        const allowedTypes = IndentEditor.getAllowedTypes(editor);
-        const maxIndent = (_b = (_a = getPluginOptions(editor, PluginKeys.indent)) === null || _a === void 0 ? void 0 : _a.maxIndent) !== null && _b !== void 0 ? _b : [];
-        const nodes = Array.from(Editor.nodes(editor, {
-            mode: 'highest',
-            match: n => Element$1.isElement(n) && allowedTypes.includes(n.type)
-        }));
-        const [startBlock] = nodes;
-        if (startBlock) {
-            let [{ indent }] = startBlock;
-            indent = indent ? indent : 0;
-            indent += 1;
-            if (indent <= maxIndent) {
-                Transforms.setNodes(editor, { indent }, {
-                    mode: 'highest',
-                    match: n => Element$1.isElement(n) && allowedTypes.includes(n.type)
-                });
-            }
-        }
-    },
-    cancelIndent(editor) {
-        const allowedTypes = IndentEditor.getAllowedTypes(editor);
-        const nodes = Array.from(Editor.nodes(editor, {
-            mode: 'highest',
-            match: n => Element$1.isElement(n) && allowedTypes.includes(n.type)
-        }));
-        const [startBlock] = nodes;
-        if (startBlock) {
-            let [{ indent }] = startBlock;
-            indent = indent === 1 ? null : (indent -= 1);
-            Transforms.setNodes(editor, { indent }, {
-                mode: 'highest',
-                match: n => Element$1.isElement(n) && allowedTypes.includes(n.type)
-            });
-        }
-    },
-    setTextIndent(editor, kinds, textIndent) {
-        Transforms.setNodes(editor, { textIndent }, {
-            mode: 'highest',
-            match: node => Element$1.isElement(node) && kinds.includes(node.type)
-        });
-    },
-    cancelTextIntent(editor, event, anchorBlock, kinds) {
-        let { textIndent, indent } = anchorBlock;
-        if (textIndent > 2) {
-            event.preventDefault();
-            textIndent -= 2;
-            IndentEditor.setTextIndent(editor, kinds, textIndent);
-            return true;
-        }
-        if (textIndent === 2) {
-            event.preventDefault();
-            IndentEditor.setTextIndent(editor, kinds, null);
-            return true;
-        }
-        if (indent) {
-            event.preventDefault();
-            IndentEditor.cancelIndent(editor);
-            return true;
-        }
-        return false;
-    }
-};
-
 const onKeydownTextIndent = (editor, event, kinds, textIndentDisabled) => {
     const { selection } = editor;
     const isExpanded = Range.isExpanded(selection);
@@ -7529,6 +7637,9 @@ const onKeydownTextIndent = (editor, event, kinds, textIndentDisabled) => {
     const isStart = Editor.isStart(editor, selection.anchor, path);
     if (isKeyHotkey('Tab', event)) {
         event.preventDefault();
+        if (TableEditor.setIndent(editor)) {
+            return true;
+        }
         if (startBlock && (isExpanded || isStart)) {
             if (!editor.isVoid(block)) {
                 let { textIndent, type } = block;
@@ -7627,11 +7738,11 @@ class TheInlineCodeComponent extends TheBaseElementComponent {
         this.inlineChromiumBugfix = String.fromCodePoint(160);
     }
 }
-TheInlineCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheInlineCodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheInlineCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: `<span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
+TheInlineCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheInlineCodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheInlineCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheInlineCodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheInlineCodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theInlineCode]',
@@ -7805,9 +7916,9 @@ class TheLinkHoverComponent {
         event.stopPropagation();
     }
 }
-TheLinkHoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheLinkHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheLinkHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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\"></thy-divider>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n    <thy-divider class=\"mx-2\" [thyVertical]=\"true\"></thy-divider>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n", dependencies: [{ kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i12.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: "14.2.12", ngImport: i0, type: TheLinkHoverComponent, decorators: [{
+TheLinkHoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheLinkHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TheLinkHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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\"></thy-divider>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n    <thy-divider class=\"mx-2\" [thyVertical]=\"true\"></thy-divider>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n", dependencies: [{ kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i12.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: "14.2.0", 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\"></thy-divider>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n    <thy-divider class=\"mx-2\" [thyVertical]=\"true\"></thy-divider>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { link: [{
@@ -7889,9 +8000,9 @@ class TheLinkEditComponent {
         }
     }
 }
-TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i3$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i3$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i3$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: i4$1.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: i5$1.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: i6$1.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheLinkEditComponent, decorators: [{
+TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i3$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i3$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i3$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: i5$2.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { kind: "directive", type: i5$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { kind: "component", type: i6$1.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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: [{
@@ -8030,9 +8141,9 @@ class TheBaseLinkComponent extends TheBaseElementComponent {
         this.close(LinkCloseTypes.destroy);
     }
 }
-TheBaseLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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 });
-TheBaseLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBaseLinkComponent, decorators: [{
+TheBaseLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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 });
+TheBaseLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheBaseLinkComponent, selector: "[TheBaseLinkComponent]", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[TheBaseLinkComponent]',
@@ -8050,11 +8161,11 @@ class TheLinkComponent extends TheBaseLinkComponent {
         this.inlineChromiumBugfix = String.fromCodePoint(160);
     }
 }
-TheLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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>
+TheLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'a[theLink]',
@@ -8703,7 +8814,7 @@ class TheNumberedListComponent extends TheBaseElementComponent {
     }
     get level() {
         var _a;
-        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
+        return ((_a = this.element) === null || _a === void 0 ? void 0 : _a.indent) || null;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -8712,9 +8823,9 @@ class TheNumberedListComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
     }
 }
-TheNumberedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheNumberedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheNumberedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheNumberedListComponent, decorators: [{
+TheNumberedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheNumberedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheNumberedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheNumberedListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol[theOl]',
@@ -8736,7 +8847,7 @@ class TheBulletedListComponent extends TheBaseElementComponent {
     }
     get level() {
         var _a;
-        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
+        return ((_a = this.element) === null || _a === void 0 ? void 0 : _a.indent) || null;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -8745,9 +8856,9 @@ class TheBulletedListComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
     }
 }
-TheBulletedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBulletedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheBulletedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBulletedListComponent, decorators: [{
+TheBulletedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBulletedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheBulletedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBulletedListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ul[theUl]',
@@ -8835,9 +8946,9 @@ class TheListItemComponent extends TheBaseElementComponent {
         }
     }
 }
-TheListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheListItemComponent, decorators: [{
+TheListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'li[theLi]',
@@ -9743,9 +9854,9 @@ class TheBaseSuggestion {
         event.preventDefault();
     }
 }
-TheBaseSuggestion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBaseSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TheBaseSuggestion.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TheBaseSuggestion, inputs: { editor: "editor", type: "type", keywords: "keywords" }, host: { listeners: { "mousedown": "handleMousedown($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheBaseSuggestion, decorators: [{
+TheBaseSuggestion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TheBaseSuggestion.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TheBaseSuggestion, inputs: { editor: "editor", type: "type", keywords: "keywords" }, host: { listeners: { "mousedown": "handleMousedown($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseSuggestion, decorators: [{
             type: Directive
         }], propDecorators: { editor: [{
                 type: Input
@@ -9819,9 +9930,9 @@ class TheVerticalToolbarItemComponent extends TheBaseToolbarDropdown {
         }
     }
 }
-TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: i3.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: i5.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: "14.2.12", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
+TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: i5.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: "14.2.0", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-vertical-align-item', host: {
                         class: 'the-toolbar-dropdown-container verticalAlign',
@@ -9914,9 +10025,9 @@ class TheTableSelectComponent {
         }
     }
 }
-TheTableSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: "14.2.12", ngImport: i0, type: TheTableSelectComponent, decorators: [{
+TheTableSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", 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: [{
@@ -9969,14 +10080,14 @@ class TheListboxOptionDirective {
         return this._active;
     }
 }
-TheListboxOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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 });
-TheListboxOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: { theOptionValue: "theOptionValue", theOptionDisabled: "theOptionDisabled" }, host: { properties: { "class": "this.className" } }, providers: [
+TheListboxOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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 });
+TheListboxOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", 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: TheListboxOptionDirective, descendants: true }], exportAs: ["theListboxOption"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheListboxOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListboxOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListboxOption]',
@@ -10054,14 +10165,14 @@ class TheListboxGroupDirective {
         return this.options[this.options.length - 1];
     }
 }
-TheListboxGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheListboxGroupDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
-TheListboxGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: { horizontalColumn: "horizontalColumn" }, host: { properties: { "class": "this.className" } }, providers: [
+TheListboxGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListboxGroupDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
+TheListboxGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.12", ngImport: i0, type: TheListboxGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListboxGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListboxGroup]',
@@ -10267,14 +10378,14 @@ class TheListboxDirective {
         this._keyboardSubscription.unsubscribe();
     }
 }
-TheListboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheListboxDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-TheListboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TheListboxDirective, selector: "[theListBox]", inputs: { keyboardContainer: "keyboardContainer", autoActiveFirstItem: "autoActiveFirstItem" }, outputs: { theListboxChange: "theListboxChange" }, host: { properties: { "class": "this.className" } }, providers: [
+TheListboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListboxDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TheListboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.12", ngImport: i0, type: TheListboxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListBox]',
@@ -10454,9 +10565,9 @@ class ThePluginMenuComponent extends mixinUnsubscribe(MixinBase) {
         super.ngOnDestroy();
     }
 }
-ThePluginMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ThePluginMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-ThePluginMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: ThePluginMenuComponent, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu" }, 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]=\"autoActiveFirstItem\"\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 class=\"menu-icon mr-2\">\n                        <thy-icon [thyIconName]=\"item.menuIcon\"></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                    (click)=\"handleItemSelection(item)\"\n                >\n                    <div class=\"menu-icon mr-2\">\n                        <thy-icon [thyIconName]=\"item.menuIcon\"></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 class=\"menu-icon mr-2\">\n                                        <thy-icon [thyIconName]=\"child.menuIcon\"></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\"></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: i3.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: i5$1.ThyInputSearchComponent, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i12.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"], outputs: ["thyActiveChange"] }, { kind: "component", type: i6.ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth"] }, { 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$1.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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
+ThePluginMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ThePluginMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+ThePluginMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ThePluginMenuComponent, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu" }, 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]=\"autoActiveFirstItem\"\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 class=\"menu-icon mr-2\">\n                        <thy-icon [thyIconName]=\"item.menuIcon\"></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                    (click)=\"handleItemSelection(item)\"\n                >\n                    <div class=\"menu-icon mr-2\">\n                        <thy-icon [thyIconName]=\"item.menuIcon\"></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 class=\"menu-icon mr-2\">\n                                        <thy-icon [thyIconName]=\"child.menuIcon\"></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\"></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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: i5$1.ThyInputSearchComponent, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i6.ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyActiveClass", "thyPopoverOptions"], outputs: ["thyActiveChange"] }, { kind: "component", type: i6.ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth"] }, { 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$1.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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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]=\"autoActiveFirstItem\"\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 class=\"menu-icon mr-2\">\n                        <thy-icon [thyIconName]=\"item.menuIcon\"></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                    (click)=\"handleItemSelection(item)\"\n                >\n                    <div class=\"menu-icon mr-2\">\n                        <thy-icon [thyIconName]=\"item.menuIcon\"></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 class=\"menu-icon mr-2\">\n                                        <thy-icon [thyIconName]=\"child.menuIcon\"></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\"></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: [{
@@ -10663,6 +10774,127 @@ const createSoftBreakPlugin = createPluginFactory({
     }
 });
 
+const SLA_TABLE_SELECTOR = '.slate-element-table';
+const SLA_TABLE_CELL_SELECTOR = '.slate-element-table-cell';
+
+class TheToolbarGroupComponent {
+    constructor(elementRef, thyPopover, viewContainerRef) {
+        this.elementRef = elementRef;
+        this.thyPopover = thyPopover;
+        this.viewContainerRef = viewContainerRef;
+        this.className = 'the-toolbar-group';
+        this.active = false;
+    }
+    set item(i) {
+        this._item = i;
+        this.activeMenuItem = i;
+    }
+    get item() {
+        return this._item;
+    }
+    get isOpened() {
+        return this.groupPopoverRef && this.groupPopoverRef.getOverlayRef() && this.groupPopoverRef.getOverlayRef().hasAttached();
+    }
+    mousedownHandler(event) {
+        event.preventDefault();
+        this.toggleGroupMenus(event);
+    }
+    documentMouseupHandle(event) {
+        const isGroup = event.target.closest('.the-toolbar-group');
+        const isGroupContainer = event.target.closest('.the-toolbar-group-container');
+        if (!isGroupContainer && !isGroup && this.isOpened) {
+            this.closeGroup();
+        }
+    }
+    clickHandle(event) {
+        event.stopPropagation();
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.closeGroup();
+    }
+    toggleGroupMenus(event) {
+        var _a;
+        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) {
+            return;
+        }
+        if (this.isOpened) {
+            this.closeGroup();
+        }
+        else {
+            this.openGroup(event);
+        }
+    }
+    selectionChange(editor) {
+        const activeItem = this.menusActive(editor);
+        this.activeMenuItem = activeItem ? activeItem : null;
+        this.activeChange();
+    }
+    menusActive(editor) {
+        return this.menus.find(i => {
+            var _a;
+            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) && (i === null || i === void 0 ? void 0 : i.active)) {
+                return i === null || i === void 0 ? void 0 : i.active(editor);
+            }
+        });
+    }
+    activeChange() {
+        const activeItem = this.menusActive(this.editor);
+        if (this.isOpened && !activeItem) {
+            this.active = false;
+            return;
+        }
+        this.active = activeItem ? true : false;
+    }
+    openGroup(event) {
+        this.active = true;
+        this.groupPopoverRef = this.thyPopover.open(this.groupTemplate, {
+            panelClass: 'the-toolbar-group-container',
+            offset: 0,
+            minWidth: 0,
+            placement: 'bottomRight',
+            origin: event.currentTarget,
+            viewContainerRef: this.viewContainerRef,
+            hasBackdrop: false,
+            outsideClosable: true,
+            manualClosure: true
+        });
+        this.groupPopoverRef.afterClosed().subscribe(() => {
+            this.activeChange();
+        });
+    }
+    closeGroup() {
+        if (this.isOpened) {
+            this.groupPopoverRef.close();
+        }
+    }
+}
+TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: i5.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: "14.2.0", 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: [{
+                type: HostBinding,
+                args: ['class']
+            }], menus: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], groupTemplate: [{
+                type: ViewChild,
+                args: ['groupTemplate', { read: TemplateRef, static: true }]
+            }], mousedownHandler: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], documentMouseupHandle: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }], clickHandle: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -10685,9 +10917,9 @@ class ColumnResizeNotifierSource {
         this.triggerResize = new Subject();
     }
 }
-ColumnResizeNotifierSource.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ColumnResizeNotifierSource.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnResizeNotifierSource });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
+ColumnResizeNotifierSource.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnResizeNotifierSource.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ColumnResizeNotifierSource });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
             type: Injectable
         }] });
 
@@ -10737,12 +10969,40 @@ class TableCellEventDispatcher {
         }));
     }
 }
-TableCellEventDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableCellEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-TableCellEventDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableCellEventDispatcher });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableCellEventDispatcher, decorators: [{
+TableCellEventDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableCellEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+TableCellEventDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableCellEventDispatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableCellEventDispatcher, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
+function splitCell(editor) {
+    const opts = new TableOptions();
+    const { anchor } = editor.selection;
+    const tablePosition = TablePosition.create(opts, editor, anchor.path);
+    const { cell, table, cellEntry } = tablePosition;
+    if ((!cell.rowspan && !cell.colspan) || (cell.rowspan === 1 && cell.colspan === 1))
+        return editor;
+    const cellRow = tablePosition.getRowIndex();
+    const cellCol = tablePosition.getColumnIndex();
+    resetTableCell(editor, table, cell, cellRow, cellCol);
+    Transforms.select(editor, cellEntry[1]);
+    Transforms.collapse(editor, { edge: 'end' });
+}
+function resetTableCell(editor, table, cell, cellRow, cellCol) {
+    const rowSpanIndex = cellRow + (cell.rowspan || 1) - 1;
+    const colSpanIndex = cellCol + (cell.colspan || 1) - 1;
+    Editor.withoutNormalizing(editor, () => {
+        table.children.map((row, rowIndex) => {
+            row.children.map((col, colIndex) => {
+                if (rowIndex >= cellRow && rowIndex <= rowSpanIndex && colIndex >= cellCol && colIndex <= colSpanIndex) {
+                    const path = findPath(editor, col);
+                    Transforms.setNodes(editor, { colspan: null, rowspan: null, hidden: null }, { at: path });
+                }
+            });
+        });
+    });
+}
+
 function getSelectCellNode(editor, selectedCells) {
     const { anchor } = editor.selection;
     const opts = new TableOptions();
@@ -10842,12 +11102,110 @@ function mergeCellContent(editor, leftTopCellPath, cellPath) {
     });
 }
 
-class TableStore {
-    constructor() {
-        this.selectedCells$ = new BehaviorSubject([]);
-        this.dangerousCells$ = new BehaviorSubject([]);
-        this.cellsChangeObject$ = new Subject();
-        this.tableChange$ = new Subject();
+function setCellMenuVisibility(editor, menuList, tableInfo, isFromControls) {
+    const { selectedCells, isFullscreen, selectedRowsIndex, selectedColumnsIndex } = tableInfo;
+    const isCellMerged = isSelectedCellMerged(editor);
+    const selectCellNodes = getSelectCellNode(editor, selectedCells).filter(item => !item.node.hidden);
+    const isRect = isRectangularInTableCells(selectedCells);
+    menuList.forEach(item => {
+        switch (item.key) {
+            case 'merge-cells':
+                item.visibility = selectCellNodes && selectCellNodes.length > 1 && !isFromControls && isRect;
+                break;
+            case 'split-cells':
+                item.visibility = selectCellNodes && selectCellNodes.length === 1 && isCellMerged && !isFromControls;
+                break;
+            case 'delete-selection-rows':
+                item.visibility = !isFullscreen || !selectedColumnsIndex.length;
+                break;
+            case 'delete-selection-columns':
+                item.visibility = !isFullscreen || !selectedRowsIndex.length;
+                break;
+            case 'delete-table':
+                item.visibility = !isFullscreen;
+                break;
+            case TableInsertType.insertRowsUp:
+                const isHeader = TableEditor.isActiveHeaderRow(editor);
+                item.visibility = !isHeader && isRect;
+                break;
+            case TableInsertType.insertRowsDown:
+                item.visibility = isRect;
+                break;
+            case TableInsertType.insertColumnsLeft:
+                const isHeaderColumn = TableEditor.isActiveHeaderColumn(editor);
+                item.visibility = !isHeaderColumn && isRect;
+                break;
+            case TableInsertType.insertColumnsRight:
+                item.visibility = isRect;
+                break;
+        }
+    });
+}
+
+class TheContextMenuComponent {
+    constructor(elementRef, thyPopoverRef) {
+        this.elementRef = elementRef;
+        this.thyPopoverRef = thyPopoverRef;
+        this.menuEntities = [];
+        this.wrap = true;
+    }
+    handleDocumentMouseDown(event) {
+        if (!this.elementRef.nativeElement.contains(event.target) && event.button !== 2) {
+            this.thyPopoverRef.close();
+        }
+    }
+    handleMouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    itemMousedown(event, entity) {
+        event.preventDefault();
+        this.actionHandle(entity);
+        this.thyPopoverRef.close();
+    }
+    itemMouseleave(event, entity) {
+        event.preventDefault();
+        this.deactivateHandle(event, entity);
+    }
+    itemMouseenter(event, entity) {
+        event.preventDefault();
+        this.activeHandle(event, entity);
+    }
+    inputNumberFocus(e) {
+        e.target.focus();
+    }
+    ngOnInit() { }
+}
+TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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\">\n            <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [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\n                *ngIf=\"item?.backgroundColor; else elseIcon\"\n                [thyIconName]=\"item.icon\"\n                thyIconType=\"twotone\"\n                [thyTwotoneColor]=\"item.backgroundColor\"\n            ></thy-icon>\n            <ng-template #elseIcon>\n                <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            </ng-template>\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)=\"itemMousedown($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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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$2.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$2.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.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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\">\n            <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [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\n                *ngIf=\"item?.backgroundColor; else elseIcon\"\n                [thyIconName]=\"item.icon\"\n                thyIconType=\"twotone\"\n                [thyTwotoneColor]=\"item.backgroundColor\"\n            ></thy-icon>\n            <ng-template #elseIcon>\n                <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            </ng-template>\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)=\"itemMousedown($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: [{
+                type: Input
+            }], actionHandle: [{
+                type: Input
+            }], activeHandle: [{
+                type: Input
+            }], deactivateHandle: [{
+                type: Input
+            }], wrap: [{
+                type: HostBinding,
+                args: ['class.the-overlay-menu-wrap']
+            }], handleDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document: mousedown', ['$event']]
+            }], handleMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class TableStore {
+    constructor() {
+        this.selectedCells$ = new BehaviorSubject([]);
+        this.dangerousCells$ = new BehaviorSubject([]);
+        this.cellsChangeObject$ = new Subject();
+        this.tableChange$ = new Subject();
         this.selectedColumnsIndex = [];
         this.selectedRowsIndex = [];
         this.dangerousColumnsIndex = [];
@@ -10907,6 +11265,21 @@ class TableStore {
     initEditor(editor) {
         this.editor = editor;
     }
+    /**
+     * 多选模式下需要合并数据
+     * @param cells SelectedCell[]
+     * @returns
+     */
+    buildModCells(cells) {
+        let result = [];
+        if (this.isModSelecting) {
+            const modCells = new Set();
+            cells.concat(this.selectedCells).forEach(cell => modCells.add(JSON.stringify(cell)));
+            modCells.forEach((cell) => result.push(JSON.parse(cell)));
+            return result.sort((a, b) => a.row - b.row);
+        }
+        return cells;
+    }
     selectRow(editor, index) {
         this.selectedRowsIndex = [index];
         this.selectedColumnsIndex = [];
@@ -10921,7 +11294,7 @@ class TableStore {
                 col: i
             });
         }
-        this.setSelectedCells(result, pos);
+        this.setSelectedCells(this.buildModCells(result), pos);
         this.focusCell(editor, pos.tableEntry[1].concat([index, 0]));
     }
     selectColumn(editor, index) {
@@ -10938,7 +11311,7 @@ class TableStore {
                 col: index
             });
         }
-        this.setSelectedCells(result, pos);
+        this.setSelectedCells(this.buildModCells(result), pos);
         this.focusCell(editor, pos.tableEntry[1].concat([0, index]));
     }
     selectTable(editor) {
@@ -10960,6 +11333,7 @@ class TableStore {
         }
         return { cells: result, pos };
     }
+    // 拖选
     selectCells(editor) {
         const opts = new TableOptions();
         const { anchor, focus } = editor.selection;
@@ -10986,7 +11360,7 @@ class TableStore {
                 });
             }
         }
-        this.setSelectedCells(result, pos);
+        this.setSelectedCells(this.buildModCells(result), pos);
     }
     getMinAndMaxCellIndex(maxRow, maxCol, minRow, minCol, table) {
         const beforeCols = [];
@@ -11049,9 +11423,12 @@ class TableStore {
     }
     // 选择单元格
     selectCell(cell, editor) {
+        // todo：处理表格失焦时不选中
         if (!editor.selection) {
             return;
         }
+        // 已聚焦的单元格在多选模式下选中（暂存上次聚焦的单元格）
+        const focusCell = this.lastFocusCellPath.slice(-2);
         const node = AngularEditor.toSlateNode(editor, cell);
         const path = AngularEditor.findPath(editor, node);
         this.anchorCellPath = path;
@@ -11061,19 +11438,14 @@ class TableStore {
         const opts = new TableOptions();
         const { anchor } = editor.selection;
         const pos = TablePosition.create(opts, editor, anchor.path);
+        let result = [];
         if (this.isModSelecting) {
-            let newCells = [];
-            if (this.selectedCells.find(cell => cell.col === col && cell.row === row)) {
-                newCells = this.selectedCells.filter(cell => cell.col !== col || cell.row !== row);
-            }
-            else {
-                newCells = [...this.selectedCells, { row, col }];
-            }
-            this.selectedCells$.next(newCells);
+            result = [...this.selectedCells, { row: focusCell[0], col: focusCell[1] }, { row, col }];
         }
         else {
-            this.setSelectedCells([{ row, col }], pos);
+            result = [{ row, col }];
         }
+        this.setSelectedCells(this.buildModCells(result), pos);
     }
     selectedCellsChange() {
         return this.selectedCells$.asObservable().pipe(skip(1));
@@ -11104,7 +11476,7 @@ class TableStore {
         const node = AngularEditor.toSlateNode(editor, cell);
         const path = AngularEditor.findPath(editor, node);
         this.anchorCellPath = path;
-        this.focusCellPath = null;
+        this.lastFocusCellPath = path;
         if (!this.preFocusCellPath) {
             this.preFocusCellPath = this.anchorCellPath;
         }
@@ -11298,7 +11670,6 @@ class TableStore {
     removeColumnOrRows() {
         var _a;
         const { selectedRowsIndex, selectedColumnsIndex, isSelectedTable } = this;
-        const tablePluginOptions = getPluginOptions(this.editor, PluginKeys.table);
         const pos = this.createTablePosition();
         if (isSelectedTable) {
             TableEditor.removeTable(this.editor);
@@ -11309,6 +11680,9 @@ class TableStore {
                 .sort((a, b) => b - a)
                 .forEach(index => {
                 TableEditor.removeRow(this.editor, index);
+                if (index === 0) {
+                    // 删除行时取消标题行
+                }
             });
             this.changeCells();
         }
@@ -11325,384 +11699,109 @@ class TableStore {
         }
     }
 }
-TableStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TableStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableStore, decorators: [{
+TableStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TableStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
-function splitCell(editor) {
-    const opts = new TableOptions();
-    const { anchor } = editor.selection;
-    const tablePosition = TablePosition.create(opts, editor, anchor.path);
-    const { cell, table, cellEntry } = tablePosition;
-    if ((!cell.rowspan && !cell.colspan) || (cell.rowspan === 1 && cell.colspan === 1))
-        return editor;
-    const cellRow = tablePosition.getRowIndex();
-    const cellCol = tablePosition.getColumnIndex();
-    resetTableCell(editor, table, cell, cellRow, cellCol);
-    Transforms.select(editor, cellEntry[1]);
-    Transforms.collapse(editor, { edge: 'end' });
-}
-function resetTableCell(editor, table, cell, cellRow, cellCol) {
-    const rowSpanIndex = cellRow + (cell.rowspan || 1) - 1;
-    const colSpanIndex = cellCol + (cell.colspan || 1) - 1;
-    Editor.withoutNormalizing(editor, () => {
-        table.children.map((row, rowIndex) => {
-            row.children.map((col, colIndex) => {
-                if (rowIndex >= cellRow && rowIndex <= rowSpanIndex && colIndex >= cellCol && colIndex <= colSpanIndex) {
-                    const path = findPath(editor, col);
-                    Transforms.setNodes(editor, { colspan: null, rowspan: null, hidden: null }, { at: path });
+class TheTableContextMenuService {
+    constructor(colorSelectService, tableStore, thyPopover, ngZone, theContextService) {
+        this.colorSelectService = colorSelectService;
+        this.tableStore = tableStore;
+        this.thyPopover = thyPopover;
+        this.ngZone = ngZone;
+        this.theContextService = theContextService;
+        this.menuEntities = [
+            {
+                key: 'background-color',
+                icon: 'background-tt',
+                divider: true,
+                name: '单元格背景',
+                extendIcon: 'angle-right',
+                visibility: true,
+                actionHandle: () => { },
+                activeHandle: (event) => {
+                    if (this.colorSelectService.isOpenColorSelect) {
+                        return;
+                    }
+                    const isHeader = TableEditor.isActiveHeader(this.editor);
+                    this.colorSelectService.toggleColorSelect(event.target, this.backgroundColor, BackgroundColors, {
+                        perRowColorNumbers: 7,
+                        rowOptions: { 1: '#bbb', 2: '#bbb' },
+                        specialColor: isHeader ? TableHeaderBackgroundColor : SpecialBackgroundColor
+                    }, (newColor) => {
+                        if ((newColor === TableHeaderBackgroundColor && isHeader) || (newColor === SpecialBackgroundColor && !isHeader)) {
+                            this.tableStore.setSelectedCellsBackgroundColor(null);
+                        }
+                        else {
+                            this.tableStore.setSelectedCellsBackgroundColor(newColor);
+                        }
+                        this.tableStore.selectFirstCell();
+                    }, 'rightTop', 0);
+                },
+                deactivateHandle: (event) => {
+                    if (event.relatedTarget instanceof HTMLElement) {
+                        if (event.relatedTarget.classList.contains('color-select-container')) {
+                            return;
+                        }
+                    }
+                    if (this.colorSelectService.isOpenColorSelect) {
+                        this.colorSelectService.closeColorSelect();
+                    }
                 }
-            });
-        });
-    });
-}
-
-function setCellMenuVisibility(editor, menuList, selectedCells, isFromControls) {
-    const isCellMerged = isSelectedCellMerged(editor);
-    const selectCellNodes = getSelectCellNode(editor, selectedCells).filter(item => !item.node.hidden);
-    menuList.forEach(item => {
-        if (item.key === 'merge-cells') {
-            item.visibility = selectCellNodes && selectCellNodes.length > 1 && !isFromControls;
-        }
-        if (item.key === 'split-cells') {
-            item.visibility = selectCellNodes && selectCellNodes.length === 1 && isCellMerged && !isFromControls;
-        }
-    });
-}
-
-class TheTableOptionsComponent {
-    constructor(popoverRef) {
-        this.popoverRef = popoverRef;
-        this.tableDropdownList = [
-            // {
-            //     name: '表头行',
-            //     key: 'headerRow'
-            // },
+            },
             {
-                name: '表头列',
-                key: 'headerColumn'
+                key: TableInsertType.insertRowsUp,
+                icon: 'table-insert-rows-top',
+                name: '向上插入行',
+                visibility: true,
+                isInputNumber: true,
+                nameSuffix: '行',
+                actionHandle: (item) => {
+                    const { targetRowIndex } = this.getTargetRowOrColIndex();
+                    TableEditor.insertRow(this.editor, item.count, targetRowIndex);
+                    this.tableStore.changeCells();
+                }
             },
             {
-                name: '序号列',
-                key: 'numberedColumn'
-            }
-        ];
-    }
-    get table() {
-        return this.tableStore && this.tableStore.getTableEntry(this.editor)[0];
-    }
-    ngOnInit() {
-        this.setColumnOptions();
-    }
-    setColumnOptions() {
-        this.tableDropdownList.forEach(item => {
-            item.isActive = (this.table.options && this.table.options[item.key]) || false;
-        });
-    }
-    setTableOptions(event, option) {
-        event.preventDefault();
-        event.stopPropagation();
-        const currentOption = this.tableDropdownList.find(item => item.key === option.key);
-        currentOption.isActive = !option.isActive;
-        const tableOption = {};
-        tableOption[option.key] = currentOption.isActive || null;
-        this.tableStore.setTableOptions(this.editor, Object.assign(Object.assign({}, this.table.options), tableOption));
-    }
-}
-TheTableOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableOptionsComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { tableStore: "tableStore", editor: "editor" }, 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)">
-                    <span thyDropdownMenuItemName>{{ option.name }}</span>
-                    <span *ngIf="option.isActive" thyDropdownMenuItemIcon class="text-primary">
-                        <thy-icon thyIconName="check"></thy-icon>
-                    </span>
-                </a>
-            </ng-container>
-        </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: i3.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: "14.2.12", ngImport: i0, type: TheTableOptionsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'the-table-options',
-                    template: `
-        <div class="thy-dropdown-menu table-drop-menu">
-            <ng-container *ngFor="let option of tableDropdownList">
-                <a thyDropdownMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
-                    <span thyDropdownMenuItemName>{{ option.name }}</span>
-                    <span *ngIf="option.isActive" thyDropdownMenuItemIcon class="text-primary">
-                        <thy-icon thyIconName="check"></thy-icon>
-                    </span>
-                </a>
-            </ng-container>
-        </div>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
-                type: Input
-            }], editor: [{
-                type: Input
-            }] } });
-
-class TheTableToolbarComponent {
-    constructor(ngZone, colorSelectService, thyPopover, popoverRef) {
-        this.ngZone = ngZone;
-        this.colorSelectService = colorSelectService;
-        this.thyPopover = thyPopover;
-        this.popoverRef = popoverRef;
-        this.cellMenuList = [
+                key: TableInsertType.insertRowsDown,
+                icon: 'table-insert-rows-down',
+                name: '向下插入行',
+                visibility: true,
+                isInputNumber: true,
+                nameSuffix: '行',
+                actionHandle: (item) => {
+                    const { targetRowIndex } = this.getTargetRowOrColIndex(false);
+                    TableEditor.insertRow(this.editor, item.count, targetRowIndex);
+                    this.tableStore.changeCells();
+                }
+            },
             {
-                key: 'merge-cells',
-                name: '合并单元格',
-                visibility: false,
-                icon: 'table-merge-cells',
-                actionHandle: () => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.tableStore.mergeCell(this.editor);
-                    this.popoverRef.close();
-                    this.tableStore.clearSelectedCells();
+                key: TableInsertType.insertColumnsLeft,
+                icon: 'table-insert-columns-left',
+                name: '向左插入列',
+                visibility: true,
+                isInputNumber: true,
+                nameSuffix: '列',
+                actionHandle: (item) => {
+                    const { targetColIndex } = this.getTargetRowOrColIndex();
+                    TableEditor.insertColumn(this.editor, item.count, targetColIndex);
+                    this.tableStore.changeCells();
                 }
             },
             {
-                key: 'split-cells',
-                name: '拆分单元格',
-                visibility: false,
-                icon: 'table-unmerge-cells',
-                actionHandle: () => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    splitCell(this.editor);
-                    this.popoverRef.close();
-                    this.tableStore.clearSelectedCells();
-                }
-            }
-        ];
-    }
-    get editor() {
-        return this.tableStore && this.tableStore.editor;
-    }
-    get hasDivider() {
-        return this.cellMenuList.filter(item => item.visibility).length > 1;
-    }
-    get tableOptions() {
-        return getPluginOptions(this.editor, PluginKeys.table);
-    }
-    ngOnInit() {
-        this.deleteIcon = DeleteIcon[this.getDeleteIcon()];
-        this.getIconName(this.deleteIcon);
-        setCellMenuVisibility(this.editor, this.cellMenuList, this.tableStore.selectedCells, this.isFromControls);
-        this.selectedColor = this.tableStore.getSelectedCellBackgroundColor();
-    }
-    ngOnDestroy() {
-        this.colorSelectService.closeColorSelect();
-    }
-    getIconName(key) {
-        switch (key) {
-            case 'trash':
-                this.iconName = '删除表格';
-                break;
-            case 'table-delete-columns':
-                this.iconName = '删除整列';
-                break;
-            case 'table-delete-rows':
-                this.iconName = '删除整行';
-                break;
-        }
-    }
-    getDeleteIcon() {
-        if (this.tableStore.isSelectedTable) {
-            return DeleteIcon.trash;
-        }
-        if (this.tableStore.selectedRowsIndex.length > 0) {
-            return DeleteIcon['table-delete-rows'];
-        }
-        if (this.tableStore.selectedColumnsIndex.length > 0) {
-            return DeleteIcon['table-delete-columns'];
-        }
-        return null;
-    }
-    onDelete(event) {
-        event.preventDefault();
-        this.tableStore.removeColumnOrRows();
-        this.tableStore.clearDangerousCells();
-        this.tableStore.clearSelectedCells();
-        this.popoverRef.close();
-    }
-    onEnterDelete(event) {
-        this.tableStore.setDangerousCells();
-    }
-    onLeaveDelete(event) {
-        this.tableStore.clearDangerousCells();
-    }
-    openSelectColor(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const element = event.target.closest('.thy-action');
-        const isHeader = TableEditor.isActiveHeader(this.editor);
-        this.ngZone.run(() => {
-            this.colorSelectService.toggleColorSelect(element, this.selectedColor, BackgroundColors, {
-                perRowColorNumbers: 7,
-                rowOptions: { 1: '#bbb', 2: '#bbb' },
-                specialColor: isHeader ? TableHeaderBackgroundColor : SpecialBackgroundColor
-            }, (newColor) => {
-                if ((newColor === TableHeaderBackgroundColor && isHeader) || (newColor === SpecialBackgroundColor && !isHeader)) {
-                    this.tableStore.setSelectedCellsBackgroundColor(null);
-                }
-                else {
-                    this.tableStore.setSelectedCellsBackgroundColor(newColor);
-                }
-                this.selectedColor = newColor;
-            }, 'bottomLeft', 4);
-        });
-    }
-    setFullscreen(event) {
-        this.tableOptions.setFullscreen(this.editor, event, this.tableElement);
-    }
-    mousedown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    openTableOptionMenu(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.thyPopover.open(TheTableOptionsComponent, {
-            origin: event.currentTarget,
-            initialState: {
-                tableStore: this.tableStore,
-                editor: this.editor
-            },
-            minWidth: 0,
-            insideClosable: true,
-            outsideClosable: true,
-            hasBackdrop: false,
-            placement: 'bottomLeft',
-            originActiveClass: 'active',
-            panelClass: 'table-options-pannel'
-        });
-    }
-}
-TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isFromControls: "isFromControls", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\">\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            (mousedown)=\"item.actionHandle()\"\n        ></a>\n    </ng-container>\n    <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a\n        href=\"javascript:;\"\n        *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n        thyAction\n        thyTooltip=\"\u5168\u5C4F\"\n        (mousedown)=\"setFullscreen($event)\"\n    >\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableStore.isSelectedTable\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($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\n    <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            [thyActionIcon]=\"deleteIcon\"\n            [thyTooltip]=\"iconName\"\n            (mousedown)=\"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: "component", type: i3.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: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'the-table-toolbar', template: "<thy-actions thySize=\"xxs\">\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            (mousedown)=\"item.actionHandle()\"\n        ></a>\n    </ng-container>\n    <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a\n        href=\"javascript:;\"\n        *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n        thyAction\n        thyTooltip=\"\u5168\u5C4F\"\n        (mousedown)=\"setFullscreen($event)\"\n    >\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableStore.isSelectedTable\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($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\n    <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            [thyActionIcon]=\"deleteIcon\"\n            [thyTooltip]=\"iconName\"\n            (mousedown)=\"onDelete($event)\"\n            (mouseenter)=\"onEnterDelete($event)\"\n            (mouseleave)=\"onLeaveDelete($event)\"\n        ></a>\n    </ng-container>\n</thy-actions>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: TheColorSelectService }, { type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
-                type: Input
-            }], isFromControls: [{
-                type: Input
-            }], tableElement: [{
-                type: Input
-            }] } });
-var DeleteIcon;
-(function (DeleteIcon) {
-    DeleteIcon[DeleteIcon["table-delete-rows"] = 0] = "table-delete-rows";
-    DeleteIcon[DeleteIcon["table-delete-columns"] = 1] = "table-delete-columns";
-    DeleteIcon[DeleteIcon["trash"] = 2] = "trash";
-})(DeleteIcon || (DeleteIcon = {}));
-
-class TheContextMenuComponent {
-    constructor(elementRef, thyPopoverRef) {
-        this.elementRef = elementRef;
-        this.thyPopoverRef = thyPopoverRef;
-        this.menuEntities = [];
-        this.wrap = true;
-    }
-    handleDocumentMouseDown(event) {
-        if (!this.elementRef.nativeElement.contains(event.target) && event.button !== 2) {
-            this.thyPopoverRef.close();
-        }
-    }
-    handleMouseDown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    itemMousedown(event, entity) {
-        event.preventDefault();
-        this.actionHandle(entity);
-        this.thyPopoverRef.close();
-    }
-    itemMouseleave(event, entity) {
-        event.preventDefault();
-        this.deactiveHandle(event, entity);
-    }
-    itemMouseenter(event, entity) {
-        event.preventDefault();
-        this.activeHandle(event, entity);
-    }
-    ngOnInit() { }
-}
-TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            *ngIf=\"menuItem.visibility\"\n            href=\"javascript:;\"\n            thyDropdownMenuItem\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyDropdownMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyDropdownMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyDropdownMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-dropdown-menu-divider *ngIf=\"menuItem.divider\"></thy-dropdown-menu-divider>\n    </ng-container>\n</div>\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: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { 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]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", 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        <a\n            *ngIf=\"menuItem.visibility\"\n            href=\"javascript:;\"\n            thyDropdownMenuItem\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyDropdownMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyDropdownMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyDropdownMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-dropdown-menu-divider *ngIf=\"menuItem.divider\"></thy-dropdown-menu-divider>\n    </ng-container>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
-                type: Input
-            }], actionHandle: [{
-                type: Input
-            }], activeHandle: [{
-                type: Input
-            }], deactiveHandle: [{
-                type: Input
-            }], wrap: [{
-                type: HostBinding,
-                args: ['class.the-overlay-menu-wrap']
-            }], handleDocumentMouseDown: [{
-                type: HostListener,
-                args: ['document: mousedown', ['$event']]
-            }], handleMouseDown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }] } });
-
-class TheTableContextMenuService {
-    constructor(colorSelectService, tableStore, thyPopover, ngZone, theContextService) {
-        this.colorSelectService = colorSelectService;
-        this.tableStore = tableStore;
-        this.thyPopover = thyPopover;
-        this.ngZone = ngZone;
-        this.theContextService = theContextService;
-        this.menuEntities = [
-            {
-                key: 'background-color',
-                icon: 'background-tt',
+                key: TableInsertType.insertColumnsRight,
+                icon: 'table-insert-columns-right',
                 divider: true,
-                name: '单元格背景',
-                extendIcon: 'angle-right',
+                name: '向右插入列',
                 visibility: true,
-                actionHandle: () => { },
-                activeHandle: (event) => {
-                    if (this.colorSelectService.isOpenColorSelect) {
-                        return;
-                    }
-                    const isHeader = TableEditor.isActiveHeader(this.editor);
-                    this.colorSelectService.toggleColorSelect(event.target, this.backgroundColor, BackgroundColors, {
-                        perRowColorNumbers: 7,
-                        rowOptions: { 1: '#bbb', 2: '#bbb' },
-                        specialColor: isHeader ? TableHeaderBackgroundColor : SpecialBackgroundColor
-                    }, (newColor) => {
-                        if ((newColor === TableHeaderBackgroundColor && isHeader) || (newColor === SpecialBackgroundColor && !isHeader)) {
-                            this.tableStore.setSelectedCellsBackgroundColor(null);
-                        }
-                        else {
-                            this.tableStore.setSelectedCellsBackgroundColor(newColor);
-                        }
-                        this.tableStore.selectFirstCell();
-                    }, 'rightTop', 0);
-                },
-                deactiveHandle: (event) => {
-                    if (event.relatedTarget instanceof HTMLElement) {
-                        if (event.relatedTarget.classList.contains('color-select-container')) {
-                            return;
-                        }
-                    }
-                    if (this.colorSelectService.isOpenColorSelect) {
-                        this.colorSelectService.closeColorSelect();
-                    }
+                isInputNumber: true,
+                nameSuffix: '列',
+                actionHandle: (item) => {
+                    const { targetColIndex } = this.getTargetRowOrColIndex(false);
+                    TableEditor.insertColumn(this.editor, item.count, targetColIndex);
+                    this.tableStore.changeCells();
                 }
             },
             {
@@ -11784,63 +11883,342 @@ class TheTableContextMenuService {
     get editor() {
         return this.tableStore && this.tableStore.editor;
     }
-    get backgroundColor() {
-        return this.tableStore.getSelectedCellBackgroundColor();
+    get backgroundColor() {
+        return this.tableStore.getSelectedCellBackgroundColor();
+    }
+    getSelectedCell() {
+        const cells = this.tableStore.selectedCells;
+        const selectCellNodes = getSelectCellNode(this.editor, cells);
+        const leftCellDict = getLeftCellDict(selectCellNodes);
+        const { rowspan, colspan } = calculateCellSpan(selectCellNodes, leftCellDict);
+        return { row: rowspan, col: colspan, selectCellNodes };
+    }
+    getTargetRowOrColIndex(isFront = true) {
+        const { row, col, selectCellNodes } = this.getSelectedCell();
+        const firstSelectCell = selectCellNodes[0];
+        const targetRowIndex = isFront ? firstSelectCell.row : row + firstSelectCell.row;
+        const targetColIndex = isFront ? firstSelectCell.col : col + firstSelectCell.col;
+        return { targetRowIndex, targetColIndex };
+    }
+    openMenuList(event) {
+        this.ngZone.run(() => {
+            const { selectedCells, isFullscreen, selectedRowsIndex, selectedColumnsIndex } = this.tableStore;
+            const tableInfo = { selectedCells, isFullscreen, selectedRowsIndex, selectedColumnsIndex };
+            const { row, col } = this.getSelectedCell();
+            setCellMenuVisibility(this.editor, this.menuEntities, tableInfo);
+            this.menuEntities.forEach(item => {
+                switch (item.key) {
+                    case 'background-color':
+                        item.backgroundColor = this.tableStore.getSelectedCellBackgroundColor();
+                        break;
+                    case TableInsertType.insertRowsUp:
+                    case TableInsertType.insertRowsDown:
+                        item.count = row;
+                        break;
+                    case TableInsertType.insertColumnsLeft:
+                    case TableInsertType.insertColumnsRight:
+                        item.count = col;
+                        break;
+                }
+            });
+            this.menuRef = this.thyPopover.open(TheContextMenuComponent, {
+                origin: event.target,
+                initialState: {
+                    menuEntities: this.menuEntities,
+                    actionHandle: (entity) => {
+                        if (!this.editor.selection) {
+                            refocus(this.editor);
+                        }
+                        entity.actionHandle(entity);
+                    },
+                    activeHandle: (menuEvent, entity) => {
+                        if (entity.activeHandle) {
+                            entity.activeHandle(menuEvent);
+                        }
+                    },
+                    deactivateHandle: (menuEvent, entity) => {
+                        if (entity.key.indexOf('delete') >= 0) {
+                            this.tableStore.clearDangerousCells();
+                        }
+                        if (entity.deactivateHandle) {
+                            entity.deactivateHandle(menuEvent);
+                        }
+                    }
+                },
+                originPosition: {
+                    x: event.x + 30,
+                    y: event.y
+                },
+                hasBackdrop: false,
+                placement: 'bottomLeft',
+                viewContainerRef: this.theContextService.getOptions().viewContainerRef,
+                manualClosure: true,
+                insideClosable: false,
+                backdropClosable: false
+            });
+        });
+    }
+    closeContextMenu() {
+        if (this.isOpened) {
+            this.menuRef.close();
+            return this.menuRef.afterClosed();
+        }
+    }
+}
+TheTableContextMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TheColorSelectService }, { token: TableStore }, { token: i1$1.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+TheTableContextMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableContextMenuService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableContextMenuService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: TheColorSelectService }, { type: TableStore }, { type: i1$1.ThyPopover }, { type: i0.NgZone }, { type: TheContextService }]; } });
+
+class TheTableOptionsComponent {
+    constructor(popoverRef) {
+        this.popoverRef = popoverRef;
+        this.tableDropdownList = [
+            // {
+            //     name: '表头行',
+            //     key: 'headerRow'
+            // },
+            {
+                name: '标题列',
+                key: 'headerColumn'
+            },
+            {
+                name: '序号列',
+                key: 'numberedColumn'
+            }
+        ];
+    }
+    get table() {
+        return this.tableStore && this.tableStore.getTableEntry(this.editor)[0];
+    }
+    ngOnInit() {
+        this.setColumnOptions();
+    }
+    setColumnOptions() {
+        this.tableDropdownList.forEach(item => {
+            item.isActive = (this.table.options && this.table.options[item.key]) || false;
+        });
+    }
+    setTableOptions(event, option) {
+        event.preventDefault();
+        event.stopPropagation();
+        const currentOption = this.tableDropdownList.find(item => item.key === option.key);
+        currentOption.isActive = !option.isActive;
+        const tableOption = {};
+        tableOption[option.key] = currentOption.isActive || null;
+        this.tableStore.setTableOptions(this.editor, Object.assign(Object.assign({}, this.table.options), tableOption));
+    }
+}
+TheTableOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableOptionsComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTableOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { tableStore: "tableStore", editor: "editor" }, 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)">
+                    <span thyDropdownMenuItemName>{{ option.name }}</span>
+                    <span *ngIf="option.isActive" thyDropdownMenuItemIcon class="text-primary">
+                        <thy-icon thyIconName="check"></thy-icon>
+                    </span>
+                </a>
+            </ng-container>
+        </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: "14.2.0", ngImport: i0, type: TheTableOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-table-options',
+                    template: `
+        <div class="thy-dropdown-menu table-drop-menu">
+            <ng-container *ngFor="let option of tableDropdownList">
+                <a thyDropdownMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
+                    <span thyDropdownMenuItemName>{{ option.name }}</span>
+                    <span *ngIf="option.isActive" thyDropdownMenuItemIcon class="text-primary">
+                        <thy-icon thyIconName="check"></thy-icon>
+                    </span>
+                </a>
+            </ng-container>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }] } });
+
+class TheTableToolbarComponent {
+    constructor(ngZone, colorSelectService, thyPopover, popoverRef) {
+        this.ngZone = ngZone;
+        this.colorSelectService = colorSelectService;
+        this.thyPopover = thyPopover;
+        this.popoverRef = popoverRef;
+        this.cellMenuList = [
+            {
+                key: 'merge-cells',
+                name: '合并单元格',
+                visibility: false,
+                icon: 'table-merge-cells',
+                actionHandle: () => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.tableStore.mergeCell(this.editor);
+                    this.popoverRef.close();
+                    this.tableStore.clearSelectedCells();
+                }
+            },
+            {
+                key: 'split-cells',
+                name: '拆分单元格',
+                visibility: false,
+                icon: 'table-unmerge-cells',
+                actionHandle: () => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    splitCell(this.editor);
+                    this.popoverRef.close();
+                    this.tableStore.clearSelectedCells();
+                }
+            }
+        ];
+    }
+    get editor() {
+        return this.tableStore && this.tableStore.editor;
+    }
+    get hasDivider() {
+        return this.cellMenuList.filter(item => item.visibility).length > 1;
+    }
+    get tableOptions() {
+        return getPluginOptions(this.editor, PluginKeys.table);
+    }
+    ngOnInit() {
+        this.deleteIcon = DeleteIcon[this.getDeleteIcon()];
+        this.getIconName(this.deleteIcon);
+        const { selectedCells } = this.tableStore;
+        const tableInfo = { selectedCells };
+        this.isRectangle = isRectangularInTableCells(selectedCells);
+        setCellMenuVisibility(this.editor, this.cellMenuList, tableInfo, this.isFromControls);
+        this.selectedColor = this.tableStore.getSelectedCellBackgroundColor();
+    }
+    ngOnDestroy() {
+        this.colorSelectService.closeColorSelect();
+    }
+    getIconName(key) {
+        switch (key) {
+            case 'trash':
+                this.iconName = '删除表格';
+                break;
+            case 'table-delete-columns':
+                this.iconName = '删除整列';
+                break;
+            case 'table-delete-rows':
+                this.iconName = '删除整行';
+                break;
+        }
+    }
+    getDeleteIcon() {
+        if (this.tableStore.isSelectedTable) {
+            return DeleteIcon.trash;
+        }
+        if (this.tableStore.selectedRowsIndex.length > 0) {
+            return DeleteIcon['table-delete-rows'];
+        }
+        if (this.tableStore.selectedColumnsIndex.length > 0) {
+            return DeleteIcon['table-delete-columns'];
+        }
+        return null;
+    }
+    onDelete(event) {
+        event.preventDefault();
+        this.tableStore.removeColumnOrRows();
+        this.tableStore.clearDangerousCells();
+        this.tableStore.clearSelectedCells();
+        this.popoverRef.close();
+    }
+    onEnterDelete(event) {
+        this.tableStore.setDangerousCells();
+    }
+    onLeaveDelete(event) {
+        this.tableStore.clearDangerousCells();
     }
-    openMenuList(event) {
+    openSelectColor(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const element = event.target.closest('.thy-action');
+        const isHeader = TableEditor.isActiveHeader(this.editor);
         this.ngZone.run(() => {
-            setCellMenuVisibility(this.editor, this.menuEntities, this.tableStore.selectedCells);
-            this.menuEntities.forEach(item => {
-                if (item.key === 'background-color') {
-                    item.backgroundColor = this.tableStore.getSelectedCellBackgroundColor();
+            this.colorSelectService.toggleColorSelect(element, this.selectedColor, BackgroundColors, {
+                perRowColorNumbers: 7,
+                rowOptions: { 1: '#bbb', 2: '#bbb' },
+                specialColor: isHeader ? TableHeaderBackgroundColor : SpecialBackgroundColor
+            }, (newColor) => {
+                if ((newColor === TableHeaderBackgroundColor && isHeader) || (newColor === SpecialBackgroundColor && !isHeader)) {
+                    this.tableStore.setSelectedCellsBackgroundColor(null);
                 }
-            });
-            this.menuRef = this.thyPopover.open(TheContextMenuComponent, {
-                origin: event.target,
-                initialState: {
-                    menuEntities: this.menuEntities,
-                    actionHandle: (entity) => {
-                        entity.actionHandle(entity);
-                    },
-                    activeHandle: (menuEvent, entity) => {
-                        if (entity.activeHandle) {
-                            entity.activeHandle(menuEvent);
-                        }
-                    },
-                    deactiveHandle: (menuEvent, entity) => {
-                        if (entity.key.indexOf('delete') >= 0) {
-                            this.tableStore.clearDangerousCells();
-                        }
-                        if (entity.deactiveHandle) {
-                            entity.deactiveHandle(menuEvent);
-                        }
-                    }
-                },
-                originPosition: {
-                    x: event.x + 30,
-                    y: event.y
-                },
-                hasBackdrop: false,
-                placement: 'bottomLeft',
-                viewContainerRef: this.theContextService.getOptions().viewContainerRef,
-                manualClosure: true,
-                insideClosable: false,
-                backdropClosable: false
-            });
+                else {
+                    this.tableStore.setSelectedCellsBackgroundColor(newColor);
+                }
+                this.selectedColor = newColor;
+            }, 'bottomLeft', 4);
         });
     }
-    closeContextMenu() {
-        if (this.isOpened) {
-            this.menuRef.close();
-            return this.menuRef.afterClosed();
-        }
+    setFullscreen(event) {
+        this.tableOptions.setFullscreen(this.editor, event, this.tableElement);
+    }
+    mousedown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    setEquallyColumnHandle(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const cols = [...this.tableElementRef.nativeElement.querySelector('colgroup').children];
+        const initialValue = 0;
+        const sumWidth = cols.reduce((previousValue, currentValue) => {
+            return previousValue + getElementWidth(currentValue);
+        }, initialValue);
+        cols.forEach(col => {
+            col.style.width = coerceCssPixelValue(sumWidth / cols.length);
+        });
+    }
+    openTableOptionMenu(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.thyPopover.open(TheTableOptionsComponent, {
+            origin: event.currentTarget,
+            initialState: {
+                tableStore: this.tableStore,
+                editor: this.editor
+            },
+            minWidth: 0,
+            insideClosable: true,
+            outsideClosable: true,
+            hasBackdrop: false,
+            placement: 'bottomLeft',
+            originActiveClass: 'active',
+            panelClass: 'table-options-pannel'
+        });
     }
 }
-TheTableContextMenuService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TheColorSelectService }, { token: TableStore }, { token: i1$1.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-TheTableContextMenuService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableContextMenuService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableContextMenuService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: TheColorSelectService }, { type: TableStore }, { type: i1$1.ThyPopover }, { type: i0.NgZone }, { type: TheContextService }]; } });
+TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isFromControls: "isFromControls", tableElement: "tableElement", tableElementRef: "tableElementRef" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\">\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            (mousedown)=\"item.actionHandle()\"\n        ></a>\n    </ng-container>\n    <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a href=\"javascript:;\" *ngIf=\"tableStore.isSelectedTable\" thyAction thyTooltip=\"\u5217\u7B49\u5BBD\" (mousedown)=\"setEquallyColumnHandle($event)\">\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        (mousedown)=\"setFullscreen($event)\"\n    >\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableStore.isSelectedTable\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($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\n    <ng-container *ngIf=\"isRectangle && (tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon)\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            [thyActionIcon]=\"deleteIcon\"\n            [thyTooltip]=\"iconName\"\n            (mousedown)=\"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: "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: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'the-table-toolbar', template: "<thy-actions thySize=\"xxs\">\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            (mousedown)=\"item.actionHandle()\"\n        ></a>\n    </ng-container>\n    <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a href=\"javascript:;\" *ngIf=\"tableStore.isSelectedTable\" thyAction thyTooltip=\"\u5217\u7B49\u5BBD\" (mousedown)=\"setEquallyColumnHandle($event)\">\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        (mousedown)=\"setFullscreen($event)\"\n    >\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableStore.isSelectedTable\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($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\n    <ng-container *ngIf=\"isRectangle && (tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon)\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            [thyActionIcon]=\"deleteIcon\"\n            [thyTooltip]=\"iconName\"\n            (mousedown)=\"onDelete($event)\"\n            (mouseenter)=\"onEnterDelete($event)\"\n            (mouseleave)=\"onLeaveDelete($event)\"\n        ></a>\n    </ng-container>\n</thy-actions>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: TheColorSelectService }, { type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
+                type: Input
+            }], isFromControls: [{
+                type: Input
+            }], tableElement: [{
+                type: Input
+            }], tableElementRef: [{
+                type: Input
+            }] } });
+var DeleteIcon;
+(function (DeleteIcon) {
+    DeleteIcon[DeleteIcon["table-delete-rows"] = 0] = "table-delete-rows";
+    DeleteIcon[DeleteIcon["table-delete-columns"] = 1] = "table-delete-columns";
+    DeleteIcon[DeleteIcon["trash"] = 2] = "trash";
+})(DeleteIcon || (DeleteIcon = {}));
 
 class TableService {
     constructor(thyPopover, overlay, tableStore, theTableContextMenuService, ngZone, theContextService) {
@@ -11859,7 +12237,7 @@ class TableService {
     get isOpened() {
         return this.toolbarRef && this.toolbarRef.componentInstance;
     }
-    openToolbar(origin, tableElement, isFromControls) {
+    openToolbar(origin, tableElement, isFromControls, tableElementRef) {
         if (this.isOpened) {
             if (this.toolbarRef.containerInstance.config.origin === origin) {
                 return;
@@ -11870,7 +12248,8 @@ class TableService {
             initialState: {
                 tableStore: this.tableStore,
                 tableElement,
-                isFromControls
+                isFromControls,
+                tableElementRef
             },
             viewContainerRef: this.theContextService.getOptions().viewContainerRef,
             origin: this.getOrigin(origin),
@@ -11885,9 +12264,9 @@ class TableService {
             manualClosure: true
         });
     }
-    afterSelectedCells(origin, element, isFromControls) {
+    afterSelectedCells(origin, element, isFromControls, tableElementRef) {
         this.theTableContextMenuService.closeContextMenu();
-        this.openToolbar(origin, element, isFromControls);
+        this.openToolbar(origin, element, isFromControls, tableElementRef);
     }
     getOrigin(origin) {
         if (origin instanceof HTMLTableCellElement && origin.tagName !== 'TH') {
@@ -11915,15 +12294,12 @@ class TableService {
         }
     }
 }
-TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableService, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableService, decorators: [{
+TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableService, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: TableStore }, { token: TheTableContextMenuService }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.ThyPopover }, { type: i2$1.Overlay }, { type: TableStore }, { type: TheTableContextMenuService }, { type: i0.NgZone }, { type: TheContextService }]; } });
 
-const SLA_TABLE_SELECTOR = '.slate-element-table';
-const SLA_TABLE_CELL_SELECTOR = '.slate-element-table-cell';
-
 function isVirtualKey(e) {
     const isMod = e.ctrlKey || e.metaKey;
     const isAlt = isKeyHotkey('alt', e);
@@ -11937,14 +12313,17 @@ function isVirtualKey(e) {
 }
 
 class TableFreezeColumnPipe {
-    transform(element, tablePluginOptions) {
-        var _a;
-        return (tablePluginOptions === null || tablePluginOptions === void 0 ? void 0 : tablePluginOptions.freezeColumnHeader) && ((_a = element.options) === null || _a === void 0 ? void 0 : _a.headerColumn);
+    transform(table, tablePluginOptions) {
+        var _a, _b;
+        const rows = (_a = table.children) === null || _a === void 0 ? void 0 : _a.map(item => item.children);
+        // 存在合并的单元格时，取消冻结
+        const mergeColumnCells = rows && rows.map(cells => cells[0]).filter(item => item.colspan && item.colspan !== 1);
+        return (tablePluginOptions === null || tablePluginOptions === void 0 ? void 0 : tablePluginOptions.freezeColumnHeader) && ((_b = table.options) === null || _b === void 0 ? void 0 : _b.headerColumn) && !mergeColumnCells.length;
     }
 }
-TableFreezeColumnPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableFreezeColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-TableFreezeColumnPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TableFreezeColumnPipe, name: "freezeColumn" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TableFreezeColumnPipe, decorators: [{
+TableFreezeColumnPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableFreezeColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+TableFreezeColumnPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: TableFreezeColumnPipe, name: "freezeColumn" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TableFreezeColumnPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'freezeColumn' }]
         }] });
@@ -12031,9 +12410,9 @@ class TheColumnResizeDirective {
         this.destroyed.complete();
     }
 }
-TheColumnResizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TheTableToken }], target: i0.ɵɵFactoryTarget.Directive });
-TheColumnResizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: TheColumnResizeDirective, selector: "div[theColumnResize]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColumnResizeDirective, decorators: [{
+TheColumnResizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TheTableToken }], target: i0.ɵɵFactoryTarget.Directive });
+TheColumnResizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TheColumnResizeDirective, selector: "div[theColumnResize]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColumnResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[theColumnResize]'
@@ -12068,14 +12447,6 @@ class TheInsertMarkComponent {
         }
         const fun = this.type === 'row' ? TableEditor.insertRow : TableEditor.insertColumn;
         fun(this.editor, 1, this.at);
-        // update header
-        if (this.type === 'row' && this.at === 0) {
-            const { selection } = this.editor;
-            const opts = new TableOptions();
-            const table = TablePosition.create(opts, this.editor, selection.anchor.path);
-            Transforms.setNodes(this.editor, { header: true }, { at: table.tableEntry[1].concat(0) });
-            Transforms.setNodes(this.editor, { header: null }, { at: table.tableEntry[1].concat(1) });
-        }
         this.tableStore.changeCells();
     }
     onMouseEnter(event) {
@@ -12125,9 +12496,9 @@ class TheInsertMarkComponent {
         }
     }
 }
-TheInsertMarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, 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: "14.2.12", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
+TheInsertMarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, 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: "14.2.0", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-insert-mark', 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" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; }, propDecorators: { type: [{
@@ -12151,6 +12522,7 @@ class TheTableComponent extends TheBaseElementComponent {
         this.tableService = tableService;
         this.theTableContextMenuService = theTableContextMenuService;
         this.freezeColumnPipe = freezeColumnPipe;
+        this.headerRow = false;
         this.destroy$ = new Subject();
         this.rowControls = [];
         this.colControls = [];
@@ -12191,6 +12563,7 @@ class TheTableComponent extends TheBaseElementComponent {
             this.getIsInTable();
             this.getColControls();
         }
+        this.headerRow = this.getHeaderRow();
     }
     ngOnInit() {
         super.ngOnInit();
@@ -12212,6 +12585,20 @@ class TheTableComponent extends TheBaseElementComponent {
         const width = tableContainer.offsetWidth - paddingLeft;
         return width;
     }
+    /**
+     * compatible with old data
+     * @returns
+     */
+    getHeaderRow() {
+        var _a, _b, _c;
+        if ((_b = (_a = this.element) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.headerRow) {
+            return true;
+        }
+        // compat old data
+        if ((_c = this.element) === null || _c === void 0 ? void 0 : _c.children[0].header) {
+            return true;
+        }
+    }
     ngAfterViewInit() {
         this.ngZone.onStable.pipe(take(1)).subscribe(() => __awaiter(this, void 0, void 0, function* () {
             var _a;
@@ -12503,7 +12890,7 @@ class TheTableComponent extends TheBaseElementComponent {
         event.stopPropagation();
         event.preventDefault();
         this.tableStore.selectTable(this.editor);
-        this.tableService.afterSelectedCells(event.target, this.element, true);
+        this.tableService.afterSelectedCells(event.target, this.element, true, this.theTableElement);
     }
     listenTableContextMenuEvent() {
         this.ngZone.runOutsideAngular(() => {
@@ -12556,7 +12943,9 @@ class TheTableComponent extends TheBaseElementComponent {
             return !isVirtualKey(e);
         })))
             .pipe(filter(() => {
-            return this.tableStore.selectedCells && this.tableStore.selectedCells.length > 0;
+            return (this.tableStore.selectedCells &&
+                this.tableStore.selectedCells.length > 0 &&
+                !(this.theTableContextMenuService.isOpened && !this.editor.selection));
         }), takeUntil(this.destroy$))
             .subscribe((e) => {
             if (e.type === 'keydown') {
@@ -12576,7 +12965,7 @@ class TheTableComponent extends TheBaseElementComponent {
             fromEvent(document, 'keydown')
                 .pipe(takeUntil(this.destroy$), filter((e) => !!e))
                 .subscribe((event) => {
-                if (isHotkey('mod', event)) {
+                if (isHotkey('mod', event) && !this.readonly) {
                     this.tableStore.isModSelecting = true;
                 }
             });
@@ -12600,8 +12989,8 @@ class TheTableComponent extends TheBaseElementComponent {
         this.destroy$.complete();
     }
 }
-TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
-TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" } }, providers: [
+TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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 }], target: i0.ɵɵFactoryTarget.Component });
+TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" } }, providers: [
         TableStore,
         TableService,
         TheTableContextMenuService,
@@ -12612,8 +13001,8 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             provide: TheTableToken,
             useExisting: TheTableComponent
         }
-    ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-numbered-column-container': element?.options?.numberedColumn,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div\n        class=\"the-table-row-controls-wrapper\"\n        [ngClass]=\"{\n            'the-table-focus': isInTable\n        }\"\n    >\n        <div\n            class=\"the-table-corner-controls\"\n            [ngClass]=\"{\n                visible: !readonly && isInTable,\n                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\">\n                <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n            <div class=\"the-table-corner-controls-insert-column-marker\">\n                <the-table-insert-mark\n                    *ngIf=\"!element.options?.headerColumn\"\n                    type=\"column\"\n                    [at]=\"0\"\n                    [tableStore]=\"tableStore\"\n                ></the-table-insert-mark>\n            </div>\n        </div>\n        <div class=\"the-table-row-controls\">\n            <div class=\"the-table-row-controls-inner\">\n                <div\n                    class=\"the-table-row-controls-button-wrap\"\n                    *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n                    [ngClass]=\"{\n                        active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                        dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                    }\"\n                >\n                    <ng-container *ngIf=\"!readonly && isInTable && !element?.options?.numberedColumn\">\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\">{{ i + 1 }}</p>\n                        </div>\n                    </ng-container>\n                    <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        #colControl\n                        class=\"the-table-col-controls\"\n                        [ngClass]=\"{\n                            'the-sticky-cell': i === 0 && element | freezeColumn: tablePluginOptions,\n                            active: tableStore.selectedColumnsIndex.includes(i),\n                            dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                        }\"\n                        (mousedown)=\"onColMousedown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\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        </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.SlateChildrenComponent, 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"] }, { kind: "pipe", type: TableFreezeColumnPipe, name: "freezeColumn" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-numbered-column-container': element?.options?.numberedColumn,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div\n        class=\"the-table-row-controls-wrapper\"\n        [ngClass]=\"{\n            'the-table-focus': isInTable\n        }\"\n    >\n        <div\n            class=\"the-table-corner-controls\"\n            [ngClass]=\"{\n                visible: !readonly && isInTable,\n                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\">\n                <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n            <div class=\"the-table-corner-controls-insert-column-marker\">\n                <the-table-insert-mark\n                    *ngIf=\"!element.options?.headerColumn\"\n                    type=\"column\"\n                    [at]=\"0\"\n                    [tableStore]=\"tableStore\"\n                ></the-table-insert-mark>\n            </div>\n        </div>\n        <div class=\"the-table-row-controls\">\n            <div class=\"the-table-row-controls-inner\">\n                <div\n                    class=\"the-table-row-controls-button-wrap\"\n                    *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n                    [ngClass]=\"{\n                        active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                        dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                    }\"\n                >\n                    <ng-container *ngIf=\"!readonly && isInTable && !element?.options?.numberedColumn\">\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 type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </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 [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        #colControl\n                        class=\"the-table-col-controls\"\n                        [ngClass]=\"{\n                            'the-sticky-cell': i === 0 && element | freezeColumn: tablePluginOptions,\n                            active: tableStore.selectedColumnsIndex.includes(i),\n                            dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                        }\"\n                        (mousedown)=\"onColMousedown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\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        </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.SlateChildrenComponent, 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"] }, { kind: "pipe", type: TableFreezeColumnPipe, name: "freezeColumn" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table, [theTable]', providers: [
                         TableStore,
@@ -12626,7 +13015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             provide: TheTableToken,
                             useExisting: TheTableComponent
                         }
-                    ], template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-numbered-column-container': element?.options?.numberedColumn,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div\n        class=\"the-table-row-controls-wrapper\"\n        [ngClass]=\"{\n            'the-table-focus': isInTable\n        }\"\n    >\n        <div\n            class=\"the-table-corner-controls\"\n            [ngClass]=\"{\n                visible: !readonly && isInTable,\n                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\">\n                <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n            <div class=\"the-table-corner-controls-insert-column-marker\">\n                <the-table-insert-mark\n                    *ngIf=\"!element.options?.headerColumn\"\n                    type=\"column\"\n                    [at]=\"0\"\n                    [tableStore]=\"tableStore\"\n                ></the-table-insert-mark>\n            </div>\n        </div>\n        <div class=\"the-table-row-controls\">\n            <div class=\"the-table-row-controls-inner\">\n                <div\n                    class=\"the-table-row-controls-button-wrap\"\n                    *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n                    [ngClass]=\"{\n                        active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                        dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                    }\"\n                >\n                    <ng-container *ngIf=\"!readonly && isInTable && !element?.options?.numberedColumn\">\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\">{{ i + 1 }}</p>\n                        </div>\n                    </ng-container>\n                    <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </the-table-insert-mark>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        #colControl\n                        class=\"the-table-col-controls\"\n                        [ngClass]=\"{\n                            'the-sticky-cell': i === 0 && element | freezeColumn: tablePluginOptions,\n                            active: tableStore.selectedColumnsIndex.includes(i),\n                            dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                        }\"\n                        (mousedown)=\"onColMousedown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\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        </table>\n    </div>\n</div>\n" }]
+                    ], template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-numbered-column-container': element?.options?.numberedColumn,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div\n        class=\"the-table-row-controls-wrapper\"\n        [ngClass]=\"{\n            'the-table-focus': isInTable\n        }\"\n    >\n        <div\n            class=\"the-table-corner-controls\"\n            [ngClass]=\"{\n                visible: !readonly && isInTable,\n                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\">\n                <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n            <div class=\"the-table-corner-controls-insert-column-marker\">\n                <the-table-insert-mark\n                    *ngIf=\"!element.options?.headerColumn\"\n                    type=\"column\"\n                    [at]=\"0\"\n                    [tableStore]=\"tableStore\"\n                ></the-table-insert-mark>\n            </div>\n        </div>\n        <div class=\"the-table-row-controls\">\n            <div class=\"the-table-row-controls-inner\">\n                <div\n                    class=\"the-table-row-controls-button-wrap\"\n                    *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n                    [ngClass]=\"{\n                        active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                        dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                    }\"\n                >\n                    <ng-container *ngIf=\"!readonly && isInTable && !element?.options?.numberedColumn\">\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 type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"> </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 [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        #colControl\n                        class=\"the-table-col-controls\"\n                        [ngClass]=\"{\n                            'the-sticky-cell': i === 0 && element | freezeColumn: tablePluginOptions,\n                            active: tableStore.selectedColumnsIndex.includes(i),\n                            dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                        }\"\n                        (mousedown)=\"onColMousedown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\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        </table>\n    </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TableCellEventDispatcher }, { type: ColumnResizeNotifierSource }, { type: TableStore }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TableService }, { type: TheTableContextMenuService }, { type: TableFreezeColumnPipe }]; }, propDecorators: { tableWrapper: [{
                 type: ViewChild,
                 args: ['tableWrapper', { read: ElementRef, static: true }]
@@ -12715,9 +13104,9 @@ class TheTableRowComponent extends TheBaseElementComponent {
         }
     }
 }
-TheTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheTableRowComponent, selector: "tr[theTableRow]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "style.height": "this.height" } }, usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableRowComponent, decorators: [{
+TheTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableRowComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTableRowComponent, selector: "tr[theTableRow]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "style.height": "this.height" } }, usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, dependencies: [{ kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableRowComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'tr[theTableRow]',
@@ -12876,9 +13265,9 @@ class ColumnResizingStore {
         this.resizeRows.pop();
     }
 }
-ColumnResizingStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnResizingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ColumnResizingStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnResizingStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ColumnResizingStore, decorators: [{
+ColumnResizingStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ColumnResizingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnResizingStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ColumnResizingStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ColumnResizingStore, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -13033,9 +13422,9 @@ class TheColumnResizeOverlayHandleComponent {
         this.destroyed.complete();
     }
 }
-TheColumnResizeOverlayHandleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColumnResizeOverlayHandleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: DOCUMENT }, { token: ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Component });
-TheColumnResizeOverlayHandleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: "14.2.12", ngImport: i0, type: TheColumnResizeOverlayHandleComponent, decorators: [{
+TheColumnResizeOverlayHandleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColumnResizeOverlayHandleComponent, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: DOCUMENT }, { token: ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Component });
+TheColumnResizeOverlayHandleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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: "14.2.0", ngImport: i0, type: TheColumnResizeOverlayHandleComponent, decorators: [{
             type: Component,
             args: [{
                     host: { class: 'the-table-resize-overlay-thumb' },
@@ -13098,7 +13487,7 @@ const POSITION_MAP = {
     }
 };
 class TheTdComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr, renderer, viewContainerRef, ngZone, injector, overlay, resizingStore, scrollDispatcher) {
+    constructor(elementRef, cdr, renderer, viewContainerRef, ngZone, injector, overlay, resizingStore, scrollDispatcher, freezeColumnPipe) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
@@ -13109,6 +13498,7 @@ class TheTdComponent extends TheBaseElementComponent {
         this.overlay = overlay;
         this.resizingStore = resizingStore;
         this.scrollDispatcher = scrollDispatcher;
+        this.freezeColumnPipe = freezeColumnPipe;
         this.destroy$ = new Subject();
         this.tableOptions = new TableOptions();
         this.cellInnerMinHeight = null;
@@ -13243,20 +13633,20 @@ class TheTdComponent extends TheBaseElementComponent {
         });
     }
     setColumnClass() {
-        var _a, _b;
+        var _a;
         const colIndex = this.tablePosition.getColumnIndex();
         const table = this.tablePosition.table;
         const tablePluginOptions = getPluginOptions(this.editor, PluginKeys.table);
         // 标题列背景色
-        if (colIndex === 0 && ((_a = table.options) === null || _a === void 0 ? void 0 : _a.headerColumn)) {
-            this.renderer.addClass(this.elementRef.nativeElement, HEADER_CELL_CLASS);
-        }
-        else {
-            this.renderer.removeClass(this.elementRef.nativeElement, HEADER_CELL_CLASS);
-        }
-        if (tablePluginOptions.freezeColumnHeader) {
+        if (colIndex === 0) {
+            if ((_a = table.options) === null || _a === void 0 ? void 0 : _a.headerColumn) {
+                this.renderer.addClass(this.elementRef.nativeElement, HEADER_CELL_CLASS);
+            }
+            else {
+                this.renderer.removeClass(this.elementRef.nativeElement, HEADER_CELL_CLASS);
+            }
             // 标题列设置滚动时固定列
-            if (colIndex === 0 && ((_b = table.options) === null || _b === void 0 ? void 0 : _b.headerColumn)) {
+            if (this.freezeColumnPipe.transform(table, tablePluginOptions)) {
                 this.renderer.addClass(this.elementRef.nativeElement, STICKY_CELL_CLASS);
             }
             else {
@@ -13351,16 +13741,16 @@ class TheTdComponent extends TheBaseElementComponent {
             fromEvent(element, 'mousedown')
                 .pipe(takeUntil(this.destroy$), filter((e) => e.button !== 2), map$1(event => event.target.closest(SLA_TABLE_CELL_SELECTOR)), filter(cell => !!cell))
                 .subscribe((cell) => {
+                // 单选
+                if (this.tableStore.isModSelecting) {
+                    this.tableStore.selectCell(cell, this.editor);
+                }
                 this.tableStore.selectCellStart(cell, this.editor);
                 if (this.overlayRef) {
                     this.overlayRef.detach();
                 }
                 // 拖选
                 this.listenCellMouseEvents();
-                // 单选
-                if (this.tableStore.isModSelecting) {
-                    this.tableStore.selectCell(cell, this.editor);
-                }
             });
         });
     }
@@ -13379,7 +13769,7 @@ class TheTdComponent extends TheBaseElementComponent {
             .pipe(take(1))
             .subscribe(() => {
             this.tableStore.selectCellEnd(this.editor);
-            if (this.tableStore.isCellSelecting) {
+            if (this.tableStore.isCellSelecting || this.tableStore.isModSelecting) {
                 this.ngZone.run(() => {
                     this.tableComponent.tableService.afterSelectedCells(this.tableStore.focusCellElement, this.tableComponent.element);
                 });
@@ -13755,12 +14145,12 @@ class TheTdComponent extends TheBaseElementComponent {
         this.destroy$.complete();
     }
 }
-TheTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", 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 }], target: i0.ɵɵFactoryTarget.Component });
-TheTdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n    <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", dependencies: [{ kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTdComponent, decorators: [{
+TheTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", 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 });
+TheTdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n    <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", dependencies: [{ kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", 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 }]; }, propDecorators: { backgroundColor: [{
+        }], 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: [{
                 type: HostBinding,
                 args: ['style.backgroundColor']
             }], colspan: [{
@@ -13852,8 +14242,8 @@ class TheTableToolbarItemComponent extends TheBaseToolbarItem {
         return this.tableSelectRef;
     }
 }
-TheTableToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheTableToolbarItemComponent, selector: "the-table-toolbar-item", host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
+TheTableToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableToolbarItemComponent, deps: [{ token: i1$1.ThyPopover }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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"
@@ -13867,8 +14257,8 @@ TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
         >
             <thy-icon class="link-down-icon font-size-sm text-desc ml-1" thyIconName="caret-down"> </thy-icon>
         </a>
-    `, isInline: true, dependencies: [{ kind: "component", type: i3.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: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
+    `, 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: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-toolbar-item',
@@ -14328,7 +14718,7 @@ class TheTodoItemComponent extends TheBaseElementComponent {
     }
     get level() {
         var _a;
-        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
+        return ((_a = this.element) === null || _a === void 0 ? void 0 : _a.indent) || null;
     }
     get editableWithReadonly() {
         var _a;
@@ -14344,14 +14734,14 @@ class TheTodoItemComponent extends TheBaseElementComponent {
         setNode(this.editor, { checked }, this.element);
     }
 }
-TheTodoItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTodoItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
-TheTodoItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: `
+TheTodoItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTodoItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
+TheTodoItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTodoItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTodoItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[theTodoItem]',
@@ -14618,15 +15008,15 @@ class TheInlineToolbarComponent {
         this.destroy$.complete();
     }
 }
-TheInlineToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheInlineToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
-TheInlineToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0, template: `<the-toolbar
+TheInlineToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheInlineToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
+TheInlineToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0, template: `<the-toolbar
         #inlineToolbar
         class="the-inline-toolbar"
         [editor]="editor"
         [toolbarItems]="toolbarItems"
         [isMore]="false"
     ></the-toolbar> `, isInline: true, 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: "14.2.12", ngImport: i0, type: TheInlineToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheInlineToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-inline-toolbar',
@@ -14745,9 +15135,9 @@ class TheQuickInsertComponent {
         }, 100);
     }
 }
-TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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 }], 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: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
+TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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 }], 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: "14.2.0", 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: [{
@@ -15131,8 +15521,8 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         };
     }
 }
-TheEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheEditorComponent, deps: [{ token: TheContextService }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i2$3.ScrollDispatcher }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.ThyIconRegistry }], target: i0.ɵɵFactoryTarget.Component });
-TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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" }, classAttribute: "the-editor" }, providers: [
+TheEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheEditorComponent, deps: [{ token: TheContextService }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i2$2.ScrollDispatcher }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i4.ThyIconRegistry }], target: i0.ɵɵFactoryTarget.Component });
+TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", 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" }, classAttribute: "the-editor" }, providers: [
         TheContextService,
         TheColorSelectService,
         {
@@ -15140,8 +15530,8 @@ TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             useExisting: forwardRef(() => TheEditorComponent),
             multi: true
         }
-    ], 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\"\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    ></slate-editable>\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    <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.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { 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.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: "14.2.12", ngImport: i0, type: TheEditorComponent, decorators: [{
+    ], 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\"\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    ></slate-editable>\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    <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.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: "14.2.0", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-editor, theEditor', providers: [
                         TheContextService,
@@ -15155,7 +15545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         class: 'the-editor',
                         '[class.the-editor-readonly]': 'theOptions?.readonly'
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    #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    ></slate-editable>\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    <the-template #templateInstance></the-template>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: TheContextService }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i2$3.ScrollDispatcher }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.ThyIconRegistry }]; }, propDecorators: { theOptions: [{
+        }], ctorParameters: function () { return [{ type: TheContextService }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i2$2.ScrollDispatcher }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i4.ThyIconRegistry }]; }, propDecorators: { theOptions: [{
                 type: Input
             }], thePlugins: [{
                 type: Input
@@ -15188,10 +15578,10 @@ const ENTRY_COMMON_COMPONENTS = [TheColumnResizeOverlayHandleComponent];
 const DIRECTIVES = [TheColumnResizeDirective];
 class TheColumnResizeCommonModule {
 }
-TheColumnResizeCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheColumnResizeCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TheColumnResizeCommonModule, declarations: [TheColumnResizeOverlayHandleComponent], exports: [TheColumnResizeOverlayHandleComponent] });
-TheColumnResizeCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColumnResizeCommonModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColumnResizeCommonModule, decorators: [{
+TheColumnResizeCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColumnResizeCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheColumnResizeCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: TheColumnResizeCommonModule, declarations: [TheColumnResizeOverlayHandleComponent], exports: [TheColumnResizeOverlayHandleComponent] });
+TheColumnResizeCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColumnResizeCommonModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColumnResizeCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: ENTRY_COMMON_COMPONENTS,
@@ -15200,10 +15590,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
         }] });
 class TheColumnSizeModule {
 }
-TheColumnSizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColumnSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheColumnSizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TheColumnSizeModule, declarations: [TheColumnResizeDirective], imports: [OverlayModule, TheColumnResizeCommonModule], exports: [TheColumnResizeDirective] });
-TheColumnSizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColumnSizeModule, imports: [OverlayModule, TheColumnResizeCommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheColumnSizeModule, decorators: [{
+TheColumnSizeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColumnSizeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheColumnSizeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: TheColumnSizeModule, declarations: [TheColumnResizeDirective], imports: [OverlayModule, TheColumnResizeCommonModule], exports: [TheColumnResizeDirective] });
+TheColumnSizeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColumnSizeModule, imports: [OverlayModule, TheColumnResizeCommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColumnSizeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [OverlayModule, TheColumnResizeCommonModule],
@@ -15212,124 +15602,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-class TheToolbarGroupComponent {
-    constructor(elementRef, thyPopover, viewContainerRef) {
-        this.elementRef = elementRef;
-        this.thyPopover = thyPopover;
-        this.viewContainerRef = viewContainerRef;
-        this.className = 'the-toolbar-group';
-        this.active = false;
-    }
-    set item(i) {
-        this._item = i;
-        this.activeMenuItem = i;
-    }
-    get item() {
-        return this._item;
-    }
-    get isOpened() {
-        return this.groupPopoverRef && this.groupPopoverRef.getOverlayRef() && this.groupPopoverRef.getOverlayRef().hasAttached();
-    }
-    mousedownHandler(event) {
-        event.preventDefault();
-        this.toggleGroupMenus(event);
-    }
-    documentMouseupHandle(event) {
-        const isGroup = event.target.closest('.the-toolbar-group');
-        const isGroupContainer = event.target.closest('.the-toolbar-group-container');
-        if (!isGroupContainer && !isGroup && this.isOpened) {
-            this.closeGroup();
-        }
-    }
-    clickHandle(event) {
-        event.stopPropagation();
-    }
-    ngOnInit() { }
-    ngOnDestroy() {
-        this.closeGroup();
-    }
-    toggleGroupMenus(event) {
-        var _a;
-        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) {
-            return;
-        }
-        if (this.isOpened) {
-            this.closeGroup();
-        }
-        else {
-            this.openGroup(event);
-        }
-    }
-    selectionChange(editor) {
-        const activeItem = this.menusActive(editor);
-        this.activeMenuItem = activeItem ? activeItem : null;
-        this.activeChange();
-    }
-    menusActive(editor) {
-        return this.menus.find(i => {
-            var _a;
-            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) && (i === null || i === void 0 ? void 0 : i.active)) {
-                return i === null || i === void 0 ? void 0 : i.active(editor);
-            }
-        });
-    }
-    activeChange() {
-        const activeItem = this.menusActive(this.editor);
-        if (this.isOpened && !activeItem) {
-            this.active = false;
-            return;
-        }
-        this.active = activeItem ? true : false;
-    }
-    openGroup(event) {
-        this.active = true;
-        this.groupPopoverRef = this.thyPopover.open(this.groupTemplate, {
-            panelClass: 'the-toolbar-group-container',
-            offset: 0,
-            minWidth: 0,
-            placement: 'bottomRight',
-            origin: event.currentTarget,
-            viewContainerRef: this.viewContainerRef,
-            hasBackdrop: false,
-            outsideClosable: true,
-            manualClosure: true
-        });
-        this.groupPopoverRef.afterClosed().subscribe(() => {
-            this.activeChange();
-        });
-    }
-    closeGroup() {
-        if (this.isOpened) {
-            this.groupPopoverRef.close();
-        }
-    }
-}
-TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: i5.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: "14.2.12", 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: [{
-                type: HostBinding,
-                args: ['class']
-            }], menus: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], groupTemplate: [{
-                type: ViewChild,
-                args: ['groupTemplate', { read: TemplateRef, static: true }]
-            }], mousedownHandler: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }], documentMouseupHandle: [{
-                type: HostListener,
-                args: ['document:mouseup', ['$event']]
-            }], clickHandle: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 const TETHYS = [
     ThyIconModule,
     ThyAvatarModule,
@@ -15354,7 +15626,8 @@ const TETHYS = [
     ThyDropdownModule,
     ThyMenuModule,
     ThyEmptyModule,
-    ThyPopoverModule
+    ThyPopoverModule,
+    ThyInputNumberModule
 ];
 const COMPONENTS = [
     TheToolbarComponent,
@@ -15402,8 +15675,8 @@ const PLUGIN_COMPONENTS = [
 const PIPES = [ElementStylePipe, ElementClassPipe, TableFreezeColumnPipe];
 class TheEditorModule {
 }
-TheEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: TheEditorModule, declarations: [TheEditorComponent, ElementStylePipe, ElementClassPipe, TableFreezeColumnPipe, TheToolbarComponent,
+TheEditorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.0", ngImport: i0, type: TheEditorModule, declarations: [TheEditorComponent, ElementStylePipe, ElementClassPipe, TableFreezeColumnPipe, TheToolbarComponent,
         TheToolbarDropdownComponent,
         TheToolbarGroupComponent,
         TheToolbarItemComponent,
@@ -15463,7 +15736,8 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         ThyDropdownModule,
         ThyMenuModule,
         ThyEmptyModule,
-        ThyPopoverModule, CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent,
+        ThyPopoverModule,
+        ThyInputNumberModule, CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent,
         TheToolbarComponent,
         TheToolbarDropdownComponent,
         TheToolbarItemComponent,
@@ -15473,14 +15747,14 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         TheListboxGroupDirective,
         TheListboxDirective,
         ThePreventDefaultDirective] });
-TheEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheEditorModule, providers: [
+TheEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheEditorModule, providers: [
         {
             provide: TheToolbarGroupToken,
             useValue: TheToolbarGroupComponent
         },
         THE_MODE_PROVIDER
     ], imports: [CommonModule, ScrollingModule, SlateModule, FormsModule, TETHYS, CodemirrorModule, TheColumnSizeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TheEditorComponent, ...PIPES, ...COMPONENTS, ...PLUGIN_COMPONENTS],
@@ -15545,9 +15819,9 @@ class TheToolbarService {
         });
     }
 }
-TheToolbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TheToolbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheToolbarService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheToolbarService, decorators: [{
+TheToolbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TheToolbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarService, decorators: [{
             type: Injectable
         }] });
 
@@ -15565,5 +15839,5 @@ const withTestPlugin = (plugins, initValue) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultPluginMenu, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, InlineCodeEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, PluginKeys, PluginMenuIcons, PluginMenuSvgs, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_PREVIOUS_SELECTION, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_LISTBOX_PARENT_GROUP_TOKEN, THE_LISTBOX_PARENT_OPTION_TOKEN, THE_LISTBOX_TOKEN, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_PLUGIN_MENU_REF, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheBaseSuggestion, TheBaseToolbarDropdown, TheBaseToolbarItem, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheListboxDirective, TheListboxGroupDirective, TheListboxOptionDirective, TheMode, TheModeConfig, ThePluginMenu, ThePluginMenuComponent, ThePluginMenuItemType, ThePreventDefaultDirective, index$1 as TheQueries, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, autoScrollViewHandle, base64toBlob, buildPluginMenu, buildPluginMenuItemMap, coercePixelsFromCssValue, combinePlugins, copyNode, createEmptyParagraph, createMentionPlugin, createPluginFactory, createToolbar, createVerticalAlignPlugin, dataDeserialize, dataSerializing, deleteElementKey, extractFragment, filterTextFormat, flattenDeepPlugins, getColsTotalWidth, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getPlugin, getPluginOptions, getPlugins, getRowsTotalHeight, getStartBlock, getToolbarClass, headingOptions, htmlToTheia, idCreator, inValidTypes, initializeDefaultMenuIcons, internalPlugins, isCleanEmptyParagraph, isDirectionKeydown, isPureEmptyParagraph, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, plainToTheia, pluginsByKey, recursionNodes, refocus, setEditorUUID, setRefocusSelection, useElementStyle, withMention, withTestPlugin, withTheia };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BackgroundColors, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, Colors, ColumnResizeNotifierSource, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultPluginMenu, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HoveredCellInfo, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, InlineCodeEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, PluginKeys, PluginMenuIcons, PluginMenuSvgs, Position, QuickInsertEditor, STANDARD_HEADING_TYPES, SpecialBackgroundColor, SpecialTextColor, TAB_SPACE, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_PREVIOUS_SELECTION, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_LISTBOX_PARENT_GROUP_TOKEN, THE_LISTBOX_PARENT_OPTION_TOKEN, THE_LISTBOX_TOKEN, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_PLUGIN_MENU_REF, THE_UPLOAD_SERVICE_TOKEN, TableCellEventDispatcher, TableEditor, TableHeaderBackgroundColor, TheBaseElementComponent, TheBaseSuggestion, TheBaseToolbarDropdown, TheBaseToolbarItem, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheListboxDirective, TheListboxGroupDirective, TheListboxOptionDirective, TheMode, TheModeConfig, ThePluginMenu, ThePluginMenuComponent, ThePluginMenuItemType, ThePreventDefaultDirective, index$1 as TheQueries, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, autoScrollViewHandle, base64toBlob, buildPluginMenu, buildPluginMenuItemMap, coercePixelsFromCssValue, combinePlugins, copyNode, createEmptyParagraph, createMentionPlugin, createPluginFactory, createToolbar, createVerticalAlignPlugin, dataDeserialize, dataSerializing, deleteElementKey, extractFragment, filterTextFormat, flattenDeepPlugins, getColsTotalWidth, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getPlugin, getPluginOptions, getPlugins, getRowsTotalHeight, getStartBlock, getToolbarClass, headingOptions, htmlToTheia, idCreator, inValidTypes, initializeDefaultMenuIcons, internalPlugins, isCleanEmptyParagraph, isDirectionKeydown, isPureEmptyParagraph, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, plainToTheia, pluginsByKey, recursionNodes, refocus, setEditorUUID, setRefocusSelection, useElementStyle, withMention, withTestPlugin, withTheia };
 //# sourceMappingURL=worktile-theia.mjs.map