Make it possible to align images in builds with little effort

[wwalc]

One of the common requirements for end users will be the possibility of aligning images in the way how people got used to it: to the left/right side in the same article (instead of being able to use just a side image aligned to one side, offered by default).

The current method of defining such styles is far from being ideal, requiring the developer to provide complex configuration and build own editor, thus making it impossible to use CKEditor 5 from CDN.

import fullSizeIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';

...
            styles: [
                // This option is equal to a situation where no style is applied.
                {
                    name: 'imageStyleFull',
                    title: 'Full size image',
                    icon: fullSizeIcon,
                    value: null
                },

                // This represents an image aligned to left.
                {
                    name: 'imageStyleLeft',
                    title: 'Left aligned image',
                    icon: alignLeftIcon,
                    value: 'left',
                    className: 'image-style-left'
                },

                // This represents an image aligned to right.
                {
                    name: 'imageStyleRight',
                    title: 'Right aligned image',
                    icon: alignRightIcon,
                    value: 'right',
                    className: 'image-style-right'
                }

Even if there was some trick/workaround to provide icons (proposed in https://github.com/ckeditor/ckeditor5-ui/issues/293) I believe that does not solve the problem of being cumbersome. Here's why:

• One has to copy & paste some long blob of text to achieve a common setup.
• One has to point to some external icons.
• One has to define a title, which will not be translated out of the box to the large number of languages supported by CKEditor 5.

What I'd love to see is the the possibility of using some simplified configuration to let the Image plugin know which image styles are available. E.g. using only names of styles that CKEditor 5 would then recognise:

styles : [ { name: 'imageStyleLeft' } , { name: 'imageStyleFull' } , { name: 'imageStyleRight' } ]

if one wishes to use different class names:

styles : [ { name: 'imageStyleLeft',  className: 'mystyle-left' } , ... ]

CKEditor 5 could use some sane defaults for the rest of properties that were not set (e.g. icons, titles translated on Transifex). To support passing such a simplified configuration, the Image plugin would have to come with two additional "built-in" styles, which are not enabled by default
('imageStyleLeft'/'imageStyleRight') but at least possible to enable in an easy way.

Note: the syntax above is just to explain the idea of not having to define an icon and the the whole styles left/right from scratch. There may be better ways of setting this up easily.

[fredck]

An additional problem is that the concept of the image styles is different from one way and the other:

• Image Styles (semantics): Full, Side Image
• Image Alignment (formatting): Left, Center, Right

This means that, depending on the use case, the tootips texts will be different, although we can use the same icons for both cases. Therefore, maybe a single configuration to specify the use case would be better:

image-styles: 'semantics' (default) || 'formatting'

It can, of course, be overridden if one provides the current styles configuration.

The above configuration would also help to teach people about the benefit of the semantics approach.

[fredck]

One additional problem that we have is that the "side image" icon shows as right aligned. Here again, it would be wonderful to have an easy configuration way to switch the icon with the left aligned one, if my website fits that. Something like this:

image-side-image-icon: 'right' (default) || 'left'

[fredck]

Ops... moved my second comment to ckeditor/ckeditor5-image#135.