@tiptap/vue-2 3.4.6 → 3.5.1

package/dist/menus/index.cjs

@@ -1747,6 +1747,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);
@@ -1910,6 +1911,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 });
@@ -1918,6 +1925,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();
     }
@@ -1956,6 +1964,13 @@ var BubbleMenu = import_core2.Extension.create({
         shouldShow: this.options.shouldShow
       })
     ];
+  },
+  addCommands() {
+    return {
+      updateBubbleMenuPosition: () => ({ commands }) => {
+        return commands.setMeta("bubbleMenu", "updatePosition");
+      }
+    };
   }
 });
 
@@ -1981,6 +1996,10 @@ var BubbleMenu2 = {
     resizeDelay: {
       type: Number
     },
+    appendTo: {
+      type: Object,
+      default: void 0
+    },
     shouldShow: {
       type: Function,
       default: null
@@ -2006,6 +2025,7 @@ var BubbleMenu2 = {
               editor,
               element: this.$el,
               pluginKey: this.pluginKey,
+              appendTo: this.appendTo,
               shouldShow: this.shouldShow,
               getReferencedVirtualElement: this.getReferencedVirtualElement
             })
@@ -2015,7 +2035,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);
@@ -2027,7 +2047,7 @@ var import_core4 = require("@tiptap/core");
 var import_core5 = require("@tiptap/core");
 var import_state2 = require("@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 }) => {
@@ -2089,6 +2109,7 @@ var FloatingMenuView = class {
     this.editor = editor;
     this.element = element;
     this.view = view;
+    this.appendTo = appendTo;
     this.floatingUIOptions = {
       ...this.floatingUIOptions,
       ...options
@@ -2190,13 +2211,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();
     }
@@ -2237,6 +2258,7 @@ var FloatingMenu = import_core4.Extension.create({
       element: null,
       options: {},
       pluginKey: "floatingMenu",
+      appendTo: void 0,
       shouldShow: null
     };
   },
@@ -2250,6 +2272,7 @@ var FloatingMenu = import_core4.Extension.create({
         editor: this.editor,
         element: this.options.element,
         options: this.options.options,
+        appendTo: this.options.appendTo,
         shouldShow: this.options.shouldShow
       })
     ];
@@ -2272,6 +2295,10 @@ var FloatingMenu2 = {
       type: Object,
       default: () => ({})
     },
+    appendTo: {
+      type: Object,
+      default: void 0
+    },
     shouldShow: {
       type: Function,
       default: null
@@ -2295,6 +2322,7 @@ var FloatingMenu2 = {
               editor,
               element: this.$el,
               options: this.options,
+              appendTo: this.appendTo,
               shouldShow: this.shouldShow
             })
           );
@@ -2303,7 +2331,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);