@tiptap/vue-2 3.4.1 → 3.4.3

package/dist/menus/index.d.cts

@@ -1,5 +1,5 @@
 import { Editor } from '@tiptap/core';
-import { offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
+import { VirtualElement, 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';
@@ -57,6 +57,13 @@ interface BubbleMenuPluginProps {
      * @default null
      */
     appendTo?: HTMLElement;
+    /**
+     * A function that returns the virtual element for the menu.
+     * This is useful when the menu needs to be positioned relative to a specific DOM element.
+     * @type {() => VirtualElement | null}
+     * @default Position based on the selection.
+     */
+    getReferencedVirtualElement?: () => VirtualElement | 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.
@@ -78,6 +85,12 @@ interface BubbleMenuPluginProps {
         onHide?: () => void;
         onUpdate?: () => void;
         onDestroy?: () => void;
+        /**
+         * The scrollable element that should be listened to when updating the position of the bubble menu.
+         * If not provided, the window will be used.
+         * @type {HTMLElement | Window}
+         */
+        scrollTarget?: HTMLElement | Window;
     };
 }
 
@@ -87,6 +100,7 @@ interface BubbleMenuInterface extends Vue {
     updateDelay: BubbleMenuPluginProps['updateDelay'];
     resizeDelay: BubbleMenuPluginProps['resizeDelay'];
     shouldShow: BubbleMenuPluginProps['shouldShow'];
+    getReferencedVirtualElement: BubbleMenuPluginProps['getReferencedVirtualElement'];
     options: BubbleMenuPluginProps['options'];
 }
 declare const BubbleMenu: Component;

package/dist/menus/index.d.ts

@@ -1,5 +1,5 @@
 import { Editor } from '@tiptap/core';
-import { offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
+import { VirtualElement, 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';
@@ -57,6 +57,13 @@ interface BubbleMenuPluginProps {
      * @default null
      */
     appendTo?: HTMLElement;
+    /**
+     * A function that returns the virtual element for the menu.
+     * This is useful when the menu needs to be positioned relative to a specific DOM element.
+     * @type {() => VirtualElement | null}
+     * @default Position based on the selection.
+     */
+    getReferencedVirtualElement?: () => VirtualElement | 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.
@@ -78,6 +85,12 @@ interface BubbleMenuPluginProps {
         onHide?: () => void;
         onUpdate?: () => void;
         onDestroy?: () => void;
+        /**
+         * The scrollable element that should be listened to when updating the position of the bubble menu.
+         * If not provided, the window will be used.
+         * @type {HTMLElement | Window}
+         */
+        scrollTarget?: HTMLElement | Window;
     };
 }
 
@@ -87,6 +100,7 @@ interface BubbleMenuInterface extends Vue {
     updateDelay: BubbleMenuPluginProps['updateDelay'];
     resizeDelay: BubbleMenuPluginProps['resizeDelay'];
     shouldShow: BubbleMenuPluginProps['shouldShow'];
+    getReferencedVirtualElement: BubbleMenuPluginProps['getReferencedVirtualElement'];
     options: BubbleMenuPluginProps['options'];
 }
 declare const BubbleMenu: Component;

package/dist/menus/index.js

@@ -1608,10 +1608,12 @@ var BubbleMenuView = class {
     resizeDelay = 60,
     shouldShow,
     appendTo,
+    getReferencedVirtualElement,
     options
   }) {
     this.preventHide = false;
     this.isVisible = false;
+    this.scrollTarget = window;
     this.floatingUIOptions = {
       strategy: "absolute",
       placement: "top",
@@ -1657,12 +1659,12 @@ var BubbleMenuView = class {
       setTimeout(() => this.update(this.editor.view));
     };
     this.blurHandler = ({ event }) => {
-      var _a;
+      var _a2;
       if (this.preventHide) {
         this.preventHide = false;
         return;
       }
-      if ((event == null ? void 0 : event.relatedTarget) && ((_a = this.element.parentNode) == null ? void 0 : _a.contains(event.relatedTarget))) {
+      if ((event == null ? void 0 : event.relatedTarget) && ((_a2 = this.element.parentNode) == null ? void 0 : _a2.contains(event.relatedTarget))) {
         return;
       }
       if ((event == null ? void 0 : event.relatedTarget) === this.editor.view.dom) {
@@ -1697,12 +1699,15 @@ var BubbleMenuView = class {
       this.updatePosition();
       this.show();
     };
+    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.getReferencedVirtualElement = getReferencedVirtualElement;
     this.floatingUIOptions = {
       ...this.floatingUIOptions,
       ...options
@@ -1716,6 +1721,7 @@ var BubbleMenuView = class {
     this.editor.on("focus", this.focusHandler);
     this.editor.on("blur", this.blurHandler);
     window.addEventListener("resize", this.resizeHandler);
+    this.scrollTarget.addEventListener("scroll", this.resizeHandler);
     this.update(view, view.state);
     if (this.getShouldShow()) {
       this.show();
@@ -1759,8 +1765,13 @@ var BubbleMenuView = class {
     }
     return middlewares;
   }
-  updatePosition() {
+  get virtualElement() {
+    var _a;
     const { selection } = this.editor.state;
+    const referencedVirtualElement = (_a = this.getReferencedVirtualElement) == null ? void 0 : _a.call(this);
+    if (referencedVirtualElement) {
+      return referencedVirtualElement;
+    }
     const domRect = posToDOMRect(this.view, selection.from, selection.to);
     let virtualElement = {
       getBoundingClientRect: () => domRect,
@@ -1797,6 +1808,13 @@ var BubbleMenuView = class {
         getClientRects: () => [clientRect]
       };
     }
+    return virtualElement;
+  }
+  updatePosition() {
+    const virtualElement = this.virtualElement;
+    if (!virtualElement) {
+      return;
+    }
     computePosition2(virtualElement, this.element, {
       placement: this.floatingUIOptions.placement,
       strategy: this.floatingUIOptions.strategy,
@@ -1870,6 +1888,7 @@ var BubbleMenuView = class {
     this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
     this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
     window.removeEventListener("resize", this.resizeHandler);
+    this.scrollTarget.removeEventListener("scroll", this.resizeHandler);
     this.editor.off("focus", this.focusHandler);
     this.editor.off("blur", this.blurHandler);
     if (this.floatingUIOptions.onDestroy) {
@@ -1906,6 +1925,7 @@ var BubbleMenu = Extension.create({
         updateDelay: this.options.updateDelay,
         options: this.options.options,
         appendTo: this.options.appendTo,
+        getReferencedVirtualElement: this.options.getReferencedVirtualElement,
         shouldShow: this.options.shouldShow
       })
     ];
@@ -1959,7 +1979,8 @@ var BubbleMenu2 = {
               editor,
               element: this.$el,
               pluginKey: this.pluginKey,
-              shouldShow: this.shouldShow
+              shouldShow: this.shouldShow,
+              getReferencedVirtualElement: this.getReferencedVirtualElement
             })
           );
         });