@tiptap/react 3.17.0 → 3.18.0

package/src/menus/BubbleMenu.tsx

@@ -1,6 +1,6 @@
 import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
 import { useCurrentEditor } from '@tiptap/react'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
@@ -58,6 +58,18 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
     const bubbleMenuPluginPropsRef = useRef(bubbleMenuPluginProps)
     bubbleMenuPluginPropsRef.current = bubbleMenuPluginProps
 
+    /**
+     * Track whether the plugin has been initialized, so we only send updates
+     * after the initial registration.
+     */
+    const [pluginInitialized, setPluginInitialized] = useState(false)
+
+    /**
+     * Track whether we need to skip the first options update dispatch.
+     * This prevents unnecessary updates right after plugin initialization.
+     */
+    const skipFirstUpdateRef = useRef(true)
+
     useEffect(() => {
       if (pluginEditor?.isDestroyed) {
         return
@@ -82,7 +94,11 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
 
       const createdPluginKey = bubbleMenuPluginPropsRef.current.pluginKey
 
+      skipFirstUpdateRef.current = true
+      setPluginInitialized(true)
+
       return () => {
+        setPluginInitialized(false)
         pluginEditor.unregisterPlugin(createdPluginKey)
         window.requestAnimationFrame(() => {
           if (bubbleMenuElement.parentNode) {
@@ -92,6 +108,38 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
       }
     }, [pluginEditor])
 
+    /**
+     * Update the plugin options when props change after the plugin has been initialized.
+     * This allows dynamic updates to options like scrollTarget without re-registering the entire plugin.
+     */
+    useEffect(() => {
+      if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {
+        return
+      }
+
+      // Skip the first update right after initialization since the plugin was just created with these options
+      if (skipFirstUpdateRef.current) {
+        skipFirstUpdateRef.current = false
+        return
+      }
+
+      pluginEditor.view.dispatch(
+        pluginEditor.state.tr.setMeta('bubbleMenu', {
+          type: 'updateOptions',
+          options: bubbleMenuPluginPropsRef.current,
+        }),
+      )
+    }, [
+      pluginInitialized,
+      pluginEditor,
+      updateDelay,
+      resizeDelay,
+      shouldShow,
+      options,
+      appendTo,
+      getReferencedVirtualElement,
+    ])
+
     return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
   },
 )

package/src/menus/FloatingMenu.tsx

@@ -1,7 +1,7 @@
 import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'
 import { useCurrentEditor } from '@tiptap/react'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
@@ -36,48 +36,104 @@ export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(
 
     const { editor: currentEditor } = useCurrentEditor()
 
-    useEffect(() => {
-      const floatingMenuElement = menuEl.current
+    /**
+     * The editor instance where the floating menu plugin will be registered.
+     */
+    const pluginEditor = editor || currentEditor
 
-      floatingMenuElement.style.visibility = 'hidden'
-      floatingMenuElement.style.position = 'absolute'
+    // Creating a useMemo would be more computationally expensive than just
+    // re-creating this object on every render.
+    const floatingMenuPluginProps: Omit<FloatingMenuPluginProps, 'editor' | 'element'> = {
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      pluginKey,
+      shouldShow,
+      options,
+    }
+
+    /**
+     * The props for the floating menu plugin. They are accessed inside a ref to
+     * avoid running the useEffect hook and re-registering the plugin when the
+     * props change.
+     */
+    const floatingMenuPluginPropsRef = useRef(floatingMenuPluginProps)
+    floatingMenuPluginPropsRef.current = floatingMenuPluginProps
+
+    /**
+     * Track whether the plugin has been initialized, so we only send updates
+     * after the initial registration.
+     */
+    const [pluginInitialized, setPluginInitialized] = useState(false)
 
-      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {
+    /**
+     * Track whether we need to skip the first options update dispatch.
+     * This prevents unnecessary updates right after plugin initialization.
+     */
+    const skipFirstUpdateRef = useRef(true)
+
+    useEffect(() => {
+      if (pluginEditor?.isDestroyed) {
         return
       }
 
-      const attachToEditor = editor || currentEditor
-
-      if (!attachToEditor) {
+      if (!pluginEditor) {
         console.warn(
           'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',
         )
         return
       }
 
+      const floatingMenuElement = menuEl.current
+      floatingMenuElement.style.visibility = 'hidden'
+      floatingMenuElement.style.position = 'absolute'
+
       const plugin = FloatingMenuPlugin({
-        editor: attachToEditor,
+        ...floatingMenuPluginPropsRef.current,
+        editor: pluginEditor,
         element: floatingMenuElement,
-        pluginKey,
-        updateDelay,
-        resizeDelay,
-        appendTo,
-        shouldShow,
-        options,
       })
 
-      attachToEditor.registerPlugin(plugin)
+      pluginEditor.registerPlugin(plugin)
+
+      const createdPluginKey = floatingMenuPluginPropsRef.current.pluginKey
+
+      skipFirstUpdateRef.current = true
+      setPluginInitialized(true)
 
       return () => {
-        attachToEditor.unregisterPlugin(pluginKey)
+        setPluginInitialized(false)
+        pluginEditor.unregisterPlugin(createdPluginKey)
         window.requestAnimationFrame(() => {
           if (floatingMenuElement.parentNode) {
             floatingMenuElement.parentNode.removeChild(floatingMenuElement)
           }
         })
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [editor, currentEditor, appendTo, pluginKey, shouldShow, options, updateDelay, resizeDelay])
+    }, [pluginEditor])
+
+    /**
+     * Update the plugin options when props change after the plugin has been initialized.
+     * This allows dynamic updates to options like scrollTarget without re-registering the entire plugin.
+     */
+    useEffect(() => {
+      if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {
+        return
+      }
+
+      // Skip the first update right after initialization since the plugin was just created with these options
+      if (skipFirstUpdateRef.current) {
+        skipFirstUpdateRef.current = false
+        return
+      }
+
+      pluginEditor.view.dispatch(
+        pluginEditor.state.tr.setMeta('floatingMenu', {
+          type: 'updateOptions',
+          options: floatingMenuPluginPropsRef.current,
+        }),
+      )
+    }, [pluginInitialized, pluginEditor, updateDelay, resizeDelay, shouldShow, options, appendTo])
 
     return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
   },