@worktile/theia 14.3.7 → 14.3.9

package/interfaces/plugins/plugins.d.ts

@@ -1,4 +1,3 @@
-import { Editor, Element } from 'slate';
 import { CustomElementKinds } from '../../custom-types';
 import { ToolbarItem } from '../toolbar';
 import { NestedStructureByKey } from '../utility';
@@ -7,14 +6,10 @@ import { ThePluginMenuItem } from './plugin-menu';
 import { NoInfer } from './no-infer';
 import { PluginKey, TheiaPluginKey } from './plugin-key';
 import { WithOverride } from './with-override';
-import { Observable } from 'rxjs';
 export declare type ThePluginBaseOption = {
     allowParentTypes?: (CustomElementKinds | string)[];
     disabledOperateTypes?: CustomElementKinds[];
     disabled?: boolean;
-    showFullscreen?: boolean;
-    setFullscreen?: (editor: Editor, event: MouseEvent, element: Element) => void;
-    fullscreenAction?: (editor: Editor) => Observable<boolean>;
 };
 export declare type ThePluginOption<P> = NoInfer<{
     [key: string]: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worktile/theia",
-  "version": "14.3.7",
+  "version": "14.3.9",
   "description": "theia editor",
   "author": "YanDong <nanianqiumo@foxmail.com>",
   "homepage": "https://github.com/atinc/theia#readme",

package/plugins/link/link.component.scss

@@ -2,6 +2,7 @@
 @use '../../styles/mixins.scss' as mixins;
 
 .slate-element-link {
+    margin: 0 1px;
     cursor: pointer;
 
     &:hover {

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

@@ -1,24 +1,25 @@
-import { OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
+import { OnInit, ChangeDetectorRef, Renderer2 } from '@angular/core';
 import { Editor } from 'slate';
 import { TableStore } from '../../table.store';
 import * as i0 from "@angular/core";
-export declare class TheInsertMarkComponent implements OnInit, OnDestroy {
+export declare class TheInsertMarkComponent implements OnInit {
     private cdr;
+    renderer2: Renderer2;
     type: 'row' | 'column';
     at: number;
     tableStore: TableStore;
+    parentElement: HTMLElement;
     insertLength: string;
     dotWrapperHovered: boolean;
     tooltipContent: string;
     get disabled(): boolean;
     get editor(): Editor;
-    constructor(cdr: ChangeDetectorRef);
+    constructor(cdr: ChangeDetectorRef, renderer2: Renderer2);
     ngOnInit(): void;
     onMouseDown(event: MouseEvent): void;
     onMouseEnter(event: MouseEvent): void;
     onMouseLeave(event: MouseEvent): void;
     getLength(): string;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheInsertMarkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TheInsertMarkComponent, "the-table-insert-mark", never, { "type": "type"; "at": "at"; "tableStore": "tableStore"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TheInsertMarkComponent, "the-table-insert-mark", never, { "type": "type"; "at": "at"; "tableStore": "tableStore"; "parentElement": "parentElement"; }, {}, never, never, false>;
 }

package/plugins/table/components/mixins.scss

@@ -0,0 +1,43 @@
+@use 'ngx-tethys/styles/variables.scss';
+
+$expand-size: 12px;
+
+@mixin controlSelected {
+    background-color: #a3bffe;
+    border-color: variables.$primary;
+}
+
+@mixin controlDangerous {
+    background-color: #ffabac;
+    border-color: variables.$danger;
+}
+
+@mixin tableLeftShadow {
+    &::before {
+        bottom: 0;
+        top: $expand-size * 2 + 10px;
+        left: 0;
+        content: ' ';
+        position: absolute;
+        pointer-events: none;
+        width: 8px;
+        z-index: 2;
+        background: -webkit-gradient(linear, right, left, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.1)));
+        background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+    }
+}
+
+@mixin tableRightShadow{
+    &::after {
+        bottom: 0;
+        right: 0;
+        top: $expand-size * 2 + 10px;
+        content: ' ';
+        position: absolute;
+        pointer-events: none;
+        width: 8px;
+        z-index: 2;
+        background: -webkit-gradient(linear, left, right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+    }
+}

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

@@ -8,8 +8,9 @@ import { TableService } from '../table.service';
 import { TheTableContextMenuService } from '../../../services/table-contextmenu.service';
 import { TheBaseElementComponent } from '../../../interfaces/view-base';
 import { TableCellElement, TableElement } from '../../../custom-types';
-import { TheTableColumn } from '../table.types';
-import { ScrollDispatcher } from '@angular/cdk/scrolling';
+import { ThePluginTableOption, TheTableColumn } from '../table.types';
+import { ThePluginOption } from '../../../interfaces';
+import { TableFreezeColumnPipe } from '../table.pipe';
 import * as i0 from "@angular/core";
 export declare class TheTableComponent extends TheBaseElementComponent<TableElement, Editor> implements OnInit, AfterViewInit, OnDestroy {
     eventDispatcher: TableCellEventDispatcher;
@@ -19,7 +20,7 @@ export declare class TheTableComponent extends TheBaseElementComponent<TableElem
     ngZone: NgZone;
     tableService: TableService;
     private theTableContextMenuService;
-    private scrollDispatcher;
+    private freezeColumnPipe;
     destroy$: Subject<any>;
     rowControls: {
         height: number;
@@ -27,6 +28,7 @@ export declare class TheTableComponent extends TheBaseElementComponent<TableElem
     }[];
     colControls: any[];
     isInTable: boolean;
+    tablePluginOptions: ThePluginOption<ThePluginTableOption>;
     get columns(): TheTableColumn[];
     get nativeElement(): HTMLElement;
     get tbodyNativeElement(): HTMLElement;
@@ -36,7 +38,7 @@ export declare class TheTableComponent extends TheBaseElementComponent<TableElem
     tbodyElement: ElementRef;
     handleMousedown(event: MouseEvent): void;
     onContextChange(): void;
-    constructor(elementRef: ElementRef, eventDispatcher: TableCellEventDispatcher, resizeNotifier: ColumnResizeNotifierSource, tableStore: TableStore, cdr: ChangeDetectorRef, ngZone: NgZone, tableService: TableService, theTableContextMenuService: TheTableContextMenuService, scrollDispatcher: ScrollDispatcher);
+    constructor(elementRef: ElementRef, eventDispatcher: TableCellEventDispatcher, resizeNotifier: ColumnResizeNotifierSource, tableStore: TableStore, cdr: ChangeDetectorRef, ngZone: NgZone, tableService: TableService, theTableContextMenuService: TheTableContextMenuService, freezeColumnPipe: TableFreezeColumnPipe);
     ngOnInit(): void;
     getWrapperWidth(): number;
     ngAfterViewInit(): void;
@@ -70,6 +72,7 @@ export declare class TheTableComponent extends TheBaseElementComponent<TableElem
     onSelectTable(event: MouseEvent): void;
     listenTableContextMenuEvent(): void;
     listenerOnSelectedCells(): void;
+    listenKeydownSelectEvents(): void;
     trackByFnRowControls(index: number): number;
     trackByFnColControls(index: number): number;
     ngOnDestroy(): void;

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

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @use 'ngx-tethys/styles/variables.scss';
-@use '../../../styles/variables.scss'as theVariables;
-@use '../../../styles/mixins.scss'as mixins;
+@use '../../../styles/variables.scss' as theVariables;
+@use './mixins.scss' as mixins;
 
 $expand-size: 12px;
 $controls-border: 1px solid variables.$gray-300;
@@ -13,6 +13,8 @@ $dot-shadow-top: math.div($dot-size - 1, 2);
 $table-scroll-padding: 2px;
 $control-width: 11px;
 $control-corner-width: 12px;
+$header-cell-bg-color: #f3f3f3;
+$top-cell-z-index: 13;
 
 .slate-element-table {
     display: block;
@@ -42,20 +44,37 @@ $control-corner-width: 12px;
             &::after {
                 display: block;
                 position: absolute;
-                border: $controls-border;
+                content: '';
+                top: -1px;
+                left: -1px;
+                right: -1px;
+                bottom: -1px;
+            }
+
+            &.the-sticky-cell {
+                &:after {
+                    border: $controls-border;
+                }
+                &.the-table-left-shadow {
+                    z-index: 12;
+                    @include mixins.tableLeftShadow;
+                    &:before {
+                        top: 0;
+                        left: unset;
+                        right: -8px;
+                        height: 100%;
+                    }
+                }
+                &.the-table-left-shadow.focused-cell {
+                    z-index: $top-cell-z-index;
+                }
             }
 
             &.selected-cell,
             &.focused-cell:not(.selected-cell):not(.dangerous-cell) {
                 &::after {
-                    content: '';
-                    top: -1px;
-                    left: -1px;
-                    right: -1px;
-                    bottom: -1px;
-                    border-width: 1px;
                     z-index: -1;
-                    border-color: variables.$primary;
+                    border: 1px solid variables.$primary;
                 }
             }
 
@@ -68,13 +87,8 @@ $control-corner-width: 12px;
             &.dangerous-cell {
                 &::after {
                     content: '';
-                    top: -1px;
-                    left: -1px;
-                    right: -1px;
-                    bottom: -1px;
-                    border-width: 1px;
                     z-index: -1;
-                    border-color: variables.$danger;
+                    border: 1px solid variables.$danger;
                     background: rgba($color: variables.$danger, $alpha: 0.1);
                 }
             }
@@ -85,6 +99,15 @@ $control-corner-width: 12px;
             z-index: 10;
         }
 
+        .the-header-cell {
+            background: $header-cell-bg-color;
+        }
+
+        .the-sticky-cell {
+            position: sticky;
+            left: 0;
+        }
+
         tbody {
             tr {
                 height: 41px;
@@ -97,37 +120,17 @@ $control-corner-width: 12px;
     }
 }
 
-
 .the-table-container {
     position: relative;
     box-sizing: border-box;
     margin: 0 auto 16px;
 
-    &.the-table-right-shadow::after {
-        bottom: 0;
-        right: 0;
-        top: $expand-size * 2 + 10px;
-        content: ' ';
-        position: absolute;
-        pointer-events: none;
-        width: 8px;
-        z-index: 2;
-        background: -webkit-gradient(linear, left, right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
-        background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
+    &.the-table-right-shadow {
+        @include mixins.tableRightShadow;
     }
 
-    &.the-table-left-shadow::before {
-        bottom: 0;
-        top: $expand-size * 2 + 10px;
-        left: 0;
-        content: ' ';
-        position: absolute;
-        pointer-events: none;
-        width: 8px;
-        z-index: 2;
-        background: -webkit-gradient(linear, right, left, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.1)));
-        background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
-
+    &.the-table-left-shadow {
+        @include mixins.tableLeftShadow;
     }
 
     &.the-table-with-controls {
@@ -159,7 +162,7 @@ $control-corner-width: 12px;
                 left: 44px;
             }
         }
-    
+
         &.the-table-with-controls {
             .the-table-wrapper {
                 margin-left: -55px;
@@ -195,7 +198,6 @@ $control-corner-width: 12px;
 }
 
 .the-table-with-controls {
-
     .the-table-row-controls,
     .the-table-controls-insert-wrapper {
         display: block;
@@ -234,7 +236,6 @@ $control-corner-width: 12px;
 
         &.active,
         &.dangerous {
-
             &::before,
             &::after {
                 content: '';
@@ -268,6 +269,23 @@ $control-corner-width: 12px;
                 background: variables.$danger;
             }
         }
+
+        &.the-sticky-cell {
+            &.the-table-left-shadow {
+                z-index: $top-cell-z-index;
+                @include mixins.tableLeftShadow;
+                &:before {
+                    top: 0;
+                    left: unset;
+                    right: -8px;
+                    height: 100%;
+                }
+            }
+        }
+
+        &.the-top-cell {
+            z-index: $top-cell-z-index;
+        }
     }
 }
 
@@ -356,7 +374,6 @@ $control-corner-width: 12px;
     }
 
     &:not(.disabled) {
-
         &:hover:after,
         &:hover:before {
             background-color: variables.$white !important;
@@ -515,9 +532,7 @@ $control-corner-width: 12px;
     }
 }
 
-
 .the-editor-readonly {
-
     .the-table-row-controls,
     .the-table-col-controls {
         cursor: default;
@@ -528,4 +543,4 @@ $control-corner-width: 12px;
             top: 0px;
         }
     }
-}
+}

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

@@ -58,6 +58,7 @@ export declare class TheTdComponent extends TheBaseElementComponent<TableCellEle
     subscribeSelectedCellsChange(): void;
     subscribeDangerousCellsChange(): void;
     subscribeTableChange(): void;
+    setColumnClass(): void;
     useState(): void;
     useTablePosition(): void;
     useBackground(): void;

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

@@ -0,0 +1,9 @@
+import { PipeTransform } from '@angular/core';
+import { ThePluginTableOption } from './table.types';
+import { TableElement } from '../../custom-types';
+import * as i0 from "@angular/core";
+export declare class TableFreezeColumnPipe implements PipeTransform {
+    transform(element: TableElement, tablePluginOptions: ThePluginTableOption): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TableFreezeColumnPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<TableFreezeColumnPipe, "freezeColumn", false>;
+}

package/plugins/table/table.plugin.d.ts

@@ -1,3 +1,4 @@
+import { ThePluginTableOption } from './table.types';
 import { TheEditor } from '../../interfaces';
 export declare const withTable: <T extends TheEditor>(editor: T) => T;
-export declare const createTablePlugin: <T = {}>(override?: Partial<import("../../interfaces").ThePlugin<T, {}>>, overrideByKey?: import("../../interfaces").OverrideByKey) => import("../../interfaces").ThePlugin<T, {}>;
+export declare const createTablePlugin: <T = {}>(override?: Partial<import("../../interfaces").ThePlugin<T, ThePluginTableOption>>, overrideByKey?: import("../../interfaces").OverrideByKey) => import("../../interfaces").ThePlugin<T, ThePluginTableOption>;

package/plugins/table/table.store.d.ts

@@ -25,6 +25,7 @@ export declare class TableStore {
     isCellSelecting: boolean;
     isRightClicking: boolean;
     maxCol: number;
+    isModSelecting: boolean;
     get selectedCells(): SelectedCell[];
     get dangerousCells(): SelectedCell[];
     constructor();

package/plugins/table/table.types.d.ts

@@ -3,7 +3,12 @@ import { ComponentType } from 'slate-angular';
 import { TheBaseElementComponent } from '../../interfaces/view-base';
 import { ElementKinds } from '../../constants/node-types';
 import type { TheTableComponent } from './components/table.component';
+import { Editor, Element } from 'slate';
+import { Observable } from 'rxjs';
 export declare const TheTableToken: InjectionToken<ComponentType<TheTableComponent>>;
+export declare const STICKY_CELL_CLASS = "the-sticky-cell";
+export declare const HEADER_CELL_CLASS = "the-header-cell";
+export declare const TOP_CELL_CLASS = "the-top-cell";
 export interface TheTableComponentBase extends TheBaseElementComponent {
     initializeColumns: () => void;
     transformColumnsWidth: () => void;
@@ -33,6 +38,12 @@ export interface MenuEntity {
     activeHandle?: (event: MouseEvent) => void;
     deactiveHandle?: (event: MouseEvent) => void;
 }
+export interface ThePluginTableOption {
+    freezeColumnHeader?: boolean;
+    showFullscreen?: boolean;
+    setFullscreen?: (editor: Editor, event: MouseEvent, element: Element) => void;
+    fullscreenAction?: (editor: Editor) => Observable<boolean>;
+}
 export interface SelectedCell {
     row: number;
     col: number;

package/styles/mixins.scss

@@ -1,16 +1,6 @@
 @use 'ngx-tethys/styles/variables.scss';
 @use './variables.scss' as theVariables;
 
-@mixin controlSelected {
-    background-color: rgba($color: variables.$primary, $alpha: 0.6);
-    border-color: variables.$primary;
-}
-
-@mixin controlDangerous {
-    background-color: rgba($color: variables.$danger, $alpha: 0.6);
-    border-color: variables.$danger;
-}
-
 @mixin the-toolbar-disabled {
     &.disabled {
         cursor: not-allowed;