Ckeditor5: Preconfigure the block toolbar

[Reinmar]

See https://github.com/ckeditor/ckeditor5-editor-balloon/issues/20.

We need to preconfigure this block toolbar. Question – which items should be in the balloon toolbar and which in the block toolbar?

We also need to document somewhere how to revert the configuration to the current state (with one toolbar). This will be tricky, because we may use heading buttons in the block toolbar (https://github.com/ckeditor/ckeditor5-build-balloon/issues/18).

[Reinmar]

Are we sure that we want to preconfigure the balloon editor build to work exactly like Letters?

Letters

Block toolbar in action:

Balloon toolbar in action:

Current balloon editor's UI

Everything in one balloon:

Should we change this?

Should we preconfigure this build to work like Letters? This is – to come with both toolbars – the balloon one and the block one?

Pros:

• It's not intuitive to look for block options (headings, lists, images) in the balloon toolbar.
• Leads to a shorter toolbars when many features are enabled.

Cons:

• For some reasons people like the current balloon editor. It's by far the most popular option on npm. Will they be happy with the change?
• The block toolbar requires space on the left side of the editable element and not every application may have it there.
• If we'll use the block toolbar we'll, most likely, switch to heading buttons (as opposed to heading dropdown). Heading buttons are harder to configure (you need to reconfigure the toolbar when you reconfigure the heading options). Also, if we'll use heading buttons in this build, reverting the configuration to the current state (one balloon) will require enabling the heading dropdown plugin (buttons are proposed in a separate plugin than the dropdown). Which means that most likely, we should include both plugins in this build (the one which adds the dropdown and the one which adds buttons).

cc @oleq @dkonopka @fredck

[fredck]

I see the option "ballon" and "ballon + block" as two separate approaches, satisfying different tastes and needs. It could be a configuration, and additional plugin or a new build. But changing the current build may not be the best option.

[oleq]

But changing the current build may not be the best option.

I second this.

It's not intuitive to look for block options (headings, lists, images) in the balloon toolbar.

Why do you think it is so? Is there any popular (native) processor that does otherwise? I can't find any example and that's why I think users are used to headings, lists, and image in the main toolbar.

Leads to a shorter toolbars when many features are enabled.

It won't be a problem when we implement this fix.

[Reinmar]

It's not intuitive to look for block options (headings, lists, images) in the balloon toolbar.

Why do you think it is so? Is there any popular (native) processor that does otherwise? I can't find any example and that's why I think users are used to headings, lists, and image in the main toolbar.

I chose the wrong words – I meant "unintuitive" but also "not useful".

And I can find examples – e.g. Slack's editor. And Letters :P. Plus, common sense – not everything that's popular must be good. The balloon toolbar was popularised by Medium and then everyone tried to copy it. But instead of focusing on "distraction-free writing" they've been copying the toolbar. It requires making a selection when you want to do anything – a step which is unnecessary. It's been irritating for me when I was writing articles on Medium and I can imagine how irritating this must be on touch devices where making a selection takes a lot of time.

BTW, Medium isn't an UX oracle – e.g. their terrible tooltip-less balloon toolbar for content that you read. For this day I don't know what these icon mean (srsly):

---

Anyway, this topic wasn't about discussing the block toolbar's usefulness. I think we agreed that it's a better solution than balloon toolbar-only editor when we were designing Letters. We can reopen this discussion if you want, though, but it wasn't the main goal here.

Instead, in this ticket I wanted to discuss whether our balloon editor build should go in the same direction. Since it's good for Letters, why isn't it good for the balloon editor too?

[Reinmar]

I see the option "ballon" and "ballon + block" as two separate approaches, satisfying different tastes and needs. It could be a configuration, and additional plugin or a new build. But changing the current build may not be the best option.

I agree that these are two solutions for two different tastes and needs. However, we propose one by default. If the balloon editor will stay in its current form and we won't introduce anything else, then it seems that we think that this is the best solution. Which I don't think is true.

So, we have two options:

• We change the configuration of this build. This doesn't mean that one will not be able to reconfigure it so to use the ballloon toolbar only.
• We propose another buid to show that balloon editor with balloon toolbar only isn't the best we can do. In which case... how would we call this build? ckeditor5-build-letters?

[fredck]

We propose another buid to show that balloon editor with balloon toolbar only isn't the best we can do. In which case... how would we call this build? ckeditor5-build-letters?

The approach for each of the options is different enough for me to justify a dedicated build.

[wwalc]

how would we call this build? ckeditor5-build-letters?

That could be super confusing, as I can imagine that users would expect to find there collaboration features.

ckeditor5-build-balloons? :D

[wwalc]

I'd rather reconfigure the existing build. However, having two different builds may have some interesting implications. We will easily see (via download stats) which option is really preferred by users.

The CKEditor 5 demo page will get crowded though with another build: https://ckeditor.com/ckeditor-5/ ... but this is something we will face sooner or later anyway.

Regarding the toolbar proposal, I believe we do not have enough data to say if the one proposed in Letters is okay. If you're on a touch device you will have a problem to make undo/redo there.

[dkonopka]

If the balloon editor will stay in its current form and we won't introduce anything else, then it seems that we think that this is the best solution. Which I don't think is true.

☝️

I'll try to be objective after many hours with Letters, but even with dynamic group separator soon balloon editor will require more than one or two (three) clicks to change something. It can be perfect timing to introduce separated block and "inline" editing way.

TBH, it's really useful to edit blocks in the other toolbar than balloon (which requires selection) and I personally prefer Letters solution. About heading buttons mentioned by @Reinmar, we can even try to put dropdown in block toolbar to avoid issues with generating new icons for every heading style.

Future of balloon editing toolbar

About new build - ckeditor5-build-block-balloon?

Anyway, Gutenberg is trying to group block elements. In the near future as default Wordpress editor it will be so popular. Even if their UX is not 10/10, we should have it in mind.

[Reinmar]

OK, I think we have an answer :) A new build it is.

Now, the tricky part – we need to find a name for it. So far, the contenders are:

• ckeditor5-build-balloon-block
• ckeditor5-build-block-balloon
• ckeditor5-build-balloons (I'm joking)
• ckeditor5-build-letters (not really, cause we already made a choice to not use the word "medium" in the current build, to be future-safe)
• what else?

[fredck]

As there are in any case similarities between both cases, I would go with ckeditor5-build-balloon-block so they get listed close to each other.

[Reinmar]

OK, we've got the name, so I reported a separate ticket about it: https://github.com/ckeditor/ckeditor5/issues/1112.