@worktile/theia 2.2.7 → 2.3.0-next.0

package/interfaces/editor.d.ts

@@ -5,6 +5,7 @@ import { ElementOptionsInfo } from './valid-children-types';
 import { Predicate } from '../utils/match';
 import { ToolbarOption } from './toolbar';
 import { FontSizes } from '../constants/node-types';
+import { CustomElement } from '../custom-types';
 export interface TheEditor extends AngularEditor, HistoryEditor {
     renderElement: (element: Element) => ViewType;
     renderLeaf: (text: Text) => ViewType;
@@ -30,9 +31,11 @@ export declare const TheEditor: {
         editable?: boolean;
     }): boolean;
     insertData(editor: AngularEditor, data: DataTransfer): void;
+    insertFragmentData(editor: AngularEditor, data: DataTransfer): boolean;
+    insertTextData(editor: AngularEditor, data: DataTransfer): boolean;
     onKeydown(editor: AngularEditor, data: KeyboardEvent): void;
     onClick(editor: AngularEditor, data: MouseEvent): void;
-    setFragmentData(editor: AngularEditor, data: DataTransfer): void;
+    setFragmentData(editor: AngularEditor, data: DataTransfer, originEvent?: "copy" | "drag" | "cut"): void;
     deleteCutData(editor: AngularEditor): void;
     toDOMNode(editor: AngularEditor, node: Node): HTMLElement;
     toDOMPoint(editor: AngularEditor, point: import("slate").BasePoint): import("slate-angular").DOMPoint;
@@ -72,6 +75,7 @@ export interface TheOptions {
     placeholderDecorate?: (editor: Editor) => SlatePlaceholder[];
     inlineToobarVisible?: boolean;
     quickInsertVisible?: boolean;
+    dragAndDrop?: boolean;
     scrollContainer?: string;
     maxHeight?: number;
     fontSize?: FontSizes;
@@ -119,3 +123,7 @@ export interface DomEventDataInfo {
     text?: string;
     json?: Node[];
 }
+export interface DragNode {
+    node: CustomElement;
+    path: Path;
+}

package/interfaces/image.d.ts

@@ -2,7 +2,8 @@ import { Observable } from 'rxjs';
 import { UploadFileEntity, FileUploadingItem } from './upload';
 import { InjectionToken } from '@angular/core';
 import { SafeUrl } from '@angular/platform-browser';
-import { Alignment } from '../constants';
+import { Alignment, LayoutTypes } from '../constants';
+import { ToolbarItem } from './toolbar';
 export interface ImageEntry {
     file?: File;
     name?: string;
@@ -11,6 +12,11 @@ export interface ImageEntry {
     thumbUrl?: SafeUrl | string;
     originUrl?: SafeUrl | string;
     align?: Alignment;
+    layout?: LayoutTypes;
+    reSized?: boolean;
+}
+export interface LayoutOption extends ToolbarItem {
+    handle?: (e: MouseEvent, key: Alignment | LayoutTypes) => void;
 }
 export interface TheImageUploaderService {
     uploadFileHandle: (files: any) => Observable<UploadFileEntity[]>;

package/interfaces/valid-children-types.d.ts

@@ -3,6 +3,7 @@ export interface ElementOptionsInfo {
     type: CustomElementKinds;
     inValidChildrenTypes: CustomElementKinds[];
     isIndivisible?: boolean;
+    isSecondaryContainer?: boolean;
 }
 export declare const inValidTypes: CustomElementKinds[];
 export declare const DefaultElementOptions: ElementOptionsInfo[];

package/package.json

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

package/plugins/align/align.editor.d.ts

@@ -2,5 +2,6 @@ import { Editor } from 'slate';
 import { Alignment } from '../../constants/node-types';
 export declare const AlignEditor: {
     isActive(editor: Editor, alignment: Alignment): boolean;
+    isDisabled(editor: Editor): boolean;
     setAlign(editor: Editor, alignment: Alignment): void;
 };

package/plugins/dnd/component/dnd.component.d.ts

@@ -0,0 +1,42 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from '@angular/core';
+import { Editor } from 'slate';
+import { DragNode } from '../../../interfaces';
+import * as i0 from "@angular/core";
+export declare class TheDndComponent implements AfterViewInit, OnDestroy {
+    private renderer;
+    private elementRef;
+    private ngZone;
+    private cdr;
+    isDraging: boolean;
+    dragNode: DragNode;
+    dragSnapshotContent: HTMLElement;
+    private destroy$;
+    editor: Editor;
+    dragChange: EventEmitter<boolean>;
+    dragElement: HTMLElement;
+    dragElementHeight: number;
+    dragElementWidth: number;
+    isScrolling: boolean;
+    dropThumbLine: HTMLElement;
+    editableTop: number;
+    content: ElementRef;
+    get nativeElement(): HTMLElement;
+    get editableElement(): HTMLElement;
+    constructor(renderer: Renderer2, elementRef: ElementRef, ngZone: NgZone, cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    valueChangeHandle(): void;
+    private updateDndContainerPosition;
+    getEditableTop(event: MouseEvent): void;
+    onDragStart(event: DragEvent): void;
+    onDragEnd(event: DragEvent): void;
+    onDrop(event: MouseEvent): void;
+    onDragover(event: MouseEvent): void;
+    setDropThumbLine(event: MouseEvent): void;
+    setDragIcon(event: MouseEvent): void;
+    setSnapshotStyle(event: MouseEvent): void;
+    resetDragSnapshotContent(): void;
+    setVisibility(visible?: boolean): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TheDndComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TheDndComponent, "[theDnd]", never, { "editor": "editor"; }, { "dragChange": "dragChange"; }, never, never>;
+}

package/plugins/dnd/component/dnd.component.scss

@@ -0,0 +1,61 @@
+.the-drag-drop {
+    position: absolute;
+    cursor: grab;
+    .the-drag-drop-icon {
+        color: $gray-500;
+        width: 24px;
+        height: 24px;
+        line-height: 24px;
+        text-align: center;
+        font-size: $font-size-base;
+        border-radius: 3px;
+       
+        &:hover {
+            cursor: pointer;
+            background-color: rgba($primary, 0.15);
+            color: $primary;
+        }
+    }
+}
+.drag-container{
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+.drag-snapshot-container {
+    position: absolute;
+    transition: all 0.2 linear;
+    background: $white;
+    padding: 5px;
+    top: 0px;
+    left: 0px;
+    transform-origin: left top;
+    box-shadow: 0px 4px 10px 5px rgba($black, 0.07);
+    border-radius: 4px;
+    min-height: 0;
+    z-index: 1800;
+    visibility: hidden;
+    pointer-events: none;
+    user-select: none;
+    ol, ul, blockquote, .slate-element-table .the-table{
+        margin: 0;
+    }
+    .slate-element-paragraph{
+        line-height: $line-height-base;
+    }
+}
+.drop-thumb-line{
+    width: 100%;
+    left: 0px;
+    right: 0px;
+    bottom: -2px;
+    height: 2px;
+    z-index: -10;
+    pointer-events: none;
+    user-select: none;
+    background: $primary;
+    position: absolute;
+}
+.slate-editable-container > *, .slate-element-paragraph, .slate-block{
+    position: relative;
+}

package/plugins/dnd/utils/get-current-target.d.ts

@@ -0,0 +1,2 @@
+import { TheEditor } from '../../../interfaces';
+export declare const getCurrentTarget: (editor: TheEditor, event: MouseEvent) => HTMLElement;

package/plugins/dnd/utils/get-hover-direction.d.ts

@@ -0,0 +1,3 @@
+import { TheEditor } from '../../../interfaces';
+import { DropDirection } from '../../../constants';
+export declare const getHoverDirection: (editor: TheEditor, event: MouseEvent) => DropDirection;

package/plugins/dnd/utils/is-valid-drag.d.ts

@@ -0,0 +1,3 @@
+import { CustomElement } from '../../../custom-types';
+import { TheEditor } from '../../../interfaces';
+export declare const isValidDrag: (editor: TheEditor, dragNode: CustomElement, currentTarget: HTMLElement) => boolean;

package/plugins/dnd/utils/move-drag-node.d.ts

@@ -0,0 +1,2 @@
+import { DragNode, TheEditor } from '../../../interfaces';
+export declare const moveDragNode: (editor: TheEditor, dragNode: DragNode, event: MouseEvent) => void;

package/plugins/dnd/utils/remove-drop-thumb-line.d.ts

@@ -0,0 +1,2 @@
+import { TheEditor } from '../../../interfaces';
+export declare const removeDropThumbLine: (editor: TheEditor) => void;

package/plugins/image/image.component.d.ts

@@ -1,8 +1,11 @@
-import { OnInit, ElementRef, OnDestroy, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { OnInit, ElementRef, OnDestroy, AfterViewInit, ChangeDetectorRef, TemplateRef, ViewContainerRef } from '@angular/core';
 import { BeforeContextChange, SlateElementContext } from 'slate-angular';
 import { DomSanitizer } from '@angular/platform-browser';
-import { ImageEntry, TheImageUploaderService } from '../../interfaces/image';
+import { ImageEntry, TheImageUploaderService, LayoutOption } from '../../interfaces/image';
+import { Alignment, LayoutTypes } from '../../constants/node-types';
 import { Editor } from 'slate';
+import { ThyPopover } from 'ngx-tethys/popover';
+import { Overlay } from '@angular/cdk/overlay';
 import { TheContextService } from '../../services/context.service';
 import { TheBaseElementComponent } from '../../interfaces';
 import { ImageElement } from '../../custom-types';
@@ -13,19 +16,28 @@ export declare class TheImageComponent extends TheBaseElementComponent<ImageElem
     private imageUploaderService;
     cdr: ChangeDetectorRef;
     private theContextService;
+    private thyPopover;
+    private overlay;
+    private viewContainerRef;
     imageEntry: ImageEntry;
     uploading: boolean;
     percentage: number;
     file: File;
+    layoutDefaultWidth: number;
+    layoutOptions: LayoutOption[];
     private uploadingSubscription;
     private mouseMoveSubscription;
     private mouseUpSubscription;
     private dragable;
+    private layoutToolbarRef;
+    get isOpen(): boolean;
     imageContent: ElementRef;
     img: ElementRef;
-    constructor(elementRef: ElementRef, sanitizer: DomSanitizer, imageUploaderService: TheImageUploaderService, cdr: ChangeDetectorRef, theContextService: TheContextService);
+    layoutToolbar: TemplateRef<any>;
+    constructor(elementRef: ElementRef, sanitizer: DomSanitizer, imageUploaderService: TheImageUploaderService, cdr: ChangeDetectorRef, theContextService: TheContextService, thyPopover: ThyPopover, overlay: Overlay, viewContainerRef: ViewContainerRef);
     beforeContextChange: (value: SlateElementContext<ImageElement>) => void;
     ngOnInit(): void;
+    onContextChange(): void;
     ngOnDestroy(): void;
     ngAfterViewInit(): void;
     uploadImage(file: File): Promise<void>;
@@ -42,6 +54,18 @@ export declare class TheImageComponent extends TheBaseElementComponent<ImageElem
     endDrag(event: MouseEvent): void;
     cancelUpload(event: any): void;
     preview($event: Event): void;
+    isShouldOpen(): boolean;
+    isShouldClose(): boolean;
+    openLayoutToolbar(): void;
+    closeLayoutToolbar(): void;
+    layoutActive(key: Alignment | LayoutTypes): boolean;
+    setImageNode(e: MouseEvent, partial: {
+        layout?: LayoutTypes;
+        align?: Alignment;
+    }): void;
+    setBlockCardLayoutAttr(): void;
+    onDelete(event: MouseEvent): void;
+    createPositionStrategy(): import("@angular/cdk/overlay").FlexibleConnectedPositionStrategy;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheImageComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TheImageComponent, "the-image, [theImage]", never, {}, {}, never, never>;
 }

package/plugins/image/image.component.scss

@@ -186,9 +186,16 @@
 
     .image-container:hover .layer {
         display: block;
+
+        &.readonly {
+            cursor: zoom-in;
+        }
     }
+}
+
+.the-image-toolbar {
 
-    .image-container:hover .layer.readonly {
-        cursor: zoom-in;
+    .thy-icon-nav .thy-icon-nav-link {
+        margin-right: 5px;
     }
 }

package/plugins/image/image.editor.d.ts

@@ -1,7 +1,12 @@
-import { Editor } from 'slate';
+import { Editor, Path } from 'slate';
+import { Alignment, LayoutTypes } from '../../constants';
 export declare const ImageEditor: {
     openUpload(editor: Editor): void;
     insertImages(editor: Editor, imageFiles: FileList | File[]): void;
     verifyImage(editor: Editor, image: File): boolean;
     isImageActive(editor: Editor): boolean;
+    setImageNode(editor: Editor, path: Path, partial: {
+        layout?: LayoutTypes;
+        align?: Alignment;
+    }): void;
 };

package/plugins/quick-insert/components/quick-insert.component.d.ts

@@ -17,6 +17,7 @@ export declare class TheQuickInsertComponent {
     handleMousedownNativeElement(event: any): void;
     constructor(renderer: Renderer2, elementRef: ElementRef, cdr: ChangeDetectorRef);
     checkStatus(): void;
+    private isRichMediaScope;
     private hasExcludeAttribute;
     private updatePosition;
     mouseEnter(event: MouseEvent): void;

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

@@ -12,6 +12,7 @@ $control-width: 11px;
 $control-corner-width: 12px;
 
 .slate-element-table {
+    display: block;
     .the-table {
         border-spacing: 0;
         word-wrap: break-word;

package/services/context.service.d.ts

@@ -33,6 +33,7 @@ export declare class TheContextService {
     getDefaultFontSize(): FontSizes;
     getEditableElement(): Element;
     getFirstElementChild(): HTMLElement;
+    layoutDefaultWidth(): number;
     setUploadFileList(file: {
         url: string;
         file: File;

package/styles/editor.scss

@@ -129,6 +129,10 @@ $thy-icon-nav-link-margin-right: 5px;
 
     .leaf-with-placeholder {
         background-color: $white;
+
+        &[data-slate-leaf=true] {
+            width: 12em;;
+        }
     }
     [data-slate-placeholder] {
         color: initial;

package/styles/index.scss

@@ -19,3 +19,4 @@
 @import '../plugins/quick-insert/components/quick-toolbar/quick-toolbar.component.scss';
 @import '../plugins/font-size/toolbar-item.component.scss';
 @import '../plugins/inline-code/inline-code.component.scss';
+@import '../plugins/dnd/component/dnd.component.scss'

package/styles/typo.scss

@@ -170,4 +170,48 @@ $font-size-line-height: 1.5;
     .remove-link.thy-icon-nav-link:hover {
         color: $danger;
     }
+
+    // 处理 block-card 图文混排
+    .slate-block,
+    .slate-block-card {
+        clear: both;
+
+        &.slate-element-paragraph,
+        &[class^="slate-element-heading"] {
+            clear: none;
+        }
+        &.slate-element-numbered-list,
+        &.slate-element-bulleted-list,
+        &.slate-element-block-quote {
+            clear: none;
+            display: flow-root;
+        }
+    }
+
+    .slate-block-card {
+        &[layout^="wrap-"] {
+            max-width: 100%;
+            clear: inherit;
+        }
+        &[layout="wrap-left"] {
+            float: left;
+
+            .image-content {
+                margin: 0 12px 0 auto;
+            }
+        }
+        &[layout="wrap-right"] {
+            float: right;
+
+            .image-content {
+                margin: 0 auto 0 12px;
+            }
+        }
+    }
+
+
+    // 处理相邻图文混排时的布局
+    [layout^="wrap-"] + [layout^="wrap-"] + .slate-block {
+        clear: both !important;
+    }
 }

package/utils/dom.d.ts

@@ -1,5 +1,7 @@
-import { Element } from 'slate';
+import { Element, NodeEntry } 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;
@@ -8,3 +10,5 @@ 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;

package/utils/merge-element-options.d.ts

@@ -0,0 +1,2 @@
+import { ElementOptionsInfo } from '../interfaces';
+export declare const mergeElementOptions: (elementOptions: ElementOptionsInfo[]) => {};