Mouse down selection behaviour different on Chrome

[matthewlipski]

Hi, I’ve stumbled across some editor selection behaviour on Chrome that’s different to Firefox and Safari. It has to do with CSS :before pseudo-elements. I’ve created a demo to showcase the issue here.

In the sandbox, I have a simple editor schema which is made up from 3 nodes:

doc: Generic top level node. Contains at least one block node.

block: Node which contains a paragraph within a div, with text nodes inside. The first block node in the document also has a “>” :before element on the div.

text: Generic text node.

In Firefox/Safari, clicking a block node to the right of the text inside it moves the selection to the end of the node, regardless of if it has the :before pseudo-element:

In Chrome however, doing the same thing will move the selection to the start of the block if it has the :before pseudo-element. Otherwise, the behaviour matches Firefox/Safari:

I’ve managed to work around it somewhat by setting display: inline on both the paragraph and the :before pseudo-element instead of using a flexbox. Ideally though, I would like to keep using flexbox as this workaround has its own issues.

Is this something that should be fixed within ProseMirror? If not, do you have any suggestions for a more suitable workaround such that I can still use a flexbox? Thanks!

[marijn]

@matthewlipski

Is this something that should be fixed within ProseMirror?

Given that the library’s strategy is to rely on the browser’s native selection behavior here, I don’t think there’s much the library can do. You could try to write you own mouse handler that detects this specific situation in your app and adjusts the selection, but it’ll likely be tricky to make drag handling, double clicks, etc work properly with that.

So tweaking the CSS to avoid the issue, as you did, is probably the way to go. If you are very patient you can also try to reduce it to a simple HTML example and file an issue with Chrome. But those often sit ignored for years unless you know someone on the Chrome team and can direct attention to it.

[prosed]

If you file a bug on https://issues.chromium.org please share it here. I’ll be happy to +1 it.

The odds of it getting fixed are infinitesimally raised by the fact it works in another browser, but still expect a minimum one year turnaround.