@tiptap/vue-3 3.20.2 → 3.20.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/vue-3",
   "description": "Vue components for tiptap",
-  "version": "3.20.2",
+  "version": "3.20.3",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -40,18 +40,18 @@
   ],
   "devDependencies": {
     "vue": "^3.5.13",
-    "@tiptap/core": "^3.20.2",
-    "@tiptap/pm": "^3.20.2"
+    "@tiptap/pm": "^3.20.3",
+    "@tiptap/core": "^3.20.3"
   },
   "optionalDependencies": {
-    "@tiptap/extension-bubble-menu": "^3.20.2",
-    "@tiptap/extension-floating-menu": "^3.20.2"
+    "@tiptap/extension-floating-menu": "^3.20.3",
+    "@tiptap/extension-bubble-menu": "^3.20.3"
   },
   "peerDependencies": {
     "vue": "^3.0.0",
     "@floating-ui/dom": "^1.0.0",
-    "@tiptap/core": "^3.20.2",
-    "@tiptap/pm": "^3.20.2"
+    "@tiptap/core": "^3.20.3",
+    "@tiptap/pm": "^3.20.3"
   },
   "repository": {
     "type": "git",

package/src/menus/BubbleMenu.ts

@@ -1,5 +1,6 @@
 import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
+import { PluginKey } from '@tiptap/pm/state'
 import type { PropType } from 'vue'
 import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 
@@ -11,7 +12,7 @@ export const BubbleMenu = defineComponent({
   props: {
     pluginKey: {
       type: [String, Object] as PropType<BubbleMenuPluginProps['pluginKey']>,
-      default: 'bubbleMenu',
+      default: undefined,
     },
 
     editor: {
@@ -52,18 +53,10 @@ export const BubbleMenu = defineComponent({
 
   setup(props, { slots, attrs }) {
     const root = ref<HTMLElement | null>(null)
+    const resolvedPluginKey = props.pluginKey ?? new PluginKey('bubbleMenu')
 
     onMounted(() => {
-      const {
-        editor,
-        options,
-        pluginKey,
-        resizeDelay,
-        appendTo,
-        shouldShow,
-        getReferencedVirtualElement,
-        updateDelay,
-      } = props
+      const { editor, options, resizeDelay, appendTo, shouldShow, getReferencedVirtualElement, updateDelay } = props
 
       const el = root.value
 
@@ -83,7 +76,7 @@ export const BubbleMenu = defineComponent({
             editor,
             element: el,
             options,
-            pluginKey,
+            pluginKey: resolvedPluginKey,
             resizeDelay,
             appendTo,
             shouldShow,
@@ -95,9 +88,9 @@ export const BubbleMenu = defineComponent({
     })
 
     onBeforeUnmount(() => {
-      const { pluginKey, editor } = props
+      const { editor } = props
 
-      editor.unregisterPlugin(pluginKey)
+      editor.unregisterPlugin(resolvedPluginKey)
     })
 
     // Vue owns this element; attrs are applied reactively by Vue

package/src/menus/FloatingMenu.ts

@@ -1,5 +1,6 @@
 import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'
+import { PluginKey } from '@tiptap/pm/state'
 import type { PropType } from 'vue'
 import { defineComponent, h, onBeforeUnmount, onMounted, ref } from 'vue'
 
@@ -13,7 +14,7 @@ export const FloatingMenu = defineComponent({
       // TODO: TypeScript breaks :(
       // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
       type: null,
-      default: 'floatingMenu',
+      default: undefined,
     },
 
     editor: {
@@ -49,9 +50,10 @@ export const FloatingMenu = defineComponent({
 
   setup(props, { slots, attrs }) {
     const root = ref<HTMLElement | null>(null)
+    const resolvedPluginKey = props.pluginKey ?? new PluginKey('floatingMenu')
 
     onMounted(() => {
-      const { pluginKey, editor, updateDelay, resizeDelay, options, appendTo, shouldShow } = props
+      const { editor, updateDelay, resizeDelay, options, appendTo, shouldShow } = props
 
       const el = root.value
 
@@ -67,7 +69,7 @@ export const FloatingMenu = defineComponent({
 
       editor.registerPlugin(
         FloatingMenuPlugin({
-          pluginKey,
+          pluginKey: resolvedPluginKey,
           editor,
           element: el,
           updateDelay,
@@ -80,9 +82,9 @@ export const FloatingMenu = defineComponent({
     })
 
     onBeforeUnmount(() => {
-      const { pluginKey, editor } = props
+      const { editor } = props
 
-      editor.unregisterPlugin(pluginKey)
+      editor.unregisterPlugin(resolvedPluginKey)
     })
 
     // Vue owns this element; attrs are applied reactively by Vue