fix: resolve Vue 2 BubbleMenu plugin registration lifecycle issue (#7226)

The BubbleMenu component was using a watcher with immediate: true, causing it to execute before the component mounted. This resulted in $el being null/undefined, preventing registerPlugin from ever being called.

Changed to use the mounted lifecycle hook to ensure the DOM element exists before plugin registration, matching the Vue 3 implementation approach.

Co-authored-by: Claude <[email protected]>

Author: bdbch

.changeset/fix-bubble-menu-registration-quiet-storm-peak.md

@@ -0,0 +1,5 @@
+---
+"@tiptap/vue-2": patch
+---
+
+Fix BubbleMenu plugin registration not triggering due to missing element reference during component initialization.

packages/vue-2/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) {