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/extension-floating-menu/src/floating-menu-plugin.ts

@@ -4,9 +4,16 @@ import { EditorView } from 'prosemirror-view'
 import tippy, { Instance, Props } from 'tippy.js'
 
 export interface FloatingMenuPluginProps {
+  key: PluginKey | string,
   editor: Editor,
   element: HTMLElement,
   tippyOptions?: Partial<Props>,
+  shouldShow: ((props: {
+    editor: Editor,
+    view: EditorView,
+    state: EditorState,
+    oldState?: EditorState,
+  }) => boolean) | null,
 }
 
 export type FloatingMenuViewProps = FloatingMenuPluginProps & {
@@ -24,15 +31,36 @@ export class FloatingMenuView {
 
   public tippy!: Instance
 
+  public shouldShow: Exclude<FloatingMenuPluginProps['shouldShow'], null> = ({ state }) => {
+    const { selection } = state
+    const { $anchor, empty } = selection
+    const isRootDepth = $anchor.depth === 1
+    const isEmptyTextBlock = $anchor.parent.isTextblock
+      && !$anchor.parent.type.spec.code
+      && !$anchor.parent.textContent
+
+    if (!empty || !isRootDepth || !isEmptyTextBlock) {
+      return false
+    }
+
+    return true
+  }
+
   constructor({
     editor,
     element,
     view,
     tippyOptions,
+    shouldShow,
   }: FloatingMenuViewProps) {
     this.editor = editor
     this.element = element
     this.view = view
+
+    if (shouldShow) {
+      this.shouldShow = shouldShow
+    }
+
     this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
     this.editor.on('focus', this.focusHandler)
     this.editor.on('blur', this.blurHandler)
@@ -82,23 +110,21 @@ export class FloatingMenuView {
   update(view: EditorView, oldState?: EditorState) {
     const { state, composing } = view
     const { doc, selection } = state
+    const { from, to } = selection
     const isSame = oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection)
 
     if (composing || isSame) {
       return
     }
 
-    const {
-      $anchor,
-      empty,
-      from,
-      to,
-    } = selection
-    const isRootDepth = $anchor.depth === 1
-    const isNodeEmpty = !selection.$anchor.parent.isLeaf && !selection.$anchor.parent.textContent
-    const isActive = isRootDepth && isNodeEmpty
+    const shouldShow = this.shouldShow({
+      editor: this.editor,
+      view,
+      state,
+      oldState,
+    })
 
-    if (!empty || !isActive) {
+    if (!shouldShow) {
       this.hide()
 
       return
@@ -127,11 +153,11 @@ export class FloatingMenuView {
   }
 }
 
-export const FloatingMenuPluginKey = new PluginKey('menuFloating')
-
 export const FloatingMenuPlugin = (options: FloatingMenuPluginProps) => {
   return new Plugin({
-    key: FloatingMenuPluginKey,
+    key: typeof options.key === 'string'
+      ? new PluginKey(options.key)
+      : options.key,
     view: view => new FloatingMenuView({ view, ...options }),
   })
 }

packages/extension-floating-menu/src/floating-menu.ts

@@ -11,6 +11,8 @@ export const FloatingMenu = Extension.create<FloatingMenuOptions>({
   defaultOptions: {
     element: null,
     tippyOptions: {},
+    key: 'floatingMenu',
+    shouldShow: null,
   },
 
   addProseMirrorPlugins() {
@@ -20,9 +22,11 @@ export const FloatingMenu = Extension.create<FloatingMenuOptions>({
 
     return [
       FloatingMenuPlugin({
+        key: this.options.key,
         editor: this.editor,
         element: this.options.element,
         tippyOptions: this.options.tippyOptions,
+        shouldShow: this.options.shouldShow,
       }),
     ]
   },