Consider editor implementation with the contextual toolbar

[oleq]

When I am in a block element and select some text, the toolbar should appear just above or behind the selection, to minimize mouse movement to toolbar.

A follow–up of https://github.com/ckeditor/ckeditor5-editor-inline/issues/1#issuecomment-279158808.

The PoC is already in http://localhost:8125/ckeditor5-ui/tests/manual/contextualtoolbar/contextualtoolbar.html.

[mlewand]

@oleq you put a lot of reasonable insights on this in https://github.com/ckeditor/ckeditor5-editor-inline/issues/1#issuecomment-279999541 it's definitely worth to put it here.

Looking at it from pointer device user (be it touch or mouse) I find contextual toolbars pretty useful.

However there's this problem of overlapping your content - and that's the most irritating problem that comes to me when working with this. I'm wondering if there are some interesting implementations that get around this problem? I can imagine placing toolbar on left/right side if possible, but then pointer distance is much, much bigger than in example above, also it's availability depends on outer layout.

The other problem is that typically such inline editors are poorly indicated that they are editable until you point one of them. With classic concept you instantly know what's going on.

Couple of thoughts regarding above PoC:

• It would be sweet to determine floating toolbar position based on where the selection was actually ended, so if you started selection from bottom to top, then the toolbar would appear on top (closer to the pointer).
• Floating toolbar makes static toolbar redundant (unless it contains sth that floating one doesn't), I'd be pretty beneficial to drop static toolbar, as you'll get around 1.5 text lines precious vertical space for content.

[oleq]

It would be sweet to determine floating toolbar position based on where the selection was actually ended, so if you started selection from bottom to top, then the toolbar would appear on top (closer to the pointer).

I'm pretty sure this is what ckeditor5-ui/tests/manual/contextualtoolbar/contextualtoolbar.html PoC alreay supports.

Floating toolbar makes static toolbar redundant (unless it contains sth that floating one doesn't), I'd be pretty beneficial to drop static toolbar, as you'll get around 1.5 text lines precious vertical space for content.

I didn't write about this because I felt like this is obvious but apparently, it isn't. So to make things clear, the screenshot above presents a contextual toolbar PoC in the existing "classic" editor. The actual contextual editor implementation would bring that kind of toolbar only.

[oleq]

Just FYI: Since https://github.com/ckeditor/ckeditor5-ui/issues/182 has been closed and the ContextualToolbar UI component has joined the family, we're pretty close to making this implementation a real thing.

[oleq]

Some issues that must be fixed before the new kind of editor is ready:

• https://github.com/ckeditor/ckeditor5-ui/issues/234
• https://github.com/ckeditor/ckeditor5-ui/issues/229
• https://github.com/ckeditor/ckeditor5-ui/issues/223
• https://github.com/ckeditor/ckeditor5-ui/issues/181

[oleq]

Since we decided that this editor implementation should be coded ASAP we need to find a proper name for it. What should we call it? editor-contextual sounds good to me but perhaps we can come up with some better name?

[artaommahe]

@oleq widely used 'medium editor' naming for this toolbar style

[fredck]

IMHO, "contextual" is misleading. It says that the editor is contextual (like different editors for different contexts), while here we're talking about the toolbar.

The editor name is important because it also defines the name of the class to be used to create the editor instances. It goes always postfixed with "Editor". So if the editor name is medium, the class name will be MediumEditor, which may be again confusing for others. So better to not use a product name here.

Actually, one possible variation may be calling it medium-like, where the class name would be MediumLikeEditor. This was, in fact, the way we were calling it internally in the very beginning of the CKEditor 5 development.

Another proposal could be simply balloon (BalloonEditor).

Or, following the current proposal, but avoiding confusion, contextual-toolbar (ContextualToolbarEditor).

[Reinmar]

So, ckeditor5-editor-medium-like and MediumLikeEditor?

Or ckeditor5-editor-medium and MediumEditor?

I'm fine with both but the first one is a bit too verbose.

[fredck]

I know it is a bit longer, but that was exactly my point. I would avoid MediumEditor and would go with MediumLikeEditor (if we go with Medium in the name)... the other options look ok for me as well (BalloonEditor and ContextualToolbarEditor).

[oleq]

I'm not quite sure using this "medium" word is the best approach.

For one thing, in a couple of years, Medium may not exist or completely change in terms of editing experience and we'll remain stuck with this association forever. Lots of other things could go wrong too, like what if as a consequence of some events Medium gains a "bad PR"? I guess we'd rather not become part of it, especially that we won't have any control over it whatsoever. There's no easy way out of it if something like this happen.

Another thing is that this name does not describe the essence of the implementation – it's a name of a 3rd–party app. You have to know the app to understand the name, it's a bad semantics IMO.

And last, but not least, I'm not sure how would that work in terms of legal procedures. "Medium" is probably a trademark and who knows what would it mean for us?

[Reinmar]

The timeframe is a good point. I imagine explaining to someone in 3 years from now what this "medium editor" is. Especially that "medium" has a couple of meanings.

From the other proposed names I find balloon editor and contextual toolbar editor equally good and bad :D. One is dully explicit but precise, the second is a bit unclear (is it an editor inside balloon?) but short. I'm, as usual, ok with both :D

[Reinmar]

So we decided to go with https://github.com/ckeditor/ckeditor5-editor-balloon-toolbar. @oleq checked that "contextual toolbar" usually means the toolbar which changes its content depending on the context. Since this is not really what characterises this editor, we chose "balloon toolbar".