The width of the toolbar configuration should match the width of the node edit screen

Created on 20 August 2021, almost 3 years ago
Updated 22 February 2024, 4 months ago

Problem/Motivation

Out of curiosity i've just added all available buttons to the active toolbar and hit save (see active.png) . Problem is when you are editing the node the width is smaller leading to the following (see node.png).

Steps to reproduce

- add all buttons to the active toolbar in the particular text format.
- edit a node with that text format active

Proposed resolution

Would it make sense to adjust the width of the toolbar configuration to the available width of the node edit screen to prevent such an experience or provide a visual indication that the available width for the node edit screen would be reached in the toolbar configuration? at least it could be an informed decision for the site builder setting up the available buttons.

๐Ÿ’ฌ Support request
Status

Fixed

Version

10.1 โœจ

Component
CKEditor 5ย  โ†’

Last updated about 5 hours ago

Created by

๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • ๐Ÿ‡ซ๐Ÿ‡ฎFinland lauriii Finland
  • ๐Ÿ‡ง๐Ÿ‡ชBelgium Wim Leers Ghent ๐Ÿ‡ง๐Ÿ‡ช๐Ÿ‡ช๐Ÿ‡บ

    Discussed this in detail with @lauriii.

    The CKEditor 5 toolbar configuration admin UI at /admin/config/content/formats/manage/basic_html is a visual wireframe-esque representation of the enabled buttons. It looks quite different from the actual CKEditor 5 on the /node/add form. On top of that, it can look even more different in other contexts: in narrow viewports, when used inline (like Quick Edit used to โ€” CKEditor 5 supports that too!), and so on.

    These principles were also the case for CKEditor 4's toolbar configuration admin UI, actually! (But there, the admin UI actually looked more like the actual end result โ€” so it was arguably more confusing.)

    While I appreciated your suggestion at #9, it unfortunately really is not feasible to implement โ€” @lauriii confirmed that.

    So, to keep this module's issue queue maintainable, closing this issue โ€” hope you agree with the rationale!

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

  • Status changed to Fixed over 1 year ago
  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany rkoller Nรผrnberg, Germany

    woops sorry for the late reply. the window i've kept open for writing up the reply slipped through - too many open tabs in too many browser windows.

    and yep no problem at all. the current iteration isn't wrong or bad in any way. the suggestion was just towards a potential further improvement. but as you outlined it is a totally reasonable to close the issue if the endeavor isn't feasible at all. thanks for the investigation and discussing the issue with lauri!

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States pthurmond Overland Park, KS

    I'm seeing this problem with embedded form contexts. I have a D9.5.9 site I am working on at the moment. I am using the Gin theme. When I am looking at text area fields using CKEditor that are directly in fields of the content type it looks great (see screenshot below). It clearly stuffs the extra controls behind a triple-dot icon and looks great.

    However, when I edit and embedded entity form (entity reference field) and that entity (in this case ECK Brick) has a text area with editor I see it overflowing to the right instead of nesting in this triple-dot menu. That to me is the problem.

    Good width display:

    Problem toolbar width:

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia sd9121

    I am rerolling the patch for 9.5.x

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Namisha Jadhav

    Please check the below given patch as ckeditor5 is now part of core.

Production build 0.69.0 2024