@tiptap/vue-2 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/menus/index.d.cts

@@ -62,6 +62,10 @@ interface BubbleMenuPluginProps {
         autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
         hide?: Parameters<typeof hide>[0] | boolean;
         inline?: Parameters<typeof inline>[0] | boolean;
+        onShow?: () => void;
+        onHide?: () => void;
+        onUpdate?: () => void;
+        onDestroy?: () => void;
     };
 }
 
@@ -117,6 +121,10 @@ interface FloatingMenuPluginProps {
         autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
         hide?: Parameters<typeof hide>[0] | boolean;
         inline?: Parameters<typeof inline>[0] | boolean;
+        onShow?: () => void;
+        onHide?: () => void;
+        onUpdate?: () => void;
+        onDestroy?: () => void;
     };
 }
 

package/dist/menus/index.d.ts

@@ -62,6 +62,10 @@ interface BubbleMenuPluginProps {
         autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
         hide?: Parameters<typeof hide>[0] | boolean;
         inline?: Parameters<typeof inline>[0] | boolean;
+        onShow?: () => void;
+        onHide?: () => void;
+        onUpdate?: () => void;
+        onDestroy?: () => void;
     };
 }
 
@@ -117,6 +121,10 @@ interface FloatingMenuPluginProps {
         autoPlacement?: Parameters<typeof autoPlacement>[0] | boolean;
         hide?: Parameters<typeof hide>[0] | boolean;
         inline?: Parameters<typeof inline>[0] | boolean;
+        onShow?: () => void;
+        onHide?: () => void;
+        onUpdate?: () => void;
+        onDestroy?: () => void;
     };
 }
 

package/dist/menus/index.js

@@ -1587,6 +1587,18 @@ 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 { CellSelection } from "@tiptap/pm/tables";
+function combineDOMRects(rect1, rect2) {
+  const top = Math.min(rect1.top, rect2.top);
+  const bottom = Math.max(rect1.bottom, rect2.bottom);
+  const left = Math.min(rect1.left, rect2.left);
+  const right = Math.max(rect1.right, rect2.right);
+  const width = right - left;
+  const height = bottom - top;
+  const x = left;
+  const y = top;
+  return new DOMRect(x, y, width, height);
+}
 var BubbleMenuView = class {
   constructor({
     editor,
@@ -1598,6 +1610,7 @@ var BubbleMenuView = class {
     options
   }) {
     this.preventHide = false;
+    this.isVisible = false;
     this.floatingUIOptions = {
       strategy: "absolute",
       placement: "top",
@@ -1608,7 +1621,11 @@ var BubbleMenuView = class {
       size: false,
       autoPlacement: false,
       hide: false,
-      inline: false
+      inline: false,
+      onShow: void 0,
+      onHide: void 0,
+      onUpdate: void 0,
+      onDestroy: void 0
     };
     this.shouldShow = ({ view: view2, state, from, to }) => {
       const { doc, selection } = state;
@@ -1627,6 +1644,14 @@ var BubbleMenuView = class {
     this.dragstartHandler = () => {
       this.hide();
     };
+    this.resizeHandler = () => {
+      if (this.resizeDebounceTimer) {
+        clearTimeout(this.resizeDebounceTimer);
+      }
+      this.resizeDebounceTimer = window.setTimeout(() => {
+        this.updatePosition();
+      }, this.resizeDelay);
+    };
     this.focusHandler = () => {
       setTimeout(() => this.update(this.editor.view));
     };
@@ -1680,6 +1705,7 @@ var BubbleMenuView = class {
       ...this.floatingUIOptions,
       ...options
     };
+    this.element.tabIndex = 0;
     if (shouldShow) {
       this.shouldShow = shouldShow;
     }
@@ -1687,14 +1713,7 @@ var BubbleMenuView = class {
     this.view.dom.addEventListener("dragstart", this.dragstartHandler);
     this.editor.on("focus", this.focusHandler);
     this.editor.on("blur", this.blurHandler);
-    window.addEventListener("resize", () => {
-      if (this.resizeDebounceTimer) {
-        clearTimeout(this.resizeDebounceTimer);
-      }
-      this.resizeDebounceTimer = window.setTimeout(() => {
-        this.updatePosition();
-      }, this.resizeDelay);
-    });
+    window.addEventListener("resize", this.resizeHandler);
     this.update(view, view.state);
     if (this.getShouldShow()) {
       this.show();
@@ -1740,9 +1759,26 @@ var BubbleMenuView = class {
   }
   updatePosition() {
     const { selection } = this.editor.state;
-    const virtualElement = {
+    let virtualElement = {
       getBoundingClientRect: () => posToDOMRect(this.view, selection.from, selection.to)
     };
+    if (selection instanceof CellSelection) {
+      const { $anchorCell, $headCell } = selection;
+      const from = $anchorCell ? $anchorCell.pos : $headCell.pos;
+      const to = $headCell ? $headCell.pos : $anchorCell.pos;
+      const fromDOM = this.view.nodeDOM(from);
+      const toDOM = this.view.nodeDOM(to);
+      if (!fromDOM || !toDOM) {
+        return;
+      }
+      const clientRect = fromDOM === toDOM ? fromDOM.getBoundingClientRect() : combineDOMRects(
+        fromDOM.getBoundingClientRect(),
+        toDOM.getBoundingClientRect()
+      );
+      virtualElement = {
+        getBoundingClientRect: () => clientRect
+      };
+    }
     computePosition2(virtualElement, this.element, {
       placement: this.floatingUIOptions.placement,
       strategy: this.floatingUIOptions.strategy,
@@ -1752,6 +1788,9 @@ var BubbleMenuView = class {
       this.element.style.position = strategy;
       this.element.style.left = `${x}px`;
       this.element.style.top = `${y}px`;
+      if (this.isVisible && this.floatingUIOptions.onUpdate) {
+        this.floatingUIOptions.onUpdate();
+      }
     });
   }
   update(view, oldState) {
@@ -1785,21 +1824,39 @@ var BubbleMenuView = class {
   }
   show() {
     var _a;
+    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);
+    if (this.floatingUIOptions.onShow) {
+      this.floatingUIOptions.onShow();
+    }
+    this.isVisible = true;
   }
   hide() {
+    if (!this.isVisible) {
+      return;
+    }
     this.element.style.visibility = "hidden";
     this.element.style.opacity = "0";
     this.element.remove();
+    if (this.floatingUIOptions.onHide) {
+      this.floatingUIOptions.onHide();
+    }
+    this.isVisible = false;
   }
   destroy() {
     this.hide();
     this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
     this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
+    window.removeEventListener("resize", this.resizeHandler);
     this.editor.off("focus", this.focusHandler);
     this.editor.off("blur", this.blurHandler);
+    if (this.floatingUIOptions.onDestroy) {
+      this.floatingUIOptions.onDestroy();
+    }
   }
 };
 var BubbleMenuPlugin = (options) => {
@@ -1903,6 +1960,7 @@ import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
 var FloatingMenuView = class {
   constructor({ editor, element, view, options, shouldShow }) {
     this.preventHide = false;
+    this.isVisible = false;
     this.shouldShow = ({ view: view2, state }) => {
       const { selection } = state;
       const { $anchor, empty } = selection;
@@ -1966,6 +2024,7 @@ var FloatingMenuView = class {
       ...this.floatingUIOptions,
       ...options
     };
+    this.element.tabIndex = 0;
     if (shouldShow) {
       this.shouldShow = shouldShow;
     }
@@ -2049,6 +2108,9 @@ var FloatingMenuView = class {
       this.element.style.position = strategy;
       this.element.style.left = `${x}px`;
       this.element.style.top = `${y}px`;
+      if (this.isVisible && this.floatingUIOptions.onUpdate) {
+        this.floatingUIOptions.onUpdate();
+      }
     });
   }
   update(view, oldState) {
@@ -2058,20 +2120,37 @@ var FloatingMenuView = class {
   }
   show() {
     var _a;
+    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);
+    if (this.floatingUIOptions.onShow) {
+      this.floatingUIOptions.onShow();
+    }
+    this.isVisible = true;
   }
   hide() {
+    if (!this.isVisible) {
+      return;
+    }
     this.element.style.visibility = "hidden";
     this.element.style.opacity = "0";
     this.element.remove();
+    if (this.floatingUIOptions.onHide) {
+      this.floatingUIOptions.onHide();
+    }
+    this.isVisible = false;
   }
   destroy() {
     this.hide();
     this.element.removeEventListener("mousedown", this.mousedownHandler, { capture: true });
     this.editor.off("focus", this.focusHandler);
     this.editor.off("blur", this.blurHandler);
+    if (this.floatingUIOptions.onDestroy) {
+      this.floatingUIOptions.onDestroy();
+    }
   }
 };
 var FloatingMenuPlugin = (options) => {