Heading UI components should be provided both as a dropdown and buttons

[pjasiun]

Since there are 2 popular ways to have a heading feature: dropdown or separate buttons for separate heading level, I think that dropdown should provide UI components for both. Since this is not much code we could make it simpler and Heading plugin could add all component. Then, it's up to the editor's configuration which options developer want to have enabled:

ClassicEditor.create( {
    plugins: [ 'Heading' ],
    toolbar: [ 'heading' ]
} );

BallonToolbarEditor.create( {
    plugins: [ 'Heading' ],
    toolbar: [ 'paragraph', 'heading1', 'heading2' ]
} );

[Reinmar]

EDIT: I extracted this part to https://github.com/ckeditor/ckeditor5-ui/issues/322.

This is a bit tricky. Introducing buttons and dropdown will bloat the code size. Exactly what we want to avoid. So, we need to be smart.

I'd have two ideas:

1. Introduce the buttons in the Heading plugin and the dropdown in HeadingDropdown plugin. The latter would use buttons from the Heading plugin as items in the dropdown (we need to make it simple to add buttons as items).
2. Make all configurable through the toolbar property. This is something we've been thinking for a long time but didn't ever investigated it deeper. The idea is that the Heading plugin would register button components. The toolbar would then allow to do something like this:

toolbar: [
    {
         type: 'dropdown',
         items: [ 'paragraph', 'heading1', 'heading2' ]
    },
    'bold',
    'italic'
]

or as separate buttons:

toolbar: [
    'paragraph',
    'heading1',
    'heading2',
    'bold',
    'italic'
]

Or as a button group (a set of buttons adjacent to each other):

toolbar: [
    {
         type: 'group',
         items: [ 'paragraph', 'heading1', 'heading2' ]
    },
    'bold',
    'italic'
]

Would render the 3 buttons like the alignment options in MS Word:

The second option is far more powerful, but requires more work too. Thanks to supporting for such configurations, the developer would be able to design his/her toolbar in a declarative way without creating a new editor plugin.

However, there are some challenges. E.g. the dropdown needs some labels and the label may need to be contextual.

Related ticket: ckeditor/ckeditor5-design#143

[amkgo]

Yes, mix and match different buttons together will make our life easier, especially when we want to restrict some use cases. For example, I'd like to use few buttons(without a drop down menu) and output markdown format or simple html format without embed style tags, so that I can change the style easily later on.

[Reinmar]

We also realised that besides reducing the need to click much, separate h1, h2 buttons will take less space which would help on low-res devices (i.e. mobile ones). So, there's a question whether this shouldn't be the default setup.

cc @wwalc @fredck

[pjasiun]

Also, note that dropdown in the balloon toolbar, which we have now on the demo page, looks terrible, buttons in such case would be much better:

[Reinmar]

Related ticket: #455.

[Reinmar]

DUPs https://github.com/ckeditor/ckeditor5-heading/issues/104