Responsive toolbar

[SammyM]

Is this a bug report or feature request?

🆕 Feature request

💻 Version of CKEditor

CKEditor v5 @ 12.4.0

📋 Steps to reproduce

Currently the toolbar gets a little ugly in narrow viewports. Namely it flows into two, disorganized lines.

Example below:

A solution for this would be to collapse overflowing buttons.

---

If you'd like to see this feature implemented, add 👍 to this post.

[fredck]

Hey @SammyM, can you elaborate a bit, guiding us on your expectations on this? How do you think CKEditor should behave when it comes to responsive design?

[fredck]

I mean, we know there’s work to be done, and we have plans for it, but I would love to hear your expectations, because it may point us to things we didn't take in consideration so far.

[SammyM]

I've not spent a lot of time playing with the new version of CKEditor so I'm not sure of all the functionality yet, but I've noticed that the popups/tooltips can't fully be seen on smaller viewports. For example:

I'm glad to hear it's in your plans.

[HasanAmmori]

Well, I am sure these are minor things that I wouldn't be worried about. Most of the elements act really well already

[SammyM]

Is there an update on this at all? I know the UI of CKEditor has changed a bit since I last raised this issue, but the popups still go off the screen.

[oleq]

I proposed 2 improvements to the UI:

Responsive in–balloon forms

This feature is on review now.

(WIP) Dynamic items grouping for overflowed toolbars

The PoC can be found in the PR but it's not finished yet.

Why not a scrollable toolbar instead?

It sounded like a great plan and at first. In fact, I tried to implement a scrollable toolbar. Like when it overflows, the scrollbar appears and it is possible to reach the rest of the items easily (at least on mobile). But my PoC failed because of the following reasons:

• The solution is OK for mobiles (touch devices) but not necessarily on desktops. We'd need to implement grouping soon anyway, e.g. in the document editor where we struggle to find a space for more feature buttons.
• When the toolbar gets any overflow, all children are cropped (e.g. dropdown panels, tooltips),
• To fight the above, I tried to rewrite dropdown panels to balloon–like components (with position: absolute + our positioning heuristics) and I found multiple issues with that approach:
  • The dropdowns were hit by the "position delay syndrome"
  • I found out our API is not ready for any UI component using BalloonPanelView or anything that goes into the "body" collection. ATM only plugins can use these things because to work with them, we need to know about the editor (EditorUI), which is impossible in plain UI components:
    • Where to insert it in DOM (editor.ui.view.body)
    • How to handle the focus (editor.ui.focusTracker)
  • Because of the above I had to rewrite createDrodpown so it gets both the reference to the body collection and the focus tracker so the dropdown can put the (now floating) panel in the right place in DOM and register it in the FC (the panel no longer belongs to the toolbar which is in the FC by default). That's quite a mess.
  • When the dropdown panel is no longer in the same tree as its button (in the "body" collection), when suddenly the toolbar changes its position (e.g. sticky panel is no longer sticky because of focus loss), we must update the position of the panel too. The dropdown has no idea what happens to the toolbar, it doesn't know anything about that (it's encapsulated as a View) so there's no way to tell the dropdown to update the position of its panel except from the outside. That would require a very weird API.
    
    

I figured we'd need a massive refactoring to deal with these issues that we cannot afford ATM.

[Reinmar]

The first part of the changes mentioned by @oleq in #416 (comment) are merged:

We still need your feedback on the "(WIP) Dynamic items grouping for overflowed toolbars" part though.

[mlewand]

It's about time to focus this issue. Issue with balloons out of view have been fixed with #1299, the only outstanding problem is the toolbar responsiveness, and let's track it in this issue.

[nusagates]

Unable to scroll toolbar. So the invisible toolbar item could not be used on mobile phone.

How to resolve this issue?

[oleq]

@nusagates Please leave a 👍 in #5586.