Move plugins into drop down list

[cmak9149]

Our CKEditor 5 toolbar is too narrow to put in desired buttons. So, we have to put some plugins in the drop down list. I managed to get a drop down list show up with dummy buttons. But I don't know how to associate the dummy buttons to a real plug in:

class CustomToolList extends Plugin {
init() {
const editor = this.editor;

    editor.ui.componentFactory.add( 'customToolList', locale => {
        const dropdownView = createDropdown( locale );
        // 'separator', 'button', 'switchbutton' 
        const items = new Collection();
        items.add( { type: 'button', model: new Model( { withText: true, label: 'Foo'} ) } );
        items.add( { type: 'button', model: new Model( { withText: true, label: 'Bar' } )  } );
        items.add( { type: 'separator', model: new Model( { withText: true, label: 'Bar' } )  } );
        items.add( { type: 'button', model: new Model( { withText: true, label: 'Bar2' } )  } );
        addListToDropdown( dropdownView, items );

        return dropdownView;
    } );
}

}

[Mgsy]

Hello! Some time ago we've introduced the toolbar items grouping for narrow toolbars, doesn't it solve your issue?

Besides that, you can also take a look at the block toolbar where you can put your plugins.

[cmak9149]

@Mgsy, thank you very much for your reply. The toolbar items group exactly what we want, but I don't know this is already available. I am new to CKEditor and only know installing of plugin through npm install --save. What is the name of plugin I can install?

I found the git commit id. Do I extract it though git checkout?

[Mgsy]

Grouping is enabled by default, however, it's not available for inline and balloon editors. There's no need to perform additional actions, just run, for example, the classic build and that's it.

Please, see it in action here.

[cmak9149]

Thanks again. We implement multiroot editor, following code sample in the documentation. Will that be any issue?

Automatic item grouping help 75% our use cases. (#1472 will be 95% :) When the drop down (preferable a down arrow and menu go straight down) appear, it contains some items with submenu. Let us say the drop down has an item call "Alignment", followed by right triangle. Clicking it open another drop down, showing four choices (Left, Right, Center and Justify, in text), in other words, a hierarchy of drop downs.

The design also bind "fontColor and fontBackgroundColor" into one dropdown, which might not be taken care by the automatic grouping.

[Mgsy]

We implement multiroot editor, following code sample in the documentation. Will that be any issue?

As you can see, shouldGroupWhenFull is a toolbar option and those are passed to the toolbar constructor. It means that if you create your own editor (multi-root in this case), you have to enable it manually.

According to our guide, the toolbar is created in MultirootEditorUIView class. If you want to enable grouping, pass the proper option to the new toolbar instance:

this.toolbar = new ToolbarView( locale, { shouldGroupWhenFull: true } );

Automatic item grouping help 75% our use cases. (#1472 will be 95% :)

Unfortunately, due to other priorities, we can't provide any ETA for this feature. However, you can add 👍 to the first post to bump a popularity of this request. Also, feel free to join the discussion.

[cmak9149]

@Mgsy. "shouldGroupWhenFull: true" is a life saver. Thanks a million.

If I want to go ahead work implement 1472 on my own, I want to know how to associate a button with a plugin. I browse the code how a toolbar is parsed, but I haven't gotten anywhere yet. By any chance you can point me to a class, a function to find out how the association is made?

[Mgsy]

CKEditor 5 plugins use commands which could be executed by editor#execute. For example, if you'd like to fire undo, you can do it this way - editor.execute( 'undo' );.

However, for your case, maybe a better solution will be creating a new toolbar? ToolbarView has fillFromConfig method which could use existing buttons created by plugins. You can see the example implementation of a custom toolbar in the BlockToolbar plugin.