Selection issues (mobile and desktop)

[johannesmutter]

All the below videos have audio (please unmute)

Issue 1	Video
1. Virtual Keyboard hides caret beneath (doesn't scroll selection into view)	RPReplay_Final1784206534.MP4
Issue 2	Video
2. iOS URL bar invisible hitbox overlaps purple bottom text selection grab circle	RPReplay_Final1784206599.MP4
Issue 3	Video
3. Node selection renders highlight of node gap (<br> element). Make it transparent.	RPReplay_Final1784206637.MP4
Issue 4	Video
4. Node selection outlines overlap creating double width line. Boundary should be strong on outside not inside. Also offset selection overlay from screen edge	RPReplay_Final1784206713.MP4
Issue 5	Video
5. Text highlights during node selection cause confusion and potential data loss. Affects node selections than span a stack and partial selections of nested nodes in node array. Ideas: A) dissolve groups in data model too, not just in css (display: contents); B) Allow partial node selection, not expanding to full parent node; C) Use a different selection strategy for nodes on mobile, see Apple Notes selection of table cells on iOS	RPReplay_Final1784206905.MP4
Issue 6	Video
6. A) Flickering Toolbars on node selection on mobile; 6. B) Surprising that it highlights the link annotation when the link annotation is inside a selection that is larger than the annotation range	RPReplay_Final1784207001.MP4

[johannesmutter]

A different type of node selection inspired by Apple Notes, Notion and other Block based edtiors

• Drag handle directly attached to node as overlay (not in toolbar). Replaces the select parent button in svedit demo. Already implemented this pattern in I.L. and it feels great. No long mouse travels to toolbar. No discoverability issue. No need for an icon.
• Drag handle also as optional contextual toolbar trigger, for node related tools. Also implemented in I.L. with good user feedback. Common pattern familiar from Apple Notes, Craft, Notion, ...
• Resize Selection handles orthogonal to direction of orientation (--row: 1 / 0) for easier and cleaner selection on mobile (but also desktop)

RPReplay_Final1784209012.MP4

[michael]

1 (likely) and 2 (definitely) are browser issues. I'll put them on the agenda for the next W3C meeting.

3, 4, 5) we could optimize a bit on our side. Though I'm aware visually rendering both the native and our own selection is not ideal and looks ugly. But it's a trade off I'm taking atm for the "selection drives everything approach". The new WordGard is now rendering their own selections for everything, so they were biting the bullet and even handle all keyboard nav themselves(quite buggy still atm). This way the get to workaround when the browser skips certain positions (especially with inline nodes this is trouble). Anyways bad news is that for touch devices you anyways need the native selection, so not a full win either. I hope there are solutions in native land in the long run, but doing something custom for node selections for Svedit is not worth investing for me atm. It's good enough for now and web mobile editing is generally degraded everywhere, ufortunately.

Regarding 6) The current approach to mark toggling is that you select a range you want to mark. If some mark is touching the selection the first click will clear one (or even more) same-type type annotations, a second click will place the annotation in the range you selected. This behavior is consistent for node marks too. Like say you select 5 nodes in body, now the section tool gets active/selected because you touch 1+ sections with your selection. Clicking section will clear all the other sections first, and a second click will place a new section at your original range. Understand this differs a bit from what people are used to but want to test how this people actually use this and see if it makes big problems. Main justification for different beahvior is that in Svedit you really mark areas explicity and not do the paint-tutlegraphic-style of traditional text editors.

[michael]

from https://marijnhaverbeke.nl/blog/wordgard-0.1.html

[johannesmutter]

Will do a PR for 3 and 4. And invest some thinking into 5.