@worktile/theia 13.0.27 → 13.0.28

package/fesm2015/worktile-theia.mjs

@@ -3033,7 +3033,7 @@ class TheImageComponent extends TheBaseElementComponent {
     }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i4$1.ThyImageService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" [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 contenteditable=\"false\" 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=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        </ng-container>\n    </thy-actions>\n</ng-template>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { type: i3.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { type: i4$2.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview"], exportAs: ["thyImage"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" [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 contenteditable=\"false\" 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=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        </ng-container>\n    </thy-actions>\n</ng-template>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i6.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i3.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { type: i3.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { type: i4$2.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { type: i10.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$3.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: "13.3.8", 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=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" [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 contenteditable=\"false\" 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=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        </ng-container>\n    </thy-actions>\n</ng-template>\n" }]
@@ -7830,7 +7830,6 @@ class TableStore {
         this.dangerousRowsIndex = [];
         this.isPrepareSelecting = false;
         this.isCellSelecting = false;
-        this.singleSelecting = false;
         this.isRightClicking = false;
     }
     get selectedCells() {
@@ -8058,7 +8057,6 @@ class TableStore {
         this.selectedRowsIndex = [];
         this.isSelectedTable = false;
         this.isCellSelecting = false;
-        this.singleSelecting = false;
         this.isRightClicking = false;
         this.selectedCells$.next([]);
     }
@@ -8103,10 +8101,6 @@ class TableStore {
     selectCellEnd(editor) {
         if (this.isCellSelecting) {
             this.focusCell(editor, this.focusCellPath);
-            this.singleSelecting = false;
-        }
-        if (this.preFocusCellPath === this.anchorCellPath) {
-            this.singleSelecting = true;
         }
         this.isPrepareSelecting = false;
         this.preFocusCellPath = null;
@@ -8382,15 +8376,15 @@ function resetTableCell(editor, table, cell, cellRow, cellCol) {
     });
 }
 
-function setCellMenuInvisibility(editor, menuList, selectedCells, isActiveSelect) {
+function setCellMenuVisibility(editor, menuList, selectedCells, isActiveSelect) {
     const isCellMerged = isSelectedCellMerged(editor);
     const selectCellNodes = getSelectCellNode(editor, selectedCells).filter(item => !item.node.hidden);
     menuList.forEach(item => {
         if (item.key === 'merge-cells') {
-            item.invisibility = !(selectCellNodes && selectCellNodes.length > 1 && !isActiveSelect);
+            item.visibility = selectCellNodes && selectCellNodes.length > 1 && !isActiveSelect;
         }
         if (item.key === 'split-cells') {
-            item.invisibility = !(selectCellNodes && selectCellNodes.length === 1 && isCellMerged && !isActiveSelect);
+            item.visibility = selectCellNodes && selectCellNodes.length === 1 && isCellMerged && !isActiveSelect;
         }
     });
 }
@@ -8416,11 +8410,6 @@ class TheTableOptionsComponent {
     get table() {
         return this.tableStore && this.tableStore.getTableEntry(this.editor)[0];
     }
-    handleDocumentMouseDown(event) {
-        if (this.popoverRef && !document.querySelector('.table-options-pannel').contains(event.target)) {
-            this.popoverRef.close();
-        }
-    }
     ngOnInit() {
         this.setColumnOptions();
     }
@@ -8437,11 +8426,10 @@ class TheTableOptionsComponent {
         const tableOption = {};
         tableOption[option.key] = currentOption.isActive || null;
         this.tableStore.setTableOptions(this.editor, Object.assign(Object.assign({}, this.table.options), tableOption));
-        this.popoverRef.close();
     }
 }
 TheTableOptionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableOptionsComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { tableStore: "tableStore", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, ngImport: i0, template: `
+TheTableOptionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTableOptionsComponent, selector: "the-table-options", inputs: { tableStore: "tableStore", editor: "editor" }, ngImport: i0, template: `
         <div class="thy-dropdown-menu table-drop-menu">
             <ng-container *ngFor="let option of tableDropdownList">
                 <a thyDropdownMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
@@ -8474,9 +8462,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                 type: Input
             }], editor: [{
                 type: Input
-            }], handleDocumentMouseDown: [{
-                type: HostListener,
-                args: ['document: mousedown', ['$event']]
             }] } });
 
 class TheTableToolbarComponent {
@@ -8489,7 +8474,7 @@ class TheTableToolbarComponent {
             {
                 key: 'merge-cells',
                 name: '合并单元格',
-                invisibility: false,
+                visibility: true,
                 icon: 'table-merge-cells',
                 actionHandle: () => {
                     event.preventDefault();
@@ -8502,7 +8487,7 @@ class TheTableToolbarComponent {
             {
                 key: 'split-cells',
                 name: '拆分单元格',
-                invisibility: false,
+                visibility: true,
                 icon: 'table-unmerge-cells',
                 actionHandle: () => {
                     event.preventDefault();
@@ -8517,23 +8502,28 @@ class TheTableToolbarComponent {
     get editor() {
         return this.tableStore && this.tableStore.editor;
     }
-    get singleSelecting() {
-        return this.tableStore.singleSelecting;
+    get deleteIcon() {
+        this.getIconName(DeleteIcon[this.getDeleteIcon()]);
+        return DeleteIcon[this.getDeleteIcon()];
     }
     get isShowSplitLine() {
-        return this.cellMenuList.filter(item => !item.invisibility).length > 1;
+        return this.cellMenuList.filter(item => item.visibility).length > 1;
+    }
+    get hasSelectedCells() {
+        return this.tableStore.selectedCells && this.tableStore.selectedCells.length > 0;
     }
     get tableOptions() {
         return getPluginOptions(this.editor, PluginKeys.table);
     }
     ngOnInit() {
-        this.deleteIcon = DeleteIcon[this.getDeleteIcon()];
-        this.getIconName(this.deleteIcon);
-        setCellMenuInvisibility(this.editor, this.cellMenuList, this.tableStore.selectedCells, this.isActiveSelect);
         this.selectedColor = this.tableStore.getSelectedCellBackgroundColor();
+        setCellMenuVisibility(this.editor, this.cellMenuList, this.tableStore.selectedCells, false);
     }
     ngOnDestroy() {
         this.colorSelectService.closeColorSelect();
+        if (this.optionsPopoverRef) {
+            this.optionsPopoverRef.close();
+        }
     }
     getIconName(key) {
         switch (key) {
@@ -8600,14 +8590,14 @@ class TheTableToolbarComponent {
     openTableOptionMenu(event) {
         event.preventDefault();
         event.stopPropagation();
-        this.thyPopover.open(TheTableOptionsComponent, {
+        this.optionsPopoverRef = this.thyPopover.open(TheTableOptionsComponent, {
             origin: event.currentTarget,
             initialState: {
                 tableStore: this.tableStore,
                 editor: this.editor
             },
             minWidth: 0,
-            insideClosable: false,
+            insideClosable: true,
             hasBackdrop: false,
             placement: 'bottomLeft',
             originActiveClass: 'active',
@@ -8616,14 +8606,12 @@ class TheTableToolbarComponent {
     }
 }
 TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a\n            *ngIf=\"!item.invisibility\"\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=\"!isActiveSelect && isShowSplitLine\" class=\"mx-2 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a href=\"javascript:;\" *ngIf=\"!singleSelecting\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a href=\"javascript:;\" *ngIf=\"tableOptions?.showFullscreen\" thyAction thyTooltip=\"\u5168\u5C4F\" (mousedown)=\"setFullscreen($event)\">\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableStore.isSelectedTable\">\n        <thy-divider class=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"openTableOptionMenu($event)\">\n            <span>\u8868\u683C\u9009\u9879</span>\n            <thy-icon thyIconName=\"caret-down\"></thy-icon>\n        </a>\n    </ng-container>\n\n    <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\n        <thy-divider class=\"mx-2 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", components: [{ type: i3.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { type: i3.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { type: i4$2.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$3.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", 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=\"isShowSplitLine && hasSelectedCells\" class=\"mx-2 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a *ngIf=\"hasSelectedCells\" href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a href=\"javascript:;\" *ngIf=\"tableOptions?.showFullscreen\" thyAction thyTooltip=\"\u5168\u5C4F\" (mousedown)=\"setFullscreen($event)\">\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <thy-divider *ngIf=\"tableOptions?.showFullscreen || hasSelectedCells\" class=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"openTableOptionMenu($event)\">\n        <span>\u8868\u683C\u9009\u9879</span>\n        <thy-icon thyIconName=\"caret-down\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\n        <thy-divider class=\"mx-2 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", components: [{ type: i3.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { type: i3.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { type: i4$2.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$3.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: "13.3.8", 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.invisibility\"\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=\"!isActiveSelect && isShowSplitLine\" class=\"mx-2 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a href=\"javascript:;\" *ngIf=\"!singleSelecting\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a href=\"javascript:;\" *ngIf=\"tableOptions?.showFullscreen\" thyAction thyTooltip=\"\u5168\u5C4F\" (mousedown)=\"setFullscreen($event)\">\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableStore.isSelectedTable\">\n        <thy-divider class=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"openTableOptionMenu($event)\">\n            <span>\u8868\u683C\u9009\u9879</span>\n            <thy-icon thyIconName=\"caret-down\"></thy-icon>\n        </a>\n    </ng-container>\n\n    <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\n        <thy-divider class=\"mx-2 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=\"isShowSplitLine && hasSelectedCells\" class=\"mx-2 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a *ngIf=\"hasSelectedCells\" href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a href=\"javascript:;\" *ngIf=\"tableOptions?.showFullscreen\" thyAction thyTooltip=\"\u5168\u5C4F\" (mousedown)=\"setFullscreen($event)\">\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <thy-divider *ngIf=\"tableOptions?.showFullscreen || hasSelectedCells\" class=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"openTableOptionMenu($event)\">\n        <span>\u8868\u683C\u9009\u9879</span>\n        <thy-icon thyIconName=\"caret-down\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\n        <thy-divider class=\"mx-2 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            [thyActionIcon]=\"deleteIcon\"\n            [thyTooltip]=\"iconName\"\n            (mousedown)=\"onDelete($event)\"\n            (mouseenter)=\"onEnterDelete($event)\"\n            (mouseleave)=\"onLeaveDelete($event)\"\n        ></a>\n    </ng-container>\n</thy-actions>\n" }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: TheColorSelectService }, { type: i1$1.ThyPopover }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { tableStore: [{
                 type: Input
-            }], isActiveSelect: [{
-                type: Input
             }], tableElement: [{
                 type: Input
             }] } });
@@ -8678,10 +8666,10 @@ class TheContextMenuComponent {
     ngOnInit() { }
 }
 TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            *ngIf=\"!menuItem.invisibility\"\n            href=\"javascript:;\"\n            thyDropdownMenuItem\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyDropdownMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyDropdownMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyDropdownMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-dropdown-menu-divider *ngIf=\"menuItem.divider\"></thy-dropdown-menu-divider>\n    </ng-container>\n</div>\n", components: [{ type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$1.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { type: i5$1.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { type: i5$1.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { type: i5$1.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }] });
+TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.8", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            *ngIf=\"menuItem.visibility\"\n            href=\"javascript:;\"\n            thyDropdownMenuItem\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyDropdownMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyDropdownMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyDropdownMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-dropdown-menu-divider *ngIf=\"menuItem.divider\"></thy-dropdown-menu-divider>\n    </ng-container>\n</div>\n", components: [{ type: i2.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$1.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { type: i5$1.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { type: i5$1.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { type: i5$1.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: TheContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-contextmenu', template: "<div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            *ngIf=\"!menuItem.invisibility\"\n            href=\"javascript:;\"\n            thyDropdownMenuItem\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyDropdownMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyDropdownMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyDropdownMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-dropdown-menu-divider *ngIf=\"menuItem.divider\"></thy-dropdown-menu-divider>\n    </ng-container>\n</div>\n" }]
+            args: [{ selector: 'the-contextmenu', template: "<div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            *ngIf=\"menuItem.visibility\"\n            href=\"javascript:;\"\n            thyDropdownMenuItem\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyDropdownMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyDropdownMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyDropdownMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-dropdown-menu-divider *ngIf=\"menuItem.divider\"></thy-dropdown-menu-divider>\n    </ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
                 type: Input
             }], actionHandle: [{
@@ -8715,6 +8703,7 @@ class TheTableContextMenuService {
                 divider: true,
                 name: '单元格背景',
                 extendIcon: 'angle-right',
+                visibility: true,
                 actionHandle: () => { },
                 activeHandle: (event) => {
                     if (this.colorSelectService.isOpenColorSelect) {
@@ -8751,6 +8740,7 @@ class TheTableContextMenuService {
                 icon: 'sweep',
                 divider: true,
                 name: '清空选中区域',
+                visibility: true,
                 actionHandle: () => {
                     this.tableStore.clearSelectedCellsContent();
                     this.tableStore.selectFirstCell();
@@ -8760,6 +8750,7 @@ class TheTableContextMenuService {
                 key: 'merge-cells',
                 icon: 'table-merge-cells',
                 name: '合并单元格',
+                visibility: true,
                 actionHandle: () => {
                     this.tableStore.mergeCell(this.editor);
                 }
@@ -8769,6 +8760,7 @@ class TheTableContextMenuService {
                 icon: 'table-unmerge-cells',
                 name: '拆分单元格',
                 divider: true,
+                visibility: true,
                 actionHandle: () => {
                     splitCell(this.editor);
                 }
@@ -8777,6 +8769,7 @@ class TheTableContextMenuService {
                 key: 'delete-selection-rows',
                 icon: 'table-delete-rows',
                 name: '删除所在行',
+                visibility: true,
                 actionHandle: () => {
                     this.tableStore.removeDangerousRows();
                     this.tableStore.clearDangerousCells();
@@ -8791,6 +8784,7 @@ class TheTableContextMenuService {
                 icon: 'table-delete-columns',
                 divider: true,
                 name: '删除所在列',
+                visibility: true,
                 actionHandle: () => {
                     this.tableStore.removeDangerousColumns();
                     this.tableStore.clearDangerousCells();
@@ -8803,6 +8797,7 @@ class TheTableContextMenuService {
                 key: 'delete-table',
                 icon: 'trash',
                 name: '删除表格',
+                visibility: true,
                 actionHandle: () => {
                     TableEditor.removeTable(this.editor);
                     this.tableStore.clearDangerousCells();
@@ -8824,7 +8819,7 @@ class TheTableContextMenuService {
     }
     openMenuList(event) {
         this.ngZone.run(() => {
-            setCellMenuInvisibility(this.editor, this.menuEntities, this.tableStore.selectedCells);
+            setCellMenuVisibility(this.editor, this.menuEntities, this.tableStore.selectedCells);
             this.menuEntities.forEach(item => {
                 if (item.key === 'background-color') {
                     item.backgroundColor = this.tableStore.getSelectedCellBackgroundColor();
@@ -8897,20 +8892,17 @@ class TableService {
     get isOpened() {
         return this.toolbarRef && this.toolbarRef.componentInstance;
     }
-    openToolbar(origin, tableElement, isActiveSelect) {
-        this.theTableContextMenuService.closeContextMenu();
+    openToolbar(origin, tableElement) {
         if (this.isOpened) {
             if (this.toolbarRef.containerInstance.config.origin === origin) {
                 return;
             }
-            this.toolbarRef.close();
         }
-        this.offset = this.tableStore.singleSelecting ? 24 : 8;
+        this.offset = 0;
         this.toolbarRef = this.thyPopover.open(TheTableToolbarComponent, {
             initialState: {
                 tableStore: this.tableStore,
-                tableElement,
-                isActiveSelect
+                tableElement
             },
             viewContainerRef: this.theContextService.getOptions().viewContainerRef,
             origin: this.getOrigin(origin),
@@ -8924,7 +8916,6 @@ class TableService {
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
             manualClosure: true
         });
-        this._listenCellClearEvent();
     }
     getOrigin(origin) {
         if (origin instanceof HTMLTableCellElement && origin.tagName !== 'TH') {
@@ -8951,19 +8942,23 @@ class TableService {
             return this.toolbarRef.afterClosed();
         }
     }
-    _listenCellClearEvent() {
-        const onMouseObservable = merge(fromEvent(document, 'mousedown').pipe(filter((e) => e.button !== 2)), fromEvent(document, 'keydown').pipe(filter((e) => {
+    updateMenu(isActive) {
+        var _a, _b;
+        if ((_b = (_a = this.toolbarRef) === null || _a === void 0 ? void 0 : _a.componentInstance) === null || _b === void 0 ? void 0 : _b.cellMenuList) {
+            setCellMenuVisibility(this.tableStore.editor, this.toolbarRef.componentInstance.cellMenuList, this.tableStore.selectedCells, isActive);
+        }
+    }
+    listenCellClearEvent() {
+        merge(fromEvent(document, 'mousedown').pipe(filter((e) => e.button !== 2)), fromEvent(document, 'keydown').pipe(filter((e) => {
             return !isVirtualKey(e);
         })))
             .pipe(take(1))
             .subscribe((e) => {
-            if ((this.tableStore.selectedCells && this.tableStore.selectedCells.length > 0) || this.tableStore.singleSelecting) {
+            if (this.tableStore.selectedCells && this.tableStore.selectedCells.length > 0) {
                 if (e.type === 'keydown') {
                     this.tableStore.clearSelectedCellsContent();
                 }
                 this.tableStore.clearSelectedCells();
-                this.closeToolbar();
-                onMouseObservable.unsubscribe();
             }
         });
     }
@@ -9213,6 +9208,16 @@ class TheTableComponent extends TheBaseElementComponent {
             });
             this.getIsInTable();
             this.getColControls();
+            if (this.isCollapsed) {
+                this.ngZone.run(() => {
+                    this.tableService.openToolbar(this.tableWrapper.nativeElement, this.element);
+                });
+            }
+            else {
+                if (!this.tableStore.isCellSelecting) {
+                    this.tableService.closeToolbar();
+                }
+            }
         }
     }
     ngOnInit() {
@@ -9239,7 +9244,9 @@ class TheTableComponent extends TheBaseElementComponent {
             this.subscribeCellPositionChange();
             this.listenTableContextMenuEvent();
             // 水平滚动时处理滚动阴影
-            fromEvent(this.tableWrapper.nativeElement, 'scroll').pipe(takeUntil(this.destroy$)).subscribe(() => {
+            fromEvent(this.tableWrapper.nativeElement, 'scroll')
+                .pipe(takeUntil(this.destroy$))
+                .subscribe(() => {
                 this.bindTableScrollingShadow();
             });
             if ((_a = this.element.options) === null || _a === void 0 ? void 0 : _a.numberedColumn) {
@@ -9426,10 +9433,10 @@ class TheTableComponent extends TheBaseElementComponent {
         event.stopPropagation();
         event.preventDefault();
         if (!!this.selection && this.isInTable) {
-            this.tableStore.singleSelecting = false;
             this.tableStore.clearDangerousCells();
             this.tableStore.selectColumn(this.editor, index);
-            this.tableService.openToolbar(event.target, this.element, true);
+            this.tableService.updateMenu(true);
+            // this.tableService.openToolbar(this.tableWrapper.nativeElement, this.element, true);
         }
     }
     getIsInTable() {
@@ -9498,15 +9505,14 @@ class TheTableComponent extends TheBaseElementComponent {
             const path = TheEditor.findPath(this.editor, this.element);
             Transforms.select(this.editor, path);
         }
-        this.tableStore.singleSelecting = false;
         this.tableStore.selectRow(this.editor, index);
-        this.tableService.openToolbar(event.target, this.element, true);
+        this.tableService.updateMenu(true);
     }
     onSelectTable(event) {
         event.stopPropagation();
         event.preventDefault();
         this.tableStore.selectTable(this.editor);
-        this.tableService.openToolbar(event.target, this.element);
+        this.tableService.updateMenu(false);
     }
     listenTableContextMenuEvent() {
         this.ngZone.runOutsideAngular(() => {
@@ -9564,6 +9570,7 @@ class TheTableComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
         this.destroy$.next();
         this.destroy$.complete();
+        this.tableService.closeToolbar();
     }
 }
 TheTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.8", 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: i6$1.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component });
@@ -10308,16 +10315,8 @@ class TheTdComponent extends TheBaseElementComponent {
             .pipe(take(1))
             .subscribe(() => {
             this.tableStore.selectCellEnd(this.editor);
-            if (this.tableStore.isCellSelecting) {
-                this.ngZone.run(() => {
-                    this.tableComponent.tableService.openToolbar(this.tableStore.focusCellElement, this.tableComponent.element);
-                });
-            }
-            else if (!this.readonly && this.tableStore.singleSelecting && this.tableToolbarOption.showFullscreen) {
-                this.ngZone.run(() => {
-                    this.tableComponent.tableService.openToolbar(this.tableComponent.theTableElement.nativeElement, this.tableComponent.element);
-                });
-            }
+            this.tableService.updateMenu(false);
+            this.tableService.listenCellClearEvent();
             mouseoverObservable.unsubscribe();
         });
     }
@@ -10796,7 +10795,6 @@ class TheTableToolbarItemComponent extends TheBaseToolbarItem {
     }
     toggleTableSelect(event, optionsParam) {
         if (this.isOpenTableSelect) {
-            this.tableSelectRef.close();
             return;
         }
         this.tableSelectRef = this.thyPopover.open(TheTableSelectComponent, {
@@ -11213,7 +11211,6 @@ const withTable = (editor) => {
                 else {
                     tableComponent.tableStore.clearSelectedCellsContent();
                 }
-                tableComponent.tableService.closeToolbar();
             });
             return;
         }