Problem/Motivation

On mobile screens, toolbar buttons should be overflowing to a dropdown menu to make sure the editor doesn't overflow the screen width (ckeditor issue). This doesn't currently happen when using CKEditor 5 in Drupal. Tested using both the Claro and Gin admin themes.

Screenshot

Steps to reproduce

Add enough buttons to a text editor to overflow the screen width and open an edit form using the editor on a mobile device.

Proposed resolution

Not sure.

Remaining tasks

Not sure.

CommentFileSizeAuthor
#2 CleanShot 2022-12-11 at 16.20.46@2x.png90.44 KBdieterholvoet
CleanShot 2022-12-11 at 16.12.04@2x.png100.58 KBdieterholvoet

Comments

DieterHolvoet created an issue. See original summary.

dieterholvoet’s picture

dieterholvoet commented
StatusFileSize
new CleanShot 2022-12-11 at 16.20.46@2x.png90.44 KB

As a workaround you can add the following style:

.ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
    flex-wrap: wrap !important;
}

But ideally the toolbar buttons would overflow to a dropdown, not wrap.

Screenshot

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Active » Postponed (maintainer needs more info)

IIRC this is related to the shouldNotGroupWhenFull setting. If you remove all toolbar separators, then it will actually behave responsively. Could you give that a try?

dieterholvoet’s picture

dieterholvoet commented

I removed all separators and I set a breakpoint in CKEditor5::getJSSettings to make sure shouldNotGroupWhenFull is FALSE, and it is. If I add a text field directly to a node the grouping now works, if I add it to a paragraph it doesn't work and it still overflows the page. Does that make this a Paragraphs issue?

wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Status: Postponed (maintainer needs more info) » Closed (duplicate)
Related issues: +#3332416: CKEditor 5 toolbar items of multi-value field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form's sidebar on wide viewports

Damn, I just realized that #3332416: CKEditor 5 toolbar items of multi-value field (typically Paragraphs) overflowing on narrow viewports and overlapping with node form's sidebar on wide viewports is actually a duplicate of this issue! 🙈 At this point, there's more info there than here, so transfered the findings from here to that issue, and credited you!

Let's continue there 🙏