[Bug]: React node views unexpectedly move state between nodes

[andy-hook]

Affected Packages

react, bubble-menu, extension-collaboration, extension-placeholder

Version(s)

2.10.2

Bug Description

Hello! My team has been experiencing some very strange behaviour while using a custom React node view in combination with collaboration, placeholder and React BubbleMenu.

When the editor initially loads, it's possible for the internal React state of a node view to "move" to a preceding node. It seems there is some strange reconciliation behaviour happening with the decorations applied by placeholder as well as the registration of the BubbleMenu plugin when the views are surrounded by empty paragraph nodes.

To reproduce:

1. Open https://tiptap-node-view-state-repro.vercel.app/
2. Click "mount menu"
3. Click button 4
4. Click the second empty paragraph node
5. Local state is now applied to node 2

CleanShot.2024-12-11.at.14.19.49.mp4

This does not occur if:

• The paragraphs already contain content
• The menu is mounted and each paragraph is selected before interacting with any of the node views
• BubbleMenu is registered as soon as possible*
• Collaboration or Placeholder is removed

*We are running TipTap in production and the only surefire way to resolve this has been to remove Placeholder, even when using the menu.

Browser Used

Chrome

Code Example URL

https://github.com/andy-hook/tiptap-node-view-state-repro

Expected Behavior

Every node view retains it's state while interacting with the editor

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.