@tiptap/vue-2 3.15.2 → 3.16.0

package/dist/menus/index.d.cts

@@ -127,6 +127,20 @@ interface FloatingMenuPluginProps {
      * @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;
     /**
      * The DOM element to append your menu to. Default is the editor's parent element.
      *
@@ -169,13 +183,33 @@ interface FloatingMenuPluginProps {
         onHide?: () => void;
         onUpdate?: () => void;
         onDestroy?: () => void;
+        /**
+         * The scrollable element that should be listened to when updating the position of the floating menu.
+         * If not provided, the window will be used.
+         * @type {HTMLElement | Window}
+         */
+        scrollTarget?: HTMLElement | Window;
     };
 }
 
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        floatingMenu: {
+            /**
+             * Update the position of the floating menu.
+             * @example editor.commands.updateFloatingMenuPosition()
+             */
+            updateFloatingMenuPosition: () => ReturnType;
+        };
+    }
+}
+
 interface FloatingMenuInterface extends Vue {
     pluginKey: FloatingMenuPluginProps['pluginKey'];
-    options: FloatingMenuPluginProps['options'];
     editor: FloatingMenuPluginProps['editor'];
+    updateDelay: FloatingMenuPluginProps['updateDelay'];
+    resizeDelay: FloatingMenuPluginProps['resizeDelay'];
+    options: FloatingMenuPluginProps['options'];
     appendTo: FloatingMenuPluginProps['appendTo'];
     shouldShow: FloatingMenuPluginProps['shouldShow'];
 }

package/dist/menus/index.d.ts

@@ -127,6 +127,20 @@ interface FloatingMenuPluginProps {
      * @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;
     /**
      * The DOM element to append your menu to. Default is the editor's parent element.
      *
@@ -169,13 +183,33 @@ interface FloatingMenuPluginProps {
         onHide?: () => void;
         onUpdate?: () => void;
         onDestroy?: () => void;
+        /**
+         * The scrollable element that should be listened to when updating the position of the floating menu.
+         * If not provided, the window will be used.
+         * @type {HTMLElement | Window}
+         */
+        scrollTarget?: HTMLElement | Window;
     };
 }
 
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        floatingMenu: {
+            /**
+             * Update the position of the floating menu.
+             * @example editor.commands.updateFloatingMenuPosition()
+             */
+            updateFloatingMenuPosition: () => ReturnType;
+        };
+    }
+}
+
 interface FloatingMenuInterface extends Vue {
     pluginKey: FloatingMenuPluginProps['pluginKey'];
-    options: FloatingMenuPluginProps['options'];
     editor: FloatingMenuPluginProps['editor'];
+    updateDelay: FloatingMenuPluginProps['updateDelay'];
+    resizeDelay: FloatingMenuPluginProps['resizeDelay'];
+    options: FloatingMenuPluginProps['options'];
     appendTo: FloatingMenuPluginProps['appendTo'];
     shouldShow: FloatingMenuPluginProps['shouldShow'];
 }

package/dist/menus/index.js

@@ -1987,9 +1987,19 @@ var BubbleMenu = {
 import { getText, getTextSerializersFromSchema, posToDOMRect as posToDOMRect2 } from "@tiptap/core";
 import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
 var FloatingMenuView = class {
-  constructor({ editor, element, view, options, appendTo, shouldShow }) {
+  constructor({
+    editor,
+    element,
+    view,
+    updateDelay = 250,
+    resizeDelay = 60,
+    options,
+    appendTo,
+    shouldShow
+  }) {
     this.preventHide = false;
     this.isVisible = false;
+    this.scrollTarget = window;
     this.shouldShow = ({ view, state }) => {
       const { selection } = state;
       const { $anchor, empty } = selection;
@@ -2046,10 +2056,38 @@ var FloatingMenuView = class {
       }
       this.hide();
     };
+    /**
+     * Handles the transaction event to update the position of the floating menu.
+     * This allows external code to trigger a position update via:
+     * `editor.view.dispatch(editor.state.tr.setMeta('floatingMenu', 'updatePosition'))`
+     */
+    this.transactionHandler = ({ transaction: tr }) => {
+      const meta = tr.getMeta("floatingMenu");
+      if (meta === "updatePosition") {
+        this.updatePosition();
+      }
+    };
+    /**
+     * Handles the window resize event to update the position of the floating menu.
+     * It uses a debounce mechanism to prevent excessive updates.
+     * The delay is defined by the `resizeDelay` property.
+     */
+    this.resizeHandler = () => {
+      if (this.resizeDebounceTimer) {
+        clearTimeout(this.resizeDebounceTimer);
+      }
+      this.resizeDebounceTimer = window.setTimeout(() => {
+        this.updatePosition();
+      }, this.resizeDelay);
+    };
+    var _a;
     this.editor = editor;
     this.element = element;
     this.view = view;
+    this.updateDelay = updateDelay;
+    this.resizeDelay = resizeDelay;
     this.appendTo = appendTo;
+    this.scrollTarget = (_a = options == null ? void 0 : options.scrollTarget) != null ? _a : window;
     this.floatingUIOptions = {
       ...this.floatingUIOptions,
       ...options
@@ -2061,6 +2099,9 @@ var FloatingMenuView = class {
     this.element.addEventListener("mousedown", this.mousedownHandler, { capture: true });
     this.editor.on("focus", this.focusHandler);
     this.editor.on("blur", this.blurHandler);
+    this.editor.on("transaction", this.transactionHandler);
+    window.addEventListener("resize", this.resizeHandler);
+    this.scrollTarget.addEventListener("scroll", this.resizeHandler);
     this.update(view, view.state);
     if (this.getShouldShow()) {
       this.show();
@@ -2180,8 +2221,11 @@ var FloatingMenuView = class {
   destroy() {
     this.hide();
     this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
+    window.removeEventListener("resize", this.resizeHandler);
+    this.scrollTarget.removeEventListener("scroll", this.resizeHandler);
     this.editor.off("focus", this.focusHandler);
     this.editor.off("blur", this.blurHandler);
+    this.editor.off("transaction", this.transactionHandler);
     if (this.floatingUIOptions.onDestroy) {
       this.floatingUIOptions.onDestroy();
     }
@@ -2206,6 +2250,12 @@ var FloatingMenu = {
       type: Object,
       required: true
     },
+    updateDelay: {
+      type: Number
+    },
+    resizeDelay: {
+      type: Number
+    },
     options: {
       type: Object,
       default: () => ({})
@@ -2239,6 +2289,8 @@ var FloatingMenu = {
               pluginKey: this.pluginKey,
               editor,
               element: this.$el,
+              updateDelay: this.updateDelay,
+              resizeDelay: this.resizeDelay,
               options: this.options,
               appendTo: this.appendTo,
               shouldShow: this.shouldShow