Editor instance preload

[mlvl42]

Hi !

I am using CKEditor5 in a react application where a variable amount of editors must be initialized on the same page, I quickly noticed that it would take too much time if all my editors were to load at the same time. Thus I decided to display a placeholder for each editors, and switch to the editor only if a user double clicks a placeholder (I am displaying only one editor at a time). This greatly increased the page load time, however there is still a considerable amount of lag between the moment a user double clicks a placeholder and the editor loads (~400 to 600ms) resulting in poor user experience.

Is there a way to preload a single instance of a CKEditor and reuse it in multiple places when need be ? I am using the inline editor from sources.

[mlvl42]

So I found a working yet a bit convoluted solution :) I am basically pre-rendering multiple ckeditor instances to unmanaged DOM (not displayed) and storing their references in an array. I created a <PortalEditor> component which on rendering retrieves a reference from the array and portals it to the current component. I achieved this using https://github.com/httptoolkit/react-reverse-portal

I had to handle little things when reusing an editor, like clearing the undo stacks and setting the new editor data etc.. A page containing 5 CKEditor components used to take between 2 to 3 seconds to load and it is now instantaneous, so this does the trick for me :D