codex-team / codex-team/editor.js
Slow rendering of editor blocks due to offsetWidth
- Dominant language
- TypeScript
- Stars
- 31.9k
- Forks
- 2.2k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 1
Description
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?
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the internal `make` method that reads `this.nodes.holder.offsetWidth`, then profile rendering with a very large document to confirm the layout cost. Compare the behavior with and without that width check and verify that the editor still applies `codex-editor--narrow` correctly while substantially reducing initial render time.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100