@mdxeditor/editor/dist/index.d.ts

React component for rich text markdown editing

import { Config } from 'mdast-util-from-markdown/lib';
import { ContentEditable } from '@lexical/react/LexicalContentEditable.js';
import { DecoratorNode } from 'lexical';
import { default as default_2 } from 'react';
import { Directives } from 'mdast-util-directive';
import { DOMConversionMap } from 'lexical';
import { DOMExportOutput } from 'lexical';
import { EditorConfig } from 'lexical';
import { ElementNode } from 'lexical';
import { Extension } from 'micromark-util-types';
import { Extension as Extension_2 } from '@codemirror/state';
import { FC } from 'react';
import { HeadingTagType } from '@lexical/rich-text';
import { HistoryState } from '@lexical/history';
import { KlassConstructor } from 'lexical';
import { LexicalCommand } from 'lexical';
import { LexicalEditor } from 'lexical';
import { LexicalNode } from 'lexical';
import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin.js';
import { ListType } from '@lexical/list';
import * as Mdast from 'mdast';
import { MdxJsxAttribute } from 'mdast-util-mdx-jsx';
import { MdxJsxFlowElement } from 'mdast-util-mdx-jsx';
import { MdxJsxTextElement } from 'mdast-util-mdx-jsx';
import { Node as Node_2 } from 'unist';
import { NodeKey } from 'lexical';
import { NodeRef } from '@mdxeditor/gurx';
import { Options } from 'mdast-util-from-markdown';
import { Options as Options_2 } from 'mdast-util-to-markdown/lib/types';
import { ParseOptions } from 'micromark-util-types';
import * as RadixToolbar from '@radix-ui/react-toolbar';
import { RangeSelection } from 'lexical';
import { ReactNode } from 'react';
import { Realm } from '@mdxeditor/gurx';
import { RootNode } from 'lexical';
import { SandpackProvider } from '@codesandbox/sandpack-react';
import { SerializedElementNode } from 'lexical';
import { SerializedLexicalNode } from 'lexical';
import { Spread } from 'lexical';
import { TextFormatType } from 'lexical';
import { TextNode } from 'lexical';
import { Options as ToMarkdownOptions } from 'mdast-util-to-markdown';

/**
 * Creates a {@link CodeBlockNode}.
 * @param options - The code contents, the language  (i.e. js, jsx, etc.), and the additional meta data of the block.
 * @group Code Block
 */
export declare function $createCodeBlockNode(options: Partial<CreateCodeBlockNodeOptions>): CodeBlockNode;

/**
 * Creates an {@link DirectiveNode}. Use this instead of the constructor to follow the Lexical conventions.
 * @group Directive
 */
export declare function $createDirectiveNode(mdastNode: Directives, key?: NodeKey): DirectiveNode;

/**
 * Creates a new {@link GenericHTMLNode} with the specified MDAST HTML node as the object to edit.
 * @group HTML
 */
export declare function $createGenericHTMLNode(tag: KnownHTMLTagType, type: MdxNodeType, attributes: MdxJsxAttribute[]): GenericHTMLNode;

/**
 * Creates an {@link ImageNode}.
 * @param params - The image attributes.
 * @group Image
 */
export declare function $createImageNode(params: CreateImageNodeParameters): ImageNode;

/**
 * Creates a {@link TableNode}. Use this instead of the constructor to follow the Lexical conventions.
 * @param mdastNode - The mdast node to create the {@link TableNode} from.
 * @group Table
 */
export declare function $createTableNode(mdastNode: Mdast.Table): TableNode;

/**
 * Returns true if the given node is a {@link CodeBlockNode}.
 * @group Code Block
 */
export declare function $isCodeBlockNode(node: LexicalNode | null | undefined): node is CodeBlockNode;

/**
 * Retruns true if the node is an {@link DirectiveNode}.
 * @group Directive
 */
export declare function $isDirectiveNode(node: LexicalNode | null | undefined): node is DirectiveNode;

/**
 * Determines if the specified node is a {@link GenericHTMLNode}.
 * @group HTML
 */
export declare function $isGenericHTMLNode(node: LexicalNode | null | undefined): node is GenericHTMLNode;

/**
 * Retruns true if the node is an {@link ImageNode}.
 * @group Image
 */
export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;

/**
 * Retruns true if the given node is a {@link TableNode}.
 * @group Table
 */
export declare function $isTableNode(node: LexicalNode | null | undefined): node is TableNode;

/**
 * Holds a reference to the current Lexical editor instance - can be the root editor or a nested editor.
 * @group Core
 */
export declare const activeEditor$: NodeRef<LexicalEditor | null>;

/* Excluded from this release type: activeEditorSubscriptions$ */

/**
 * The names of the plugins that are currently active.
 * @group Core
 */
export declare const activePlugins$: NodeRef<string[]>;

/**
 * Add a plugin name to the list of active plugins.
 * @group Core
 */
export declare const addActivePlugin$: NodeRef<string | string[]>;

/**
 * Lets you add React components to the {@link https://lexical.dev/docs/react/plugins | Lexical Composer} element.
 * @group Core
 */
export declare const addComposerChild$: NodeRef<default_2.ComponentType<{}> | default_2.ComponentType<{}>[]>;

/**
 * Lets you add React components as wrappers around the editor.
 * @group Core
 */
export declare const addEditorWrapper$: NodeRef<default_2.ComponentType<{
    children: default_2.ReactNode;
}> | default_2.ComponentType<{
    children: default_2.ReactNode;
}>[]>;

/**
 * Adds an export visitor to be used when exporting markdown from the Lexical tree.
 * @group Markdown Processing
 */
export declare const addExportVisitor$: NodeRef< LexicalVisitor | LexicalVisitor[]>;

/**
 * Registers a visitor to be used when importing markdown.
 * @group Markdown Processing
 */
export declare const addImportVisitor$: NodeRef<MdastImportVisitor<Mdast.Nodes> | MdastImportVisitor<Mdast.Nodes>[]>;

/**
 * Registers a lexical node to be used in the editor.
 * @group Core
 */
export declare const addLexicalNode$: NodeRef< KlassConstructor<typeof LexicalNode> | KlassConstructor<typeof LexicalNode>[]>;

/**
 * Adds a mdast extension to the markdown parser.
 * @group Markdown Processing
 */
export declare const addMdastExtension$: NodeRef<Partial< Config> | Partial< Config>[] | (Partial< Config> | Partial< Config>[])[]>;

/**
 * Lets you add React components as children of any registered nested editor (useful for Lexical plugins).
 * @group Core
 */
export declare const addNestedEditorChild$: NodeRef<default_2.ComponentType<{}> | default_2.ComponentType<{}>[]>;

/**
 * Adds a syntax extension to the markdown parser.
 * @group Markdown Processing
 */
export declare const addSyntaxExtension$: NodeRef< Extension | Extension[]>;

/**
 * Adds a markdown to string extension to be used when exporting markdown from the Lexical tree.
 * @group Markdown Processing
 */
export declare const addToMarkdownExtension$: NodeRef< Options_2 | Options_2[]>;

/**
 * Lets you add React components on top of the editor (like the toolbar).
 * @group Core
 */
export declare const addTopAreaChild$: NodeRef<default_2.ComponentType<{}> | default_2.ComponentType<{}>[]>;

/* Excluded from this release type: ADMONITION_TYPES */

/**
 * Pass this descriptor to the `directivesPlugin` `directiveDescriptors` parameter to enable {@link https://docusaurus.io/docs/markdown-features/admonitions | markdown admonitions}.
 *
 * @example
 * ```tsx
 * <MDXEditor
 *  plugins={[
 *   directivesPlugin({ directiveDescriptors: [ AdmonitionDirectiveDescriptor] }),
 *  ]} />
 * ```
 * @group Directive
 */
export declare const AdmonitionDirectiveDescriptor: DirectiveDescriptor;

/* Excluded from this release type: AdmonitionKind */

export declare function admonitionLabelsMap(t: Translation): Record<(typeof ADMONITION_TYPES)[number], string>;

/**
 * @group Headings
 */
export declare const ALL_HEADING_LEVELS: readonly [1, 2, 3, 4, 5, 6];

/**
 * Holds the allowed heading levels.
 * @group Headings
 */
export declare const allowedHeadingLevels$: NodeRef<readonly HEADING_LEVEL[]>;

/**
 * returns a function which when called always returns the passed value
 * @group Utils
 */
export declare function always<T>(value: T): () => T;

/**
 * A signal that appends a code block editor descriptor to the list of descriptors.
 * @group Code Block
 */
export declare const appendCodeBlockEditorDescriptor$: NodeRef<CodeBlockEditorDescriptor | CodeBlockEditorDescriptor[]>;

/* Excluded from this release type: Appender */

/**
 * Allows you to change the block type of the current selection.
 * @group Core
 */
export declare const applyBlockType$: NodeRef<BlockType>;

/**
 * Applies the published format to the current selection.
 * @group Core
 */
export declare const applyFormat$: NodeRef<TextFormatType>;

/**
 * A signal that confirms the updated values of the current link.
 * @group Link Dialog
 */
export declare const applyLinkChanges$: NodeRef<void>;

/**
 * Converts the current selection to the specified list type.
 * @group Lists
 */
export declare const applyListType$: NodeRef<"" | ListType>;

/* Excluded from this release type: autoFocus$ */

declare interface BaseImageParameters {
    altText?: string;
    title?: string;
}

/**
 * The type of the block that the current selection is in.
 * @group Core
 */
export declare type BlockType = 'paragraph' | 'quote' | HeadingTagType | '';

/**
 * A toolbar component that allows the user to change the block type of the current selection.
 * Supports paragraphs, headings and block quotes.
 * @group Toolbar Components
 */
export declare const BlockTypeSelect: () => default_2.JSX.Element | null;

/**
 * A toolbar component that lets the user toggle bold, italic and underline formatting.
 * @group Toolbar Components
 */
export declare const BoldItalicUnderlineToggles: default_2.FC<BoldItalicUnderlineTogglesProps>;

export declare interface BoldItalicUnderlineTogglesProps {
    options?: ('Bold' | 'Italic' | 'Underline')[];
}

/**
 * A toolbar button primitive.
 * @group Toolbar Primitives
 */
export declare const Button: default_2.ForwardRefExoticComponent<Omit<RadixToolbar.ToolbarButtonProps & default_2.RefAttributes<HTMLButtonElement>, "ref"> & default_2.RefAttributes<object>>;

/**
 * Use this primitive to create a toolbar button that can be either a button or a dropdown, depending on the number of items passed.
 * @group Toolbar Primitives
 */
export declare const ButtonOrDropdownButton: <T extends string>(props: {
    /**
     * The contents of the button - usually an icon.
     */
    children: default_2.ReactNode;
    /**
     * The title used for the tooltip.
     */
    title: string;
    /**
     * The function to execute when the button is clicked or an item is chosen from the dropdown.
     * If there is only one item in the dropdown, the value will be an empty string.
     */
    onChoose: (value: T) => void;
    /**
     * The items to show in the dropdown.
     */
    items: {
        /**
         * The value to pass to the `onChoose` function when this item is chosen.
         */
        value: T;
        /**
         * The label to show in the dropdown.
         */
        label: string | JSX.Element;
    }[];
}) => default_2.JSX.Element;

/**
 * A toolbar button with tooltip primitive.
 * @group Toolbar Primitives
 */
export declare const ButtonWithTooltip: ({ title, children, ...props }: Omit<RadixToolbar.ToolbarButtonProps & default_2.RefAttributes<HTMLButtonElement>, "ref"> & default_2.RefAttributes<object> & {
    title: string;
}) => default_2.JSX.Element;

/**
 * Calls the passed function.
 * @group Utils
 */
export declare function call(proc: () => unknown): void;

/* Excluded from this release type: CAN_USE_DOM */

/**
 * An action that cancel the edit of the current link.
 * @group Link Dialog
 */
export declare const cancelLinkEdit$: NodeRef<void>;

/**
 * A component that allows the user to change the admonition type of the current selection.
 * For this component to work, you must pass the {@link AdmonitionDirectiveDescriptor} to the `directivesPlugin` `directiveDescriptors` parameter.
 * @group Toolbar Components
 */
export declare const ChangeAdmonitionType: () => default_2.JSX.Element;

/**
 * A component that allows the user to change the code block language of the current selection.
 * For this component to work, you must enable the `codeMirrorPlugin` for the editor.
 * See {@link ConditionalContents} for an example on how to display the dropdown only when a code block is in focus.
 * @group Toolbar Components
 */
export declare const ChangeCodeMirrorLanguage: () => default_2.JSX.Element;

export declare type ClickLinkCallback = (url: string) => void;

/**
 * Close the image dialog.
 * @group Image
 */
export declare const closeImageDialog$: NodeRef<void>;

/* Excluded from this release type: cmExtensions$ */

/**
 * A set of functions that modify the underlying code block node.
 * Access this with the {@link useCodeBlockEditorContext} hook in your custom code editor components.
 * @group Code Block
 */
export declare interface CodeBlockEditorContextValue {
    /**
     * Updates the code contents of the code block.
     */
    setCode: (code: string) => void;
    /**
     * Updates the language of the code block. See {@link https://www.markdownguide.org/extended-syntax/#syntax-highlighting} for language examples.
     *
     */
    setLanguage: (language: string) => void;
    /**
     * Updates the meta of the code block. The meta is the additional string that comes after the code block language.
     */
    setMeta: (meta: string) => void;
    /**
     * The Lexical node that's being edited.
     */
    lexicalNode: CodeBlockNode;
    /**
     * The parent Lexical editor.
     */
    parentEditor: LexicalEditor;
}

/**
 * Implement this interface to create a custom code block editor.
 * Pass the object in the {@link codeBlockPlugin} parameters.
 * @group Code Block
 */
export declare interface CodeBlockEditorDescriptor {
    /**
     * The priority of the descriptor when descriptors are matched against a given code block. Lower number means lower priority.
     * This allows you to implement a catch-all generic editor and a more specific editor for a given language / meta.
     */
    priority: number;
    /**
     * A function that returns true if the descriptor's editor should be used for the given code block.
     * @param language - The language of the code block.
     * @param meta - The meta of the code block.
     */
    match: (language: string | null | undefined, meta: string | null | undefined) => boolean;
    /**
     * The React component to be used. See {@link CodeBlockEditorProps} for the props passed to the component.
     */
    Editor: React.ComponentType<CodeBlockEditorProps>;
}

/**
 * Contains the currently registered code block descriptors.
 * @group Code Block
 */
export declare const codeBlockEditorDescriptors$: NodeRef<CodeBlockEditorDescriptor[]>;

/**
 * The properties passed to the {@link CodeBlockEditorDescriptor.Editor} component.
 * @group Code Block
 */
export declare interface CodeBlockEditorProps {
    /**
     * The code to edit.
     */
    code: string;
    /**
     * The language of the fenced code block.
     */
    language: string;
    /**
     * The meta of the fenced code block.
     */
    meta: string;
    /**
     * The key of the Lexical node - use this if you are dealing with the Lexical APIs.
     */
    nodeKey: string;
    /**
     * An emitter that will execute its subscription when the editor should be focused.
     * Note: you don't need to unsubscribe, the emiter has a single subscription model.
     */
    focusEmitter: VoidEmitter;
}

/**
 * The codemirror code block languages.
 * @group CodeMirror
 */
export declare const codeBlockLanguages$: NodeRef<{
    js: string;
    ts: string;
    tsx: string;
    jsx: string;
    css: string;
}>;

/**
 * A lexical node that represents a fenced code block. Use {@link "$createCodeBlockNode"} to construct one.
 * @group Code Block
 */
export declare class CodeBlockNode extends DecoratorNode<JSX.Element> {
    __code: string;
    __meta: string;
    __language: string;
    __focusEmitter: {
        publish: () => void;
        subscribe: (cb: () => void) => void;
    };
    static getType(): string;
    static clone(node: CodeBlockNode): CodeBlockNode;
    static importJSON(serializedNode: SerializedCodeBlockNode): CodeBlockNode;
    constructor(code: string, language: string, meta: string, key?: NodeKey);
    exportJSON(): SerializedCodeBlockNode;
    createDOM(_config: EditorConfig): HTMLDivElement;
    updateDOM(): false;
    getCode(): string;
    getMeta(): string;
    getLanguage(): string;
    setCode: (code: string) => void;
    setMeta: (meta: string) => void;
    setLanguage: (language: string) => void;
    select: () => void;
    decorate(editor: LexicalEditor): JSX.Element;
    isInline(): boolean;
}

/**
 * A plugin that adds support for code blocks and custom code block editors.
 * @group Code Block
 */
export declare const codeBlockPlugin: (params?: {
    /**
     * Pass an array of {@link CodeBlockEditorDescriptor} to register custom code block editors.
     */
    codeBlockEditorDescriptors?: CodeBlockEditorDescriptor[] | undefined;
    /**
     * The default language to use when creating a new code block if no language is passed.
     */
    defaultCodeBlockLanguage?: string | undefined;
} | undefined) => RealmPlugin;

/**
 * Whether or not to try to dynamically load the code block language support.
 * Disable if you want to manually pass the supported languages.
 * @group CodeMirror
 */
export declare const codeMirrorAutoLoadLanguageSupport$: NodeRef<boolean>;

export declare const CodeMirrorEditor: ({ language, nodeKey, code, focusEmitter }: CodeBlockEditorProps) => default_2.JSX.Element;

/**
 * The code mirror extensions for the coemirror code block editor.
 * @group CodeMirror
 */
export declare const codeMirrorExtensions$: NodeRef<Extension_2[]>;

/**
 * A plugin that adds lets users edit code blocks with CodeMirror.
 * @group CodeMirror
 */
export declare const codeMirrorPlugin: (params?: {
    codeBlockLanguages: Record<string, string>;
    /**
     * Optional, additional CodeMirror extensions to load in the diff/source mode.
     */
    codeMirrorExtensions?: Extension_2[] | undefined;
    /**
     * Whether or not to try to dynamically load the code block language support.
     * Disable if you want to manually pass the supported languages.
     * @group CodeMirror
     */
    autoLoadLanguageSupport?: boolean | undefined;
} | undefined) => RealmPlugin;

/**
 * A toolbar component that lets the user toggle code formatting.
 * Use for inline `code` elements (like variables, methods, etc).
 * @group Toolbar Components
 */
export declare const CodeToggle: default_2.FC;

export declare const COMMON_STATE_CONFIG_EXTENSIONS: Extension_2[];

/**
 * Performs left to right composition of two functions.
 * @group Utils
 */
export declare function compose<I, A, R>(a: (arg: A) => R, b: (arg: I) => A): (arg: I) => R;

/* Excluded from this release type: composerChildren$ */

/**
 * A toolbar primitive that allows you to show different contents based on the editor that is in focus.
 * Useful for code editors that have different features and don't support rich text formatting.
 * @example
 * ```tsx
 *    <ConditionalContents
 *      options={[
 *        { when: (editor) => editor?.editorType === 'codeblock', contents: () => <ChangeCodeMirrorLanguage /> },
 *        { when: (editor) => editor?.editorType === 'sandpack', contents: () => <ShowSandpackInfo /> },
 *        {
 *          fallback: () => (
 *            <>
 *              <UndoRedo />
 *              <BoldItalicUnderlineToggles />
 *              <InsertCodeBlock />
 *            </>
 *          )
 *        }
 *      ]}
 *    />
 * ```
 * @group Toolbar Primitives
 */
export declare const ConditionalContents: default_2.FC<{
    /**
     * A set of options that define the contents to show based on the editor that is in focus.
     * Can be either a {@link ConditionalContentsOption} or a {@link FallbackOption}.
     * See the {@link ConditionalContents} documentation for an example.
     */
    options: (ConditionalContentsOption | FallbackOption)[];
}>;

/**
 * An object that describes a possible option to be displayed in the {@link ConditionalContents} component.
 * @group Toolbar Primitives
 */
export declare interface ConditionalContentsOption {
    /**
     * A function that returns `true` if the option should be displayed for the current editor in focus.
     */
    when: (rootNode: EditorInFocus | null) => boolean;
    /**
     * The contents to display if the `when` function returns `true`.
     */
    contents: () => default_2.ReactNode;
}

/**
 * Holds the CSS class name of the content editable element.
 * @group Core
 */
export declare const contentEditableClassName$: NodeRef<string>;

/**
 * Returns true if the user is pressing the control key on Windows or the meta key on Mac.
 * @group Utils
 */
export declare function controlOrMeta(metaKey: boolean, ctrlKey: boolean): boolean;

/**
 * Converts the current selection to a node created by the published factory.
 * @group Core
 */
export declare const convertSelectionToNode$: NodeRef<() => ElementNode>;

declare type CoordinatesSubscription = (coords: [colIndex: number, rowIndex: number]) => void;

/* Excluded from this release type: corePlugin */

/**
 * An input signal that lets you register a new {@link EditorSubscription} for the active editor.
 * The subscriptions are automatically cleaned up and re-bound when the active editor changes.
 * @example
 * ```tsx
 * realm.pub(createActiveEditorSubscription$, (theEditor) => {
 *  return theEditor.registerUpdateListener(() => { ... })
 *  // or a command
 *  // return theEditor.registerCommand('my-command', () => { ... })
 * })
 * ```
 * @group Core
 */
export declare const createActiveEditorSubscription$: NodeRef<EditorSubscription | EditorSubscription[]>;

/**
 * The options necessary to construct a new code block node.
 * @group Code Block
 */
export declare interface CreateCodeBlockNodeOptions {
    /**
     * The code contents of the block.
     */
    code: string;
    /**
     * The language of the code block (i.e. `js`, `jsx`, etc.). This is used for syntax highlighting.
     */
    language: string;
    /**
     * The additional meta data of the block.
     */
    meta: string;
}

/**
 * The parameters used to create an {@link ImageNode} through {@link $createImageNode}.
 * @group Image
 */
export declare interface CreateImageNodeParameters {
    altText: string;
    width?: number;
    height?: number;
    title?: string;
    key?: NodeKey;
    src: string;
}

/**
 * A toolbar component that opens the link edit dialog.
 * For this component to work, you must include the `linkDialogPlugin`.
 * @group Toolbar Components
 */
export declare const CreateLink: () => default_2.JSX.Element;

/**
 * An input signal that lets you register a new {@link EditorSubscription} for the root editor.
 * @example
 * ```tsx
 * realm.pub(createRootEditorSubscription$, (theEditor) => {
 *  return theEditor.registerUpdateListener(() => { ... })
 *  // or a command
 *  // return theEditor.registerCommand('my-command', () => { ... })
 * })
 * ```
 * @group Core
 */
export declare const createRootEditorSubscription$: NodeRef<EditorSubscription | EditorSubscription[]>;

/**
 * Holds the current block type of the selection (i.e. Heading, Paragraph, etc).
 * @group Core
 */
export declare const currentBlockType$: NodeRef<BlockType>;

/**
 * Holds the current format of the selection.
 * @group Core
 */
export declare const currentFormat$: NodeRef<FORMAT>;

/**
 * The current list type in the editor.
 * @group Lists
 */
export declare const currentListType$: NodeRef<"" | ListType>;

/**
 * Holds the current selection.
 * @group Core
 */
export declare const currentSelection$: NodeRef<RangeSelection | null>;

/**
 * Takes a 1 argument function and returns a function which when called, executes it with the provided argument.
 * @group Utils
 */
export declare function curry1to0<T, R>(proc: (arg: T) => R, arg: T): () => R;

/**
 * Takes a 2 argument function and partially applies the first argument.
 * @group Utils
 */
export declare function curry2to1<T, K, R>(proc: (arg1: T, arg2: K) => R, arg1: T): (arg2: K) => R;

export declare const DEFAULT_FORMAT: 0;

/**
 * Contains the default language to use when creating a new code block if no language is passed.
 * @group Code Block
 */
export declare const defaultCodeBlockLanguage$: NodeRef<string>;

export declare const defaultSvgIcons: {
    undo: default_2.JSX.Element;
    redo: default_2.JSX.Element;
    format_bold: default_2.JSX.Element;
    format_italic: default_2.JSX.Element;
    format_underlined: default_2.JSX.Element;
    code: default_2.JSX.Element;
    strikeThrough: default_2.JSX.Element;
    superscript: default_2.JSX.Element;
    subscript: default_2.JSX.Element;
    format_list_bulleted: default_2.JSX.Element;
    format_list_numbered: default_2.JSX.Element;
    format_list_checked: default_2.JSX.Element;
    link: default_2.JSX.Element;
    add_photo: default_2.JSX.Element;
    table: default_2.JSX.Element;
    horizontal_rule: default_2.JSX.Element;
    frontmatter: default_2.JSX.Element;
    frame_source: default_2.JSX.Element;
    arrow_drop_down: default_2.JSX.Element;
    admonition: default_2.JSX.Element;
    sandpack: default_2.JSX.Element;
    rich_text: default_2.JSX.Element;
    difference: default_2.JSX.Element;
    markdown: default_2.JSX.Element;
    open_in_new: default_2.JSX.Element;
    link_off: default_2.JSX.Element;
    edit: default_2.JSX.Element;
    content_copy: default_2.JSX.Element;
    more_horiz: default_2.JSX.Element;
    more_vert: default_2.JSX.Element;
    close: default_2.JSX.Element;
    settings: default_2.JSX.Element;
    delete_big: default_2.JSX.Element;
    delete_small: default_2.JSX.Element;
    format_align_center: default_2.JSX.Element;
    format_align_left: default_2.JSX.Element;
    format_align_right: default_2.JSX.Element;
    add_row: default_2.JSX.Element;
    add_column: default_2.JSX.Element;
    insert_col_left: default_2.JSX.Element;
    insert_row_above: default_2.JSX.Element;
    insert_row_below: default_2.JSX.Element;
    insert_col_right: default_2.JSX.Element;
    check: default_2.JSX.Element;
};

/**
 * The registered descriptors for composite nodes (jsx, directives, code blocks).
 */
export declare interface Descriptors {
    jsxComponentDescriptors: JsxComponentDescriptor[];
    directiveDescriptors: DirectiveDescriptor[];
    codeBlockEditorDescriptors: CodeBlockEditorDescriptor[];
}

/**
 * Use this primitive to create a toolbar button that opens a dialog with a text input, autocomplete suggestions, and a submit button.
 * @group Toolbar Primitives
 */
export declare const DialogButton: default_2.ForwardRefExoticComponent<{
    /**
     * The autocomplete suggestions to show in the dialog input.
     */
    autocompleteSuggestions?: string[] | undefined;
    /**
     * The callback to call when the dialog is submitted. The callback receives the value of the text input as a parameter.
     */
    onSubmit: (value: string) => void;
    /**
     * The title to show in the tooltip of the toolbar button.
     */
    tooltipTitle: string;
    /**
     * The contents of the button. Usually an icon.
     * @example
     * ```tsx
     * <DialogButton buttonContent={<CustomIcon />} />
     * ```
     */
    buttonContent?: default_2.ReactNode;
    /**
     * The placeholder text to show in the dialog input.
     */
    dialogInputPlaceholder: string;
    /**
     * The title of the submit button.
     */
    submitButtonTitle: string;
} & default_2.RefAttributes<HTMLButtonElement>>;

/* Excluded from this release type: diffMarkdown$ */

/**
 * @group Diff/Source
 */
export declare const diffSourcePlugin: (params?: {
    /**
     * The initial view mode of the editor.
     * @default 'rich-text'
     */
    viewMode?: ViewMode | undefined;
    /**
     * The markdown to show in the diff editor.
     * @default ''
     */
    diffMarkdown?: string | undefined;
    /**
     * Optional, additional CodeMirror extensions to load in the diff/source mode.
     */
    codeMirrorExtensions?: Extension_2[] | undefined;
    /**
     * Set the diff editor to read-only.
     * @default false
     */
    readOnlyDiff?: boolean | undefined;
} | undefined) => RealmPlugin;

/**
 * A wrapper element for the toolbar contents that lets the user toggle between rich text, diff and source mode.
 * Put the rich text toolbar contents as children of this component.
 * For this component to work, you must include the `diffSourcePlugin`.
 *
 * @example
 * ```tsx
 *  <MDXEditor markdown='Hello world'
 *    plugins={[toolbarPlugin({
 *      toolbarContents: () => ( <> <DiffSourceToggleWrapper><UndoRedo /><BoldItalicUnderlineToggles /></DiffSourceToggleWrapper></>)
 *    }), diffSourcePlugin()]}
 *  />
 * ```
 *
 * @group Toolbar Components
 */
export declare const DiffSourceToggleWrapper: default_2.FC<{
    children: default_2.ReactNode;
    options?: ViewMode[];
}>;

/**
 * Implement this interface to create a custom editor for markdown directives.
 * Pass the object in the `directivesPlugin` parameters.
 * @group Directive
 */
export declare interface DirectiveDescriptor<T extends Directives = Directives> {
    /**
     * Whether the descriptor's Editor should be used for the given node.
     * @param node - The directive mdast node. You can code your logic against the node's name, type, attributes, children, etc.
     */
    testNode(node: Directives): boolean;
    /**
     * The name of the descriptor - use this if you're building UI for the user to select a directive.
     */
    name: string;
    /**
     * The attributes that the directive has. This can be used when building the UI for the user to configure a directive. The {@link GenericDirectiveEditor} uses those to display a property form.
     */
    attributes: string[];
    /**
     * Whether or not the directive has inner markdown content as children. Used by the {@link GenericDirectiveEditor} to determine whether to show the inner markdown editor.
     */
    hasChildren: boolean;
    /**
     * The type of the supported directive. Can be one of: 'leafDirective' | 'containerDirective' | 'textDirective'.
     */
    type?: 'leafDirective' | 'containerDirective' | 'textDirective';
    /**
     * The React component to be used as an Editor. See {@link DirectiveEditorProps} for the props passed to the component.
     */
    Editor: React.ComponentType<DirectiveEditorProps<T>>;
}

/**
 * Contains the currently registered Markdown directive descriptors.
 * @group Directive
 */
export declare const directiveDescriptors$: NodeRef<DirectiveDescriptor< Directives>[]>;

/**
 * The properties passed to the {@link DirectiveDescriptor.Editor} component.
 * @group Directive
 */
export declare interface DirectiveEditorProps<T extends Directives = Directives> {
    /**
     * The mdast directive node.
     */
    mdastNode: T;
    /**
     * The parent lexical editor - use this if you are dealing with the Lexical APIs.
     */
    parentEditor: LexicalEditor;
    /**
     * The Lexical directive node.
     */
    lexicalNode: DirectiveNode;
    /**
     * The descriptor that activated the editor
     */
    descriptor: DirectiveDescriptor;
}

/**
 * A lexical node that represents an image. Use {@link "$createDirectiveNode"} to construct one.
 * @group Directive
 */
export declare class DirectiveNode extends DecoratorNode<default_2.JSX.Element> {
    /* Excluded from this release type: __mdastNode */
    /* Excluded from this release type: __focusEmitter */
    /* Excluded from this release type: getType */
    /* Excluded from this release type: clone */
    /* Excluded from this release type: importJSON */
    /**
     * Constructs a new {@link DirectiveNode} with the specified MDAST directive node as the object to edit.
     */
    constructor(mdastNode: Directives, key?: NodeKey);
    /**
     * Returns the MDAST node that is being edited.
     */
    getMdastNode(): Directives;
    /* Excluded from this release type: exportJSON */
    /* Excluded from this release type: createDOM */
    /* Excluded from this release type: updateDOM */
    /**
     * Sets a new MDAST node to edit.
     */
    setMdastNode(mdastNode: Directives): void;
    /**
     * Focuses the direcitive editor.
     */
    select: () => void;
    /* Excluded from this release type: decorate */
    /* Excluded from this release type: isInline */
    /* Excluded from this release type: isKeyboardSelectable */
}

/**
 * A plugin that adds support for markdown directives.
 * @group Directive
 */
export declare const directivesPlugin: (params?: {
    /**
     * Use this to register your custom directive editors. You can also use the built-in {@link GenericDirectiveEditor}.
     */
    directiveDescriptors: DirectiveDescriptor<any>[];
} | undefined) => RealmPlugin;

/**
 * Holds whether the auto-linking of URLs and email addresses is disabled.
 * @group Links
 */
export declare const disableAutoLink$: NodeRef<boolean>;

/**
 * Holds the disable image resize configuration flag.
 * @group Image
 */
export declare const disableImageResize$: NodeRef<boolean>;

export declare const disableImageSettingsButton$: NodeRef<boolean>;

/**
 * The state of the image dialog when it is in editing an existing node.
 * @group Image
 */
export declare interface EditingImageDialogState {
    type: 'editing';
    nodeKey: string;
    initialValues: Omit<SaveImageParameters, 'file'>;
}

/**
 * The state of the link dialog when it is in edit mode.
 * @group Link Dialog
 */
export declare interface EditLinkDialog {
    type: 'edit';
    initialUrl: string;
    initialTitle?: string;
    url: string;
    title: string;
    linkNodeKey: string;
    rectangle: RectData;
}

/**
 * The currently focused editor
 * @group Core
 */
export declare const editorInFocus$: NodeRef<EditorInFocus | null>;

/**
 * The type of the editor being edited currently. Custom editors can override this, so that the toolbar can change its contents.
 * @group Core
 */
export declare interface EditorInFocus {
    editorType: string;
    rootNode: LexicalNode | null;
}

/**
 * A reference to a DOM element. used for the various popups, dialogs, and tooltips
 * @group Core
 */
export declare const editorRootElementRef$: NodeRef<default_2.RefObject<HTMLDivElement> | null>;

/**
 * A function that subscribes to Lexical editor updates or events, and retursns an unsubscribe function.
 * @group Core
 */
export declare type EditorSubscription = (activeEditor: LexicalEditor) => () => void;

/* Excluded from this release type: editorWrappers$ */

/* Excluded from this release type: ExportLexicalTreeOptions */

/* Excluded from this release type: exportLexicalTreeToMdast */

/* Excluded from this release type: exportMarkdownFromLexical */

/* Excluded from this release type: ExportMarkdownFromLexicalOptions */

/**
 * Contains the currently registered export vistors.
 * @group Core
 */
export declare const exportVisitors$: NodeRef< LexicalVisitor[]>;

/**
 * @group JSX
 */
export declare interface ExpressionValue {
    type: 'expression';
    value: string;
}

/**
 * A default option to be displayed in the {@link ConditionalContents} component if none of the other options match.
 * @group Toolbar Primitives
 */
export declare interface FallbackOption {
    /**
     * The contents to display
     */
    fallback: () => default_2.ReactNode;
}

/**
 * @group Image
 */
export declare interface FileImageParameters extends BaseImageParameters {
    file: File;
}

export declare type FORMAT = typeof DEFAULT_FORMAT | typeof IS_BOLD | typeof IS_ITALIC | typeof IS_STRIKETHROUGH | typeof IS_UNDERLINE | typeof IS_CODE | typeof IS_SUBSCRIPT | typeof IS_SUPERSCRIPT | typeof IS_HIGHLIGHT;

/**
 * Fetches a value from the Lexical editor read cycle.
 * @group Utils
 */
export declare function fromWithinEditorRead<T>(editor: LexicalEditor, fn: () => T): T;

/**
 * Whether the frontmatter dialog is open.
 * @group Frontmatter
 */
export declare const frontmatterDialogOpen$: NodeRef<boolean>;

/**
 * A plugin that adds support for frontmatter.
 * @group Frontmatter
 */
export declare const frontmatterPlugin: (params?: unknown) => RealmPlugin;

/**
 * A generic editor that can be used as an universal UI for any directive.
 * Allows editing of the directive content and properties.
 * Use this editor for the {@link DirectiveDescriptor} Editor option.
 * @group Directive
 */
export declare const GenericDirectiveEditor: default_2.FC<DirectiveEditorProps>;

/**
 * A Lexical node that represents a generic HTML element. Use {@link $createGenericHTMLNode} to construct one.
 * The generic HTML node is used as a "fallback" for HTML elements that are not explicitly supported by the editor.
 * @group HTML
 */
export declare class GenericHTMLNode extends ElementNode {
    /* Excluded from this release type: __tag */
    /* Excluded from this release type: __nodeType */
    /* Excluded from this release type: __attributes */
    /* Excluded from this release type: getType */
    /* Excluded from this release type: clone */
    /**
     * Constructs a new {@link GenericHTMLNode} with the specified MDAST HTML node as the object to edit.
     */
    constructor(tag: KnownHTMLTagType, type: MdxNodeType, attributes: MdxJsxAttribute[], key?: NodeKey);
    getTag(): KnownHTMLTagType;
    getNodeType(): MdxNodeType;
    getAttributes(): MdxJsxAttribute[];
    updateAttributes(attributes: MdxJsxAttribute[]): void;
    getStyle(): string;
    createDOM(): HTMLElement;
    updateDOM(): boolean;
    static importDOM(): DOMConversionMap | null;
    exportDOM(editor: LexicalEditor): DOMExportOutput;
    static importJSON(serializedNode: SerializedGenericHTMLNode): GenericHTMLNode;
    exportJSON(): SerializedGenericHTMLNode;
    extractWithChild(): boolean;
    isInline(): boolean;
}

/**
 * A generic editor that can be used as an universal UI for any JSX element.
 * Allows editing of the element content and properties.
 * Use this editor for the {@link JsxComponentDescriptor} Editor option.
 * @group JSX
 */
export declare const GenericJsxEditor: default_2.FC<JsxEditorProps>;

/**
 * Gets the selected node from the Lexical editor.
 * @group Utils
 */
export declare function getSelectedNode(selection: RangeSelection): TextNode | ElementNode | null;

/**
 * Gets the coordinates of the selection in the Lexical editor.
 * @group Utils
 */
export declare function getSelectionRectangle(editor: LexicalEditor): {
    top: number;
    left: number;
    width: number;
    height: number;
} | null;

/* Excluded from this release type: getStateAsMarkdown */

/**
 * Whether the markdown document has a frontmatter node.
 * @group Frontmatter
 */
export declare const hasFrontmatter$: NodeRef<boolean>;

/**
 * @group Headings
 */
export declare type HEADING_LEVEL = 1 | 2 | 3 | 4 | 5 | 6;

/**
 * A plugin that adds support for markdown headings.
 * @group Headings
 */
export declare const headingsPlugin: (params?: {
    /**
     * Allows you to limit the headings used in the editor. Affects the block type dropdown and the keyboard shortcuts.
     * @default [1, 2, 3, 4, 5, 6]
     */
    allowedHeadingLevels?: readonly HEADING_LEVEL[] | undefined;
} | undefined) => RealmPlugin;

/* Excluded from this release type: historyState$ */

/**
 * All the HTML tags supported by the generic html node.
 * @group HTML
 */
export declare const htmlTags: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr"];

/**
 * A callback that returns the icon component for the given name.
 * @group Core
 */
export declare const iconComponentFor$: NodeRef<(name: IconKey) => default_2.ReactNode>;

export declare type IconKey = 'undo' | 'redo' | 'format_bold' | 'format_italic' | 'format_underlined' | 'code' | 'strikeThrough' | 'superscript' | 'subscript' | 'format_list_bulleted' | 'format_list_numbered' | 'format_list_checked' | 'link' | 'add_photo' | 'table' | 'horizontal_rule' | 'frontmatter' | 'frame_source' | 'arrow_drop_down' | 'admonition' | 'sandpack' | 'rich_text' | 'difference' | 'markdown' | 'open_in_new' | 'link_off' | 'edit' | 'content_copy' | 'more_horiz' | 'more_vert' | 'close' | 'settings' | 'delete_big' | 'delete_small' | 'format_align_center' | 'format_align_left' | 'format_align_right' | 'add_row' | 'add_column' | 'insert_col_left' | 'insert_row_above' | 'insert_row_below' | 'insert_col_right' | 'check';

/**
 * Holds the autocomplete suggestions for image sources.
 * @group Image
 */
export declare const imageAutocompleteSuggestions$: NodeRef<string[]>;

/**
 * Holds the current state of the image dialog.
 * @group Image
 */
export declare const imageDialogState$: NodeRef<InactiveImageDialogState | NewImageDialogState | EditingImageDialogState>;

/**
 * A lexical node that represents an image. Use {@link "$createImageNode"} to construct one.
 * @group Image
 */
export declare class ImageNode extends DecoratorNode<JSX.Element> {
    /* Excluded from this release type: __src */
    /* Excluded from this release type: __altText */
    /* Excluded from this release type: __title */
    /* Excluded from this release type: __width */
    /* Excluded from this release type: __height */
    /* Excluded from this release type: getType */
    /* Excluded from this release type: clone */
    /* Excluded from this release type: importJSON */
    /* Excluded from this release type: exportDOM */
    /* Excluded from this release type: importDOM */
    /**
     * Constructs a new {@link ImageNode} with the specified image parameters.
     * Use {@link $createImageNode} to construct one.
     */
    constructor(src: string, altText: string, title: string | undefined, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
    /* Excluded from this release type: exportJSON */
    /**
     * Sets the image dimensions
     */
    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
    /* Excluded from this release type: createDOM */
    /* Excluded from this release type: updateDOM */
    getSrc(): string;
    getAltText(): string;
    getTitle(): string | undefined;
    getHeight(): 'inherit' | number;
    getWidth(): 'inherit' | number;
    setTitle(title: string | undefined): void;
    setSrc(src: string): void;
    setAltText(altText: string | undefined): void;
    /* Excluded from this release type: hasExplicitDimensions */
    /* Excluded from this release type: decorate */
}

/**
 * A plugin that adds support for images.
 * @group Image
 */
export declare const imagePlugin: (params?: {
    imageUploadHandler?: ImageUploadHandler | undefined;
    imageAutocompleteSuggestions?: string[] | undefined;
    disableImageResize?: boolean | undefined;
    disableImageSettingsButton?: boolean | undefined;
    imagePreviewHandler?: ImagePreviewHandler | undefined;
    ImageDialog?: FC<{}> | (() => JSX.Element) | undefined;
} | undefined) => RealmPlugin;

/**
 * Holds the image preview handler callback.
 * @group Image
 */
export declare const imagePreviewHandler$: NodeRef<ImagePreviewHandler>;

/**
 * @group Image
 */
export declare type ImagePreviewHandler = ((imageSource: string) => Promise<string>) | null;

/**
 * Holds the image upload handler callback.
 * @group Image
 */
export declare const imageUploadHandler$: NodeRef<ImageUploadHandler>;

/**
 * @group Image
 */
export declare type ImageUploadHandler = ((image: File) => Promise<string>) | null;

/* Excluded from this release type: importMarkdownToLexical */

/* Excluded from this release type: importMdastTreeToLexical */

export declare interface ImportPoint {
    append(node: LexicalNode): void;
    getType(): string;
}

/**
 * Contains the currently registered import vistors.
 * @group Core
 */
export declare const importVisitors$: NodeRef<MdastImportVisitor<Mdast.Nodes>[]>;

/**
 * The state of the image dialog when it is inactive.
 * @group Image
 */
export declare interface InactiveImageDialogState {
    type: 'inactive';
}

/**
 * The state of the link dialog when it is inactive.
 * @group Link Dialog
 */
export declare interface InactiveLinkDialog {
    type: 'inactive';
    rectangle?: undefined;
    linkNodeKey?: undefined;
}

/**
 * Holds whether the editor is in focus or not.
 * @group Core
 */
export declare const inFocus$: NodeRef<boolean>;

/* Excluded from this release type: initialMarkdown$ */

/* Excluded from this release type: INSERT_IMAGE_COMMAND */

/**
 * A toolbar dropdown button that allows the user to insert admonitions.
 * For this to work, you need to have the `directives` plugin enabled with the {@link AdmonitionDirectiveDescriptor} configured.
 *
 * @group Toolbar Components
 */
export declare const InsertAdmonition: () => default_2.JSX.Element;

/**
 * A signal that inserts a new code block into the editor with the published options.
 * @group Code Block
 */
export declare const insertCodeBlock$: NodeRef<Partial<CreateCodeBlockNodeOptions>>;

/**
 * A toolbar button that allows the user to insert a fenced code block.
 * Once the code block is focused, you can construct a special code block toolbar for it, using the {@link ConditionalContents} primitive.
 * See the {@link ConditionalContents} documentation for an example.
 *
 * @group Toolbar Components
 */
export declare const InsertCodeBlock: default_2.FC;

/**
 * Inserts a new code mirror code block with the specified parameters.
 * @group CodeMirror
 */
export declare const insertCodeMirror$: NodeRef<{
    language: string;
    code: string;
}>;

/**
 * Inserts a decorator node (constructed by the published factory) at the current selection.
 * @group Core
 */
export declare const insertDecoratorNode$: NodeRef<() => DecoratorNode<unknown>>;

/**
 * A signal that inserts a new directive node with the published payload.
 * @group Directive
 */
export declare const insertDirective$: NodeRef<{
    type: Directives['type'];
    name: string;
    attributes?: Directives['attributes'];
}>;

/**
 * Inserts a frontmatter node at the beginning of the markdown document.
 * @group Frontmatter
 */
export declare const insertFrontmatter$: NodeRef<void>;

/**
 * A toolbar button that allows the user to insert a {@link https://jekyllrb.com/docs/front-matter/ | front-matter} editor (if one is not already present).
 * For this to work, you need to have the `frontmatterPlugin` plugin enabled.
 * @group Toolbar Components
 */
export declare const InsertFrontmatter: default_2.FC;

/**
 * A signal that inserts a new image node with the published payload.
 * @group Image
 */
export declare const insertImage$: NodeRef<InsertImageParameters>;

/**
 * A toolbar button that allows the user to insert an image from an URL.
 * For the button to work, you need to have the `imagePlugin` plugin enabled.
 * @group Toolbar Components
 */
export declare const InsertImage: default_2.ForwardRefExoticComponent<Omit<Record<string, never>, "ref"> & default_2.RefAttributes<HTMLButtonElement>>;

/**
 * @group Image
 */
export declare type InsertImageParameters = FileImageParameters | SrcImageParameters;

/* Excluded from this release type: InsertImagePayload */

/**
 * A signal that inserts a new JSX node with the published payload.
 * @group JSX
 */
export declare const insertJsx$: NodeRef<{
    kind: 'text';
    name: string;
    props: JsxProperties;
    children?: Mdast.PhrasingContent[] | undefined;
} | {
    kind: 'flow';
    name: string;
    props: JsxProperties;
    children?: (Mdast.BlockContent | Mdast.DefinitionContent)[] | undefined;
}>;

/**
 * Inserts new markdown value into the current cursor position of the active editor.