Replacing domNode with editor element multiple times breaks editor bubble menu

[nmajor]

Question

So this isn't likely a bug with html-react-parser. I'm trying to use it in combination with react createPortal and an editor library called tiptap. Basically I'm parsing some html and for specific elements replacing them with the tiptap editor. But whenever there are multiple replacements like this then it breaks the tiptab bubble menu.

I made a sandbox to demonstrate:
https://codesandbox.io/p/sandbox/tiptap-multiple-72sdkg

I only have this issue when I use html-react-parser to add multiple editors. Something is happening where it miscalculates the offsets of the bubble menu which is basically a tooltip.

My question is this:

Can you think of anything that could explain this miscalculation? Is there some kind of component memoization or caching that could make the tooltip (that powers the bubble menu of the editor) no calculate the correct offsets? Or does anyone have any thoughts on how to work around this?

I'm just submitting a question and not a bug because I know this is likely a strange use of this library.

Please help. Any and all help or ideas are very much appreciated!

Keywords

tooltip offsets editor iframe react portal

[remarkablemark]

@nmajor if you use EditorProvider instead of useEditor, do you get the same issue?

[nmajor]

Thanks for the reply!

It looks like indeed the same issue happens with the EditorProvider.

I also noticed that if you add
tags below the editor replacement tag the offset grows with the number of
tags bellow.

I've updated the codesandbox with examples of both the EditorProvider and the
tags.

[nmajor]

Actually it looks like the issue is not with the parser. I created some more examples in the codesanbox and it looks like when there are multiple editors rendered inside an iframe the issue is there even when the multiple editors are rendered without the parser.

I'm sure you are busy. Thanks so much for taking some time to reply to me. And thanks for all your work maintaining this awesome library! Its very powerful and easy to work with.

[remarkablemark]

@nmajor Thanks for the update. Since it's unrelated to the parser, I will convert this issue to a discussion