refactor(bubble-menu): always take the latest shouldShow callback, expose default implementation

packages/extension-bubble-menu/src/bubble-menu-plugin.ts

@@ -77,11 +77,18 @@ export class BubbleMenuView {
 
   private updateDebounceTimer: number | undefined
 
-  public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({
+  public shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null>
+
+  /**
+   * The default `shouldShow` function.
+   */
+  public static shouldShow: Exclude<BubbleMenuPluginProps['shouldShow'], null> = ({
     view,
     state,
     from,
     to,
+    element,
+    editor,
   }) => {
     const { doc, selection } = state
     const { empty } = selection
@@ -94,11 +101,11 @@ export class BubbleMenuView {
     // When clicking on a element inside the bubble menu the editor "blur" event
     // is called and the bubble menu item is focussed. In this case we should
     // consider the menu as part of the editor and keep showing the menu
-    const isChildOfMenu = this.element.contains(document.activeElement)
+    const isChildOfMenu = element.contains(document.activeElement)
 
     const hasEditorFocus = view.hasFocus() || isChildOfMenu
 
-    if (!hasEditorFocus || empty || isEmptyTextBlock || !this.editor.isEditable) {
+    if (!hasEditorFocus || empty || isEmptyTextBlock || !editor.isEditable) {
       return false
     }
 
@@ -120,6 +127,8 @@ export class BubbleMenuView {
 
     if (shouldShow) {
       this.shouldShow = shouldShow
+    } else {
+      this.shouldShow = BubbleMenuView.shouldShow
     }
 
     this.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })

packages/react/src/BubbleMenu.tsx

@@ -1,4 +1,4 @@
-import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import { BubbleMenuPlugin, BubbleMenuPluginProps, BubbleMenuView } from '@tiptap/extension-bubble-menu'
 import React, { useEffect, useState } from 'react'
 
 import { useCurrentEditor } from './Context.js'
@@ -15,6 +15,9 @@ export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>,
 export const BubbleMenu = (props: BubbleMenuProps) => {
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const { editor: currentEditor } = useCurrentEditor()
+  const latestProps = React.useRef(props)
+
+  latestProps.current = props
 
   useEffect(() => {
     if (!element) {
@@ -25,24 +28,23 @@ export const BubbleMenu = (props: BubbleMenuProps) => {
       return
     }
 
-    const {
-      pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null,
-    } = props
-
-    const menuEditor = editor || currentEditor
+    const menuEditor = props.editor || currentEditor
+    const pluginKey = latestProps.current.pluginKey ?? 'bubbleMenu'
 
     if (!menuEditor) {
       console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')
       return
     }
 
     const plugin = BubbleMenuPlugin({
-      updateDelay,
+      updateDelay: latestProps.current.updateDelay,
       editor: menuEditor,
       element,
       pluginKey,
-      shouldShow,
-      tippyOptions,
+      shouldShow: (...args) => {
+        return (latestProps.current.shouldShow ?? BubbleMenuView.shouldShow)?.(...args) ?? false
+      },
+      tippyOptions: latestProps.current.tippyOptions,
     })
 
     menuEditor.registerPlugin(plugin)