@worktile/theia 2.3.3 → 2.4.2

package/interfaces/auto-format.d.ts

@@ -31,6 +31,7 @@ export interface AutoFormatRule {
      * - inline – insert mark between markups. Should be used with `between`.
      */
     mode?: 'block' | 'inline';
+    key?: string;
     /**
      * When using `inline` mode – if false, do not format when the string can be trimmed.
      */

package/interfaces/editor.d.ts

@@ -5,12 +5,14 @@ import { ElementOptionsInfo } from './valid-children-types';
 import { Predicate } from '../utils/match';
 import { ToolbarOption } from './toolbar';
 import { FontSizes } from '../constants/node-types';
+import { AutoFormatRule } from './auto-format';
 export interface TheEditor extends AngularEditor, HistoryEditor {
     renderElement: (element: Element) => ViewType;
     renderLeaf: (text: Text) => ViewType;
     insertElement: (element: Element) => void;
     isContainer: (element: Element) => boolean;
     extraElementOptions: ElementOptionsInfo[];
+    extraAutoFormatRules: AutoFormatRule[];
     disabled: boolean;
     [key: string]: any;
 }
@@ -81,6 +83,7 @@ export interface TheOptions {
     toolbar?: ToolbarOption;
     disablePlugins?: string[];
     extraElementOptions?: ElementOptionsInfo[];
+    extraAutoFormatRules?: AutoFormatRule[];
 }
 export declare type NodeMatch<T = Node> = Predicate<T>;
 export interface MatchOptions<T = Node> {

package/package.json

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

package/plugins/autoformat/autoformat.plugin.d.ts

@@ -1,2 +1 @@
-import { WithAutoFormatOptions } from '../../interfaces/auto-format';
-export declare const withAutoFormat: ({ rules }: WithAutoFormatOptions) => <T extends import("@worktile/theia").TheEditor>(editor: T) => T;
+export declare const withAutoFormat: () => <T extends import("@worktile/theia").TheEditor>(editor: T) => T;

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

@@ -5,7 +5,6 @@ import { Editor } from 'slate';
 import { LinkElement } from '../../custom-types';
 import { TheBaseElementComponent } from '../../interfaces';
 import { LinkTags } from './link.types';
-import { ThyClickDispatcher } from 'ngx-tethys';
 import { SlateElementContext } from 'slate-angular';
 import * as i0 from "@angular/core";
 export declare class TheBaseLinkComponent extends TheBaseElementComponent<LinkElement, Editor> implements OnInit, OnDestroy {
@@ -14,12 +13,11 @@ export declare class TheBaseLinkComponent extends TheBaseElementComponent<LinkEl
     private thyPopover;
     private overlay;
     private viewContainerRef;
-    private thyClickDispatcher;
     thyPopoverHoverRef: ThyPopoverRef<any>;
     thyPopoverEditRef: ThyPopoverRef<any>;
     get linkHoverOpened(): boolean;
     get linkEditOpened(): boolean;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyPopover: ThyPopover, overlay: Overlay, viewContainerRef: ViewContainerRef, thyClickDispatcher: ThyClickDispatcher);
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyPopover: ThyPopover, overlay: Overlay, viewContainerRef: ViewContainerRef);
     ngOnInit(): void;
     closeHoverPopover(): void;
     beforeContextChange: (value: SlateElementContext) => void;
@@ -37,9 +35,5 @@ export declare class TheBaseLinkComponent extends TheBaseElementComponent<LinkEl
 export declare class TheLinkComponent extends TheBaseLinkComponent {
     inlineChromiumBugfix: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheLinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TheLinkComponent, "span[theLink]", never, {}, {}, never, never>;
-}
-export declare class TheReadonlyLinkComponent extends TheBaseLinkComponent {
-    static ɵfac: i0.ɵɵFactoryDeclaration<TheReadonlyLinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TheReadonlyLinkComponent, "a[theLink]", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TheLinkComponent, "a[theLink]", never, {}, {}, never, never>;
 }

package/plugins/link/link.component.scss

@@ -1,7 +1,5 @@
 .slate-element-link {
-    color: $primary;
     cursor: pointer;
-
     &:hover {
         text-decoration: none;
     }

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

@@ -1,4 +1,4 @@
-@use "sass:math";
+@use 'sass:math';
 
 $expand-size: 12px;
 $controls-border: 1px solid $gray-300;
@@ -17,26 +17,23 @@ $control-corner-width: 12px;
         border-spacing: 0;
         word-wrap: break-word;
         box-sizing: border-box;
-        border-collapse: collapse;
+        border-collapse: unset;
         margin: 13px 8px 0 0;
-        border: $controls-border;
-        border-top: none;
+        border-bottom: $controls-border;
         table-layout: fixed;
         overflow: visible;
         margin-left: 0;
         margin-right: 0;
-        width: 100%;
+        width: calc(100% - 2px);
 
         td {
             word-wrap: break-word;
-            border: $controls-border;
-            border-width: 1px 0 0 1px;
+            border-top: $controls-border;
+            border-right: $controls-border;
             vertical-align: top;
             padding: 8px;
             position: relative;
             cursor: text;
-            z-index: 12;
-
             &::after {
                 display: block;
                 position: absolute;
@@ -77,22 +74,20 @@ $control-corner-width: 12px;
                 }
             }
         }
+        .focused-cell,.selected-cell{
+            z-index: 10;
+        }
         tbody {
             tr {
                 height: 41px;
+                td:first-child {
+                    border-left: $controls-border;
+                }
             }
         }
     }
 }
 
-// resolve borders not shown in Firefox
-@-moz-document url-prefix() {
-    .slate-element-table .the-table {
-        td {
-            background-clip: padding-box;
-        }
-    }
-}
 
 .the-table-container {
     position: relative;
@@ -114,6 +109,7 @@ $control-corner-width: 12px;
         left: -$control-width;
         top: 23px;
         user-select: none;
+        z-index: 1;
     }
 
     &.the-table-selection-hide ::selection {
@@ -122,59 +118,99 @@ $control-corner-width: 12px;
 }
 
 .the-table-with-controls {
-
-    .the-table-corner-controls,
     .the-table-row-controls,
     .the-table-controls-insert-wrapper {
         display: block;
     }
 
     .the-table-col-controls-wrapper .the-table-col-controls {
+        background: $gray-100;
         border-right: $controls-border;
         border-top: $controls-border;
-        background: $gray-100;
-
-        &:first-child {
+        background-clip: padding-box;
+        cursor: pointer;
+        &:first-child{
             border-left: $controls-border;
         }
-
-        .the-table-col-controls-inner {
-            display: block;
-            border: $controls-border;
-
-            &.active {
-                @include controlSelected;
-                z-index: 11;
+        &:last-child {
+            .the-table-controls-insert-wrapper {
+                right: 0;
+                &:after {
+                    left: 9px;
+                }
             }
+            .the-table-controls-insert-wrapper:hover {
+                &:after {
+                    left: 0;
+                }
+                .the-table-controls-insert-line[data-dot-type='column'] {
+                    left: $dot-size;
+                }
+            }
+        }
+        &.active, &.dangerous {
+            &::before, &::after{
+                content: '';
+                position: absolute;
+                width: 1px;
+                height: 12px;
+                background: $primary;
+                top: -1px;
+            }
+            &::before{
+                left: -1px;
+            }
+            &::after{
+                right: -1px;
+            }
+        }
+        &.active {
+            @include controlSelected;
+            z-index: 11;
+        }
 
-            &.dangerous {
-                @include controlDangerous;
-                z-index: 11;
+        &.dangerous {
+            @include controlDangerous;
+            z-index: 11;
+            &::before,  &::after{
+                background: $danger;
             }
         }
     }
 }
 
 .the-table-corner-controls {
-    width: $control-corner-width;
+    width: 100%;
     height: $control-corner-width;
-    display: none;
-
+    position: relative;
+    visibility: hidden;
     .the-table-corner-button {
         position: absolute;
         top: 0;
-        width: $control-corner-width;
+        left: 0;
+        width: 100%;
         height: $control-corner-width;
         box-sizing: border-box;
         border: $controls-border;
         background: $gray-100;
         padding: 0;
+        border-bottom: none;
+        border-right: none;
         cursor: pointer;
     }
 
+    .the-table-corner-controls-insert-row-marker .the-table-controls-insert-wrapper {
+        left: -$dot-size;
+        top: 2px;
+    }
+
+    .the-table-corner-controls-insert-column-marker .the-table-controls-insert-wrapper {
+        left: 2px;
+        top: -$dot-size;
+    }
+
     &.active {
         z-index: 1;
-
         .the-table-corner-button {
             @include controlSelected;
         }
@@ -182,7 +218,6 @@ $control-corner-width: 12px;
 
     &.dangerous {
         z-index: 1;
-
         .the-table-corner-button {
             @include controlDangerous;
         }
@@ -226,7 +261,6 @@ $control-corner-width: 12px;
     }
 
     &:not(.disabled) {
-
         &:hover:after,
         &:hover:before {
             background-color: $white !important;
@@ -263,24 +297,11 @@ $control-corner-width: 12px;
     }
 }
 
-.the-table-corner-controls {
-    position: relative;
-
-    .the-table-corner-controls-insert-row-marker .the-table-controls-insert-wrapper {
-        left: -$dot-size;
-        top: 2px;
-    }
-
-    .the-table-corner-controls-insert-column-marker .the-table-controls-insert-wrapper {
-        left: 2px;
-        top: -$dot-size;
-    }
-}
-
 .the-table-row-controls {
     width: $control-width;
     box-sizing: border-box;
     display: none;
+    z-index: 11;
     position: relative;
 
     .the-table-row-controls-inner {
@@ -291,13 +312,12 @@ $control-corner-width: 12px;
     .the-table-row-controls-button-wrap {
         position: relative;
         margin-top: -1px;
-
         .the-table-controls-button {
             display: block;
+            background-color: $gray-100;
             box-sizing: border-box;
             height: 42px;
             width: $control-width;
-            background: $gray-100;
             border: 1px solid $gray-300;
             border-right: none;
             padding: 0;
@@ -306,8 +326,8 @@ $control-corner-width: 12px;
 
         &.active {
             z-index: 1;
-
-            .the-table-controls-button {
+            .the-table-controls-button,
+            .the-table-numbered-controls-button {
                 @include controlSelected;
             }
         }
@@ -315,7 +335,8 @@ $control-corner-width: 12px;
         &.dangerous {
             z-index: 1;
 
-            .the-table-controls-button {
+            .the-table-controls-button,
+            .the-table-numbered-controls-button {
                 @include controlDangerous;
             }
         }
@@ -361,57 +382,73 @@ $control-corner-width: 12px;
         margin: 0;
         border: 0;
         position: relative;
+        border-top: 1px solid transparent;
+    }
+}
+.table-options {
+    background: transparent;
+    margin-right: 5px;
+    color: $gray-600;
+    &:hover {
+        background: rgba($primary, 0.1);
+        color: $primary;
+    }
+}
+.table-options-active {
+    background: rgba($primary, 0.1);
+    color: $primary;
+}
+.table-options-pannel {
+    .thy-popover-container {
+        min-width: 200px;
+    }
+    .action-menu {
+        width: 200px;
+    }
+}
 
-        &:first-child:before,
-        &:last-child:after {
-            content: '';
-            position: absolute;
-            top: -0.5px;
-            background: $white;
-            width: 1px;
-            height: 11px;
-        }
+.the-numbered-column-container {
+    padding-left: 44px;
 
-        &:first-child:before {
-            left: -1px;
+    .the-table-row-controls {
+        display: block;
+        top: 0px;
+        width: 45px;
+        margin-left: 10px;
+        cursor: pointer;
+        .the-table-numbered-controls-button {
+            background-color: $gray-100;
+            border: $controls-border;
+            border-right: none;
         }
-
-        &:last-child {
-            &:after {
-                right: -1px;
-            }
-
-            .the-table-controls-insert-wrapper {
-                right: 0;
-
-                &:after {
-                    left: 9px;
-                }
-            }
-
-            .the-table-controls-insert-wrapper:hover {
-                &:after {
-                    left: 0;
-                }
-
-                .the-table-controls-insert-line[data-dot-type='column'] {
-                    left: $dot-size;
-                }
-            }
+    }
+    .the-table-focus {
+        .the-table-row-controls {
+            width: 55px;
+            margin-left: 0;
         }
+        .the-table-corner-controls-insert-column-marker .the-table-controls-insert-wrapper {
+            left: 46px;
+        }
+    }
+    .row-number {
+        float: right;
+        width: 45px;
+        justify-content: center;
+        height: 100%;
+        margin: 0;
     }
+}
 
-    .the-table-col-controls-inner {
-        user-select: none;
-        position: absolute;
-        top: -1px;
-        right: -1px;
-        left: -1px;
-        bottom: -1px;
-        border: 1px solid $white;
-        z-index: 2;
-        cursor: pointer;
-        display: none;
-        outline: 0;
+.safari{
+    .the-table-row-controls{
+        top: 1px;
     }
 }
+
+
+.the-editor-readonly{
+    .the-table-row-controls, .the-table-col-controls{
+        cursor: default;
+    }
+}

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

@@ -4,7 +4,7 @@ import { TheTableComponent } from '../table.component';
 import { TablePosition } from '../../utils/table-position';
 import { Subject } from 'rxjs';
 import { ColumnResizingStore } from '../../../../components/column-resize/resizing.store';
-import { TableCellEventDispatcher } from '../../../../components/column-resize/event-dispatcher';
+import { Position, TableCellEventDispatcher } from '../../../../components/column-resize/event-dispatcher';
 import { ColumnResizeNotifierSource } from '../../../../components/column-resize/column-resize-notifier';
 import { ConnectedPosition, Overlay, OverlayRef, ScrollDispatcher } from '@angular/cdk/overlay';
 import { ResizeRef } from '../../../../components/column-resize/resize-ref';
@@ -29,7 +29,7 @@ export declare class TheTdComponent extends TheBaseElementComponent<TableCellEle
     tablePosition: TablePosition;
     tableComponent: TheTableComponent;
     protected overlayRef?: OverlayRef;
-    hoverdDirection: 'left' | 'right' | 'top' | 'bottom';
+    hoverdDirection: Position | null;
     tableOptions: TableOptions;
     cellInnerMinHeight: number;
     get tableStore(): import("../../table.store").TableStore;
@@ -41,6 +41,7 @@ export declare class TheTdComponent extends TheBaseElementComponent<TableCellEle
     get scrollableElementTop(): number;
     get scrollableElementLeft(): any;
     get isXAxisHover(): boolean;
+    get rowResizeClass(): string[];
     dotWrapperHovered: boolean;
     resizeRef: ResizeRef;
     backgroundColor: string;

package/plugins/table/components/toolbar/table-options.component.d.ts

@@ -0,0 +1,20 @@
+import { OnInit } from '@angular/core';
+import { ThyPopoverRef } from 'ngx-tethys';
+import { Editor } from 'slate';
+import { TableStore } from '../../table.store';
+import { TableDropdownOption } from '../../table.types';
+import * as i0 from "@angular/core";
+export declare class TheTableOptionsComponent implements OnInit {
+    private popoverRef;
+    tableStore: TableStore;
+    editor: Editor;
+    get table(): import("@worktile/theia").TableElement;
+    tableDropdownList: TableDropdownOption[];
+    handleDocumentMouseDown(event: MouseEvent): void;
+    constructor(popoverRef: ThyPopoverRef<TheTableOptionsComponent>);
+    ngOnInit(): void;
+    setColumnOptions(): void;
+    setTableOptions(event: MouseEvent, option: TableDropdownOption): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TheTableOptionsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TheTableOptionsComponent, "the-table-options", never, { "tableStore": "tableStore"; "editor": "editor"; }, {}, never, never>;
+}

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

@@ -1,5 +1,5 @@
 import { OnInit, NgZone, OnDestroy } from '@angular/core';
-import { ThyPopoverRef } from 'ngx-tethys/popover';
+import { ThyPopover, ThyPopoverRef } from 'ngx-tethys/popover';
 import { Editor } from 'slate';
 import { TableStore } from '../../table.store';
 import { TheColorSelectService } from '../../../../services/color-select.service';
@@ -8,6 +8,7 @@ import * as i0 from "@angular/core";
 export declare class TheTableToolbarComponent implements OnInit, OnDestroy {
     private ngZone;
     private colorSelectService;
+    private thyPopover;
     private popoverRef;
     selectedColor: string;
     deleteIcon: string;
@@ -17,7 +18,7 @@ export declare class TheTableToolbarComponent implements OnInit, OnDestroy {
     get editor(): Editor;
     cellMenuList: MenuEntity[];
     get isShowSplitLine(): boolean;
-    constructor(ngZone: NgZone, colorSelectService: TheColorSelectService, popoverRef: ThyPopoverRef<TheTableToolbarComponent>);
+    constructor(ngZone: NgZone, colorSelectService: TheColorSelectService, thyPopover: ThyPopover, popoverRef: ThyPopoverRef<TheTableToolbarComponent>);
     ngOnInit(): void;
     ngOnDestroy(): void;
     getIconName(key: string): void;
@@ -26,6 +27,7 @@ export declare class TheTableToolbarComponent implements OnInit, OnDestroy {
     onEnterDelete(event: MouseEvent): void;
     onLeaveDelete(event: MouseEvent): void;
     openSelectColor(event: MouseEvent): void;
+    openTableOptionMenu(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheTableToolbarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TheTableToolbarComponent, "the-table-toolbar", never, { "tableStore": "tableStore"; "isActiveSelect": "isActiveSelect"; }, {}, never, never>;
 }

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

@@ -2,7 +2,7 @@ import { Observable } from 'rxjs';
 import { Editor } from 'slate';
 import { TablePosition } from './utils';
 import { ColorType } from '../../constants/color-select';
-import { SelectedCell } from './table.types';
+import { SelectedCell, TheTableOptions } from './table.types';
 import { TableElement } from '../../custom-types';
 import * as i0 from "@angular/core";
 export declare class TableStore {
@@ -27,6 +27,7 @@ export declare class TableStore {
     get selectedCells(): SelectedCell[];
     get dangerousCells(): SelectedCell[];
     constructor();
+    getTableEntry(editor: Editor): import("slate").NodeEntry<TableElement>;
     getTablePath(editor: Editor): import("slate").Path;
     getTablePosition(editor: Editor): TablePosition;
     setSelectedCells(cells: SelectedCell[], pos: TablePosition): void;
@@ -60,6 +61,7 @@ export declare class TableStore {
     getSelectedCellBackgroundColor(): string;
     clearSelectedCellsContent(): void;
     mergeCell(editor: Editor): void;
+    setTableOptions(editor: Editor, options: TheTableOptions): void;
     removeDangerousColumns(): void;
     removeDangerousRows(): void;
     createTablePosition(): TablePosition;

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

@@ -16,6 +16,11 @@ export declare const BASE_CELL_INNER_HEIGHT: number;
 export interface TheTableColumn {
     width: number;
 }
+export interface TheTableOptions {
+    headerRow?: boolean;
+    headerColumn?: boolean;
+    numberedColumn?: boolean;
+}
 export interface MenuEntity {
     icon: string;
     name: string;
@@ -32,6 +37,11 @@ export interface SelectedCell {
     row: number;
     col: number;
 }
+export interface TableDropdownOption {
+    name: string;
+    key: string;
+    isActive?: boolean;
+}
 export interface TableOptionsFormat {
     typeTable?: ElementKinds.table;
     typeRow?: ElementKinds.tableRow;

package/styles/editor.scss

@@ -147,6 +147,11 @@ $thy-icon-nav-link-margin-right: 5px;
         white-space: nowrap;
     }
 
+    .the-break-char {
+        font-size: 0;
+        line-height: 0;
+    }
+
     // list: fontSize, li marginLeft, multiDigit li marginLeft
     @each $size, $liMl, $liMultiDigitMl in (12, 13, 14, 15, 16, 18, 20, (24 null 35px), (28 null 42px), (32 33px 50px), (40 40px 62px), (48 50px 78px)) {
         [the-font-size="#{$size}"] {
@@ -193,7 +198,7 @@ $thy-icon-nav-link-margin-right: 5px;
         // list
         ol[the-level="#{$i}"],
         ul[the-level="#{$i}"] {
-            margin-left: $i * 2em;
+            padding-left: $i * 2em;
         }
         .the-check-item[the-level="#{$i}"] {
             padding-left: calc(#{$i * 2em} + 2em);

package/utils/dom.d.ts

@@ -1,7 +1,5 @@
-import { Element, NodeEntry } from 'slate';
+import { Element } from 'slate';
 import { DOMElement } from 'slate-angular';
-import { TheEditor } from '../interfaces/editor';
-import { NodeLevel } from '../constants';
 /** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
 export declare function coercePixelsFromCssValue(cssValue: string): number;
 export declare function getElementWidth(element: HTMLElement): number;
@@ -10,5 +8,3 @@ export declare function getColsTotalWidth(cols: HTMLTableColElement[]): number;
 export declare function getRowsTotalHeight(rows: HTMLTableRowElement[]): number;
 export declare function useElementStyle(el: HTMLElement, element: Element): void;
 export declare function getElementClassByPrefix(el: DOMElement, prefix: string): any;
-export declare function findRelativeElementByPoint(editor: TheEditor, x: number, y: number, mode?: NodeLevel): DOMElement;
-export declare function findNodeEntryByPoint(editor: TheEditor, x: number, y: number, mode?: NodeLevel): NodeEntry<Element> | null;