Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A way to wrap a multiple separate items into one dropdown #5420

Closed
Reinmar opened this issue Oct 10, 2017 · 11 comments
Closed

A way to wrap a multiple separate items into one dropdown #5420

Reinmar opened this issue Oct 10, 2017 · 11 comments
Labels
package:ui resolution:expired This issue was closed due to lack of feedback. status:stale type:feature This issue reports a feature request (an idea for a new functionality or a missing option).

Comments

@Reinmar
Copy link
Member

Reinmar commented Oct 10, 2017

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
Copy link
Member

oleq commented Apr 20, 2018

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
Copy link
Member Author

Reinmar commented Apr 20, 2018

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
Copy link
Member

oleq commented Apr 20, 2018

Declarative like toolbar API/config?

@Reinmar
Copy link
Member Author

Reinmar commented Apr 20, 2018

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

@oleq
Copy link
Member

oleq commented Apr 23, 2018

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
Copy link
Member Author

Reinmar commented Apr 23, 2018

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
Copy link

long-lazuli commented Jul 2, 2018

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'
            ]
        }),
        ...
    ],

dropdown-for-anything

@oleq
Copy link
Member

oleq commented Jul 16, 2018

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
Copy link

long-lazuli commented Jul 16, 2018

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'
  ]
}

@mlewand mlewand transferred this issue from ckeditor/ckeditor5-ui Oct 9, 2019
@mlewand mlewand added this to the backlog milestone Oct 9, 2019
@mlewand mlewand added status:confirmed type:feature This issue reports a feature request (an idea for a new functionality or a missing option). package:ui labels Oct 9, 2019
@pomek pomek removed this from the backlog milestone Feb 21, 2022
@CKEditorBot
Copy link
Collaborator

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
Copy link
Collaborator

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).

@CKEditorBot CKEditorBot added the resolution:expired This issue was closed due to lack of feedback. label Nov 2, 2023
@CKEditorBot CKEditorBot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package:ui resolution:expired This issue was closed due to lack of feedback. status:stale type:feature This issue reports a feature request (an idea for a new functionality or a missing option).
Projects
None yet
Development

No branches or pull requests

6 participants