@tiptap/vue-2 3.0.0-beta.1 → 3.0.0-beta.11

package/dist/menus/index.d.cts

@@ -1,5 +1,5 @@
-import { offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
 import { Editor } from '@tiptap/core';
+import { offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
 import { PluginKey, EditorState } from '@tiptap/pm/state';
 import { EditorView } from '@tiptap/pm/view';
 import Vue, { Component } from 'vue';
@@ -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

@@ -1,5 +1,5 @@
-import { offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
 import { Editor } from '@tiptap/core';
+import { offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
 import { PluginKey, EditorState } from '@tiptap/pm/state';
 import { EditorView } from '@tiptap/pm/view';
 import Vue, { Component } from 'vue';
@@ -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

@@ -1,3 +1,6 @@
+// ../extension-bubble-menu/dist/index.js
+import { Extension } from "@tiptap/core";
+
 // ../../node_modules/.pnpm/@floating-ui+utils@0.2.9/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var sides = ["top", "right", "bottom", "left"];
 var alignments = ["start", "end"];
@@ -1581,7 +1584,7 @@ var computePosition2 = (reference, floating, options) => {
   });
 };
 
-// ../extension-bubble-menu/src/bubble-menu-plugin.ts
+// ../extension-bubble-menu/dist/index.js
 import { isTextSelection, posToDOMRect } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 var BubbleMenuView = class {
@@ -1595,6 +1598,7 @@ var BubbleMenuView = class {
     options
   }) {
     this.preventHide = false;
+    this.isVisible = false;
     this.floatingUIOptions = {
       strategy: "absolute",
       placement: "top",
@@ -1605,14 +1609,18 @@ 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, state, from, to }) => {
+    this.shouldShow = ({ view: view2, state, from, to }) => {
       const { doc, selection } = state;
       const { empty } = selection;
       const isEmptyTextBlock = !doc.textBetween(from, to).length && isTextSelection(state.selection);
       const isChildOfMenu = this.element.contains(document.activeElement);
-      const hasEditorFocus = view.hasFocus() || isChildOfMenu;
+      const hasEditorFocus = view2.hasFocus() || isChildOfMenu;
       if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
         return false;
       }
@@ -1641,9 +1649,9 @@ var BubbleMenuView = class {
       }
       this.hide();
     };
-    this.handleDebouncedUpdate = (view, oldState) => {
-      const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view.state.selection));
-      const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view.state.doc));
+    this.handleDebouncedUpdate = (view2, oldState) => {
+      const selectionChanged = !(oldState == null ? void 0 : oldState.selection.eq(view2.state.selection));
+      const docChanged = !(oldState == null ? void 0 : oldState.doc.eq(view2.state.doc));
       if (!selectionChanged && !docChanged) {
         return;
       }
@@ -1651,17 +1659,17 @@ var BubbleMenuView = class {
         clearTimeout(this.updateDebounceTimer);
       }
       this.updateDebounceTimer = window.setTimeout(() => {
-        this.updateHandler(view, selectionChanged, docChanged, oldState);
+        this.updateHandler(view2, selectionChanged, docChanged, oldState);
       }, this.updateDelay);
     };
-    this.updateHandler = (view, selectionChanged, docChanged, oldState) => {
-      const { composing } = view;
+    this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
+      const { composing } = view2;
       const isSame = !selectionChanged && !docChanged;
       if (composing || isSame) {
         return;
       }
-      const shouldShow = this.getShouldShow(oldState);
-      if (!shouldShow) {
+      const shouldShow2 = this.getShouldShow(oldState);
+      if (!shouldShow2) {
         this.hide();
         return;
       }
@@ -1749,6 +1757,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) {
@@ -1782,14 +1793,28 @@ 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();
@@ -1797,6 +1822,9 @@ var BubbleMenuView = class {
     this.view.dom.removeEventListener("dragstart", this.dragstartHandler);
     this.editor.off("focus", this.focusHandler);
     this.editor.off("blur", this.blurHandler);
+    if (this.floatingUIOptions.onDestroy) {
+      this.floatingUIOptions.onDestroy();
+    }
   }
 };
 var BubbleMenuPlugin = (options) => {
@@ -1805,9 +1833,34 @@ var BubbleMenuPlugin = (options) => {
     view: (view) => new BubbleMenuView({ view, ...options })
   });
 };
+var BubbleMenu = Extension.create({
+  name: "bubbleMenu",
+  addOptions() {
+    return {
+      element: null,
+      pluginKey: "bubbleMenu",
+      updateDelay: void 0,
+      shouldShow: null
+    };
+  },
+  addProseMirrorPlugins() {
+    if (!this.options.element) {
+      return [];
+    }
+    return [
+      BubbleMenuPlugin({
+        pluginKey: this.options.pluginKey,
+        editor: this.editor,
+        element: this.options.element,
+        updateDelay: this.options.updateDelay,
+        shouldShow: this.options.shouldShow
+      })
+    ];
+  }
+});
 
 // src/menus/BubbleMenu.ts
-var BubbleMenu = {
+var BubbleMenu2 = {
   name: "BubbleMenu",
   props: {
     pluginKey: {
@@ -1868,18 +1921,20 @@ var BubbleMenu = {
   }
 };
 
-// ../extension-floating-menu/src/floating-menu-plugin.ts
+// ../extension-floating-menu/dist/index.js
+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 }) {
     this.preventHide = false;
-    this.shouldShow = ({ view, state }) => {
+    this.isVisible = false;
+    this.shouldShow = ({ view: view2, state }) => {
       const { selection } = state;
       const { $anchor, empty } = selection;
       const isRootDepth = $anchor.depth === 1;
       const isEmptyTextBlock = $anchor.parent.isTextblock && !$anchor.parent.type.spec.code && !$anchor.parent.textContent && $anchor.parent.childCount === 0 && !this.getTextContent($anchor.parent);
-      if (!view.hasFocus() || !empty || !isRootDepth || !isEmptyTextBlock || !this.editor.isEditable) {
+      if (!view2.hasFocus() || !empty || !isRootDepth || !isEmptyTextBlock || !this.editor.isEditable) {
         return false;
       }
       return true;
@@ -1896,14 +1951,14 @@ var FloatingMenuView = class {
       hide: false,
       inline: false
     };
-    this.updateHandler = (view, selectionChanged, docChanged, oldState) => {
-      const { composing } = view;
+    this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
+      const { composing } = view2;
       const isSame = !selectionChanged && !docChanged;
       if (composing || isSame) {
         return;
       }
-      const shouldShow = this.getShouldShow(oldState);
-      if (!shouldShow) {
+      const shouldShow2 = this.getShouldShow(oldState);
+      if (!shouldShow2) {
         this.hide();
         return;
       }
@@ -2020,6 +2075,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) {
@@ -2029,20 +2087,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) => {
@@ -2051,9 +2126,34 @@ var FloatingMenuPlugin = (options) => {
     view: (view) => new FloatingMenuView({ view, ...options })
   });
 };
+var FloatingMenu = Extension2.create({
+  name: "floatingMenu",
+  addOptions() {
+    return {
+      element: null,
+      options: {},
+      pluginKey: "floatingMenu",
+      shouldShow: null
+    };
+  },
+  addProseMirrorPlugins() {
+    if (!this.options.element) {
+      return [];
+    }
+    return [
+      FloatingMenuPlugin({
+        pluginKey: this.options.pluginKey,
+        editor: this.editor,
+        element: this.options.element,
+        options: this.options.options,
+        shouldShow: this.options.shouldShow
+      })
+    ];
+  }
+});
 
 // src/menus/FloatingMenu.ts
-var FloatingMenu = {
+var FloatingMenu2 = {
   name: "FloatingMenu",
   props: {
     pluginKey: {
@@ -2106,7 +2206,7 @@ var FloatingMenu = {
   }
 };
 export {
-  BubbleMenu,
-  FloatingMenu
+  BubbleMenu2 as BubbleMenu,
+  FloatingMenu2 as FloatingMenu
 };
 //# sourceMappingURL=index.js.map