@ckeditor/ckeditor5-image 40.0.0 → 40.2.0

package/src/index.d.ts

@@ -1,48 +1,48 @@
-/**
- * @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
- */
-export { default as AutoImage } from './autoimage';
-export { default as Image } from './image';
-export { default as ImageEditing } from './image/imageediting';
-export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils';
-export { default as ImageCaption } from './imagecaption';
-export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting';
-export { default as ImageInsert } from './imageinsert';
-export { default as ImageInsertUI } from './imageinsert/imageinsertui';
-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';
-export { default as ImageTextAlternative } from './imagetextalternative';
-export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting';
-export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui';
-export { default as ImageToolbar } from './imagetoolbar';
-export { default as ImageUpload } from './imageupload';
-export { default as ImageUploadEditing, type ImageUploadCompleteEvent } from './imageupload/imageuploadediting';
-export { default as ImageUploadProgress } from './imageupload/imageuploadprogress';
-export { default as ImageUploadUI } from './imageupload/imageuploadui';
-export { default as PictureEditing } from './pictureediting';
-export { default as ImageBlock } from './imageblock';
-export { default as ImageInline } from './imageinline';
-export { default as ImageInsertViaUrl } from './imageinsertviaurl';
-export { default as ImageUtils } from './imageutils';
-export { default as ImageBlockEditing } from './image/imageblockediting';
-export { default as ImageCaptionUI } from './imagecaption/imagecaptionui';
-export type { ImageConfig } from './imageconfig';
-export type { default as ImageTypeCommand } from './image/imagetypecommand';
-export type { default as InsertImageCommand } from './image/insertimagecommand';
-export type { default as ReplaceImageSourceCommand } from './image/replaceimagesourcecommand';
-export type { default as ToggleImageCaptionCommand } from './imagecaption/toggleimagecaptioncommand';
-export type { default as ResizeImageCommand } from './imageresize/resizeimagecommand';
-export type { default as ImageStyleCommand } from './imagestyle/imagestylecommand';
-export type { default as ImageTextAlternativeCommand } from './imagetextalternative/imagetextalternativecommand';
-export type { default as UploadImageCommand } from './imageupload/uploadimagecommand';
-import './augmentation';
+/**
+ * @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
+ */
+export { default as AutoImage } from './autoimage';
+export { default as Image } from './image';
+export { default as ImageEditing } from './image/imageediting';
+export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils';
+export { default as ImageCaption } from './imagecaption';
+export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting';
+export { default as ImageInsert } from './imageinsert';
+export { default as ImageInsertUI } from './imageinsert/imageinsertui';
+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';
+export { default as ImageTextAlternative } from './imagetextalternative';
+export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting';
+export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui';
+export { default as ImageToolbar } from './imagetoolbar';
+export { default as ImageUpload } from './imageupload';
+export { default as ImageUploadEditing, type ImageUploadCompleteEvent } from './imageupload/imageuploadediting';
+export { default as ImageUploadProgress } from './imageupload/imageuploadprogress';
+export { default as ImageUploadUI } from './imageupload/imageuploadui';
+export { default as PictureEditing } from './pictureediting';
+export { default as ImageBlock } from './imageblock';
+export { default as ImageInline } from './imageinline';
+export { default as ImageInsertViaUrl } from './imageinsertviaurl';
+export { default as ImageUtils } from './imageutils';
+export { default as ImageBlockEditing } from './image/imageblockediting';
+export { default as ImageCaptionUI } from './imagecaption/imagecaptionui';
+export type { ImageConfig } from './imageconfig';
+export type { default as ImageTypeCommand } from './image/imagetypecommand';
+export type { default as InsertImageCommand } from './image/insertimagecommand';
+export type { default as ReplaceImageSourceCommand } from './image/replaceimagesourcecommand';
+export type { default as ToggleImageCaptionCommand } from './imagecaption/toggleimagecaptioncommand';
+export type { default as ResizeImageCommand } from './imageresize/resizeimagecommand';
+export type { default as ImageStyleCommand } from './imagestyle/imagestylecommand';
+export type { default as ImageTextAlternativeCommand } from './imagetextalternative/imagetextalternativecommand';
+export type { default as UploadImageCommand } from './imageupload/uploadimagecommand';
+import './augmentation';

package/src/index.js

@@ -1,39 +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
- */
-export { default as AutoImage } from './autoimage';
-export { default as Image } from './image';
-export { default as ImageEditing } from './image/imageediting';
-export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils';
-export { default as ImageCaption } from './imagecaption';
-export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting';
-export { default as ImageInsert } from './imageinsert';
-export { default as ImageInsertUI } from './imageinsert/imageinsertui';
-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';
-export { default as ImageTextAlternative } from './imagetextalternative';
-export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting';
-export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui';
-export { default as ImageToolbar } from './imagetoolbar';
-export { default as ImageUpload } from './imageupload';
-export { default as ImageUploadEditing } from './imageupload/imageuploadediting';
-export { default as ImageUploadProgress } from './imageupload/imageuploadprogress';
-export { default as ImageUploadUI } from './imageupload/imageuploadui';
-export { default as PictureEditing } from './pictureediting';
-export { default as ImageBlock } from './imageblock';
-export { default as ImageInline } from './imageinline';
-export { default as ImageInsertViaUrl } from './imageinsertviaurl';
-export { default as ImageUtils } from './imageutils';
-export { default as ImageBlockEditing } from './image/imageblockediting';
-export { default as ImageCaptionUI } from './imagecaption/imagecaptionui';
-import './augmentation';
+/**
+ * @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
+ */
+export { default as AutoImage } from './autoimage';
+export { default as Image } from './image';
+export { default as ImageEditing } from './image/imageediting';
+export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils';
+export { default as ImageCaption } from './imagecaption';
+export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting';
+export { default as ImageInsert } from './imageinsert';
+export { default as ImageInsertUI } from './imageinsert/imageinsertui';
+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';
+export { default as ImageTextAlternative } from './imagetextalternative';
+export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting';
+export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui';
+export { default as ImageToolbar } from './imagetoolbar';
+export { default as ImageUpload } from './imageupload';
+export { default as ImageUploadEditing } from './imageupload/imageuploadediting';
+export { default as ImageUploadProgress } from './imageupload/imageuploadprogress';
+export { default as ImageUploadUI } from './imageupload/imageuploadui';
+export { default as PictureEditing } from './pictureediting';
+export { default as ImageBlock } from './imageblock';
+export { default as ImageInline } from './imageinline';
+export { default as ImageInsertViaUrl } from './imageinsertviaurl';
+export { default as ImageUtils } from './imageutils';
+export { default as ImageBlockEditing } from './image/imageblockediting';
+export { default as ImageCaptionUI } from './imagecaption/imagecaptionui';
+import './augmentation';

package/src/pictureediting.d.ts

@@ -1,88 +1,88 @@
-/**
- * @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/pictureediting
- */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageEditing from './image/imageediting';
-import ImageUtils from './imageutils';
-/**
- * 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 default class PictureEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires(): readonly [typeof ImageEditing, typeof ImageUtils];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "PictureEditing";
-    /**
-     * @inheritDoc
-     */
-    afterInit(): void;
-    /**
-     * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
-     * and the model `sources` attribute.
-     */
-    private _setupConversion;
-    /**
-     * 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.
-     */
-    private _setupImageUploadEditingIntegration;
-}
+/**
+ * @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/pictureediting
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageEditing from './image/imageediting';
+import ImageUtils from './imageutils';
+/**
+ * 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 default class PictureEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageEditing, typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "PictureEditing";
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+    /**
+     * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
+     * and the model `sources` attribute.
+     */
+    private _setupConversion;
+    /**
+     * 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.
+     */
+    private _setupImageUploadEditingIntegration;
+}

package/src/pictureediting.js

@@ -1,130 +1,130 @@
-/**
- * @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/pictureediting
- */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageEditing from './image/imageediting';
-import ImageUtils from './imageutils';
-import { downcastSourcesAttribute, upcastPicture } from './image/converters';
-/**
- * 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 default class PictureEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageEditing, ImageUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'PictureEditing';
-    }
-    /**
-     * @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);
-            });
-        });
-    }
-}
+/**
+ * @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/pictureediting
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageEditing from './image/imageediting';
+import ImageUtils from './imageutils';
+import { downcastSourcesAttribute, upcastPicture } from './image/converters';
+/**
+ * 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 default class PictureEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageEditing, ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'PictureEditing';
+    }
+    /**
+     * @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/imageinsert.css

@@ -3,21 +3,9 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-.ck.ck-image-insert__panel {
-	padding: var(--ck-spacing-large);
-}
-
-.ck.ck-image-insert__ck-finder-button {
-	display: block;
-	width: 100%;
-	margin: var(--ck-spacing-standard) auto;
-	border: 1px solid hsl(0, 0%, 80%);
-	border-radius: var(--ck-border-radius);
-}
-
-/* https://github.com/ckeditor/ckeditor5/issues/7986 */
-.ck.ck-splitbutton > .ck-file-dialog-button.ck-button {
-	padding: 0;
-	margin: 0;
-	border: none;
+.ck.ck-image-insert-url {
+	& .ck-image-insert-url__action-row {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+	}
 }