rme 0.3.0-beta.3 → 0.3.0-beta.30

package/dist/index.d.ts

@@ -6,19 +6,65 @@ 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;
@@ -44,6 +90,10 @@ type CreateCodemirrorOptions = {
          */
         customCopyFunction?: CustomCopyFunction;
     };
+    /**
+     * Command keymap options for customizing keyboard shortcuts
+     */
+    commandKeymapOptions?: CommandKeymapOptions;
 };
 declare class MfCodemirrorView {
     private readonly view;
@@ -231,6 +281,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 +312,10 @@ interface AIOptions {
     }) => Promise<string | null>;
 }
 
+type CodemirrorOptions = {
+    lineWrapping?: boolean;
+};
+
 type MarkdownItToken = string;
 declare enum ParserRuleType {
     text = 1,
@@ -381,14 +447,276 @@ 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;
+    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) => 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 +823,7 @@ declare const darkTheme: {
         contextMenuBgColorHover: string;
         slashMenuBorderColor: string;
         editorToolbarBgColor: string;
+        selectionMatchBgColor: string;
         lineHeightBase: string;
         titleBarHeight: string;
         titleBarControlBtnWidth: string;
@@ -562,6 +891,7 @@ declare const lightTheme: {
         contextMenuBgColorHover: string;
         slashMenuBorderColor: string;
         editorToolbarBgColor: string;
+        selectionMatchBgColor: string;
         lineHeightBase: string;
         titleBarHeight: string;
         titleBarControlBtnWidth: string;
@@ -615,5 +945,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 };
+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 };