@worktile/theia 1.2.13 → 1.2.18

package/interfaces/editor.d.ts

@@ -68,6 +68,8 @@ export interface TheOptions {
     disabled?: boolean;
     autoFocus?: boolean;
     placeholder?: string;
+    isEmptyShowPlaceholder?: boolean;
+    isMustShowPlaceholder?: boolean;
     scrollContainer?: string;
     maxHeight?: number;
     toolbar?: ToolbarOption;

package/interfaces/toolbar.d.ts

@@ -36,6 +36,7 @@ export interface CustomizeToolbarItem extends ToolbarItemBase {
 export interface DefaultToolbarItem extends ToolbarItemBase {
     icon?: string;
     name?: string;
+    shortcutKey?: string;
     type?: ToolbarItemType;
 }
 export declare type ToolbarItem = CustomizeToolbarItem & DefaultToolbarItem;

package/package.json

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

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

@@ -2,24 +2,29 @@ import { ElementRef, ChangeDetectorRef, OnInit, AfterViewInit, NgZone } from '@a
 import { ThyNotifyService } from 'ngx-tethys/notify';
 import { Editor } from 'slate';
 import { CodeMirrorComponent } from 'ng-codemirror';
-import { DropdownMode, CodeMode } from '../../constants';
+import { DropdownMode, TheCodeConfig, ToolbarItemMode } from '../../constants';
 import { DefaultToolbarItem, TheBaseElementComponent } from '../../interfaces';
 import { CodeElement } from '../../custom-types';
+import { ThyResizeEvent } from 'ngx-tethys/resizable';
 import * as i0 from "@angular/core";
 export declare class TheCodeComponent extends TheBaseElementComponent<CodeElement, Editor> implements OnInit, AfterViewInit {
     elementRef: ElementRef;
     cdr: ChangeDetectorRef;
     private thyNotifyService;
     private ngZone;
-    private mode;
+    private config;
     startRenderCodemirror: boolean;
     dropdownMode: typeof DropdownMode;
-    maxHeight: number;
     codeMirrorFocused: boolean;
+    maxHeight: number;
     menus: {
         key: string;
         name: string;
     }[];
+    ToolbarItemMode: typeof ToolbarItemMode;
+    isAutoWrap: boolean;
+    isResizing: boolean;
+    resizeHeight: number;
     options: {
         mode: string;
         lineNumbers: boolean;
@@ -32,19 +37,26 @@ export declare class TheCodeComponent extends TheBaseElementComponent<CodeElemen
     actives: DefaultToolbarItem;
     get code(): string;
     codemirror: CodeMirrorComponent;
+    handleCodeMousedown(event: MouseEvent): void;
     onContextChange(): void;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyNotifyService: ThyNotifyService, ngZone: NgZone, mode: CodeMode);
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyNotifyService: ThyNotifyService, ngZone: NgZone, config: TheCodeConfig);
     ngOnInit(): void;
     ngAfterViewInit(): void;
+    focusChange(codeMirrorFocused: boolean): void;
     renderCodemirror(): void;
     initializeCodemirrorFocus(): void;
     codeChange($event: any): void;
-    focusChange(codeMirrorFocused: boolean): void;
     onDelete(event: MouseEvent): void;
     onCopy(event: MouseEvent): void;
     onChangeLangulage: (item: any) => void;
     useMode(): void;
+    useAutoWrap(): void;
+    useHeight(): void;
     useReadonly(): void;
+    onResize({ height }: ThyResizeEvent): void;
+    onStartResize(): void;
+    onEndResize(): void;
+    onChangeWrap(value: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheCodeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TheCodeComponent, "div[theCode]", never, {}, {}, never, never>;
 }

package/plugins/code/code.component.scss

@@ -1,18 +1,22 @@
 @import '~ng-codemirror/index.scss';
 
 .the-code-container {
-    display: block;
-    font-size: 14px;
-    position: relative;
-
-    .CodeMirror {
-        height: auto;
+    .resize-code-container{
+        display: block;
+        font-size: 14px;
+        position: relative;
         counter-reset: codeblock-lm;
         border: 1px solid $gray-300;
         border-radius: 2px;
         color: $gray-600;
         background: rgba(243, 243, 243, 0.8);
+    }
+    .CodeMirror {
+        height: 100% !important;
         z-index: 0;
+        color: $gray-600;
+        background: transparent;
+        border: none;
 
         .CodeMirror-gutters {
             border-right: none;
@@ -30,7 +34,34 @@
     }
     .ng-codemirror-wrapper {
         display: block;
-        overflow: hidden;
+        overflow: scroll;
+        position: relative;
+        height: 100%;
+    }
+
+    .code-resize-icon.thy-resizable-handle-bottom{
+        cursor: row-resize;
+        height: 8px;
+        width: 45px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: $gray-300;
+        bottom: -5px;
+        border-radius: 5px;
+        position: absolute;
+        &::before, &:after{
+            content: '';
+            position: absolute;
+            width: 34px;
+            height: 1px;
+            background: $white;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 2px;
+        }
+        &:after{
+            top: 5px;
+        }
     }
 
     @include the-toolbar-active();
@@ -39,5 +70,13 @@
         padding: 0;
         width: 100px;
     }
+
+    .auto-wrap{
+        padding-left: 8px;
+        .auto-wrap-btn{
+            margin-left: 5px;
+            transform: scale(0.8);
+        }
+    }
 }
 

package/plugins/code/code.editor.d.ts

@@ -1,7 +1,8 @@
 import { Editor } from 'slate';
 import { CodeElement } from '../../custom-types';
 export declare const CodeEditor: {
-    setLanguage(editor: Editor, language: string, element: CodeElement): void;
-    setCodeContent(editor: Editor, content: string, element: CodeElement): void;
+    setCodeAttribute(editor: Editor, element: CodeElement, value: {
+        [key: string]: unknown;
+    }): void;
     insertCode(editor: Editor): void;
 };

package/plugins/font-size/options.d.ts

@@ -0,0 +1,3 @@
+import { ToolbarItem } from '../../interfaces/toolbar';
+export declare const FontSizes: number[];
+export declare const FontSizeOptions: ToolbarItem[];

package/plugins/font-size/toolbar-item.component.d.ts

@@ -0,0 +1,35 @@
+import { ElementRef, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Editor } from 'slate';
+import { ToolbarItem } from '../../interfaces/toolbar';
+import { TheToolbarBaseItemComponent } from '../../components/toolbar-base-item/toolbar-base-item.component';
+import { ThyPopover, ThyPopoverRef } from 'ngx-tethys/popover';
+import { Overlay } from '@angular/cdk/overlay';
+import * as i0 from "@angular/core";
+export declare class TheFontSizeToolbarItemComponent extends TheToolbarBaseItemComponent implements OnInit {
+    elementRef: ElementRef;
+    private thyPopover;
+    private viewContainerRef;
+    private overlay;
+    editor: Editor;
+    item: ToolbarItem;
+    activeSize: number | string;
+    fontSizes: number[];
+    disabled: boolean;
+    disableGroup: (import("../../constants/node-types").ElementKinds.image | import("../../constants/node-types").ElementKinds.paragraph | import("../../constants/node-types").ElementKinds.heading_1 | import("../../constants/node-types").ElementKinds.heading_2 | import("../../constants/node-types").ElementKinds.heading_3 | import("../../constants/node-types").ElementKinds.heading_4 | import("../../constants/node-types").ElementKinds.heading_5 | import("../../constants/node-types").ElementKinds.heading_6 | import("../../constants/node-types").ElementKinds.numberedList | import("../../constants/node-types").ElementKinds.bulletedList | import("../../constants/node-types").ElementKinds.listItem | import("../../constants/node-types").ElementKinds.checkItem | import("../../constants/node-types").ElementKinds.table | import("../../constants/node-types").ElementKinds.tableRow | import("../../constants/node-types").ElementKinds.tableCell | import("../../constants/node-types").ElementKinds.code | import("../../constants/node-types").ElementKinds.blockquote | import("../../constants/node-types").ElementKinds.hr | import("../../constants/node-types").ElementKinds.link)[];
+    dropdownPopoverRef: ThyPopoverRef<any>;
+    get isOpen(): boolean;
+    dropdownTemplate: TemplateRef<any>;
+    toolbarItemContainer: boolean;
+    fontSizeToolbarItem: boolean;
+    get disableClass(): boolean;
+    toggleDropdown(event: MouseEvent): void;
+    handleDocumentMouseDown(event: MouseEvent): void;
+    constructor(elementRef: ElementRef, thyPopover: ThyPopover, viewContainerRef: ViewContainerRef, overlay: Overlay);
+    ngOnInit(): void;
+    statusChange(editor: Editor): void;
+    itemMousedown(event: MouseEvent, size: number): void;
+    openDropdownPopover(): void;
+    closeDropdownPopover(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TheFontSizeToolbarItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TheFontSizeToolbarItemComponent, "the-font-size-toolbar-item", never, { "editor": "editor"; "item": "item"; }, {}, never, never>;
+}

package/plugins/font-size/toolbar-item.component.scss

@@ -0,0 +1,13 @@
+.the-font-size-toolbar-item {
+    width: 60px;
+
+    &.disabled {
+        cursor: not-allowed;
+        opacity: 0.25;
+
+
+        .thy-icon-nav-link {
+            pointer-events: none;
+        }
+    }
+}

package/plugins/image/image.component.scss

@@ -1,190 +1,194 @@
-.image-container {
-    .image-content {
-        display: inline-block;
-        position: relative;
-        height: auto;
-        cursor: zoom-in;
-    }
+.slate-element-image {
+    display: block;
 
-    .pointer {
-        cursor: pointer;
-    }
+    .image-container {
+        .image-content {
+            display: inline-block;
+            position: relative;
+            height: auto;
+            cursor: zoom-in;
+        }
 
-    .main-image {
-        position: relative;
-        object-fit: fill;
-        width: auto;
-        max-width: 100%;
-        max-height: 100%;
-        width: 100%;
-        height: 100%;
-        margin: 0 auto;
-        user-select: none;
-    }
-    .image-profile {
-        position: absolute;
-        display: block;
-        bottom: -1px;
-        left: -1px;
-        right: -1px;
-        top: -1px;
-        .image-pointer {
+        .pointer {
+            cursor: pointer;
+        }
+
+        .main-image {
+            position: relative;
+            object-fit: fill;
+            width: auto;
+            max-width: 100%;
+            max-height: 100%;
+            width: 100%;
+            height: 100%;
+            margin: 0 auto;
+            user-select: none;
+        }
+        .image-profile {
             position: absolute;
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background-color: $white;
-            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.13);
-            border: 1px solid $gray-300;
-            z-index: 2;
-            &::before {
+            display: block;
+            bottom: -1px;
+            left: -1px;
+            right: -1px;
+            top: -1px;
+            .image-pointer {
                 position: absolute;
+                width: 12px;
+                height: 12px;
+                border-radius: 50%;
+                background-color: $white;
+                box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.13);
+                border: 1px solid $gray-300;
+                z-index: 2;
+                &::before {
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    display: inline-block;
+                    content: '';
+                    height: 8px;
+                    width: 8px;
+                    margin-left: -4px;
+                    margin-top: -4px;
+                    border-radius: 50%;
+                    background-color: $primary;
+                }
+            }
+            .left {
+                left: -6px;
+            }
+            .top {
+                top: -6px;
+            }
+            .center {
                 left: 50%;
+                margin-left: -5px;
+            }
+            .middle {
                 top: 50%;
-                display: inline-block;
-                content: '';
-                height: 8px;
-                width: 8px;
-                margin-left: -4px;
-                margin-top: -4px;
-                border-radius: 50%;
-                background-color: $primary;
+                margin-top: -5px;
+            }
+            .right {
+                right: -6px;
+            }
+            .bottom {
+                bottom: -6px;
+            }
+            .left.top,
+            .right.bottom {
+                cursor: nwse-resize;
+            }
+            .top.center,
+            .bottom.center {
+                cursor: ns-resize;
+            }
+            .right.top,
+            .left.bottom {
+                cursor: nesw-resize;
+            }
+            .left.middle,
+            .right.middle {
+                cursor: ew-resize;
             }
         }
-        .left {
-            left: -6px;
-        }
-        .top {
-            top: -6px;
-        }
-        .center {
-            left: 50%;
-            margin-left: -5px;
-        }
-        .middle {
-            top: 50%;
-            margin-top: -5px;
-        }
-        .right {
-            right: -6px;
-        }
-        .bottom {
-            bottom: -6px;
-        }
-        .left.top,
-        .right.bottom {
-            cursor: nwse-resize;
-        }
-        .top.center,
-        .bottom.center {
-            cursor: ns-resize;
-        }
-        .right.top,
-        .left.bottom {
-            cursor: nesw-resize;
-        }
-        .left.middle,
-        .right.middle {
-            cursor: ew-resize;
+        .image-profile.outline {
+            border: 1px dashed $primary;
         }
-    }
-    .image-profile.outline {
-        border: 1px dashed $primary;
-    }
-
-    .uploading {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        top: 0;
-        display: block;
-        background-color: rgba(255, 255, 255, 0.65);
 
-        .percentage {
-            position: absolute;
-            top: 4px;
-            right: 4px;
-            width: 102px;
-            height: 24px;
-            line-height: 24px;
-            border: 0.5px solid rgba(0, 0, 0, 0.05);
-            border-radius: 3px;
-            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-            background: $white;
-            color: grey;
-            font-weight: 500;
-            text-align: center;
-            transition: 0.3s ease;
-        }
-        .uploading-percentage {
+        .uploading {
             position: absolute;
-            top: 50%;
-            left: 50%;
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: nowrap;
-            height: 18px;
-            margin-left: -60px;
-            margin-top: -9px;
-            .progress {
-                display: inline-block;
-                width: 120px;
-                height: 8px;
-                margin-right: 8px;
-                margin-top: 1px;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            top: 0;
+            display: block;
+            background-color: rgba(255, 255, 255, 0.65);
+
+            .percentage {
+                position: absolute;
+                top: 4px;
+                right: 4px;
+                width: 102px;
+                height: 24px;
+                line-height: 24px;
+                border: 0.5px solid rgba(0, 0, 0, 0.05);
+                border-radius: 3px;
+                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+                background: $white;
+                color: grey;
+                font-weight: 500;
+                text-align: center;
+                transition: 0.3s ease;
             }
-            .thy-icon {
-                color: #d8d8d8;
+            .uploading-percentage {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+                flex-wrap: nowrap;
+                height: 18px;
+                margin-left: -60px;
+                margin-top: -9px;
+                .progress {
+                    display: inline-block;
+                    width: 120px;
+                    height: 8px;
+                    margin-right: 8px;
+                    margin-top: 1px;
+                }
+                .thy-icon {
+                    color: #d8d8d8;
+                }
             }
         }
-    }
-
-    .layer {
-        display: none;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        top: 0;
 
-        .preview {
+        .layer {
+            display: none;
             position: absolute;
-            top: 6px;
-            right: 6px;
-            width: auto;
-            height: 24px;
-            padding: 0 3px;
-            line-height: 24px;
-            border: 0.5px solid rgba(0, 0, 0, 0.05);
-            border-radius: 3px;
-            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.1);
-            background: $white;
-            color: grey;
-            font-weight: 500;
-            text-align: center;
-            transition: 0.3s ease;
-            cursor: pointer;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            top: 0;
+
+            .preview {
+                position: absolute;
+                top: 6px;
+                right: 6px;
+                width: auto;
+                height: 24px;
+                padding: 0 3px;
+                line-height: 24px;
+                border: 0.5px solid rgba(0, 0, 0, 0.05);
+                border-radius: 3px;
+                box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+                background: $white;
+                color: grey;
+                font-weight: 500;
+                text-align: center;
+                transition: 0.3s ease;
+                cursor: pointer;
+            }
         }
-    }
 
-    .image-loading {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 280px;
-        background: rgb(244, 245, 247);
-        color: $gray-500;
+        .image-loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 280px;
+            background: rgb(244, 245, 247);
+            color: $gray-500;
+        }
     }
-}
 
-.image-container:hover .layer {
-    display: block;
-}
+    .image-container:hover .layer {
+        display: block;
+    }
 
-.image-container:hover .layer.readonly {
-    cursor: zoom-in;
+    .image-container:hover .layer.readonly {
+        cursor: zoom-in;
+    }
 }

package/plugins/placeholder/placeholder.component.d.ts

@@ -1,13 +1,14 @@
 import { ElementRef, Renderer2 } from '@angular/core';
 import { Editor } from 'slate';
 import { TheContextService } from '../../services/context.service';
+import { TheOptions } from '../../interfaces/editor';
 import * as i0 from "@angular/core";
 export declare class ThePlaceholderComponent {
     private renderer;
     private elementRef;
     private contextService;
     editor: Editor;
-    placeholder: string;
+    options: TheOptions;
     isHide: boolean;
     handleCompositionStart(): void;
     handleCompositionEnd(event: any): void;
@@ -16,5 +17,5 @@ export declare class ThePlaceholderComponent {
     private updatePosition;
     private hide;
     static ɵfac: i0.ɵɵFactoryDeclaration<ThePlaceholderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ThePlaceholderComponent, "div[thePlaceholder]", never, { "editor": "editor"; "placeholder": "placeholder"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ThePlaceholderComponent, "div[thePlaceholder]", never, { "editor": "editor"; "options": "options"; }, {}, never, never>;
 }

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

@@ -0,0 +1,4 @@
+import { TransformEditor } from '../common/transforms.plugin';
+import { SoftBreakOnKeyDownOptions } from './soft-break.types';
+import { TheEditor } from '../../interfaces/editor';
+export declare const withSoftBreak: (options?: SoftBreakOnKeyDownOptions) => <T extends TheEditor & TransformEditor>(editor: T) => T;

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

@@ -0,0 +1,8 @@
+import { QueryOptions } from '../../interfaces/editor';
+export interface SoftBreakRule {
+    hotkey: string;
+    query?: QueryOptions;
+}
+export interface SoftBreakOnKeyDownOptions {
+    rules?: SoftBreakRule[];
+}

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

@@ -2,6 +2,7 @@ import { Editor, NodeEntry, Path, Range } from 'slate';
 import { TableOptions } from './table.types';
 import { Alignment, VerticalAlignment } from '../../constants/node-types';
 import { TheEditor } from '../../interfaces';
+import { TableElement } from '../../custom-types';
 export declare const TableEditor: {
     insertTable(editor: Editor, optionsParam?: TableOptions): void;
     insertColumn(editor: Editor, count?: number, at?: number, optionsParam?: TableOptions): void;
@@ -20,4 +21,5 @@ export declare const TableEditor: {
     clearMark(editor: TheEditor): boolean;
     handleSelectedCells(editor: TheEditor, handle: (cellPath: Path, cellRange: Range) => void): boolean;
     isActiveHeader(editor: TheEditor): boolean;
+    selectOriginCell(editor: TheEditor, table: TableElement, rowIndex: number, columnIndex: number, isStart: boolean): void;
 };

package/plugins/table/utils/calc-span.d.ts

@@ -7,5 +7,5 @@ export interface CellRect {
 }
 export declare function calcSpanForRow(table: TableElement, targetIndex: number): boolean[];
 export declare function calcSpanForColumn(table: TableElement, targetIndex: number): boolean[];
-export declare function calcOriginSpan(table: TableElement, targetRowIndex: number, targetColumnIndex: number): TableCellElement;
+export declare function getOriginCell(table: TableElement, targetRowIndex: number, targetColumnIndex: number): TableCellElement;
 export declare function isInside(cellRect: CellRect, rowIndex: number, columnIndex: number): boolean;

package/queries/get-selection-marks.d.ts

@@ -8,4 +8,5 @@ export declare const getSelectionMarks: (editor: Editor) => {
     color?: any;
     "background-color"?: any;
     "code-line"?: any;
+    "font-size"?: any;
 };