Create separators for toolbars

[Reinmar]

Cause this is really confusing now:

[fredck]

As well an way to guarantee the order, so we have: full side | alt

[Reinmar]

This is a completely different issue. There's no custom order support right now – order of buttons is directly inherited from the order of items in the config. And the order of items in the config depends on the order in which plugins are loaded now, though, you can override it as the developer.

AFAIR, CKEditor 4 supports some menu items priority setting. We'd need something similar here to decouple the order in which plugins were loaded (which is linked to the order of buttons in the configuration) from the order of items in the toolbar.

[Reinmar]

When reporting https://github.com/ckeditor/ckeditor5-ui/issues/155 I realised that there's a problem. One plugin doesn't know about the other so neither of them can decide to put a separator between them. So the separator must be defined differently.

The first idea which came to my mind is that the image style plugin could add its item as a "toolbar group", so we'd have configuration which looks like this:

config.image.defaultToolbar = [
  'imageAlternativeText',
  [
    'imageStyleFull',
    'imageStyleSide'
  ]
];

And, with support for order:

config.image.defaultToolbar = [
  { name: 'imageAlternativeText', order: 10 },
  { 
    items: [
      'imageStyleFull',
      'imageStyleSide'
    ],
    order: 0
  }
];

A separator would be displayed between two groups or between a group and a simple item.

PS. We used to have a ticket for toolbar configuration, but I can't find it now. This is part of that bigger issue.

[Reinmar]

We don't want to work on toolbar groups or priorities right now as I mentioned in https://github.com/ckeditor/ckeditor5-ui/issues/155#issuecomment-282300881.

So the separator will be a visual thing only and it needs to be directly specified in the configuration:

toolbar: [ 'imageTextAlternative', '|', 'imageStyleFull', 'imageStyleSide' ]

[fredck]

I'm sure you meant this:

toolbar: [ 'imageStyleFull', 'imageStyleSide', '|' , 'imageTextAlternative' ]

;)