editor freezes on rendering words as spans

[devcer]

Summary

I'm building an editor where each word will be rendered as span with additional attributes attached to each span. However, the editor freezes for bigger content. If I start using EntityReferenceExtension, it starts to freeze even more often.

Steps to reproduce

• Go to https://codesandbox.io/s/zealous-sunset-noc1e7?file=/src/Debug.js
• Try editing the content here

Expected results

You should be able to edit the content and even draw annotations.

Actual results

The page freezes on load and unable to edit anything.

Possible Solution

Not sure what is blocking the render to freeze. spent enough time debugging it and found some mouse event is blocking the render if I check the performance tab.

Screenshot(s)

Screen.Recording.2023-01-11.at.17.37.36.mov

In this video, I'm trying to click on the editor to make changes but I couldn't

Please add a sponsored label to this issue as we are sponsors.

[cashwanikumar]

To add more content, I have attached a profiler screenshot where the Remmiror portal changes every time I type (ref: rect_profile.png)

and in chrome dev performance, there is a keypress event which takes a good amount of time when typing (ref: chrome_perfomace.png)

[cashwanikumar]

little explanation

edit_freeze.webm

[IdrissMahjoubi]

@cashwanikumar Each mouse click/ key press triggers an update in the editor. This update usually go through all extensions. Try excluding extensions and retesting to detect which one is causing the most performance issues.
Granted EntityReferenceExtension is know to cause some performance issues since it recalculates all references on each update (going through all the document tree), which is not ideal. Which also mean the more content you have the longer calculations take.I might looks into that this week to make performance improvement, but this is unlikely to solve all your issues.

[cashwanikumar]

@IdrissMahjoubi Fully agree!! and thanks for the quick reply.
I will test by removing EntityReferenceExtension and check again and let you know my finding. Also will debug more and will try to find places where performance hit is happening.

Also, do you think if we wrap using react memo here will cause any issue? this I believe surely can stop the remirrorPortal component to update unnecessarily

[IdrissMahjoubi]

Also, do you think if we wrap using react memo here will cause any issue? this I believe surely can stop the remirrorPortal component to update unnecessarily

@cashwanikumar You can try this, but the main issue is still assigning a Mark to each word. This augments the size of the document exponentially, thus making making calculations heavier (cursor position, typing, drawing to view ...)