@worktile/theia 2.0.1 → 2.1.3

package/interfaces/editor.d.ts

@@ -1,9 +1,10 @@
-import { ElementOptionsInfo } from './valid-children-types';
 import { Ancestor, Range, Path, Point, Node, Span, NodeEntry, Editor, Element, Text } from 'slate';
 import { AngularEditor, ViewType } from 'slate-angular';
 import { HistoryEditor } from 'slate-history';
+import { ElementOptionsInfo } from './valid-children-types';
 import { Predicate } from '../utils/match';
 import { ToolbarOption } from './toolbar';
+import { FontSizes } from '../constants/node-types';
 export interface TheEditor extends AngularEditor, HistoryEditor {
     renderElement: (element: Element) => ViewType;
     renderLeaf: (text: Text) => ViewType;
@@ -72,6 +73,7 @@ export interface TheOptions {
     isMustShowPlaceholder?: boolean;
     scrollContainer?: string;
     maxHeight?: number;
+    fontSize?: FontSizes;
     toolbar?: ToolbarOption;
     disablePlugins?: string[];
     extraElementOptions?: ElementOptionsInfo[];

package/interfaces/toolbar.d.ts

@@ -20,7 +20,7 @@ interface ToolbarItemBase {
     key: ToolbarKey;
     execute?: (editor: Editor) => void;
     active?: (editor: Editor) => boolean | string;
-    disable?: (editor: Editor) => boolean | string;
+    disable?: (editor: Editor) => boolean;
     transformToolbar?: (editor: Editor) => ToolbarDefinition | void;
     styles?: {
         [key: string]: string;
@@ -32,6 +32,7 @@ export interface CustomizeToolbarItem extends ToolbarItemBase {
     quickItemComponent?: ComponentType<any>;
     type?: ToolbarItemType;
     dropdownMode?: DropdownMode;
+    dropdownItemKey?: ToolbarKey;
 }
 export interface DefaultToolbarItem extends ToolbarItemBase {
     icon?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worktile/theia",
-  "version": "2.0.1",
+  "version": "2.1.3",
   "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, TheCodeMode } 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 { TheContextService } from '../../services/context.service';
 import * as i0 from "@angular/core";
 export declare class TheCodeComponent extends TheBaseElementComponent<CodeElement, Editor> implements OnInit, AfterViewInit {
     elementRef: ElementRef;
     cdr: ChangeDetectorRef;
     private thyNotifyService;
+    private contextService;
     private ngZone;
     private config;
     startRenderCodemirror: boolean;
     dropdownMode: typeof DropdownMode;
     maxHeight: number;
-    codeMirrorFocused: boolean;
     menus: {
         key: string;
         name: string;
     }[];
+    ToolbarItemMode: typeof ToolbarItemMode;
+    isFocusCode: boolean;
+    resizeHeight: number;
     options: {
         mode: string;
         lineNumbers: boolean;
@@ -30,21 +35,27 @@ export declare class TheCodeComponent extends TheBaseElementComponent<CodeElemen
         cursorBlinkRate: number;
     };
     actives: DefaultToolbarItem;
+    resizeBounds: any;
     get code(): string;
     codemirror: CodeMirrorComponent;
     onContextChange(): void;
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyNotifyService: ThyNotifyService, ngZone: NgZone, config: TheCodeMode);
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, thyNotifyService: ThyNotifyService, contextService: TheContextService, ngZone: NgZone, config: TheCodeConfig);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     renderCodemirror(): void;
     initializeCodemirrorFocus(): void;
     codeChange($event: any): void;
-    focusChange(codeMirrorFocused: boolean): void;
     onDelete(event: MouseEvent): void;
     onCopy(event: MouseEvent): void;
+    focusChange(codeMirrorFocused: boolean): void;
     onChangeLangulage: (item: any) => void;
     useMode(): void;
+    useAutoWrap(): void;
+    useHeight(): void;
     useReadonly(): void;
+    onResize({ height }: ThyResizeEvent): 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;
+        position: relative;
+        overflow-y: scroll;
+        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/font-size.editor.d.ts

@@ -0,0 +1,8 @@
+import { Editor } from 'slate';
+import { TheEditor } from '../../interfaces/editor';
+import { FontSizes } from '../../constants/node-types';
+export declare const FontSizeEditor: {
+    setFontSize(editor: TheEditor, size: FontSizes): void;
+    isFontSizeActive(editor: Editor, size: FontSizes): boolean;
+    isDisabled(editor: TheEditor): boolean;
+};

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

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

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

@@ -0,0 +1,14 @@
+.the-toolbar-dropdown-container.font-size {
+    width: 45px;
+}
+.the-toolbar-dropdown-popover.font-size {
+    .thy-popover-container {
+        min-width: 90px;
+    }
+    .dropdown {
+        width: 90px;
+    }
+    .action-menu-item {
+        text-align: center;
+    }
+}

package/plugins/heading/heading.editor.d.ts

@@ -1,5 +1,5 @@
 import { Editor } from 'slate';
-import { HeadingElementKinds } from '../../public-api';
+import { HeadingElementKinds } from '../../interfaces/element';
 export declare const HeadingEditor: {
     setHeading(editor: Editor, heading: HeadingElementKinds): void;
     isHeadingActive(editor: Editor, heading: HeadingElementKinds): boolean;

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

@@ -17,7 +17,7 @@ export declare const TableEditor: {
     setAlign(editor: Editor, alignment: Alignment): boolean;
     setVerticalAlign(editor: TheEditor, alignment: VerticalAlignment): boolean;
     isVerticalAlignActive(editor: TheEditor, alignment: VerticalAlignment): boolean;
-    toggleMark(editor: TheEditor, isActive: boolean, format: string | string[], value?: string | boolean): boolean;
+    toggleMark(editor: TheEditor, isActive: boolean, format: string | string[], value?: string | number | boolean): boolean;
     clearMark(editor: TheEditor): boolean;
     handleSelectedCells(editor: TheEditor, handle: (cellPath: Path, cellRange: Range) => void): boolean;
     isActiveHeader(editor: TheEditor): 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;
 };

package/styles/editor.scss

@@ -126,6 +126,13 @@ $thy-icon-nav-link-margin-right: 5px;
         text-indent: 0;
         color: $gray-700;
     }
+
+    @each $size in 12, 13, 14, 15, 16, 18, 20, 24, 28, 32, 40, 48 {
+        [the-font-size="#{$size}"] {
+            font-size: #{$size}px;
+            line-height: $font-size-line-height;
+        }
+    }
 }
 
 .the-nav-split-line {
@@ -176,6 +183,17 @@ $thy-icon-nav-link-margin-right: 5px;
     }
 }
 
+@mixin the-toolbar-disabled {
+    &.disabled {
+        cursor: not-allowed;
+        opacity: 0.25;
+
+        .thy-icon-nav-link {
+            pointer-events: none;
+        }
+    }
+}
+
 @mixin the-toolbar-layout {
     position: absolute;
     padding: 5px 10px;
@@ -183,13 +201,14 @@ $thy-icon-nav-link-margin-right: 5px;
     box-shadow: $box-shadow;
 }
 
-.the-block-operation {
+.the-code-block-operation {
     @include the-toolbar-layout();
     display: flex;
     transform: translateY(-100%);
     left: 0;
     top: -10px;
     z-index: 10;
+    min-width: 306px;
     .thy-select-custom {
         width: 115px;
         .form-control {

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

@@ -16,6 +16,7 @@ $block-mb: 8px;
 $block-line-heith: 24px;
 $nav-item-margin: 5px;
 $selection-background: rgba($color: $primary, $alpha: 0.3);
+$font-size-line-height: 1.5;
 .the-editor-typo {
     font-size: $the-font-size-base;
     min-height: 140px;
@@ -171,4 +172,4 @@ $selection-background: rgba($color: $primary, $alpha: 0.3);
             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;