@opentiny/fluent-editor 4.0.0-alpha.1 → 4.0.0-alpha.3

package/types/config/editor.utils.d.ts

@@ -38,4 +38,3 @@ export declare function getEventComposedPath(evt: any): any;
 export declare function sanitize(url: any, protocols: any): any;
 export declare function hadProtocol(url: string): boolean;
 export declare function isInside(position: any, dom: any): boolean;
-export declare const isPureIE: boolean;

package/types/config/index.d.ts

@@ -1,5 +1,6 @@
 export * from './editor.config';
 export * from './editor.utils';
+export * from './types';
 export declare function inputFile(type: 'image' | 'video' | 'file', accept: string[]): void;
 export declare function getListValue(value: any, preListValue: any): any;
 /** css namespace */

package/types/config/types/editor-config.interface.d.ts

@@ -1,19 +1,12 @@
 import { QuillOptions } from 'quill';
 import { ScreenShotOptions } from '../../tools/screenshot';
 import { IEditorModules } from './editor-modules.interface';
-import { EditorFormat } from './type';
 
 export interface IEditorConfig extends QuillOptions {
-    format?: EditorFormat;
     modules?: IEditorModules;
     screenshotOnStaticPage?: boolean;
     scrollingContainer?: HTMLElement | string | null;
-    trackChanges?: 'user' | 'all';
     autoProtocol?: boolean | string;
     editorPaste?: any;
     screenshot?: Partial<ScreenShotOptions>;
-    i18n?: {
-        lang?: string;
-        langText?: Record<string, string>;
-    };
 }

package/types/config/types/editor-modules.interface.d.ts

@@ -1,21 +1,27 @@
+import { ToolbarProps } from 'quill/modules/toolbar';
+import { I18NOptions, ICounterOption, MentionOption, ShortCutKeyInputOptions } from '../../modules';
+import { BlotFormatterOptionsInput } from '../../modules/custom-image/options';
 import { FileUploaderOptions } from '../../modules/custom-uploader';
-import { ToolbarOption } from './type';
+import { EmojiModuleOptions } from '../../modules/emoji';
 
+export type ToolbarOptions = {
+    container?: HTMLElement | (Record<string, any>[] | string[] | (string | Record<string, any>)[])[];
+} & ToolbarProps;
 export interface IEditorModules {
     [key: string]: any;
-    clipboard?: {
+    'clipboard'?: {
         matchers?: any[];
         matchVisual?: boolean;
     } | boolean;
-    history?: {
+    'history'?: {
         delay?: number;
         maxStack?: number;
         userOnly?: boolean;
     } | boolean;
-    keyboard?: {
+    'keyboard'?: {
         bindings?: any;
     } | boolean;
-    syntax?: {
+    'syntax'?: {
         interval?: number;
         languages?: {
             key: string;
@@ -23,11 +29,14 @@ export interface IEditorModules {
         }[];
         hljs?: any;
     } | boolean;
-    toolbar?: (string | string[])[][] | ToolbarOption | string | {
-        container?: string | string[] | ToolbarOption;
-        handlers?: {
-            [key: string]: any;
-        };
-    } | boolean;
-    uploader?: boolean | Partial<FileUploaderOptions>;
+    'toolbar'?: boolean | ToolbarOptions | ToolbarOptions['container'] | string[];
+    'uploader'?: boolean | Partial<FileUploaderOptions>;
+    'shortcut-key'?: boolean | Partial<ShortCutKeyInputOptions>;
+    'mention'?: boolean | MentionOption;
+    'i18n'?: boolean | Partial<I18NOptions>;
+    'counter'?: boolean | ICounterOption;
+    'emoji'?: boolean | EmojiModuleOptions;
+    'file'?: boolean;
+    'mathlive'?: boolean;
+    'image'?: boolean | Partial<BlotFormatterOptionsInput>;
 }

package/types/config/types/index.d.ts

@@ -1,23 +1,3 @@
-export * from './additional-toolbar-item.interface';
-export * from './content-change.interface';
-export * from './content-save.interface';
-export * from './counter-option.interface';
 export * from './editor-config.interface';
 export * from './editor-modules.interface';
-export * from './editor-toolbar.interface';
-export * from './file-operation.interface';
-export * from './focus-change.interface';
-export * from './fullscreen-module.interface';
-export * from './help-panel-option.interface';
-export * from './image-module.interface';
-export * from './image-upload.interface';
-export * from './load-on-demand-module.interface';
-export * from './mention-module.interface';
-export * from './paste-change.interface';
-export * from './quick-menu-module.interface';
-export * from './range.interface';
-export * from './registry-options.interface';
-export * from './selection-change.interface';
-export * from './toolbar-item.interface';
 export * from './type';
-export * from './validate-error.interface';

package/types/config/types/type.d.ts

@@ -1,6 +1,2 @@
-import { IToolbarItem } from './toolbar-item.interface';
-
-export type ToolbarOption = (string[] | IToolbarItem[] | string | IToolbarItem)[];
-export type EditorFormat = 'object' | 'json' | 'html' | 'text';
 export type AnyFunction = (...args: any[]) => any;
 export type Constructor<T = any, U extends Array<any> = any[]> = new (...args: U) => T;

package/types/core/fluent-editor.d.ts

@@ -11,5 +11,4 @@ declare class FluentEditor extends Quill {
     constructor(container: HTMLElement | string, options?: IEditorConfig);
     getLangText(name: string): string;
 }
-export type { Module, Parchment as TypeParchment, } from 'quill';
 export default FluentEditor;

package/types/formats/emoji.d.ts

@@ -0,0 +1,9 @@
+import { default as TypeInline } from 'quill/blots/inline';
+
+declare const Inline: typeof TypeInline;
+export declare class EmojiBlot extends Inline {
+    static blotName: string;
+    static tagName: string;
+    static className: string;
+}
+export {};

package/types/formats/index.d.ts

@@ -0,0 +1,4 @@
+export * from './emoji';
+export * from './soft-break';
+export * from './strike';
+export * from './video';

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

@@ -1,14 +1,13 @@
-declare const Embed: unknown;
-declare class SoftBreak extends Embed {
+import { default as TypeEmbed } from 'quill/blots/embed';
+
+declare const Embed: typeof TypeEmbed;
+export declare class SoftBreak extends Embed {
     static blotName: string;
     static tagName: string;
     static className: string;
-    domNode: any;
-    prev: any;
-    next: any;
     remove: () => void;
-    static create(): any;
+    static create(): Node;
     optimize(): void;
     length(): number;
 }
-export default SoftBreak;
+export {};

package/types/formats/strike.d.ts

@@ -1,7 +1,9 @@
-declare const Inline: unknown;
-declare class StrikeBlot extends Inline {
+import { default as TypeInline } from 'quill/blots/inline';
+
+declare const Inline: typeof TypeInline;
+export declare class StrikeBlot extends Inline {
     static blotName: string;
-    static className: string;
     static tagName: string;
+    static className: string;
 }
-export default StrikeBlot;
+export {};

package/types/formats/video.d.ts

@@ -1,16 +1,14 @@
-import { Parchment as TypeParchment } from 'quill';
+import { BlockEmbed as TypeBlockEmbed } from 'quill/blots/block';
 
-declare const BlockEmbed: TypeParchment.BlotConstructor;
-declare class Video extends BlockEmbed {
+declare const BlockEmbed: typeof TypeBlockEmbed;
+export declare class Video extends BlockEmbed {
     static blotName: string;
     static tagName: string;
     static SANITIZED_URL: string;
     static PROTOCOL_WHITELIST: string[];
     static className: string;
-    statics: any;
-    domNode: any;
     static sanitize(url: any): any;
     static create(value: any): HTMLElement;
     static value(domNode: any): any;
 }
-export default Video;
+export {};

package/types/index.d.ts

@@ -1,8 +1,9 @@
 import { default as FluentEditor } from './fluent-editor';
 
-export * from './config';
-export { I18N } from './modules/i18n';
-export * from './modules/table-up';
-export * from './modules/toolbar/toolbar-tip';
-export default FluentEditor;
+export * from './attributors';
+export * from './config/types';
+export * from './formats';
+export * from './modules';
 export { generateTableUpShortKeyMenu } from 'quill-shortcut-key';
+export default FluentEditor;
+export { AttributeMap, Delta, Op, OpIterator, Parchment, Range } from 'quill/core';

package/types/modules/ai/index.d.ts

@@ -0,0 +1,39 @@
+import { default as TypeToolbar } from 'quill/modules/toolbar';
+import { default as FluentEditor } from '../../core/fluent-editor';
+
+export declare class AI {
+    quill: FluentEditor;
+    options: any;
+    toolbar: TypeToolbar;
+    host: string;
+    apiKey: string;
+    model: string;
+    message: string;
+    isBreak: boolean;
+    inputValue: string;
+    SEND: string;
+    BREAK: string;
+    DONE: string;
+    REGENERATE: string;
+    CLOSE: string;
+    private dialogContainerEl;
+    private wrapContainerEl;
+    private aiPreTextEl;
+    private inputContainerEl;
+    private inputEl;
+    private sendButtonEl;
+    private resultPopupEl;
+    private actionMenuEl;
+    constructor(quill: FluentEditor, options: any);
+    positionElements(): void;
+    private createAiPreTextEl;
+    private createElements;
+    showAIInput(): void;
+    private queryAI;
+    private showAIResponse;
+    private createActionMenu;
+    private handleAction;
+    private insertAIResponse;
+    private regenerateResponse;
+    private closeAIPanel;
+}

package/types/modules/counter.d.ts

@@ -1,6 +1,13 @@
-import { ICounterOption } from '../config/types';
+import { AnyFunction } from '../config';
 import { default as FluentEditor } from '../fluent-editor';
 
+export interface ICounterOption {
+    format?: 'text' | 'html';
+    unit?: 'word' | 'char';
+    count?: number;
+    template?: string | AnyFunction;
+    errorTemplate?: string | AnyFunction;
+}
 export default class Counter {
     quill: FluentEditor;
     container: HTMLDivElement;

package/types/modules/custom-clipboard.d.ts

@@ -2,12 +2,9 @@ import { default as TypeClipboard } from 'quill/modules/clipboard';
 import { default as FluentEditor } from '../fluent-editor';
 
 declare const Clipboard: typeof TypeClipboard;
-declare class CustomClipboard extends Clipboard {
+export declare class CustomClipboard extends Clipboard {
     quill: FluentEditor;
-    convert: any;
-    onCopy: any;
-    matchers: any;
-    prepareMatching(container: any, nodeMatches: any): any[][];
+    prepareMatching(container: HTMLElement, nodeMatches: any): any[][];
     onCaptureCopy(e: any, isCut?: boolean): void;
     onCapturePaste(e: ClipboardEvent): void;
     onPaste(range: any, { html, text, files: clipboardFiles, rtf }: {
@@ -26,4 +23,4 @@ declare class CustomClipboard extends Clipboard {
         length: number;
     };
 }
-export default CustomClipboard;
+export {};

package/types/modules/custom-image/Options.d.ts

@@ -1,3 +1,6 @@
+import { ImageToolbar, ImageToolbarButtons } from './actions';
+import { BlotSpec } from './specs';
+
 export interface OverlayOptions {
     className: string;
     style: Record<string, string>;
@@ -6,31 +9,39 @@ export interface ResizeOptions {
     handleClassName: string;
     handleStyle: Record<string, string>;
 }
-export interface AlignOptions {
-    attribute: string;
-    aligner: {
-        applyStyle: boolean;
-    };
-    icons: {
-        left: string;
-        center: string;
-        right: string;
-    };
-    toolbar: {
-        allowDeselect: boolean;
-        mainClassName: string;
-        mainStyle: any;
-        buttonClassName: string;
-        addButtonSelectStyle: boolean;
-        buttonStyle: any;
-        svgStyle: any;
-    };
+export interface ToolButtonOption {
+    name: string;
+    icon: string;
+    isActive?: (el: HTMLElement) => boolean;
+    apply: (this: ImageToolbar, el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => void;
 }
-export interface Options {
-    specs: any;
+export interface ToolbarButtonOptions {
+    buttons: Record<string, ToolButtonOption | boolean>;
+}
+export interface ToolbarOptions extends ToolbarButtonOptions {
+    mainClassName: string;
+    mainStyle: Record<string, unknown>;
+    buttonClassName: string;
+    addButtonSelectStyle: boolean;
+    buttonStyle: Record<string, unknown>;
+    svgStyle: Record<string, unknown>;
+}
+export interface BlotFormatterOptionsInput {
+    specs: typeof BlotSpec[];
+    overlay: Partial<OverlayOptions>;
+    resize: Partial<ResizeOptions>;
+    toolbar: Partial<ToolbarOptions>;
+}
+export interface BlotFormatterOptions {
+    specs: typeof BlotSpec[];
     overlay: OverlayOptions;
-    align: AlignOptions;
     resize: ResizeOptions;
+    toolbar: ToolbarOptions;
 }
-declare const DefaultOptions: Options;
+export declare const LEFT_ALIGN = "align-left";
+export declare const CENTER_ALIGN = "align-center";
+export declare const RIGHT_ALIGN = "align-right";
+export declare const COPY = "copy";
+export declare const DOWNLOAD = "download";
+declare const DefaultOptions: BlotFormatterOptions;
 export default DefaultOptions;

package/types/modules/custom-image/actions/Action.d.ts

@@ -1,6 +1,8 @@
-export default class Action {
-    formatter: any;
-    constructor(formatter: any);
+import { BlotFormatter } from '../blot-formatter';
+
+export declare class Action {
+    formatter: BlotFormatter;
+    constructor(formatter: BlotFormatter);
     onCreate(): void;
     onDestroy(): void;
     onUpdate(): void;

package/types/modules/custom-image/actions/custom-resize-action.d.ts

@@ -0,0 +1,24 @@
+import { Action } from './action';
+
+export declare class CustomResizeAction extends Action {
+    topLeftHandle: HTMLElement;
+    topRightHandle: HTMLElement;
+    bottomRightHandle: HTMLElement;
+    bottomLeftHandle: HTMLElement;
+    dragHandle: HTMLElement;
+    dragStartX: number;
+    preDragWidth: number;
+    targetRatio: number;
+    maxWidth: number;
+    minWidth: number;
+    constructor(formatter: any);
+    onCreate(): void;
+    onDestroy(): void;
+    createHandle(position: string, cursor: string): HTMLElement;
+    repositionHandles(handleStyle: any): void;
+    setCursor(value: string): void;
+    onMouseDown: (event: MouseEvent) => void;
+    findTd: (node: HTMLElement, level: number) => any;
+    onDrag: (event: MouseEvent) => void;
+    onMouseUp: () => void;
+}

package/types/modules/custom-image/actions/delete-action.d.ts

@@ -0,0 +1,7 @@
+import { Action } from './action';
+
+export declare class DeleteAction extends Action {
+    onCreate(): void;
+    onDestroy(): void;
+    onKeyUp: (event: any) => void;
+}

package/types/modules/custom-image/actions/image-toolbar-buttons.d.ts

@@ -0,0 +1,17 @@
+import { ToolbarButtonOptions, ToolButtonOption } from '../options';
+
+export declare const ALIGN_ATTR = "data-align";
+export declare function setAlignStyle(el: HTMLElement, display: string | null, float: string | null, margin: string | null): void;
+export declare const alignmentHandler: {
+    left: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => void;
+    center: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => void;
+    right: (el: HTMLElement, toolbarButtons: ImageToolbarButtons) => void;
+    download: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => void;
+    copy: (el: HTMLImageElement, toolbarButtons: ImageToolbarButtons) => Promise<void>;
+};
+export declare class ImageToolbarButtons {
+    buttons: Record<string, ToolButtonOption>;
+    constructor(options: ToolbarButtonOptions);
+    getItems(): ToolButtonOption[];
+    clear(el: HTMLElement): void;
+}

package/types/modules/custom-image/actions/index.d.ts

@@ -0,0 +1,6 @@
+export * from './action';
+export * from './custom-resize-action';
+export * from './delete-action';
+export * from './image-toolbar-buttons';
+export * from './toolbar';
+export * from './toolbar-action';

package/types/modules/custom-image/actions/toolbar-action.d.ts

@@ -0,0 +1,12 @@
+import { BlotFormatter } from '../blot-formatter';
+import { Action } from './action';
+import { ImageToolbarButtons } from './image-toolbar-buttons';
+import { ImageToolbar } from './toolbar';
+
+export declare class ImageToolbarAction extends Action {
+    toolbar: ImageToolbar;
+    buttons: ImageToolbarButtons;
+    constructor(formatter: BlotFormatter);
+    onCreate(): void;
+    onDestroy(): void;
+}

package/types/modules/custom-image/actions/toolbar.d.ts

@@ -0,0 +1,20 @@
+import { BlotFormatter } from '../blot-formatter';
+import { ToolButtonOption } from '../options';
+import { ImageToolbarButtons } from './image-toolbar-buttons';
+
+export declare class ImageToolbar {
+    toolbar?: HTMLElement;
+    buttons: HTMLElement[];
+    constructor();
+    create(formatter: BlotFormatter, toolButton: ImageToolbarButtons): HTMLElement;
+    destroy(): void;
+    getElement(): HTMLElement;
+    addToolbarStyle(formatter: BlotFormatter, toolbar: HTMLElement): void;
+    addButtonStyle(button: HTMLElement, index: number, formatter: BlotFormatter): void;
+    addButtons(formatter: BlotFormatter, toolbar: HTMLElement, toolButton: ImageToolbarButtons): void;
+    preselectButton(button: HTMLElement, toolButtonOption: ToolButtonOption, formatter: BlotFormatter, toolButton: ImageToolbarButtons): void;
+    onButtonClick(button: HTMLElement, formatter: BlotFormatter, toolButtonOption: ToolButtonOption, toolButton: ImageToolbarButtons): void;
+    clickButton(button: HTMLElement, target: HTMLImageElement, formatter: BlotFormatter, toolButtonOption: ToolButtonOption, toolButton: ImageToolbarButtons): void;
+    selectButton(formatter: BlotFormatter, button: HTMLElement): void;
+    deselectButton(formatter: BlotFormatter, button: HTMLElement): void;
+}

package/types/modules/custom-image/blot-formatter.d.ts

@@ -0,0 +1,24 @@
+import { default as FluentEditor } from '../../core/fluent-editor';
+import { Action } from './actions';
+import { BlotFormatterOptions } from './options';
+import { BlotSpec } from './specs';
+
+export declare class BlotFormatter {
+    quill: FluentEditor;
+    options: BlotFormatterOptions;
+    currentSpec: BlotSpec;
+    specs: BlotSpec[];
+    overlay: HTMLElement;
+    actions: Action[];
+    observer: MutationObserver;
+    static register(): void;
+    constructor(quill: FluentEditor, options?: Partial<BlotFormatterOptions>);
+    show(spec: BlotSpec): void;
+    hide(): void;
+    update(): void;
+    createActions(spec: BlotSpec): void;
+    destroyActions(): void;
+    repositionOverlay(): void;
+    setUserSelect(value: string): void;
+    onClick: () => void;
+}

package/types/modules/custom-image/image-bar.d.ts

@@ -1,15 +1,17 @@
-import { default as Quill } from 'quill';
+import { default as FluentEditor } from '../../core/fluent-editor';
+import { Range } from 'quill';
 
-export default class ImageBar {
-    quill: Quill;
+export type ImageOperateType = 'download' | 'copy' | 'delete';
+export declare class ImageBar {
+    quill: FluentEditor;
     image: HTMLImageElement;
     domNode: HTMLElement;
-    imageRange: any;
+    imageRange: Range;
     template: string;
-    constructor(quill: any, target: any);
+    constructor(quill: FluentEditor, target: HTMLImageElement);
     createImageBar(): void;
     destroy(): void;
-    operateImage(event: any, operate: any): Promise<void>;
+    operateImage(event: Event, operate: ImageOperateType): Promise<void>;
     setPosition(): void;
-    css(domNode: any, rules: any): void;
+    css(domNode: HTMLElement, rules: Record<string, string | string[]>): void;
 }

package/types/modules/custom-image/image.d.ts

@@ -1,25 +1,27 @@
+import { Parchment as TypeParchment } from 'quill';
 import { default as TypeEmbed } from 'quill/blots/embed';
 
 declare const Embed: typeof TypeEmbed;
 export type ImageValue = string | {
     src: string;
+    align?: string;
+    height?: number;
+    width?: number;
 };
-declare class CustomImage extends Embed {
-    static ID_SEED: number;
+export declare class CustomImage extends Embed {
     static blotName: string;
     static tagName: string;
-    domNode: any;
-    parent: any;
-    scroll: any;
-    next: any;
+    static ID_SEED: number;
+    domNode: HTMLElement;
     static create(value: ImageValue): HTMLElement;
-    static formats(domNode: any): {};
-    static match(url: any): boolean;
+    static formats(domNode: HTMLElement): {};
+    static match(url: string): boolean;
     static register(): void;
-    static sanitize(url: any): any;
-    static value(domNode: any): any;
-    format(name: any, value: any): void;
+    static sanitize(url: string): string;
+    static value(domNode: HTMLElement): any;
+    format(name: string, value: any): void;
     unWrap(): void;
-    wrap(name: any, value: any): any;
+    wrap(name: string, value?: any): TypeParchment.Parent;
+    wrap(wrapper: TypeParchment.Parent): TypeParchment.Parent;
 }
-export { CustomImage as default };
+export {};

package/types/modules/custom-image/index.d.ts

@@ -0,0 +1,4 @@
+export * from './actions';
+export * from './blot-formatter';
+export * from './image';
+export * from './specs';

package/types/modules/custom-image/specs/blot-spec.d.ts

@@ -0,0 +1,13 @@
+import { BlotFormatter } from '../blot-formatter';
+import { CustomResizeAction, DeleteAction, ImageToolbarAction } from '../actions';
+
+export declare class BlotSpec {
+    formatter: BlotFormatter;
+    constructor(formatter: BlotFormatter);
+    init(): void;
+    getActions(): (typeof ImageToolbarAction | typeof CustomResizeAction | typeof DeleteAction)[];
+    getTargetElement(): HTMLElement | null;
+    getOverlayElement(): HTMLElement;
+    setSelection(): void;
+    onHide(): void;
+}

package/types/modules/custom-image/specs/custom-image-spec.d.ts

@@ -0,0 +1,18 @@
+import { BlotFormatter } from '../blot-formatter';
+import { ImageSpec } from './image-spec';
+
+export declare class CustomImageSpec extends ImageSpec {
+    editorElem: HTMLElement | undefined;
+    observer: any;
+    oldRootScrollTop: number;
+    constructor(formatter: BlotFormatter);
+    handleQuillRootScroll(): void;
+    init(): void;
+    imageMouseOver(event: any): void;
+    imageMouseout: (event: any) => void;
+    addImagePreviewOverlay(event: any): void;
+    removeImagePreviewOverlay(): void;
+    onHide(): void;
+    resetOverlayMarginTop(): void;
+    onClick: (event: MouseEvent) => void;
+}

package/types/modules/custom-image/specs/image-spec.d.ts

@@ -0,0 +1,9 @@
+import { BlotSpec } from './blot-spec';
+
+export declare class ImageSpec extends BlotSpec {
+    img: HTMLImageElement | null;
+    init(): void;
+    getTargetElement(): HTMLImageElement;
+    onHide(): void;
+    onClick: (event: MouseEvent) => void;
+}

package/types/modules/custom-image/specs/index.d.ts

@@ -0,0 +1,3 @@
+export * from './blot-spec';
+export * from './custom-image-spec';
+export * from './image-spec';