Slow rendering of editor blocks due to offsetWidth

[johanwestling]

I'm working on a project with EditorJS that renders various lengths of legal documents. In the most massive documents (they are long and a metric ton of DOM-nodes) I've noticed that rendering of the page becomes very slow. Running a Devtools performance recording points towards a EditorJS internal make-method that does the following:

this.nodes.holder.offsetWidth < this.contentRect.width && this.nodes.wrapper.classList.add(this.CSS.editorWrapperNarrow)

Basically it seems to checks if the holder elements width is smaller than the block width and applies the codex-editor--narrow CSS if it is?

Here is a screenshot from the Devtools performance recording:

And with a local override in Devtools without the this.nodes.holder.offsetWidth < this.contentRect.width && part:

Goes from +60 second load time to less than 20 seconds.

Any ideas how to solve this? To me this check would be better to conduct only when all the initial editor blocks has rendered?

[neSpecc]

We should eliminate the “Narrow” mode entirely and make the “+” button more responsive in smaller containers.

[johanwestling]

Sounds like a solid solution to this as well 👍