T/40: Implement the selection handler

[jodator]

Suggested merge commit message (convention)

Feature: Implement the selection handler. Closes ckeditor/ckeditor5#4586.

---

Additional information

• This PR enables selection handler in tables only (not in image).
• Required changes are also in:
  • theme-lark: https://github.com/ckeditor/ckeditor5-theme-lark/tree/t/ckeditor5-widget/40
  • table: https://github.com/ckeditor/ckeditor5-table/tree/t/ckeditor5-widget/40
• The branches constellation was pushed on ckeditor5 repo: https://github.com/ckeditor/ckeditor5/tree/t/ckeditor5-widget/40

[jodator]

This PR may need some additional work: ckeditor/ckeditor5#974 (comment). It might be that import ... .svg is a no-go for the utils.js and we might need to think how to structure this better.

[coveralls]

Coverage remained the same at 100.0% when pulling 859f5af on t/40 into 70e01ea on master.

[oleq]

We need more spacing around the widget (see https://ckeditor.com/ckeditor-4/) because it's hard to use the handler

[oleq]

I just found out that we were able to implement it like this in v4 because <figure> has another <div class="cke_widget_wrapper"> wrapper :/ The widget outline and handler "belong" (stick) to the <figure> but they react on the wrapper when it comes to :hover.

TBH I don't like the UX proposed in this PR but OTOH I'm not sure we can affort another wrapper. WDYT @jodator @Reinmar @dkonopka?

[oleq]

Also, the handler should be closed to the widget:

[oleq]

I'm also worried about the contrast in this situation:

Maybe coloring the handler to reflect the border wasn't the best idea after all? In v4, the handler always looks the same

Maybe we should reverse the color in this state?

[dkonopka]

Reversing color is a good idea 👍

Would be nice if we could show an active/inactive state of widget selection not only via outline color change (because first time user doesn't see a difference between yellow/blue) but in icon animation (or completely change it in this case). WDYT?

Fast proposal (scale svg: 0.85 if active)

The other thing is the size of this selection handler - are you comfortable to catch it? How about making invisible right 10px padding or enlarge width of this button?

[oleq]

Minor naming issue

[oleq]

hasSelectionHandler, I'd say.

[oleq]

Just for the record:

• T/40: Implement the selection handler #43 (comment): it turned out these are web page styles in the v4 demo. In general, working handlers work same as in the proposed PR
• T/40: Implement the selection handler #43 (comment): fixed ;-)
• T/40: Implement the selection handler #43 (comment): improved the contrast and implemented some enhanced UX with transitions and dynamic icon

[jodator]

shouldn't this stay as addSelectionHandler() method?

[oleq]

My bad. Search/replace. Fixing :/