@ckeditor/ckeditor5-image 39.0.2 → 40.1.0

package/src/image/imageblockediting.d.ts

@@ -8,7 +8,9 @@
 import { Plugin } from 'ckeditor5/src/core';
 import { ClipboardPipeline } from 'ckeditor5/src/clipboard';
 import ImageEditing from './imageediting';
+import ImageSizeAttributes from '../imagesizeattributes';
 import ImageUtils from '../imageutils';
+import ImagePlaceholder from './imageplaceholder';
 /**
  * The image block plugin.
  *
@@ -23,7 +25,7 @@ export default class ImageBlockEditing extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof ImageEditing, typeof ImageUtils, typeof ClipboardPipeline];
+    static get requires(): readonly [typeof ImageEditing, typeof ImageSizeAttributes, typeof ImageUtils, typeof ImagePlaceholder, typeof ClipboardPipeline];
     /**
      * @inheritDoc
      */
@@ -50,6 +52,8 @@ export default class ImageBlockEditing extends Plugin {
      * if they decided to put their image there.
      *
      * See the `ImageInlineEditing` for the similar integration that works in the opposite direction.
+     *
+     * The feature also sets image `width` and `height` attributes on paste.
      */
     private _setupClipboardIntegration;
 }

package/src/image/imageblockediting.js

@@ -10,9 +10,11 @@ import { ClipboardPipeline } from 'ckeditor5/src/clipboard';
 import { UpcastWriter } from 'ckeditor5/src/engine';
 import { downcastImageAttribute, downcastSrcsetAttribute, upcastImageFigure } from './converters';
 import ImageEditing from './imageediting';
+import ImageSizeAttributes from '../imagesizeattributes';
 import ImageTypeCommand from './imagetypecommand';
 import ImageUtils from '../imageutils';
-import { getImgViewElementMatcher, createBlockImageViewElement, determineImageTypeForInsertionAtSelection } from '../image/utils';
+import { getImgViewElementMatcher, createBlockImageViewElement, determineImageTypeForInsertionAtSelection } from './utils';
+import ImagePlaceholder from './imageplaceholder';
 /**
  * The image block plugin.
  *
@@ -28,7 +30,7 @@ export default class ImageBlockEditing extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [ImageEditing, ImageUtils, ClipboardPipeline];
+        return [ImageEditing, ImageSizeAttributes, ImageUtils, ImagePlaceholder, ClipboardPipeline];
     }
     /**
      * @inheritDoc
@@ -97,6 +99,8 @@ export default class ImageBlockEditing extends Plugin {
      * if they decided to put their image there.
      *
      * See the `ImageInlineEditing` for the similar integration that works in the opposite direction.
+     *
+     * The feature also sets image `width` and `height` attributes on paste.
      */
     _setupClipboardIntegration() {
         const editor = this.editor;
@@ -132,5 +136,18 @@ export default class ImageBlockEditing extends Plugin {
                 data.content = writer.createDocumentFragment(blockViewImages);
             }
         });
+        this.listenTo(clipboardPipeline, 'contentInsertion', (evt, data) => {
+            if (data.method !== 'paste') {
+                return;
+            }
+            model.change(writer => {
+                const range = writer.createRangeIn(data.content);
+                for (const item of range.getItems()) {
+                    if (item.is('element', 'imageBlock')) {
+                        imageUtils.setImageNaturalSizeAttributes(item);
+                    }
+                }
+            });
+        });
     }
 }

package/src/image/imageediting.js

@@ -51,18 +51,7 @@ export default class ImageEditing extends Plugin {
                 name: 'img',
                 key: 'srcset'
             },
-            model: {
-                key: 'srcset',
-                value: (viewImage) => {
-                    const value = {
-                        data: viewImage.getAttribute('srcset')
-                    };
-                    if (viewImage.hasAttribute('width')) {
-                        value.width = viewImage.getAttribute('width');
-                    }
-                    return value;
-                }
-            }
+            model: 'srcset'
         });
         const insertImageCommand = new InsertImageCommand(editor);
         const replaceImageSourceCommand = new ReplaceImageSourceCommand(editor);

package/src/image/imageinlineediting.d.ts

@@ -8,7 +8,9 @@
 import { Plugin } from 'ckeditor5/src/core';
 import { ClipboardPipeline } from 'ckeditor5/src/clipboard';
 import ImageEditing from './imageediting';
+import ImageSizeAttributes from '../imagesizeattributes';
 import ImageUtils from '../imageutils';
+import ImagePlaceholder from './imageplaceholder';
 /**
  * The image inline plugin.
  *
@@ -23,7 +25,7 @@ export default class ImageInlineEditing extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof ImageEditing, typeof ImageUtils, typeof ClipboardPipeline];
+    static get requires(): readonly [typeof ImageEditing, typeof ImageSizeAttributes, typeof ImageUtils, typeof ImagePlaceholder, typeof ClipboardPipeline];
     /**
      * @inheritDoc
      */
@@ -51,6 +53,8 @@ export default class ImageInlineEditing extends Plugin {
      * in the clipboard pipeline.
      *
      * See the `ImageBlockEditing` for the similar integration that works in the opposite direction.
+     *
+     * The feature also sets image `width` and `height` attributes when pasting.
      */
     private _setupClipboardIntegration;
 }

package/src/image/imageinlineediting.js

@@ -10,9 +10,11 @@ import { ClipboardPipeline } from 'ckeditor5/src/clipboard';
 import { UpcastWriter } from 'ckeditor5/src/engine';
 import { downcastImageAttribute, downcastSrcsetAttribute } from './converters';
 import ImageEditing from './imageediting';
+import ImageSizeAttributes from '../imagesizeattributes';
 import ImageTypeCommand from './imagetypecommand';
 import ImageUtils from '../imageutils';
-import { getImgViewElementMatcher, createInlineImageViewElement, determineImageTypeForInsertionAtSelection } from '../image/utils';
+import { getImgViewElementMatcher, createInlineImageViewElement, determineImageTypeForInsertionAtSelection } from './utils';
+import ImagePlaceholder from './imageplaceholder';
 /**
  * The image inline plugin.
  *
@@ -28,7 +30,7 @@ export default class ImageInlineEditing extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [ImageEditing, ImageUtils, ClipboardPipeline];
+        return [ImageEditing, ImageSizeAttributes, ImageUtils, ImagePlaceholder, ClipboardPipeline];
     }
     /**
      * @inheritDoc
@@ -105,6 +107,8 @@ export default class ImageInlineEditing extends Plugin {
      * in the clipboard pipeline.
      *
      * See the `ImageBlockEditing` for the similar integration that works in the opposite direction.
+     *
+     * The feature also sets image `width` and `height` attributes when pasting.
      */
     _setupClipboardIntegration() {
         const editor = this.editor;
@@ -156,5 +160,18 @@ export default class ImageInlineEditing extends Plugin {
                 data.content = writer.createDocumentFragment(inlineViewImages);
             }
         });
+        this.listenTo(clipboardPipeline, 'contentInsertion', (evt, data) => {
+            if (data.method !== 'paste') {
+                return;
+            }
+            model.change(writer => {
+                const range = writer.createRangeIn(data.content);
+                for (const item of range.getItems()) {
+                    if (item.is('element', 'imageInline')) {
+                        imageUtils.setImageNaturalSizeAttributes(item);
+                    }
+                }
+            });
+        });
     }
 }

package/src/image/imageplaceholder.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/image/imageplaceholder
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageUtils from '../imageutils';
+import '../../theme/imageplaceholder.css';
+/**
+ * Adds support for image placeholder that is automatically removed when the image is loaded.
+ */
+export default class ImagePlaceholder extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImagePlaceholder";
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+    /**
+     * Extends model schema.
+     */
+    private _setupSchema;
+    /**
+     * Registers converters.
+     */
+    private _setupConversion;
+    /**
+     * Prepares listener for image load.
+     */
+    private _setupLoadListener;
+}

package/src/image/imageplaceholder.js

@@ -0,0 +1,113 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/image/imageplaceholder
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageUtils from '../imageutils';
+import ImageLoadObserver from './imageloadobserver';
+import '../../theme/imageplaceholder.css';
+/**
+ * Adds support for image placeholder that is automatically removed when the image is loaded.
+ */
+export default class ImagePlaceholder extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImagePlaceholder';
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        this._setupSchema();
+        this._setupConversion();
+        this._setupLoadListener();
+    }
+    /**
+     * Extends model schema.
+     */
+    _setupSchema() {
+        const schema = this.editor.model.schema;
+        // Wait for ImageBlockEditing or ImageInlineEditing to register their elements first,
+        // that's why doing this in afterInit() instead of init().
+        if (schema.isRegistered('imageBlock')) {
+            schema.extend('imageBlock', {
+                allowAttributes: ['placeholder']
+            });
+        }
+        if (schema.isRegistered('imageInline')) {
+            schema.extend('imageInline', {
+                allowAttributes: ['placeholder']
+            });
+        }
+    }
+    /**
+     * Registers converters.
+     */
+    _setupConversion() {
+        const editor = this.editor;
+        const conversion = editor.conversion;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        conversion.for('editingDowncast').add(dispatcher => {
+            dispatcher.on('attribute:placeholder', (evt, data, conversionApi) => {
+                if (!conversionApi.consumable.test(data.item, evt.name)) {
+                    return;
+                }
+                if (!data.item.is('element', 'imageBlock') && !data.item.is('element', 'imageInline')) {
+                    return;
+                }
+                conversionApi.consumable.consume(data.item, evt.name);
+                const viewWriter = conversionApi.writer;
+                const element = conversionApi.mapper.toViewElement(data.item);
+                const img = imageUtils.findViewImgElement(element);
+                if (data.attributeNewValue) {
+                    viewWriter.addClass('image_placeholder', img);
+                    viewWriter.setStyle('background-image', `url(${data.attributeNewValue})`, img);
+                    viewWriter.setCustomProperty('editingPipeline:doNotReuseOnce', true, img);
+                }
+                else {
+                    viewWriter.removeClass('image_placeholder', img);
+                    viewWriter.removeStyle('background-image', img);
+                }
+            });
+        });
+    }
+    /**
+     * Prepares listener for image load.
+     */
+    _setupLoadListener() {
+        const editor = this.editor;
+        const model = editor.model;
+        const editing = editor.editing;
+        const editingView = editing.view;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        editingView.addObserver(ImageLoadObserver);
+        this.listenTo(editingView.document, 'imageLoaded', (evt, domEvent) => {
+            const imgViewElement = editingView.domConverter.mapDomToView(domEvent.target);
+            if (!imgViewElement) {
+                return;
+            }
+            const viewElement = imageUtils.getImageWidgetFromImageView(imgViewElement);
+            if (!viewElement) {
+                return;
+            }
+            const modelElement = editing.mapper.toModelElement(viewElement);
+            if (!modelElement || !modelElement.hasAttribute('placeholder')) {
+                return;
+            }
+            model.enqueueChange({ isUndoable: false }, writer => {
+                writer.removeAttribute('placeholder', modelElement);
+            });
+        });
+    }
+}

package/src/image/imagetypecommand.d.ts

@@ -29,11 +29,15 @@ export default class ImageTypeCommand extends Command {
      * Executes the command and changes the type of a selected image.
      *
      * @fires execute
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
      * @returns An object containing references to old and new model image elements
      * (for before and after the change) so external integrations can hook into the decorated
      * `execute` event and handle this change. `null` if the type change failed.
      */
-    execute(): {
+    execute(options?: {
+        setImageSizes?: boolean;
+    }): {
         oldElement: Element;
         newElement: Element;
     } | null;

package/src/image/imagetypecommand.js

@@ -34,11 +34,13 @@ export default class ImageTypeCommand extends Command {
      * Executes the command and changes the type of a selected image.
      *
      * @fires execute
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
      * @returns An object containing references to old and new model image elements
      * (for before and after the change) so external integrations can hook into the decorated
      * `execute` event and handle this change. `null` if the type change failed.
      */
-    execute() {
+    execute(options = {}) {
         const editor = this.editor;
         const model = this.editor.model;
         const imageUtils = editor.plugins.get('ImageUtils');
@@ -51,10 +53,11 @@ export default class ImageTypeCommand extends Command {
             return null;
         }
         return model.change(writer => {
+            const { setImageSizes = true } = options;
             // Get all markers that contain the old image element.
             const markers = Array.from(model.markers)
                 .filter(marker => marker.getRange().containsItem(oldElement));
-            const newElement = imageUtils.insertImage(attributes, model.createSelection(oldElement, 'on'), this._modelElementName);
+            const newElement = imageUtils.insertImage(attributes, model.createSelection(oldElement, 'on'), this._modelElementName, { setImageSizes });
             if (!newElement) {
                 return null;
             }

package/src/image/replaceimagesourcecommand.d.ts

@@ -2,7 +2,8 @@
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { Command } from 'ckeditor5/src/core';
+import { Command, type Editor } from 'ckeditor5/src/core';
+import type { Writer, Element } from 'ckeditor5/src/engine';
 /**
  * @module image/image/replaceimagesourcecommand
  */
@@ -17,6 +18,7 @@ import { Command } from 'ckeditor5/src/core';
  */
 export default class ReplaceImageSourceCommand extends Command {
     value: string | null;
+    constructor(editor: Editor);
     /**
      * @inheritDoc
      */
@@ -31,4 +33,19 @@ export default class ReplaceImageSourceCommand extends Command {
     execute(options: {
         source: string;
     }): void;
+    /**
+     * Cleanup image attributes that are not relevant to the new source.
+     *
+     * Removed attributes are: 'srcset', 'sizes', 'sources', 'width', 'height', 'alt'.
+     *
+     * This method is decorated, to allow custom cleanup logic.
+     * For example, to remove 'myImageId' attribute after 'src' has changed:
+     *
+     * ```ts
+     * replaceImageSourceCommand.on( 'cleanupImage', ( eventInfo, [ writer, image ] ) => {
+     * 	writer.removeAttribute( 'myImageId', image );
+     * } );
+     * ```
+     */
+    cleanupImage(writer: Writer, image: Element): void;
 }

package/src/image/replaceimagesourcecommand.js

@@ -16,6 +16,10 @@ import { Command } from 'ckeditor5/src/core';
  * ```
  */
 export default class ReplaceImageSourceCommand extends Command {
+    constructor(editor) {
+        super(editor);
+        this.decorate('cleanupImage');
+    }
     /**
      * @inheritDoc
      */
@@ -35,10 +39,37 @@ export default class ReplaceImageSourceCommand extends Command {
      */
     execute(options) {
         const image = this.editor.model.document.selection.getSelectedElement();
+        const imageUtils = this.editor.plugins.get('ImageUtils');
         this.editor.model.change(writer => {
             writer.setAttribute('src', options.source, image);
-            writer.removeAttribute('srcset', image);
-            writer.removeAttribute('sizes', image);
+            this.cleanupImage(writer, image);
+            imageUtils.setImageNaturalSizeAttributes(image);
         });
     }
+    /**
+     * Cleanup image attributes that are not relevant to the new source.
+     *
+     * Removed attributes are: 'srcset', 'sizes', 'sources', 'width', 'height', 'alt'.
+     *
+     * This method is decorated, to allow custom cleanup logic.
+     * For example, to remove 'myImageId' attribute after 'src' has changed:
+     *
+     * ```ts
+     * replaceImageSourceCommand.on( 'cleanupImage', ( eventInfo, [ writer, image ] ) => {
+     * 	writer.removeAttribute( 'myImageId', image );
+     * } );
+     * ```
+     */
+    cleanupImage(writer, image) {
+        writer.removeAttribute('srcset', image);
+        writer.removeAttribute('sizes', image);
+        /**
+         * In case responsive images some attributes should be cleaned up.
+         * Check: https://github.com/ckeditor/ckeditor5/issues/15093
+         */
+        writer.removeAttribute('sources', image);
+        writer.removeAttribute('width', image);
+        writer.removeAttribute('height', image);
+        writer.removeAttribute('alt', image);
+    }
 }

package/src/image/utils.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module image/image/utils
  */
-import type { DocumentSelection, MatcherPattern, Schema, Selection, ViewContainerElement, DowncastWriter } from 'ckeditor5/src/engine';
+import type { DocumentSelection, MatcherPattern, Schema, Selection, ViewContainerElement, DowncastWriter, ViewElement } from 'ckeditor5/src/engine';
 import type { Editor } from 'ckeditor5/src/core';
 /**
  * Creates a view element representing the inline image.
@@ -50,3 +50,15 @@ export declare function getImgViewElementMatcher(editor: Editor, matchImageType:
  * @internal
  */
 export declare function determineImageTypeForInsertionAtSelection(schema: Schema, selection: Selection | DocumentSelection): 'imageBlock' | 'imageInline';
+/**
+ * Returns parsed value of the size, but only if it contains unit: px.
+ */
+export declare function getSizeValueIfInPx(size: string | undefined): number | null;
+/**
+ * Returns true if both styles (width and height) are set.
+ *
+ * If both image styles: width & height are set, they will override the image width & height attributes in the
+ * browser. In this case, the image looks the same as if these styles were applied to attributes instead of styles.
+ * That's why we can upcast these styles to width & height attributes instead of resizedWidth and resizedHeight.
+ */
+export declare function widthAndHeightStylesAreBothSet(viewElement: ViewElement): boolean;

package/src/image/utils.js

@@ -98,3 +98,24 @@ export function determineImageTypeForInsertionAtSelection(schema, selection) {
     // Otherwise insert an inline image.
     return 'imageInline';
 }
+/**
+ * Returns parsed value of the size, but only if it contains unit: px.
+ */
+export function getSizeValueIfInPx(size) {
+    if (size && size.endsWith('px')) {
+        return parseInt(size);
+    }
+    return null;
+}
+/**
+ * Returns true if both styles (width and height) are set.
+ *
+ * If both image styles: width & height are set, they will override the image width & height attributes in the
+ * browser. In this case, the image looks the same as if these styles were applied to attributes instead of styles.
+ * That's why we can upcast these styles to width & height attributes instead of resizedWidth and resizedHeight.
+ */
+export function widthAndHeightStylesAreBothSet(viewElement) {
+    const widthStyle = getSizeValueIfInPx(viewElement.getStyle('width'));
+    const heightStyle = getSizeValueIfInPx(viewElement.getStyle('height'));
+    return !!(widthStyle && heightStyle);
+}

package/src/imageconfig.d.ts

@@ -473,16 +473,19 @@ export interface ImageInsertConfig {
      */
     integrations: Array<string>;
     /**
-     * This options allows to override the image type used by the {@link module:image/image/insertimagecommand~InsertImageCommand}
-     * when the user inserts new images into the editor content. By default, this option is unset which means the editor will choose
-     * the optimal image type based on the context of the insertion (e.g. the current selection and availability of plugins)
+     * This option allows to override the image type used by the {@link module:image/image/insertimagecommand~InsertImageCommand}
+     * when the user inserts new images into the editor content. By default, all images inserted into the editor will be block
+     * if {@link module:image/imageblock~ImageBlock} is loaded. To let the editor decide the image type, choose `'auto'`.
      *
      * Available options are:
      *
      * * `'block'` – all images inserted into the editor will be block (requires the {@link module:image/imageblock~ImageBlock} plugin),
-     * * `'inline'` – all images inserted into the editor will be inline (requires the {@link module:image/imageinline~ImageInline} plugin).
+     * * `'inline'` – all images inserted into the editor will be inline (requires the {@link module:image/imageinline~ImageInline} plugin),
+     * * `'auto'` – the editor will choose the optimal image type based on the context of the insertion and availability of plugins.
+     *
+     * @default 'block'
      */
-    type?: 'inline' | 'block';
+    type?: 'inline' | 'block' | 'auto';
 }
 /**
  * The image resize option used in the {@link module:image/imageconfig~ImageConfig#resizeOptions image resize configuration}.

package/src/imageresize/imageresizeediting.js

@@ -5,6 +5,7 @@
 import { Plugin } from 'ckeditor5/src/core';
 import ImageUtils from '../imageutils';
 import ResizeImageCommand from './resizeimagecommand';
+import { widthAndHeightStylesAreBothSet } from '../image/utils';
 /**
  * The image resize editing feature.
  *
@@ -68,10 +69,10 @@ export default class ImageResizeEditing extends Plugin {
     }
     _registerSchema() {
         if (this.editor.plugins.has('ImageBlockEditing')) {
-            this.editor.model.schema.extend('imageBlock', { allowAttributes: 'width' });
+            this.editor.model.schema.extend('imageBlock', { allowAttributes: ['resizedWidth', 'resizedHeight'] });
         }
         if (this.editor.plugins.has('ImageInlineEditing')) {
-            this.editor.model.schema.extend('imageInline', { allowAttributes: 'width' });
+            this.editor.model.schema.extend('imageInline', { allowAttributes: ['resizedWidth', 'resizedHeight'] });
         }
     }
     /**
@@ -81,20 +82,47 @@ export default class ImageResizeEditing extends Plugin {
      */
     _registerConverters(imageType) {
         const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
         // Dedicated converter to propagate image's attribute to the img tag.
-        editor.conversion.for('downcast').add(dispatcher => dispatcher.on(`attribute:width:${imageType}`, (evt, data, conversionApi) => {
+        editor.conversion.for('downcast').add(dispatcher => dispatcher.on(`attribute:resizedWidth:${imageType}`, (evt, data, conversionApi) => {
             if (!conversionApi.consumable.consume(data.item, evt.name)) {
                 return;
             }
             const viewWriter = conversionApi.writer;
-            const figure = conversionApi.mapper.toViewElement(data.item);
+            const viewImg = conversionApi.mapper.toViewElement(data.item);
             if (data.attributeNewValue !== null) {
-                viewWriter.setStyle('width', data.attributeNewValue, figure);
-                viewWriter.addClass('image_resized', figure);
+                viewWriter.setStyle('width', data.attributeNewValue, viewImg);
+                viewWriter.addClass('image_resized', viewImg);
             }
             else {
-                viewWriter.removeStyle('width', figure);
-                viewWriter.removeClass('image_resized', figure);
+                viewWriter.removeStyle('width', viewImg);
+                viewWriter.removeClass('image_resized', viewImg);
+            }
+        }));
+        editor.conversion.for('dataDowncast').attributeToAttribute({
+            model: {
+                name: imageType,
+                key: 'resizedHeight'
+            },
+            view: modelAttributeValue => ({
+                key: 'style',
+                value: {
+                    'height': modelAttributeValue
+                }
+            })
+        });
+        editor.conversion.for('editingDowncast').add(dispatcher => dispatcher.on(`attribute:resizedHeight:${imageType}`, (evt, data, conversionApi) => {
+            if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                return;
+            }
+            const viewWriter = conversionApi.writer;
+            const viewImg = conversionApi.mapper.toViewElement(data.item);
+            const target = imageType === 'imageInline' ? imageUtils.findViewImgElement(viewImg) : viewImg;
+            if (data.attributeNewValue !== null) {
+                viewWriter.setStyle('height', data.attributeNewValue, target);
+            }
+            else {
+                viewWriter.removeStyle('height', target);
             }
         }));
         editor.conversion.for('upcast')
@@ -106,8 +134,31 @@ export default class ImageResizeEditing extends Plugin {
                 }
             },
             model: {
-                key: 'width',
-                value: (viewElement) => viewElement.getStyle('width')
+                key: 'resizedWidth',
+                value: (viewElement) => {
+                    if (widthAndHeightStylesAreBothSet(viewElement)) {
+                        return null;
+                    }
+                    return viewElement.getStyle('width');
+                }
+            }
+        });
+        editor.conversion.for('upcast')
+            .attributeToAttribute({
+            view: {
+                name: imageType === 'imageBlock' ? 'figure' : 'img',
+                styles: {
+                    height: /.+/
+                }
+            },
+            model: {
+                key: 'resizedHeight',
+                value: (viewElement) => {
+                    if (widthAndHeightStylesAreBothSet(viewElement)) {
+                        return null;
+                    }
+                    return viewElement.getStyle('height');
+                }
             }
         });
     }

package/src/imageresize/imageresizehandles.d.ts

@@ -4,6 +4,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core';
 import { WidgetResize } from 'ckeditor5/src/widget';
+import ImageUtils from '../imageutils';
 /**
  * The image resize by handles feature.
  *
@@ -14,7 +15,7 @@ export default class ImageResizeHandles extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof WidgetResize];
+    static get requires(): readonly [typeof WidgetResize, typeof ImageUtils];
     /**
      * @inheritDoc
      */