text selection grabbers no longer show on iOS (18.3.1) since 6.35.1

[jurjanpaul]

Describe the issue

I noticed the lack of 'grabbers'/'handles' for my text selections on my iPhone after recently upgrading and could pinpoint the problem to changes in @codemirror/view version 6.35.1; when using 6.35.0 they still show beautifully. Now they have completely disappeared (in all versions after 6.35.0), which makes for a poorer UI.

What I get with @codemirror/view 6.35.1 onwards:

What I got with @codemirror/view 6.35.0 and earlier (and what I think it is supposed to look like):

Browser and platform

mobile Safari on iOS 18.3.1

Reproduction link

https://codemirror.net/try/

[marijnh]

It appears that the selection handles are affected by the caret-color style, which we're setting to transparent because we draw our own cursor and don't want the native cursor to interfere.

My initial attempt to handle this was to set it back to initial when there is a non-cursor selection but unfortunately, mobile Safari being the pile of hacks that it is, it appears to only query this style once, when the selection is made (at which point it is still transparent) and then keeps using that color for the lifetime of the non-empty selection, instead of properly querying the current style. This makes it somewhat hard to control this.

I'll see if I can find a kludge, but so far it looks difficult.

[jurjanpaul]

Ouch. That sounds painful indeed.
Thank you for looking into this and for your explanation of how this came to be and why it is difficult to restore the mobile selection behaviour that I got used to. I would not know where to start finding a solution/workaround either I'm afraid.

[lucharlesc]

@marijnh Would a viable solution be to just draw custom cursors on both ends of the range selection? They could be enabled only for mobile Safari and styled to look like the native ones with the circle on top or bottom.

[lucharlesc]

I think it makes sense to maintain fully custom cursors if using the drawSelection extension, rather than a half custom, half native solution depending on if the selection is a range or not.

[AuntyEms]

[marijnh]

The thing is that, if we draw them as part of the selection layer, which is easy, they'll be clipped off at the edge of the editor by the regular CSS rules and won't be able to stick out of the editor like the native handles would. Also, transparent line backgrounds and such will affect them.

Drawing them as overlays over the editor would be possible, but involve a lot more complexity to ensure they stay properly aligned to the selection.

I'm still half-expecting there to be some undocumented prefixed CSS property that allows us to style these separate from the caret color, but I haven't been able to find such a thing.