@worktile/theia 16.3.0 → 16.3.2

package/fesm2022/worktile-theia.mjs

@@ -6017,7 +6017,10 @@ class ThePluginMenuComponent extends mixinUnsubscribe(MixinBase) {
         this.autoActiveFirstItem = true;
         this.removeKeywords = () => {
             const node = Node.get(this.editor, this.editor.selection.anchor.path);
-            if (node && Node.string(node).length > 0) {
+            const nodeString = Node.string(node);
+            const isStartWithHotkey = nodeString.startsWith('/');
+            const isIncludeKeywords = nodeString.toLocaleLowerCase().trim().includes(this.keyWords);
+            if (node && nodeString.length > 0 && (isStartWithHotkey || isIncludeKeywords)) {
                 Editor.deleteBackward(this.editor, { unit: 'block' });
             }
         };
@@ -11460,31 +11463,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImpor
 const SLA_TABLE_SELECTOR = '.slate-element-table';
 const SLA_TABLE_CELL_SELECTOR = '.slate-element-table-cell';
 
-function splitCell(editor) {
-    const tablePosition = createTablePosition(editor);
-    const { cell, table, cellEntry } = tablePosition;
-    if ((!cell.rowspan && !cell.colspan) || (cell.rowspan === 1 && cell.colspan === 1))
-        return editor;
-    const cellRow = tablePosition.getRowIndex();
-    const cellCol = tablePosition.getColumnIndex();
-    resetTableCell(editor, table, cell, cellRow, cellCol);
-    Transforms.select(editor, cellEntry[1]);
-    Transforms.collapse(editor, { edge: 'end' });
-}
-function resetTableCell(editor, table, cell, cellRow, cellCol) {
-    const rowSpanIndex = cellRow + (cell.rowspan || 1) - 1;
-    const colSpanIndex = cellCol + (cell.colspan || 1) - 1;
-    Editor.withoutNormalizing(editor, () => {
-        table.children.map((row, rowIndex) => {
-            row.children.map((col, colIndex) => {
-                if (rowIndex >= cellRow && rowIndex <= rowSpanIndex && colIndex >= cellCol && colIndex <= colSpanIndex) {
-                    const path = findPath(editor, col);
-                    Transforms.setNodes(editor, { colspan: null, rowspan: null, hidden: null }, { at: path });
-                }
-            });
-        });
-    });
+class TheContextMenuComponent {
+    handleDocumentMouseDown(event) {
+        if (isColorPanel(event.target)) {
+            return;
+        }
+        if (!this.elementRef.nativeElement.contains(event.target) && event.button !== 2) {
+            this.thyPopoverRef.close();
+        }
+    }
+    handleMouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    itemMousedown(event, entity) {
+        event.preventDefault();
+        this.actionHandle(entity);
+        this.thyPopoverRef.close();
+    }
+    itemMouseleave(event, entity) {
+        event.preventDefault();
+        this.deactivateHandle(event, entity);
+    }
+    itemMouseenter(event, entity) {
+        event.preventDefault();
+        this.activeHandle(event, entity);
+    }
+    inputNumberFocus(e) {
+        e.target.focus();
+    }
+    itemEnterHandle(e, entity) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.actionHandle(entity);
+        this.thyPopoverRef.close();
+    }
+    changeColor(color, item) {
+        item.backgroundColor = color;
+        item.activeHandle(undefined, item);
+    }
+    constructor(elementRef, thyPopoverRef) {
+        this.elementRef = elementRef;
+        this.thyPopoverRef = thyPopoverRef;
+        this.menuEntities = [];
+        this.wrap = true;
+    }
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i5$1.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$1.ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: i7$1.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'the-contextmenu', template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
+                type: Input
+            }], actionHandle: [{
+                type: Input
+            }], activeHandle: [{
+                type: Input
+            }], deactivateHandle: [{
+                type: Input
+            }], wrap: [{
+                type: HostBinding,
+                args: ['class.the-overlay-menu-wrap']
+            }], handleDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document: mousedown', ['$event']]
+            }], handleMouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
 
 function isSelectedCellMerged(editor) {
     if (editor && editor.selection) {
@@ -11585,117 +11633,6 @@ function getCellPositionsBeforeMerge(editor, { row, col }) {
     return [{ row, col }];
 }
 
-function setCellMenuVisibility(editor, menuList, tableInfo) {
-    const { selectedCellPositions, isFullscreen, isSelectedTable, selectedRowsIndex, selectedColumnsIndex } = tableInfo;
-    const isCellMerged = isSelectedCellMerged(editor);
-    const selectCellNodes = getSelectCellNode(editor, selectedCellPositions).filter(item => !item.node.hidden);
-    const isRect = isRectangularInTableCells(editor, selectedCellPositions);
-    menuList.forEach(item => {
-        switch (item.key) {
-            case 'merge-cells':
-                item.visibility = selectCellNodes && selectCellNodes.length > 1 && !isSelectedTable && isRect;
-                break;
-            case 'split-cells':
-                item.visibility = selectCellNodes && selectCellNodes.length === 1 && isCellMerged;
-                break;
-            case 'delete-selection-rows':
-                item.visibility = !(isFullscreen && selectedColumnsIndex.length);
-                break;
-            case 'delete-selection-columns':
-                item.visibility = !(isFullscreen && selectedRowsIndex.length);
-                break;
-            case 'delete-table':
-                item.visibility = !isFullscreen;
-                break;
-            case TableInsertType.insertRowsUp:
-                const hasHeaderRowCell = TableEditor.hasHeaderRowCell(editor);
-                item.visibility = !hasHeaderRowCell && isRect;
-                break;
-            case TableInsertType.insertRowsDown:
-                item.visibility = isRect;
-                break;
-            case TableInsertType.insertColumnsLeft:
-                const hasHeaderColumnCell = TableEditor.hasHeaderColumnCell(editor);
-                item.visibility = !hasHeaderColumnCell && isRect;
-                break;
-            case TableInsertType.insertColumnsRight:
-                item.visibility = isRect;
-                break;
-        }
-    });
-}
-
-class TheContextMenuComponent {
-    handleDocumentMouseDown(event) {
-        if (isColorPanel(event.target)) {
-            return;
-        }
-        if (!this.elementRef.nativeElement.contains(event.target) && event.button !== 2) {
-            this.thyPopoverRef.close();
-        }
-    }
-    handleMouseDown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    itemMousedown(event, entity) {
-        event.preventDefault();
-        this.actionHandle(entity);
-        this.thyPopoverRef.close();
-    }
-    itemMouseleave(event, entity) {
-        event.preventDefault();
-        this.deactivateHandle(event, entity);
-    }
-    itemMouseenter(event, entity) {
-        event.preventDefault();
-        this.activeHandle(event, entity);
-    }
-    inputNumberFocus(e) {
-        e.target.focus();
-    }
-    itemEnterHandle(e, entity) {
-        e.preventDefault();
-        e.stopPropagation();
-        this.actionHandle(entity);
-        this.thyPopoverRef.close();
-    }
-    changeColor(color, item) {
-        item.backgroundColor = color;
-        item.activeHandle(undefined, item);
-    }
-    constructor(elementRef, thyPopoverRef) {
-        this.elementRef = elementRef;
-        this.thyPopoverRef = thyPopoverRef;
-        this.menuEntities = [];
-        this.wrap = true;
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.4", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i5$1.ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: i5$1.ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: i7$1.ThyInputNumberComponent, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }, { kind: "directive", type: i5.ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.4", ngImport: i0, type: TheContextMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'the-contextmenu', template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopoverRef }]; }, propDecorators: { menuEntities: [{
-                type: Input
-            }], actionHandle: [{
-                type: Input
-            }], activeHandle: [{
-                type: Input
-            }], deactivateHandle: [{
-                type: Input
-            }], wrap: [{
-                type: HostBinding,
-                args: ['class.the-overlay-menu-wrap']
-            }], handleDocumentMouseDown: [{
-                type: HostListener,
-                args: ['document: mousedown', ['$event']]
-            }], handleMouseDown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }] } });
-
 const getTableEntry = (editor) => {
     const { tableEntry } = createTablePosition(editor);
     return tableEntry;
@@ -11716,25 +11653,6 @@ const getSelectedCell = (editor) => {
     return null;
 };
 
-const setSelectedCellsBackgroundColor = (editor, color, tableStore) => {
-    // 点击自定义颜色面板输入框设置颜色值时，会丢失焦点和选区（目前无法做到焦点同时存在于编辑器和输入框）
-    let location;
-    if (!editor.selection) {
-        const { rangeRef } = THE_EDITOR_PREVIOUS_SELECTION.get(editor);
-        location = rangeRef.current.anchor;
-    }
-    const isHeader = TableEditor.isActiveHeader(editor, location);
-    if (color === 'transparent') {
-        color = null;
-    }
-    if ((color === TableHeaderBackgroundColor && isHeader) || (color === SpecialBackgroundColor && !isHeader)) {
-        tableStore.setSelectedCellsBackgroundColor(null);
-    }
-    else {
-        tableStore.setSelectedCellsBackgroundColor(color);
-    }
-};
-
 function setTableOptions(editor, newOptions) {
     const tablePosition = createTablePosition(editor);
     const tablePath = getTablePath(editor);
@@ -11784,6 +11702,91 @@ function removeColumnOrRows(editor, tableStore, options) {
     }
 }
 
+const setSelectedCellsBackgroundColor = (editor, color, tableStore) => {
+    // 点击自定义颜色面板输入框设置颜色值时，会丢失焦点和选区（目前无法做到焦点同时存在于编辑器和输入框）
+    let location;
+    if (!editor.selection) {
+        const { rangeRef } = THE_EDITOR_PREVIOUS_SELECTION.get(editor);
+        location = rangeRef.current.anchor;
+    }
+    const isHeader = TableEditor.isActiveHeader(editor, location);
+    if (color === 'transparent') {
+        color = null;
+    }
+    if ((color === TableHeaderBackgroundColor && isHeader) || (color === SpecialBackgroundColor && !isHeader)) {
+        tableStore.setSelectedCellsBackgroundColor(null);
+    }
+    else {
+        tableStore.setSelectedCellsBackgroundColor(color);
+    }
+};
+
+function setCellMenuVisibility(editor, menuList, tableInfo) {
+    const { selectedCellPositions, isFullscreen, isSelectedTable, selectedRowsIndex, selectedColumnsIndex } = tableInfo;
+    const isCellMerged = isSelectedCellMerged(editor);
+    const selectCellNodes = getSelectCellNode(editor, selectedCellPositions).filter(item => !item.node.hidden);
+    const isRect = isRectangularInTableCells(editor, selectedCellPositions);
+    menuList.forEach(item => {
+        switch (item.key) {
+            case 'merge-cells':
+                item.visibility = selectCellNodes && selectCellNodes.length > 1 && !isSelectedTable && isRect;
+                break;
+            case 'split-cells':
+                item.visibility = selectCellNodes && selectCellNodes.length === 1 && isCellMerged;
+                break;
+            case 'delete-selection-rows':
+                item.visibility = !(isFullscreen && selectedColumnsIndex.length);
+                break;
+            case 'delete-selection-columns':
+                item.visibility = !(isFullscreen && selectedRowsIndex.length);
+                break;
+            case 'delete-table':
+                item.visibility = !isFullscreen;
+                break;
+            case TableInsertType.insertRowsUp:
+                const hasHeaderRowCell = TableEditor.hasHeaderRowCell(editor);
+                item.visibility = !hasHeaderRowCell && isRect;
+                break;
+            case TableInsertType.insertRowsDown:
+                item.visibility = isRect;
+                break;
+            case TableInsertType.insertColumnsLeft:
+                const hasHeaderColumnCell = TableEditor.hasHeaderColumnCell(editor);
+                item.visibility = !hasHeaderColumnCell && isRect;
+                break;
+            case TableInsertType.insertColumnsRight:
+                item.visibility = isRect;
+                break;
+        }
+    });
+}
+
+function splitCell(editor) {
+    const tablePosition = createTablePosition(editor);
+    const { cell, table, cellEntry } = tablePosition;
+    if ((!cell.rowspan && !cell.colspan) || (cell.rowspan === 1 && cell.colspan === 1))
+        return editor;
+    const cellRow = tablePosition.getRowIndex();
+    const cellCol = tablePosition.getColumnIndex();
+    resetTableCell(editor, table, cell, cellRow, cellCol);
+    Transforms.select(editor, cellEntry[1]);
+    Transforms.collapse(editor, { edge: 'end' });
+}
+function resetTableCell(editor, table, cell, cellRow, cellCol) {
+    const rowSpanIndex = cellRow + (cell.rowspan || 1) - 1;
+    const colSpanIndex = cellCol + (cell.colspan || 1) - 1;
+    Editor.withoutNormalizing(editor, () => {
+        table.children.map((row, rowIndex) => {
+            row.children.map((col, colIndex) => {
+                if (rowIndex >= cellRow && rowIndex <= rowSpanIndex && colIndex >= cellCol && colIndex <= colSpanIndex) {
+                    const path = findPath(editor, col);
+                    Transforms.setNodes(editor, { colspan: null, rowspan: null, hidden: null }, { at: path });
+                }
+            });
+        });
+    });
+}
+
 const getMinAndMaxCellIndex = (editor, selectedCellPositions, maxRow, maxCol, minRow, minCol, table) => {
     const beforeCols = [];
     const beforeRows = [];
@@ -12522,6 +12525,7 @@ class TheTableContextMenuService {
                 },
                 hasBackdrop: false,
                 placement: 'bottomLeft',
+                panelClass: 'the-table-contextmenu-panel',
                 viewContainerRef: this.theContextService.getOptions().viewContainerRef,
                 manualClosure: true,
                 insideClosable: false,