@tiptap/vue-2 3.4.6 → 3.5.1

package/dist/menus/index.d.cts

@@ -93,12 +93,25 @@ interface BubbleMenuPluginProps {
         scrollTarget?: HTMLElement | Window;
     };
 }
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        bubbleMenu: {
+            /**
+             * Update the position of the bubble menu. This command is useful to force
+             * the bubble menu to update its position in response to certain events
+             * (for example, when the bubble menu is resized).
+             */
+            updateBubbleMenuPosition: () => ReturnType;
+        };
+    }
+}
 
 interface BubbleMenuInterface extends Vue {
     pluginKey: BubbleMenuPluginProps['pluginKey'];
     editor: BubbleMenuPluginProps['editor'];
     updateDelay: BubbleMenuPluginProps['updateDelay'];
     resizeDelay: BubbleMenuPluginProps['resizeDelay'];
+    appendTo: BubbleMenuPluginProps['appendTo'];
     shouldShow: BubbleMenuPluginProps['shouldShow'];
     getReferencedVirtualElement: BubbleMenuPluginProps['getReferencedVirtualElement'];
     options: BubbleMenuPluginProps['options'];
@@ -121,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.
@@ -161,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

@@ -93,12 +93,25 @@ interface BubbleMenuPluginProps {
         scrollTarget?: HTMLElement | Window;
     };
 }
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        bubbleMenu: {
+            /**
+             * Update the position of the bubble menu. This command is useful to force
+             * the bubble menu to update its position in response to certain events
+             * (for example, when the bubble menu is resized).
+             */
+            updateBubbleMenuPosition: () => ReturnType;
+        };
+    }
+}
 
 interface BubbleMenuInterface extends Vue {
     pluginKey: BubbleMenuPluginProps['pluginKey'];
     editor: BubbleMenuPluginProps['editor'];
     updateDelay: BubbleMenuPluginProps['updateDelay'];
     resizeDelay: BubbleMenuPluginProps['resizeDelay'];
+    appendTo: BubbleMenuPluginProps['appendTo'];
     shouldShow: BubbleMenuPluginProps['shouldShow'];
     getReferencedVirtualElement: BubbleMenuPluginProps['getReferencedVirtualElement'];
     options: BubbleMenuPluginProps['options'];
@@ -121,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.
@@ -161,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

@@ -1720,6 +1720,7 @@ var BubbleMenuView = class {
     this.view.dom.addEventListener("dragstart", this.dragstartHandler);
     this.editor.on("focus", this.focusHandler);
     this.editor.on("blur", this.blurHandler);
+    this.editor.on("transaction", this.transactionHandler);
     window.addEventListener("resize", this.resizeHandler);
     this.scrollTarget.addEventListener("scroll", this.resizeHandler);
     this.update(view, view.state);
@@ -1883,6 +1884,12 @@ var BubbleMenuView = class {
     }
     this.isVisible = false;
   }
+  transactionHandler({ transaction: tr }) {
+    const meta = tr.getMeta("bubbleMenu");
+    if (meta === "updatePosition") {
+      this.updatePosition();
+    }
+  }
   destroy() {
     this.hide();
     this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
@@ -1891,6 +1898,7 @@ var BubbleMenuView = class {
     this.scrollTarget.removeEventListener("scroll", this.resizeHandler);
     this.editor.off("focus", this.focusHandler);
     this.editor.off("blur", this.blurHandler);
+    this.editor.off("transaction", this.transactionHandler);
     if (this.floatingUIOptions.onDestroy) {
       this.floatingUIOptions.onDestroy();
     }
@@ -1929,6 +1937,13 @@ var BubbleMenu = Extension.create({
         shouldShow: this.options.shouldShow
       })
     ];
+  },
+  addCommands() {
+    return {
+      updateBubbleMenuPosition: () => ({ commands }) => {
+        return commands.setMeta("bubbleMenu", "updatePosition");
+      }
+    };
   }
 });
 
@@ -1954,6 +1969,10 @@ var BubbleMenu2 = {
     resizeDelay: {
       type: Number
     },
+    appendTo: {
+      type: Object,
+      default: void 0
+    },
     shouldShow: {
       type: Function,
       default: null
@@ -1979,6 +1998,7 @@ var BubbleMenu2 = {
               editor,
               element: this.$el,
               pluginKey: this.pluginKey,
+              appendTo: this.appendTo,
               shouldShow: this.shouldShow,
               getReferencedVirtualElement: this.getReferencedVirtualElement
             })
@@ -1988,7 +2008,7 @@ var BubbleMenu2 = {
     }
   },
   render(createElement) {
-    return createElement("div", { style: { visibility: "hidden" } }, this.$slots.default);
+    return createElement("div", {}, this.$slots.default);
   },
   beforeDestroy() {
     this.editor.unregisterPlugin(this.pluginKey);
@@ -2000,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 }) => {
@@ -2062,6 +2082,7 @@ var FloatingMenuView = class {
     this.editor = editor;
     this.element = element;
     this.view = view;
+    this.appendTo = appendTo;
     this.floatingUIOptions = {
       ...this.floatingUIOptions,
       ...options
@@ -2163,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();
     }
@@ -2210,6 +2231,7 @@ var FloatingMenu = Extension2.create({
       element: null,
       options: {},
       pluginKey: "floatingMenu",
+      appendTo: void 0,
       shouldShow: null
     };
   },
@@ -2223,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
       })
     ];
@@ -2245,6 +2268,10 @@ var FloatingMenu2 = {
       type: Object,
       default: () => ({})
     },
+    appendTo: {
+      type: Object,
+      default: void 0
+    },
     shouldShow: {
       type: Function,
       default: null
@@ -2268,6 +2295,7 @@ var FloatingMenu2 = {
               editor,
               element: this.$el,
               options: this.options,
+              appendTo: this.appendTo,
               shouldShow: this.shouldShow
             })
           );
@@ -2276,7 +2304,7 @@ var FloatingMenu2 = {
     }
   },
   render(createElement) {
-    return createElement("div", { style: { visibility: "hidden" } }, this.$slots.default);
+    return createElement("div", {}, this.$slots.default);
   },
   beforeDestroy() {
     this.editor.unregisterPlugin(this.pluginKey);