fix: fix React Node View render problem in React 18

[Darmody]

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 anchorNode points to a react portal dom, it is still not mounted (anchorNode.isConnect equals 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 flushSync is necessary to opt-out of automatic batching https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#automatic-batching

[netlify[bot]]

✅ Deploy Preview for tiptap-embed ready!

Name	Link
🔨 Latest commit	4f47f777733e6ded8677212cbc91ec43535df60a
🔍 Latest deploy log	https://app.netlify.com/sites/tiptap-embed/deploys/62d0451821b3be00091ff529
😎 Deploy Preview	https://deploy-preview-2985--tiptap-embed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[coderinblack08]

Outputs error in console:

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.

[jamesopti]

Any updates here from the Tiptap team?

[essential-randomness]

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.

Has this made it to a release? I'm still getting the error above on 2.0.0-beta.194.

[sampi]

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.

Has this made it to a release? I'm still getting the error above on 2.0.0-beta.194.

I believe that this PR causes that error, it doesn't happen in 2.0.0-beta.114

[essential-randomness]

Indeed. Can confirm the code for this PR is there on 2.0.0-beta.194, where I'm seeing the issue above.

[bdbch]

This should be included in 2.0.0-beta.194 yes.