Table mouse selection UI/UX

[jodator]

📝 Provide a description of the new feature

Requires #6113.

Validate mouse selection indication UI/UIX. The solution used in #6113 is at the POC stage and a nice styling must be used for mouse selection.

This should address:

• Nice looking (and well blending) styles for selected table cells.
• Resolving the issue mentioned below by me.

Progress log

ckeditor/ckeditor5-table#257

The PR brings:

• new selection styles,
• improved selection handling in Chrome (selection no longer starts in the fake sel container)
• a minor fix for MouseSelectionHandler internals

Remaining issues

• The selection is broken in Safari. In theory, this can be improved by a selectionstart listener kicking in at some specific moments (tried it, it works OK), but this is more a hack than the actual solution. It seems that the selection goes crazy in Safari once the mouse crosses the boundary of the table cell and resets to the beginning of editable.

  What we need instead is a solid research.
  

• MouseSelectionHandler#_handleMouseMove() calls TableSelection#stopSelection() after the mouse has been released. Each such call runs model.change() which is very wrong and a potential source of issues.

  • IMO this initial condition should be simply replaced by the if ( !this._isSelecting ) { return; } (what's the point of the mousemove handling if not selecting any more?)
  • When I changed the condition this test failed and I cannot understand what scenario it tests from the test description and structure.

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[jodator]

Moved from PR: ckeditor/ckeditor5-table#230 (comment):

Leaving the table with the mouse makes the selection non-fake so you suddenly see text selection. The selection stops working in this case too.

I found out that it is a Chrome issue IMO:

Chrome	Firefox

[jodator]

Also from a PR: please create proper entries in theme lark (if we'll work on master by then).ckeditor/ckeditor5-table#230 (comment)

[Reinmar]

I found out that it is a Chrome issue IMO:

That's an issue with us moving the real selection to the fake sel container and not blocking mousemoves later on which makes the browser render the selection starting from the fake sel container and ending at your cursor position.

[Reinmar]

DUP with some additional info: #6302.

[Reinmar]

DUP in #6300.

[Reinmar]

May fix #6299.

[Reinmar]

Let's not forget this case (more details):

[Mgsy]

Safari

📝 Provide detailed reproduction steps (if any)

1. Try to select multiple cells in Safari.

✔️ Expected result

Cells are selected.

❌ Actual result

Disco 💃

[oleq]

Let's keep it open for Safari.