I found a problem, related selection of non-editable nodes.
There is a demo link where the problem is could be reproduced:
If ProseMirror instance contains only non-editable elements, selection works are very strange, especially in Chrome browser(Safari, Firefox is ok). Just open the link and try to select multiple tokens in Chrome. Cursor start jumping very often and flickering.
As I understand, ProseMirror has enough information about selection events, to handle this situation. I mean, ProseMirror intercepts all user input and has its own content model.
So, my question is - this situation is a bug? Or I could avoid this behavior in Chrome however?
Thank you in advance!
That’s not entirely accurate—for things like mouse selection, ProseMirror just lets the browser do its thing in most cases, and then converts the resulting DOM selection back to a ProseMirror selection.
In this case the flickering seems to occur because ProseMirror selection endpoints can’t point inside leaf nodes, whereas Chrome does allow that.
… Which is itself interesting, because it didn’t use to—in most browsers, including Chrome a while ago, DOM selection endpoints must be in the same “editable level”, i.e. you couldn’t have a selection starting in an editable element and ending outside, or starting outside and ending inside. But they appear to have relaxed that, creating a bit of a mismatch between native behavior and what ProseMirror does in this case.
I found that setting
display: inline-block on the uneditable leaf nodes seems to change Chrome’s behavior again, which appears to largely solve this issue. So the change in Chrome’s selection behavior may not even be intentional—if it only works for inline nodes, that may just be a bug.
@marijn thank you for your response!
display: inline-block with
selectable option in scheme works much better.
But I have another question. When you say
that may just be a bug, you mean bug in ProseMirror or bug of Chrome?