Image styles

[szymonkups]

During the talk with @Reinmar about image alignment, it turned out that we could create more general solution to apply any styles (CSS classes) to images, and not only alignment ones.
It should introduce new classes:

• ImageStyleCommand
  Command that will apply proper style attribute to image elements in model.

• ImageStyleEngine
  Plugin that will add new converters converting style attribute from model to proper CSS classes in the view. It will also register ImageStyleCommand in the editor.

• ImageToolbar
  Plugin implementing image toolbar: Implement toolbar sample for image feature ckeditor5-ui-default#136. It will allow to add items to it, will show/hide toolbar when needed.

• ImageStyle
  Plugin that will connect the image toolbar with styles from configuration, it will add buttons that will execute proper command when clicked.

Configuration

Styles should be loaded from configuration. Configuration format, default values:

config.define( 'image.styles', { 
    options: [ 
        { title: 'Align left', icon: 'image-align-left', value: 'left' }, 
        { title: 'Full', icon: 'image-align-full', value: false }, 
        { title: 'Align right', icon: 'image-align-right', value: 'right' } 
    ],
    className: value => `image-align-${ value }`
} );

Note: this configuration allows only to specify styles that exclude each other (there can be only one CSS class applied at given time). This can be solved in future by adding optionGroups configuration or specify a key for given group.

[Reinmar]

ImageToolbar
Plugin implementing image toolbar: ckeditor/ckeditor5-ui-default#136. It will allow to add items to it, will show/hide toolbar when needed.

I'm thinking how to best configure such toolbar. I initially said that it could look like this:

editor.plugins.get( ImageToolbar ).items.add( imageAlignLeftButton );

Perhaps this is enough for start, but I was also thinking on something else – using the component factory like for the main editor toolbar. So the image toolbar would be configurable through config:

config.image.toolbar = [ 'imageAlignLeft', 'imageAlignNone', 'imageAlignRight' ];

And it would use components registered in the factory. Such option would allow you to e.g. put these buttons in a totally different place – such as the main toolbar or even your custom toolbar.

PS. This also means that options in the image styles need to have names, so rather than an array this could be an object:

config.define( ‘image.styles’, { 
    options: { 
        imageAlignLeft: { title: 'Align left', icon: 'image-align-left', value: 'left' }, 
        imageAlignNone: { title: 'Full', icon: 'image-align-full', value: false }, 
        imageAlignRight: { title: 'Align right', icon: 'image-align-right', value: 'right' } 
    },

[fredck]

I would rethink the way we think about images. They should not have "alignment" but instead "styles" (or types, or purposes). For instance, we could have a "Full Size" image and a "Side Image" in one setup, while having "Aligned Right", "Aligned Left" and "Full" in another. So it is not really about the image alignment, but about the style applied to it, which defines a specific "type" of image (usually with different purposes).

[Reinmar]

That's why we called this option "styles" and the plugin "ImageStyle". Nothing about alignment there.

But at the same time we need to define the default styles and, as you said, we need there something besides full size. We can either have just one more option and call it "side image" or have 3 options (so besides full, also "left aligned image" and "right aligned image"). Just a matter of what defaults we want to propose. And I can agree to both as it's hard to tell for me which is more common. Perhaps full/left/right will be more intuitive.

[fredck]

I think that we'll face two lines of thought here. One more modern, very open to think about content quality and semantics that would go for the "Full+Side" set. The other, will be attached to the years of word-processing standards and would expect to have "Left+Right+Center", even if they don't know why.

I'm an evangelist of quality content, so I would definitely go with the "Full+Side" approach. This may be surprising to many but they may be pleased with the idea once they stop and think for a second.

Still, many will complain about it, so maybe having it ready for the "Left+Right+Center" way with a simple configuration would be enough.