feat: add key option and shouldShow option to menus (fix #1480, fix #1043, fix #1268, fix #1503)

* add key option to bubble menu

* ignore react for now

* add shouldShow option to bubble menu extension

* improve types

* remove BubbleMenuPluginKey

* add key and shouldShow option to floating menu extension

* fix: don’t show floating menu within code block

* docs: add new menu options

packages/vue-3/src/BubbleMenu.ts

@@ -6,16 +6,19 @@ import {
   onBeforeUnmount,
   defineComponent,
 } from 'vue'
-import {
-  BubbleMenuPlugin,
-  BubbleMenuPluginKey,
-  BubbleMenuPluginProps,
-} from '@tiptap/extension-bubble-menu'
+import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 
 export const BubbleMenu = defineComponent({
   name: 'BubbleMenu',
 
   props: {
+    pluginKey: {
+      // TODO: TypeScript breaks :(
+      // type: [String, Object as PropType<Exclude<BubbleMenuPluginProps['key'], string>>],
+      type: [String, Object],
+      default: 'bubbleMenu',
+    },
+
     editor: {
       type: Object as PropType<BubbleMenuPluginProps['editor']>,
       required: true,
@@ -25,25 +28,37 @@ export const BubbleMenu = defineComponent({
       type: Object as PropType<BubbleMenuPluginProps['tippyOptions']>,
       default: () => ({}),
     },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<BubbleMenuPluginProps['shouldShow'], null>>,
+      default: null,
+    },
   },
 
   setup(props, { slots }) {
     const root = ref<HTMLElement | null>(null)
 
     onMounted(() => {
-      const { editor, tippyOptions } = props
+      const {
+        pluginKey,
+        editor,
+        tippyOptions,
+        shouldShow,
+      } = props
 
       editor.registerPlugin(BubbleMenuPlugin({
+        key: pluginKey,
         editor,
         element: root.value as HTMLElement,
         tippyOptions,
+        shouldShow,
       }))
     })
 
     onBeforeUnmount(() => {
-      const { editor } = props
+      const { pluginKey, editor } = props
 
-      editor.unregisterPlugin(BubbleMenuPluginKey)
+      editor.unregisterPlugin(pluginKey)
     })
 
     return () => h('div', { ref: root }, slots.default?.())

packages/vue-3/src/FloatingMenu.ts

@@ -6,16 +6,19 @@ import {
   onBeforeUnmount,
   defineComponent,
 } from 'vue'
-import {
-  FloatingMenuPlugin,
-  FloatingMenuPluginKey,
-  FloatingMenuPluginProps,
-} from '@tiptap/extension-floating-menu'
+import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 
 export const FloatingMenu = defineComponent({
   name: 'FloatingMenu',
 
   props: {
+    pluginKey: {
+      // TODO: TypeScript breaks :(
+      // type: [String, Object as PropType<Exclude<FloatingMenuPluginProps['key'], string>>],
+      type: [String, Object],
+      default: 'floatingMenu',
+    },
+
     editor: {
       type: Object as PropType<FloatingMenuPluginProps['editor']>,
       required: true,
@@ -25,25 +28,37 @@ export const FloatingMenu = defineComponent({
       type: Object as PropType<FloatingMenuPluginProps['tippyOptions']>,
       default: () => ({}),
     },
+
+    shouldShow: {
+      type: Function as PropType<Exclude<FloatingMenuPluginProps['shouldShow'], null>>,
+      default: null,
+    },
   },
 
   setup(props, { slots }) {
     const root = ref<HTMLElement | null>(null)
 
     onMounted(() => {
-      const { editor, tippyOptions } = props
+      const {
+        pluginKey,
+        editor,
+        tippyOptions,
+        shouldShow,
+      } = props
 
       editor.registerPlugin(FloatingMenuPlugin({
+        key: pluginKey,
         editor,
         element: root.value as HTMLElement,
         tippyOptions,
+        shouldShow,
       }))
     })
 
     onBeforeUnmount(() => {
-      const { editor } = props
+      const { pluginKey, editor } = props
 
-      editor.unregisterPlugin(FloatingMenuPluginKey)
+      editor.unregisterPlugin(pluginKey)
     })
 
     return () => h('div', { ref: root }, slots.default?.())