@tiptap/vue-2 3.0.7 → 3.0.9

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

@@ -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
@@ -1826,13 +1828,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 +1877,7 @@ var BubbleMenu = Extension.create({
       element: null,
       pluginKey: "bubbleMenu",
       updateDelay: void 0,
+      appendTo: void 0,
       shouldShow: null
     };
   },
@@ -1889,6 +1892,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
       })
     ];