A way to wrap a multiple separate items into one dropdown

[Reinmar]

As described in https://github.com/ckeditor/ckeditor5-heading/issues/74#issuecomment-305224952.

The goal is to allow wrapping multiple items into one dropdown just by the toolbar configuration (or implementing a super simple plugin or both).

[oleq]

Do you think what we did in the Font Size/Family/Highlight is enough? Should we come up with a generic mechanism to configure dropdowns using the toolbar config (it seems like a very tricky thing, though).

[Reinmar]

It's a different kind of feature. We have APIs to wrap things in dropdowns. But it requires building the editor. We need something declarative, which could be done by anyone when integrating an editor.

[oleq]

Declarative like toolbar API/config?

[Reinmar]

Yes ;) Like in the linked comment which started this topic: https://github.com/ckeditor/ckeditor5-heading/issues/74#issuecomment-305224952.

[oleq]

I'm not sure how could we wrap a couple of items in a drop-down and assign an icon to it, though. We could specify an icon as a string somewhere (in the cfg) but what about importing it? We need an explicit import declaration to obtain this kind of resource; we don't have a resource manager we could use for that purpose in v5.

[Reinmar]

An SVG's source can be specified through a config file. Or we'll add support for SVG source paths and it'll be even easier.

Besides, you don't need an icon for a normal dropdown. For a dropdown based on a split button we can use icons of buttons that we're wrapping, so that's not a problem either.

[long-lazuli]

You can check this plugin : https://github.com/Didask/ckeditor5-dropdownui

It's an early release:
No tests and no much documentation at the moment. Feel free to help.

The plugin has two methods to call from the config.

• DropdownCreator creates a command from the plugins section
• dropdownUI populate its config directly from a toolbar section and returns the dropdown command.

It doesn't create subcommand on the fly, but use command already existing in the build.

The name of the dropdown can be seen as a prefix for commands,
here, the 'alignLeft' option in the 'imageStyle' dropdown will call 'imageStyle:alignLeft'.
But you can put a ':' in the option name, and the name of the command will be used as is.

Implem looks like this :

export default {

    plugins: [
        ...
        DropdownCreator('imageStyle'),
        DropdownCreator('mediaWidth')
        ...
    ],

    toolbar: [
        ...
        dropdownUI('imageStyle').set({
            title: 'Select image alignment',
            icon: alignOptionsIcon,
            options: [
                'alignLeft',
                'alignCenter',
                'alignRight'
            ]
        }),
        dropdownUI('mediaWidth').set({
            title: 'Select media width',
            icon: widthOptionsIcon,
            dynamicIcon: false,
            options: [
               'full',
               'threeQuarters',
               'twoThirds',
               'half',
               'third',
               'quarter'
            ]
        }),
        ...
    ],

[oleq]

I'm glad it works for you, @long-lazuli.

But I'm afraid this kind of approach is a no-go when developers use any default editor build and they have no way to import any internals (classes, helpers) from the build. In other words: I think we should avoid any solution that involves importing/executing code at the Editor.create() end.

I think we could either:

• have this feature out-of-the-box like we discussed,
• make the toolbar population process open (e.g. event–driven) so loading a DropdownCreator plugin would allow it to contribute to the process – the plugin would return a dropdown when a certain syntax is found in the toolbar config

[long-lazuli]

I would be really happy to leave this code behind and use your approach :)
I'm just pointing something usable at the moment !

Btw, I wanted to be able to use a clear syntax without creating instance of dropdown on the fly.
I think we're going toward the same code clarity.

{
  type: 'dropdown',
  title: 'Select image alignment',
  icon: alignOptionsIcon,
  options: [
    'alignLeft',
    'alignCenter',
    'alignRight'
  ]
}

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).