rhino-editor/exports/extensions/bubble-menu.d.ts

A custom element wrapped rich text editor

import { Extension } from "@tiptap/core";
import { Editor } from "@tiptap/core";
import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
import type { EditorView } from "@tiptap/pm/view";
export interface BubbleMenuPluginProps {
    /**
     * The plugin key.
     * @type {PluginKey | string}
     * @default 'bubbleMenu'
     */
    pluginKey: PluginKey | string;
    /**
     * The editor instance.
     */
    editor: Editor;
    /**
     * The DOM element that contains your menu.
     * @type {HTMLElement}
     * @default null
     */
    element: HTMLElement;
    /**
     * The options for the tippy.js instance.
     * @see https://atomiks.github.io/tippyjs/v6/all-props/
     */
    /**
     * The delay in milliseconds before the menu should be updated.
     * This can be useful to prevent performance issues.
     * @type {number}
     * @default 250
     */
    updateDelay?: number;
    /**
     * A function that determines whether the menu should be shown or not.
     * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
     */
    shouldShow?: ((props: {
        editor: Editor;
        view: EditorView;
        state: EditorState;
        oldState?: EditorState;
        from: number;
        to: number;
    }) => boolean) | null;
    /**
     * A function that determines what DOM Element to use as an anchor for a NodeView. Useful for things like attachments.
     */
    determineNodeViewAnchor?: ((props: {
        editor: Editor;
        view: EditorView;
        state: EditorState;
        oldState?: EditorState;
        from: number;
        to: number;
    }) => HTMLElement | null) | null;
}
export type BubbleMenuViewProps = BubbleMenuPluginProps & {
    view: EditorView;
};
export declare function findNodeViewAnchor({ view, from, editor, }: {
    view: EditorView;
    from: number;
    editor: Editor;
}): HTMLElement;
export declare class BubbleMenuView {
    editor: Editor;
    element: HTMLElement;
    view: EditorView;
    preventHide: boolean;
    updateDelay: number;
    private updateDebounceTimer;
    shouldShow: Exclude<BubbleMenuPluginProps["shouldShow"], null>;
    determineNodeViewAnchor: Exclude<BubbleMenuPluginProps["determineNodeViewAnchor"], null>;
    constructor({ editor, element, view, updateDelay, shouldShow, determineNodeViewAnchor, }: BubbleMenuViewProps);
    destroy(): void;
    dragstartHandler: () => void;
    focusHandler: () => void;
    blurHandler: () => void;
    update(view: EditorView, oldState?: EditorState): void;
    handleDebouncedUpdate: (view: EditorView, oldState?: EditorState) => void;
    updateHandler: (view: EditorView, selectionChanged: boolean, docChanged: boolean, oldState?: EditorState) => void;
    show(clientRect: () => DOMRect): void;
    hide(): void;
}
export declare const BubbleMenuPlugin: (options: BubbleMenuPluginProps) => Plugin<any>;
export type BubbleMenuOptions = Omit<BubbleMenuPluginProps, "editor" | "element"> & {
    /**
     * The DOM element that contains your menu.
     * @type {HTMLElement}
     * @default null
     */
    element: HTMLElement | null;
};
/**
 * This extension allows you to create a bubble menu.
 * @see https://tiptap.dev/api/extensions/bubble-menu
 */
export declare const BubbleMenuExtension: Extension<BubbleMenuOptions, any>;