@worktile/theia 2.2.10 → 2.3.0-next.2

package/interfaces/editor.d.ts

@@ -30,9 +30,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;
@@ -75,6 +77,7 @@ export interface TheOptions {
     scrollContainer?: string;
     maxHeight?: number;
     fontSize?: FontSizes;
+    richMedia?: boolean;
     toolbar?: ToolbarOption;
     disablePlugins?: string[];
     extraElementOptions?: ElementOptionsInfo[];

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.10",
+  "version": "2.3.0-next.2",
   "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/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,19 @@
 
     .image-container:hover .layer {
         display: block;
+
+        &.readonly {
+            cursor: zoom-in;
+        }
     }
+}
+
+.the-image-toolbar {
+    .thy-icon-nav .thy-icon-nav-link {
+        margin-right: $thy-icon-nav-link-margin-right;
 
-    .image-container:hover .layer.readonly {
-        cursor: zoom-in;
+        &.remove-link:hover {
+            @include remove-link-hover();
+        }
     }
 }

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;
@@ -339,11 +340,11 @@ $control-corner-width: 12px;
     display: block;
 
     .danger.thy-icon-nav-link:hover {
-        color: $danger;
+        @include remove-link-hover();
     }
 
     .thy-icon-nav .thy-icon-nav-link {
-        margin-right: 5px;
+        margin-right: $thy-icon-nav-link-margin-right;
 
         &:last-child {
             margin-right: 0;

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;
@@ -277,6 +281,13 @@ $thy-icon-nav-link-margin-right: 5px;
     }
 }
 
+.the-block-toolbar-popover {
+    display: flex;
+    padding: 5px 10px;
+    background: $white;
+    box-shadow: $box-shadow;
+}
+
 @mixin the-toolbar-active {
     .thy-icon-nav-link.thy-popover-origin-active,
     .the-toolbar-dropdown-container.thy-popover-origin-active .thy-icon-nav-link {

package/styles/index.scss

@@ -18,4 +18,4 @@
 @import '../plugins/quick-insert/components/quick-insert.component.scss';
 @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/inline-code/inline-code.component.scss';

package/styles/typo.scss

@@ -19,7 +19,13 @@ $nav-item-margin: 5px;
 $selection-background: rgba($color: $primary, $alpha: 0.3);
 $font-size-line-height: 1.5;
 
+@mixin remove-link-hover {
+    color: $danger;
+    background: hsla(0,100%,73%,.1);
+}
+
 .the-editor-typo {
+    display: flow-root;
     font-size: $the-font-size-base;
     min-height: 250px;
     padding: 28px 30px;
@@ -112,6 +118,9 @@ $font-size-line-height: 1.5;
         text-indent: 0;
         color: $gray-700;
     }
+    .slate-element-hr{
+        display: block;
+    }
     .slate-element-hr,
     .slate-element-code,
     .slate-element-image,
@@ -168,6 +177,52 @@ $font-size-line-height: 1.5;
         }
     }
     .remove-link.thy-icon-nav-link:hover {
-        color: $danger;
+        @include remove-link-hover();
+    }
+
+    // 处理 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;
+            z-index: 1;
+
+            .image-content {
+                margin: 0 12px 0 auto;
+            }
+        }
+        &[layout="wrap-right"] {
+            float: right;
+            z-index: 1;
+
+            .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/index.d.ts

@@ -4,3 +4,5 @@ export * from './get-toolbar-class';
 export * from './create-empty-paragraph';
 export * from './common';
 export * from './is-clean-empty-paragraph';
+export * from './merge-element-options';
+export * from './dom';

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

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