Problem/Motivation

The current dev branch has a text field for entering in the toolbar items to be used in CKEditor5 for this format.
It does not validate the input and is not easy to edit.

There should be a UI similar to the one provided by CKEditor to select buttons from an available list, and sort the active items.
This UI should support drag and drop adding/removal
The 2 special characters "|" and "-" should be addable at any point in the active list
The UI should support keyboard and make detailed announcements for accessibility

Proposed resolution

Add validation to the text field to ensure the formatting is correct, and that only valid toolbar items are added.
Invalid toolbar items passed to the CKEditor5 constructor may result in errors.
Build a UI which supports sortable.js style drag-and-drop and sorting, include keyboard controls and Drupal.announce features for accessibility.

CommentFileSizeAuthor
#4 ck5-toolbar.png76.28 KBzrpnr

Issue fork ckeditor5-3198297

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

zrpnr created an issue. See original summary.

wim leers’s picture

(FYI pinged CKEditor 5 lead developer @reinmarpl about this.)

zrpnr’s picture

StatusFileSize
new76.28 KB

Created a UI inspired by https://ckeditor.com/ckeditor-5/online-builder/
Pick "classic editor", then choose some plugins and click next to see the toolbar builder.

I kept some of the UI from the CK4 backbone app, the layout is very similar, but slightly simpler since there is no grouping.

You can now drag buttons from the "available" area to "active", sort the buttons, or drag as many dividers as desired into the layout.
CK5 toolbar admin

This is still missing keyboard controls and the aria announcements, but I followed the guidelines in
https://www.sarasoueidan.com/blog/accessible-tooltips/
and https://pauljadam.com/demos/tooltip.html
to make the tooltip labels accessible, they appear on aria-expand and can be toggled by keyboard focus or by mouseover.

The CK online builder was using Sortable.js, so I built this app using Sortable.js as well.
Happily- even though this js is compiled it's possible to use the core sortablejs library so the toolbar UI js is only about 50kb by itself.

Source for the UI is here: https://github.com/zrpnr/ckeditor5-drupal-admin

zrpnr’s picture

Previously the app was not loading correctly with ajax, such as switching between editors or switching to CKEditor 5 for the first time.
Also added the cdn vendor js locally, to avoid #1988968: Drupal.ajax does not guarantee that "add new JS file to page" commands have finished before calling said JS
I ran across this when working on the prototype, and didn't realize @bnjmnm had posted a patch there.
I'll try to review it and see if it helps here.

The toolbar UI now should now cleanly mount and unmount when switching editors.

zrpnr’s picture

Status: Active » Needs review

Added the aria-live announcements on focus to explain keyboard options, removed the exposed vue library, updated readme with link to js source. It should now be more flexible with different admin themes as well, the hidden form elements are no longer touched by the app.

All the Drupal.t and Drupal.announce statements are all defined in a non-minified file.

wim leers’s picture

Assigned: Unassigned » wim leers

Currently reviewing this… 🤓

wim leers’s picture

Review posted on the MR. Now responding to comments here.

#4:

Created a UI inspired by https://ckeditor.com/ckeditor-5/online-builder/

Just to make sure: we did ask them if we could reuse https://ckeditor.com/ckeditor-5/online-builder/, right? Why was that not possible?

I kept some of the UI from the CK4 backbone app, the layout is very similar, but slightly simpler since there is no grouping.

In the MR I asked if CKE5 supports multiple toolbar rows. I should also have asked about groups, I forgot about that! If both are gone in CKE5, that's indeed a pretty significant simplification.

Happily- even though this js is compiled it's possible to use the core sortablejs library so the toolbar UI js is only about 50kb by itself.

Does this 50 KB include Vue?

zrpnr’s picture

Status: Needs review » Needs work

Back to "Needs work" to address @Wim Leers MR comments :)

zrpnr’s picture

Assigned: wim leers » zrpnr

Just to make sure: we did ask them if we could reuse https://ckeditor.com/ckeditor-5/online-builder/, right? Why was that not possible?

Yes, I did ask back in November. Piotr suggested we could meet to discuss whether it was feasible to extract their online builder. I wasn't ready to work on it at the time, and I probably should have followed up once I was ready to get started on this.

When I compared the current ck5 online builder to the requirements from core such as submitting an output string into the editor form, supporting keyboard, providing aria announcements, as well as the need to allow contrib projects to add their own toolbar items, I thought it might be more straightforward to build a new UI to that specification.

This UI borrows heavily from their online builder, using the same icons, and almost identical css for custom buttons like "header". Theirs also uses Sortable.js for the drag and drop, though it works and looks a bit different compared to the ck4 UI.

In the MR I asked if CKE5 supports multiple toolbar rows. I should also have asked about groups, I forgot about that! If both are gone in CKE5, that's indeed a pretty significant simplification.

Commented on your MR, the CK5 toolbar is simpler, without groups and rows. It supports wrapping and a hard row "break":
https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html

The toolbar items passed to the CKE5 constructor's config are listed in a flat array of strings.

Does this 50 KB include Vue?

When I posted 50KB - I had Vue loading externally. Now it is embedded in admin.js to (hopefully) avoid controversy.
Because this is a compiled app it only needs the vue runtime which is much smaller than vue global file that was added in the prototype in #3145958: [META] Re-evaluate use of Backbone.js in core
This still takes admin.js up to 125KB. However- compared to ck4- the total page load of js is much smaller because there's no need to boot up a hidden CKEditor instance!

zrpnr’s picture

Assigned: zrpnr » Unassigned
Status: Needs work » Active

I addressed most of the review except for the icon changes, I'll work on those next.

wim leers’s picture

Left some nitpicks and a few questions. I think this is ready to go as an intermediate step, with a few concrete proposed follow-ups:

  1. Explicit wrapping breakpoint in config: https://www.drupal.org/project/ckeditor5/issues/3198297#mr8-note15283
  2. SVG maintainability: https://www.drupal.org/project/ckeditor5/issues/3198297#mr8-note15288
  3. Admin UI CSS DX: https://www.drupal.org/project/ckeditor5/issues/3198297#mr8-note15298

zrpnr credited lauriii.

zrpnr’s picture

Status: Active » Reviewed & tested by the community

😅 This is dramatically improved over the first MR! Thanks for the thorough reviews @lauriii and @wimleers !
I think I opened follow-up issues for all the related problems and questions you both raised:

#3202589: Follow-up for #3198297 Support explicit wrapping breakpoint
#3202598: Follow-up for #3198297: automate plugin icon extraction, button label, etc.
#3202664: CKEditor 5's UI language should match Drupal's interface translation
#3202666: Follow-up for #3198297 Improve admin CSS DX

  • zrpnr committed c57b326 on 1.0.x
    Issue #3198297 by zrpnr, Wim Leers, lauriii: Toolbar UI for selecting...
zrpnr’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.