rme 0.3.0-beta.4 → 0.3.0-beta.41

package/dist/index.d.ts

@@ -2,26 +2,78 @@ import * as _drl990114_codemirror_themes from '@drl990114/codemirror-themes';
 import { CreateThemeOptions } from '@drl990114/codemirror-themes';
 export { CreateThemeOptions, createTheme } from '@drl990114/codemirror-themes';
 import { LanguageSupport, LanguageDescription } from '@codemirror/language';
+import { SearchQuery } from '@codemirror/search';
 import { Compartment, Extension } from '@codemirror/state';
 import { EditorView, EditorViewConfig } from '@codemirror/view';
 import { ProsemirrorNode, EditorView as EditorView$1 } from '@rme-sdk/pm';
 import * as react from 'react';
-import react__default, { CSSProperties, ReactNode, MouseEvent, JSX, FC } from 'react';
+import react__default, { CSSProperties, ComponentType, ReactNode, MouseEvent, JSX, FC } from 'react';
 import { RemirrorEventListenerProps, Extension as Extension$1, RemirrorManager as RemirrorManager$1, AnyExtension as AnyExtension$1 } from '@rme-sdk/main';
-import { AnyExtension, RemirrorManager, CommandDecoratorMessageProps, CoreIcon } from '@rme-sdk/core';
-import { Node, Schema, NodeType, Mark } from '@rme-sdk/pm/model';
+import * as _rme_sdk_core from '@rme-sdk/core';
+import { AnyExtension, RemirrorManager, DelayedPromiseCreator, ProsemirrorAttributes, NodeExtension, EditorView as EditorView$2, ApplySchemaAttributes, NodeSpecOverride, NodeExtensionSpec, PrimitiveSelection, CommandFunction, ExtensionCommandReturn, InputRule as InputRule$1, KeyBindings, ProsemirrorPlugin, ProsemirrorNode as ProsemirrorNode$1, CommandDecoratorMessageProps, CoreIcon } from '@rme-sdk/core';
+import { Node, Schema, NodeType, Mark, NodeRange } from '@rme-sdk/pm/model';
 import { ReactFrameworkOutput } from '@rme-sdk/react-core';
-import { Token as Token$1 } from 'markdown-it/index.js';
+import { InputRule } from '@rme-sdk/pm/inputrules';
+import { PasteRule } from '@rme-sdk/pm/paste-rules';
 import Token from 'markdown-it/lib/token.mjs';
+import { Token as Token$1 } from 'markdown-it/index.js';
+import { NodeViewComponentProps } from '@rme-sdk/react';
 export { useCommands, useHelpers, useKeymap, useRemirrorContext } from '@rme-sdk/react';
 import * as styled_components from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
+import { IndentListOptions, DedentListOptions, UnwrapListOptions, ToggleCollapsedOptions } from '@rme-sdk/prosemirror-flat-list';
 
 type LoadLanguage = (lang: string) => Promise<LanguageSupport> | LanguageSupport | void;
 
+type ClipboardReadFunction = typeof clipboardRead;
+declare function clipboardRead(): Promise<{
+    html: string;
+    text: string;
+}>;
+
+interface CommandKeymapOptions {
+    /**
+     * Override default keyboard shortcuts
+     * @example
+     * { toggleStrong: 'mod-shift-b', toggleEmphasis: 'ctrl-i' }
+     */
+    overrideShortcutMap?: Partial<Record<CommandName, string>>;
+    /**
+     * Disable all built-in shortcuts
+     * @default false
+     */
+    disableAllBuildInShortcuts?: boolean;
+    clipboardReadFunction?: ClipboardReadFunction;
+}
+type CommandName = keyof typeof defaultCommandShortcutMap;
+declare const defaultCommandShortcutMap: {
+    readonly copy: "mod-c";
+    readonly paste: "mod-v";
+    readonly undo: "mod-z";
+    readonly redo: "mod-shift-z";
+    readonly cut: "mod-x";
+    readonly toggleH1: "mod-1";
+    readonly toggleH2: "mod-2";
+    readonly toggleH3: "mod-3";
+    readonly toggleH4: "mod-4";
+    readonly toggleH5: "mod-5";
+    readonly toggleH6: "mod-6";
+    readonly toggleStrong: "mod-b";
+    readonly toggleEmphasis: "mod-i";
+    readonly toggleCodeText: "mod-e";
+    readonly toggleDelete: "mod-shift-s";
+    readonly insertLink: "mod-k";
+    readonly insertImage: "mod-alt-i";
+};
+
 type CustomCopyFunction = (code: string) => Promise<boolean> | boolean;
 
 declare const changeTheme: (theme: CreateThemeOptions) => void;
+declare const updateCodemirrorSearchQuery: (query: string, caseSensitive?: boolean) => void;
+declare const updateCodemirrorSearchState: (query: string, caseSensitive?: boolean, activeMatch?: {
+    from: number;
+    to: number;
+} | null) => void;
 declare const extractMatches: (view: EditorView) => any[];
 type CreateCodemirrorOptions = {
     /**
@@ -44,6 +96,10 @@ type CreateCodemirrorOptions = {
          */
         customCopyFunction?: CustomCopyFunction;
     };
+    /**
+     * Command keymap options for customizing keyboard shortcuts
+     */
+    commandKeymapOptions?: CommandKeymapOptions;
 };
 declare class MfCodemirrorView {
     private readonly view;
@@ -51,6 +107,7 @@ declare class MfCodemirrorView {
     private readonly languageConf;
     private readonly toggleName;
     private readonly schema;
+    private readonly searchQueryConf;
     private languageName;
     id: string;
     cm: EditorView;
@@ -74,6 +131,14 @@ declare class MfCodemirrorView {
     setSelection(anchor: number, head: number): void;
     updateLanguage(): void;
     destroy(): void;
+    setSearchState(query: SearchQuery, active: {
+        from: number;
+        to: number;
+    } | null): void;
+    getProsemirrorContentRange(): {
+        from: number;
+        to: number;
+    };
     forwardSelection(): void;
     private setLanguage;
     private valueChanged;
@@ -231,6 +296,18 @@ type EditorContext = ReactFrameworkOutput<Remirror.Extensions>;
 type CreateSourceCodeManagerOptions = {
     language?: string;
     onCodemirrorViewLoad: (cm: MfCodemirrorView) => void;
+    /**
+     * Override default keyboard shortcuts
+     * @example
+     * { toggleStrong: 'mod-shift-b', toggleEmphasis: 'ctrl-i' }
+     */
+    overrideShortcutMap?: Partial<Record<CommandName, string>>;
+    /**
+     * Disable all built-in shortcuts
+     * @default false
+     */
+    disableAllBuildInShortcuts?: boolean;
+    clipboardReadFunction?: ClipboardReadFunction;
 };
 declare function createSourceCodeManager(options?: CreateSourceCodeManagerOptions): RemirrorManager$1<any>;
 declare const createSourceCodeDelegate: (options?: CreateSourceCodeManagerOptions) => EditorDelegate<any>;
@@ -250,6 +327,11 @@ interface AIOptions {
     }) => Promise<string | null>;
 }
 
+type CodemirrorOptions = {
+    lineWrapping?: boolean;
+    lineNumbers?: boolean;
+};
+
 type MarkdownItToken = string;
 declare enum ParserRuleType {
     text = 1,
@@ -316,6 +398,7 @@ declare class MarkdownParseState {
     private marks;
     private tokenHandlers;
     private contextStack;
+    private contextTokenStack;
     stack: StackItem[];
     constructor(schema: Schema, tokenHandlers: TokenHandlers);
     top(): StackItem;
@@ -328,9 +411,11 @@ declare class MarkdownParseState {
     addNode(type: NodeType, attrs?: Record<string, any>, content?: Node[]): Node;
     openNode(type: NodeType, attrs?: Record<string, any>): void;
     closeNode(): Node;
-    openContext(context: ParserRuleContext): void;
+    openContext(context: ParserRuleContext, token: Token$1): void;
     closeContext(): void;
+    closeContextToken(): Token$1 | undefined;
     topContext(): ParserRuleContext | undefined;
+    topContextToken(): Token$1 | undefined;
 }
 declare class MarkdownParser {
     private schema;
@@ -381,14 +466,280 @@ declare class MarkdownSerializer {
     serialize(content: Node): string;
 }
 
+interface ImageNodeViewProps extends NodeViewComponentProps {
+    resizeable?: boolean;
+    defaultSyntaxType?: 'html' | 'md';
+    handleViewImgSrcUrl?: ExtensionsOptions['handleViewImgSrcUrl'];
+    imagePasteHandler?: ExtensionsOptions['imagePasteHandler'];
+    imageHostingHandler?: (src: string) => Promise<string>;
+}
+
+type DelayedImage$1 = DelayedPromiseCreator<ImageAttributes$1>;
+interface ImageOptions$1 {
+    createPlaceholder?: (view: EditorView$2, pos: number) => HTMLElement;
+    updatePlaceholder?: (view: EditorView$2, pos: number, element: HTMLElement, progress: number) => void;
+    handleViewImgSrcUrl?: ExtensionsOptions['handleViewImgSrcUrl'];
+    imagePasteHandler?: ExtensionsOptions['imagePasteHandler'];
+    destroyPlaceholder?: (view: EditorView$2, element: HTMLElement) => void;
+    /**
+     * The upload handler for the image extension.
+     *
+     * It receives a list of dropped or pasted files and returns a promise for the
+     * attributes which should be used to insert the image into the editor.
+     *
+     * @param files - a list of files to upload.
+     * @param setProgress - the progress handler.
+     */
+    uploadHandler?: (files: FileWithProgress$1[]) => DelayedImage$1[];
+    /**
+     * The image hosting service upload handler.
+     * It receives the image src and returns a promise for the new src after uploading to image hosting service.
+     *
+     * @param src - the original image src
+     * @returns Promise<string> - the new image src after uploading
+     */
+    imageHostingHandler?: (src: string) => Promise<string>;
+    /**
+     * When pasting mixed text and image content (usually from Microsoft Office products) the content on the clipboard is either:
+     *
+     * a. one large image: containing effectively a screenshot of the original content (an image with text in it).
+     * b. HTML content: containing usable text, but images with file protocol URLs (which cannot be resolved due to browser security restrictions).
+     *
+     * If true, this will extract the text from the clipboard data, and drop the images.
+     * If false, the "screenshot" image will be used and the text will be dropped.
+     *
+     * @defaultValue true
+     */
+    preferPastedTextContent?: boolean;
+}
+interface FileWithProgress$1 {
+    file: File;
+    progress: SetProgress$1;
+}
+/**
+ * Set the progress.
+ *
+ * @param progress - a value between `0` and `1`.
+ */
+type SetProgress$1 = (progress: number) => void;
+/**
+ * The image extension for placing images into your editor.
+ *
+ * TODO ->
+ * - Captions https://glitch.com/edit/#!/pet-figcaption?path=index.js%3A27%3A1 into a preset
+ *
+ * TODO => Split this into an image upload extension and image extension.
+ * - Add a base64 image
+ */
+declare class MdImgUriExtension extends NodeExtension<ImageOptions$1> {
+    get name(): "md_image";
+    ReactComponent: ComponentType<ImageNodeViewProps> | undefined;
+    createTags(): ("inline" | "media")[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    insertMarkdownImage(attributes: ImageAttributes$1, selection?: PrimitiveSelection): CommandFunction;
+    uploadImage: (value: DelayedPromiseCreator<ImageAttributes$1>, onElement?: ((element: HTMLElement) => void) | undefined) => CommandFunction;
+    /**
+     * Insert an image once the provide promise resolves.
+     */
+    createCommands(): ExtensionCommandReturn;
+    uploadFiles: (options: {
+        files: File[];
+        pos?: number;
+    }) => CommandFunction;
+    private fileUploadFileHandler;
+    createPasteRules(): PasteRule[];
+    createInputRules(): InputRule[];
+    fromMarkdown(): readonly [{
+        readonly type: ParserRuleType.inline;
+        readonly token: "md_image";
+        readonly node: "md_image";
+    }];
+    toMarkdown({ state, node }: NodeSerializerOptions): void;
+}
+type ImageAttributes$1 = ProsemirrorAttributes<ImageExtensionAttributes$1>;
+interface ImageExtensionAttributes$1 {
+    align?: 'center' | 'end' | 'justify' | 'left' | 'match-parent' | 'right' | 'start';
+    alt?: string;
+    height?: string | number;
+    width?: string | number;
+    rotate?: string;
+    src: string;
+    title?: string;
+    /** The file name used to create the image. */
+    'data-file-name'?: string;
+}
+
+type DelayedImage = DelayedPromiseCreator<ImageAttributes>;
+interface ImageOptions {
+    createPlaceholder?: (view: EditorView$2, pos: number) => HTMLElement;
+    updatePlaceholder?: (view: EditorView$2, pos: number, element: HTMLElement, progress: number) => void;
+    handleViewImgSrcUrl?: ExtensionsOptions['handleViewImgSrcUrl'];
+    imagePasteHandler?: ExtensionsOptions['imagePasteHandler'];
+    destroyPlaceholder?: (view: EditorView$2, element: HTMLElement) => void;
+    /**
+     * The upload handler for the image extension.
+     *
+     * It receives a list of dropped or pasted files and returns a promise for the
+     * attributes which should be used to insert the image into the editor.
+     *
+     * @param files - a list of files to upload.
+     * @param setProgress - the progress handler.
+     */
+    uploadHandler?: (files: FileWithProgress[]) => DelayedImage[];
+    /**
+     * The image hosting service upload handler.
+     * It receives the image src and returns a promise for the new src after uploading to image hosting service.
+     *
+     * @param src - the original image src
+     * @returns Promise<string> - the new image src after uploading
+     */
+    imageHostingHandler?: (src: string) => Promise<string>;
+    /**
+     * When pasting mixed text and image content (usually from Microsoft Office products) the content on the clipboard is either:
+     *
+     * a. one large image: containing effectively a screenshot of the original content (an image with text in it).
+     * b. HTML content: containing usable text, but images with file protocol URLs (which cannot be resolved due to browser security restrictions).
+     *
+     * If true, this will extract the text from the clipboard data, and drop the images.
+     * If false, the "screenshot" image will be used and the text will be dropped.
+     *
+     * @defaultValue true
+     */
+    preferPastedTextContent?: boolean;
+}
+interface FileWithProgress {
+    file: File;
+    progress: SetProgress;
+}
+/**
+ * Set the progress.
+ *
+ * @param progress - a value between `0` and `1`.
+ */
+type SetProgress = (progress: number) => void;
+/**
+ * The image extension for placing images into your editor.
+ *
+ * TODO ->
+ * - Captions https://glitch.com/edit/#!/pet-figcaption?path=index.js%3A27%3A1 into a preset
+ *
+ * TODO => Split this into an image upload extension and image extension.
+ * - Add a base64 image
+ */
+declare class HtmlImageExtension extends NodeExtension<ImageOptions> {
+    get name(): "html_image";
+    ReactComponent: ComponentType<ImageNodeViewProps> | undefined;
+    createTags(): ("inline" | "media")[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    insertImage(attributes: ImageAttributes, selection?: PrimitiveSelection): CommandFunction;
+    createInputRules(): InputRule$1[];
+    fromMarkdown(): readonly [{
+        readonly type: ParserRuleType.inline;
+        readonly token: "html_image";
+        readonly node: "html_image";
+    }];
+    toMarkdown({ state, node }: NodeSerializerOptions): void;
+}
+type ImageAttributes = ProsemirrorAttributes<ImageExtensionAttributes>;
+interface ImageExtensionAttributes {
+    align?: 'center' | 'end' | 'justify' | 'left' | 'match-parent' | 'right' | 'start';
+    alt?: string;
+    height?: string | number;
+    width?: string | number;
+    rotate?: string;
+    src: string;
+    title?: string;
+    /** The file name used to create the image. */
+    'data-file-name'?: string;
+}
+/**
+ * True when the provided file is an image file.
+ */
+declare function isImageFileType(file: File): boolean;
+
+/**
+ * @public @group Schema
+ */
+interface ListAttributes {
+    kind?: string;
+    order?: number | null;
+    checked?: boolean;
+    collapsed?: boolean;
+}
+
+declare abstract class MarkdownNodeExtension {
+    abstract fromMarkdown: () => readonly ParserRule[];
+    abstract toMarkdown: NodeSerializerSpec;
+}
+
+/**
+ * A Remirror extension for creating lists. It's a simple wrapper around the API from `prosemirror-flat-list`.
+ *
+ * @public
+ */
+declare class LineListExtension extends NodeExtension {
+    static disableExtraAttributes: boolean;
+    get name(): "list";
+    createInputRules(): InputRule$1[];
+    createTags(): "block"[];
+    createNodeSpec(): NodeExtensionSpec;
+    createKeymap(): KeyBindings;
+    createExternalPlugins(): ProsemirrorPlugin[];
+    createCommands(): {
+        readonly indentList: (props?: IndentListOptions) => _rme_sdk_core.CommandFunction<object>;
+        readonly dedentList: (props?: DedentListOptions) => _rme_sdk_core.CommandFunction<object>;
+        readonly unwrapList: (options?: UnwrapListOptions) => _rme_sdk_core.CommandFunction<object>;
+        readonly wrapInList: (getAttrs: ListAttributes | ((range: NodeRange) => ListAttributes | null)) => _rme_sdk_core.CommandFunction<object>;
+        readonly moveList: (direction: 'up' | 'down') => _rme_sdk_core.CommandFunction<object>;
+        readonly splitList: () => _rme_sdk_core.CommandFunction<object>;
+        readonly protectCollapsed: () => _rme_sdk_core.CommandFunction<object>;
+        readonly toggleCollapsed: (props?: ToggleCollapsedOptions) => _rme_sdk_core.CommandFunction<object>;
+        readonly toggleList: (attrs: ListAttributes) => _rme_sdk_core.CommandFunction<object>;
+    };
+    fromMarkdown(): readonly [{
+        readonly type: ParserRuleType.free;
+        readonly token: "list_item_open";
+        readonly handler: (state: MarkdownParseState, token: Token) => void;
+    }, {
+        readonly type: ParserRuleType.free;
+        readonly token: "list_checkbox";
+        readonly handler: (state: MarkdownParseState, tok: Token) => void;
+    }, {
+        readonly type: ParserRuleType.free;
+        readonly token: "list_item_close";
+        readonly handler: (state: MarkdownParseState) => void;
+    }, {
+        readonly type: ParserRuleType.context;
+        readonly token: "bullet_list";
+        readonly context: "bullet_list";
+    }, {
+        readonly type: ParserRuleType.context;
+        readonly token: "ordered_list";
+        readonly context: "ordered_list";
+    }];
+    toMarkdown({ state, node, counter }: NodeSerializerOptions): void;
+}
+/**
+ * Wrap the giving command function so that it always returns `true`. This is
+ * useful when we want pressing `Tab` and `Shift-Tab` won't blur the editor even
+ * if the keybinding command returns `false`
+ *
+ * @public
+ */
+declare function alwaysTrue<T extends unknown[]>(func: (...args: T) => boolean): (...args: T) => boolean;
+declare function isOrderedListNode(node: ProsemirrorNode$1): boolean;
+
 type ExtensionsOptions = {
     disableAllBuildInShortcuts?: boolean;
     handleViewImgSrcUrl?: (src: string) => Promise<string>;
     imageHostingHandler?: (src: string) => Promise<string>;
-    imageCopyHandler?: (src: string) => Promise<string>;
+    imagePasteHandler?: (src: string) => Promise<string>;
     ai?: AIOptions;
     customCopyFunction?: CustomCopyFunction;
     overrideShortcutMap?: Record<string, string>;
+    clipboardReadFunction?: ClipboardReadFunction;
+    codemirrorOptions?: CodemirrorOptions;
+    uploadImageHandler?: (files: FileWithProgress$1[]) => DelayedImage$1[];
 };
 declare function extensions(options: ExtensionsOptions): any[];
 
@@ -495,6 +846,7 @@ declare const darkTheme: {
         contextMenuBgColorHover: string;
         slashMenuBorderColor: string;
         editorToolbarBgColor: string;
+        selectionMatchBgColor: string;
         lineHeightBase: string;
         titleBarHeight: string;
         titleBarControlBtnWidth: string;
@@ -562,6 +914,7 @@ declare const lightTheme: {
         contextMenuBgColorHover: string;
         slashMenuBorderColor: string;
         editorToolbarBgColor: string;
+        selectionMatchBgColor: string;
         lineHeightBase: string;
         titleBarHeight: string;
         titleBarControlBtnWidth: string;
@@ -615,5 +968,5 @@ type WysiwygToolbarProps = {
 };
 declare const WysiwygToolbar: FC<WysiwygToolbarProps>;
 
-export { CommandButton, CommandButtonIcon, Editor, extensions as EditorExtensions, EditorViewType, MfCodemirrorView, Preview, SourceCodeThemeWrapper, _default$1 as SourceEditor, ThemeProvider, _default as WysiwygEditor, WysiwygThemeWrapper, WysiwygToolbar, buildMarkdownParser, buildMarkdownSerializer, changeTheme, common, computeChange, createSourceCodeDelegate, createSourceCodeManager, createWysiwygDelegate, darkTheme, defaultStyleToken, extractMatches, getLanguageMap, lightTheme, loadLanguage, tableSelectorSize };
-export type { CommandButtonIconProps, CommandButtonProps, CreateCodemirrorOptions, CreateWysiwygDelegateOptions, DocToString, EditorChangeEventParams, EditorChangeHandler, EditorContext, EditorDelegate, EditorProps, EditorRef, EditorState, HTMLAstNode, Note, StringToDoc, WysiwygToolbarProps };
+export { CommandButton, CommandButtonIcon, Editor, extensions as EditorExtensions, EditorViewType, HtmlImageExtension, LineListExtension, MarkdownNodeExtension, MdImgUriExtension, MfCodemirrorView, Preview, SourceCodeThemeWrapper, _default$1 as SourceEditor, ThemeProvider, _default as WysiwygEditor, WysiwygThemeWrapper, WysiwygToolbar, alwaysTrue, buildMarkdownParser, buildMarkdownSerializer, changeTheme, common, computeChange, createSourceCodeDelegate, createSourceCodeManager, createWysiwygDelegate, darkTheme, defaultStyleToken, extractMatches, getLanguageMap, isImageFileType, isOrderedListNode, lightTheme, loadLanguage, tableSelectorSize, updateCodemirrorSearchQuery, updateCodemirrorSearchState };
+export type { CommandButtonIconProps, CommandButtonProps, CreateCodemirrorOptions, CreateWysiwygDelegateOptions, DelayedImage$1 as DelayedImage, DocToString, EditorChangeEventParams, EditorChangeHandler, EditorContext, EditorDelegate, EditorProps, EditorRef, EditorState, ExtensionsOptions, FileWithProgress$1 as FileWithProgress, HTMLAstNode, ImageAttributes, ImageExtensionAttributes, ImageOptions, Note, StringToDoc, WysiwygToolbarProps };