Rendering multiple editor on a page causes unexpected behavior on drag and drop.

[gillchristian]

This is a copy from my question in Discord.

Does the editor use a single global instance of Prosemirror/TipTap? I'm working on a translation app that requires two side by side editors and most of it works fine but when I reorder blocks they also get added to the other editor 😅

This is basically what happens, after I drag the "Paragraph 2" block to the top of the left side document, a "Paragraph 2" block appears on the document on the right.

I'm looking at the code and I see a new instance of TipTap Editor is created when useBlockNote mounts. And looking at TipTap code, the Editor class extends EventEmitter so maybe the issue is there. The events getting mixed in different instances 🤔

🤔 the events get the instance of the editor
https://github.com/ueberdosis/tiptap/blob/develop/packages/core/src/types.ts#L39-L48
https://github.com/ueberdosis/tiptap/blob/develop/packages/core/src/Editor.ts#L83

So I'm not sure why the the updates are being mixed up on two editor instances

---

The code of my app is not public in GitHub but you can play out with the issue here in this document https://slateapp.vercel.app/p/643efced2e05617eb0f7cfba

Here's a CodeSandbox that reproduces the issue https://codesandbox.io/s/blocknote-multiple-editors-bug-peo6bp

The code in Editor.tsx is exactly the same as I have it in my app, and the code in App.tsx is quite similar.

The duplication issue happens after trying to reorder a few times. I can consistently reproduce by adding a few paragraphs and a heading in "Editor A" and moving the heading to the top.

After that any reordering on "Editor B" results in a block (the heading most of the time) being added to "Editor A", rather than the reordering taking place at all.