Neos-UI Bug Toolbar overflows if too crowded #2691

Creating Neos & Flow
1

Hello,

since Javascript is not my strong suite, I was hoping maybe someone can push me in the right direction. :grimacing:

I’m trying to fix the Neos-UI Toolbar, so that it looks like this → BUG: Toolbar overflows if too crowded · Issue #2691 · neos/neos-ui · GitHub.

My plan is to use a Neos-UI plugin to connect an eventhandler and manipulate the CSS when the CKEditor toolbar is shown.

So far I followed the instructions at neos-ui/packages/neos-ui-extensibility at 8.3 · neos/neos-ui · GitHub and created my plugin. But now I’m struggling how to connect an eventhandler when the CKEditor toolbar is active.

I found some registries like globalRegistry.get('containers').get('SecondaryToolbar'), globalRegistry.get('ckEditor5') and globalRegistry.get('serverFeedbackHandlers') but been stuck there. I’ve been looking at some Neos-UI plugin repositories to see how they worked but this didn’t helped me any further.

My poor attempt :cry:

import manifest from '@neos-project/neos-ui-extensibility';

manifest('My.CoolPlugin', {}, (globalRegistry) => {

    const serverFeedbackHandlers = globalRegistry.get('serverFeedbackHandlers');

    const callback = () => {
        console.log('callback')
    };

    serverFeedbackHandlers.set('Neos.Neos.Ui:InitializedInlineEditors', callback);

})

Thanks for any help :innocent:

2

Hi cool that you want to fix this. While i see why you want make it a plugin (if this would work you would have the fix instant and when fixing the ui we need to still release a bugfix - we can speed this up for sure)

But i would strongly recommend to fix this bug in the core directly. Otherwise everyone who want to profit from this need the extension and once really fixed, you dont need it anymore and also fixing this via extension is going to be a mess and not easy.

So feel free to checkout the Neos ui - preferably 7.3 since its a bugfix - but as this lowers the barrier 8.3 would be fine too as its much easier to setup and we can backport the fix :wink:

For instructions see:

If you need any further help feel free to reach out in slack #neos-ui

3

Hi @Marc

Thank you for your reply!

I took a look at the NEOS-UI repository, but with my non-existend react skills I think I’m not able to provide any help. I’m sorry but I got no idea where to start or where to put the fix.

My quick’n’dirty workaround was to use the following CSS rules:

#neos-application {
    grid-template-rows: 41px minmax(min-content, 41px) 1fr;
    background-color: #000000;
}

div[class$="_secondaryToolbar"] {
    height: min-content;
}

This rules help me to show the hidden CKEditor Icons if the browser window is to narrow. For the time being I’m gonna life with this solution.

The drawback is that it also pushes the leftSidebar down. This could have been countered with a negative margin, e.g. margin-top: -80px, like shown in the CSS example below.
This rule should be added via an eventhandler (= is CKEditor active). The height value of “80px” should be calculated (via Javascript) from the actually height of the secondaryToolbar. Without this rule the leftSidebar is pushed down from the height the secondaryToolbar takes.

This was the reason I asked for help in the first place - on how to add an “is CKEditor active” eventhandler in the manifest.js file. :wink:

:root {
    --secondaryToolbarHeight: 80;
    --secondaryToolbarHeightNegative: -80;
}
div[class*="leftSidebar"] {
    height: calc(100% + var(--secondaryToolbarHeight)px);
    margin-top: var(--secondaryToolbarHeightNegative)px;
}
4

The „is CKEditor active“ might be archived through various hacks but I’m not going to describe them all ^^

Instead I presume that it would be easier to ask for help in slack who is willing to fix this.

I could also offer you my help :wink:

5

Sorry @Marc for the super late answer. Looks like I overlooked your response :slightly_frowning_face: . For the lack of time I moved on and use my hack for the time being. Guess I will wait until a NeoUI bugfix is out. Many thanks for your effort to help.