@worktile/theia 14.3.14 → 14.3.16

package/fesm2015/worktile-theia.mjs

@@ -2241,12 +2241,21 @@ function useElementStyle(el, element) {
     if (element.align) {
         el.style.textAlign = element.align || Alignment.left;
     }
+    else if (el.style.textAlign) {
+        el.style.removeProperty('text-align');
+    }
     if (element.textIndent) {
         el.style.textIndent = element.textIndent + 'em';
     }
+    else if (el.style.textIndent) {
+        el.style.removeProperty('text-indent');
+    }
     if (element.verticalAlign) {
         el.style.verticalAlign = element.verticalAlign;
     }
+    else if (el.style.verticalAlign) {
+        el.style.removeProperty('vertical-align');
+    }
 }
 function getElementClassByPrefix(el, prefix) {
     let matchClass = null;
@@ -6234,32 +6243,26 @@ const TableEditor = {
         return tableComponent.headerRow;
     },
     hasHeaderRowCell(editor) {
-        const tableNode = getAboveByType(editor, ElementKinds.table);
-        const cells = TableEditor.getSelectedCells(editor);
-        const { row, col } = cells[0];
-        const cellPath = [...tableNode[1], row, col];
-        const cellRange = { anchor: Editor.start(editor, cellPath), focus: Editor.end(editor, cellPath) };
-        const [headerRow] = Editor.nodes(editor, {
+        var _a;
+        const isHeaderRow = Editor.nodes(editor, {
             match: n => {
                 var _a;
                 return Element$1.isElement(n) &&
                     ((n.type === ElementKinds.tableRow && n.header) || (n.type === ElementKinds.table && ((_a = n.options) === null || _a === void 0 ? void 0 : _a.headerRow)));
-            },
-            at: cellRange
+            }
         });
-        return headerRow;
+        const selectedCells = (_a = TableEditor.getSelectedCells(editor)) !== null && _a !== void 0 ? _a : [];
+        sortCell(selectedCells);
+        const isContainHeaderRow = !!selectedCells && selectedCells[0].row === 0;
+        return isHeaderRow && isContainHeaderRow;
     },
     hasHeaderColumnCell(editor) {
-        var _a, _b;
-        const [table] = Editor.nodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.table });
-        const { anchor, focus } = editor.selection;
-        const opts = new TableOptions();
-        const anchorPosition = TablePosition.create(opts, editor, anchor.path);
-        const focusPosition = TablePosition.create(opts, editor, focus.path);
-        const anchorIndex = anchorPosition.getColumnIndex();
-        const focusIndex = focusPosition.getColumnIndex();
-        const isContainHeaderColumn = anchorIndex === 0 || focusIndex === 0;
-        const isHeaderColumn = table && table[0] && ((_b = (_a = table[0]) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.headerColumn);
+        var _a, _b, _c;
+        const table = getAboveByType(editor, ElementKinds.table);
+        const selectedCells = (_a = TableEditor.getSelectedCells(editor)) !== null && _a !== void 0 ? _a : [];
+        sortCell(selectedCells);
+        const isContainHeaderColumn = !!selectedCells && selectedCells[0].col === 0;
+        const isHeaderColumn = table && table[0] && ((_c = (_b = table[0]) === null || _b === void 0 ? void 0 : _b.options) === null || _c === void 0 ? void 0 : _c.headerColumn);
         return isHeaderColumn && isContainHeaderColumn;
     },
     selectOriginCell(editor, table, rowIndex, columnIndex, isStart) {
@@ -11184,14 +11187,14 @@ function mergeCellContent(editor, leftTopCellPath, cellPath) {
 }
 
 function setCellMenuVisibility(editor, menuList, tableInfo) {
-    const { selectedCells, isFullscreen, selectedRowsIndex, selectedColumnsIndex } = tableInfo;
+    const { selectedCells, isFullscreen, isSelectedTable, selectedRowsIndex, selectedColumnsIndex } = tableInfo;
     const isCellMerged = isSelectedCellMerged(editor);
     const selectCellNodes = getSelectCellNode(editor, selectedCells).filter(item => !item.node.hidden);
     const isRect = isRectangularInTableCells(editor, selectedCells);
     menuList.forEach(item => {
         switch (item.key) {
             case 'merge-cells':
-                item.visibility = selectCellNodes && selectCellNodes.length > 1 && isRect;
+                item.visibility = selectCellNodes && selectCellNodes.length > 1 && !isSelectedTable && isRect;
                 break;
             case 'split-cells':
                 item.visibility = selectCellNodes && selectCellNodes.length === 1 && isCellMerged;
@@ -11255,13 +11258,19 @@ class TheContextMenuComponent {
     inputNumberFocus(e) {
         e.target.focus();
     }
+    itemEnterHandle(e, entity) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.actionHandle(entity);
+        this.thyPopoverRef.close();
+    }
     ngOnInit() { }
 }
 TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber\">\n            <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n            <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n        </ng-container>\n        <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n    </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n    <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        (mousedown)=\"itemMousedown($event, item)\"\n        (mouseenter)=\"itemMouseenter($event, item)\"\n        (mouseleave)=\"itemMouseleave($event, item)\"\n    >\n        <span thyDropdownMenuItemIcon>\n            <thy-icon\n                *ngIf=\"item?.backgroundColor; else elseIcon\"\n                [thyIconName]=\"item.icon\"\n                thyIconType=\"twotone\"\n                [thyTwotoneColor]=\"item.backgroundColor\"\n            ></thy-icon>\n            <ng-template #elseIcon>\n                <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            </ng-template>\n        </span>\n        <span thyDropdownMenuItemName>{{ item.name }}</span>\n        <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n            <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n        </span>\n    </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n    <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n        <span thyDropdownMenuItemIcon>\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </span>\n        <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n            {{ item.name }}\n            <thy-input-number\n                #inputNumber\n                class=\"mx-2\"\n                thySize=\"sm\"\n                [(ngModel)]=\"item.count\"\n                [thyStep]=\"1\"\n                [thyMin]=\"1\"\n                (click)=\"inputNumberFocus($event)\"\n                (thyEnter)=\"itemMousedown($event, item)\"\n                thyStopPropagation\n            ></thy-input-number>\n            {{ item.nameSuffix }}\n        </span>\n    </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3$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: "14.2.12", 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: "14.2.12", ngImport: i0, type: TheContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-contextmenu', template: "<div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber\">\n            <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n            <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n        </ng-container>\n        <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n    </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n    <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        (mousedown)=\"itemMousedown($event, item)\"\n        (mouseenter)=\"itemMouseenter($event, item)\"\n        (mouseleave)=\"itemMouseleave($event, item)\"\n    >\n        <span thyDropdownMenuItemIcon>\n            <thy-icon\n                *ngIf=\"item?.backgroundColor; else elseIcon\"\n                [thyIconName]=\"item.icon\"\n                thyIconType=\"twotone\"\n                [thyTwotoneColor]=\"item.backgroundColor\"\n            ></thy-icon>\n            <ng-template #elseIcon>\n                <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            </ng-template>\n        </span>\n        <span thyDropdownMenuItemName>{{ item.name }}</span>\n        <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n            <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n        </span>\n    </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n    <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n        <span thyDropdownMenuItemIcon>\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </span>\n        <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n            {{ item.name }}\n            <thy-input-number\n                #inputNumber\n                class=\"mx-2\"\n                thySize=\"sm\"\n                [(ngModel)]=\"item.count\"\n                [thyStep]=\"1\"\n                [thyMin]=\"1\"\n                (click)=\"inputNumberFocus($event)\"\n                (thyEnter)=\"itemMousedown($event, item)\"\n                thyStopPropagation\n            ></thy-input-number>\n            {{ item.nameSuffix }}\n        </span>\n    </a>\n</ng-template>\n" }]
+            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: [{
@@ -11294,10 +11303,10 @@ class TableStore {
         this.isPrepareSelecting = false;
         this.isCellSelecting = false;
         this.isRightClicking = false;
-        this.isModSelecting = false;
+        this.pointerSelection = false;
         this.isSelectedAllCell = () => {
             const pos = this.createTablePosition();
-            return pos.getHeight() * pos.getWidth() === this.selectedCells.length;
+            return !!this.selectedCells.length && pos.getHeight() * pos.getWidth() === this.selectedCells.length;
         };
     }
     get selectedCells() {
@@ -11314,6 +11323,13 @@ class TableStore {
         const tableEntry = this.getTableEntry();
         return tableEntry[1];
     }
+    updateCellPositionRefs(row = 0, col = 0) {
+        const cells = [];
+        this.selectedCells.forEach(cell => {
+            cells.push(Object.assign(Object.assign({}, cell), { row: cell.row + row, col: cell.col + col }));
+        });
+        this.selectedCells$.next(cells);
+    }
     setSelectedCells(cells, pos) {
         const rowGroup = groupBy(cells, ({ row, col }) => row);
         const colGroup = groupBy(cells, ({ row, col }) => col);
@@ -11348,7 +11364,7 @@ class TableStore {
      */
     uniqueCellPosition(cells) {
         let result = [];
-        if (this.isModSelecting) {
+        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)));
@@ -11483,7 +11499,7 @@ class TableStore {
         const [row, col] = path.slice(-2);
         const pos = this.createTablePosition();
         const result = [{ row, col }];
-        if (this.isModSelecting) {
+        if (this.pointerSelection) {
             result.push(...this.selectedCells);
             // 处理单元格选中时，处理为选中多单元格
             result.push(...this.getCellPositionsBeforeMerge({ row, col }));
@@ -11657,8 +11673,7 @@ class TableStore {
         const cells = this.selectedCells;
         const tablePath = this.getTablePath();
         Editor.withoutNormalizing(this.editor, () => {
-            for (const cell of cells) {
-                const { row, col } = cell;
+            for (const { row, col } of cells) {
                 const cellPath = [...tablePath, row, col];
                 Transforms.setNodes(this.editor, { backgroundColor }, { at: cellPath });
             }
@@ -11676,8 +11691,7 @@ class TableStore {
         const tablePosition = this.createTablePosition();
         if (tablePosition.isInTable()) {
             Editor.withoutNormalizing(this.editor, () => {
-                for (const cell of cells) {
-                    const { row, col } = cell;
+                for (const { row, col } of cells) {
                     const cellPath = [...tablePosition.tableEntry[1], row, col];
                     const node = Node.get(this.editor, cellPath);
                     TableEditor.clearCell(this.editor, [node, cellPath]);
@@ -11701,7 +11715,7 @@ class TableStore {
         this.removeColumnOrRows(dangerousRowsIndex, dangerousColumnsIndex);
     }
     createTablePosition() {
-        const { anchor: { path } } = this.editor.selection;
+        const { path } = this.editor.selection.anchor;
         const opts = new TableOptions();
         return TablePosition.create(opts, this.editor, path);
     }
@@ -11807,6 +11821,7 @@ class TheTableContextMenuService {
                 actionHandle: (item) => {
                     const { targetRowIndex } = this.getTargetRowOrColIndex();
                     TableEditor.insertRow(this.editor, item.count, targetRowIndex);
+                    this.tableStore.updateCellPositionRefs(item.count);
                     this.tableStore.changeCells();
                 }
             },
@@ -11833,6 +11848,7 @@ class TheTableContextMenuService {
                 actionHandle: (item) => {
                     const { targetColIndex } = this.getTargetRowOrColIndex();
                     TableEditor.insertColumn(this.editor, item.count, targetColIndex);
+                    this.tableStore.updateCellPositionRefs(0, item.count);
                     this.tableStore.changeCells();
                 }
             },
@@ -11948,8 +11964,8 @@ class TheTableContextMenuService {
     }
     openMenuList(event) {
         this.ngZone.run(() => {
-            const { selectedCells, isFullscreen, selectedRowsIndex, selectedColumnsIndex } = this.tableStore;
-            const tableInfo = { selectedCells, isFullscreen, selectedRowsIndex, selectedColumnsIndex };
+            const { selectedCells, isFullscreen, selectedRowsIndex, selectedColumnsIndex, isSelectedTable } = this.tableStore;
+            const tableInfo = { selectedCells, isFullscreen, selectedRowsIndex, selectedColumnsIndex, isSelectedTable };
             const { row, col } = this.getSelectedCell();
             setCellMenuVisibility(this.editor, this.menuEntities, tableInfo);
             this.menuEntities.forEach(item => {
@@ -12157,8 +12173,8 @@ class TheTableToolbarComponent {
     ngOnInit() {
         var _a, _b, _c;
         this.isColumnEqual = (_c = (_b = (_a = this.tableElement) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.every(col => this.tableElement.columns[0].width === col.width)) !== null && _c !== void 0 ? _c : true;
-        const { selectedCells } = this.tableStore;
-        const tableInfo = { selectedCells };
+        const { selectedCells, isSelectedTable } = this.tableStore;
+        const tableInfo = { selectedCells, isSelectedTable };
         this.isRectangle = isRectangularInTableCells(this.editor, selectedCells);
         this.deleteIcon = this.isRectangle && DeleteIcon[this.getDeleteIcon()];
         this.getIconName(this.deleteIcon);
@@ -12400,12 +12416,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
             args: [{ name: 'freezeColumn' }]
         }] });
 class TableFreezeRowPipe {
-    transform(table, headerRow) {
+    transform(table, headerRow, tablePluginOptions) {
         var _a;
         // 标题行存在合并的行时，取消冻结
         if (table.children) {
             const mergeRows = (_a = table.children[0]) === null || _a === void 0 ? void 0 : _a.children.filter(item => item.rowspan && item.rowspan !== 1);
-            return !!(headerRow && !mergeRows.length);
+            return !!(headerRow && !mergeRows.length && (tablePluginOptions === null || tablePluginOptions === void 0 ? void 0 : tablePluginOptions.freezeRowHeader));
         }
         return false;
     }
@@ -12753,7 +12769,7 @@ class TheTableComponent extends TheBaseElementComponent {
                 this.isStickyTop =
                     top <= this.scrollContainerTop + 8 && clientRect.bottom - this.scrollContainerTop >= headerRowHeight;
                 // 标题行内容超过固定高度时移除冻结
-                if (this.isStickyTop && this.freezeRowPipe.transform(this.element, this.headerRow)) {
+                if (this.isStickyTop && this.freezeRowPipe.transform(this.element, this.headerRow, this.tablePluginOptions)) {
                     const maxHeaderRowHeight = (24 + 8) * 11; // 超出 11 行，取消冻结
                     this.isStickyTop = headerRowHeight <= maxHeaderRowHeight;
                 }
@@ -12825,7 +12841,7 @@ class TheTableComponent extends TheBaseElementComponent {
         const colControl = this.columnControlsWrapper.nativeElement;
         const headerRow = this.nativeElement.querySelector('tbody tr');
         const stickyRows = this.isInTable ? [colControl, headerRow] : [headerRow];
-        if (this.freezeRowPipe.transform(this.element, this.headerRow)) {
+        if (this.freezeRowPipe.transform(this.element, this.headerRow, this.tablePluginOptions)) {
             let gridColumns = '';
             const tablePadding = 44;
             let tableWidth = this.elementRef.nativeElement.offsetWidth;
@@ -12847,7 +12863,7 @@ class TheTableComponent extends TheBaseElementComponent {
         const rowControlButton = (_a = this.rowControlsButtonWrapper.first) === null || _a === void 0 ? void 0 : _a.nativeElement;
         const tableCornerBtn = this.cornerControl.nativeElement;
         const headerRowHeight = (_b = this.calculateRowControls()[0]) === null || _b === void 0 ? void 0 : _b.height;
-        if (this.isStickyTop && this.freezeRowPipe.transform(this.element, this.headerRow)) {
+        if (this.isStickyTop && this.freezeRowPipe.transform(this.element, this.headerRow, this.tablePluginOptions)) {
             this.renderer.addClass(this.nativeElement, TableWithStickyRowClass);
             this.updateStickyRowScrollLeft();
             const numberedColumn = (_c = this.element.options) === null || _c === void 0 ? void 0 : _c.numberedColumn;
@@ -12917,7 +12933,7 @@ class TheTableComponent extends TheBaseElementComponent {
     }
     useRowControls() {
         var _a;
-        if ((this.selection && !this.readonly) || ((_a = this.element.options) === null || _a === void 0 ? void 0 : _a.numberedColumn) || this.tableStore.isCellSelecting) {
+        if ((this.selection && !this.readonly) || ((_a = this.element.options) === null || _a === void 0 ? void 0 : _a.numberedColumn) || this.tableStore.isRightClicking) {
             this.rowControls = this.calculateRowControls();
         }
     }
@@ -13172,7 +13188,7 @@ class TheTableComponent extends TheBaseElementComponent {
                 }
                 // patch for right click select next cell
                 setTimeout(() => {
-                    Transforms.select(this.editor, this.editor.selection.anchor.path);
+                    Transforms.select(this.editor, Editor.start(this.editor, this.editor.selection));
                 });
             });
         });
@@ -13189,7 +13205,7 @@ class TheTableComponent extends TheBaseElementComponent {
                 this.tableStore.clearSelectedCellsContent();
             }
             const isCurrentTableElement = this.nativeElement.contains(e.target);
-            if (!isCurrentTableElement || !this.tableStore.isModSelecting) {
+            if (!isCurrentTableElement || !this.tableStore.pointerSelection) {
                 this.tableStore.clearSelectedCells();
             }
             if (!isCurrentTableElement) {
@@ -13205,13 +13221,13 @@ class TheTableComponent extends TheBaseElementComponent {
                 .pipe(takeUntil(this.destroy$), filter((e) => !!e))
                 .subscribe((event) => {
                 if (isHotkey('mod', event) && !this.readonly) {
-                    this.tableStore.isModSelecting = true;
+                    this.tableStore.pointerSelection = true;
                 }
             });
             fromEvent(document, 'keyup')
                 .pipe(takeUntil(this.destroy$), filter((e) => !!e))
                 .subscribe(() => {
-                this.tableStore.isModSelecting = false;
+                this.tableStore.pointerSelection = false;
             });
         });
     }
@@ -13265,7 +13281,7 @@ class TheTableComponent extends TheBaseElementComponent {
     }
 }
 TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableComponent, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
-TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isCellSelecting", "class.the-numberd-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking" } }, providers: [
+TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: TheTableComponent, selector: "the-table, [theTable]", host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking", "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" } }, providers: [
         TableStore,
         TableService,
         TheTableContextMenuService,
@@ -13277,7 +13293,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.isCellSelecting),\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=\"!element.options?.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.isCellSelecting) && !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.isCellSelecting\"\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: "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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: TheTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table, [theTable]', providers: [
@@ -13293,10 +13309,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                             useExisting: TheTableComponent
                         }
                     ], host: {
-                        '[class.the-table-with-controls]': 'isInTable || tableStore.isCellSelecting',
+                        '[class.the-table-with-controls]': 'isInTable || tableStore.isRightClicking',
+                        '[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.isCellSelecting),\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=\"!element.options?.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.isCellSelecting) && !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.isCellSelecting\"\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                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" }]
         }], 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 }]
@@ -13879,7 +13896,8 @@ class TheTdComponent extends TheBaseElementComponent {
                 this.renderer.removeClass(this.elementRef.nativeElement, 'selected-cell');
             }
             else {
-                const isSelectedCell = x.some(({ row, col }) => row === this.tablePosition.getRowIndex() && col === this.tablePosition.getColumnIndex());
+                const selectCellNodes = getSelectCellNode(this.editor, x);
+                const isSelectedCell = selectCellNodes.find(cell => cell.node === this.element);
                 if (isSelectedCell) {
                     this.renderer.addClass(this.elementRef.nativeElement, 'selected-cell');
                 }
@@ -13899,7 +13917,8 @@ class TheTdComponent extends TheBaseElementComponent {
                 this.renderer.removeClass(this.elementRef.nativeElement, 'dangerous-cell');
             }
             else {
-                const isSelectedCell = x.some(({ row, col }) => row === this.tablePosition.getRowIndex() && col === this.tablePosition.getColumnIndex());
+                const selectCellNodes = getSelectCellNode(this.editor, x);
+                const isSelectedCell = selectCellNodes.find(cell => cell.node === this.element);
                 if (isSelectedCell) {
                     this.renderer.addClass(this.elementRef.nativeElement, 'dangerous-cell');
                 }
@@ -14007,8 +14026,8 @@ class TheTdComponent extends TheBaseElementComponent {
             fromEvent(element, 'mousedown')
                 .pipe(takeUntil(this.destroy$), filter((e) => e.button !== 2), map$1(event => event.target.closest(SLA_TABLE_CELL_SELECTOR)), filter(cell => !!cell))
                 .subscribe((cell) => {
-                // 单选
-                if (this.tableStore.isModSelecting) {
+                // 点选
+                if (this.tableStore.pointerSelection) {
                     this.tableStore.selectCell(cell, this.editor);
                 }
                 this.tableStore.selectCellStart(cell, this.editor);
@@ -14035,7 +14054,7 @@ class TheTdComponent extends TheBaseElementComponent {
             .pipe(take(1))
             .subscribe(() => {
             this.tableStore.selectCellEnd(this.editor);
-            if (this.tableStore.isCellSelecting || this.tableStore.isModSelecting) {
+            if (this.tableStore.isCellSelecting || this.tableStore.pointerSelection) {
                 this.ngZone.run(() => {
                     this.tableComponent.tableService.afterSelectedCells(this.tableStore.focusCellElement, this.tableComponent.element);
                 });
@@ -15198,14 +15217,12 @@ class TheInlineToolbarComponent {
             merge(fromEvent(document, 'mouseup').pipe(filter((e) => e.button !== 2)), fromEvent(document, 'keyup').pipe(filter((e) => !e.shiftKey)))
                 .pipe(debounceTime(200), takeUntil(this.destroy$))
                 .subscribe(() => {
-                var _a;
                 this.updateInlineToolbar();
-                (_a = this.inlineToolbar) === null || _a === void 0 ? void 0 : _a.selectionChange(this.editor);
-                this.cdr.detectChanges();
             });
         });
     }
     updateInlineToolbar() {
+        var _a;
         const inlineToolbar = this.elementRef.nativeElement.firstElementChild;
         if (!this.editor.selection) {
             inlineToolbar.removeAttribute('style');
@@ -15231,7 +15248,9 @@ class TheInlineToolbarComponent {
         if (native.type !== 'None') {
             const range = native.getRangeAt(0);
             this.updatePosition(inlineToolbar, range);
+            (_a = this.inlineToolbar) === null || _a === void 0 ? void 0 : _a.selectionChange(this.editor);
         }
+        this.cdr.detectChanges();
     }
     updatePosition(toolbarElement, range) {
         let boundary = range.getBoundingClientRect();