@tiptap/vue-2 3.5.0 → 3.5.1

package/dist/menus/index.d.cts

@@ -111,6 +111,7 @@ interface BubbleMenuInterface extends Vue {
     editor: BubbleMenuPluginProps['editor'];
     updateDelay: BubbleMenuPluginProps['updateDelay'];
     resizeDelay: BubbleMenuPluginProps['resizeDelay'];
+    appendTo: BubbleMenuPluginProps['appendTo'];
     shouldShow: BubbleMenuPluginProps['shouldShow'];
     getReferencedVirtualElement: BubbleMenuPluginProps['getReferencedVirtualElement'];
     options: BubbleMenuPluginProps['options'];
@@ -133,6 +134,15 @@ interface FloatingMenuPluginProps {
      * @default null
      */
     element: HTMLElement;
+    /**
+     * 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;
     /**
      * A function that determines whether the menu should be shown or not.
      * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
@@ -173,6 +183,7 @@ interface FloatingMenuInterface extends Vue {
     pluginKey: FloatingMenuPluginProps['pluginKey'];
     options: FloatingMenuPluginProps['options'];
     editor: FloatingMenuPluginProps['editor'];
+    appendTo: FloatingMenuPluginProps['appendTo'];
     shouldShow: FloatingMenuPluginProps['shouldShow'];
 }
 declare const FloatingMenu: Component;

package/dist/menus/index.d.ts

@@ -111,6 +111,7 @@ interface BubbleMenuInterface extends Vue {
     editor: BubbleMenuPluginProps['editor'];
     updateDelay: BubbleMenuPluginProps['updateDelay'];
     resizeDelay: BubbleMenuPluginProps['resizeDelay'];
+    appendTo: BubbleMenuPluginProps['appendTo'];
     shouldShow: BubbleMenuPluginProps['shouldShow'];
     getReferencedVirtualElement: BubbleMenuPluginProps['getReferencedVirtualElement'];
     options: BubbleMenuPluginProps['options'];
@@ -133,6 +134,15 @@ interface FloatingMenuPluginProps {
      * @default null
      */
     element: HTMLElement;
+    /**
+     * 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;
     /**
      * A function that determines whether the menu should be shown or not.
      * If this function returns `false`, the menu will be hidden, otherwise it will be shown.
@@ -173,6 +183,7 @@ interface FloatingMenuInterface extends Vue {
     pluginKey: FloatingMenuPluginProps['pluginKey'];
     options: FloatingMenuPluginProps['options'];
     editor: FloatingMenuPluginProps['editor'];
+    appendTo: FloatingMenuPluginProps['appendTo'];
     shouldShow: FloatingMenuPluginProps['shouldShow'];
 }
 declare const FloatingMenu: Component;

package/dist/menus/index.js

@@ -1969,6 +1969,10 @@ var BubbleMenu2 = {
     resizeDelay: {
       type: Number
     },
+    appendTo: {
+      type: Object,
+      default: void 0
+    },
     shouldShow: {
       type: Function,
       default: null
@@ -1994,6 +1998,7 @@ var BubbleMenu2 = {
               editor,
               element: this.$el,
               pluginKey: this.pluginKey,
+              appendTo: this.appendTo,
               shouldShow: this.shouldShow,
               getReferencedVirtualElement: this.getReferencedVirtualElement
             })
@@ -2015,7 +2020,7 @@ import { Extension as Extension2 } from "@tiptap/core";
 import { getText, getTextSerializersFromSchema, posToDOMRect as posToDOMRect2 } from "@tiptap/core";
 import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
 var FloatingMenuView = class {
-  constructor({ editor, element, view, options, shouldShow }) {
+  constructor({ editor, element, view, options, appendTo, shouldShow }) {
     this.preventHide = false;
     this.isVisible = false;
     this.shouldShow = ({ view: view2, state }) => {
@@ -2077,6 +2082,7 @@ var FloatingMenuView = class {
     this.editor = editor;
     this.element = element;
     this.view = view;
+    this.appendTo = appendTo;
     this.floatingUIOptions = {
       ...this.floatingUIOptions,
       ...options
@@ -2178,13 +2184,13 @@ var FloatingMenuView = class {
     this.updateHandler(view, selectionChanged, docChanged, oldState);
   }
   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();
     }
@@ -2225,6 +2231,7 @@ var FloatingMenu = Extension2.create({
       element: null,
       options: {},
       pluginKey: "floatingMenu",
+      appendTo: void 0,
       shouldShow: null
     };
   },
@@ -2238,6 +2245,7 @@ var FloatingMenu = Extension2.create({
         editor: this.editor,
         element: this.options.element,
         options: this.options.options,
+        appendTo: this.options.appendTo,
         shouldShow: this.options.shouldShow
       })
     ];
@@ -2260,6 +2268,10 @@ var FloatingMenu2 = {
       type: Object,
       default: () => ({})
     },
+    appendTo: {
+      type: Object,
+      default: void 0
+    },
     shouldShow: {
       type: Function,
       default: null
@@ -2283,6 +2295,7 @@ var FloatingMenu2 = {
               editor,
               element: this.$el,
               options: this.options,
+              appendTo: this.appendTo,
               shouldShow: this.shouldShow
             })
           );