feat: add key option and shouldShow option to menus (fix ueberdosis#1480

, fix ueberdosis#1043, fix ueberdosis#1268, fix ueberdosis#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

src/BubbleMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
 
 export type BubbleMenuProps = Omit<BubbleMenuPluginProps, 'element'> & {
   className?: string,
@@ -9,16 +9,23 @@ export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
   const element = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const { editor, tippyOptions } = props
+    const {
+      key,
+      editor,
+      tippyOptions,
+      shouldShow,
+    } = props
 
     editor.registerPlugin(BubbleMenuPlugin({
+      key,
       editor,
       element: element.current as HTMLElement,
       tippyOptions,
+      shouldShow,
     }))
 
     return () => {
-      editor.unregisterPlugin(BubbleMenuPluginKey)
+      editor.unregisterPlugin(key)
     }
   }, [])
 

src/FloatingMenu.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { FloatingMenuPlugin, FloatingMenuPluginKey, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 
 export type FloatingMenuProps = Omit<FloatingMenuPluginProps, 'element'> & {
   className?: string,
@@ -9,16 +9,23 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
   const element = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const { editor, tippyOptions } = props
+    const {
+      key,
+      editor,
+      tippyOptions,
+      shouldShow,
+    } = props
 
     editor.registerPlugin(FloatingMenuPlugin({
+      key,
       editor,
       element: element.current as HTMLElement,
       tippyOptions,
+      shouldShow,
     }))
 
     return () => {
-      editor.unregisterPlugin(FloatingMenuPluginKey)
+      editor.unregisterPlugin(key)
     }
   }, [])