@tiptap/vue-2 3.20.2 → 3.20.4

package/package.json

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

package/src/menus/BubbleMenu.ts

@@ -1,12 +1,17 @@
 import type { BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
+import { PluginKey } from '@tiptap/pm/state'
 import type { Component, CreateElement, PropType, VNode } from 'vue'
 
 export interface BubbleMenuInterface {
   $el: HTMLElement
+  $attrs: Record<string, any>
+  $listeners: Record<string, (...args: any[]) => unknown>
   $nextTick: (callback: () => void) => void
   $slots: { default?: VNode[] }
+  $vnode?: VNode
   pluginKey: BubbleMenuPluginProps['pluginKey']
+  generatedPluginKey?: BubbleMenuPluginProps['pluginKey']
   editor: BubbleMenuPluginProps['editor']
   updateDelay: BubbleMenuPluginProps['updateDelay']
   resizeDelay: BubbleMenuPluginProps['resizeDelay']
@@ -14,15 +19,18 @@ export interface BubbleMenuInterface {
   shouldShow: BubbleMenuPluginProps['shouldShow']
   getReferencedVirtualElement: BubbleMenuPluginProps['getReferencedVirtualElement']
   options: BubbleMenuPluginProps['options']
+  getPluginKey: () => BubbleMenuPluginProps['pluginKey']
 }
 
 export const BubbleMenu: Component = {
   name: 'BubbleMenu',
 
+  inheritAttrs: false,
+
   props: {
     pluginKey: {
       type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['pluginKey'], string>>],
-      default: 'bubbleMenu',
+      default: undefined,
     },
 
     editor: {
@@ -76,7 +84,7 @@ export const BubbleMenu: Component = {
           options: this.options,
           editor,
           element: el,
-          pluginKey: this.pluginKey,
+          pluginKey: this.getPluginKey(),
           appendTo: this.appendTo,
           shouldShow: this.shouldShow,
           getReferencedVirtualElement: this.getReferencedVirtualElement,
@@ -86,10 +94,31 @@ export const BubbleMenu: Component = {
   },
 
   render(this: BubbleMenuInterface, createElement: CreateElement) {
-    return createElement('div', {}, this.$slots.default)
+    const vnodeData = (this.$vnode?.data ?? {}) as any
+
+    return createElement(
+      'div',
+      {
+        attrs: this.$attrs,
+        on: this.$listeners,
+        class: [vnodeData.staticClass, vnodeData.class],
+        style: [vnodeData.staticStyle, vnodeData.style],
+      },
+      this.$slots.default,
+    )
   },
 
   beforeDestroy(this: BubbleMenuInterface) {
-    this.editor.unregisterPlugin(this.pluginKey)
+    this.editor.unregisterPlugin(this.getPluginKey())
+  },
+
+  methods: {
+    getPluginKey(this: BubbleMenuInterface) {
+      if (!this.generatedPluginKey) {
+        this.generatedPluginKey = this.pluginKey ?? new PluginKey('bubbleMenu')
+      }
+
+      return this.generatedPluginKey
+    },
   },
 }

package/src/menus/FloatingMenu.ts

@@ -1,25 +1,32 @@
 import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'
+import { PluginKey } from '@tiptap/pm/state'
 import type { Component, CreateElement, PropType } from 'vue'
 import type Vue from 'vue'
 
 export interface FloatingMenuInterface extends Vue {
+  $attrs: Record<string, any>
+  $listeners: Record<string, (...args: any[]) => unknown>
   pluginKey: FloatingMenuPluginProps['pluginKey']
+  generatedPluginKey?: FloatingMenuPluginProps['pluginKey']
   editor: FloatingMenuPluginProps['editor']
   updateDelay: FloatingMenuPluginProps['updateDelay']
   resizeDelay: FloatingMenuPluginProps['resizeDelay']
   options: FloatingMenuPluginProps['options']
   appendTo: FloatingMenuPluginProps['appendTo']
   shouldShow: FloatingMenuPluginProps['shouldShow']
+  getPluginKey: () => FloatingMenuPluginProps['pluginKey']
 }
 
 export const FloatingMenu: Component = {
   name: 'FloatingMenu',
 
+  inheritAttrs: false,
+
   props: {
     pluginKey: {
       type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['pluginKey'], string>>],
-      default: 'floatingMenu',
+      default: undefined,
     },
 
     editor: {
@@ -71,7 +78,7 @@ export const FloatingMenu: Component = {
         this.$nextTick(() => {
           editor.registerPlugin(
             FloatingMenuPlugin({
-              pluginKey: this.pluginKey,
+              pluginKey: this.getPluginKey(),
               editor,
               element: this.$el as HTMLElement,
               updateDelay: this.updateDelay,
@@ -87,10 +94,31 @@ export const FloatingMenu: Component = {
   },
 
   render(this: FloatingMenuInterface, createElement: CreateElement) {
-    return createElement('div', {}, this.$slots.default)
+    const vnodeData = (this.$vnode?.data ?? {}) as any
+
+    return createElement(
+      'div',
+      {
+        attrs: this.$attrs,
+        on: this.$listeners,
+        class: [vnodeData.staticClass, vnodeData.class],
+        style: [vnodeData.staticStyle, vnodeData.style],
+      },
+      this.$slots.default,
+    )
   },
 
   beforeDestroy(this: FloatingMenuInterface) {
-    this.editor.unregisterPlugin(this.pluginKey)
+    this.editor.unregisterPlugin(this.getPluginKey())
+  },
+
+  methods: {
+    getPluginKey(this: FloatingMenuInterface) {
+      if (!this.generatedPluginKey) {
+        this.generatedPluginKey = this.pluginKey ?? new PluginKey('floatingMenu')
+      }
+
+      return this.generatedPluginKey
+    },
   },
 }