@tiptap/vue-2 3.4.2 → 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.
@@ -93,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.
@@ -93,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,6 +1608,7 @@ var BubbleMenuView = class {
     resizeDelay = 60,
     shouldShow,
     appendTo,
+    getReferencedVirtualElement,
     options
   }) {
     this.preventHide = false;
@@ -1706,6 +1707,7 @@ var BubbleMenuView = class {
     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
@@ -1763,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,
@@ -1801,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,
@@ -1911,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
       })
     ];
@@ -1964,7 +1979,8 @@ var BubbleMenu2 = {
               editor,
               element: this.$el,
               pluginKey: this.pluginKey,
-              shouldShow: this.shouldShow
+              shouldShow: this.shouldShow,
+              getReferencedVirtualElement: this.getReferencedVirtualElement
             })
           );
         });