@worktile/theia 17.0.0 → 17.1.0

package/interfaces/editor.d.ts

@@ -19,6 +19,7 @@ export interface TheEditor extends AngularEditor, HistoryEditor {
     nestedStructureByKey: NestedStructureByKey;
     extraElementOptions: ElementOptionsInfo[];
     globalMousedown: (event: MouseEvent) => void;
+    mousedown: (event: MouseEvent) => void;
     renderElement: (element: Element) => ViewType;
     renderLeaf: (text: Text) => ViewType;
     isContainer: (element: Element) => boolean;
@@ -44,16 +45,26 @@ export declare const TheEditor: {
     insertTextData(editor: AngularEditor, data: DataTransfer): boolean;
     onKeydown(editor: AngularEditor, data: KeyboardEvent): void;
     onClick(editor: AngularEditor, data: MouseEvent): void;
-    setFragmentData(editor: AngularEditor, data: DataTransfer, originEvent?: "copy" | "drag" | "cut"): void;
+    setFragmentData(editor: AngularEditor, data: DataTransfer, originEvent?: "drag" | "copy" | "cut"): void;
     deleteCutData(editor: AngularEditor): void;
     toDOMNode(editor: AngularEditor, node: Node): HTMLElement;
     toDOMPoint(editor: AngularEditor, point: import("slate").BasePoint): import("slate-angular").DOMPoint;
     toDOMRange(editor: AngularEditor, range: import("slate").BaseRange): globalThis.Range;
-    toSlateNode(editor: AngularEditor, domNode: globalThis.Node): Node;
+    toSlateNode<T extends boolean>(editor: AngularEditor, domNode: globalThis.Node, options?: {
+        suppressThrow: T;
+    }): T extends true ? Node : Node;
     findEventRange(editor: AngularEditor, event: any): import("slate").BaseRange;
-    isLeafInEditor(editor: AngularEditor, leafNode: globalThis.Element): boolean;
-    toSlatePoint(editor: AngularEditor, domPoint: import("slate-angular").DOMPoint): import("slate").BasePoint;
-    toSlateRange(editor: AngularEditor, domRange: globalThis.Range | Selection | StaticRange): import("slate").BaseRange;
+    isLeafInEditor(editor: AngularEditor, leafNode: globalThis.Element, options: {
+        suppressThrow: boolean;
+    }): boolean;
+    toSlatePoint<T_1 extends boolean>(editor: AngularEditor, domPoint: import("slate-angular").DOMPoint, options: {
+        exactMatch?: boolean;
+        suppressThrow: T_1;
+    }): T_1 extends true ? import("slate").BasePoint : import("slate").BasePoint;
+    toSlateRange<T_2 extends boolean>(editor: AngularEditor, domRange: globalThis.Range | StaticRange | Selection, options?: {
+        exactMatch?: boolean;
+        suppressThrow: T_2;
+    }): T_2 extends true ? import("slate").BaseRange : import("slate").BaseRange;
     isLeafBlock(editor: AngularEditor, node: Node): boolean;
     isBlockCardLeftCursor(editor: AngularEditor): boolean;
     isBlockCardRightCursor(editor: AngularEditor): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worktile/theia",
-  "version": "17.0.0",
+  "version": "17.1.0",
   "description": "theia editor",
   "author": "YanDong <nanianqiumo@foxmail.com>",
   "homepage": "https://github.com/atinc/theia#readme",
@@ -38,8 +38,8 @@
   "peerDependencies": {
     "@angular/core": "^17.2.4",
     "date-fns": ">= 2.6.0",
-    "slate-angular": "17.0.0",
-    "slate": ">= 0.72.8",
+    "slate-angular": "17.1.0",
+    "slate": ">= 0.101.5",
     "ngx-tethys": "^17.0.0",
     "ng-codemirror": "^17.0.0",
     "lodash": "3.10.1",

package/plugins/code/code.component.d.ts

@@ -1,5 +1,5 @@
 import { Overlay } from '@angular/cdk/overlay';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { CodeMirrorComponent } from 'ng-codemirror';
 import { ThyNotifyService } from 'ngx-tethys/notify';
 import { ThyPopover, ThyPopoverRef } from 'ngx-tethys/popover';
@@ -19,7 +19,6 @@ export declare class TheCode extends TheBaseElement<CodeElement, Editor> impleme
     private contextService;
     private ngZone;
     private thyPopover;
-    private viewContainerRef;
     private overlay;
     startRenderCodemirror: boolean;
     dropdownMode: typeof DropdownMode;
@@ -48,7 +47,7 @@ export declare class TheCode extends TheBaseElement<CodeElement, Editor> impleme
     toolbarDropdown: TheToolbarDropdown;
     get code(): string;
     get isToolbarOpen(): boolean;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyNotifyService: ThyNotifyService, contextService: TheContextService, ngZone: NgZone, thyPopover: ThyPopover, viewContainerRef: ViewContainerRef, overlay: Overlay);
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyNotifyService: ThyNotifyService, contextService: TheContextService, ngZone: NgZone, thyPopover: ThyPopover, overlay: Overlay);
     onContextChange(): void;
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/plugins/image/image.component.d.ts

@@ -1,5 +1,5 @@
 import { Overlay } from '@angular/cdk/overlay';
-import { AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { ThyImageDirective, ThyImageGroup } from 'ngx-tethys/image';
 import { ThyPopover } from 'ngx-tethys/popover';
 import { Editor } from 'slate';
@@ -12,12 +12,11 @@ import * as i0 from "@angular/core";
 export declare class TheImage extends TheBaseElement<ImageElement, Editor> implements OnInit, OnDestroy, AfterViewInit, BeforeContextChange<SlateElementContext> {
     elementRef: ElementRef;
     cdr: ChangeDetectorRef;
-    imageGroupComponent: ThyImageGroup;
+    imageGroup: ThyImageGroup;
     private imageUploaderService;
     private theContextService;
     private thyPopover;
     private overlay;
-    private viewContainerRef;
     private destroyRef;
     naturalWidth: number;
     naturalHeight: number;
@@ -43,7 +42,7 @@ export declare class TheImage extends TheBaseElement<ImageElement, Editor> imple
     img: ElementRef;
     layoutToolbar: TemplateRef<any>;
     imageDirective: ThyImageDirective;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, imageGroupComponent: ThyImageGroup, imageUploaderService: TheImageUploaderService, theContextService: TheContextService, thyPopover: ThyPopover, overlay: Overlay, viewContainerRef: ViewContainerRef, destroyRef: DestroyRef);
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, imageGroup: ThyImageGroup, imageUploaderService: TheImageUploaderService, theContextService: TheContextService, thyPopover: ThyPopover, overlay: Overlay, destroyRef: DestroyRef);
     beforeContextChange: (value: SlateElementContext<ImageElement>) => void;
     ngOnInit(): void;
     ngAfterViewInit(): void;

package/plugins/image/image.component.scss

@@ -3,7 +3,7 @@
 .slate-element-image {
     display: block;
 
-    .image-container {
+    .the-image-container {
         .image-content {
             position: relative;
             display: inline-block;
@@ -206,7 +206,7 @@
         }
     }
 
-    .image-container:hover .layer {
+    .the-image-container:hover .layer {
         display: block;
 
         &.readonly {

package/plugins/link/link.component.d.ts

@@ -1,5 +1,5 @@
 import { Overlay } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { ThyPopover, ThyPopoverRef } from 'ngx-tethys/popover';
 import { Editor } from 'slate';
 import { SlateElementContext } from 'slate-angular';
@@ -12,12 +12,11 @@ export declare class TheBaseLink extends TheBaseElement<LinkElement, Editor> imp
     cdr: ChangeDetectorRef;
     private thyPopover;
     private overlay;
-    private viewContainerRef;
     thyPopoverHoverRef: ThyPopoverRef<any>;
     thyPopoverEditRef: ThyPopoverRef<any>;
     get linkHoverOpened(): boolean;
     get linkEditOpened(): boolean;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyPopover: ThyPopover, overlay: Overlay, viewContainerRef: ViewContainerRef);
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyPopover: ThyPopover, overlay: Overlay);
     ngOnInit(): void;
     closeHoverPopover(): void;
     beforeContextChange: (value: SlateElementContext) => void;
@@ -33,6 +32,8 @@ export declare class TheBaseLink extends TheBaseElement<LinkElement, Editor> imp
     static ɵcmp: i0.ɵɵComponentDeclaration<TheBaseLink, "ng-component", never, {}, {}, never, never, false, never>;
 }
 export declare class TheLink extends TheBaseLink {
+    outletParent: ElementRef;
+    getOutletParent: () => any;
     inlineChromiumBugfix: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheLink, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TheLink, "a[theLink]", never, {}, {}, never, never, true, never>;

package/plugins/normalizers/insert-paragraph-nodes.d.ts

@@ -1,7 +1,6 @@
 import { CustomElementKinds } from '../../custom-types';
-import { TransformEditor } from '../common/transforms.plugin';
 export interface InsertParagraphNodesOptions {
     types: CustomElementKinds[];
 }
-export declare const withInsertParagraphNodes: <T extends import("../../interfaces").TheEditor & TransformEditor>(editor: T) => T;
+export declare const withInsertParagraphNodes: <T extends import("../../interfaces").TheEditor>(editor: T) => T;
 export declare const createInsertParagraphNodesPlugin: <T = {}>(override?: Partial<import("../../interfaces").ThePlugin<T, InsertParagraphNodesOptions>>, overrideByKey?: import("../../interfaces").OverrideByKey) => import("../../interfaces").ThePlugin<T, InsertParagraphNodesOptions>;

package/plugins/normalizers/trailing-node.plugin.d.ts

@@ -1,9 +1,8 @@
 import { QueryOptions } from '../../interfaces';
-import { TransformEditor } from '../common/transforms.plugin';
 import { CustomElementKinds } from '../../custom-types';
 export interface WithTrailingNode extends QueryOptions {
     type?: CustomElementKinds;
     level?: number;
 }
-export declare const withTrailingNode: <T extends import("../../interfaces").TheEditor & TransformEditor>(editor: T) => T;
+export declare const withTrailingNode: <T extends import("../../interfaces").TheEditor>(editor: T) => T;
 export declare const createTrailingNodePlugin: <T = {}>(override?: Partial<import("../../interfaces").ThePlugin<T, {}>>, overrideByKey?: import("../../interfaces").OverrideByKey) => import("../../interfaces").ThePlugin<T, {}>;

package/plugins/soft-break/soft-break.plugin.d.ts

@@ -1,5 +1,4 @@
 import { TheEditor } from '../../interfaces';
-import { TransformEditor } from '../common/transforms.plugin';
 import { SoftBreakOnKeyDownOptions } from './soft-break.types';
-export declare const withSoftBreak: <T extends TheEditor & TransformEditor>(editor: T) => T;
+export declare const withSoftBreak: <T extends TheEditor>(editor: T) => T;
 export declare const createSoftBreakPlugin: <T = {}>(override?: Partial<import("../../interfaces").ThePlugin<T, SoftBreakOnKeyDownOptions>>, overrideByKey?: import("../../interfaces").OverrideByKey) => import("../../interfaces").ThePlugin<T, SoftBreakOnKeyDownOptions>;

package/plugins/table/components/insert-mark/insert-mark.component.d.ts

@@ -19,6 +19,7 @@ export declare class TheInsertMark implements OnInit, OnDestroy {
     constructor(cdr: ChangeDetectorRef, renderer2: Renderer2);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    preventDefault(event: MouseEvent): void;
     insert(event: MouseEvent): void;
     onMouseEnter(event: MouseEvent): void;
     onMouseLeave(event: MouseEvent): void;

package/plugins/table/components/row/row.component.d.ts

@@ -1,20 +1,25 @@
-import { ChangeDetectorRef, ElementRef, OnInit, Renderer2 } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnInit, Renderer2 } from '@angular/core';
+import { AfterContextChange } from 'slate-angular';
 import { TableRowElement } from '../../../../custom-types';
-import { TheBaseElement } from '../../../../interfaces/';
-import { TablePosition } from '../../utils';
+import { TheBaseElement } from '../../../../interfaces/view-base';
 import * as i0 from "@angular/core";
-export declare class TheTableRow extends TheBaseElement<TableRowElement> implements OnInit {
+export declare class TheTableRow extends TheBaseElement<TableRowElement> implements OnInit, AfterViewInit, AfterContextChange {
     elementRef: ElementRef<HTMLElement>;
     cdr: ChangeDetectorRef;
     private renderer;
     height: string;
     numberedColumn: boolean;
     rowNumber: number | string;
+    numberedColumnRef: ElementRef<HTMLElement>;
     constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, renderer: Renderer2);
     onContextChange(): void;
+    afterContextChange(): void;
     ngOnInit(): void;
-    useHeight(): void;
-    setNumberColumn(ps: TablePosition, rowIndex: number): void;
+    ngAfterViewInit(): void;
+    setHeight(): void;
+    setStickyRowClass(rowIndex: number): void;
+    setNumberColumn(rowIndex: number): void;
+    updateNumberedColumnPosition(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheTableRow, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TheTableRow, "tr[theTableRow]", never, {}, {}, never, never, true, never>;
 }

package/plugins/table/components/table.component.d.ts

@@ -35,15 +35,18 @@ export declare class TheTable extends TheBaseElement<TableElement, Editor> imple
     isInTable: boolean;
     tablePluginOptions: ThePluginOption<ThePluginTableOption>;
     isStickyTop: boolean;
-    isScrollX: boolean;
+    isScrolledXOfScrollContainer: boolean;
     scrollContainerTop: number;
-    tableRectLeft: number;
     isRightShadow: boolean;
     isLeftShadow: boolean;
     previousScrollContainer: string;
     columns: TheTableColumn[];
     isMobileMode: boolean;
     selectedCells: TableCellElement[];
+    tableWrapperWidth: number;
+    tableWrapperLeft: number;
+    isFreezeRow: boolean;
+    isFreezeColumn: boolean;
     get nativeElement(): HTMLElement;
     get tbodyNativeElement(): HTMLElement;
     tableWrapper: ElementRef<HTMLElement>;
@@ -57,35 +60,44 @@ export declare class TheTable extends TheBaseElement<TableElement, Editor> imple
     headerRowRightShadow: ElementRef<HTMLElement>;
     colgroup: ElementRef<HTMLElement>;
     rowControlsButtonWrapper: QueryList<ElementRef<HTMLElement>>;
-    handleMousedown(event: MouseEvent): void;
+    getOutletParent: () => any;
     onContextChange(): void;
+    afterChildrenViewUpdate(): void;
+    afterRowControlsUpdate(): void;
     constructor(elementRef: ElementRef<HTMLElement>, eventDispatcher: TableCellEventDispatcher, resizeNotifier: ColumnResizeNotifierSource, tableStore: TableStore, cdr: ChangeDetectorRef, ngZone: NgZone, tableService: TableService, theTableContextMenuService: TheTableContextMenuService, freezeColumnPipe: TableFreezeColumnPipe, freezeRowPipe: TableFreezeRowPipe, renderer: Renderer2, contextService: TheContextService, config: TheModeConfig);
     ngOnInit(): void;
-    getWrapperWidth(): number;
+    getWrapperWidthAndLeft(): void;
     ngAfterViewInit(): void;
-    getColumnGroups(): void;
     setHeaderRowShadow(): void;
     calcHeaderRowShadow(): {
-        height: any;
+        height: number;
         top: number;
     };
-    subscribeScrollContainerScroll(): void;
-    setHeaderCellStyle(): void;
-    removeHeaderCellStyle(cells: TableCellElement[]): void;
-    setHeaderColumnAndControlStyle(cells: TableCellElement[]): void;
+    subscribeScrollContainerScroll(tableWrapperLeft: number): void;
+    applyHeaderCellClass(isHeaderCell: boolean, cell: TableCellElement, className: string): void;
+    setTableHeaderStyle(): void;
+    setHeaderCellClass(): void;
+    setHeaderColumnStickyCellClass(): void;
     setHeaderRowStyle(): void;
     setGridColumnsStyle(): void;
+    getStickRowElements(): {
+        firstHeaderRow: Element;
+        columnControlsWrapper: HTMLElement;
+        tableCornerControl: HTMLElement;
+        rowControlInner: HTMLElement;
+        firstRowControlButton: HTMLElement;
+    };
     setStickyRowStyle(): void;
-    setRowControlButtonStyle(rowControlButton: HTMLElement): void;
-    bindTableScrollingShadow(): void;
+    setTableScrollingShadow(): void;
+    setTableLeftShadow(scrollLeft?: number): void;
+    setTableRightShadow(scrollLeft?: number): void;
     subscribeCellPositionChange(): void;
     subscribeCellsChange(): void;
     useRowControls(): void;
     detectChanges(): void;
-    resolveImage(): Promise<boolean> | Promise<any[]>;
+    resolveImage(): Promise<any[]> | Promise<boolean>;
     getColControls(): void;
     getIsInTable(): void;
-    getDefaultCellWidth(): number[];
     initializeColumns(): void;
     initializeRows(): void;
     transformRowHeight(): void;
@@ -98,9 +110,10 @@ export declare class TheTable extends TheBaseElement<TableElement, Editor> imple
     listenKeydownEvent(): void;
     listenKeyupEvent(): void;
     private listenSelectstartEvent;
+    setStickyRowPointerEvents(pointerEventsStyle: string): void;
     listenTableWrapperScroll(): void;
     updateStickyRowScrollLeft(): void;
-    setHeaderRowLeftStyle(): void;
+    setStickyElementLeftStyle(): void;
     getColControlButtonWidth: () => number;
     trackByFnRowControls(index: number): number;
     trackByFnColControls(index: number): number;

package/plugins/table/components/table.component.scss

@@ -6,7 +6,7 @@
 $expand-size: 12px;
 $controls-border: 1px solid variables.$gray-300;
 $table-scroll-wrap-padding-top: 31px;
-$dot-zIndex: 20;
+$dot-z-index: 20;
 $dot-size: 19px;
 $dot-padding-top: 5px;
 $dot-shadow-top: math.div($dot-size - 1, 2);
@@ -16,6 +16,10 @@ $control-corner-width: 12px;
 $header-cell-bg-color: #f3f3f3;
 $top-cell-z-index: 13;
 
+.slate-block-card-table {
+    z-index: 0;
+}
+
 .slate-element-table {
     display: block;
     width: calc(100% - 2px);
@@ -95,6 +99,10 @@ $top-cell-z-index: 13;
                     border: 1px solid variables.$danger;
                 }
             }
+
+            &.slate-element-table-cell {
+                margin: 0;
+            }
         }
 
         .focused-cell,
@@ -103,7 +111,6 @@ $top-cell-z-index: 13;
         }
 
         .the-header-cell {
-            margin-bottom: 0;
             background: $header-cell-bg-color;
         }
 
@@ -131,7 +138,6 @@ $top-cell-z-index: 13;
         margin: 0 auto 16px;
         .the-table-wrapper {
             position: relative;
-            z-index: 0;
             margin-top: -10px;
             padding-top: 10px;
             overflow: auto;
@@ -219,8 +225,8 @@ $top-cell-z-index: 13;
             top: 1px;
             left: 1px;
         }
-        .the-sticky-corner-controls,
-        .the-table-row-controls-button-wrap {
+        .the-table-corner-controls,
+        .the-table-row-control-button-wrap {
             width: 44px;
         }
     }
@@ -233,7 +239,7 @@ $top-cell-z-index: 13;
                 }
             }
         }
-        .the-table-row-controls-button-wrap {
+        .the-table-row-control-button-wrap {
             &:first-child {
                 width: 74px; // width + insert-mask: 55px + 19px
             }
@@ -241,7 +247,7 @@ $top-cell-z-index: 13;
     }
 
     .the-table-row-controls-inner {
-        .the-table-row-controls-button-wrap {
+        .the-table-row-control-button-wrap {
             &:first-child {
                 position: fixed;
                 z-index: $top-cell-z-index;
@@ -250,11 +256,11 @@ $top-cell-z-index: 13;
             }
         }
     }
-    .the-sticky-corner-controls {
+    .the-table-corner-controls {
         position: fixed;
-        z-index: 12;
         width: 11px;
         height: 11px;
+        z-index: $top-cell-z-index;
         .the-table-corner-button {
             height: 11px;
         }
@@ -273,7 +279,7 @@ $top-cell-z-index: 13;
         }
         .the-table-row-controls-inner {
             z-index: 4;
-            .the-table-row-controls-button-wrap {
+            .the-table-row-control-button-wrap {
                 &:first-child {
                     padding-left: 19px; // insert-mask width: 19px
                     margin-left: -19px;
@@ -310,7 +316,7 @@ $top-cell-z-index: 13;
     .the-table-controls-insert-wrapper {
         display: block;
     }
-    .the-sticky-corner-controls {
+    .the-table-corner-controls {
         .the-table-corner-button {
             position: unset;
         }
@@ -323,7 +329,7 @@ $top-cell-z-index: 13;
         }
     }
 
-    .the-table-col-controls-wrapper .the-table-col-controls {
+    .the-table-col-controls-wrapper .the-table-col-control {
         background: variables.$gray-100;
         background-clip: padding-box;
         border-top: $controls-border;
@@ -469,7 +475,7 @@ $top-cell-z-index: 13;
             padding-top: 0;
         }
         .the-table-row-controls-inner {
-            .the-table-row-controls-button-wrap {
+            .the-table-row-control-button-wrap {
                 &:first-child {
                     margin-top: 36px;
                 }
@@ -479,8 +485,8 @@ $top-cell-z-index: 13;
             .the-table-row-controls {
                 left: 0;
             }
-            .the-sticky-corner-controls,
-            .the-table-row-controls-button-wrap {
+            .the-table-corner-controls,
+            .the-table-row-control-button-wrap {
                 width: 55px;
             }
         }
@@ -488,7 +494,7 @@ $top-cell-z-index: 13;
             display: grid;
         }
         .the-table-col-controls-wrapper.the-sticky-row,
-        .the-sticky-corner-controls {
+        .the-table-corner-controls {
             padding-top: 25px;
             background: variables.$white;
             border: none;
@@ -502,6 +508,7 @@ $top-cell-z-index: 13;
     width: 100%;
     height: $control-corner-width;
     visibility: hidden;
+    z-index: 11;
 
     .the-table-corner-button {
         position: absolute;
@@ -573,7 +580,10 @@ $top-cell-z-index: 13;
         height: $dot-size;
         background-color: #d8d8d8;
         border-radius: math.div($dot-size + 1, 2);
-        box-shadow: inset $dot-padding-top 0 0 0 #d8d8d8, inset (-$dot-padding-top) 0 0 0 #d8d8d8, inset 0 (-$dot-shadow-top) 0 0 #d8d8d8,
+        box-shadow:
+            inset $dot-padding-top 0 0 0 #d8d8d8,
+            inset (-$dot-padding-top) 0 0 0 #d8d8d8,
+            inset 0 (-$dot-shadow-top) 0 0 #d8d8d8,
             inset 0 $dot-shadow-top 0 0 #d8d8d8;
     }
 
@@ -586,8 +596,11 @@ $top-cell-z-index: 13;
 
         &:hover:after {
             border-radius: 4px;
-            box-shadow: inset $dot-padding-top 0 0 0 variables.$primary, inset (-$dot-padding-top) 0 0 0 variables.$primary,
-                inset 0 (-$dot-shadow-top) 0 0 variables.$primary, inset 0 $dot-shadow-top 0 0 variables.$primary !important;
+            box-shadow:
+                inset $dot-padding-top 0 0 0 variables.$primary,
+                inset (-$dot-padding-top) 0 0 0 variables.$primary,
+                inset 0 (-$dot-shadow-top) 0 0 variables.$primary,
+                inset 0 $dot-shadow-top 0 0 variables.$primary !important;
         }
 
         &:hover:before {
@@ -597,7 +610,7 @@ $top-cell-z-index: 13;
 
     .the-table-controls-insert-line {
         position: absolute;
-        z-index: $dot-zIndex;
+        z-index: $dot-z-index;
         background-color: variables.$primary;
 
         &[data-dot-type='column'] {
@@ -616,17 +629,17 @@ $top-cell-z-index: 13;
 
 .the-table-row-controls {
     position: relative;
-    z-index: 11;
     display: none;
     box-sizing: border-box;
     width: $control-width;
+    z-index: 11;
 
     .the-table-row-controls-inner {
         display: flex;
         flex-direction: column;
     }
 
-    .the-table-row-controls-button-wrap {
+    .the-table-row-control-button-wrap {
         position: relative;
         margin-top: -1px;
 
@@ -674,7 +687,7 @@ $top-cell-z-index: 13;
     height: $control-width;
     line-height: $control-width;
 
-    .the-table-col-controls {
+    .the-table-col-control {
         position: relative;
         margin: 0;
         padding: 0;
@@ -725,7 +738,7 @@ $top-cell-z-index: 13;
 
 .the-editor-readonly {
     .the-table-row-controls,
-    .the-table-col-controls {
+    .the-table-col-control {
         cursor: default;
     }
 

package/plugins/table/components/td/td.component.d.ts

@@ -1,5 +1,5 @@
 import { ConnectedPosition, Overlay, OverlayRef, ScrollDispatcher } from '@angular/cdk/overlay';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, Injector, NgZone, OnDestroy, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, ElementRef, Injector, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { Editor } from 'slate';
 import { ColumnResizeNotifierSource } from '../../../../components/column-resize/column-resize-notifier';
@@ -8,7 +8,6 @@ import { ResizeRef } from '../../../../components/column-resize/resize-ref';
 import { ColumnResizingStore } from '../../../../components/column-resize/resizing.store';
 import { TableCellElement } from '../../../../custom-types';
 import { TheBaseElement } from '../../../../interfaces';
-import { TableFreezeColumnPipe } from '../../table.pipe';
 import { TableOptions } from '../../table.types';
 import { TablePosition } from '../../utils';
 import { TheTable } from '../table.component';
@@ -20,13 +19,11 @@ export declare class TheTd extends TheBaseElement<TableCellElement, Editor> impl
     elementRef: ElementRef;
     cdr: ChangeDetectorRef;
     private renderer;
-    private viewContainerRef;
     private ngZone;
     injector: Injector;
     overlay: Overlay;
     resizingStore: ColumnResizingStore;
     scrollDispatcher: ScrollDispatcher;
-    freezeColumnPipe: TableFreezeColumnPipe;
     destroy$: Subject<void>;
     tablePosition: TablePosition;
     tableComponent: TheTable;
@@ -34,6 +31,7 @@ export declare class TheTd extends TheBaseElement<TableCellElement, Editor> impl
     hoveredDirection: Position | null;
     tableOptions: TableOptions;
     cellInnerMinHeight: number;
+    cellInner: ElementRef;
     get tableStore(): import("../../table.store").TableStore;
     get tableService(): import("../../table.service").TableService;
     get eventDispatcher(): TableCellEventDispatcher;
@@ -52,15 +50,14 @@ export declare class TheTd extends TheBaseElement<TableCellElement, Editor> impl
     rowspan: number;
     display: string;
     onContextChange(): void;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, renderer: Renderer2, viewContainerRef: ViewContainerRef, ngZone: NgZone, injector: Injector, overlay: Overlay, resizingStore: ColumnResizingStore, scrollDispatcher: ScrollDispatcher, freezeColumnPipe: TableFreezeColumnPipe);
+    getOutletParent: () => any;
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, renderer: Renderer2, ngZone: NgZone, injector: Injector, overlay: Overlay, resizingStore: ColumnResizingStore, scrollDispatcher: ScrollDispatcher);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     getInjectionService(): void;
     subscribeSelectedCellsChange(): void;
     subscribeDangerousCellsChange(): void;
-    subscribeTableChange(): void;
     useState(): void;
-    useTablePosition(): void;
     useBackground(): void;
     useSpan(): void;
     useDisplay(): void;

package/plugins/table/table.editor.d.ts

@@ -1,4 +1,4 @@
-import { Editor, Location, NodeEntry, Path, Range } from 'slate';
+import { Editor, Location, NodeEntry, Path, Point, Range } from 'slate';
 import { Alignment, Indents, MarkTypes, VerticalAlignment } from '../../constants';
 import { CustomElement, TableCellElement, TableElement } from '../../custom-types';
 import { TheEditor } from '../../interfaces';
@@ -19,7 +19,7 @@ export declare const TableEditor: {
     clearCellsContent(editor: Editor, cells?: TableCellElement[]): void;
     isActive(editor: Editor): boolean;
     getSelectedCellPositions(editor: Editor): import("./table.types").CellPosition[];
-    getSelectedCells(editor: Editor): TableCellElement[];
+    getSelectedCells(editor: Editor, location?: Point): TableCellElement[];
     setAlign(editor: Editor, alignment: Alignment, cells?: TableCellElement[]): boolean;
     setVerticalAlign(editor: TheEditor, alignment: VerticalAlignment, cells?: TableCellElement[]): boolean;
     isVerticalAlignActive(editor: TheEditor, alignment: VerticalAlignment): boolean;

package/plugins/table/table.pipe.d.ts

@@ -1,14 +1,19 @@
 import { PipeTransform } from '@angular/core';
-import { ThePluginTableOption } from './table.types';
 import { TableElement } from '../../custom-types';
+import { ThePluginTableOption } from './table.types';
 import * as i0 from "@angular/core";
 export declare class TableFreezeColumnPipe implements PipeTransform {
-    transform(table: TableElement, tablePluginOptions: ThePluginTableOption): boolean;
+    transform(table: TableElement, tablePluginOptions: ThePluginTableOption, tableWrapperWidth: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableFreezeColumnPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<TableFreezeColumnPipe, "freezeColumn", true>;
 }
 export declare class TableFreezeRowPipe implements PipeTransform {
-    transform(table: TableElement, headerRow: boolean, tablePluginOptions: ThePluginTableOption): boolean;
+    transform(table: TableElement, tablePluginOptions: ThePluginTableOption): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableFreezeRowPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<TableFreezeRowPipe, "freezeRow", true>;
 }
+export declare class TableHasHeaderRowPipe implements PipeTransform {
+    transform(table: TableElement): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableHasHeaderRowPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TableHasHeaderRowPipe, "hasHeaderRow", true>;
+}

package/plugins/table/table.service.d.ts

@@ -34,8 +34,6 @@ export declare class TableService {
      * @param tbody tbody元素
      */
     handleKeydownForAreaSelection(e: KeyboardEvent, tbody: HTMLElement): void;
-    cancelPointerSelection(): void;
-    cancelAreaSelection(): void;
     /**
      * 进行区域选择时，阻止默认的选区事件
      * @param e 事件对象