Idea to enable server side rendering natively

[bmaisonneuve]

Hello everyone,

I've been working for a while with editor js and I like it a lot (especially with the new list tool version , thanks) !

One big pain point is the problem with server side rendering, as I saw in multiple posts. I've tested a lot of options and may have found a way to enable this for most of the tools without too much work.

In my server side code I was able to create my tools blocks (like Paragraph for example) manually by simulating some input parameter and leaving other to null. With this options, I can call the render method to manually render blocks. For the blocks I've tested, I have an error because of the document.createElement but beside this there is no problem to render the block.

Would it be possible to add a render object in the API object. This render object will have at least the method to create an element. We can create a default render that uses the document.createElement method. We would have something like this :

interface Renderer {
  createElement(tagName: string): HTMLElement;
}

class DefaultRenderer implements Renderer {
  createElement(tagName: string): HTMLElement {
    return document.createElement(tagName);
  }
}

Then in the blocks we should use this instead of the document.createElement like :

this.api.render.createElement('DIV')

This could replace the 'make' method from @editorjs/nested-list/dist/utils/dom for example.
Then when we create the EditorJs object we provide a way for the developer to overrides this renderer with it own server side renderer. Or we could create a simpler EditorJsServerSide which needs the renderer and render the blocks but simulating some object passed to the block constructor. With this EditorJsServerSide , we can force the readOnly mode (because SSR is readonly) and this will avoid problem with listener or other event.

I could work on a PR for this feature.

What do you think about this ? I think this might be an elegant way of supporting SSR. The only downside is that the blocks must be modified to used the new api.