@tiptap/react 3.20.1 → 3.20.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "3.20.1",
+  "version": "3.20.3",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -48,20 +48,20 @@
     "@types/react-dom": "^19.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@tiptap/core": "^3.20.1",
-    "@tiptap/pm": "^3.20.1"
+    "@tiptap/core": "^3.20.3",
+    "@tiptap/pm": "^3.20.3"
   },
   "optionalDependencies": {
-    "@tiptap/extension-bubble-menu": "^3.20.1",
-    "@tiptap/extension-floating-menu": "^3.20.1"
+    "@tiptap/extension-bubble-menu": "^3.20.3",
+    "@tiptap/extension-floating-menu": "^3.20.3"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@tiptap/core": "^3.20.1",
-    "@tiptap/pm": "^3.20.1"
+    "@tiptap/core": "^3.20.3",
+    "@tiptap/pm": "^3.20.3"
   },
   "repository": {
     "type": "git",

package/src/menus/BubbleMenu.spec.ts

@@ -0,0 +1,174 @@
+import { render } from '@testing-library/react'
+import React, { createRef } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { BubbleMenu } from './BubbleMenu.js'
+
+const { bubbleMenuPluginMock } = vi.hoisted(() => ({
+  bubbleMenuPluginMock: vi.fn(() => ({ key: 'bubble-menu-plugin' })),
+}))
+
+vi.mock('@tiptap/extension-bubble-menu', () => ({
+  BubbleMenuPlugin: bubbleMenuPluginMock,
+}))
+
+function createEditor() {
+  const tr = {
+    setMeta: vi.fn(() => tr),
+  }
+
+  return {
+    isDestroyed: false,
+    registerPlugin: vi.fn(),
+    unregisterPlugin: vi.fn(),
+    view: {
+      dispatch: vi.fn(),
+    },
+    state: {
+      tr,
+    },
+  }
+}
+
+describe('BubbleMenu', () => {
+  beforeEach(() => {
+    bubbleMenuPluginMock.mockClear()
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('applies html props to the actual menu element', () => {
+    const editor = createEditor()
+    const ref = createRef<HTMLDivElement>()
+    const handleClick = vi.fn()
+    let lastEvent: any
+    const handleClickCapture = vi.fn()
+    const handleDoubleClick = vi.fn()
+    const initialProps = {
+      editor: editor as never,
+      className: 'bubble-menu',
+      'data-testid': 'menu-element',
+      'aria-label': 'Bubble menu',
+      style: { zIndex: 9999, marginTop: 8, position: 'relative' },
+      onClick: (event: unknown) => {
+        lastEvent = event
+        handleClick()
+      },
+      onClickCapture: handleClickCapture,
+      onDoubleClick: handleDoubleClick,
+      dangerouslySetInnerHTML: { __html: 'ignored' },
+      pluginKey: 'bubbleMenu',
+      tabIndex: 3,
+      ref,
+      children: React.createElement('button', { type: 'button' }, 'Menu action'),
+    } as any
+    const updatedProps = {
+      editor: editor as never,
+      className: 'bubble-menu-updated',
+      style: { zIndex: 1000, marginTop: 16, position: 'static' },
+      onClick: undefined,
+      onClickCapture: undefined,
+      onDoubleClick: undefined,
+      pluginKey: 'bubbleMenu',
+      tabIndex: undefined,
+      ref,
+      children: React.createElement('button', { type: 'button' }, 'Updated action'),
+    } as any
+
+    const { rerender, unmount } = render(React.createElement(BubbleMenu, initialProps))
+
+    expect(editor.registerPlugin).toHaveBeenCalledTimes(1)
+    expect(bubbleMenuPluginMock).toHaveBeenCalledTimes(1)
+
+    const [{ element }] = bubbleMenuPluginMock.mock.calls[0] as unknown as [{ element: HTMLDivElement }]
+
+    expect(element).toBeInstanceOf(HTMLDivElement)
+    expect(element).toBe(ref.current)
+    expect(element.className).toBe('bubble-menu')
+    expect(element.getAttribute('data-testid')).toBe('menu-element')
+    expect(element.getAttribute('aria-label')).toBe('Bubble menu')
+    expect(element.tabIndex).toBe(3)
+    expect(element.style.zIndex).toBe('9999')
+    expect(element.style.marginTop).toBe('8px')
+    expect(element.style.position).toBe('absolute')
+    expect(element.getAttribute('dangerouslySetInnerHTML')).toBeNull()
+
+    element.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    element.querySelector('button')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(handleClick).toHaveBeenCalledTimes(2)
+    expect(handleDoubleClick).toHaveBeenCalledTimes(1)
+    expect(handleClickCapture).toHaveBeenCalledTimes(2)
+    expect(lastEvent.nativeEvent).toBeInstanceOf(MouseEvent)
+    expect(lastEvent.currentTarget).toBe(element)
+    expect(lastEvent.target).toBeInstanceOf(Element)
+    expect(typeof lastEvent.persist).toBe('function')
+    expect(element.textContent).toContain('Menu action')
+
+    rerender(React.createElement(BubbleMenu, updatedProps))
+
+    expect(element.className).toBe('bubble-menu-updated')
+    expect(element.getAttribute('data-testid')).toBeNull()
+    expect(element.getAttribute('aria-label')).toBeNull()
+    expect(element.tabIndex).toBe(-1)
+    expect(element.style.zIndex).toBe('1000')
+    expect(element.style.marginTop).toBe('16px')
+    expect(element.style.position).toBe('absolute')
+
+    element.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    element.querySelector('button')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(handleClick).toHaveBeenCalledTimes(2)
+    expect(handleDoubleClick).toHaveBeenCalledTimes(1)
+    expect(handleClickCapture).toHaveBeenCalledTimes(2)
+    expect(element.textContent).toContain('Updated action')
+
+    unmount()
+
+    expect(editor.unregisterPlugin).toHaveBeenCalledWith('bubbleMenu')
+  })
+
+  it('creates unique plugin keys when none are provided', () => {
+    const editor = createEditor()
+    const shouldShowA = vi.fn(() => true)
+    const shouldShowB = vi.fn(() => false)
+
+    const { unmount } = render(
+      React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(BubbleMenu, {
+          editor: editor as never,
+          shouldShow: shouldShowA,
+          children: React.createElement('button', { type: 'button' }, 'First'),
+        } as any),
+        React.createElement(BubbleMenu, {
+          editor: editor as never,
+          shouldShow: shouldShowB,
+          children: React.createElement('button', { type: 'button' }, 'Second'),
+        } as any),
+      ),
+    )
+
+    expect(bubbleMenuPluginMock).toHaveBeenCalledTimes(2)
+
+    const pluginCalls = bubbleMenuPluginMock.mock.calls as unknown as Array<[{ pluginKey: unknown }]>
+    const firstPluginKey = pluginCalls[0][0].pluginKey
+    const secondPluginKey = pluginCalls[1][0].pluginKey
+
+    expect(firstPluginKey).toBeDefined()
+    expect(secondPluginKey).toBeDefined()
+    expect(firstPluginKey).not.toBe(secondPluginKey)
+
+    unmount()
+
+    const unregisterCalls = editor.unregisterPlugin.mock.calls as unknown as Array<[unknown]>
+
+    expect(unregisterCalls.some(([key]) => key === firstPluginKey)).toBe(true)
+    expect(unregisterCalls.some(([key]) => key === secondPluginKey)).toBe(true)
+  })
+})

package/src/menus/BubbleMenu.tsx

@@ -1,8 +1,12 @@
 import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
+import type { PluginKey } from '@tiptap/pm/state'
 import { useCurrentEditor } from '@tiptap/react'
 import React, { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
+import { getAutoPluginKey } from './getAutoPluginKey.js'
+import { useMenuElementProps } from './useMenuElementProps.js'
+
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
 export type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &
@@ -11,7 +15,7 @@ export type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'plu
 export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
   (
     {
-      pluginKey = 'bubbleMenu',
+      pluginKey,
       editor,
       updateDelay,
       resizeDelay,
@@ -25,6 +29,9 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
     ref,
   ) => {
     const menuEl = useRef(document.createElement('div'))
+    const resolvedPluginKey = useRef<PluginKey | string>(getAutoPluginKey(pluginKey, 'bubbleMenu')).current
+
+    useMenuElementProps(menuEl.current, restProps)
 
     if (typeof ref === 'function') {
       ref(menuEl.current)
@@ -45,7 +52,7 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
       updateDelay,
       resizeDelay,
       appendTo,
-      pluginKey,
+      pluginKey: resolvedPluginKey,
       shouldShow,
       getReferencedVirtualElement,
       options,
@@ -124,7 +131,7 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
       }
 
       pluginEditor.view.dispatch(
-        pluginEditor.state.tr.setMeta(pluginKey, {
+        pluginEditor.state.tr.setMeta(resolvedPluginKey, {
           type: 'updateOptions',
           options: bubbleMenuPluginPropsRef.current,
         }),
@@ -138,8 +145,9 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
       options,
       appendTo,
       getReferencedVirtualElement,
+      resolvedPluginKey,
     ])
 
-    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
+    return createPortal(children, menuEl.current)
   },
 )

package/src/menus/FloatingMenu.spec.ts

@@ -0,0 +1,164 @@
+import { render } from '@testing-library/react'
+import React, { createRef } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { FloatingMenu } from './FloatingMenu.js'
+
+const { floatingMenuPluginMock } = vi.hoisted(() => ({
+  floatingMenuPluginMock: vi.fn(() => ({ key: 'floating-menu-plugin' })),
+}))
+
+vi.mock('@tiptap/extension-floating-menu', () => ({
+  FloatingMenuPlugin: floatingMenuPluginMock,
+}))
+
+function createEditor() {
+  const tr = {
+    setMeta: vi.fn(() => tr),
+  }
+
+  return {
+    isDestroyed: false,
+    registerPlugin: vi.fn(),
+    unregisterPlugin: vi.fn(),
+    view: {
+      dispatch: vi.fn(),
+    },
+    state: {
+      tr,
+    },
+  }
+}
+
+describe('FloatingMenu', () => {
+  beforeEach(() => {
+    floatingMenuPluginMock.mockClear()
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('applies html props to the actual menu element', () => {
+    const editor = createEditor()
+    const ref = createRef<HTMLDivElement>()
+    const handleClick = vi.fn()
+    const handleClickCapture = vi.fn()
+    const handleDoubleClick = vi.fn()
+    const initialProps = {
+      editor: editor as never,
+      className: 'floating-menu',
+      'data-testid': 'floating-element',
+      'aria-label': 'Floating menu',
+      style: { zIndex: 8888, marginTop: 12, position: 'relative' },
+      onClick: handleClick,
+      onClickCapture: handleClickCapture,
+      onDoubleClick: handleDoubleClick,
+      pluginKey: 'floatingMenu',
+      tabIndex: 5,
+      ref,
+      children: React.createElement('button', { type: 'button' }, 'Floating action'),
+    } as any
+    const updatedProps = {
+      editor: editor as never,
+      className: 'floating-menu-updated',
+      style: { zIndex: 7777, marginTop: 20, position: 'static' },
+      onClick: undefined,
+      onClickCapture: undefined,
+      onDoubleClick: undefined,
+      pluginKey: 'floatingMenu',
+      tabIndex: undefined,
+      ref,
+      children: React.createElement('button', { type: 'button' }, 'Updated floating action'),
+    } as any
+
+    const { rerender, unmount } = render(React.createElement(FloatingMenu, initialProps))
+
+    expect(editor.registerPlugin).toHaveBeenCalledTimes(1)
+    expect(floatingMenuPluginMock).toHaveBeenCalledTimes(1)
+
+    const [{ element }] = floatingMenuPluginMock.mock.calls[0] as unknown as [{ element: HTMLDivElement }]
+
+    expect(element).toBeInstanceOf(HTMLDivElement)
+    expect(element).toBe(ref.current)
+    expect(element.className).toBe('floating-menu')
+    expect(element.getAttribute('data-testid')).toBe('floating-element')
+    expect(element.getAttribute('aria-label')).toBe('Floating menu')
+    expect(element.tabIndex).toBe(5)
+    expect(element.style.zIndex).toBe('8888')
+    expect(element.style.marginTop).toBe('12px')
+    expect(element.style.position).toBe('absolute')
+
+    element.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    element.querySelector('button')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(handleClick).toHaveBeenCalledTimes(2)
+    expect(handleDoubleClick).toHaveBeenCalledTimes(1)
+    expect(handleClickCapture).toHaveBeenCalledTimes(2)
+    expect(element.textContent).toContain('Floating action')
+
+    rerender(React.createElement(FloatingMenu, updatedProps))
+
+    expect(element.className).toBe('floating-menu-updated')
+    expect(element.getAttribute('data-testid')).toBeNull()
+    expect(element.getAttribute('aria-label')).toBeNull()
+    expect(element.tabIndex).toBe(-1)
+    expect(element.style.zIndex).toBe('7777')
+    expect(element.style.marginTop).toBe('20px')
+    expect(element.style.position).toBe('absolute')
+
+    element.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    element.querySelector('button')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(handleClick).toHaveBeenCalledTimes(2)
+    expect(handleDoubleClick).toHaveBeenCalledTimes(1)
+    expect(handleClickCapture).toHaveBeenCalledTimes(2)
+    expect(element.textContent).toContain('Updated floating action')
+
+    unmount()
+
+    expect(editor.unregisterPlugin).toHaveBeenCalledWith('floatingMenu')
+  })
+
+  it('creates unique plugin keys when none are provided', () => {
+    const editor = createEditor()
+    const shouldShowA = vi.fn(() => true)
+    const shouldShowB = vi.fn(() => false)
+
+    const { unmount } = render(
+      React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(FloatingMenu, {
+          editor: editor as never,
+          shouldShow: shouldShowA,
+          children: React.createElement('button', { type: 'button' }, 'First'),
+        } as any),
+        React.createElement(FloatingMenu, {
+          editor: editor as never,
+          shouldShow: shouldShowB,
+          children: React.createElement('button', { type: 'button' }, 'Second'),
+        } as any),
+      ),
+    )
+
+    expect(floatingMenuPluginMock).toHaveBeenCalledTimes(2)
+
+    const pluginCalls = floatingMenuPluginMock.mock.calls as unknown as Array<[{ pluginKey: unknown }]>
+    const firstPluginKey = pluginCalls[0][0].pluginKey
+    const secondPluginKey = pluginCalls[1][0].pluginKey
+
+    expect(firstPluginKey).toBeDefined()
+    expect(secondPluginKey).toBeDefined()
+    expect(firstPluginKey).not.toBe(secondPluginKey)
+
+    unmount()
+
+    const unregisterCalls = editor.unregisterPlugin.mock.calls as unknown as Array<[unknown]>
+
+    expect(unregisterCalls.some(([key]) => key === firstPluginKey)).toBe(true)
+    expect(unregisterCalls.some(([key]) => key === secondPluginKey)).toBe(true)
+  })
+})

package/src/menus/FloatingMenu.tsx

@@ -1,9 +1,13 @@
 import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
 import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'
+import type { PluginKey } from '@tiptap/pm/state'
 import { useCurrentEditor } from '@tiptap/react'
 import React, { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 
+import { getAutoPluginKey } from './getAutoPluginKey.js'
+import { useMenuElementProps } from './useMenuElementProps.js'
+
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
 export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
@@ -13,20 +17,13 @@ export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKe
 
 export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(
   (
-    {
-      pluginKey = 'floatingMenu',
-      editor,
-      updateDelay,
-      resizeDelay,
-      appendTo,
-      shouldShow = null,
-      options,
-      children,
-      ...restProps
-    },
+    { pluginKey, editor, updateDelay, resizeDelay, appendTo, shouldShow = null, options, children, ...restProps },
     ref,
   ) => {
     const menuEl = useRef(document.createElement('div'))
+    const resolvedPluginKey = useRef<PluginKey | string>(getAutoPluginKey(pluginKey, 'floatingMenu')).current
+
+    useMenuElementProps(menuEl.current, restProps)
 
     if (typeof ref === 'function') {
       ref(menuEl.current)
@@ -47,7 +44,7 @@ export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(
       updateDelay,
       resizeDelay,
       appendTo,
-      pluginKey,
+      pluginKey: resolvedPluginKey,
       shouldShow,
       options,
     }
@@ -128,13 +125,13 @@ export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(
       }
 
       pluginEditor.view.dispatch(
-        pluginEditor.state.tr.setMeta(pluginKey, {
+        pluginEditor.state.tr.setMeta(resolvedPluginKey, {
           type: 'updateOptions',
           options: floatingMenuPluginPropsRef.current,
         }),
       )
-    }, [pluginInitialized, pluginEditor, updateDelay, resizeDelay, shouldShow, options, appendTo])
+    }, [pluginInitialized, pluginEditor, updateDelay, resizeDelay, shouldShow, options, appendTo, resolvedPluginKey])
 
-    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
+    return createPortal(children, menuEl.current)
   },
 )

package/src/menus/getAutoPluginKey.ts

@@ -0,0 +1,5 @@
+import { PluginKey } from '@tiptap/pm/state'
+
+export function getAutoPluginKey(pluginKey: PluginKey | string | undefined, defaultName: string) {
+  return pluginKey ?? new PluginKey(defaultName)
+}