Use editor toolbar instead of balloon editor

[diemelone]

trafficstars

Fix the formatting tools to the top of the message input area (like most richtext editing fields)

Why? The marking and editing is hard to find if you don't know where to look

[ChristophWurst]

@diemelone I appreciate your burst of new tickets but mind respecting the issue template?

[ChristophWurst]

Let's see if anyone else is interested in this feature, I'm on the fence, this might be cool but it also might be some visual clutter

[diemelone]

Sorry, didn't quite know what to write in to that template.

@diemelone I appreciate your burst of new tickets but mind respecting the issue template?

I assume thats a quite easy feature, why not make a checkbox for fixed or dynamic formatting tools?

Let's see if anyone else is interested in this feature, I'm on the fence, this might be cool but it also might be some visual clutter

[ChristophWurst]

I assume thats a quite easy feature, why not make a checkbox for fixed or dynamic formatting tools?

Every setting creates one more path that needs to be tested. Hence we try to have good default that work for the majority rather than tons of configuration that we then can barely maintain.

[StCyr]

I would also prefer a toolbar. But maybe it is not convenient on small screens? Do we still really want to support small screens btw?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ChristophWurst]

@jancborchardt @nimishavijay what do you think?

[jancborchardt]

We also have this issue in Text, where 2 actions are in a floating bar but we are thinking of moving them in the action bar.

I think it would be ok if we do switch from floating bar to toolbar, if we do it like Gmail and don't show the bar pernanently, but have one formatting button which expands to show it.

@nimishavijay what do you think?

[nimishavijay]

Agreed with @jancborchardt, I think having it shown all the time is better. Since we are moving to a composer modal the text area is lesser, so we could not show it by default, but have a button that toggles it.

[ChristophWurst]

Thanks for the quick feedback!

[thstyl2000]

I would also like to add that it is a bit cumbersome to write lists with the floating toolbar, because you first need to write sth down and then convert it to a list.

[ChristophWurst]

In discussion with @jancborchardt we found out that what we want is neither a fixed toolbar nor the current balloon (popover) but a floating toolbar that shows at the bottom of the editor, only if formatting is turned on.

[jancborchardt]

Yup, and also only showing when toggling it via the icon – that is it of course stays open while you edit the text. Here is how Gmail does it – and actually they remember the last open/close state of the formatting bar, even across reloads:

Gmail default	Gmail with toolbar toggled open

[ChristophWurst]

https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#inline-editor https://ckeditor.com/docs/ckeditor5/latest/examples/builds/inline-editor.html is the closest I can find with off-the-shelf CKEditor.

You can see all available builds at https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#available-builds (nav on the right gives you a bit of overview)

[jancborchardt]

https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#inline-editor

Yep, that seems indeed what we need. Maybe we can just position it on the bottom, floating above the content, and that’s most of it done?

[ChristophWurst]

https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-decoupled_decouplededitor-DecoupledEditor.html is also an option apparently.

The inline editor can be used easily, but placing at the bottom is not configurable:

Hacking .ck.ck-balloon-panel might be an option

[jancborchardt]

Hacking .ck.ck-balloon-panel might be an option

Yeah, that looks pretty nice! :) Could we even adjust the style slightly so it fits Nextcloud a bit more? (Like the background color, border color, add border-radius, use our shadow style, etc.)

[Djiock]

That would be a very nice feature, having to select text to format is counter-intuitive (especially when we want to add an image)