@ckeditor/ckeditor5-image 47.6.1 → 48.0.0-alpha.1

package/src/imageutils.js

@@ -1,309 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { findOptimalInsertionRange, isWidget, toWidget } from 'ckeditor5/src/widget.js';
-import { determineImageTypeForInsertionAtSelection } from './image/utils.js';
-import { DomEmitterMixin, global } from 'ckeditor5/src/utils.js';
-const IMAGE_WIDGETS_CLASSES_MATCH_REGEXP = /^(image|image-inline)$/;
-/**
- * A set of helpers related to images.
- */
-export class ImageUtils extends Plugin {
-    /**
-     * DOM Emitter.
-     */
-    _domEmitter = new (DomEmitterMixin())();
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageUtils';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * Checks if the provided model element is an `image` or `imageInline`.
-     */
-    isImage(modelElement) {
-        return this.isInlineImage(modelElement) || this.isBlockImage(modelElement);
-    }
-    /**
-     * Checks if the provided view element represents an inline image.
-     *
-     * Also, see {@link module:image/imageutils~ImageUtils#isImageWidget}.
-     */
-    isInlineImageView(element) {
-        return !!element && element.is('element', 'img');
-    }
-    /**
-     * Checks if the provided view element represents a block image.
-     *
-     * Also, see {@link module:image/imageutils~ImageUtils#isImageWidget}.
-     */
-    isBlockImageView(element) {
-        return !!element && element.is('element', 'figure') && element.hasClass('image');
-    }
-    /**
-     * Handles inserting single file. This method unifies image insertion using {@link module:widget/utils~findOptimalInsertionRange}
-     * method.
-     *
-     * ```ts
-     * const imageUtils = editor.plugins.get( 'ImageUtils' );
-     *
-     * imageUtils.insertImage( { src: 'path/to/image.jpg' } );
-     * ```
-     *
-     * @param attributes Attributes of the inserted image.
-     * This method filters out the attributes which are disallowed by the {@link module:engine/model/schema~ModelSchema}.
-     * @param selectable Place to insert the image. If not specified,
-     * the {@link module:widget/utils~findOptimalInsertionRange} logic will be applied for the block images
-     * and `model.document.selection` for the inline images.
-     *
-     * **Note**: If `selectable` is passed, this helper will not be able to set selection attributes (such as `linkHref`)
-     * and apply them to the new image. In this case, make sure all selection attributes are passed in `attributes`.
-     *
-     * @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, options = {}) {
-        const editor = this.editor;
-        const model = editor.model;
-        const selection = model.document.selection;
-        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.
-        attributes = {
-            ...Object.fromEntries(selection.getAttributes()),
-            ...attributes
-        };
-        for (const attributeName in attributes) {
-            if (!model.schema.checkAttribute(determinedImageType, attributeName)) {
-                delete attributes[attributeName];
-            }
-        }
-        return model.change(writer => {
-            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 && 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.
-     */
-    getClosestSelectedImageWidget(selection) {
-        const selectionPosition = selection.getFirstPosition();
-        if (!selectionPosition) {
-            return null;
-        }
-        const viewElement = selection.getSelectedElement();
-        if (viewElement && this.isImageWidget(viewElement)) {
-            return viewElement;
-        }
-        let parent = selectionPosition.parent;
-        while (parent) {
-            if (parent.is('element') && this.isImageWidget(parent)) {
-                return parent;
-            }
-            parent = parent.parent;
-        }
-        return null;
-    }
-    /**
-     * Returns a image model element if one is selected or is among the selection's ancestors.
-     */
-    getClosestSelectedImageElement(selection) {
-        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.
-     *
-     * @internal
-     */
-    isImageAllowed() {
-        const model = this.editor.model;
-        const selection = model.document.selection;
-        return isImageAllowedInParent(this.editor, selection) && isNotInsideImage(selection);
-    }
-    /**
-     * Converts a given {@link module:engine/view/element~ViewElement} to an image widget:
-     * * Adds a {@link module:engine/view/element~ViewElement#_setCustomProperty custom property} allowing to recognize the image widget
-     * element.
-     * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
-     *
-     * @param writer An instance of the view writer.
-     * @param label The element's label. It will be concatenated with the image `alt` attribute if one is present.
-     */
-    toImageWidget(viewElement, writer, label) {
-        writer.setCustomProperty('image', true, viewElement);
-        const labelCreator = () => {
-            const imgElement = this.findViewImgElement(viewElement);
-            const altText = imgElement.getAttribute('alt');
-            return altText ? `${altText} ${label}` : label;
-        };
-        return toWidget(viewElement, writer, { label: labelCreator });
-    }
-    /**
-     * Checks if a given view element is an image widget.
-     */
-    isImageWidget(viewElement) {
-        return !!viewElement.getCustomProperty('image') && isWidget(viewElement);
-    }
-    /**
-     * Checks if the provided model element is an `image`.
-     */
-    isBlockImage(modelElement) {
-        return !!modelElement && modelElement.is('element', 'imageBlock');
-    }
-    /**
-     * Checks if the provided model element is an `imageInline`.
-     */
-    isInlineImage(modelElement) {
-        return !!modelElement && modelElement.is('element', 'imageInline');
-    }
-    /**
-     * Get the view `<img>` from another view element, e.g. a widget (`<figure class="image">`), a link (`<a>`).
-     *
-     * The `<img>` can be located deep in other elements, so this helper performs a deep tree search.
-     */
-    findViewImgElement(figureView) {
-        if (this.isInlineImageView(figureView)) {
-            return figureView;
-        }
-        const editingView = this.editor.editing.view;
-        for (const { item } of editingView.createRangeIn(figureView)) {
-            if (this.isInlineImageView(item)) {
-                return item;
-            }
-        }
-    }
-    /**
-     * @inheritDoc
-     */
-    destroy() {
-        this._domEmitter.stopListening();
-        return super.destroy();
-    }
-}
-/**
- * Checks if image is allowed by schema in optimal insertion parent.
- */
-function isImageAllowedInParent(editor, selection) {
-    const imageType = determineImageTypeForInsertion(editor, selection, null);
-    if (imageType == 'imageBlock') {
-        const parent = getInsertImageParent(selection, editor.model);
-        if (editor.model.schema.checkChild(parent, 'imageBlock')) {
-            return true;
-        }
-    }
-    else if (editor.model.schema.checkChild(selection.focus, 'imageInline')) {
-        return true;
-    }
-    return false;
-}
-/**
- * Checks if selection is not placed inside an image (e.g. its caption).
- */
-function isNotInsideImage(selection) {
-    return [...selection.focus.getAncestors()].every(ancestor => !ancestor.is('element', 'imageBlock'));
-}
-/**
- * Returns a node that will be used to insert image with `model.insertContent`.
- */
-function getInsertImageParent(selection, model) {
-    const insertionRange = findOptimalInsertionRange(selection, model);
-    const parent = insertionRange.start.parent;
-    if (parent.isEmpty && !parent.is('element', '$root')) {
-        return parent.parent;
-    }
-    return parent;
-}
-/**
- * Determine image element type name depending on editor config or place of insertion.
- *
- * @param imageType Image element type name. Used to force return of provided element name,
- * but only if there is proper plugin enabled.
- */
-function determineImageTypeForInsertion(editor, selectable, imageType) {
-    const schema = editor.model.schema;
-    const configImageInsertType = editor.config.get('image.insert.type');
-    if (!editor.plugins.has('ImageBlockEditing')) {
-        return 'imageInline';
-    }
-    if (!editor.plugins.has('ImageInlineEditing')) {
-        return 'imageBlock';
-    }
-    if (imageType) {
-        return imageType;
-    }
-    if (configImageInsertType === 'inline') {
-        return 'imageInline';
-    }
-    if (configImageInsertType !== 'auto') {
-        return 'imageBlock';
-    }
-    // Try to replace the selected widget (e.g. another image).
-    if (selectable.is('selection')) {
-        return determineImageTypeForInsertionAtSelection(schema, selectable);
-    }
-    return schema.checkChild(selectable, 'imageInline') ? 'imageInline' : 'imageBlock';
-}

package/src/index.js

@@ -1,67 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image
- */
-export { AutoImage } from './autoimage.js';
-export { Image } from './image.js';
-export { ImageEditing } from './image/imageediting.js';
-export { ImageCaptionUtils } from './imagecaption/imagecaptionutils.js';
-export { ImageCaption } from './imagecaption.js';
-export { ImageCaptionEditing } from './imagecaption/imagecaptionediting.js';
-export { ImageInsert } from './imageinsert.js';
-export { ImageInsertUI } from './imageinsert/imageinsertui.js';
-export { ImageInsertViaUrlUI } from './imageinsert/imageinsertviaurlui.js';
-export { ImageResize } from './imageresize.js';
-export { ImageResizeButtons } from './imageresize/imageresizebuttons.js';
-export { ImageResizeEditing } from './imageresize/imageresizeediting.js';
-export { ImageResizeHandles } from './imageresize/imageresizehandles.js';
-export { ImageCustomResizeUI } from './imageresize/imagecustomresizeui.js';
-export { ImageSizeAttributes } from './imagesizeattributes.js';
-export { ImageStyle } from './imagestyle.js';
-export { ImageStyleEditing } from './imagestyle/imagestyleediting.js';
-export { ImageStyleUI } from './imagestyle/imagestyleui.js';
-export { ImageTextAlternative } from './imagetextalternative.js';
-export { ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting.js';
-export { ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui.js';
-export { ImageToolbar } from './imagetoolbar.js';
-export { ImageUpload } from './imageupload.js';
-export { ImageUploadEditing, isHtmlInDataTransfer } from './imageupload/imageuploadediting.js';
-export { ImageUploadProgress } from './imageupload/imageuploadprogress.js';
-export { ImageUploadUI } from './imageupload/imageuploadui.js';
-export { PictureEditing } from './pictureediting.js';
-export { ImageBlock } from './imageblock.js';
-export { ImageInline } from './imageinline.js';
-export { ImageInsertViaUrl } from './imageinsertviaurl.js';
-export { ImageUtils } from './imageutils.js';
-export { ImageBlockEditing } from './image/imageblockediting.js';
-export { ImageCaptionUI } from './imagecaption/imagecaptionui.js';
-export { ImageInlineEditing } from './image/imageinlineediting.js';
-export { ImagePlaceholder } from './image/imageplaceholder.js';
-export { createImageTypeRegExp } from './imageupload/utils.js';
-export { ImageLoadObserver } from './image/imageloadobserver.js';
-export { ImageTypeCommand } from './image/imagetypecommand.js';
-export { InsertImageCommand } from './image/insertimagecommand.js';
-export { ReplaceImageSourceCommand } from './image/replaceimagesourcecommand.js';
-export { ToggleImageCaptionCommand } from './imagecaption/toggleimagecaptioncommand.js';
-export { ResizeImageCommand } from './imageresize/resizeimagecommand.js';
-export { ImageStyleCommand } from './imagestyle/imagestylecommand.js';
-export { ImageTextAlternativeCommand } from './imagetextalternative/imagetextalternativecommand.js';
-export { UploadImageCommand } from './imageupload/uploadimagecommand.js';
-export { upcastImageFigure as _upcastImageFigure, upcastPicture as _upcastImagePicture, downcastSrcsetAttribute as _downcastImageSrcsetAttribute, downcastSourcesAttribute as _downcastImageSourcesAttribute, downcastImageAttribute as _downcastImageAttribute } from './image/converters.js';
-export { repositionContextualBalloon as _repositionImageContextualBalloon, getBalloonPositionData as _getImageBalloonPositionData } from './image/ui/utils.js';
-export { createInlineImageViewElement as _createInlineImageViewElement, createBlockImageViewElement as _createBlockImageViewElement, getImgViewElementMatcher as _getImageViewElementMatcher, determineImageTypeForInsertionAtSelection as _determineImageTypeForInsertionAtSelection, getSizeValueIfInPx as _getImageSizeValueIfInPx, widthAndHeightStylesAreBothSet as _checkIfImageWidthAndHeightStylesAreBothSet } from './image/utils.js';
-export { ImageInsertFormView as _ImageInsertFormView } from './imageinsert/ui/imageinsertformview.js';
-export { ImageInsertUrlView as _ImageInsertUrlView } from './imageinsert/ui/imageinserturlview.js';
-export { ImageCustomResizeFormView as _ImageCustomResizeFormView } from './imageresize/ui/imagecustomresizeformview.js';
-export { getSelectedImageEditorNodes as _getSelectedImageEditorNodes } from './imageresize/utils/getselectedimageeditornodes.js';
-export { getSelectedImagePossibleResizeRange as _getSelectedImagePossibleResizeRange } from './imageresize/utils/getselectedimagepossibleresizerange.js';
-export { getSelectedImageWidthInUnits as _getSelectedImageWidthInUnits } from './imageresize/utils/getselectedimagewidthinunits.js';
-export { tryParseDimensionWithUnit as _tryParseImageDimensionWithUnit, tryCastDimensionsToUnit as _tryCastImageDimensionsToUnit } from './imageresize/utils/tryparsedimensionwithunit.js';
-export { modelToViewStyleAttribute as _modelToViewImageStyleAttribute, viewToModelStyleAttribute as _viewToModelImageStyleAttribute } from './imagestyle/converters.js';
-export { utils as _ImageStyleUtils, DEFAULT_OPTIONS as _IMAGE_DEFAULT_OPTIONS, DEFAULT_ICONS as _IMAGE_DEFAULT_ICONS, DEFAULT_DROPDOWN_DEFINITIONS as _IMAGE_DEFAULT_DROPDOWN_DEFINITIONS } from './imagestyle/utils.js';
-export { TextAlternativeFormView as _ImageTextAlternativeFormView } from './imagetextalternative/ui/textalternativeformview.js';
-export { fetchLocalImage as _fetchLocalImage, isLocalImage as _isLocalImage } from './imageupload/utils.js';
-import './augmentation.js';

package/src/pictureediting.js

@@ -1,136 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/**
- * @module image/pictureediting
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ImageEditing } from './image/imageediting.js';
-import { ImageUtils } from './imageutils.js';
-import { downcastSourcesAttribute, upcastPicture } from './image/converters.js';
-/**
- * This plugin enables the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element support in the editor.
- *
- * * It enables the `sources` model attribute on `imageBlock` and `imageInline` model elements
- * (brought by {@link module:image/imageblock~ImageBlock} and {@link module:image/imageinline~ImageInline}, respectively).
- * * It translates the `sources` model element to the view (also: data) structure that may look as follows:
- *
- * ```html
- * <p>Inline image using picture:
- * 	<picture>
- * 		<source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
- * 		<source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
- * 		<!-- Other sources as specified in the "sources" model attribute... -->
- * 		<img src="image.png" alt="An image using picture" />
- * 	</picture>
- * </p>
- *
- * <p>Block image using picture:</p>
- * <figure class="image">
- * 	<picture>
- * 		<source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
- * 		<source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
- * 		<!-- Other sources as specified in the "sources" model attribute... -->
- * 		<img src="image.png" alt="An image using picture" />
- * 	</picture>
- * 	<figcaption>Caption of the image</figcaption>
- * </figure>
- * ```
- *
- * **Note:** The value of the `sources` {@glink framework/architecture/editing-engine#changing-the-model model attribute}
- * in both examples equals:
- *
- * ```css
- * [
- * 	{
- * 		media: '(min-width: 800px)',
- * 		srcset: 'image-large.webp',
- * 		type: 'image/webp'
- * 	},
- * 	{
- * 		media: '(max-width: 800px)',
- * 		srcset: 'image-small.webp',
- * 		type: 'image/webp'
- * 	}
- * ]
- * ```
- *
- * * It integrates with the {@link module:image/imageupload~ImageUpload} plugin so images uploaded in the editor
- * automatically render using `<picture>` if the {@glink features/images/image-upload/image-upload upload adapter}
- * supports image sources and provides neccessary data.
- *
- * @private
- */
-export class PictureEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageEditing, ImageUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'PictureEditing';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    afterInit() {
-        const editor = this.editor;
-        if (editor.plugins.has('ImageBlockEditing')) {
-            editor.model.schema.extend('imageBlock', {
-                allowAttributes: ['sources']
-            });
-        }
-        if (editor.plugins.has('ImageInlineEditing')) {
-            editor.model.schema.extend('imageInline', {
-                allowAttributes: ['sources']
-            });
-        }
-        this._setupConversion();
-        this._setupImageUploadEditingIntegration();
-    }
-    /**
-     * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
-     * and the model `sources` attribute.
-     */
-    _setupConversion() {
-        const editor = this.editor;
-        const conversion = editor.conversion;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        conversion.for('upcast').add(upcastPicture(imageUtils));
-        conversion.for('downcast').add(downcastSourcesAttribute(imageUtils));
-    }
-    /**
-     * Makes it possible for uploaded images to get the `sources` model attribute and the `<picture>...</picture>`
-     * view structure out-of-the-box if relevant data is provided along the
-     * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing#event:uploadComplete} event.
-     */
-    _setupImageUploadEditingIntegration() {
-        const editor = this.editor;
-        if (!editor.plugins.has('ImageUploadEditing')) {
-            return;
-        }
-        const imageUploadEditing = editor.plugins.get('ImageUploadEditing');
-        this.listenTo(imageUploadEditing, 'uploadComplete', (evt, { imageElement, data }) => {
-            const sources = data.sources;
-            if (!sources) {
-                return;
-            }
-            editor.model.change(writer => {
-                writer.setAttributes({
-                    sources
-                }, imageElement);
-            });
-        });
-    }
-}

package/theme/image.css

@@ -1,143 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck-content {
-	& .image {
-		display: table;
-		clear: both;
-		text-align: center;
-
-		/* Make sure there is some space between the content and the image. Center image by default. */
-		/* The first value should be equal to --ck-spacing-large variable if used in the editor context
-	 	to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
-		margin: 0.9em auto;
-
-		/* Make sure the caption will be displayed properly (See: https://github.com/ckeditor/ckeditor5/issues/1870). */
-		min-width: 50px;
-
-		& img {
-			/* Prevent unnecessary margins caused by line-height (see #44). */
-			display: block;
-
-			/* Center the image if its width is smaller than the content's width. */
-			margin: 0 auto;
-
-			/* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */
-			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%;
-
-			/* 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;
-		}
-	}
-
-	& .image-inline {
-		/*
-		 * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).
-		 * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
-		 * This strange behavior does not happen with inline-flex.
-		 */
-		display: inline-flex;
-
-		/* While being resized, don't allow the image to exceed the width of the editing root. */
-		max-width: 100%;
-
-		/* This is required by Safari to resize images in a sensible way. Without this, the browser breaks the ratio. */
-		align-items: flex-start;
-
-		/* When the picture is present it must act as a flex container to let the img resize properly */
-		& picture {
-			display: flex;
-		}
-
-		/* When the picture is present, it must act like a resizable img. */
-		& picture,
-		& img {
-			/* This is necessary for the img to span the entire .image-inline wrapper and to resize properly. */
-			flex-grow: 1;
-			flex-shrink: 1;
-
-			/* Prevents overflowing the editing root boundaries when an inline image is very wide. */
-			max-width: 100%;
-		}
-	}
-}
-
-.ck.ck-editor__editable {
-	/*
-	 * Inhertit the content styles padding of the <figcaption> in case the integration overrides `text-align: center`
-	 * of `.image` (e.g. to the left/right). This ensures the placeholder stays at the padding just like the native
-	 * caret does, and not at the edge of <figcaption>.
-	 */
-	& .image > figcaption.ck-placeholder::before {
-		padding-left: inherit;
-		padding-right: inherit;
-
-		/*
-		 * Make sure the image caption placeholder doesn't overflow the placeholder area.
-		 * See https://github.com/ckeditor/ckeditor5/issues/9162.
-		 */
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	/*
-	 * See https://github.com/ckeditor/ckeditor5/issues/15115.
-	 */
-	& .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;
-		}
-	}
-
-	/*
-	 * See https://github.com/ckeditor/ckeditor5/issues/15115.
-	 */
-	& .image-inline {
-		z-index: 1;
-
-		/*
-		 * Make sure the selected inline image always stays on top of its siblings.
-		 * See https://github.com/ckeditor/ckeditor5/issues/9108.
-		 */
-		&.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,
-	& th {
-		& .image-inline img {
-			max-width: none;
-		}
-	}
-}