@tiptap/vue-2 3.10.6 → 3.10.8

package/dist/menus/index.d.cts

@@ -1,8 +1,8 @@
-import { Editor } from '@tiptap/core';
 import { VirtualElement, offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
+import { Editor } from '@tiptap/core';
 import { PluginKey, EditorState } from '@tiptap/pm/state';
 import { EditorView } from '@tiptap/pm/view';
-import Vue, { Component } from 'vue';
+import { VNode, Component } from 'vue';
 
 interface BubbleMenuPluginProps {
     /**
@@ -94,7 +94,12 @@ interface BubbleMenuPluginProps {
     };
 }
 
-interface BubbleMenuInterface extends Vue {
+interface BubbleMenuInterface {
+    $el: HTMLElement;
+    $nextTick: (callback: () => void) => void;
+    $slots: {
+        default?: VNode[];
+    };
     pluginKey: BubbleMenuPluginProps['pluginKey'];
     editor: BubbleMenuPluginProps['editor'];
     updateDelay: BubbleMenuPluginProps['updateDelay'];

package/dist/menus/index.d.ts

@@ -1,8 +1,8 @@
-import { Editor } from '@tiptap/core';
 import { VirtualElement, offset, flip, shift, arrow, size, autoPlacement, hide, inline } from '@floating-ui/dom';
+import { Editor } from '@tiptap/core';
 import { PluginKey, EditorState } from '@tiptap/pm/state';
 import { EditorView } from '@tiptap/pm/view';
-import Vue, { Component } from 'vue';
+import { VNode, Component } from 'vue';
 
 interface BubbleMenuPluginProps {
     /**
@@ -94,7 +94,12 @@ interface BubbleMenuPluginProps {
     };
 }
 
-interface BubbleMenuInterface extends Vue {
+interface BubbleMenuInterface {
+    $el: HTMLElement;
+    $nextTick: (callback: () => void) => void;
+    $slots: {
+        default?: VNode[];
+    };
     pluginKey: BubbleMenuPluginProps['pluginKey'];
     editor: BubbleMenuPluginProps['editor'];
     updateDelay: BubbleMenuPluginProps['updateDelay'];

package/dist/menus/index.js

@@ -1,6 +1,3 @@
-// ../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"];
@@ -1584,7 +1581,7 @@ var computePosition2 = (reference, floating, options) => {
   });
 };
 
-// ../extension-bubble-menu/dist/index.js
+// ../extension-bubble-menu/src/bubble-menu-plugin.ts
 import { isTextSelection, posToDOMRect } from "@tiptap/core";
 import { NodeSelection, Plugin, PluginKey } from "@tiptap/pm/state";
 import { CellSelection } from "@tiptap/pm/tables";
@@ -1630,12 +1627,12 @@ var BubbleMenuView = class {
       onUpdate: void 0,
       onDestroy: void 0
     };
-    this.shouldShow = ({ view: view2, state, from, to }) => {
+    this.shouldShow = ({ view, 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 = view2.hasFocus() || isChildOfMenu;
+      const hasEditorFocus = view.hasFocus() || isChildOfMenu;
       if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
         return false;
       }
@@ -1647,6 +1644,11 @@ var BubbleMenuView = class {
     this.dragstartHandler = () => {
       this.hide();
     };
+    /**
+     * Handles the window resize event to update the position of the bubble menu.
+     * It uses a debounce mechanism to prevent excessive updates.
+     * The delay is defined by the `resizeDelay` property.
+     */
     this.resizeHandler = () => {
       if (this.resizeDebounceTimer) {
         clearTimeout(this.resizeDebounceTimer);
@@ -1659,7 +1661,7 @@ var BubbleMenuView = class {
       setTimeout(() => this.update(this.editor.view));
     };
     this.blurHandler = ({ event }) => {
-      var _a2;
+      var _a;
       if (this.editor.isDestroyed) {
         this.destroy();
         return;
@@ -1668,7 +1670,7 @@ var BubbleMenuView = class {
         this.preventHide = false;
         return;
       }
-      if ((event == null ? void 0 : event.relatedTarget) && ((_a2 = this.element.parentNode) == null ? void 0 : _a2.contains(event.relatedTarget))) {
+      if ((event == null ? void 0 : event.relatedTarget) && ((_a = this.element.parentNode) == null ? void 0 : _a.contains(event.relatedTarget))) {
         return;
       }
       if ((event == null ? void 0 : event.relatedTarget) === this.editor.view.dom) {
@@ -1676,9 +1678,9 @@ var BubbleMenuView = class {
       }
       this.hide();
     };
-    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));
+    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));
       if (!selectionChanged && !docChanged) {
         return;
       }
@@ -1686,17 +1688,17 @@ var BubbleMenuView = class {
         clearTimeout(this.updateDebounceTimer);
       }
       this.updateDebounceTimer = window.setTimeout(() => {
-        this.updateHandler(view2, selectionChanged, docChanged, oldState);
+        this.updateHandler(view, selectionChanged, docChanged, oldState);
       }, this.updateDelay);
     };
-    this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
-      const { composing } = view2;
+    this.updateHandler = (view, selectionChanged, docChanged, oldState) => {
+      const { composing } = view;
       const isSame = !selectionChanged && !docChanged;
       if (composing || isSame) {
         return;
       }
-      const shouldShow2 = this.getShouldShow(oldState);
-      if (!shouldShow2) {
+      const shouldShow = this.getShouldShow(oldState);
+      if (!shouldShow) {
         this.hide();
         return;
       }
@@ -1916,38 +1918,9 @@ var BubbleMenuPlugin = (options) => {
     view: (view) => new BubbleMenuView({ view, ...options })
   });
 };
-var BubbleMenu = Extension.create({
-  name: "bubbleMenu",
-  addOptions() {
-    return {
-      element: null,
-      pluginKey: "bubbleMenu",
-      updateDelay: void 0,
-      appendTo: 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,
-        options: this.options.options,
-        appendTo: this.options.appendTo,
-        getReferencedVirtualElement: this.options.getReferencedVirtualElement,
-        shouldShow: this.options.shouldShow
-      })
-    ];
-  }
-});
 
 // src/menus/BubbleMenu.ts
-var BubbleMenu2 = {
+var BubbleMenu = {
   name: "BubbleMenu",
   props: {
     pluginKey: {
@@ -1977,37 +1950,30 @@ var BubbleMenu2 = {
       default: null
     }
   },
-  watch: {
-    editor: {
-      immediate: true,
-      handler(editor) {
-        if (!editor) {
-          return;
-        }
-        if (!this.$el) {
-          return;
-        }
-        ;
-        this.$el.style.visibility = "hidden";
-        this.$el.style.position = "absolute";
-        this.$el.remove();
-        this.$nextTick(() => {
-          editor.registerPlugin(
-            BubbleMenuPlugin({
-              updateDelay: this.updateDelay,
-              resizeDelay: this.resizeDelay,
-              options: this.options,
-              editor,
-              element: this.$el,
-              pluginKey: this.pluginKey,
-              appendTo: this.appendTo,
-              shouldShow: this.shouldShow,
-              getReferencedVirtualElement: this.getReferencedVirtualElement
-            })
-          );
-        });
-      }
+  mounted() {
+    const editor = this.editor;
+    const el = this.$el;
+    if (!editor || !el) {
+      return;
     }
+    el.style.visibility = "hidden";
+    el.style.position = "absolute";
+    el.remove();
+    this.$nextTick(() => {
+      editor.registerPlugin(
+        BubbleMenuPlugin({
+          updateDelay: this.updateDelay,
+          resizeDelay: this.resizeDelay,
+          options: this.options,
+          editor,
+          element: el,
+          pluginKey: this.pluginKey,
+          appendTo: this.appendTo,
+          shouldShow: this.shouldShow,
+          getReferencedVirtualElement: this.getReferencedVirtualElement
+        })
+      );
+    });
   },
   render(createElement) {
     return createElement("div", {}, this.$slots.default);
@@ -2017,20 +1983,19 @@ var BubbleMenu2 = {
   }
 };
 
-// ../extension-floating-menu/dist/index.js
-import { Extension as Extension2 } from "@tiptap/core";
+// ../extension-floating-menu/src/floating-menu-plugin.ts
 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, appendTo, shouldShow }) {
     this.preventHide = false;
     this.isVisible = false;
-    this.shouldShow = ({ view: view2, state }) => {
+    this.shouldShow = ({ view, 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 (!view2.hasFocus() || !empty || !isRootDepth || !isEmptyTextBlock || !this.editor.isEditable) {
+      if (!view.hasFocus() || !empty || !isRootDepth || !isEmptyTextBlock || !this.editor.isEditable) {
         return false;
       }
       return true;
@@ -2047,14 +2012,14 @@ var FloatingMenuView = class {
       hide: false,
       inline: false
     };
-    this.updateHandler = (view2, selectionChanged, docChanged, oldState) => {
-      const { composing } = view2;
+    this.updateHandler = (view, selectionChanged, docChanged, oldState) => {
+      const { composing } = view;
       const isSame = !selectionChanged && !docChanged;
       if (composing || isSame) {
         return;
       }
-      const shouldShow2 = this.getShouldShow(oldState);
-      if (!shouldShow2) {
+      const shouldShow = this.getShouldShow(oldState);
+      if (!shouldShow) {
         this.hide();
         return;
       }
@@ -2228,36 +2193,9 @@ var FloatingMenuPlugin = (options) => {
     view: (view) => new FloatingMenuView({ view, ...options })
   });
 };
-var FloatingMenu = Extension2.create({
-  name: "floatingMenu",
-  addOptions() {
-    return {
-      element: null,
-      options: {},
-      pluginKey: "floatingMenu",
-      appendTo: void 0,
-      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,
-        appendTo: this.options.appendTo,
-        shouldShow: this.options.shouldShow
-      })
-    ];
-  }
-});
 
 // src/menus/FloatingMenu.ts
-var FloatingMenu2 = {
+var FloatingMenu = {
   name: "FloatingMenu",
   props: {
     pluginKey: {
@@ -2318,7 +2256,7 @@ var FloatingMenu2 = {
   }
 };
 export {
-  BubbleMenu2 as BubbleMenu,
-  FloatingMenu2 as FloatingMenu
+  BubbleMenu,
+  FloatingMenu
 };
 //# sourceMappingURL=index.js.map