@tiptap/vue-2 3.0.8 → 3.1.0

package/dist/menus/index.d.cts

@@ -48,6 +48,15 @@ interface BubbleMenuPluginProps {
         from: number;
         to: number;
     }) => boolean) | null;
+    /**
+     * The DOM element to append your menu to. Default is the editor's parent element.
+     *
+     * Sometimes the menu needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.
+     *
+     * @type {HTMLElement}
+     * @default null
+     */
+    appendTo?: HTMLElement;
     /**
      * 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.

package/dist/menus/index.d.ts

@@ -48,6 +48,15 @@ interface BubbleMenuPluginProps {
         from: number;
         to: number;
     }) => boolean) | null;
+    /**
+     * The DOM element to append your menu to. Default is the editor's parent element.
+     *
+     * Sometimes the menu needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.
+     *
+     * @type {HTMLElement}
+     * @default null
+     */
+    appendTo?: HTMLElement;
     /**
      * 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.

package/dist/menus/index.js

@@ -1586,7 +1586,7 @@ var computePosition2 = (reference, floating, options) => {
 
 // ../extension-bubble-menu/dist/index.js
 import { isTextSelection, posToDOMRect } from "@tiptap/core";
-import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { NodeSelection, Plugin, PluginKey } from "@tiptap/pm/state";
 import { CellSelection } from "@tiptap/pm/tables";
 function combineDOMRects(rect1, rect2) {
   const top = Math.min(rect1.top, rect2.top);
@@ -1607,6 +1607,7 @@ var BubbleMenuView = class {
     updateDelay = 250,
     resizeDelay = 60,
     shouldShow,
+    appendTo,
     options
   }) {
     this.preventHide = false;
@@ -1701,6 +1702,7 @@ var BubbleMenuView = class {
     this.view = view;
     this.updateDelay = updateDelay;
     this.resizeDelay = resizeDelay;
+    this.appendTo = appendTo;
     this.floatingUIOptions = {
       ...this.floatingUIOptions,
       ...options
@@ -1764,6 +1766,19 @@ var BubbleMenuView = class {
       getBoundingClientRect: () => domRect,
       getClientRects: () => [domRect]
     };
+    if (selection instanceof NodeSelection) {
+      let node = this.view.nodeDOM(selection.from);
+      const nodeViewWrapper = node.dataset.nodeViewWrapper ? node : node.querySelector("[data-node-view-wrapper]");
+      if (nodeViewWrapper) {
+        node = nodeViewWrapper;
+      }
+      if (node) {
+        virtualElement = {
+          getBoundingClientRect: () => node.getBoundingClientRect(),
+          getClientRects: () => [node.getBoundingClientRect()]
+        };
+      }
+    }
     if (selection instanceof CellSelection) {
       const { $anchorCell, $headCell } = selection;
       const from = $anchorCell ? $anchorCell.pos : $headCell.pos;
@@ -1826,13 +1841,13 @@ var BubbleMenuView = class {
     return shouldShow;
   }
   show() {
-    var _a;
+    var _a, _b;
     if (this.isVisible) {
       return;
     }
     this.element.style.visibility = "visible";
     this.element.style.opacity = "1";
-    (_a = this.view.dom.parentElement) == null ? void 0 : _a.appendChild(this.element);
+    (_b = (_a = this.appendTo) != null ? _a : this.view.dom.parentElement) == null ? void 0 : _b.appendChild(this.element);
     if (this.floatingUIOptions.onShow) {
       this.floatingUIOptions.onShow();
     }
@@ -1875,6 +1890,7 @@ var BubbleMenu = Extension.create({
       element: null,
       pluginKey: "bubbleMenu",
       updateDelay: void 0,
+      appendTo: void 0,
       shouldShow: null
     };
   },
@@ -1889,6 +1905,7 @@ var BubbleMenu = Extension.create({
         element: this.options.element,
         updateDelay: this.options.updateDelay,
         options: this.options.options,
+        appendTo: this.options.appendTo,
         shouldShow: this.options.shouldShow
       })
     ];