@tiptap/vue-2 3.10.6 → 3.10.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/vue-2",
   "description": "Vue components for tiptap",
-  "version": "3.10.6",
+  "version": "3.10.7",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -43,17 +43,17 @@
   },
   "devDependencies": {
     "vue": "^2.7.16",
-    "@tiptap/core": "^3.10.6",
-    "@tiptap/pm": "^3.10.6"
+    "@tiptap/core": "^3.10.7",
+    "@tiptap/pm": "^3.10.7"
   },
   "optionalDependencies": {
-    "@tiptap/extension-bubble-menu": "^3.10.6",
-    "@tiptap/extension-floating-menu": "^3.10.6"
+    "@tiptap/extension-bubble-menu": "^3.10.7",
+    "@tiptap/extension-floating-menu": "^3.10.7"
   },
   "peerDependencies": {
     "vue": "^2.6.0",
-    "@tiptap/core": "^3.10.6",
-    "@tiptap/pm": "^3.10.6"
+    "@tiptap/core": "^3.10.7",
+    "@tiptap/pm": "^3.10.7"
   },
   "repository": {
     "type": "git",

package/src/menus/BubbleMenu.ts

@@ -1,9 +1,11 @@
 import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
-import type { Component, CreateElement, PropType } from 'vue'
-import type Vue from 'vue'
+import type { Component, CreateElement, PropType, VNode } from 'vue'
 
-export interface BubbleMenuInterface extends Vue {
+export interface BubbleMenuInterface {
+  $el: HTMLElement
+  $nextTick: (callback: () => void) => void
+  $slots: { default?: VNode[] }
   pluginKey: BubbleMenuPluginProps['pluginKey']
   editor: BubbleMenuPluginProps['editor']
   updateDelay: BubbleMenuPluginProps['updateDelay']
@@ -52,40 +54,35 @@ export const BubbleMenu: Component = {
     },
   },
 
-  watch: {
-    editor: {
-      immediate: true,
-      handler(this: BubbleMenuInterface, editor: BubbleMenuPluginProps['editor']) {
-        if (!editor) {
-          return
-        }
-
-        if (!this.$el) {
-          return
-        }
-
-        ;(this.$el as HTMLElement).style.visibility = 'hidden'
-        ;(this.$el as HTMLElement).style.position = 'absolute'
-
-        this.$el.remove()
-
-        this.$nextTick(() => {
-          editor.registerPlugin(
-            BubbleMenuPlugin({
-              updateDelay: this.updateDelay,
-              resizeDelay: this.resizeDelay,
-              options: this.options,
-              editor,
-              element: this.$el as HTMLElement,
-              pluginKey: this.pluginKey,
-              appendTo: this.appendTo,
-              shouldShow: this.shouldShow,
-              getReferencedVirtualElement: this.getReferencedVirtualElement,
-            }),
-          )
-        })
-      },
-    },
+  mounted(this: BubbleMenuInterface) {
+    const editor = this.editor
+    const el = this.$el as HTMLElement
+
+    if (!editor || !el) {
+      return
+    }
+
+    el.style.visibility = 'hidden'
+    el.style.position = 'absolute'
+
+    // Remove element from DOM; plugin will re-parent it when shown
+    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(this: BubbleMenuInterface, createElement: CreateElement) {