fix: fix React Node View render problem in React 18 #2985
Conversation
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
|
Outputs error in console: |
|
Any updates here from the Tiptap team? |
Has this made it to a release? I'm still getting the error above on |
I believe that this PR causes that error, it doesn't happen in |
|
Indeed. Can confirm the code for this PR is there on |
|
This should be included in |
To avoid seeing the `Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.` error, we need to move the `flushSync()` code that avoids automatic batching to a microtask to not fire a lifecycle event `setState()` during rendering. Fixes warning introduced in ueberdosis#2985
To avoid seeing the `Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.` error, we need to move the `flushSync()` code that avoids automatic batching to a microtask to not fire a lifecycle event `setState()` during rendering. Fixes warning introduced in #2985
To avoid seeing the `Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task.` error, we need to move the `flushSync()` code that avoids automatic batching to a microtask to not fire a lifecycle event `setState()` during rendering. Fixes warning introduced in ueberdosis#2985
After switching to
React 18 createRoot() API, we met the selection bug for the block using react custom node view.https://github.com/ProseMirror/prosemirror-view/blob/master/src/viewdesc.ts#L420
When prosemirror wants to update the dom selection, if the
anchorNodepoints to a react portal dom, it is still not mounted (anchorNode.isConnectequals false). This will cause the selection to stay in the position before when create a new block with the react node view.For example, extending the paragraph with react node view and pressing Enter at the end of the document will reproduce this bug.
After digging the code, I think the bug comes from https://github.com/ueberdosis/tiptap/blob/main/packages/react/src/ReactRenderer.tsx#L80-L88
After React 18 updates inside of timeouts, promises, native event handlers, or any other event are batched.
https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching
That causes the node view portals to render in an async way.
https://github.com/ueberdosis/tiptap/blob/main/packages/react/src/EditorContent.tsx#L7-L19
So
flushSyncis necessary to opt-out of automatic batchinghttps://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching