@worktile/theia 15.0.1 → 15.0.2

package/fesm2020/worktile-theia.mjs

@@ -1,7 +1,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, ElementRef, ChangeDetectorRef, Optional, SkipSelf, ContentChildren, EventEmitter, Output, ViewChildren, forwardRef, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, InjectionToken, Pipe, TemplateRef, ViewChild, Directive, Input, HostListener, ViewContainerRef, Inject, Injectable, ElementRef, ChangeDetectorRef, Optional, SkipSelf, ContentChildren, forwardRef, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
 import * as i3$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from 'slate-angular';
@@ -870,10 +870,10 @@ class TheTemplateComponent {
     }
 }
 TheTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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 });
+TheTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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: "15.2.2", 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" }]
+            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: [{
                 type: ViewChild,
                 args: ['paragraph', { read: TemplateRef, static: true }]
@@ -2315,20 +2315,32 @@ let previousHeight = 0;
  * reset the sliding distance when the viewport position of the sliding
  * container coincides with the viewport position of the focus element
  */
-const autoScrollViewHandle = (editor, scrollContainer) => {
+const scrollIntoView = (editor, scrollContainer) => {
+    const isFocused = AngularEditor.isFocused(editor);
+    const nativeSelection = window.getSelection();
+    if (!isFocused || !nativeSelection?.focusNode) {
+        return;
+    }
+    // fix the page scrolling problem when the associated page card and text status switch in the table
+    // the native selection area is abnormal, and the cursor automatically jumps to the left cursor of the block-level element (browser native behavior when switching display)
+    // temporary solution: Determine whether the DOM corresponding to the Slate selection area is equal to the DOM corresponding to the browser selection. If they are not equal, it means an abnormal situation, and automatic scrolling will no longer be performed
+    const domRange = AngularEditor.toDOMRange(editor, editor.selection);
+    if (domRange.startContainer !== nativeSelection.anchorNode) {
+        return;
+    }
+    const currentNodeElement = nativeSelection.focusNode.parentElement;
+    const scrollContainerElement = currentNodeElement.closest(scrollContainer ?? DEFAULT_SCROLL_CONTAINER);
+    if (!scrollContainerElement) {
+        return;
+    }
+    const scrollContainerRect = scrollContainerElement.getBoundingClientRect();
+    const focusBlockRect = currentNodeElement.getBoundingClientRect();
+    const scrollHeight = scrollContainer ? window.innerHeight : scrollContainerRect.bottom;
     const currentHeight = getEditableElementHeight(editor);
-    const currentNodeElement = window.getSelection().focusNode.parentElement;
-    const scrollContainerElement = currentNodeElement.closest(scrollContainer);
-    // the added sliding distance is the height of the
-    // current editing area minus the height of the last editing area
-    const scrollHeight = currentHeight - previousHeight;
-    if (scrollContainerElement && previousHeight !== 0 && scrollHeight > 0) {
-        const focusBlockRect = currentNodeElement.getBoundingClientRect();
-        const scrollContainerRect = scrollContainerElement.getBoundingClientRect();
-        const bottom = scrollContainerRect.bottom - focusBlockRect.bottom;
-        if (bottom < 30) {
-            scrollContainerElement.scrollTop = scrollContainerElement.scrollTop + scrollHeight;
-        }
+    const scrollOffset = scrollHeight - focusBlockRect.bottom;
+    if (currentHeight && scrollOffset < 30) {
+        // 16 为底部间隔，防止紧贴底部
+        scrollContainerElement.scrollTop = scrollContainerElement.scrollTop - scrollOffset + 16;
     }
     previousHeight = currentHeight;
 };
@@ -2790,10 +2802,10 @@ class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
     }
 }
 TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", 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: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] });
+TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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" }]
+            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: [{
                 type: HostBinding,
                 args: ['class']
@@ -3284,10 +3296,10 @@ class TheColorSelectComponent {
     }
 }
 TheColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheColorSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.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.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$1.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.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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" }]
+            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: [{
                 type: Input
             }], selectAction: [{
@@ -3368,6 +3380,7 @@ var TableOperations;
 const BASE_CELL_HEIGHT = 41; // min height
 const BASE_FILL_HEIGHT = 2 * 8 + 1; // padding * 2 + border 1
 const BASE_CELL_INNER_HEIGHT = BASE_CELL_HEIGHT - BASE_FILL_HEIGHT; // 24
+const TableWithStickyRowClass = 'the-table-with-sticky-row';
 class TableOptions {
     constructor(options) {
         // The type of table blocks
@@ -3737,12 +3750,14 @@ function isRectangularInTableCells(editor, cells) {
             selectCellSize--;
             continue;
         }
-        if (rowspan && colspan) {
+        if (rowspan || colspan) {
+            const colSpan = colspan ?? 1;
+            const rowSpan = rowspan ?? 1;
             // 更新视觉选中的个数
-            selectCellSize = selectCellSize + (rowspan * colspan - 1);
+            selectCellSize = selectCellSize + (rowSpan * colSpan - 1);
             // 纠正合并单元格下的 row 和 col 的真实值
-            col = col + colspan - 1;
-            row = row + rowspan - 1;
+            row = row + rowSpan - 1;
+            col = col + colSpan - 1;
         }
         maxCol = col > maxCol ? col : maxCol;
         minCol = col < minCol ? col : minCol;
@@ -5240,10 +5255,10 @@ class TheTableSelectComponent {
     }
 }
 TheTableSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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"] }] });
+TheTableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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: "15.2.2", 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" }]
+            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: [{
                 type: Input
             }], editor: [{
@@ -5300,7 +5315,7 @@ TheListboxOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.
             provide: THE_LISTBOX_PARENT_OPTION_TOKEN,
             useExisting: TheListboxOptionDirective
         }
-    ], queries: [{ propertyName: "_options", predicate: TheListboxOptionDirective, descendants: true }], exportAs: ["theListboxOption"], ngImport: i0 });
+    ], queries: [{ propertyName: "_options", predicate: i0.forwardRef(function () { return TheListboxOptionDirective; }), descendants: true }], exportAs: ["theListboxOption"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheListboxOptionDirective, decorators: [{
             type: Directive,
             args: [{
@@ -5328,7 +5343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 args: ['class']
             }], _options: [{
                 type: ContentChildren,
-                args: [TheListboxOptionDirective, { descendants: true }]
+                args: [forwardRef(() => TheListboxOptionDirective), { descendants: true }]
             }], theOptionValue: [{
                 type: Input
             }], theOptionDisabled: [{
@@ -5791,10 +5806,10 @@ class ThePluginMenuComponent extends mixinUnsubscribe(MixinBase) {
     }
 }
 ThePluginMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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.ThyInputSearchComponent, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i6.ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions"], 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.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"] }] });
+ThePluginMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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.ThyInputSearchComponent, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i6.ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions"], 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.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: "15.2.2", 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" }]
+            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: [{
                 type: ViewChildren,
                 args: ['dropdownTriggers', { read: ThyDropdownDirective }]
@@ -5957,13 +5972,13 @@ class TheVerticalToolbarItemComponent extends TheBaseToolbarDropdown {
     }
 }
 TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", 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: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-vertical-align-item', host: {
                         class: 'the-toolbar-dropdown-container verticalAlign',
                         '[class.hide]': '!active'
-                    }, 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" }]
+                    }, 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" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
                 type: ViewChild,
                 args: ['VerticalAlignItems', { read: TemplateRef, static: true }]
@@ -6125,9 +6140,9 @@ const TableEditor = {
         const tableNode = getAboveByType(editor, ElementKinds.table);
         if (tableNode) {
             const tableComponent = ELEMENT_TO_COMPONENT.get(tableNode[0]);
-            const cells = tableComponent.tableStore.selectedCells;
-            if (cells.length > 0) {
-                return cells;
+            const selectedCellPositions = tableComponent.tableStore.selectedCellPositions;
+            if (selectedCellPositions.length > 0) {
+                return selectedCellPositions;
             }
         }
         return null;
@@ -7038,10 +7053,10 @@ class TheCodeComponent extends TheBaseElementComponent {
     }
 }
 TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: i13.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["itemMousedownHandle"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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$1.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: i13.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["itemMousedownHandle"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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" }]
+            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 () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.ThyNotifyService }, { type: TheContextService }, { type: i0.NgZone }, { type: TheModeConfig, decorators: [{
                     type: Inject,
                     args: [THE_MODE_TOKEN]
@@ -7973,12 +7988,12 @@ class TheConversionHintComponent {
     }
 }
 TheConversionHintComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheConversionHintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheConversionHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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 });
+TheConversionHintComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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: "15.2.2", ngImport: i0, type: TheConversionHintComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-conversion-hint', host: {
                         class: 'the-conversion-hint'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
         }], propDecorators: { editor: [{
                 type: Input
             }], conversion: [{
@@ -8749,10 +8764,10 @@ class TheImageComponent extends TheBaseElementComponent {
     }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", 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: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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" }]
+            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]
@@ -9052,10 +9067,10 @@ class TheLinkHoverComponent {
     }
 }
 TheLinkHoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheLinkHoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheLinkHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] });
+TheLinkHoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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" }]
+            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: [{
                 type: Input
             }], dom: [{
@@ -9136,10 +9151,10 @@ class TheLinkEditComponent {
     }
 }
 TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i3$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i3$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i3$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: i5$1.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: i5.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"] }] });
+TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i3$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i3$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i3$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: i5$1.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: i5.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: "15.2.2", 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" }]
+            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: [{
                 type: HostBinding,
                 args: ['class']
@@ -10936,10 +10951,10 @@ class TheToolbarGroupComponent {
     }
 }
 TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "document:mouseup": "documentMouseupHandle($event)", "click": "clickHandle($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a\n    href=\"javascript:;\"\n    thyAction\n    [thyActionIcon]=\"item.icon\"\n    [thyActionActive]=\"active\"\n    [thyTooltip]=\"item?.name\"\n    thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] });
+TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "document:mouseup": "documentMouseupHandle($event)", "click": "clickHandle($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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" }]
+            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']
@@ -11173,10 +11188,10 @@ function mergeCellContent(editor, leftTopCellPath, cellPath) {
 }
 
 function setCellMenuVisibility(editor, menuList, tableInfo) {
-    const { selectedCells, isFullscreen, isSelectedTable, selectedRowsIndex, selectedColumnsIndex } = tableInfo;
+    const { selectedCellPositions, isFullscreen, isSelectedTable, selectedRowsIndex, selectedColumnsIndex } = tableInfo;
     const isCellMerged = isSelectedCellMerged(editor);
-    const selectCellNodes = getSelectCellNode(editor, selectedCells).filter(item => !item.node.hidden);
-    const isRect = isRectangularInTableCells(editor, selectedCells);
+    const selectCellNodes = getSelectCellNode(editor, selectedCellPositions).filter(item => !item.node.hidden);
+    const isRect = isRectangularInTableCells(editor, selectedCellPositions);
     menuList.forEach(item => {
         switch (item.key) {
             case 'merge-cells':
@@ -11253,10 +11268,10 @@ class TheContextMenuComponent {
     ngOnInit() { }
 }
 TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", 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)=\"itemEnterHandle($event, item)\"\n                thyStopPropagation\n            ></thy-input-number>\n            {{ item.nameSuffix }}\n        </span>\n    </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$1.ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: i7$1.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }] });
+TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$1.ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: i7$1.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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)=\"itemEnterHandle($event, item)\"\n                thyStopPropagation\n            ></thy-input-number>\n            {{ item.nameSuffix }}\n        </span>\n    </a>\n</ng-template>\n" }]
+            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)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
                 type: Input
             }], actionHandle: [{
@@ -11277,8 +11292,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }] } });
 
 class TableStore {
-    get selectedCells() {
-        return this.selectedCells$.getValue();
+    get selectedCellPositions() {
+        return this.getSelectedCellPositions();
     }
     get dangerousCells() {
         return this.dangerousCells$.getValue();
@@ -11298,7 +11313,7 @@ class TableStore {
         this.pointerSelection = false;
         this.isSelectedAllCell = () => {
             const pos = this.createTablePosition();
-            return !!this.selectedCells.length && pos.getHeight() * pos.getWidth() === this.selectedCells.length;
+            return !!this.selectedCellPositions.length && pos.getHeight() * pos.getWidth() === this.selectedCellPositions.length;
         };
         this.createTablePosition = () => {
             const { path } = this.editor.selection.anchor;
@@ -11314,16 +11329,29 @@ class TableStore {
         const tableEntry = this.getTableEntry();
         return tableEntry[1];
     }
-    updateCellPositionRefs(row = 0, col = 0) {
-        const cells = [];
-        this.selectedCells.forEach(cell => {
-            cells.push({ ...cell, row: cell.row + row, col: cell.col + col });
+    getSelectedCellPositions() {
+        return this.selectedCells$.getValue().map((cell) => {
+            const path = AngularEditor.findPath(this.editor, cell);
+            const [row, col] = path.slice(-2);
+            return { row, col };
         });
-        this.selectedCells$.next(cells);
     }
-    setSelectedCells(cells, pos) {
-        const rowGroup = groupBy(cells, ({ row, col }) => row);
-        const colGroup = groupBy(cells, ({ row, col }) => col);
+    calculateSelectedColumnsAndRowIndex() {
+        if (!this.editor?.selection) {
+            return;
+        }
+        const pos = this.createTablePosition();
+        if (!pos?.table) {
+            return;
+        }
+        const mergeBeforeCells = [];
+        this.selectedCellPositions.forEach(({ row, col }) => {
+            // 计算合并单元格数据时，要按合并前的数据处理
+            mergeBeforeCells.push(...this.getCellPositionsBeforeMerge({ row, col }));
+        });
+        const cells = this.uniqueCellPosition(mergeBeforeCells);
+        const rowGroup = groupBy(cells, ({ row }) => row);
+        const colGroup = groupBy(cells, ({ col }) => col);
         this.selectedRowsIndex = [];
         this.selectedColumnsIndex = [];
         for (const row in rowGroup) {
@@ -11344,7 +11372,14 @@ class TableStore {
         else {
             this.isSelectedTable = false;
         }
-        this.selectedCells$.next(cells);
+    }
+    setSelectedCells(cells, pos) {
+        const uniqueCells = this.pointerSelection ? this.uniqueCellPosition(cells) : cells;
+        const cellElements = uniqueCells.map(cell => {
+            return pos.findCellByPath(cell);
+        });
+        this.selectedCells$.next(cellElements);
+        this.calculateSelectedColumnsAndRowIndex();
     }
     initEditor(editor) {
         this.editor = editor;
@@ -11354,14 +11389,11 @@ class TableStore {
      * @returns
      */
     uniqueCellPosition(cells) {
-        let result = [];
-        if (this.pointerSelection) {
-            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;
-        }
-        return cells;
+        const result = [];
+        const modCells = new Set();
+        cells.concat(this.selectedCellPositions).forEach(cell => modCells.add(JSON.stringify(cell)));
+        modCells.forEach((cell) => result.push(JSON.parse(cell)));
+        return result;
     }
     /**
      * 获取一定范围内所有的单元格
@@ -11378,20 +11410,16 @@ class TableStore {
     }
     selectRow(editor, index) {
         this.clearLastFocusPath();
-        this.selectedRowsIndex = [index];
-        this.selectedColumnsIndex = [];
         const pos = this.createTablePosition();
-        const result = this.getCellPositionsFromRange(index, 0, index + 1, pos.getWidth());
-        this.setSelectedCells(this.uniqueCellPosition(result), pos);
+        const cells = this.getCellPositionsFromRange(index, 0, index + 1, pos.getWidth());
+        this.setSelectedCells(cells, pos);
         this.focusCell(editor, pos.tableEntry[1].concat([index, 0]));
     }
     selectColumn(editor, index) {
         this.clearLastFocusPath();
-        this.selectedColumnsIndex = [index];
-        this.selectedRowsIndex = [];
         const pos = this.createTablePosition();
-        const result = this.getCellPositionsFromRange(0, index, pos.getHeight(), index + 1);
-        this.setSelectedCells(this.uniqueCellPosition(result), pos);
+        const cells = this.getCellPositionsFromRange(0, index, pos.getHeight(), index + 1);
+        this.setSelectedCells(cells, pos);
         this.focusCell(editor, pos.tableEntry[1].concat([0, index]));
     }
     selectTable(editor) {
@@ -11417,15 +11445,15 @@ class TableStore {
         let initMaxCol = Math.max(anchorCol, focusCol);
         let initMaxRow = Math.max(anchorRow, focusRow);
         const { minRow, maxRow, minCol, maxCol } = this.getMinAndMaxCellIndex(initMaxRow, initMaxCol, rows[0], columns[0], pos.table);
-        const result = this.getCellPositionsFromRange(minRow, minCol, maxRow + 1, maxCol + 1);
-        this.setSelectedCells(this.uniqueCellPosition(result), pos);
+        const cells = this.getCellPositionsFromRange(minRow, minCol, maxRow + 1, maxCol + 1);
+        this.setSelectedCells(cells, pos);
     }
     getMinAndMaxCellIndex(maxRow, maxCol, minRow, minCol, table) {
         const beforeCols = [];
         const beforeRows = [];
         let spanSelectedCells = [];
-        if (this.selectedCells.length) {
-            spanSelectedCells = this.selectedCells
+        if (this.selectedCellPositions.length) {
+            spanSelectedCells = this.selectedCellPositions
                 .map(item => {
                 const { row, col } = item;
                 const node = table.children[row].children[col];
@@ -11494,21 +11522,27 @@ class TableStore {
         const pos = this.createTablePosition();
         const result = [{ row, col }];
         if (this.pointerSelection) {
-            result.push(...this.selectedCells);
+            result.push(...this.selectedCellPositions);
             // 处理单元格选中时，处理为选中多单元格
-            result.push(...this.getCellPositionsBeforeMerge({ row, col }));
+            const selectedCells = this.getCellPositionsBeforeMerge({ row, col });
+            result.push(...selectedCells);
             // 已聚焦的单元格在多选模式下选中（暂存上次聚焦的单元格数据）
             const focusCell = this.lastFocusCellPath?.slice(-2);
-            focusCell && result.push(...this.getCellPositionsBeforeMerge({ row: focusCell[0], col: focusCell[1] }));
+            if (focusCell) {
+                const focusCells = this.getCellPositionsBeforeMerge({ row: focusCell[0], col: focusCell[1] });
+                result.push(...focusCells);
+            }
         }
-        this.setSelectedCells(this.uniqueCellPosition(result), pos);
+        this.setSelectedCells(result, pos);
     }
     // 计算合并前的单元格
     getCellPositionsBeforeMerge({ row, col }) {
         const pos = this.createTablePosition();
         const { rowspan, colspan } = pos.findCellByPath({ row, col });
-        if (rowspan && colspan) {
-            return this.getCellPositionsFromRange(row, col, row + rowspan, col + colspan);
+        if (rowspan || colspan) {
+            const colSpan = colspan ?? 1;
+            const rowSpan = rowspan ?? 1;
+            return this.getCellPositionsFromRange(row, col, row + rowSpan, col + colSpan);
         }
         return [{ row, col }];
     }
@@ -11567,7 +11601,7 @@ class TableStore {
         else {
             isChanged =
                 !this.focusCellPath ||
-                    (this.focusCellPath.toString() === this.anchorCellPath.toString() && this.selectedCells.length === 0);
+                    (this.focusCellPath.toString() === this.anchorCellPath.toString() && this.selectedCellPositions.length === 0);
         }
         if (this.isPrepareSelecting && isChanged) {
             if (JSON.stringify(this.preFocusCellPath) !== JSON.stringify(this.focusCellPath)) {
@@ -11595,7 +11629,7 @@ class TableStore {
     setDangerousCells() {
         this.dangerousRowsIndex = this.selectedRowsIndex;
         this.dangerousColumnsIndex = this.selectedColumnsIndex;
-        this.dangerousCells$.next(this.selectedCells);
+        this.dangerousCells$.next(this.selectedCellPositions);
     }
     clearDangerousCells() {
         this.dangerousRowsIndex = [];
@@ -11610,7 +11644,7 @@ class TableStore {
         return merge(this.dangerousCells$.asObservable().pipe(skip(1)), this.selectedCells$.asObservable().pipe(skip(1)));
     }
     setDangerousRows() {
-        const cells = this.selectedCells;
+        const cells = this.selectedCellPositions;
         const rows = uniq(map(cells, 'row')).valueOf();
         const pos = this.createTablePosition();
         const result = [];
@@ -11630,7 +11664,7 @@ class TableStore {
         this.dangerousCells$.next(result);
     }
     setDangerousColumns() {
-        const cells = this.selectedCells;
+        const cells = this.selectedCellPositions;
         const cols = uniq(map(cells, 'col')).valueOf();
         const pos = this.createTablePosition();
         const result = [];
@@ -11658,13 +11692,13 @@ class TableStore {
         this.dangerousCells$.next(cells);
     }
     selectFirstCell() {
-        const { row, col } = this.selectedCells[0];
+        const { row, col } = this.selectedCellPositions[0];
         const tablePath = this.getTablePath();
         const path = Editor.start(this.editor, [...tablePath, row, col]);
         Transforms.select(this.editor, path);
     }
     setSelectedCellsBackgroundColor(backgroundColor) {
-        const cells = this.selectedCells;
+        const cells = this.selectedCellPositions;
         const tablePath = this.getTablePath();
         Editor.withoutNormalizing(this.editor, () => {
             for (const { row, col } of cells) {
@@ -11681,7 +11715,7 @@ class TableStore {
         return '';
     }
     clearSelectedCellsContent() {
-        const cells = this.selectedCells;
+        const cells = this.selectedCellPositions;
         const tablePosition = this.createTablePosition();
         if (tablePosition.isInTable()) {
             Editor.withoutNormalizing(this.editor, () => {
@@ -11695,7 +11729,7 @@ class TableStore {
         }
     }
     mergeCell(editor) {
-        mergeCell(editor, this.selectedCells);
+        mergeCell(editor, this.selectedCellPositions);
     }
     setTableOptions(editor, newOptions) {
         const tablePosition = this.createTablePosition();
@@ -11818,7 +11852,6 @@ class TheTableContextMenuService {
                 actionHandle: (item) => {
                     const { targetRowIndex } = this.getTargetRowOrColIndex();
                     TableEditor.insertRow(this.editor, item.count, targetRowIndex);
-                    this.tableStore.updateCellPositionRefs(item.count);
                     this.tableStore.changeCells();
                 }
             },
@@ -11845,7 +11878,6 @@ class TheTableContextMenuService {
                 actionHandle: (item) => {
                     const { targetColIndex } = this.getTargetRowOrColIndex();
                     TableEditor.insertColumn(this.editor, item.count, targetColIndex);
-                    this.tableStore.updateCellPositionRefs(0, item.count);
                     this.tableStore.changeCells();
                 }
             },
@@ -11939,8 +11971,9 @@ class TheTableContextMenuService {
         ];
     }
     getSelectedCell() {
-        const cells = this.tableStore.selectedCells;
-        const selectCellNodes = getSelectCellNode(this.editor, cells);
+        const selectedCellPositions = this.tableStore.selectedCellPositions;
+        const selectCellNodes = getSelectCellNode(this.editor, selectedCellPositions);
+        sortCell(selectCellNodes);
         const leftCellDict = getLeftCellDict(selectCellNodes);
         const { rowspan, colspan } = calculateCellSpan(selectCellNodes, leftCellDict);
         return { row: rowspan, col: colspan, selectCellNodes };
@@ -11954,8 +11987,8 @@ class TheTableContextMenuService {
     }
     openMenuList(event) {
         this.ngZone.run(() => {
-            const { selectedCells, isFullscreen, selectedRowsIndex, selectedColumnsIndex, isSelectedTable } = this.tableStore;
-            const tableInfo = { selectedCells, isFullscreen, selectedRowsIndex, selectedColumnsIndex, isSelectedTable };
+            const { selectedCellPositions, isFullscreen, selectedRowsIndex, selectedColumnsIndex, isSelectedTable } = this.tableStore;
+            const tableInfo = { selectedCellPositions, isFullscreen, selectedRowsIndex, selectedColumnsIndex, isSelectedTable };
             const { row, col } = this.getSelectedCell();
             setCellMenuVisibility(this.editor, this.menuEntities, tableInfo);
             this.menuEntities.forEach(item => {
@@ -12162,9 +12195,9 @@ class TheTableToolbarComponent {
     }
     ngOnInit() {
         this.isColumnEqual = this.tableElement?.columns?.every(col => this.tableElement.columns[0].width === col.width) ?? true;
-        const { selectedCells, isSelectedTable } = this.tableStore;
-        const tableInfo = { selectedCells, isSelectedTable };
-        this.isRectangle = isRectangularInTableCells(this.editor, selectedCells);
+        const { selectedCellPositions, isSelectedTable } = this.tableStore;
+        const tableInfo = { selectedCellPositions, isSelectedTable };
+        this.isRectangle = isRectangularInTableCells(this.editor, selectedCellPositions);
         this.setDeleteIcon();
         setCellMenuVisibility(this.editor, this.cellMenuList, tableInfo);
         this.selectedColor = this.tableStore.getSelectedCellBackgroundColor();
@@ -12179,7 +12212,7 @@ class TheTableToolbarComponent {
         this.colorSelectService.closeColorSelect();
     }
     setDeleteIcon() {
-        const { selectedCells, selectedRowsIndex, selectedColumnsIndex, createTablePosition } = this.tableStore;
+        const { selectedCellPositions, selectedRowsIndex, selectedColumnsIndex, createTablePosition } = this.tableStore;
         const pos = createTablePosition();
         if (this.tableStore.selectedRowsIndex.length > 0) {
             this.deleteIcon = DeleteIcon['table-delete-rows'];
@@ -12194,8 +12227,8 @@ class TheTableToolbarComponent {
             this.iconName = '删除表格';
         }
         // 满足已选中整行或者整列
-        const isSelectedWholeRowOrColumnCell = selectedRowsIndex.length * pos.getWidth() === selectedCells.length ||
-            selectedColumnsIndex.length * pos.getHeight() === selectedCells.length;
+        const isSelectedWholeRowOrColumnCell = selectedRowsIndex.length * pos.getWidth() === selectedCellPositions.length ||
+            selectedColumnsIndex.length * pos.getHeight() === selectedCellPositions.length;
         if (!isSelectedWholeRowOrColumnCell) {
             this.deleteIcon = null;
             this.iconName = null;
@@ -12278,10 +12311,10 @@ class TheTableToolbarComponent {
     }
 }
 TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }, { token: i1$2.ThyNotifyService }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", 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 && !isColumnEqual\"\n        thyAction\n        thyTooltip=\"\u5217\u7B49\u5BBD\"\n        (mousedown)=\"setEquallyColumnHandle($event)\"\n    >\n        <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n    </a>\n    <a\n        href=\"javascript:;\"\n        *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n        thyAction\n        thyTooltip=\"\u5168\u5C4F\"\n        (mousedown)=\"setFullscreen($event)\"\n    >\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n    <a\n        *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n        class=\"fullscreen-hidden\"\n        href=\"javascript:;\"\n        thyAction\n        thyActionIcon=\"copy\"\n        thyTooltip=\"\u590D\u5236\"\n        (mousedown)=\"onCopy($event)\"\n    ></a>\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    <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: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
+TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", 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 && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (mousedown)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (mousedown)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (mousedown)=\"onCopy($event)\"\n  ></a>\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  <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: i7.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i7.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i8$1.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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 && !isColumnEqual\"\n        thyAction\n        thyTooltip=\"\u5217\u7B49\u5BBD\"\n        (mousedown)=\"setEquallyColumnHandle($event)\"\n    >\n        <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n    </a>\n    <a\n        href=\"javascript:;\"\n        *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n        thyAction\n        thyTooltip=\"\u5168\u5C4F\"\n        (mousedown)=\"setFullscreen($event)\"\n    >\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n    <a\n        *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n        class=\"fullscreen-hidden\"\n        href=\"javascript:;\"\n        thyAction\n        thyActionIcon=\"copy\"\n        thyTooltip=\"\u590D\u5236\"\n        (mousedown)=\"onCopy($event)\"\n    ></a>\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    <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" }]
+            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 && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (mousedown)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (mousedown)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (mousedown)=\"onCopy($event)\"\n  ></a>\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  <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 }, { type: i1$2.ThyNotifyService }]; }, propDecorators: { tableStore: [{
                 type: Input
             }], tableElement: [{
@@ -12511,7 +12544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 
 class TheInsertMarkComponent {
     get disabled() {
-        return this.tableStore && !!this.tableStore.selectedCells.length;
+        return this.tableStore && !!this.tableStore.selectedCellPositions.length;
     }
     get editor() {
         return this.tableStore && this.tableStore.editor;
@@ -12582,12 +12615,12 @@ class TheInsertMarkComponent {
     }
 }
 TheInsertMarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, ngImport: i0, template: "<div\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  <div\n    class=\"the-table-controls-insert-line\"\n    *ngIf=\"dotWrapperHovered\"\n    [attr.data-dot-type]=\"type\"\n    [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-insert-mark', host: {
                         class: '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" }]
+                    }, 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: [{
                 type: Input
             }], at: [{
@@ -12598,7 +12631,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                 type: Input
             }] } });
 
-const TableWithStickyRowClass = 'the-table-with-sticky-row';
 class TheTableComponent extends TheBaseElementComponent {
     get columns() {
         return this.element && this.element.columns;
@@ -12624,6 +12656,7 @@ class TheTableComponent extends TheBaseElementComponent {
         if (this.initialized) {
             Promise.resolve().then(() => {
                 this.tableStore.emitTableChange();
+                this.tableStore.calculateSelectedColumnsAndRowIndex();
                 this.bindTableScrollingShadow();
                 this.useRowControls();
                 this.setHeaderCellStyle();
@@ -12652,7 +12685,6 @@ class TheTableComponent extends TheBaseElementComponent {
         this.destroy$ = new Subject();
         this.rowControls = [];
         this.colControls = [];
-        this.tableWrapperMarginTop = 0;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -12741,11 +12773,13 @@ class TheTableComponent extends TheBaseElementComponent {
                 const clientRect = this.theTableElement.nativeElement.getBoundingClientRect();
                 const headerTopHeight = this.isInTable ? -19 : 11;
                 const headerRowHeight = this.calculateRowControls()[0]?.height;
-                const top = clientRect.top + headerTopHeight - this.tableWrapperMarginTop;
+                const top = clientRect.top + headerTopHeight;
                 this.isStickyTop =
-                    top <= this.scrollContainerTop + 8 && clientRect.bottom - this.scrollContainerTop >= headerRowHeight;
+                    top <= this.scrollContainerTop + 8 &&
+                        clientRect.bottom - this.scrollContainerTop >= headerRowHeight &&
+                        this.freezeRowPipe.transform(this.element, this.headerRow, this.tablePluginOptions);
                 // 标题行内容超过固定高度时移除冻结
-                if (this.isStickyTop && this.freezeRowPipe.transform(this.element, this.headerRow, this.tablePluginOptions)) {
+                if (this.isStickyTop) {
                     const maxHeaderRowHeight = (24 + 8) * 11; // 超出 11 行，取消冻结
                     this.isStickyTop = headerRowHeight <= maxHeaderRowHeight;
                 }
@@ -12820,9 +12854,17 @@ class TheTableComponent extends TheBaseElementComponent {
             const tablePadding = 44;
             let tableWidth = this.elementRef.nativeElement.offsetWidth;
             tableWidth = this.element.options?.numberedColumn ? tableWidth - tablePadding : tableWidth;
-            const headerRowCells = headerRow.querySelectorAll('td');
-            headerRowCells.forEach(item => {
-                gridColumns += item.offsetWidth + 'px ';
+            const colgroup = this.nativeElement.querySelector('colgroup');
+            let cellElements;
+            if (colgroup) {
+                cellElements = [...this.nativeElement.querySelector('colgroup').children];
+            }
+            else {
+                /* 默认插入的表格元素是没有 columns 字段的（后来做的），所以也就不会渲染 colgroup  */
+                cellElements = [...headerRow.querySelectorAll('td')];
+            }
+            cellElements.forEach(item => {
+                gridColumns += getElementWidth(item) + 'px ';
             });
             stickyRows.map(item => {
                 this.renderer.setStyle(item, 'grid-template-columns', gridColumns);
@@ -12834,30 +12876,32 @@ class TheTableComponent extends TheBaseElementComponent {
         const colControl = this.columnControlsWrapper.nativeElement;
         const headerRow = this.nativeElement.querySelector('tbody tr');
         const rowControlButton = this.rowControlsButtonWrapper.first?.nativeElement;
+        const rowControlInner = this.rowControlsInner.nativeElement;
         const tableCornerBtn = this.cornerControl.nativeElement;
         const headerRowHeight = this.calculateRowControls()[0]?.height;
-        if (this.isStickyTop && this.freezeRowPipe.transform(this.element, this.headerRow, this.tablePluginOptions)) {
+        if (this.isStickyTop) {
             this.renderer.addClass(this.nativeElement, TableWithStickyRowClass);
             this.updateStickyRowScrollLeft();
             const numberedColumn = this.element.options?.numberedColumn;
             const top = this.isInTable ? this.scrollContainerTop + 36 : this.scrollContainerTop;
             this.renderer.setStyle(headerRow, 'top', top + 'px');
-            const buffer = this.element.options?.numberedColumn ? 0 : 8; // margin-bottom
             if (this.isInTable || numberedColumn) {
                 [colControl, tableCornerBtn, rowControlButton].map(item => {
                     item && this.renderer.setStyle(item, 'top', this.scrollContainerTop + 'px');
                 });
             }
-            this.tableWrapperMarginTop = headerRowHeight + buffer;
-            this.renderer.setStyle(this.tableWrapper.nativeElement, 'margin-top', this.tableWrapperMarginTop + 'px');
+            // 优化：table 的 padding-top 应该动态变化（与阴影同变）
+            const tablePaddingTop = headerRowHeight + 11; // 标题行高 + ctrl btn（11px）高度
+            this.renderer.setStyle(this.theTableElement.nativeElement, 'padding-top', tablePaddingTop + 'px');
+            this.renderer.setStyle(rowControlInner, 'padding-top', tablePaddingTop + 'px');
         }
         else {
             this.renderer.removeClass(this.nativeElement, TableWithStickyRowClass);
             [headerRow, colControl, tableCornerBtn, rowControlButton].map(item => {
                 item && this.renderer.setStyle(item, 'top', null);
             });
-            this.renderer.setStyle(this.tableWrapper.nativeElement, 'margin-top', null);
-            this.tableWrapperMarginTop = 0;
+            this.renderer.setStyle(this.theTableElement.nativeElement, 'padding-top', null);
+            this.renderer.setStyle(rowControlInner, 'padding-top', null);
         }
     }
     bindTableScrollingShadow() {
@@ -12892,7 +12936,7 @@ class TheTableComponent extends TheBaseElementComponent {
         this.tableStore
             .cellsPositionChange()
             .pipe(debounceTime(100), takeUntil(this.destroy$))
-            .subscribe(x => {
+            .subscribe(() => {
             this.cdr.detectChanges();
         });
     }
@@ -13169,7 +13213,7 @@ class TheTableComponent extends TheBaseElementComponent {
             return !isVirtualKey(e) && !this.theTableContextMenuService.isOpened;
         })))
             .pipe(filter(() => {
-            return this.tableStore.selectedCells && this.tableStore.selectedCells.length > 0;
+            return this.tableStore.selectedCellPositions?.length > 0;
         }), takeUntil(this.destroy$))
             .subscribe((e) => {
             if (e.type === 'keydown') {
@@ -13232,8 +13276,7 @@ class TheTableComponent extends TheBaseElementComponent {
     }
     updateStickyRowScrollLeft() {
         // 判断是否出现固定标题行
-        const isStickyTopRow = this.elementRef.nativeElement.className.includes(TableWithStickyRowClass);
-        if (isStickyTopRow) {
+        if (this.isStickyTop) {
             const stickyRows = this.elementRef.nativeElement.querySelectorAll('.the-sticky-row');
             for (const stiRow of stickyRows) {
                 // 同步滚动状态到 .the-sticky-row
@@ -13266,7 +13309,7 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             provide: THE_TABLE_COMPONENT_TOKEN,
             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 }, { propertyName: "columnControlsWrapper", first: true, predicate: ["columnControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "cornerControl", first: true, predicate: ["cornerControl"], descendants: true, read: ElementRef }, { propertyName: "rowControlsButtonWrapper", predicate: ["rowControlsButtonWrapper"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-table-container\" theColumnResize>\n    <div class=\"the-table-row-controls-wrapper\">\n        <div\n            class=\"the-table-corner-controls the-sticky-corner-controls\"\n            #cornerControl\n            [ngClass]=\"{\n                visible: !readonly && (isInTable || tableStore.isRightClicking),\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\" *ngIf=\"!headerRow\">\n                <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n            <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element.options?.headerColumn\">\n                <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n        </div>\n        <div class=\"the-table-row-controls\">\n            <div class=\"the-table-row-controls-inner\">\n                <div\n                    class=\"the-table-row-controls-button-wrap\"\n                    #rowControlsButtonWrapper\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 || tableStore.isRightClicking) && !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>\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 the-sticky-row\" #columnControlsWrapper>\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 || tableStore.isRightClicking\"\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" }] });
+    ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }, { propertyName: "columnControlsWrapper", first: true, predicate: ["columnControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "cornerControl", first: true, predicate: ["cornerControl"], descendants: true, read: ElementRef }, { propertyName: "rowControlsInner", first: true, predicate: ["rowControlsInner"], descendants: true, read: ElementRef }, { propertyName: "rowControlsButtonWrapper", predicate: ["rowControlsButtonWrapper"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-table-container\" theColumnResize>\n  <div class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls the-sticky-corner-controls\"\n      #cornerControl\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n      <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow\">\n        <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n      <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element.options?.headerColumn\">\n        <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        <div\n          class=\"the-table-row-controls-button-wrap\"\n          #rowControlsButtonWrapper\n          *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n          [ngClass]=\"{\n            'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n          }\"\n        >\n          <ng-container *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking) && !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>\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 the-sticky-row\" #columnControlsWrapper>\n          <th\n            #colControl\n            class=\"the-table-col-controls\"\n            *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n            [ngClass]=\"{\n              'the-sticky-cell': i === 0 && element | freezeColumn : tablePluginOptions,\n              'control-active': tableStore.selectedColumnsIndex.includes(i),\n              dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n            }\"\n            (mousedown)=\"onColMousedown($event, i)\"\n          >\n            <the-table-insert-mark\n              *ngIf=\"isInTable || tableStore.isRightClicking\"\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: "15.2.2", ngImport: i0, type: TheTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table, [theTable]', providers: [
@@ -13286,7 +13329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                         '[class.the-table-with-sticky-column]': 'element?.options?.headerColumn',
                         '[class.the-numberd-table]': 'element?.options?.numberedColumn',
                         '[class.the-table-selection-hide]': 'tableStore.isCellSelecting || tableStore.isRightClicking'
-                    }, template: "<div class=\"the-table-container\" theColumnResize>\n    <div class=\"the-table-row-controls-wrapper\">\n        <div\n            class=\"the-table-corner-controls the-sticky-corner-controls\"\n            #cornerControl\n            [ngClass]=\"{\n                visible: !readonly && (isInTable || tableStore.isRightClicking),\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\" *ngIf=\"!headerRow\">\n                <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n            <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element.options?.headerColumn\">\n                <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n            </div>\n        </div>\n        <div class=\"the-table-row-controls\">\n            <div class=\"the-table-row-controls-inner\">\n                <div\n                    class=\"the-table-row-controls-button-wrap\"\n                    #rowControlsButtonWrapper\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 || tableStore.isRightClicking) && !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>\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 the-sticky-row\" #columnControlsWrapper>\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 || tableStore.isRightClicking\"\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 class=\"the-table-container\" theColumnResize>\n  <div class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls the-sticky-corner-controls\"\n      #cornerControl\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></div>\n      <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!headerRow\">\n        <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n      <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element.options?.headerColumn\">\n        <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        <div\n          class=\"the-table-row-controls-button-wrap\"\n          #rowControlsButtonWrapper\n          *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n          [ngClass]=\"{\n            'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n          }\"\n        >\n          <ng-container *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking) && !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>\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 the-sticky-row\" #columnControlsWrapper>\n          <th\n            #colControl\n            class=\"the-table-col-controls\"\n            *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n            [ngClass]=\"{\n              'the-sticky-cell': i === 0 && element | freezeColumn : tablePluginOptions,\n              'control-active': tableStore.selectedColumnsIndex.includes(i),\n              dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n            }\"\n            (mousedown)=\"onColMousedown($event, i)\"\n          >\n            <the-table-insert-mark\n              *ngIf=\"isInTable || tableStore.isRightClicking\"\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 }, { type: TableFreezeRowPipe }, { type: i0.Renderer2 }, { type: TheContextService }]; }, propDecorators: { tableWrapper: [{
                 type: ViewChild,
                 args: ['tableWrapper', { read: ElementRef, static: true }]
@@ -13302,6 +13345,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
             }], cornerControl: [{
                 type: ViewChild,
                 args: ['cornerControl', { read: ElementRef, static: false }]
+            }], rowControlsInner: [{
+                type: ViewChild,
+                args: ['rowControlsInner', { read: ElementRef, static: false }]
             }], rowControlsButtonWrapper: [{
                 type: ViewChildren,
                 args: ['rowControlsButtonWrapper', { read: ElementRef }]
@@ -13741,6 +13787,9 @@ function getBaseHeightForRows(editor, table) {
 
 const OVERLAY_ACTIVE_CLASS = 'the-resizable-overlay-thumb-active';
 const OVERLAY_INIT_SIZE = 16;
+const TABLE_INSERT_MASK = 19;
+const TABLE_BORDER = 1;
+const TABLE_PADDING = 8;
 const POSITION_MAP = {
     top: {
         originX: 'start',
@@ -13861,13 +13910,12 @@ class TheTdComponent extends TheBaseElementComponent {
         this.tableStore
             .selectedCellsChange()
             .pipe(takeUntil(this.destroy$))
-            .subscribe(x => {
-            if (x.length === 0) {
+            .subscribe(cellElements => {
+            if (cellElements.length === 0) {
                 this.renderer.removeClass(this.elementRef.nativeElement, 'selected-cell');
             }
             else {
-                const selectCellNodes = getSelectCellNode(this.editor, x);
-                const isSelectedCell = selectCellNodes.find(cell => cell.node === this.element);
+                const isSelectedCell = cellElements.find(cell => cell === this.element);
                 if (isSelectedCell) {
                     this.renderer.addClass(this.elementRef.nativeElement, 'selected-cell');
                 }
@@ -14141,7 +14189,10 @@ class TheTdComponent extends TheBaseElementComponent {
         const tableElementRect = this.tableElement.getBoundingClientRect();
         const tableElementTop = tableElementRect.top;
         const tableElementBottom = tableElementRect.bottom;
-        if (tableElementTop < this.scrollableElementTop) {
+        if (this.getIsStickyTopRow()) {
+            height = tableElementBottom - this.scrollableElementTop - TABLE_INSERT_MASK - TABLE_PADDING + TABLE_BORDER;
+        }
+        else if (tableElementTop < this.scrollableElementTop) {
             height = this.tableElement.offsetHeight - (this.scrollableElementTop - tableElementTop);
             const editor = this.elementRef.nativeElement.closest('the-editor');
             const toolbar = editor.querySelector('.the-global-toolbar');
@@ -14159,6 +14210,10 @@ class TheTdComponent extends TheBaseElementComponent {
         }
         this.overlayRef.updateSize({ height, width: OVERLAY_INIT_SIZE, maxHeight: 'inherit' });
     }
+    getIsStickyTopRow() {
+        const newTableElement = this.tableComponent.nativeElement;
+        return newTableElement.className.includes(TableWithStickyRowClass);
+    }
     updateOverlayHandleRowSize() {
         const width = this.tableComponent.tableWrapper.nativeElement.offsetWidth;
         this.overlayRef.addPanelClass(this.rowResizeClass);
@@ -14175,6 +14230,7 @@ class TheTdComponent extends TheBaseElementComponent {
         this.tableComponent.useRowControls();
         this.tableComponent.detectChanges();
         this.updateOverlayHandleSizeAndOffset();
+        this.tableComponent.setGridColumnsStyle();
     }
     _createOverlayForHandle() {
         // Use of overlays allows us to properly capture click events spanning parts
@@ -14213,6 +14269,14 @@ class TheTdComponent extends TheBaseElementComponent {
     }
     calculateOverlayHandleOffsetY() {
         const tableElementTop = this.tableElement.getBoundingClientRect().top;
+        if (this.getIsStickyTopRow()) {
+            /* 设置固定标题行后，第一个表格元素实际是第二行，第二行和第一行偏移的位置差一个 mask 和与顶部 padding 的位置，所以需要补齐 */
+            return (this.scrollableElementTop -
+                this.elementRef.nativeElement.getBoundingClientRect().top +
+                TABLE_INSERT_MASK +
+                TABLE_PADDING -
+                TABLE_BORDER);
+        }
         if (tableElementTop < this.scrollableElementTop) {
             return this.scrollableElementTop - this.elementRef.nativeElement.getBoundingClientRect().top;
         }
@@ -14405,10 +14469,10 @@ class TheTdComponent extends TheBaseElementComponent {
     }
 }
 TheTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n    <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", dependencies: [{ kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+TheTdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: TheTdComponent, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], usesInheritance: true, ngImport: i0, template: "<div #cellInner>\n  <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n", dependencies: [{ kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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" }]
+            args: [{ selector: 'td[theTd]', providers: [ColumnResizingStore], template: "<div #cellInner>\n  <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2$1.Overlay }, { type: ColumnResizingStore }, { type: i2$1.ScrollDispatcher }, { type: TableFreezeColumnPipe }]; }, propDecorators: { backgroundColor: [{
                 type: HostBinding,
                 args: ['style.backgroundColor']
@@ -14722,7 +14786,7 @@ const withTable = (editor) => {
         const { selection } = editor;
         const tablePosition = TablePosition.create(opts, editor, selection.anchor.path);
         const tableComponent = ELEMENT_TO_COMPONENT.get(tablePosition.table);
-        const cells = tableComponent.tableStore.selectedCells;
+        const selectedCellPositions = tableComponent.tableStore.selectedCellPositions;
         let tableFragment = null;
         if (tableComponent.tableStore.selectedRowsIndex.length > 0) {
             const rows = tablePosition.table.children.slice(tableComponent.tableStore.selectedRowsIndex[0], tableComponent.tableStore.selectedRowsIndex[tableComponent.tableStore.selectedRowsIndex.length - 1] + 1);
@@ -14731,9 +14795,9 @@ const withTable = (editor) => {
                 children: rows
             };
         }
-        else if (cells.length > 0) {
+        else if (selectedCellPositions.length > 0) {
             const tempRows = {};
-            for (const cell of cells) {
+            for (const cell of selectedCellPositions) {
                 const { row, col } = cell;
                 const cellPath = [...tablePosition.tableEntry[1], row, col];
                 const cellNode = Node.get(editor, cellPath);
@@ -14887,8 +14951,8 @@ const withTable = (editor) => {
         const { selection } = editor;
         const element = TablePosition.create(opts, editor, selection.anchor.path);
         const tableComponent = ELEMENT_TO_COMPONENT.get(element.table);
-        const cells = tableComponent.tableStore.selectedCells;
-        if (cells.length > 0) {
+        const selectedCellPositions = tableComponent.tableStore.selectedCellPositions;
+        if (selectedCellPositions.length > 0) {
             Editor.withoutNormalizing(editor, () => {
                 if (tableComponent.tableStore.isSelectedTable) {
                     TableEditor.removeTable(editor);
@@ -15390,10 +15454,10 @@ class TheQuickInsertComponent {
     }
 }
 TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", 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: "15.2.2", 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"] }] });
+TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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: "15.2.2", 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" }]
+            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: [{
                 type: HostBinding,
                 args: ['class']
@@ -15431,12 +15495,17 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.theOnDOMEvent = new EventEmitter();
         this.theEditorCreated = new EventEmitter();
         this.theUploadingStatus = new EventEmitter(); // true 上传结束 false 上传中
-        this.autoScrollView = debounce(function (editor, scrollContainer) {
-            return autoScrollViewHandle(editor, scrollContainer);
-        }, 80);
         this.elementToHtml = new WeakMap();
         this.onChangeCallback = () => { };
         this.onTouchedCallback = () => { };
+        this.scrollToView = debounce((e) => {
+            const { readonly, disabled, maxHeight, scrollContainer } = this.theOptions;
+            const isEditable = !readonly && !disabled;
+            const isScrollToView = isEditable && (scrollContainer || maxHeight);
+            if (isScrollToView) {
+                return scrollIntoView(e, scrollContainer);
+            }
+        }, 80);
         this.renderElement = (element) => {
             const template = this.templateInstance.renderElement(element);
             const component = this.editor.renderElement(element);
@@ -15609,7 +15678,8 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         if (!this.theOptions) {
             this.theOptions = {
                 readonly: false,
-                mode: TheDataMode.html
+                mode: TheDataMode.html,
+                neededScrollIntoView: () => true
             };
         }
         if (!this.theOptions.mode) {
@@ -15652,15 +15722,9 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.onTouchedCallback = fn;
     }
     valueChange(value) {
-        const isEditable = !this.theOptions?.readonly && !this.theOptions?.disabled;
         this.theGlobalToolbarInstance?.selectionChange(this.editor);
-        // auto scroll view
-        const scrollContainer = this.theOptions?.scrollContainer;
-        const maxHeight = this.theOptions?.maxHeight;
-        if (isEditable && (scrollContainer || maxHeight)) {
-            const container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
-            this.autoScrollView(this.editor, container);
-        }
+        const { neededScrollIntoView } = this.theOptions;
+        neededScrollIntoView(this.editor) && this.scrollToView(this.editor);
         if (this.editorValue === value) {
             return;
         }
@@ -15782,7 +15846,7 @@ 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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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 });
+    ], 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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.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: "15.2.2", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-editor, theEditor', providers: [
@@ -15796,7 +15860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
                     ], host: {
                         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" }]
+                    }, 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$2.ScrollDispatcher }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.ThyIconRegistry }]; }, propDecorators: { theOptions: [{
                 type: Input
             }], thePlugins: [{
@@ -16091,5 +16155,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, 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, copyNodeForSafari, 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, reSelection, recursionNodes, refocus, setEditorUUID, 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, base64toBlob, buildPluginMenu, buildPluginMenuItemMap, coercePixelsFromCssValue, combinePlugins, copyNode, copyNodeForSafari, 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, reSelection, recursionNodes, refocus, scrollIntoView, setEditorUUID, useElementStyle, withMention, withTestPlugin, withTheia };
 //# sourceMappingURL=worktile-theia.mjs.map