Class name ProseMirror-focused cause lag in huge documents

1

When user focus in and blur out, wrapper div will add and remove ProseMirror-focused, because documents are very huge, trigger browser reflow and lag 500ms depend on CPU. Is there any option to not set focus class on wrapper?

1 Like
2

This is the code which adds the -focused className:

It appears you could try overriding the focus handler (in handleDOMEvents prop) … return true when defining the function (see API ref) in the EditorProps object. This would require copying all the code from line 732’s function, without line 736 - since selectionToDom is public, it should be able to work equivalently? @marijn could confirm - there might be some easier way I am forgetting (perhaps a top level attributes override, but it doesnt seem that way)

OTOH, if changing a top level attribute in your DOM causes 500ms delay, this will likely crop up elsewhere as a critical performance concern. I have similar issues when DOM elements are exceedingly large, as this is an open problem with the prosemirror architecture, exacerbated by certain browser implementations; that is, without any native implementation to occlusion culling or pagination (although both these ideas have been floated and there are proof of concepts)

3

You are right, many thanks to you.

But selectionToDOM is not public, so i’ll test equivalently, i just return true and see what happens.