@worktile/theia 1.2.16 → 1.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worktile/theia",
-  "version": "1.2.16",
+  "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/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;
 };

package/styles/editor.scss

@@ -126,6 +126,12 @@ $thy-icon-nav-link-margin-right: 5px;
         text-indent: 0;
         color: $gray-700;
     }
+
+    @each $size in 12, 13, 14, 15, 16, 19, 22, 24, 29, 32, 40, 48 {
+        [the-font-size="#{$size}"] {
+            font-size: #{$size}px;
+        }
+    }
 }
 
 .the-nav-split-line {

package/styles/index.scss

@@ -18,3 +18,4 @@
 @import '../plugins/quick-insert/components/quick-insert.component.scss';
 @import '../plugins/quick-insert/components/quick-toolbar/quick-toolbar.component.scss';
 @import '../plugins/placeholder/placeholder.component.scss';
+@import '../plugins/font-size/toolbar-item.component.scss';

package/styles/typo.scss

@@ -1,32 +1,26 @@
 @use 'sass:math';
-
 $default-text-space: 10px; // text white space 18(distance between paragrahp) - 8(block margin)
-
 $headline-one-size: 28px;
 $headline-two-size: 24px;
 $headline-three-size: 20px;
 $headline-four-size: 18px;
 $headline-five-size: 16px;
-
 $headline-one-lineHeight: 40px;
 $headline-two-lineHeight: 38px;
 $headline-three-lineHeight: 34px;
 $headline-four-lineHeight: 30px;
 $headline-five-lineHeight: 28px;
 $headline-six-lineHeight: 26px;
-
 $the-font-size-base: 14px;
 $block-mb: 8px;
 $block-line-heith: 24px;
 $nav-item-margin: 5px;
 $selection-background: rgba($color: $primary, $alpha: 0.3);
-
 .the-editor-typo {
     font-size: $the-font-size-base;
     min-height: 140px;
     padding: 28px 30px;
     word-break: break-all;
-
     h1,
     h2,
     h3,
@@ -59,7 +53,6 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
         line-height: $headline-six-lineHeight;
         font-size: $the-font-size-base;
     }
-
     // margin
     ul,
     ol,
@@ -68,10 +61,12 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
         padding: 0;
         li {
             margin-left: 2em;
-            margin-bottom: 4px;
+            margin-bottom: math.div($block-mb, 2);
+            &:last-child {
+                margin-bottom: 0;
+            }
         }
     }
-
     blockquote {
         margin-left: 0;
         margin-right: 0;
@@ -79,7 +74,6 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
         padding-left: 10px !important;
         border-left: 4px solid $gray-200;
     }
-
     .the-hr {
         border: 1px solid transparent;
         padding: 18px 0;
@@ -98,13 +92,9 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
             cursor: text;
         }
     }
-
     &.pointer-paint {
-        cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAYAAACTQC2+AAAABGdBTUEAALGPC/xhBQAAATtJREFUSA3dlTFLA0EQhU+jlSkEG63EYGdlZZFG7QUbSyG/QP/C/Q0rqzQWQX+BwUKwtrexEFRQtFSI35NZWDa3soOHhQ8eM/v2zWw2N9xVVVUdwXUYoFxaq5il2wa8hvtG5dJaxYx16xFvLN8i3lmehiFC6Y94wbsTGsxZosajKA/7aewjrKZiyTocJO9DSYHT82r+YXyQs0eRfYBrD/Y1DB58OMyfeM/hrWq8N9qlZkmFBXiPPd6D7ikWUxwjrKWirTeJkzDeNYttKIxhDUuxiFGjfAnfMkUX3hs19emYqFt9P48mU6zVLEQPFjCfwgk8gyuwEd6pS5t0EQYmHhCXLZ8Kvz1oqmFO+H8HxVOXfZC5vwNd46y3xbx5ni1mQ4+dJ6NyDw4xX0GN9484YfcRhg+fcmmt408+5V99wSyVTWN94gAAAABJRU5ErkJggg==)
-                5 10,
-            text;
+        cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAYAAACTQC2+AAAABGdBTUEAALGPC/xhBQAAATtJREFUSA3dlTFLA0EQhU+jlSkEG63EYGdlZZFG7QUbSyG/QP/C/Q0rqzQWQX+BwUKwtrexEFRQtFSI35NZWDa3soOHhQ8eM/v2zWw2N9xVVVUdwXUYoFxaq5il2wa8hvtG5dJaxYx16xFvLN8i3lmehiFC6Y94wbsTGsxZosajKA/7aewjrKZiyTocJO9DSYHT82r+YXyQs0eRfYBrD/Y1DB58OMyfeM/hrWq8N9qlZkmFBXiPPd6D7ikWUxwjrKWirTeJkzDeNYttKIxhDUuxiFGjfAnfMkUX3hs19emYqFt9P48mU6zVLEQPFjCfwgk8gyuwEd6pS5t0EQYmHhCXLZ8Kvz1oqmFO+H8HxVOXfZC5vwNd46y3xbx5ni1mQ4+dJ6NyDw4xX0GN9484YfcRhg+fcmmt408+5V99wSyVTWN94gAAAABJRU5ErkJggg==) 5 10, text;
     }
-
     code {
         margin: 0 4px;
         padding: 2px 3px;
@@ -118,7 +108,6 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
         text-indent: 0;
         color: $gray-700;
     }
-
     .slate-element-hr,
     .slate-element-code,
     .slate-element-image,
@@ -131,7 +120,6 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
             height: auto !important;
         }
     }
-
     .slate-block-card {
         .card-left,
         .card-right {
@@ -144,7 +132,6 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
                 bottom: 15px;
             }
         }
-
         &.slate-block-card-hr {
             .card-left,
             .card-right {
@@ -152,7 +139,6 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
             }
         }
     }
-
     .slate-element-table-content,
     .slate-element-paragraph {
         line-height: $block-line-heith;
@@ -164,11 +150,11 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
     .CodeMirror-focused .CodeMirror-selected {
         background: $selection-background;
     }
-    ::-moz-selection {
+     ::-moz-selection {
         /* Code for Firefox */
         background: $selection-background;
     }
-    ::selection {
+     ::selection {
         background: $selection-background;
     }
     .thy-icon-nav .thy-icon-nav-link {
@@ -180,10 +166,9 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
     .remove-link.thy-icon-nav-link:hover {
         color: $danger;
     }
-
     @for $i from 1 through 24 {
         .indent-#{$i * 2} {
             margin-left: 2em * $i;
         }
     }
-}
+}

package/transforms/set-marks.d.ts

@@ -8,4 +8,5 @@ export declare const setMarks: (editor: Editor, marks: {
     color?: any;
     "background-color"?: any;
     "code-line"?: any;
+    "font-size"?: any;
 }, at?: Path | Point | Range) => void;