@ckeditor/ckeditor5-image 39.0.2 → 40.1.0

package/src/imageresize/imageresizehandles.js

@@ -4,6 +4,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core';
 import { WidgetResize } from 'ckeditor5/src/widget';
+import ImageUtils from '../imageutils';
 import ImageLoadObserver from '../image/imageloadobserver';
 const RESIZABLE_IMAGES_CSS_SELECTOR = 'figure.image.ck-widget > img,' +
     'figure.image.ck-widget > picture > img,' +
@@ -11,7 +12,6 @@ const RESIZABLE_IMAGES_CSS_SELECTOR = 'figure.image.ck-widget > img,' +
     'figure.image.ck-widget > a > picture > img,' +
     'span.image-inline.ck-widget > img,' +
     'span.image-inline.ck-widget > picture > img';
-const IMAGE_WIDGETS_CLASSES_MATCH_REGEXP = /(image|image-inline)/;
 const RESIZED_IMAGE_CLASS = 'image_resized';
 /**
  * The image resize by handles feature.
@@ -24,7 +24,7 @@ export default class ImageResizeHandles extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [WidgetResize];
+        return [WidgetResize, ImageUtils];
     }
     /**
      * @inheritDoc
@@ -46,6 +46,7 @@ export default class ImageResizeHandles extends Plugin {
     _setupResizerCreator() {
         const editor = this.editor;
         const editingView = editor.editing.view;
+        const imageUtils = editor.plugins.get('ImageUtils');
         editingView.addObserver(ImageLoadObserver);
         this.listenTo(editingView.document, 'imageLoaded', (evt, domEvent) => {
             // The resizer must be attached only to images loaded by the `ImageInsert`, `ImageUpload` or `LinkImage` plugins.
@@ -54,7 +55,7 @@ export default class ImageResizeHandles extends Plugin {
             }
             const domConverter = editor.editing.view.domConverter;
             const imageView = domConverter.domToView(domEvent.target);
-            const widgetView = imageView.findAncestor({ classes: IMAGE_WIDGETS_CLASSES_MATCH_REGEXP });
+            const widgetView = imageUtils.getImageWidgetFromImageView(imageView);
             let resizer = this.editor.plugins.get(WidgetResize).getResizerByViewElement(widgetView);
             if (resizer) {
                 // There are rare cases when the image will be triggered multiple times for the same widget, e.g. when
@@ -100,6 +101,12 @@ export default class ImageResizeHandles extends Plugin {
                         writer.addClass(RESIZED_IMAGE_CLASS, widgetView);
                     });
                 }
+                const target = imageModel.name === 'imageInline' ? imageView : widgetView;
+                if (target.getStyle('height')) {
+                    editingView.change(writer => {
+                        writer.removeStyle('height', target);
+                    });
+                }
             });
             resizer.bind('isEnabled').to(this);
         });

package/src/imageresize/resizeimagecommand.js

@@ -18,12 +18,12 @@ export default class ResizeImageCommand extends Command {
         const imageUtils = editor.plugins.get('ImageUtils');
         const element = imageUtils.getClosestSelectedImageElement(editor.model.document.selection);
         this.isEnabled = !!element;
-        if (!element || !element.hasAttribute('width')) {
+        if (!element || !element.hasAttribute('resizedWidth')) {
             this.value = null;
         }
         else {
             this.value = {
-                width: element.getAttribute('width'),
+                width: element.getAttribute('resizedWidth'),
                 height: null
             };
         }
@@ -54,7 +54,9 @@ export default class ResizeImageCommand extends Command {
         };
         if (imageElement) {
             model.change(writer => {
-                writer.setAttribute('width', options.width, imageElement);
+                writer.setAttribute('resizedWidth', options.width, imageElement);
+                writer.removeAttribute('resizedHeight', imageElement);
+                imageUtils.setImageNaturalSizeAttributes(imageElement);
             });
         }
     }

package/src/imagesizeattributes.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @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/imagesizeattributes
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageUtils from './imageutils';
+/**
+ * This plugin enables `width` and `height` attributes in inline and block image elements.
+ */
+export default class ImageSizeAttributes extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageSizeAttributes";
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+    /**
+     * Registers the `width` and `height` attributes for inline and block images.
+     */
+    private _registerSchema;
+    /**
+     * Registers converters for `width` and `height` attributes.
+     */
+    private _registerConverters;
+}

package/src/imagesizeattributes.js

@@ -0,0 +1,142 @@
+/**
+ * @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/imagesizeattributes
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageUtils from './imageutils';
+import { widthAndHeightStylesAreBothSet, getSizeValueIfInPx } from './image/utils';
+/**
+ * This plugin enables `width` and `height` attributes in inline and block image elements.
+ */
+export default class ImageSizeAttributes extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageSizeAttributes';
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        this._registerSchema();
+        this._registerConverters('imageBlock');
+        this._registerConverters('imageInline');
+    }
+    /**
+     * Registers the `width` and `height` attributes for inline and block images.
+     */
+    _registerSchema() {
+        if (this.editor.plugins.has('ImageBlockEditing')) {
+            this.editor.model.schema.extend('imageBlock', { allowAttributes: ['width', 'height'] });
+        }
+        if (this.editor.plugins.has('ImageInlineEditing')) {
+            this.editor.model.schema.extend('imageInline', { allowAttributes: ['width', 'height'] });
+        }
+    }
+    /**
+     * Registers converters for `width` and `height` attributes.
+     */
+    _registerConverters(imageType) {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const viewElementName = imageType === 'imageBlock' ? 'figure' : 'img';
+        editor.conversion.for('upcast')
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                styles: {
+                    width: /.+/
+                }
+            },
+            model: {
+                key: 'width',
+                value: (viewElement) => {
+                    if (widthAndHeightStylesAreBothSet(viewElement)) {
+                        return getSizeValueIfInPx(viewElement.getStyle('width'));
+                    }
+                    return null;
+                }
+            }
+        })
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                key: 'width'
+            },
+            model: 'width'
+        })
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                styles: {
+                    height: /.+/
+                }
+            },
+            model: {
+                key: 'height',
+                value: (viewElement) => {
+                    if (widthAndHeightStylesAreBothSet(viewElement)) {
+                        return getSizeValueIfInPx(viewElement.getStyle('height'));
+                    }
+                    return null;
+                }
+            }
+        })
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                key: 'height'
+            },
+            model: 'height'
+        });
+        // Dedicated converters to propagate attributes to the <img> element.
+        editor.conversion.for('editingDowncast').add(dispatcher => {
+            attachDowncastConverter(dispatcher, 'width', 'width', true);
+            attachDowncastConverter(dispatcher, 'height', 'height', true);
+        });
+        editor.conversion.for('dataDowncast').add(dispatcher => {
+            attachDowncastConverter(dispatcher, 'width', 'width', false);
+            attachDowncastConverter(dispatcher, 'height', 'height', false);
+        });
+        function attachDowncastConverter(dispatcher, modelAttributeName, viewAttributeName, setRatioForInlineImage) {
+            dispatcher.on(`attribute:${modelAttributeName}:${imageType}`, (evt, data, conversionApi) => {
+                if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                    return;
+                }
+                const viewWriter = conversionApi.writer;
+                const viewElement = conversionApi.mapper.toViewElement(data.item);
+                const img = imageUtils.findViewImgElement(viewElement);
+                if (data.attributeNewValue !== null) {
+                    viewWriter.setAttribute(viewAttributeName, data.attributeNewValue, img);
+                }
+                else {
+                    viewWriter.removeAttribute(viewAttributeName, img);
+                }
+                // Do not set aspect-ratio for pictures. See https://github.com/ckeditor/ckeditor5/issues/14579.
+                if (data.item.hasAttribute('sources')) {
+                    return;
+                }
+                const isResized = data.item.hasAttribute('resizedWidth');
+                // Do not set aspect ratio for inline images which are not resized (data pipeline).
+                if (imageType === 'imageInline' && !isResized && !setRatioForInlineImage) {
+                    return;
+                }
+                const width = data.item.getAttribute('width');
+                const height = data.item.getAttribute('height');
+                if (width && height) {
+                    viewWriter.setStyle('aspect-ratio', `${width}/${height}`, img);
+                }
+            });
+        }
+    }
+}

package/src/imagestyle/imagestylecommand.d.ts

@@ -50,10 +50,13 @@ export default class ImageStyleCommand extends Command {
      * configuration for the style option.
      *
      * @param options.value The name of the style (as configured in {@link module:image/imageconfig~ImageStyleConfig#options}).
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
      * @fires execute
      */
     execute(options?: {
         value?: string;
+        setImageSizes?: boolean;
     }): void;
     /**
      * Returns `true` if requested style change would trigger the image type change.

package/src/imagestyle/imagestylecommand.js

@@ -63,6 +63,8 @@ export default class ImageStyleCommand extends Command {
      * configuration for the style option.
      *
      * @param options.value The name of the style (as configured in {@link module:image/imageconfig~ImageStyleConfig#options}).
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
      * @fires execute
      */
     execute(options = {}) {
@@ -71,10 +73,11 @@ export default class ImageStyleCommand extends Command {
         const imageUtils = editor.plugins.get('ImageUtils');
         model.change(writer => {
             const requestedStyle = options.value;
+            const { setImageSizes = true } = options;
             let imageElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
             // Change the image type if a style requires it.
             if (requestedStyle && this.shouldConvertImageType(requestedStyle, imageElement)) {
-                this.editor.execute(imageUtils.isBlockImage(imageElement) ? 'imageTypeInline' : 'imageTypeBlock');
+                this.editor.execute(imageUtils.isBlockImage(imageElement) ? 'imageTypeInline' : 'imageTypeBlock', { setImageSizes });
                 // Update the imageElement to the newly created image.
                 imageElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
             }
@@ -86,6 +89,9 @@ export default class ImageStyleCommand extends Command {
             else {
                 writer.setAttribute('imageStyle', requestedStyle, imageElement);
             }
+            if (setImageSizes) {
+                imageUtils.setImageNaturalSizeAttributes(imageElement);
+            }
         });
     }
     /**

package/src/imagetextalternative/imagetextalternativeui.js

@@ -55,7 +55,7 @@ export default class ImageTextAlternativeUI extends Plugin {
             const view = new ButtonView(locale);
             view.set({
                 label: t('Change image text alternative'),
-                icon: icons.lowVision,
+                icon: icons.textAlternative,
                 tooltip: true
             });
             view.bind('isEnabled').to(command, 'isEnabled');

package/src/imageupload/imageuploadediting.js

@@ -94,10 +94,7 @@ export default class ImageUploadEditing extends Plugin {
                 if (data.targetRanges) {
                     writer.setSelection(data.targetRanges.map(viewRange => editor.editing.mapper.toModelRange(viewRange)));
                 }
-                // Upload images after the selection has changed in order to ensure the command's state is refreshed.
-                editor.model.enqueueChange(() => {
-                    editor.execute('uploadImage', { file: images });
-                });
+                editor.execute('uploadImage', { file: images });
             });
         });
         // Handle HTML pasted with images with base64 or blob sources.
@@ -177,11 +174,13 @@ export default class ImageUploadEditing extends Plugin {
             }
         });
         // Set the default handler for feeding the image element with `src` and `srcset` attributes.
+        // Also set the natural `width` and `height` attributes (if not already set).
         this.on('uploadComplete', (evt, { imageElement, data }) => {
             const urls = data.urls ? data.urls : data;
             this.editor.model.change(writer => {
                 writer.setAttribute('src', urls.default, imageElement);
                 this._parseAndSetSrcsetAttributeOnImage(urls, imageElement, writer);
+                imageUtils.setImageNaturalSizeAttributes(imageElement);
             });
         }, { priority: 'low' });
     }
@@ -314,10 +313,13 @@ export default class ImageUploadEditing extends Plugin {
             // Join all entries.
             .join(', ');
         if (srcsetAttribute != '') {
-            writer.setAttribute('srcset', {
-                data: srcsetAttribute,
-                width: maxWidth
-            }, image);
+            const attributes = {
+                srcset: srcsetAttribute
+            };
+            if (!image.hasAttribute('width') && !image.hasAttribute('height')) {
+                attributes.width = maxWidth;
+            }
+            writer.setAttributes(attributes, image);
         }
     }
 }

package/src/imageutils.d.ts

@@ -5,12 +5,16 @@
 /**
  * @module image/imageutils
  */
-import type { Element, ViewElement, DocumentSelection, ViewDocumentSelection, Selection, ViewSelection, DowncastWriter, Position } from 'ckeditor5/src/engine';
+import type { Element, ViewElement, DocumentSelection, ViewDocumentSelection, Selection, ViewSelection, DowncastWriter, Position, ViewContainerElement } from 'ckeditor5/src/engine';
 import { Plugin } from 'ckeditor5/src/core';
 /**
  * A set of helpers related to images.
  */
 export default class ImageUtils extends Plugin {
+    /**
+     * DOM Emitter.
+     */
+    private _domEmitter;
     /**
      * @inheritDoc
      */
@@ -54,9 +58,20 @@ export default class ImageUtils extends Plugin {
      *
      * @param imageType Image type of inserted image. If not specified,
      * it will be determined automatically depending of editor config or place of the insertion.
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
      * @return The inserted model image element.
      */
-    insertImage(attributes?: Record<string, unknown>, selectable?: Selection | Position | null, imageType?: ('imageBlock' | 'imageInline' | null)): Element | null;
+    insertImage(attributes?: Record<string, unknown>, selectable?: Selection | Position | null, imageType?: ('imageBlock' | 'imageInline' | null), options?: {
+        setImageSizes?: boolean;
+    }): Element | null;
+    /**
+     * Reads original image sizes and sets them as `width` and `height`.
+     *
+     * The `src` attribute may not be available if the user is using an upload adapter. In such a case,
+     * this method is called again after the upload process is complete and the `src` attribute is available.
+     */
+    setImageNaturalSizeAttributes(imageElement: Element): void;
     /**
      * Returns an image widget editing view element if one is selected or is among the selection's ancestors.
      */
@@ -65,6 +80,10 @@ export default class ImageUtils extends Plugin {
      * Returns a image model element if one is selected or is among the selection's ancestors.
      */
     getClosestSelectedImageElement(selection: Selection | DocumentSelection): Element | null;
+    /**
+     * Returns an image widget editing view based on the passed image view.
+     */
+    getImageWidgetFromImageView(imageView: ViewElement): ViewContainerElement | null;
     /**
      * Checks if image can be inserted at current model selection.
      *
@@ -99,4 +118,8 @@ export default class ImageUtils extends Plugin {
      * The `<img>` can be located deep in other elements, so this helper performs a deep tree search.
      */
     findViewImgElement(figureView: ViewElement): ViewElement | undefined;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
 }

package/src/imageutils.js

@@ -5,10 +5,19 @@
 import { Plugin } from 'ckeditor5/src/core';
 import { findOptimalInsertionRange, isWidget, toWidget } from 'ckeditor5/src/widget';
 import { determineImageTypeForInsertionAtSelection } from './image/utils';
+import { DomEmitterMixin, global } from 'ckeditor5/src/utils';
+const IMAGE_WIDGETS_CLASSES_MATCH_REGEXP = /^(image|image-inline)$/;
 /**
  * A set of helpers related to images.
  */
 export default class ImageUtils extends Plugin {
+    constructor() {
+        super(...arguments);
+        /**
+         * DOM Emitter.
+         */
+        this._domEmitter = new (DomEmitterMixin())();
+    }
     /**
      * @inheritDoc
      */
@@ -58,13 +67,15 @@ export default class ImageUtils extends Plugin {
      *
      * @param imageType Image type of inserted image. If not specified,
      * it will be determined automatically depending of editor config or place of the insertion.
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
      * @return The inserted model image element.
      */
-    insertImage(attributes = {}, selectable = null, imageType = null) {
+    insertImage(attributes = {}, selectable = null, imageType = null, options = {}) {
         const editor = this.editor;
         const model = editor.model;
         const selection = model.document.selection;
-        imageType = determineImageTypeForInsertion(editor, selectable || selection, imageType);
+        const determinedImageType = determineImageTypeForInsertion(editor, selectable || selection, imageType);
         // Mix declarative attributes with selection attributes because the new image should "inherit"
         // the latter for best UX. For instance, inline images inserted into existing links
         // should not split them. To do that, they need to have "linkHref" inherited from the selection.
@@ -73,25 +84,59 @@ export default class ImageUtils extends Plugin {
             ...attributes
         };
         for (const attributeName in attributes) {
-            if (!model.schema.checkAttribute(imageType, attributeName)) {
+            if (!model.schema.checkAttribute(determinedImageType, attributeName)) {
                 delete attributes[attributeName];
             }
         }
         return model.change(writer => {
-            const imageElement = writer.createElement(imageType, attributes);
+            const { setImageSizes = true } = options;
+            const imageElement = writer.createElement(determinedImageType, attributes);
             model.insertObject(imageElement, selectable, null, {
                 setSelection: 'on',
                 // If we want to insert a block image (for whatever reason) then we don't want to split text blocks.
                 // This applies only when we don't have the selectable specified (i.e., we insert multiple block images at once).
-                findOptimalPosition: !selectable && imageType != 'imageInline' ? 'auto' : undefined
+                findOptimalPosition: !selectable && determinedImageType != 'imageInline' ? 'auto' : undefined
             });
             // Inserting an image might've failed due to schema regulations.
             if (imageElement.parent) {
+                if (setImageSizes) {
+                    this.setImageNaturalSizeAttributes(imageElement);
+                }
                 return imageElement;
             }
             return null;
         });
     }
+    /**
+     * Reads original image sizes and sets them as `width` and `height`.
+     *
+     * The `src` attribute may not be available if the user is using an upload adapter. In such a case,
+     * this method is called again after the upload process is complete and the `src` attribute is available.
+     */
+    setImageNaturalSizeAttributes(imageElement) {
+        const src = imageElement.getAttribute('src');
+        if (!src) {
+            return;
+        }
+        if (imageElement.getAttribute('width') || imageElement.getAttribute('height')) {
+            return;
+        }
+        this.editor.model.change(writer => {
+            const img = new global.window.Image();
+            this._domEmitter.listenTo(img, 'load', () => {
+                if (!imageElement.getAttribute('width') && !imageElement.getAttribute('height')) {
+                    // We use writer.batch to be able to undo (in a single step) width and height setting
+                    // along with any change that triggered this action (e.g. image resize or image style change).
+                    this.editor.model.enqueueChange(writer.batch, writer => {
+                        writer.setAttribute('width', img.naturalWidth, imageElement);
+                        writer.setAttribute('height', img.naturalHeight, imageElement);
+                    });
+                }
+                this._domEmitter.stopListening(img, 'load');
+            });
+            img.src = src;
+        });
+    }
     /**
      * Returns an image widget editing view element if one is selected or is among the selection's ancestors.
      */
@@ -120,6 +165,12 @@ export default class ImageUtils extends Plugin {
         const selectedElement = selection.getSelectedElement();
         return this.isImage(selectedElement) ? selectedElement : selection.getFirstPosition().findAncestor('imageBlock');
     }
+    /**
+     * Returns an image widget editing view based on the passed image view.
+     */
+    getImageWidgetFromImageView(imageView) {
+        return imageView.findAncestor({ classes: IMAGE_WIDGETS_CLASSES_MATCH_REGEXP });
+    }
     /**
      * Checks if image can be inserted at current model selection.
      *
@@ -182,6 +233,13 @@ export default class ImageUtils extends Plugin {
             }
         }
     }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        this._domEmitter.stopListening();
+        return super.destroy();
+    }
 }
 /**
  * Checks if image is allowed by schema in optimal insertion parent.
@@ -237,7 +295,7 @@ function determineImageTypeForInsertion(editor, selectable, imageType) {
     if (configImageInsertType === 'inline') {
         return 'imageInline';
     }
-    if (configImageInsertType === 'block') {
+    if (configImageInsertType !== 'auto') {
         return 'imageBlock';
     }
     // Try to replace the selected widget (e.g. another image).

package/src/index.d.ts

@@ -17,6 +17,7 @@ export { default as ImageResize } from './imageresize';
 export { default as ImageResizeButtons } from './imageresize/imageresizebuttons';
 export { default as ImageResizeEditing } from './imageresize/imageresizeediting';
 export { default as ImageResizeHandles } from './imageresize/imageresizehandles';
+export { default as ImageSizeAttributes } from './imagesizeattributes';
 export { default as ImageStyle } from './imagestyle';
 export { default as ImageStyleEditing } from './imagestyle/imagestyleediting';
 export { default as ImageStyleUI } from './imagestyle/imagestyleui';

package/src/index.js

@@ -17,6 +17,7 @@ export { default as ImageResize } from './imageresize';
 export { default as ImageResizeButtons } from './imageresize/imageresizebuttons';
 export { default as ImageResizeEditing } from './imageresize/imageresizeediting';
 export { default as ImageResizeHandles } from './imageresize/imageresizehandles';
+export { default as ImageSizeAttributes } from './imagesizeattributes';
 export { default as ImageStyle } from './imagestyle';
 export { default as ImageStyleEditing } from './imagestyle/imagestyleediting';
 export { default as ImageStyleUI } from './imagestyle/imagestyleui';

package/theme/image.css

@@ -28,7 +28,11 @@
 			max-width: 100%;
 
 			/* Make sure the image is never smaller than the parent container (See: https://github.com/ckeditor/ckeditor5/issues/9300). */
-			min-width: 100%
+			min-width: 100%;
+
+			/* Keep proportions of the block image if the height is set and the image is wider than the editor width.
+			See https://github.com/ckeditor/ckeditor5/issues/14542. */
+			height: auto;
 		}
 	}
 
@@ -83,28 +87,51 @@
 		text-overflow: ellipsis;
 	}
 
-
 	/*
-	 * Make sure the selected inline image always stays on top of its siblings.
-	 * See https://github.com/ckeditor/ckeditor5/issues/9108.
+	 * See https://github.com/ckeditor/ckeditor5/issues/15115.
 	 */
-	& .image.ck-widget_selected {
+	& .image {
 		z-index: 1;
+
+		/*
+		 * Make sure the selected image always stays on top of its siblings.
+		 * See https://github.com/ckeditor/ckeditor5/issues/9108.
+		 */
+		&.ck-widget_selected {
+			z-index: 2;
+		}
 	}
 
-	& .image-inline.ck-widget_selected {
+	/*
+	 * See https://github.com/ckeditor/ckeditor5/issues/15115.
+	 */
+	& .image-inline {
 		z-index: 1;
 
 		/*
-		 * Make sure the native browser selection style is not displayed.
-		 * Inline image widgets have their own styles for the selected state and
-		 * leaving this up to the browser is asking for a visual collision.
+		 * Make sure the selected inline image always stays on top of its siblings.
+		 * See https://github.com/ckeditor/ckeditor5/issues/9108.
 		 */
-		& ::selection {
-			display: none;
+		&.ck-widget_selected {
+			z-index: 2;
+
+			/*
+			 * Make sure the native browser selection style is not displayed.
+			 * Inline image widgets have their own styles for the selected state and
+			 * leaving this up to the browser is asking for a visual collision.
+			 */
+			& ::selection {
+				display: none;
+			}
 		}
 	}
 
+	/* Keep proportions of the inline image if the height is set and the image is wider than the editor width.
+	See https://github.com/ckeditor/ckeditor5/issues/14542. */
+	& .image-inline img {
+		height: auto;
+	}
+
 	/* The inline image nested in the table should have its original size if not resized.
 	See https://github.com/ckeditor/ckeditor5/issues/9117. */
 	& td,

package/theme/imageplaceholder.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+.ck.ck-editor__editable {
+	& img.image_placeholder {
+		background-size: 100% 100%;
+	}
+}