@tiptap/vue-2 3.15.2 → 3.16.0

package/dist/menus/index.cjs

@@ -2014,9 +2014,19 @@ var BubbleMenu = {
 var import_core3 = require("@tiptap/core");
 var import_state2 = require("@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;
@@ -2073,10 +2083,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
@@ -2088,6 +2126,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();
@@ -2207,8 +2248,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();
     }
@@ -2233,6 +2277,12 @@ var FloatingMenu = {
       type: Object,
       required: true
     },
+    updateDelay: {
+      type: Number
+    },
+    resizeDelay: {
+      type: Number
+    },
     options: {
       type: Object,
       default: () => ({})
@@ -2266,6 +2316,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