#2052: Support for inline images

[oleq]

Suggested merge commit message (convention)

Feature (image): Introduced support for inline images in editor content. Available out–of–the–box in all ready–to–use editor builds inline images can be uploaded, styled, resized, and linked and complement the already supported block images. See the image feature overview guide to see inline images in action. For more information about breaking changes, migration path, and tips, check out the migration guide.

Feature (image): It should be possible to define the dropdown menu as an object in the config.image.toolbar configuration. Closes #9340.

Other (image): Turned the image utils module into an editor plugin to allow sharing utils outside the package. See #8871.

Fix (image): The side-aligned images should always have some min-width property to not take the whole editor width. Closes #9342.

Fix (image): The floating block images, except the side image, should be displayed side by side by default. Closes #9183.

Fix (image): An image should never overflow the widget boundaries while changing its size. Closes #9166.

Fix (image): The size label should be displayed above the image if it doesn't fit inside. See #9166.

Fix (image): An Image caption placeholder text should not wrap or overflow. Closes #9162.

Other (image): The image toolbar should be visible if the selection is placed inside an image caption. Closes #9136.

Other (image): The image caption should be controlled using the toolbar button and a command for better integration with image styles. Closes #8907.

Other (build-decoupled-document): The editor document build should include the ImageResize plugin. Closes #9507.

Feature (link): Integrated the link feature with inline images. Closes #8871. Closes #9017. Closes #9167.

Fix (link): The link UI should be shown when clicking a linked inline widget. Closes #9607.

Other (widget): Safeguarded the way the Widget plugin sets the fake selection. Closes #9580.

Fix (widget): Selected inline widgets wrapped in an attribute in the view should create a fake selection. Closes #9524. Closes #9521.

Other (widget): Replaced the findOptimalInsertionPosition() helper with findOptimalInsertionRange() that will now attempt to replace selected blocks when inserting new widgets. Closes #9102.

Fix (clipboard): Hide all toolbars when the user starts dragging the widget and show them when the drag ends. Closes #9566.

Fix (code-block): The code block feature should not allow for inserting inline widgets as its content. Closes #9567.

Other (easy-image): Removed the Image plugin dependency from the EasyImage plugin. Closes #9399.

Other (table): Added the .ck-table-bogus-paragraph CSS class to the in-cell pseudo-paragraph used for data tables for easier and safer styling.

Other (core): Added several icons for new image styles (see #8909).

Other (ui): Added the class property to the SplitButtonView UI component. See #8909.

Other (image, table, html-embed, media-embed, page-break, horizontal-line): New widgets will replace the selected block instead of being added next to it while being inserted (see #9102).

BREAKING CHANGE (image): The Image plugin works as a glue for both ImageBlock and ImageInline features now (previously only block images). If you do not want inline images to be allowed, consider replacing the Image plugin with ImageBlock in your editor configuration. Otherwise, all images without the <figure> wrapper will be loaded into the editor content as inline images, which in some cases may affect content semantics and styling.

BREAKING CHANGE (image): The ImageEditing plugin is no longer standalone as the majority of its logic was extracted to ImageBlockEditing and ImageInlineEditing plugins. The logic remaining in the ImageEditing is common for both ImageBlockEditing and ImageInlineEditing plugins.

BREAKING CHANGE (image): The image caption is no longer displayed automatically the user selects a block image. Instead, its presence is controlled using the 'toggleImageCaption' toolbar button and a ToggleImageCaptionCommand for better integration with revamped image styles system. Learn more.

BREAKING CHANGE (image): Some helpers from the image utils module (@ckeditor/ckeditor5-image/src/image/utils.js) have moved to the ImageUtils plugin. The helpers are still accessible via editor.plugins.get( 'ImageUtils' ) namespace, for instance, editor.plugins.get( 'ImageUtils' ).insertImage( ... ).

BREAKING CHANGE (image): The API of the insertImage() helper has changed, please make sure to update your integrations.

BREAKING CHANGE (image): The getSelectedImageWidget() helper is no longer part of the public API.

BREAKING CHANGE (image): The getViewImgFromWidget() helper is no longer part of the public API.

BREAKING CHANGE (image): The isImageAllowed() helper is no longer part of the public API.

BREAKING CHANGE (image): The isImage() helper is no longer part of the public API.

BREAKING CHANGE (image): The isImageWidget() helper is no longer part of the public API.

BREAKING CHANGE (image): The toImageWidget() helper is no longer part of the public API.

BREAKING CHANGE (image): The captionElementCreator() helper is no longer part of the public API.

BREAKING CHANGE (image): The isCaption() helper is no longer part of the public API.

BREAKING CHANGE (image): The getCaptionFromImage() helper is now available as getCaptionFromImageModelElement().

BREAKING CHANGE (image): The matchImageCaption() helper is now available as matchImageCaptionViewElement().

BREAKING CHANGE (image): The defaultIcons are now available as DEFAULT_ICONS.

BREAKING CHANGE (image): The defaultStyles are now available as DEFAULT_OPTIONS.

BREAKING CHANGE (image): The linked image indicator (icon) rendered as a <span> with the .ck-link-image_icon CSS class has been removed. To alter the look of the indicator (including the icon), please use figure.image > a::after (for linked block images) and a span.image-inline::after (for linked inline images) CSS selectors instead.

BREAKING CHANGE (image): The isImageWidget() helper is no longer exposed by the Image plugin.

BREAKING CHANGE (image): The API of common image converters has changed. Please refer to the documentation to learn more.

BREAKING CHANGE (image): The API of various image caption utils has changed. Please refer to the documentation to learn more.

BREAKING CHANGE (image): The conversion helpers srcsetAttributeConverter() and modelToViewAttributeConverter() now require the imageType parameter.

BREAKING CHANGE (easy-image): The EasyImage plugin is no longer automatically importing the Image plugin as a dependency. Learn more.

BREAKING CHANGE (ckfinder): The CKFinder plugin is no longer automatically importing the Image plugin as a dependency. Learn more.

BREAKING CHANGE (link): The isImageAllowed() helper is now available as isLinkableElement().

BREAKING CHANGE (media-embed): The API of the insertMedia() helper has changed. See the documentation to learn more.

BREAKING CHANGE (build-decoupled-document): The official decoupled document build now ships with the ImageResize plugin enabled by default. Learn more.

BREAKING CHANGE (table): The in-cell pseudo-paragraph used for data tables is no longer styled using the inline style attribute but a .ck-table-bogus-paragraph CSS class instead.

BREAKING CHANGE (widget): The findOptimalInsertionPosition() helper is now findOptimalInsertionRange() and returns a model range. Also, instead of searching for a position next to the currently selected block, it will now attempt to replace that block (see #9102).

BREAKING CHANGE (widget): The checkSelectionOnObject() helper is no longer part of the public API.

---

Additional information

[LukaszGudel]

Steps:

1. Add linked inline image.
2. Toggle table caption.
3. Drag&drop or copy&paste image into table caption.
4. Convert image to block.

CKE5-inline-linked-table-caption.mp4

Result:

Editor crashes with error:

writer.js:1489 Uncaught TypeError: Cannot read property 'getAttribute' of null
    at setAttributeOnItem (writer.js:1489)
    at Writer.removeAttribute (writer.js:421)
    at Object.callback (imagestylecommand.js:117)
    at Model._runPendingChanges (model.js:839)
    at Model.change (model.js:184)
    at ImageStyleCommand.execute (imagestylecommand.js:101)
    at ImageStyleCommand.<anonymous> (observablemixin.js:258)
    at ImageStyleCommand.fire (emittermixin.js:199)
    at ImageStyleCommand.<computed> [as execute] (observablemixin.js:262)
    at CommandCollection.execute (commandcollection.js:69)

Notes:

• this image needs to be linked as captions do not allow inserting nonlinked inline images
• linked image can be also inserted into image captions, but converting it to block will remove an image

[LukaszGudel]

Steps:

1. Add inline image.
2. Click on 'Edit source' button in HTML embed.
3. Drag inline image into HTML embed.
4. Undo.

CKE5-inline-drag-html-undo.mp4

Result:

Editor throws error:

mapper.js:485 Uncaught TypeError: Cannot read property 'name' of undefined
    at Mapper.getModelLength (mapper.js:485)
    at Mapper._toModelOffset (mapper.js:456)
    at Mapper.on.priority (mapper.js:118)
    at Mapper.fire (emittermixin.js:199)
    at Mapper.toModelPosition (mapper.js:312)
    at Mapper.toModelRange (mapper.js:286)
    at Object.<anonymous> (upcasthelpers.js:511)
    at Object.fire (emittermixin.js:199)
    at fireListenerFor (bubblingemittermixin.js:162)
    at Document.fire (bubblingemittermixin.js:92)

Notes:

• same scenario with block image is not crashing on undo
• it looks like a 'soft crash' and editor seems to be fully usable after the error
• pressing Command+Z once more will bring back the image