@tiptap/vue-2 3.0.0 → 3.0.2-beta.0

package/dist/menus/index.d.ts

@@ -0,0 +1,145 @@
+import { Editor } from '@tiptap/core';
+import { offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
+import { PluginKey, EditorState } from '@tiptap/pm/state';
+import { EditorView } from '@tiptap/pm/view';
+import Vue, { Component } from 'vue';
+
+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 delay in milliseconds before the menu should be updated.
+     * This can be useful to prevent performance issues.
+     * @type {number}
+     * @default 250
+     */
+    updateDelay?: number;
+    /**
+     * The delay in milliseconds before the menu position should be updated on window resize.
+     * This can be useful to prevent performance issues.
+     * @type {number}
+     * @default 60
+     */
+    resizeDelay?: 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;
+        element: HTMLElement;
+        view: EditorView;
+        state: EditorState;
+        oldState?: EditorState;
+        from: number;
+        to: number;
+    }) => boolean) | null;
+    /**
+     * The options for the bubble menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, arrow, size, autoPlacement,
+     * hide, and inline middlewares.
+     * @default {}
+     * @see https://floating-ui.com/docs/computePosition#options
+     */
+    options?: {
+        strategy?: 'absolute' | 'fixed';
+        placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+        offset?: Parameters<typeof offset>[0] | boolean;
+        flip?: Parameters<typeof flip>[0] | boolean;
+        shift?: Parameters<typeof shift>[0] | boolean;
+        arrow?: Parameters<typeof arrow>[0] | false;
+        size?: Parameters<typeof size>[0] | boolean;
+        autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
+        hide?: Parameters<typeof hide>[0] | boolean;
+        inline?: Parameters<typeof inline>[0] | boolean;
+        onShow?: () => void;
+        onHide?: () => void;
+        onUpdate?: () => void;
+        onDestroy?: () => void;
+    };
+}
+
+interface BubbleMenuInterface extends Vue {
+    pluginKey: BubbleMenuPluginProps['pluginKey'];
+    editor: BubbleMenuPluginProps['editor'];
+    updateDelay: BubbleMenuPluginProps['updateDelay'];
+    resizeDelay: BubbleMenuPluginProps['resizeDelay'];
+    shouldShow: BubbleMenuPluginProps['shouldShow'];
+    options: BubbleMenuPluginProps['options'];
+}
+declare const BubbleMenu: Component;
+
+interface FloatingMenuPluginProps {
+    /**
+     * The plugin key for the floating menu.
+     * @default 'floatingMenu'
+     */
+    pluginKey: PluginKey | string;
+    /**
+     * The editor instance.
+     * @default null
+     */
+    editor: Editor;
+    /**
+     * The DOM element that contains your menu.
+     * @default null
+     */
+    element: HTMLElement;
+    /**
+     * 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;
+    /**
+     * The options for the floating menu. Those are passed to Floating UI and include options for the placement, offset, flip, shift, arrow, size, autoPlacement,
+     * hide, and inline middlewares.
+     * @default {}
+     * @see https://floating-ui.com/docs/computePosition#options
+     */
+    options?: {
+        strategy?: 'absolute' | 'fixed';
+        placement?: 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
+        offset?: Parameters<typeof offset>[0] | boolean;
+        flip?: Parameters<typeof flip>[0] | boolean;
+        shift?: Parameters<typeof shift>[0] | boolean;
+        arrow?: Parameters<typeof arrow>[0] | false;
+        size?: Parameters<typeof size>[0] | boolean;
+        autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
+        hide?: Parameters<typeof hide>[0] | boolean;
+        inline?: Parameters<typeof inline>[0] | boolean;
+        onShow?: () => void;
+        onHide?: () => void;
+        onUpdate?: () => void;
+        onDestroy?: () => void;
+    };
+}
+
+interface FloatingMenuInterface extends Vue {
+    pluginKey: FloatingMenuPluginProps['pluginKey'];
+    options: FloatingMenuPluginProps['options'];
+    editor: FloatingMenuPluginProps['editor'];
+    shouldShow: FloatingMenuPluginProps['shouldShow'];
+}
+declare const FloatingMenu: Component;
+
+export { BubbleMenu, type BubbleMenuInterface, FloatingMenu, type FloatingMenuInterface };