@ckeditor/ckeditor5-image 41.4.2 → 42.0.0-alpha.0

package/dist/index.js

@@ -7,9 +7,9 @@ import { Clipboard, ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist
 import { LivePosition, LiveRange, Observer, UpcastWriter, enablePlaceholder, Element } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { Undo } from '@ckeditor/ckeditor5-undo/dist/index.js';
 import { Delete } from '@ckeditor/ckeditor5-typing/dist/index.js';
-import { first, global, DomEmitterMixin, FocusTracker, KeystrokeHandler, toArray, logWarning, env, CKEditorError, Collection, Rect } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { first, DomEmitterMixin, global, FocusTracker, KeystrokeHandler, logWarning, toArray, env, CKEditorError, Collection, Rect } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { toWidget, isWidget, findOptimalInsertionRange, Widget, toWidgetEditable, WidgetResize, calculateResizeHostAncestorWidth, WidgetToolbarRepository } from '@ckeditor/ckeditor5-widget/dist/index.js';
-import { View, submitHandler, ButtonView, LabeledFieldView, createLabeledInputText, ViewCollection, FocusCycler, BalloonPanelView, ContextualBalloon, CssTransitionDisablerMixin, clickOutsideHandler, CollapsibleView, SplitButtonView, createDropdown, MenuBarMenuListItemFileDialogButtonView, FileDialogButtonView, Notification, DropdownButtonView, ViewModel, addListToDropdown, createLabeledInputNumber, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { View, ViewCollection, FocusCycler, submitHandler, ButtonView, LabeledFieldView, createLabeledInputText, BalloonPanelView, ContextualBalloon, CssTransitionDisablerMixin, clickOutsideHandler, CollapsibleView, SplitButtonView, createDropdown, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView, FileDialogButtonView, MenuBarMenuListItemFileDialogButtonView, Notification, Dialog, MenuBarMenuListItemButtonView, ViewModel, DropdownButtonView, addListToDropdown, createLabeledInputNumber, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { FileRepository } from '@ckeditor/ckeditor5-upload/dist/index.js';
 import { map, isObject, identity } from 'lodash-es';
 
@@ -129,56 +129,61 @@ import { map, isObject, identity } from 'lodash-es';
 }
 
 const IMAGE_WIDGETS_CLASSES_MATCH_REGEXP = /^(image|image-inline)$/;
-class ImageUtils extends Plugin {
+/**
+ * A set of helpers related to images.
+ */ class ImageUtils extends Plugin {
+    /**
+	 * DOM Emitter.
+	 */ _domEmitter = new (DomEmitterMixin())();
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageUtils';
     }
     /**
-     * Checks if the provided model element is an `image` or `imageInline`.
-     */ isImage(modelElement) {
+	 * 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) {
+	 * 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) {
+	 * 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~Schema}.
-     * @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 = {}) {
+	 * 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~Schema}.
+	 * @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;
@@ -215,11 +220,11 @@ class ImageUtils extends Plugin {
         });
     }
     /**
-     * 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) {
+	 * 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;
@@ -244,8 +249,8 @@ class ImageUtils extends Plugin {
         });
     }
     /**
-     * Returns an image widget editing view element if one is selected or is among the selection's ancestors.
-     */ getClosestSelectedImageWidget(selection) {
+	 * 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;
@@ -264,36 +269,36 @@ class ImageUtils extends Plugin {
         return null;
     }
     /**
-     * Returns a image model element if one is selected or is among the selection's ancestors.
-     */ getClosestSelectedImageElement(selection) {
+	 * 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) {
+	 * 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() {
+	 * 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~Element} to an image widget:
-     * * Adds a {@link module:engine/view/element~Element#_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) {
+	 * Converts a given {@link module:engine/view/element~Element} to an image widget:
+	 * * Adds a {@link module:engine/view/element~Element#_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);
@@ -305,25 +310,25 @@ class ImageUtils extends Plugin {
         });
     }
     /**
-     * Checks if a given view element is an image widget.
-     */ isImageWidget(viewElement) {
+	 * 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) {
+	 * 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) {
+	 * 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) {
+	 * 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;
         }
@@ -335,17 +340,11 @@ class ImageUtils extends Plugin {
         }
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         this._domEmitter.stopListening();
         return super.destroy();
     }
-    constructor(){
-        super(...arguments);
-        /**
-         * DOM Emitter.
-         */ this._domEmitter = new (DomEmitterMixin())();
-    }
 }
 /**
  * Checks if image is allowed by schema in optimal insertion parent.
@@ -410,10 +409,13 @@ class ImageUtils extends Plugin {
 
 // Implements the pattern: http(s)://(www.)example.com/path/to/resource.ext?query=params&maybe=too.
 const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@!$&'()*+,;=%-]+/.source + /\.(jpg|jpeg|png|gif|ico|webp|JPG|JPEG|PNG|GIF|ICO|WEBP)/.source + /(\?[\w.~:/[\]@!$&'()*+,;=%-]*)?/.source + /(#[\w.~:/[\]@!$&'()*+,;=%-]*)?$/.source));
-class AutoImage extends Plugin {
+/**
+ * The auto-image plugin. It recognizes image links in the pasted content and embeds
+ * them shortly after they are injected into the document.
+ */ class AutoImage extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             Clipboard,
             ImageUtils,
@@ -422,13 +424,28 @@ class AutoImage extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'AutoImage';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * The paste–to–embed `setTimeout` ID. Stored as a property to allow
+	 * cleaning of the timeout.
+	 */ _timeoutId;
+    /**
+	 * The position where the `<imageBlock>` element will be inserted after the timeout,
+	 * determined each time a new content is pasted into the document.
+	 */ _positionToInsert;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this._timeoutId = null;
+        this._positionToInsert = null;
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const modelDocument = editor.model.document;
         const clipboardPipeline = editor.plugins.get('ClipboardPipeline');
@@ -461,12 +478,12 @@ class AutoImage extends Plugin {
         });
     }
     /**
-     * Analyzes the part of the document between provided positions in search for a URL representing an image.
-     * When the URL is found, it is automatically converted into an image.
-     *
-     * @param leftPosition Left position of the selection.
-     * @param rightPosition Right position of the selection.
-     */ _embedImageBetweenPositions(leftPosition, rightPosition) {
+	 * Analyzes the part of the document between provided positions in search for a URL representing an image.
+	 * When the URL is found, it is automatically converted into an image.
+	 *
+	 * @param leftPosition Left position of the selection.
+	 * @param rightPosition Right position of the selection.
+	 */ _embedImageBetweenPositions(leftPosition, rightPosition) {
         const editor = this.editor;
         // TODO: Use a marker instead of LiveRange & LivePositions.
         const urlRange = new LiveRange(leftPosition, rightPosition);
@@ -520,19 +537,14 @@ class AutoImage extends Plugin {
             deletePlugin.requestUndoOnBackspace();
         }, 100);
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        this._timeoutId = null;
-        this._positionToInsert = null;
-    }
 }
 
-class ImageTextAlternativeCommand extends Command {
+/**
+ * The image text alternative command. It is used to change the `alt` attribute of `<imageBlock>` and `<imageInline>` model elements.
+ */ class ImageTextAlternativeCommand extends Command {
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ refresh() {
         const editor = this.editor;
         const imageUtils = editor.plugins.get('ImageUtils');
         const element = imageUtils.getClosestSelectedImageElement(this.editor.model.document.selection);
@@ -544,12 +556,12 @@ class ImageTextAlternativeCommand extends Command {
         }
     }
     /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options
-     * @param options.newValue The new value of the `alt` attribute to set.
-     */ execute(options) {
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param options
+	 * @param options.newValue The new value of the `alt` attribute to set.
+	 */ execute(options) {
         const editor = this.editor;
         const imageUtils = editor.plugins.get('ImageUtils');
         const model = editor.model;
@@ -560,30 +572,98 @@ class ImageTextAlternativeCommand extends Command {
     }
 }
 
-class ImageTextAlternativeEditing extends Plugin {
+/**
+ * The image text alternative editing plugin.
+ *
+ * Registers the `'imageTextAlternative'` command.
+ */ class ImageTextAlternativeEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageTextAlternativeEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         this.editor.commands.add('imageTextAlternative', new ImageTextAlternativeCommand(this.editor));
     }
 }
 
-class TextAlternativeFormView extends View {
+/**
+ * The TextAlternativeFormView class.
+ */ class TextAlternativeFormView extends View {
+    /**
+	 * Tracks information about the DOM focus in the form.
+	 */ focusTracker;
+    /**
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
+    /**
+	 * An input with a label.
+	 */ labeledInput;
+    /**
+	 * A button used to submit the form.
+	 */ saveButtonView;
+    /**
+	 * A button used to cancel the form.
+	 */ cancelButtonView;
+    /**
+	 * A collection of views which can be focused in the form.
+	 */ _focusables;
+    /**
+	 * Helps cycling over {@link #_focusables} in the form.
+	 */ _focusCycler;
+    /**
+	 * @inheritDoc
+	 */ constructor(locale){
+        super(locale);
+        const t = this.locale.t;
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.labeledInput = this._createLabeledInputView();
+        this.saveButtonView = this._createButton(t('Save'), icons.check, 'ck-button-save');
+        this.saveButtonView.type = 'submit';
+        this.cancelButtonView = this._createButton(t('Cancel'), icons.cancel, 'ck-button-cancel', 'cancel');
+        this._focusables = new ViewCollection();
+        this._focusCycler = new FocusCycler({
+            focusables: this._focusables,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                // Navigate form fields backwards using the Shift + Tab keystroke.
+                focusPrevious: 'shift + tab',
+                // Navigate form fields forwards using the Tab key.
+                focusNext: 'tab'
+            }
+        });
+        this.setTemplate({
+            tag: 'form',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-text-alternative-form',
+                    'ck-responsive-form'
+                ],
+                // https://github.com/ckeditor/ckeditor5-image/issues/40
+                tabindex: '-1'
+            },
+            children: [
+                this.labeledInput,
+                this.saveButtonView,
+                this.cancelButtonView
+            ]
+        });
+    }
     /**
-     * @inheritDoc
-     */ render() {
+	 * @inheritDoc
+	 */ render() {
         super.render();
         this.keystrokes.listenTo(this.element);
         submitHandler({
@@ -601,21 +681,21 @@ class TextAlternativeFormView extends View {
         });
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         super.destroy();
         this.focusTracker.destroy();
         this.keystrokes.destroy();
     }
     /**
-     * Creates the button view.
-     *
-     * @param label The button label
-     * @param icon The button's icon.
-     * @param className The additional button CSS class name.
-     * @param eventName The event name that the ButtonView#execute event will be delegated to.
-     * @returns The button view instance.
-     */ _createButton(label, icon, className, eventName) {
+	 * Creates the button view.
+	 *
+	 * @param label The button label
+	 * @param icon The button's icon.
+	 * @param className The additional button CSS class name.
+	 * @param eventName The event name that the ButtonView#execute event will be delegated to.
+	 * @returns The button view instance.
+	 */ _createButton(label, icon, className, eventName) {
         const button = new ButtonView(this.locale);
         button.set({
             label,
@@ -633,56 +713,15 @@ class TextAlternativeFormView extends View {
         return button;
     }
     /**
-     * Creates an input with a label.
-     *
-     * @returns Labeled field view instance.
-     */ _createLabeledInputView() {
+	 * Creates an input with a label.
+	 *
+	 * @returns Labeled field view instance.
+	 */ _createLabeledInputView() {
         const t = this.locale.t;
         const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
         labeledInput.label = t('Text alternative');
         return labeledInput;
     }
-    /**
-     * @inheritDoc
-     */ constructor(locale){
-        super(locale);
-        const t = this.locale.t;
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this.labeledInput = this._createLabeledInputView();
-        this.saveButtonView = this._createButton(t('Save'), icons.check, 'ck-button-save');
-        this.saveButtonView.type = 'submit';
-        this.cancelButtonView = this._createButton(t('Cancel'), icons.cancel, 'ck-button-cancel', 'cancel');
-        this._focusables = new ViewCollection();
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate form fields backwards using the Shift + Tab keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate form fields forwards using the Tab key.
-                focusNext: 'tab'
-            }
-        });
-        this.setTemplate({
-            tag: 'form',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-text-alternative-form',
-                    'ck-responsive-form'
-                ],
-                // https://github.com/ckeditor/ckeditor5-image/issues/40
-                tabindex: '-1'
-            },
-            children: [
-                this.labeledInput,
-                this.saveButtonView,
-                this.cancelButtonView
-            ]
-        });
-    }
 }
 
 /**
@@ -723,27 +762,37 @@ class TextAlternativeFormView extends View {
     };
 }
 
-class ImageTextAlternativeUI extends Plugin {
+/**
+ * The image text alternative UI plugin.
+ *
+ * The plugin uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
+ */ class ImageTextAlternativeUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * The contextual balloon plugin instance.
+	 */ _balloon;
+    /**
+	 * A form containing a textarea and buttons, used to change the `alt` text value.
+	 */ _form;
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ContextualBalloon
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageTextAlternativeUI';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         this._createButton();
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         super.destroy();
         // Destroy created UI components as they are not automatically destroyed (see ckeditor5#1341).
         if (this._form) {
@@ -751,9 +800,9 @@ class ImageTextAlternativeUI extends Plugin {
         }
     }
     /**
-     * Creates a button showing the balloon panel for changing the image text alternative and
-     * registers it in the editor {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
-     */ _createButton() {
+	 * Creates a button showing the balloon panel for changing the image text alternative and
+	 * registers it in the editor {@link module:ui/componentfactory~ComponentFactory ComponentFactory}.
+	 */ _createButton() {
         const editor = this.editor;
         const t = editor.t;
         editor.ui.componentFactory.add('imageTextAlternative', (locale)=>{
@@ -773,9 +822,9 @@ class ImageTextAlternativeUI extends Plugin {
         });
     }
     /**
-     * Creates the {@link module:image/imagetextalternative/ui/textalternativeformview~TextAlternativeFormView}
-     * form.
-     */ _createForm() {
+	 * Creates the {@link module:image/imagetextalternative/ui/textalternativeformview~TextAlternativeFormView}
+	 * form.
+	 */ _createForm() {
         const editor = this.editor;
         const view = editor.editing.view;
         const viewDocument = view.document;
@@ -817,8 +866,8 @@ class ImageTextAlternativeUI extends Plugin {
         });
     }
     /**
-     * Shows the {@link #_form} in the {@link #_balloon}.
-     */ _showForm() {
+	 * Shows the {@link #_form} in the {@link #_balloon}.
+	 */ _showForm() {
         if (this._isVisible) {
             return;
         }
@@ -845,10 +894,10 @@ class ImageTextAlternativeUI extends Plugin {
         this._form.enableCssTransitions();
     }
     /**
-     * Removes the {@link #_form} from the {@link #_balloon}.
-     *
-     * @param focusEditable Controls whether the editing view is focused afterwards.
-     */ _hideForm(focusEditable = false) {
+	 * Removes the {@link #_form} from the {@link #_balloon}.
+	 *
+	 * @param focusEditable Controls whether the editing view is focused afterwards.
+	 */ _hideForm(focusEditable = false) {
         if (!this._isInBalloon) {
             return;
         }
@@ -863,29 +912,37 @@ class ImageTextAlternativeUI extends Plugin {
         }
     }
     /**
-     * Returns `true` when the {@link #_form} is the visible view in the {@link #_balloon}.
-     */ get _isVisible() {
+	 * Returns `true` when the {@link #_form} is the visible view in the {@link #_balloon}.
+	 */ get _isVisible() {
         return !!this._balloon && this._balloon.visibleView === this._form;
     }
     /**
-     * Returns `true` when the {@link #_form} is in the {@link #_balloon}.
-     */ get _isInBalloon() {
+	 * Returns `true` when the {@link #_form} is in the {@link #_balloon}.
+	 */ get _isInBalloon() {
         return !!this._balloon && this._balloon.hasView(this._form);
     }
 }
 
-class ImageTextAlternative extends Plugin {
+/**
+ * The image text alternative plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/images-styles image styles} documentation.
+ *
+ * This is a "glue" plugin which loads the
+ *  {@link module:image/imagetextalternative/imagetextalternativeediting~ImageTextAlternativeEditing}
+ * and {@link module:image/imagetextalternative/imagetextalternativeui~ImageTextAlternativeUI} plugins.
+ */ class ImageTextAlternative extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageTextAlternativeEditing,
             ImageTextAlternativeUI
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageTextAlternative';
     }
 }
@@ -1133,10 +1190,17 @@ class ImageTextAlternative extends Plugin {
     };
 }
 
-class ImageLoadObserver extends Observer {
+/**
+ * Observes all new images added to the {@link module:engine/view/document~Document},
+ * fires {@link module:engine/view/document~Document#event:imageLoaded} and
+ * {@link module:engine/view/document~Document#event:layoutChanged} event every time when the new image
+ * has been loaded.
+ *
+ * **Note:** This event is not fired for images that has been added to the document and rendered as `complete` (already loaded).
+ */ class ImageLoadObserver extends Observer {
     /**
-     * @inheritDoc
-     */ observe(domRoot) {
+	 * @inheritDoc
+	 */ observe(domRoot) {
         this.listenTo(domRoot, 'load', (event, domEvent)=>{
             const domElement = domEvent.target;
             if (this.checkShouldIgnoreEventFromTarget(domElement)) {
@@ -1151,17 +1215,17 @@ class ImageLoadObserver extends Observer {
         });
     }
     /**
-     * @inheritDoc
-     */ stopObserving(domRoot) {
+	 * @inheritDoc
+	 */ stopObserving(domRoot) {
         this.stopListening(domRoot);
     }
     /**
-     * Fires {@link module:engine/view/document~Document#event:layoutChanged} and
-     * {@link module:engine/view/document~Document#event:imageLoaded}
-     * if observer {@link #isEnabled is enabled}.
-     *
-     * @param domEvent The DOM event.
-     */ _fireEvents(domEvent) {
+	 * Fires {@link module:engine/view/document~Document#event:layoutChanged} and
+	 * {@link module:engine/view/document~Document#event:imageLoaded}
+	 * if observer {@link #isEnabled is enabled}.
+	 *
+	 * @param domEvent The DOM event.
+	 */ _fireEvents(domEvent) {
         if (this.isEnabled) {
             this.document.fire('layoutChanged');
             this.document.fire('imageLoaded', domEvent);
@@ -1169,21 +1233,82 @@ class ImageLoadObserver extends Observer {
     }
 }
 
-class InsertImageCommand extends Command {
+/**
+ * Insert image command.
+ *
+ * The command is registered by the {@link module:image/image/imageediting~ImageEditing} plugin as `insertImage`
+ * and it is also available via aliased `imageInsert` name.
+ *
+ * In order to insert an image at the current selection position
+ * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
+ * execute the command and specify the image source:
+ *
+ * ```ts
+ * editor.execute( 'insertImage', { source: 'http://url.to.the/image' } );
+ * ```
+ *
+ * It is also possible to insert multiple images at once:
+ *
+ * ```ts
+ * editor.execute( 'insertImage', {
+ * 	source:  [
+ * 		'path/to/image.jpg',
+ * 		'path/to/other-image.jpg'
+ * 	]
+ * } );
+ * ```
+ *
+ * If you want to take the full control over the process, you can specify individual model attributes:
+ *
+ * ```ts
+ * editor.execute( 'insertImage', {
+ * 	source:  [
+ * 		{ src: 'path/to/image.jpg', alt: 'First alt text' },
+ * 		{ src: 'path/to/other-image.jpg', alt: 'Second alt text', customAttribute: 'My attribute value' }
+ * 	]
+ * } );
+ * ```
+ */ class InsertImageCommand extends Command {
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        const configImageInsertType = editor.config.get('image.insert.type');
+        if (!editor.plugins.has('ImageBlockEditing')) {
+            if (configImageInsertType === 'block') {
+                /**
+				 * The {@link module:image/imageblock~ImageBlock} plugin must be enabled to allow inserting block images. See
+				 * {@link module:image/imageconfig~ImageInsertConfig#type} to learn more.
+				 *
+				 * @error image-block-plugin-required
+				 */ logWarning('image-block-plugin-required');
+            }
+        }
+        if (!editor.plugins.has('ImageInlineEditing')) {
+            if (configImageInsertType === 'inline') {
+                /**
+				 * The {@link module:image/imageinline~ImageInline} plugin must be enabled to allow inserting inline images. See
+				 * {@link module:image/imageconfig~ImageInsertConfig#type} to learn more.
+				 *
+				 * @error image-inline-plugin-required
+				 */ logWarning('image-inline-plugin-required');
+            }
+        }
+    }
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ refresh() {
         const imageUtils = this.editor.plugins.get('ImageUtils');
         this.isEnabled = imageUtils.isImageAllowed();
     }
     /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options Options for the executed command.
-     * @param options.source The image source or an array of image sources to insert.
-     * See the documentation of the command to learn more about accepted formats.
-     */ execute(options) {
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param options Options for the executed command.
+	 * @param options.source The image source or an array of image sources to insert.
+	 * See the documentation of the command to learn more about accepted formats.
+	 */ execute(options) {
         const sourceDefinitions = toArray(options.source);
         const selection = this.editor.model.document.selection;
         const imageUtils = this.editor.plugins.get('ImageUtils');
@@ -1219,38 +1344,26 @@ class InsertImageCommand extends Command {
             }
         });
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        const configImageInsertType = editor.config.get('image.insert.type');
-        if (!editor.plugins.has('ImageBlockEditing')) {
-            if (configImageInsertType === 'block') {
-                /**
-                 * The {@link module:image/imageblock~ImageBlock} plugin must be enabled to allow inserting block images. See
-                 * {@link module:image/imageconfig~ImageInsertConfig#type} to learn more.
-                 *
-                 * @error image-block-plugin-required
-                 */ logWarning('image-block-plugin-required');
-            }
-        }
-        if (!editor.plugins.has('ImageInlineEditing')) {
-            if (configImageInsertType === 'inline') {
-                /**
-                 * The {@link module:image/imageinline~ImageInline} plugin must be enabled to allow inserting inline images. See
-                 * {@link module:image/imageconfig~ImageInsertConfig#type} to learn more.
-                 *
-                 * @error image-inline-plugin-required
-                 */ logWarning('image-inline-plugin-required');
-            }
-        }
-    }
 }
 
-class ReplaceImageSourceCommand extends Command {
+/**
+ * @module image/image/replaceimagesourcecommand
+ */ /**
+ * Replace image source command.
+ *
+ * Changes image source to the one provided. Can be executed as follows:
+ *
+ * ```ts
+ * editor.execute( 'replaceImageSource', { source: 'http://url.to.the/image' } );
+ * ```
+ */ class ReplaceImageSourceCommand extends Command {
+    constructor(editor){
+        super(editor);
+        this.decorate('cleanupImage');
+    }
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ refresh() {
         const editor = this.editor;
         const imageUtils = editor.plugins.get('ImageUtils');
         const element = this.editor.model.document.selection.getSelectedElement();
@@ -1258,12 +1371,12 @@ class ReplaceImageSourceCommand extends Command {
         this.value = this.isEnabled ? element.getAttribute('src') : null;
     }
     /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options Options for the executed command.
-     * @param options.source The image source to replace.
-     */ execute(options) {
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param options Options for the executed command.
+	 * @param options.source The image source to replace.
+	 */ execute(options) {
         const image = this.editor.model.document.selection.getSelectedElement();
         const imageUtils = this.editor.plugins.get('ImageUtils');
         this.editor.model.change((writer)=>{
@@ -1273,51 +1386,53 @@ class ReplaceImageSourceCommand extends Command {
         });
     }
     /**
-     * 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) {
+	 * 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);
+		 * 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);
     }
-    constructor(editor){
-        super(editor);
-        this.decorate('cleanupImage');
-    }
 }
 
-class ImageEditing extends Plugin {
+/**
+ * The image engine plugin. This module loads common code shared between
+ * {@link module:image/image/imageinlineediting~ImageInlineEditing} and
+ * {@link module:image/image/imageblockediting~ImageBlockEditing} plugins.
+ *
+ * This plugin registers the {@link module:image/image/insertimagecommand~InsertImageCommand 'insertImage'} command.
+ */ class ImageEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const conversion = editor.conversion;
         // See https://github.com/ckeditor/ckeditor5-image/issues/142.
@@ -1344,29 +1459,31 @@ class ImageEditing extends Plugin {
     }
 }
 
-class ImageSizeAttributes extends Plugin {
+/**
+ * This plugin enables `width` and `height` attributes in inline and block image elements.
+ */ class ImageSizeAttributes extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageSizeAttributes';
     }
     /**
-     * @inheritDoc
-     */ afterInit() {
+	 * @inheritDoc
+	 */ afterInit() {
         this._registerSchema();
         this._registerConverters('imageBlock');
         this._registerConverters('imageInline');
     }
     /**
-     * Registers the `width` and `height` attributes for inline and block images.
-     */ _registerSchema() {
+	 * 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: [
@@ -1385,8 +1502,8 @@ class ImageSizeAttributes extends Plugin {
         }
     }
     /**
-     * Registers converters for `width` and `height` attributes.
-     */ _registerConverters(imageType) {
+	 * 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';
@@ -1476,10 +1593,23 @@ class ImageSizeAttributes extends Plugin {
     }
 }
 
-class ImageTypeCommand extends Command {
+/**
+ * The image type command. It changes the type of a selected image, depending on the configuration.
+ */ class ImageTypeCommand extends Command {
+    /**
+	 * Model element name the command converts to.
+	 */ _modelElementName;
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 *
+	 * @param modelElementName Model element name the command converts to.
+	 */ constructor(editor, modelElementName){
+        super(editor);
+        this._modelElementName = modelElementName;
+    }
+    /**
+	 * @inheritDoc
+	 */ refresh() {
         const editor = this.editor;
         const imageUtils = editor.plugins.get('ImageUtils');
         const element = imageUtils.getClosestSelectedImageElement(this.editor.model.document.selection);
@@ -1490,15 +1620,15 @@ 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(options = {}) {
+	 * 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(options = {}) {
         const editor = this.editor;
         const model = this.editor.model;
         const imageUtils = editor.plugins.get('ImageUtils');
@@ -1537,39 +1667,33 @@ class ImageTypeCommand extends Command {
             };
         });
     }
-    /**
-     * @inheritDoc
-     *
-     * @param modelElementName Model element name the command converts to.
-     */ constructor(editor, modelElementName){
-        super(editor);
-        this._modelElementName = modelElementName;
-    }
 }
 
-class ImagePlaceholder extends Plugin {
+/**
+ * Adds support for image placeholder that is automatically removed when the image is loaded.
+ */ class ImagePlaceholder extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImagePlaceholder';
     }
     /**
-     * @inheritDoc
-     */ afterInit() {
+	 * @inheritDoc
+	 */ afterInit() {
         this._setupSchema();
         this._setupConversion();
         this._setupLoadListener();
     }
     /**
-     * Extends model schema.
-     */ _setupSchema() {
+	 * 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().
@@ -1589,8 +1713,8 @@ class ImagePlaceholder extends Plugin {
         }
     }
     /**
-     * Registers converters.
-     */ _setupConversion() {
+	 * Registers converters.
+	 */ _setupConversion() {
         const editor = this.editor;
         const conversion = editor.conversion;
         const imageUtils = editor.plugins.get('ImageUtils');
@@ -1618,8 +1742,8 @@ class ImagePlaceholder extends Plugin {
         });
     }
     /**
-     * Prepares listener for image load.
-     */ _setupLoadListener() {
+	 * Prepares listener for image load.
+	 */ _setupLoadListener() {
         const editor = this.editor;
         const model = editor.model;
         const editing = editor.editing;
@@ -1648,10 +1772,19 @@ class ImagePlaceholder extends Plugin {
     }
 }
 
-class ImageBlockEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */ static get requires() {
+/**
+ * The image block plugin.
+ *
+ * It registers:
+ *
+ * * `<imageBlock>` as a block element in the document schema, and allows `alt`, `src` and `srcset` attributes.
+ * * converters for editing and data pipelines.,
+ * * {@link module:image/image/imagetypecommand~ImageTypeCommand `'imageTypeBlock'`} command that converts inline images into
+ * block images.
+ */ class ImageBlockEditing extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageEditing,
             ImageSizeAttributes,
@@ -1661,13 +1794,13 @@ class ImageBlockEditing extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageBlockEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const schema = editor.model.schema;
         // Converters 'alt' and 'srcset' are added in 'ImageEditing' plugin.
@@ -1686,9 +1819,9 @@ class ImageBlockEditing extends Plugin {
         }
     }
     /**
-     * Configures conversion pipelines to support upcasting and downcasting
-     * block images (block image widgets) and their attributes.
-     */ _setupConversion() {
+	 * Configures conversion pipelines to support upcasting and downcasting
+	 * block images (block image widgets) and their attributes.
+	 */ _setupConversion() {
         const editor = this.editor;
         const t = editor.t;
         const conversion = editor.conversion;
@@ -1711,21 +1844,21 @@ class ImageBlockEditing extends Plugin {
         }).add(upcastImageFigure(imageUtils));
     }
     /**
-     * Integrates the plugin with the clipboard pipeline.
-     *
-     * Idea is that the feature should recognize the user's intent when an **inline** image is
-     * pasted or dropped. If such an image is pasted/dropped:
-     *
-     * * into an empty block (e.g. an empty paragraph),
-     * * on another object (e.g. some block widget).
-     *
-     * it gets converted into a block image on the fly. We assume this is the user's intent
-     * 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() {
+	 * Integrates the plugin with the clipboard pipeline.
+	 *
+	 * Idea is that the feature should recognize the user's intent when an **inline** image is
+	 * pasted or dropped. If such an image is pasted/dropped:
+	 *
+	 * * into an empty block (e.g. an empty paragraph),
+	 * * on another object (e.g. some block widget).
+	 *
+	 * it gets converted into a block image on the fly. We assume this is the user's intent
+	 * 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;
         const model = editor.model;
         const editingView = editor.editing.view;
@@ -1775,46 +1908,32 @@ class ImageBlockEditing extends Plugin {
     }
 }
 
-class ImageInsertFormView extends View {
+/**
+ * The view displayed in the insert image dropdown.
+ *
+ * See {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+ */ class ImageInsertFormView extends View {
     /**
-     * @inheritDoc
-     */ render() {
-        super.render();
-        submitHandler({
-            view: this
-        });
-        for (const view of this._focusables){
-            this.focusTracker.add(view.element);
-        }
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-        const stopPropagation = (data)=>data.stopPropagation();
-        // Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's
-        // keystroke handler would take over the key management in the URL input. We need to prevent
-        // this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.
-        this.keystrokes.set('arrowright', stopPropagation);
-        this.keystrokes.set('arrowleft', stopPropagation);
-        this.keystrokes.set('arrowup', stopPropagation);
-        this.keystrokes.set('arrowdown', stopPropagation);
-    }
+	 * Tracks information about DOM focus in the form.
+	 */ focusTracker;
     /**
-     * @inheritDoc
-     */ destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
     /**
-     * Focuses the first {@link #_focusables focusable} in the form.
-     */ focus() {
-        this._focusCycler.focusFirst();
-    }
+	 * A collection of views that can be focused in the form.
+	 */ _focusables;
+    /**
+	 * Helps cycling over {@link #_focusables} in the form.
+	 */ _focusCycler;
     /**
-     * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
-     *
-     * @param locale The localization services instance.
-     * @param integrations An integrations object that contains components (or tokens for components) to be shown in the panel view.
-     */ constructor(locale, integrations = []){
+	 * A collection of the defined integrations for inserting the images.
+	 */ children;
+    /**
+	 * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+	 *
+	 * @param locale The localization services instance.
+	 * @param integrations An integrations object that contains components (or tokens for components) to be shown in the panel view.
+	 */ constructor(locale, integrations = []){
         super(locale);
         this.focusTracker = new FocusTracker();
         this.keystrokes = new KeystrokeHandler();
@@ -1838,20 +1957,6 @@ class ImageInsertFormView extends View {
                 this._focusables.addMany(view.children);
             }
         }
-        if (this._focusables.length > 1) {
-            for (const view of this._focusables){
-                if (isViewWithFocusCycler(view)) {
-                    view.focusCycler.on('forwardCycle', (evt)=>{
-                        this._focusCycler.focusNext();
-                        evt.stop();
-                    });
-                    view.focusCycler.on('backwardCycle', (evt)=>{
-                        this._focusCycler.focusPrevious();
-                        evt.stop();
-                    });
-                }
-            }
-        }
         this.setTemplate({
             tag: 'form',
             attributes: {
@@ -1864,63 +1969,123 @@ class ImageInsertFormView extends View {
             children: this.children
         });
     }
-}
-function isViewWithFocusCycler(view) {
-    return 'focusCycler' in view;
+    /**
+	 * @inheritDoc
+	 */ render() {
+        super.render();
+        submitHandler({
+            view: this
+        });
+        for (const view of this._focusables){
+            this.focusTracker.add(view.element);
+        }
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+        const stopPropagation = (data)=>data.stopPropagation();
+        // Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's
+        // keystroke handler would take over the key management in the URL input. We need to prevent
+        // this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.
+        this.keystrokes.set('arrowright', stopPropagation);
+        this.keystrokes.set('arrowleft', stopPropagation);
+        this.keystrokes.set('arrowup', stopPropagation);
+        this.keystrokes.set('arrowdown', stopPropagation);
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+	 * Focuses the first {@link #_focusables focusable} in the form.
+	 */ focus() {
+        this._focusCycler.focusFirst();
+    }
 }
 
-class ImageInsertUI extends Plugin {
+/**
+ * The image insert dropdown plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature}
+ * and {@glink features/images/images-inserting Insert images via source URL} documentation.
+ *
+ * Adds the `'insertImage'` dropdown to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
+ * and also the `imageInsert` dropdown as an alias for backward compatibility.
+ *
+ * Adds the `'menuBar:insertImage'` sub-menu to the {@link module:ui/componentfactory~ComponentFactory UI component factory}, which is
+ * by default added to the `'Insert'` menu.
+ */ class ImageInsertUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageInsertUI';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ init() {
-        const editor = this.editor;
-        const selection = editor.model.document.selection;
+	 * The dropdown view responsible for displaying the image insert UI.
+	 */ dropdownView;
+    /**
+	 * Registered integrations map.
+	 */ _integrations = new Map();
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        editor.config.define('image.insert.integrations', [
+            'upload',
+            'assetManager',
+            'url'
+        ]);
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
+        const editor = this.editor;
+        const selection = editor.model.document.selection;
         const imageUtils = editor.plugins.get('ImageUtils');
         this.set('isImageSelected', false);
         this.listenTo(editor.model.document, 'change', ()=>{
             this.isImageSelected = imageUtils.isImage(selection.getSelectedElement());
         });
         const componentCreator = (locale)=>this._createToolbarComponent(locale);
+        const menuBarComponentCreator = (locale)=>this._createMenuBarComponent(locale);
         // Register `insertImage` dropdown and add `imageInsert` dropdown as an alias for backward compatibility.
         editor.ui.componentFactory.add('insertImage', componentCreator);
         editor.ui.componentFactory.add('imageInsert', componentCreator);
+        editor.ui.componentFactory.add('menuBar:insertImage', menuBarComponentCreator);
     }
     /**
-     * Registers the insert image dropdown integration.
-     */ registerIntegration({ name, observable, buttonViewCreator, formViewCreator, requiresForm }) {
+	 * Registers the insert image dropdown integration.
+	 */ registerIntegration({ name, observable, buttonViewCreator, formViewCreator, menuBarButtonViewCreator, requiresForm = false }) {
         if (this._integrations.has(name)) {
             /**
-             * There are two insert-image integrations registered with the same name.
-             *
-             * Make sure that you do not load multiple asset manager plugins.
-             *
-             * @error image-insert-integration-exists
-             */ logWarning('image-insert-integration-exists', {
+			 * There are two insert-image integrations registered with the same name.
+			 *
+			 * Make sure that you do not load multiple asset manager plugins.
+			 *
+			 * @error image-insert-integration-exists
+			 */ logWarning('image-insert-integration-exists', {
                 name
             });
         }
         this._integrations.set(name, {
             observable,
             buttonViewCreator,
+            menuBarButtonViewCreator,
             formViewCreator,
-            requiresForm: !!requiresForm
+            requiresForm
         });
     }
     /**
-     * Creates the toolbar component.
-     */ _createToolbarComponent(locale) {
+	 * Creates the toolbar component.
+	 */ _createToolbarComponent(locale) {
         const editor = this.editor;
         const t = locale.t;
         const integrations = this._prepareIntegrations();
@@ -1952,21 +2117,50 @@ class ImageInsertUI extends Plugin {
         return dropdownView;
     }
     /**
-     * Validates the integrations list.
-     */ _prepareIntegrations() {
+	 * Creates the menu bar component.
+	 */ _createMenuBarComponent(locale) {
+        const t = locale.t;
+        const integrations = this._prepareIntegrations();
+        if (!integrations.length) {
+            return null;
+        }
+        let resultView;
+        const firstIntegration = integrations[0];
+        if (integrations.length == 1) {
+            resultView = firstIntegration.menuBarButtonViewCreator(true);
+        } else {
+            resultView = new MenuBarMenuView(locale);
+            const listView = new MenuBarMenuListView(locale);
+            resultView.panelView.children.add(listView);
+            resultView.buttonView.set({
+                icon: icons.image,
+                label: t('Image')
+            });
+            for (const integration of integrations){
+                const listItemView = new MenuBarMenuListItemView(locale, resultView);
+                const buttonView = integration.menuBarButtonViewCreator(false);
+                listItemView.children.add(buttonView);
+                listView.items.add(listItemView);
+            }
+        }
+        return resultView;
+    }
+    /**
+	 * Validates the integrations list.
+	 */ _prepareIntegrations() {
         const editor = this.editor;
         const items = editor.config.get('image.insert.integrations');
         const result = [];
         if (!items.length) {
             /**
-             * The insert image feature requires a list of integrations to be provided in the editor configuration.
-             *
-             * The default list of integrations is `upload`, `assetManager`, `url`. Those integrations are included
-             * in the insert image dropdown if the given feature plugin is loaded. You should omit the `integrations`
-             * configuration key to use the default set or provide a selected list of integrations that should be used.
-             *
-             * @error image-insert-integrations-not-specified
-             */ logWarning('image-insert-integrations-not-specified');
+			 * The insert image feature requires a list of integrations to be provided in the editor configuration.
+			 *
+			 * The default list of integrations is `upload`, `assetManager`, `url`. Those integrations are included
+			 * in the insert image dropdown if the given feature plugin is loaded. You should omit the `integrations`
+			 * configuration key to use the default set or provide a selected list of integrations that should be used.
+			 *
+			 * @error image-insert-integrations-not-specified
+			 */ logWarning('image-insert-integrations-not-specified');
             return result;
         }
         for (const item of items){
@@ -1977,10 +2171,10 @@ class ImageInsertUI extends Plugin {
                     'url'
                 ].includes(item)) {
                     /**
-                     * The specified insert image integration name is unknown or the providing plugin is not loaded in the editor.
-                     *
-                     * @error image-insert-unknown-integration
-                     */ logWarning('image-insert-unknown-integration', {
+					 * The specified insert image integration name is unknown or the providing plugin is not loaded in the editor.
+					 *
+					 * @error image-insert-unknown-integration
+					 */ logWarning('image-insert-unknown-integration', {
                         item
                     });
                 }
@@ -1990,38 +2184,35 @@ class ImageInsertUI extends Plugin {
         }
         if (!result.length) {
             /**
-             * The image insert feature requires integrations to be registered by separate features.
-             *
-             * The `insertImage` toolbar button requires integrations to be registered by other features.
-             * For example {@link module:image/imageupload~ImageUpload ImageUpload},
-             * {@link module:image/imageinsert~ImageInsert ImageInsert},
-             * {@link module:image/imageinsertviaurl~ImageInsertViaUrl ImageInsertViaUrl},
-             * {@link module:ckbox/ckbox~CKBox CKBox}
-             *
-             * @error image-insert-integrations-not-registered
-             */ logWarning('image-insert-integrations-not-registered');
+			 * The image insert feature requires integrations to be registered by separate features.
+			 *
+			 * The `insertImage` toolbar button requires integrations to be registered by other features.
+			 * For example {@link module:image/imageupload~ImageUpload ImageUpload},
+			 * {@link module:image/imageinsert~ImageInsert ImageInsert},
+			 * {@link module:image/imageinsertviaurl~ImageInsertViaUrl ImageInsertViaUrl},
+			 * {@link module:ckbox/ckbox~CKBox CKBox}
+			 *
+			 * @error image-insert-integrations-not-registered
+			 */ logWarning('image-insert-integrations-not-registered');
         }
         return result;
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        /**
-         * Registered integrations map.
-         */ this._integrations = new Map();
-        editor.config.define('image.insert.integrations', [
-            'upload',
-            'assetManager',
-            'url'
-        ]);
-    }
 }
 
-class ImageBlock extends Plugin {
+/**
+ * The image block plugin.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * {@link module:image/image/imageblockediting~ImageBlockEditing},
+ * * {@link module:image/imagetextalternative~ImageTextAlternative}.
+ *
+ * Usually, it is used in conjunction with other plugins from this package. See the {@glink api/image package page}
+ * for more information.
+ */ class ImageBlock extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageBlockEditing,
             Widget,
@@ -2030,16 +2221,25 @@ class ImageBlock extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageBlock';
     }
 }
 
-class ImageInlineEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */ static get requires() {
+/**
+ * The image inline plugin.
+ *
+ * It registers:
+ *
+ * * `<imageInline>` as an inline element in the document schema, and allows `alt`, `src` and `srcset` attributes.
+ * * converters for editing and data pipelines.
+ * * {@link module:image/image/imagetypecommand~ImageTypeCommand `'imageTypeInline'`} command that converts block images into
+ * inline images.
+ */ class ImageInlineEditing extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageEditing,
             ImageSizeAttributes,
@@ -2049,13 +2249,13 @@ class ImageInlineEditing extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageInlineEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const schema = editor.model.schema;
         // Converters 'alt' and 'srcset' are added in 'ImageEditing' plugin.
@@ -2065,16 +2265,13 @@ class ImageInlineEditing extends Plugin {
                 'alt',
                 'src',
                 'srcset'
+            ],
+            // Disallow inline images in captions (at least for now).
+            // This is the best spot to do that because independent packages can introduce captions (ImageCaption, TableCaption, etc.).
+            disallowIn: [
+                'caption'
             ]
         });
-        // Disallow inline images in captions (for now). This is the best spot to do that because
-        // independent packages can introduce captions (ImageCaption, TableCaption, etc.) so better this
-        // be future-proof.
-        schema.addChildCheck((context, childDefinition)=>{
-            if (context.endsWith('caption') && childDefinition.name === 'imageInline') {
-                return false;
-            }
-        });
         this._setupConversion();
         if (editor.plugins.has('ImageBlockEditing')) {
             editor.commands.add('imageTypeInline', new ImageTypeCommand(this.editor, 'imageInline'));
@@ -2082,9 +2279,9 @@ class ImageInlineEditing extends Plugin {
         }
     }
     /**
-     * Configures conversion pipelines to support upcasting and downcasting
-     * inline images (inline image widgets) and their attributes.
-     */ _setupConversion() {
+	 * Configures conversion pipelines to support upcasting and downcasting
+	 * inline images (inline image widgets) and their attributes.
+	 */ _setupConversion() {
         const editor = this.editor;
         const t = editor.t;
         const conversion = editor.conversion;
@@ -2107,22 +2304,22 @@ class ImageInlineEditing extends Plugin {
         });
     }
     /**
-     * Integrates the plugin with the clipboard pipeline.
-     *
-     * Idea is that the feature should recognize the user's intent when an **block** image is
-     * pasted or dropped. If such an image is pasted/dropped into a non-empty block
-     * (e.g. a paragraph with some text) it gets converted into an inline image on the fly.
-     *
-     * We assume this is the user's intent if they decided to put their image there.
-     *
-     * **Note**: If a block image has a caption, it will not be converted to an inline image
-     * to avoid the confusion. Captions are added on purpose and they should never be lost
-     * 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() {
+	 * Integrates the plugin with the clipboard pipeline.
+	 *
+	 * Idea is that the feature should recognize the user's intent when an **block** image is
+	 * pasted or dropped. If such an image is pasted/dropped into a non-empty block
+	 * (e.g. a paragraph with some text) it gets converted into an inline image on the fly.
+	 *
+	 * We assume this is the user's intent if they decided to put their image there.
+	 *
+	 * **Note**: If a block image has a caption, it will not be converted to an inline image
+	 * to avoid the confusion. Captions are added on purpose and they should never be lost
+	 * 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;
         const model = editor.model;
         const editingView = editor.editing.view;
@@ -2184,10 +2381,20 @@ class ImageInlineEditing extends Plugin {
     }
 }
 
-class ImageInline extends Plugin {
+/**
+ * The image inline plugin.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * {@link module:image/image/imageinlineediting~ImageInlineEditing},
+ * * {@link module:image/imagetextalternative~ImageTextAlternative}.
+ *
+ * Usually, it is used in conjunction with other plugins from this package. See the {@glink api/image package page}
+ * for more information.
+ */ class ImageInline extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageInlineEditing,
             Widget,
@@ -2196,44 +2403,58 @@ class ImageInline extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageInline';
     }
 }
 
-class Image extends Plugin {
+/**
+ * The image plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/images-overview image feature} documentation.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * {@link module:image/imageblock~ImageBlock},
+ * * {@link module:image/imageinline~ImageInline},
+ *
+ * Usually, it is used in conjunction with other plugins from this package. See the {@glink api/image package page}
+ * for more information.
+ */ class Image extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageBlock,
             ImageInline
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'Image';
     }
 }
 
-class ImageCaptionUtils extends Plugin {
+/**
+ * The image caption utilities plugin.
+ */ class ImageCaptionUtils extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageCaptionUtils';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUtils
         ];
     }
     /**
-     * Returns the caption model element from a given image element. Returns `null` if no caption is found.
-     */ getCaptionFromImageModelElement(imageModelElement) {
+	 * Returns the caption model element from a given image element. Returns `null` if no caption is found.
+	 */ getCaptionFromImageModelElement(imageModelElement) {
         for (const node of imageModelElement.getChildren()){
             if (!!node && node.is('element', 'caption')) {
                 return node;
@@ -2242,8 +2463,8 @@ class ImageCaptionUtils extends Plugin {
         return null;
     }
     /**
-     * Returns the caption model element for a model selection. Returns `null` if the selection has no caption element ancestor.
-     */ getCaptionFromModelSelection(selection) {
+	 * Returns the caption model element for a model selection. Returns `null` if the selection has no caption element ancestor.
+	 */ getCaptionFromModelSelection(selection) {
         const imageUtils = this.editor.plugins.get('ImageUtils');
         const captionElement = selection.getFirstPosition().findAncestor('caption');
         if (!captionElement) {
@@ -2255,11 +2476,11 @@ class ImageCaptionUtils extends Plugin {
         return null;
     }
     /**
-     * {@link module:engine/view/matcher~Matcher} pattern. Checks if a given element is a `<figcaption>` element that is placed
-     * inside the image `<figure>` element.
-     * @returns Returns the object accepted by {@link module:engine/view/matcher~Matcher} or `null` if the element
-     * cannot be matched.
-     */ matchImageCaptionViewElement(element) {
+	 * {@link module:engine/view/matcher~Matcher} pattern. Checks if a given element is a `<figcaption>` element that is placed
+	 * inside the image `<figure>` element.
+	 * @returns Returns the object accepted by {@link module:engine/view/matcher~Matcher} or `null` if the element
+	 * cannot be matched.
+	 */ matchImageCaptionViewElement(element) {
         const imageUtils = this.editor.plugins.get('ImageUtils');
         // Convert only captions for images.
         if (element.name == 'figcaption' && imageUtils.isBlockImageView(element.parent)) {
@@ -2271,10 +2492,34 @@ class ImageCaptionUtils extends Plugin {
     }
 }
 
-class ToggleImageCaptionCommand extends Command {
+/**
+ * The toggle image caption command.
+ *
+ * This command is registered by {@link module:image/imagecaption/imagecaptionediting~ImageCaptionEditing} as the
+ * `'toggleImageCaption'` editor command.
+ *
+ * Executing this command:
+ *
+ * * either adds or removes the image caption of a selected image (depending on whether the caption is present or not),
+ * * removes the image caption if the selection is anchored in one.
+ *
+ * ```ts
+ * // Toggle the presence of the caption.
+ * editor.execute( 'toggleImageCaption' );
+ * ```
+ *
+ * **Note**: Upon executing this command, the selection will be set on the image if previously anchored in the caption element.
+ *
+ * **Note**: You can move the selection to the caption right away as it shows up upon executing this command by using
+ * the `focusCaptionOnShow` option:
+ *
+ * ```ts
+ * editor.execute( 'toggleImageCaption', { focusCaptionOnShow: true } );
+ * ```
+ */ class ToggleImageCaptionCommand extends Command {
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ refresh() {
         const editor = this.editor;
         const imageCaptionUtils = editor.plugins.get('ImageCaptionUtils');
         const imageUtils = editor.plugins.get('ImageUtils');
@@ -2302,16 +2547,16 @@ class ToggleImageCaptionCommand extends Command {
         }
     }
     /**
-     * Executes the command.
-     *
-     * ```ts
-     * editor.execute( 'toggleImageCaption' );
-     * ```
-     *
-     * @param options Options for the executed command.
-     * @param options.focusCaptionOnShow When true and the caption shows up, the selection will be moved into it straight away.
-     * @fires execute
-     */ execute(options = {}) {
+	 * Executes the command.
+	 *
+	 * ```ts
+	 * editor.execute( 'toggleImageCaption' );
+	 * ```
+	 *
+	 * @param options Options for the executed command.
+	 * @param options.focusCaptionOnShow When true and the caption shows up, the selection will be moved into it straight away.
+	 * @fires execute
+	 */ execute(options = {}) {
         const { focusCaptionOnShow } = options;
         this.editor.model.change((writer)=>{
             if (this.value) {
@@ -2322,12 +2567,12 @@ class ToggleImageCaptionCommand extends Command {
         });
     }
     /**
-     * Shows the caption of the `<imageBlock>` or `<imageInline>`. Also:
-     *
-     * * it converts `<imageInline>` to `<imageBlock>` to show the caption,
-     * * it attempts to restore the caption content from the `ImageCaptionEditing` caption registry,
-     * * it moves the selection to the caption right away, it the `focusCaptionOnShow` option was set.
-     */ _showImageCaption(writer, focusCaptionOnShow) {
+	 * Shows the caption of the `<imageBlock>` or `<imageInline>`. Also:
+	 *
+	 * * it converts `<imageInline>` to `<imageBlock>` to show the caption,
+	 * * it attempts to restore the caption content from the `ImageCaptionEditing` caption registry,
+	 * * it moves the selection to the caption right away, it the `focusCaptionOnShow` option was set.
+	 */ _showImageCaption(writer, focusCaptionOnShow) {
         const model = this.editor.model;
         const selection = model.document.selection;
         const imageCaptionEditing = this.editor.plugins.get('ImageCaptionEditing');
@@ -2348,11 +2593,11 @@ class ToggleImageCaptionCommand extends Command {
         }
     }
     /**
-     * Hides the caption of a selected image (or an image caption the selection is anchored to).
-     *
-     * The content of the caption is stored in the `ImageCaptionEditing` caption registry to make this
-     * a reversible action.
-     */ _hideImageCaption(writer) {
+	 * Hides the caption of a selected image (or an image caption the selection is anchored to).
+	 *
+	 * The content of the caption is stored in the `ImageCaptionEditing` caption registry to make this
+	 * a reversible action.
+	 */ _hideImageCaption(writer) {
         const editor = this.editor;
         const selection = editor.model.document.selection;
         const imageCaptionEditing = editor.plugins.get('ImageCaptionEditing');
@@ -2372,23 +2617,41 @@ class ToggleImageCaptionCommand extends Command {
     }
 }
 
-class ImageCaptionEditing extends Plugin {
+/**
+ * The image caption engine plugin. It is responsible for:
+ *
+ * * registering converters for the caption element,
+ * * registering converters for the caption model attribute,
+ * * registering the {@link module:image/imagecaption/toggleimagecaptioncommand~ToggleImageCaptionCommand `toggleImageCaption`} command.
+ */ class ImageCaptionEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUtils,
             ImageCaptionUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageCaptionEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * A map that keeps saved JSONified image captions and image model elements they are
+	 * associated with.
+	 *
+	 * To learn more about this system, see {@link #_saveCaption}.
+	 */ _savedCaptionsMap;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this._savedCaptionsMap = new WeakMap();
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const schema = editor.model.schema;
         // Schema configuration.
@@ -2409,9 +2672,9 @@ class ImageCaptionEditing extends Plugin {
         this._registerCaptionReconversion();
     }
     /**
-     * Configures conversion pipelines to support upcasting and downcasting
-     * image captions.
-     */ _setupConversion() {
+	 * Configures conversion pipelines to support upcasting and downcasting
+	 * image captions.
+	 */ _setupConversion() {
         const editor = this.editor;
         const view = editor.editing.view;
         const imageUtils = editor.plugins.get('ImageUtils');
@@ -2458,10 +2721,10 @@ class ImageCaptionEditing extends Plugin {
         });
     }
     /**
-     * Integrates with {@link module:image/image/imagetypecommand~ImageTypeCommand image type commands}
-     * to make sure the caption is preserved when the type of an image changes so it can be restored
-     * in the future if the user decides they want their caption back.
-     */ _setupImageTypeCommandsIntegration() {
+	 * Integrates with {@link module:image/image/imagetypecommand~ImageTypeCommand image type commands}
+	 * to make sure the caption is preserved when the type of an image changes so it can be restored
+	 * in the future if the user decides they want their caption back.
+	 */ _setupImageTypeCommandsIntegration() {
         const editor = this.editor;
         const imageUtils = editor.plugins.get('ImageUtils');
         const imageCaptionUtils = editor.plugins.get('ImageCaptionUtils');
@@ -2513,42 +2776,42 @@ class ImageCaptionEditing extends Plugin {
         }
     }
     /**
-     * Returns the saved {@link module:engine/model/element~Element#toJSON JSONified} caption
-     * of an image model element.
-     *
-     * See {@link #_saveCaption}.
-     *
-     * @internal
-     * @param imageModelElement The model element the caption should be returned for.
-     * @returns The model caption element or `null` if there is none.
-     */ _getSavedCaption(imageModelElement) {
+	 * Returns the saved {@link module:engine/model/element~Element#toJSON JSONified} caption
+	 * of an image model element.
+	 *
+	 * See {@link #_saveCaption}.
+	 *
+	 * @internal
+	 * @param imageModelElement The model element the caption should be returned for.
+	 * @returns The model caption element or `null` if there is none.
+	 */ _getSavedCaption(imageModelElement) {
         const jsonObject = this._savedCaptionsMap.get(imageModelElement);
         return jsonObject ? Element.fromJSON(jsonObject) : null;
     }
     /**
-     * Saves a {@link module:engine/model/element~Element#toJSON JSONified} caption for
-     * an image element to allow restoring it in the future.
-     *
-     * A caption is saved every time it gets hidden and/or the type of an image changes. The
-     * user should be able to restore it on demand.
-     *
-     * **Note**: The caption cannot be stored in the image model element attribute because,
-     * for instance, when the model state propagates to collaborators, the attribute would get
-     * lost (mainly because it does not convert to anything when the caption is hidden) and
-     * the states of collaborators' models would de-synchronize causing numerous issues.
-     *
-     * See {@link #_getSavedCaption}.
-     *
-     * @internal
-     * @param imageModelElement The model element the caption is saved for.
-     * @param caption The caption model element to be saved.
-     */ _saveCaption(imageModelElement, caption) {
+	 * Saves a {@link module:engine/model/element~Element#toJSON JSONified} caption for
+	 * an image element to allow restoring it in the future.
+	 *
+	 * A caption is saved every time it gets hidden and/or the type of an image changes. The
+	 * user should be able to restore it on demand.
+	 *
+	 * **Note**: The caption cannot be stored in the image model element attribute because,
+	 * for instance, when the model state propagates to collaborators, the attribute would get
+	 * lost (mainly because it does not convert to anything when the caption is hidden) and
+	 * the states of collaborators' models would de-synchronize causing numerous issues.
+	 *
+	 * See {@link #_getSavedCaption}.
+	 *
+	 * @internal
+	 * @param imageModelElement The model element the caption is saved for.
+	 * @param caption The caption model element to be saved.
+	 */ _saveCaption(imageModelElement, caption) {
         this._savedCaptionsMap.set(imageModelElement, caption.toJSON());
     }
     /**
-     * Reconverts image caption when image alt attribute changes.
-     * The change of alt attribute is reflected in caption's aria-label attribute.
-     */ _registerCaptionReconversion() {
+	 * Reconverts image caption when image alt attribute changes.
+	 * The change of alt attribute is reflected in caption's aria-label attribute.
+	 */ _registerCaptionReconversion() {
         const editor = this.editor;
         const model = editor.model;
         const imageUtils = editor.plugins.get('ImageUtils');
@@ -2570,30 +2833,26 @@ class ImageCaptionEditing extends Plugin {
             }
         });
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        this._savedCaptionsMap = new WeakMap();
-    }
 }
 
-class ImageCaptionUI extends Plugin {
+/**
+ * The image caption UI plugin. It introduces the `'toggleImageCaption'` UI button.
+ */ class ImageCaptionUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageCaptionUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageCaptionUI';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const editingView = editor.editing.view;
         const imageCaptionUtils = editor.plugins.get('ImageCaptionUtils');
@@ -2628,18 +2887,22 @@ class ImageCaptionUI extends Plugin {
     }
 }
 
-class ImageCaption extends Plugin {
+/**
+ * The image caption plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/images-captions image caption} documentation.
+ */ class ImageCaption extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageCaptionEditing,
             ImageCaptionUI
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageCaption';
     }
 }
@@ -2746,58 +3009,45 @@ class ImageCaption extends Plugin {
     });
 }
 
-class ImageUploadUI extends Plugin {
+/**
+ * The image upload button plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature} documentation.
+ *
+ * Adds the `'uploadImage'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
+ * and also the `imageUpload` button as an alias for backward compatibility.
+ *
+ * Adds the `'menuBar:uploadImage'` menu button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
+ *
+ * It also integrates with the `insertImage` toolbar component and `menuBar:insertImage` menu component, which are the default components
+ * through which image upload is available.
+ */ class ImageUploadUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageUploadUI';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
-        const t = editor.t;
-        const toolbarComponentCreator = ()=>{
-            const button = this._createButton(FileDialogButtonView);
-            button.set({
-                label: t('Upload image from computer'),
-                tooltip: true
-            });
-            return button;
-        };
         // Setup `uploadImage` button and add `imageUpload` button as an alias for backward compatibility.
-        editor.ui.componentFactory.add('uploadImage', toolbarComponentCreator);
-        editor.ui.componentFactory.add('imageUpload', toolbarComponentCreator);
-        editor.ui.componentFactory.add('menuBar:uploadImage', ()=>{
-            const button = this._createButton(MenuBarMenuListItemFileDialogButtonView);
-            button.label = t('Image from computer');
-            return button;
-        });
+        editor.ui.componentFactory.add('uploadImage', ()=>this._createToolbarButton());
+        editor.ui.componentFactory.add('imageUpload', ()=>this._createToolbarButton());
+        editor.ui.componentFactory.add('menuBar:uploadImage', ()=>this._createMenuBarButton('standalone'));
         if (editor.plugins.has('ImageInsertUI')) {
-            const imageInsertUI = editor.plugins.get('ImageInsertUI');
-            imageInsertUI.registerIntegration({
+            editor.plugins.get('ImageInsertUI').registerIntegration({
                 name: 'upload',
                 observable: ()=>editor.commands.get('uploadImage'),
-                buttonViewCreator: ()=>{
-                    const uploadImageButton = editor.ui.componentFactory.create('uploadImage');
-                    uploadImageButton.bind('label').to(imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Replace image from computer') : t('Upload image from computer'));
-                    return uploadImageButton;
-                },
-                formViewCreator: ()=>{
-                    const uploadImageButton = editor.ui.componentFactory.create('uploadImage');
-                    uploadImageButton.withText = true;
-                    uploadImageButton.bind('label').to(imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Replace from computer') : t('Upload from computer'));
-                    uploadImageButton.on('execute', ()=>{
-                        imageInsertUI.dropdownView.isOpen = false;
-                    });
-                    return uploadImageButton;
-                }
+                buttonViewCreator: ()=>this._createToolbarButton(),
+                formViewCreator: ()=>this._createDropdownButton(),
+                menuBarButtonViewCreator: (isOnly)=>this._createMenuBarButton(isOnly ? 'insertOnly' : 'insertNested')
             });
         }
     }
     /**
-     * Creates a button for image upload command to use either in toolbar or in menu bar.
-     */ _createButton(ButtonClass) {
+	 * Creates the base for various kinds of the button component provided by this feature.
+	 */ _createButton(ButtonClass) {
         const editor = this.editor;
         const locale = editor.locale;
         const command = editor.commands.get('uploadImage');
@@ -2808,7 +3058,7 @@ class ImageUploadUI extends Plugin {
         view.set({
             acceptedType: imageTypes.map((type)=>`image/${type}`).join(','),
             allowMultipleFiles: true,
-            label: t('Upload image from computer'),
+            label: t('Upload from computer'),
             icon: icons.imageUpload
         });
         view.bind('isEnabled').to(command);
@@ -2823,17 +3073,73 @@ class ImageUploadUI extends Plugin {
         });
         return view;
     }
+    /**
+	 * Creates a simple toolbar button, with an icon and a tooltip.
+	 */ _createToolbarButton() {
+        const t = this.editor.locale.t;
+        const imageInsertUI = this.editor.plugins.get('ImageInsertUI');
+        const button = this._createButton(FileDialogButtonView);
+        button.tooltip = true;
+        button.bind('label').to(imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Replace image from computer') : t('Upload image from computer'));
+        return button;
+    }
+    /**
+	 * Creates a button for the dropdown view, with an icon, text and no tooltip.
+	 */ _createDropdownButton() {
+        const t = this.editor.locale.t;
+        const imageInsertUI = this.editor.plugins.get('ImageInsertUI');
+        const button = this._createButton(FileDialogButtonView);
+        button.withText = true;
+        button.bind('label').to(imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Replace from computer') : t('Upload from computer'));
+        button.on('execute', ()=>{
+            imageInsertUI.dropdownView.isOpen = false;
+        });
+        return button;
+    }
+    /**
+	 * Creates a button for the menu bar.
+	 */ _createMenuBarButton(type) {
+        const t = this.editor.locale.t;
+        const button = this._createButton(MenuBarMenuListItemFileDialogButtonView);
+        button.withText = true;
+        switch(type){
+            case 'standalone':
+                button.label = t('Image from computer');
+                break;
+            case 'insertOnly':
+                button.label = t('Image');
+                break;
+            case 'insertNested':
+                button.label = t('From computer');
+                break;
+        }
+        return button;
+    }
 }
 
-class ImageUploadProgress extends Plugin {
+/**
+ * The image upload progress plugin.
+ * It shows a placeholder when the image is read from the disk and a progress bar while the image is uploading.
+ */ class ImageUploadProgress extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageUploadProgress';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * The image placeholder that is displayed before real image data can be accessed.
+	 *
+	 * For the record, this image is a 1x1 px GIF with an aspect ratio set by CSS.
+	 */ placeholder;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this.placeholder = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         // Upload status change - update image's view according to that status.
         if (editor.plugins.has('ImageBlockEditing')) {
@@ -2844,62 +3150,56 @@ class ImageUploadProgress extends Plugin {
         }
     }
     /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        /**
-         * This method is called each time the image `uploadStatus` attribute is changed.
-         *
-         * @param evt An object containing information about the fired event.
-         * @param data Additional information about the change.
-         */ this.uploadStatusChange = (evt, data, conversionApi)=>{
-            const editor = this.editor;
-            const modelImage = data.item;
-            const uploadId = modelImage.getAttribute('uploadId');
-            if (!conversionApi.consumable.consume(data.item, evt.name)) {
-                return;
-            }
-            const imageUtils = editor.plugins.get('ImageUtils');
-            const fileRepository = editor.plugins.get(FileRepository);
-            const status = uploadId ? data.attributeNewValue : null;
-            const placeholder = this.placeholder;
-            const viewFigure = editor.editing.mapper.toViewElement(modelImage);
-            const viewWriter = conversionApi.writer;
-            if (status == 'reading') {
-                // Start "appearing" effect and show placeholder with infinite progress bar on the top
-                // while image is read from disk.
-                _startAppearEffect(viewFigure, viewWriter);
+	 * This method is called each time the image `uploadStatus` attribute is changed.
+	 *
+	 * @param evt An object containing information about the fired event.
+	 * @param data Additional information about the change.
+	 */ uploadStatusChange = (evt, data, conversionApi)=>{
+        const editor = this.editor;
+        const modelImage = data.item;
+        const uploadId = modelImage.getAttribute('uploadId');
+        if (!conversionApi.consumable.consume(data.item, evt.name)) {
+            return;
+        }
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const fileRepository = editor.plugins.get(FileRepository);
+        const status = uploadId ? data.attributeNewValue : null;
+        const placeholder = this.placeholder;
+        const viewFigure = editor.editing.mapper.toViewElement(modelImage);
+        const viewWriter = conversionApi.writer;
+        if (status == 'reading') {
+            // Start "appearing" effect and show placeholder with infinite progress bar on the top
+            // while image is read from disk.
+            _startAppearEffect(viewFigure, viewWriter);
+            _showPlaceholder(imageUtils, placeholder, viewFigure, viewWriter);
+            return;
+        }
+        // Show progress bar on the top of the image when image is uploading.
+        if (status == 'uploading') {
+            const loader = fileRepository.loaders.get(uploadId);
+            // Start appear effect if needed - see https://github.com/ckeditor/ckeditor5-image/issues/191.
+            _startAppearEffect(viewFigure, viewWriter);
+            if (!loader) {
+                // There is no loader associated with uploadId - this means that image came from external changes.
+                // In such cases we still want to show the placeholder until image is fully uploaded.
+                // Show placeholder if needed - see https://github.com/ckeditor/ckeditor5-image/issues/191.
                 _showPlaceholder(imageUtils, placeholder, viewFigure, viewWriter);
-                return;
-            }
-            // Show progress bar on the top of the image when image is uploading.
-            if (status == 'uploading') {
-                const loader = fileRepository.loaders.get(uploadId);
-                // Start appear effect if needed - see https://github.com/ckeditor/ckeditor5-image/issues/191.
-                _startAppearEffect(viewFigure, viewWriter);
-                if (!loader) {
-                    // There is no loader associated with uploadId - this means that image came from external changes.
-                    // In such cases we still want to show the placeholder until image is fully uploaded.
-                    // Show placeholder if needed - see https://github.com/ckeditor/ckeditor5-image/issues/191.
-                    _showPlaceholder(imageUtils, placeholder, viewFigure, viewWriter);
-                } else {
-                    // Hide placeholder and initialize progress bar showing upload progress.
-                    _hidePlaceholder(viewFigure, viewWriter);
-                    _showProgressBar(viewFigure, viewWriter, loader, editor.editing.view);
-                    _displayLocalImage(imageUtils, viewFigure, viewWriter, loader);
-                }
-                return;
-            }
-            if (status == 'complete' && fileRepository.loaders.get(uploadId)) {
-                _showCompleteIcon(viewFigure, viewWriter, editor.editing.view);
+            } else {
+                // Hide placeholder and initialize progress bar showing upload progress.
+                _hidePlaceholder(viewFigure, viewWriter);
+                _showProgressBar(viewFigure, viewWriter, loader, editor.editing.view);
+                _displayLocalImage(imageUtils, viewFigure, viewWriter, loader);
             }
-            // Clean up.
-            _hideProgressBar(viewFigure, viewWriter);
-            _hidePlaceholder(viewFigure, viewWriter);
-            _stopAppearEffect(viewFigure, viewWriter);
-        };
-        this.placeholder = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-    }
+            return;
+        }
+        if (status == 'complete' && fileRepository.loaders.get(uploadId)) {
+            _showCompleteIcon(viewFigure, viewWriter, editor.editing.view);
+        }
+        // Clean up.
+        _hideProgressBar(viewFigure, viewWriter);
+        _hidePlaceholder(viewFigure, viewWriter);
+        _stopAppearEffect(viewFigure, viewWriter);
+    };
 }
 /**
  * Adds ck-appear class to the image figure if one is not already applied.
@@ -3009,10 +3309,42 @@ class ImageUploadProgress extends Plugin {
     }
 }
 
-class UploadImageCommand extends Command {
+/**
+ * @module image/imageupload/uploadimagecommand
+ */ /**
+ * The upload image command.
+ *
+ * The command is registered by the {@link module:image/imageupload/imageuploadediting~ImageUploadEditing} plugin as `uploadImage`
+ * and it is also available via aliased `imageUpload` name.
+ *
+ * In order to upload an image at the current selection position
+ * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
+ * execute the command and pass the native image file instance:
+ *
+ * ```ts
+ * this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
+ * 	// Assuming that only images were pasted:
+ * 	const images = Array.from( data.dataTransfer.files );
+ *
+ * 	// Upload the first image:
+ * 	editor.execute( 'uploadImage', { file: images[ 0 ] } );
+ * } );
+ * ```
+ *
+ * It is also possible to insert multiple images at once:
+ *
+ * ```ts
+ * editor.execute( 'uploadImage', {
+ * 	file: [
+ * 		file1,
+ * 		file2
+ * 	]
+ * } );
+ * ```
+ */ class UploadImageCommand extends Command {
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ refresh() {
         const editor = this.editor;
         const imageUtils = editor.plugins.get('ImageUtils');
         const selectedElement = editor.model.document.selection.getSelectedElement();
@@ -3020,12 +3352,12 @@ class UploadImageCommand extends Command {
         this.isEnabled = imageUtils.isImageAllowed() || imageUtils.isImage(selectedElement);
     }
     /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options Options for the executed command.
-     * @param options.file The image file or an array of image files to upload.
-     */ execute(options) {
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param options Options for the executed command.
+	 * @param options.file The image file or an array of image files to upload.
+	 */ execute(options) {
         const files = toArray(options.file);
         const selection = this.editor.model.document.selection;
         const imageUtils = this.editor.plugins.get('ImageUtils');
@@ -3051,8 +3383,8 @@ class UploadImageCommand extends Command {
         });
     }
     /**
-     * Handles uploading single file.
-     */ _uploadImage(file, attributes, position) {
+	 * Handles uploading single file.
+	 */ _uploadImage(file, attributes, position) {
         const editor = this.editor;
         const fileRepository = editor.plugins.get(FileRepository);
         const loader = fileRepository.createLoader(file);
@@ -3068,10 +3400,16 @@ class UploadImageCommand extends Command {
     }
 }
 
-class ImageUploadEditing extends Plugin {
+/**
+ * The editing part of the image upload feature. It registers the `'uploadImage'` command
+ * and the `imageUpload` command as an aliased name.
+ *
+ * When an image is uploaded, it fires the {@link ~ImageUploadEditing#event:uploadComplete `uploadComplete`} event
+ * that allows adding custom attributes to the {@link module:engine/model/element~Element image element}.
+ */ class ImageUploadEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             FileRepository,
             Notification,
@@ -3083,8 +3421,35 @@ class ImageUploadEditing extends Plugin {
         return 'ImageUploadEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * An internal mapping of {@link module:upload/filerepository~FileLoader#id file loader UIDs} and
+	 * model elements during the upload.
+	 *
+	 * Model element of the uploaded image can change, for instance, when {@link module:image/image/imagetypecommand~ImageTypeCommand}
+	 * is executed as a result of adding caption or changing image style. As a result, the upload logic must keep track of the model
+	 * element (reference) and resolve the upload for the correct model element (instead of the one that landed in the `$graveyard`
+	 * after image type changed).
+	 */ _uploadImageElements;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        editor.config.define('image', {
+            upload: {
+                types: [
+                    'jpeg',
+                    'png',
+                    'gif',
+                    'bmp',
+                    'webp',
+                    'tiff'
+                ]
+            }
+        });
+        this._uploadImageElements = new Map();
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const doc = editor.model.document;
         const conversion = editor.conversion;
@@ -3227,8 +3592,8 @@ class ImageUploadEditing extends Plugin {
         });
     }
     /**
-     * @inheritDoc
-     */ afterInit() {
+	 * @inheritDoc
+	 */ afterInit() {
         const schema = this.editor.model.schema;
         // Setup schema to allow uploadId and uploadStatus for images.
         // Wait for ImageBlockEditing or ImageInlineEditing to register their elements first,
@@ -3251,12 +3616,12 @@ class ImageUploadEditing extends Plugin {
         }
     }
     /**
-     * Reads and uploads an image.
-     *
-     * The image is read from the disk and as a Base64-encoded string it is set temporarily to
-     * `image[src]`. When the image is successfully uploaded, the temporary data is replaced with the target
-     * image's URL (the URL to the uploaded image on the server).
-     */ _readAndUpload(loader) {
+	 * Reads and uploads an image.
+	 *
+	 * The image is read from the disk and as a Base64-encoded string it is set temporarily to
+	 * `image[src]`. When the image is successfully uploaded, the temporary data is replaced with the target
+	 * image's URL (the URL to the uploaded image on the server).
+	 */ _readAndUpload(loader) {
         const editor = this.editor;
         const model = editor.model;
         const t = editor.locale.t;
@@ -3355,11 +3720,11 @@ class ImageUploadEditing extends Plugin {
         }
     }
     /**
-     * Creates the `srcset` attribute based on a given file upload response and sets it as an attribute to a specific image element.
-     *
-     * @param data Data object from which `srcset` will be created.
-     * @param image The image element on which the `srcset` attribute will be set.
-     */ _parseAndSetSrcsetAttributeOnImage(data, image, writer) {
+	 * Creates the `srcset` attribute based on a given file upload response and sets it as an attribute to a specific image element.
+	 *
+	 * @param data Data object from which `srcset` will be created.
+	 * @param image The image element on which the `srcset` attribute will be set.
+	 */ _parseAndSetSrcsetAttributeOnImage(data, image, writer) {
         // Srcset attribute for responsive images support.
         let maxWidth = 0;
         const srcsetAttribute = Object.keys(data)// Filter out keys that are not integers.
@@ -3382,24 +3747,6 @@ class ImageUploadEditing extends Plugin {
             writer.setAttributes(attributes, image);
         }
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        editor.config.define('image', {
-            upload: {
-                types: [
-                    'jpeg',
-                    'png',
-                    'gif',
-                    'bmp',
-                    'webp',
-                    'tiff'
-                ]
-            }
-        });
-        this._uploadImageElements = new Map();
-    }
 }
 /**
  * Returns `true` if non-empty `text/html` is included in the data transfer.
@@ -3411,15 +3758,25 @@ function getImagesFromChangeItem(editor, item) {
     return Array.from(editor.model.createRangeOn(item)).filter((value)=>imageUtils.isImage(value.item)).map((value)=>value.item);
 }
 
-class ImageUpload extends Plugin {
+/**
+ * The image upload plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload image upload feature} documentation.
+ *
+ * This plugin does not do anything directly, but it loads a set of specific plugins to enable image uploading:
+ *
+ * * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing},
+ * * {@link module:image/imageupload/imageuploadui~ImageUploadUI},
+ * * {@link module:image/imageupload/imageuploadprogress~ImageUploadProgress}.
+ */ class ImageUpload extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageUpload';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUploadEditing,
             ImageUploadUI,
@@ -3428,112 +3785,28 @@ class ImageUpload extends Plugin {
     }
 }
 
-class ImageInsertUrlView extends View {
-    /**
-     * @inheritDoc
-     */ render() {
-        super.render();
-        for (const view of this._focusables){
-            this.focusTracker.add(view.element);
-        }
-        // Start listening for the keystrokes coming from #element.
-        this.keystrokes.listenTo(this.element);
-    }
-    /**
-     * @inheritDoc
-     */ destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * Creates the {@link #urlInputView}.
-     */ _createUrlInputView() {
-        const locale = this.locale;
-        const t = locale.t;
-        const urlInputView = new LabeledFieldView(locale, createLabeledInputText);
-        urlInputView.bind('label').to(this, 'isImageSelected', (value)=>value ? t('Update image URL') : t('Insert image via URL'));
-        urlInputView.bind('isEnabled').to(this);
-        urlInputView.fieldView.placeholder = 'https://example.com/image.png';
-        urlInputView.fieldView.bind('value').to(this, 'imageURLInputValue', (value)=>value || '');
-        urlInputView.fieldView.on('input', ()=>{
-            this.imageURLInputValue = urlInputView.fieldView.element.value.trim();
-        });
-        return urlInputView;
-    }
-    /**
-     * Creates the {@link #insertButtonView}.
-     */ _createInsertButton() {
-        const locale = this.locale;
-        const t = locale.t;
-        const insertButtonView = new ButtonView(locale);
-        insertButtonView.set({
-            icon: icons.check,
-            class: 'ck-button-save',
-            type: 'submit',
-            withText: true
-        });
-        insertButtonView.bind('label').to(this, 'isImageSelected', (value)=>value ? t('Update') : t('Insert'));
-        insertButtonView.bind('isEnabled').to(this, 'imageURLInputValue', this, 'isEnabled', (...values)=>values.every((value)=>value));
-        insertButtonView.delegate('execute').to(this, 'submit');
-        return insertButtonView;
-    }
+/**
+ * The insert an image via URL view.
+ *
+ * See {@link module:image/imageinsert/imageinsertviaurlui~ImageInsertViaUrlUI}.
+ */ class ImageInsertUrlView extends View {
     /**
-     * Creates the {@link #cancelButtonView}.
-     */ _createCancelButton() {
-        const locale = this.locale;
-        const t = locale.t;
-        const cancelButtonView = new ButtonView(locale);
-        cancelButtonView.set({
-            label: t('Cancel'),
-            icon: icons.cancel,
-            class: 'ck-button-cancel',
-            withText: true
-        });
-        cancelButtonView.bind('isEnabled').to(this);
-        cancelButtonView.delegate('execute').to(this, 'cancel');
-        return cancelButtonView;
-    }
+	 * The URL input field view.
+	 */ urlInputView;
     /**
-     * Focuses the view.
-     */ focus(direction) {
-        if (direction === -1) {
-            this.focusCycler.focusLast();
-        } else {
-            this.focusCycler.focusFirst();
-        }
-    }
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
     /**
-     * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
-     *
-     * @param locale The localization services instance.
-     */ constructor(locale){
+	 * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
+	 *
+	 * @param locale The localization services instance.
+	 */ constructor(locale){
         super(locale);
         this.set('imageURLInputValue', '');
         this.set('isImageSelected', false);
         this.set('isEnabled', true);
-        this.focusTracker = new FocusTracker();
         this.keystrokes = new KeystrokeHandler();
-        this._focusables = new ViewCollection();
-        this.focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate form fields backwards using the Shift + Tab keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate form fields forwards using the Tab key.
-                focusNext: 'tab'
-            }
-        });
         this.urlInputView = this._createUrlInputView();
-        this.insertButtonView = this._createInsertButton();
-        this.cancelButtonView = this._createCancelButton();
-        this._focusables.addMany([
-            this.urlInputView,
-            this.insertButtonView,
-            this.cancelButtonView
-        ]);
         this.setTemplate({
             tag: 'div',
             attributes: {
@@ -3551,131 +3824,222 @@ class ImageInsertUrlView extends View {
                             'ck',
                             'ck-image-insert-url__action-row'
                         ]
-                    },
-                    children: [
-                        this.insertButtonView,
-                        this.cancelButtonView
-                    ]
+                    }
                 }
             ]
         });
     }
+    /**
+	 * @inheritDoc
+	 */ render() {
+        super.render();
+        // Start listening for the keystrokes coming from #element.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        this.keystrokes.destroy();
+    }
+    /**
+	 * Creates the {@link #urlInputView}.
+	 */ _createUrlInputView() {
+        const locale = this.locale;
+        const t = locale.t;
+        const urlInputView = new LabeledFieldView(locale, createLabeledInputText);
+        urlInputView.bind('label').to(this, 'isImageSelected', (value)=>value ? t('Update image URL') : t('Insert image via URL'));
+        urlInputView.bind('isEnabled').to(this);
+        urlInputView.fieldView.inputMode = 'url';
+        urlInputView.fieldView.placeholder = 'https://example.com/image.png';
+        urlInputView.fieldView.bind('value').to(this, 'imageURLInputValue', (value)=>value || '');
+        urlInputView.fieldView.on('input', ()=>{
+            this.imageURLInputValue = urlInputView.fieldView.element.value.trim();
+        });
+        return urlInputView;
+    }
+    /**
+	 * Focuses the view.
+	 */ focus() {
+        this.urlInputView.focus();
+    }
 }
 
-class ImageInsertViaUrlUI extends Plugin {
-    /**
-     * @inheritDoc
-     */ static get pluginName() {
+/**
+ * The image insert via URL plugin (UI part).
+ *
+ * The plugin introduces two UI components to the {@link module:ui/componentfactory~ComponentFactory UI component factory}:
+ *
+ * * the `'insertImageViaUrl'` toolbar button,
+ * * the `'menuBar:insertImageViaUrl'` menu bar component.
+ *
+ * It also integrates with the `insertImage` toolbar component and `menuBar:insertImage` menu component, which are default components
+ * through which inserting image via URL is available.
+ */ class ImageInsertViaUrlUI extends Plugin {
+    _imageInsertUI;
+    _formView;
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageInsertViaUrlUI';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
-            ImageInsertUI
+            ImageInsertUI,
+            Dialog
         ];
     }
+    init() {
+        this.editor.ui.componentFactory.add('insertImageViaUrl', ()=>this._createToolbarButton());
+        this.editor.ui.componentFactory.add('menuBar:insertImageViaUrl', ()=>this._createMenuBarButton('standalone'));
+    }
     /**
-     * @inheritDoc
-     */ afterInit() {
+	 * @inheritDoc
+	 */ afterInit() {
         this._imageInsertUI = this.editor.plugins.get('ImageInsertUI');
         this._imageInsertUI.registerIntegration({
             name: 'url',
             observable: ()=>this.editor.commands.get('insertImage'),
-            requiresForm: true,
-            buttonViewCreator: (isOnlyOne)=>this._createInsertUrlButton(isOnlyOne),
-            formViewCreator: (isOnlyOne)=>this._createInsertUrlView(isOnlyOne)
+            buttonViewCreator: ()=>this._createToolbarButton(),
+            formViewCreator: ()=>this._createDropdownButton(),
+            menuBarButtonViewCreator: (isOnly)=>this._createMenuBarButton(isOnly ? 'insertOnly' : 'insertNested')
+        });
+    }
+    /**
+	 * Creates the base for various kinds of the button component provided by this feature.
+	 */ _createInsertUrlButton(ButtonClass) {
+        const button = new ButtonClass(this.editor.locale);
+        button.icon = icons.imageUrl;
+        button.on('execute', ()=>{
+            this._showModal();
         });
+        return button;
+    }
+    /**
+	 * Creates a simple toolbar button, with an icon and a tooltip.
+	 */ _createToolbarButton() {
+        const t = this.editor.locale.t;
+        const button = this._createInsertUrlButton(ButtonView);
+        button.tooltip = true;
+        button.bind('label').to(this._imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Update image URL') : t('Insert image via URL'));
+        return button;
+    }
+    /**
+	 * Creates a button for the dropdown view, with an icon, text and no tooltip.
+	 */ _createDropdownButton() {
+        const t = this.editor.locale.t;
+        const button = this._createInsertUrlButton(ButtonView);
+        button.withText = true;
+        button.bind('label').to(this._imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Update image URL') : t('Insert via URL'));
+        return button;
+    }
+    /**
+	 * Creates a button for the menu bar.
+	 */ _createMenuBarButton(type) {
+        const t = this.editor.locale.t;
+        const button = this._createInsertUrlButton(MenuBarMenuListItemButtonView);
+        button.withText = true;
+        switch(type){
+            case 'standalone':
+                button.label = t('Image via URL');
+                break;
+            case 'insertOnly':
+                button.label = t('Image');
+                break;
+            case 'insertNested':
+                button.label = t('Via URL');
+                break;
+        }
+        return button;
     }
     /**
-     * Creates the view displayed in the dropdown.
-     */ _createInsertUrlView(isOnlyOne) {
+	 * Creates the form view used to submit the image URL.
+	 */ _createInsertUrlView() {
         const editor = this.editor;
         const locale = editor.locale;
-        const t = locale.t;
         const replaceImageSourceCommand = editor.commands.get('replaceImageSource');
         const insertImageCommand = editor.commands.get('insertImage');
         const imageInsertUrlView = new ImageInsertUrlView(locale);
-        const collapsibleView = isOnlyOne ? null : new CollapsibleView(locale, [
-            imageInsertUrlView
-        ]);
         imageInsertUrlView.bind('isImageSelected').to(this._imageInsertUI);
         imageInsertUrlView.bind('isEnabled').toMany([
             insertImageCommand,
             replaceImageSourceCommand
         ], 'isEnabled', (...isEnabled)=>isEnabled.some((isCommandEnabled)=>isCommandEnabled));
-        // Set initial value because integrations are created on first dropdown open.
-        imageInsertUrlView.imageURLInputValue = replaceImageSourceCommand.value || '';
-        this._imageInsertUI.dropdownView.on('change:isOpen', ()=>{
-            if (this._imageInsertUI.dropdownView.isOpen) {
-                // Make sure that each time the panel shows up, the URL field remains in sync with the value of
-                // the command. If the user typed in the input, then canceled and re-opened it without changing
-                // the value of the media command (e.g. because they didn't change the selection), they would see
-                // the old value instead of the actual value of the command.
-                imageInsertUrlView.imageURLInputValue = replaceImageSourceCommand.value || '';
-                if (collapsibleView) {
-                    collapsibleView.isCollapsed = true;
-                }
-            }
-        // Note: Use the low priority to make sure the following listener starts working after the
-        // default action of the drop-down is executed (i.e. the panel showed up). Otherwise, the
-        // invisible form/input cannot be focused/selected.
-        }, {
-            priority: 'low'
-        });
-        imageInsertUrlView.on('submit', ()=>{
-            if (replaceImageSourceCommand.isEnabled) {
-                editor.execute('replaceImageSource', {
-                    source: imageInsertUrlView.imageURLInputValue
-                });
-            } else {
-                editor.execute('insertImage', {
-                    source: imageInsertUrlView.imageURLInputValue
-                });
-            }
-            this._closePanel();
-        });
-        imageInsertUrlView.on('cancel', ()=>this._closePanel());
-        if (collapsibleView) {
-            collapsibleView.set({
-                isCollapsed: true
-            });
-            collapsibleView.bind('label').to(this._imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Update image URL') : t('Insert image via URL'));
-            return collapsibleView;
-        }
         return imageInsertUrlView;
     }
     /**
-     * Creates the toolbar button.
-     */ _createInsertUrlButton(isOnlyOne) {
-        const ButtonClass = isOnlyOne ? DropdownButtonView : ButtonView;
+	 * Shows the insert image via URL form view in a modal.
+	 */ _showModal() {
         const editor = this.editor;
-        const button = new ButtonClass(editor.locale);
-        const t = editor.locale.t;
-        button.set({
-            icon: icons.imageUrl,
-            tooltip: true
+        const locale = editor.locale;
+        const t = locale.t;
+        const dialog = editor.plugins.get('Dialog');
+        if (!this._formView) {
+            this._formView = this._createInsertUrlView();
+            this._formView.on('submit', ()=>this._handleSave());
+        }
+        const replaceImageSourceCommand = editor.commands.get('replaceImageSource');
+        this._formView.imageURLInputValue = replaceImageSourceCommand.value || '';
+        dialog.show({
+            id: 'insertImageViaUrl',
+            title: this._imageInsertUI.isImageSelected ? t('Update image URL') : t('Insert image via URL'),
+            isModal: true,
+            content: this._formView,
+            actionButtons: [
+                {
+                    label: t('Cancel'),
+                    withText: true,
+                    onExecute: ()=>dialog.hide()
+                },
+                {
+                    label: t('Accept'),
+                    class: 'ck-button-action',
+                    withText: true,
+                    onExecute: ()=>this._handleSave()
+                }
+            ]
         });
-        button.bind('label').to(this._imageInsertUI, 'isImageSelected', (isImageSelected)=>isImageSelected ? t('Update image URL') : t('Insert image via URL'));
-        return button;
     }
     /**
-     * Closes the dropdown.
-     */ _closePanel() {
-        this.editor.editing.view.focus();
-        this._imageInsertUI.dropdownView.isOpen = false;
+	 * Executes appropriate command depending on selection and form value.
+	 */ _handleSave() {
+        const replaceImageSourceCommand = this.editor.commands.get('replaceImageSource');
+        // If an image element is currently selected, we want to replace its source attribute (instead of inserting a new image).
+        // We detect if an image is selected by checking `replaceImageSource` command state.
+        if (replaceImageSourceCommand.isEnabled) {
+            this.editor.execute('replaceImageSource', {
+                source: this._formView.imageURLInputValue
+            });
+        } else {
+            this.editor.execute('insertImage', {
+                source: this._formView.imageURLInputValue
+            });
+        }
+        this.editor.plugins.get('Dialog').hide();
     }
 }
 
-class ImageInsertViaUrl extends Plugin {
+/**
+ * The image insert via URL plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/images-inserting
+ * Insert images via source URL} documentation.
+ *
+ * This plugin does not do anything directly, but it loads a set of specific plugins
+ * to enable image inserting via implemented integrations:
+ *
+ * * {@link module:image/imageinsert/imageinsertui~ImageInsertUI},
+ */ class ImageInsertViaUrl extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageInsertViaUrl';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageInsertViaUrlUI,
             ImageInsertUI
@@ -3683,15 +4047,26 @@ class ImageInsertViaUrl extends Plugin {
     }
 }
 
-class ImageInsert extends Plugin {
+/**
+ * The image insert plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature}
+ * and {@glink features/images/images-inserting Insert images via source URL} documentation.
+ *
+ * This plugin does not do anything directly, but it loads a set of specific plugins
+ * to enable image uploading or inserting via implemented integrations:
+ *
+ * * {@link module:image/imageupload~ImageUpload}
+ * * {@link module:image/imageinsert/imageinsertui~ImageInsertUI}
+ */ class ImageInsert extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageInsert';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUpload,
             ImageInsertViaUrl,
@@ -3700,10 +4075,12 @@ class ImageInsert extends Plugin {
     }
 }
 
-class ResizeImageCommand extends Command {
+/**
+ * The resize image command. Currently, it only supports the width attribute.
+ */ class ResizeImageCommand extends Command {
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ refresh() {
         const editor = this.editor;
         const imageUtils = editor.plugins.get('ImageUtils');
         const element = imageUtils.getClosestSelectedImageElement(editor.model.document.selection);
@@ -3718,20 +4095,20 @@ class ResizeImageCommand extends Command {
         }
     }
     /**
-     * Executes the command.
-     *
-     * ```ts
-     * // Sets the width to 50%:
-     * editor.execute( 'resizeImage', { width: '50%' } );
-     *
-     * // Removes the width attribute:
-     * editor.execute( 'resizeImage', { width: null } );
-     * ```
-     *
-     * @param options
-     * @param options.width The new width of the image.
-     * @fires execute
-     */ execute(options) {
+	 * Executes the command.
+	 *
+	 * ```ts
+	 * // Sets the width to 50%:
+	 * editor.execute( 'resizeImage', { width: '50%' } );
+	 *
+	 * // Removes the width attribute:
+	 * editor.execute( 'resizeImage', { width: null } );
+	 * ```
+	 *
+	 * @param options
+	 * @param options.width The new width of the image.
+	 * @fires execute
+	 */ execute(options) {
         const editor = this.editor;
         const model = editor.model;
         const imageUtils = editor.plugins.get('ImageUtils');
@@ -3750,22 +4127,62 @@ class ResizeImageCommand extends Command {
     }
 }
 
-class ImageResizeEditing extends Plugin {
+/**
+ * The image resize editing feature.
+ *
+ * It adds the ability to resize each image using handles or manually by
+ * {@link module:image/imageresize/imageresizebuttons~ImageResizeButtons} buttons.
+ */ class ImageResizeEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageResizeEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        editor.config.define('image', {
+            resizeUnit: '%',
+            resizeOptions: [
+                {
+                    name: 'resizeImage:original',
+                    value: null,
+                    icon: 'original'
+                },
+                {
+                    name: 'resizeImage:custom',
+                    value: 'custom',
+                    icon: 'custom'
+                },
+                {
+                    name: 'resizeImage:25',
+                    value: '25',
+                    icon: 'small'
+                },
+                {
+                    name: 'resizeImage:50',
+                    value: '50',
+                    icon: 'medium'
+                },
+                {
+                    name: 'resizeImage:75',
+                    value: '75',
+                    icon: 'large'
+                }
+            ]
+        });
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const resizeImageCommand = new ResizeImageCommand(editor);
         this._registerConverters('imageBlock');
@@ -3775,8 +4192,8 @@ class ImageResizeEditing extends Plugin {
         editor.commands.add('imageResize', resizeImageCommand);
     }
     /**
-     * @inheritDoc
-     */ afterInit() {
+	 * @inheritDoc
+	 */ afterInit() {
         this._registerSchema();
     }
     _registerSchema() {
@@ -3798,10 +4215,10 @@ class ImageResizeEditing extends Plugin {
         }
     }
     /**
-     * Registers image resize converters.
-     *
-     * @param imageType The type of the image.
-     */ _registerConverters(imageType) {
+	 * Registers image resize converters.
+	 *
+	 * @param imageType The type of the image.
+	 */ _registerConverters(imageType) {
         const editor = this.editor;
         const imageUtils = editor.plugins.get('ImageUtils');
         // Dedicated converter to propagate image's attribute to the img tag.
@@ -3879,66 +4296,45 @@ class ImageResizeEditing extends Plugin {
             }
         });
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        editor.config.define('image', {
-            resizeUnit: '%',
-            resizeOptions: [
-                {
-                    name: 'resizeImage:original',
-                    value: null,
-                    icon: 'original'
-                },
-                {
-                    name: 'resizeImage:custom',
-                    value: 'custom',
-                    icon: 'custom'
-                },
-                {
-                    name: 'resizeImage:25',
-                    value: '25',
-                    icon: 'small'
-                },
-                {
-                    name: 'resizeImage:50',
-                    value: '50',
-                    icon: 'medium'
-                },
-                {
-                    name: 'resizeImage:75',
-                    value: '75',
-                    icon: 'large'
-                }
-            ]
-        });
-    }
 }
 
-const RESIZE_ICONS = {
-    small: icons.objectSizeSmall,
-    medium: icons.objectSizeMedium,
-    large: icons.objectSizeLarge,
-    custom: icons.objectSizeCustom,
-    original: icons.objectSizeFull
-};
-class ImageResizeButtons extends Plugin {
+const RESIZE_ICONS = /* #__PURE__ */ (()=>({
+        small: icons.objectSizeSmall,
+        medium: icons.objectSizeMedium,
+        large: icons.objectSizeLarge,
+        custom: icons.objectSizeCustom,
+        original: icons.objectSizeFull
+    }))();
+/**
+ * The image resize buttons plugin.
+ *
+ * It adds a possibility to resize images using the toolbar dropdown or individual buttons, depending on the plugin configuration.
+ */ class ImageResizeButtons extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageResizeEditing
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageResizeButtons';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * The resize unit.
+	 * @default '%'
+	 */ _resizeUnit;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this._resizeUnit = editor.config.get('image.resizeUnit');
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const options = editor.config.get('image.resizeOptions');
         const command = editor.commands.get('resizeImage');
@@ -3949,10 +4345,10 @@ class ImageResizeButtons extends Plugin {
         this._registerImageResizeDropdown(options);
     }
     /**
-     * A helper function that creates a standalone button component for the plugin.
-     *
-     * @param resizeOption A model of the resize option.
-     */ _registerImageResizeButton(option) {
+	 * A helper function that creates a standalone button component for the plugin.
+	 *
+	 * @param resizeOption A model of the resize option.
+	 */ _registerImageResizeButton(option) {
         const editor = this.editor;
         const { name, value, icon } = option;
         editor.ui.componentFactory.add(name, (locale)=>{
@@ -3961,15 +4357,15 @@ class ImageResizeButtons extends Plugin {
             const labelText = this._getOptionLabelValue(option, true);
             if (!RESIZE_ICONS[icon]) {
                 /**
-                 * When configuring {@link module:image/imageconfig~ImageConfig#resizeOptions `config.image.resizeOptions`} for standalone
-                 * buttons, a valid `icon` token must be set for each option.
-                 *
-                 * See all valid options described in the
-                 * {@link module:image/imageconfig~ImageResizeOption plugin configuration}.
-                 *
-                 * @error imageresizebuttons-missing-icon
-                 * @param option Invalid image resize option.
-                */ throw new CKEditorError('imageresizebuttons-missing-icon', editor, option);
+				 * When configuring {@link module:image/imageconfig~ImageConfig#resizeOptions `config.image.resizeOptions`} for standalone
+				 * buttons, a valid `icon` token must be set for each option.
+				 *
+				 * See all valid options described in the
+				 * {@link module:image/imageconfig~ImageResizeOption plugin configuration}.
+				 *
+				 * @error imageresizebuttons-missing-icon
+				 * @param option Invalid image resize option.
+				*/ throw new CKEditorError('imageresizebuttons-missing-icon', editor, option);
             }
             button.set({
                 // Use the `label` property for a verbose description (because of ARIA).
@@ -3998,11 +4394,11 @@ class ImageResizeButtons extends Plugin {
         });
     }
     /**
-     * A helper function that creates a dropdown component for the plugin containing all the resize options defined in
-     * the editor configuration.
-     *
-     * @param options An array of configured options.
-     */ _registerImageResizeDropdown(options) {
+	 * A helper function that creates a dropdown component for the plugin containing all the resize options defined in
+	 * the editor configuration.
+	 *
+	 * @param options An array of configured options.
+	 */ _registerImageResizeDropdown(options) {
         const editor = this.editor;
         const t = editor.t;
         const originalSizeOption = options.find((option)=>!option.value);
@@ -4052,13 +4448,13 @@ class ImageResizeButtons extends Plugin {
         editor.ui.componentFactory.add('imageResize', componentCreator);
     }
     /**
-     * A helper function for creating an option label value string.
-     *
-     * @param option A resize option object.
-     * @param forTooltip An optional flag for creating a tooltip label.
-     * @returns A user-defined label combined from the numeric value and the resize unit or the default label
-     * for reset options (`Original`).
-     */ _getOptionLabelValue(option, forTooltip = false) {
+	 * A helper function for creating an option label value string.
+	 *
+	 * @param option A resize option object.
+	 * @param forTooltip An optional flag for creating a tooltip label.
+	 * @returns A user-defined label combined from the numeric value and the resize unit or the default label
+	 * for reset options (`Original`).
+	 */ _getOptionLabelValue(option, forTooltip = false) {
         const t = this.editor.t;
         if (option.label) {
             return option.label;
@@ -4081,12 +4477,12 @@ class ImageResizeButtons extends Plugin {
         }
     }
     /**
-     * A helper function that parses the resize options and returns list item definitions ready for use in the dropdown.
-     *
-     * @param options The resize options.
-     * @param command The resize image command.
-     * @returns Dropdown item definitions.
-     */ _getResizeDropdownListItemDefinitions(options, command) {
+	 * A helper function that parses the resize options and returns list item definitions ready for use in the dropdown.
+	 *
+	 * @param options The resize options.
+	 * @param command The resize image command.
+	 * @returns Dropdown item definitions.
+	 */ _getResizeDropdownListItemDefinitions(options, command) {
         const { editor } = this;
         const itemDefinitions = new Collection();
         const optionsWithSerializedValues = options.map((option)=>{
@@ -4144,12 +4540,6 @@ class ImageResizeButtons extends Plugin {
         }
         return itemDefinitions;
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        this._resizeUnit = editor.config.get('image.resizeUnit');
-    }
 }
 /**
  * A helper that checks if provided option triggers custom resize balloon.
@@ -4175,30 +4565,35 @@ class ImageResizeButtons extends Plugin {
 
 const RESIZABLE_IMAGES_CSS_SELECTOR = 'figure.image.ck-widget > img,' + 'figure.image.ck-widget > picture > img,' + 'figure.image.ck-widget > a > img,' + 'figure.image.ck-widget > a > picture > img,' + 'span.image-inline.ck-widget > img,' + 'span.image-inline.ck-widget > picture > img';
 const RESIZED_IMAGE_CLASS = 'image_resized';
-class ImageResizeHandles extends Plugin {
+/**
+ * The image resize by handles feature.
+ *
+ * It adds the ability to resize each image using handles or manually by
+ * {@link module:image/imageresize/imageresizebuttons~ImageResizeButtons} buttons.
+ */ class ImageResizeHandles extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             WidgetResize,
             ImageUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageResizeHandles';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const command = this.editor.commands.get('resizeImage');
         this.bind('isEnabled').to(command);
         this._setupResizerCreator();
     }
     /**
-     * Attaches the listeners responsible for creating a resizer for each image, except for images inside the HTML embed preview.
-     */ _setupResizerCreator() {
+	 * Attaches the listeners responsible for creating a resizer for each image, except for images inside the HTML embed preview.
+	 */ _setupResizerCreator() {
         const editor = this.editor;
         const editingView = editor.editing.view;
         const imageUtils = editor.plugins.get('ImageUtils');
@@ -4323,6 +4718,8 @@ class ImageResizeHandles extends Plugin {
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */ /**
+ * @module image/imageresize/utils/getselectedimageeditornodes
+ */ /**
  * Finds model, view and DOM element for selected image element. Returns `null` if there is no image selected.
  *
  * @param editor Editor instance.
@@ -4372,10 +4769,82 @@ class ImageResizeHandles extends Plugin {
     return tryCastDimensionsToUnit(imageParentWidthPx, imageHolderDimension, targetUnit);
 }
 
-class ImageCustomResizeFormView extends View {
+/**
+ * The ImageCustomResizeFormView class.
+ */ class ImageCustomResizeFormView extends View {
+    /**
+	 * Tracks information about the DOM focus in the form.
+	 */ focusTracker;
+    /**
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
+    /**
+	 * Resize unit shortcut.
+	 */ unit;
+    /**
+	 * An input with a label.
+	 */ labeledInput;
+    /**
+	 * A button used to submit the form.
+	 */ saveButtonView;
+    /**
+	 * A button used to cancel the form.
+	 */ cancelButtonView;
+    /**
+	 * A collection of views which can be focused in the form.
+	 */ _focusables;
+    /**
+	 * Helps cycling over {@link #_focusables} in the form.
+	 */ _focusCycler;
+    /**
+	 * An array of form validators used by {@link #isValid}.
+	 */ _validators;
+    /**
+	 * @inheritDoc
+	 */ constructor(locale, unit, validators){
+        super(locale);
+        const t = this.locale.t;
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.unit = unit;
+        this.labeledInput = this._createLabeledInputView();
+        this.saveButtonView = this._createButton(t('Save'), icons.check, 'ck-button-save');
+        this.saveButtonView.type = 'submit';
+        this.cancelButtonView = this._createButton(t('Cancel'), icons.cancel, 'ck-button-cancel', 'cancel');
+        this._focusables = new ViewCollection();
+        this._validators = validators;
+        this._focusCycler = new FocusCycler({
+            focusables: this._focusables,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                // Navigate form fields backwards using the Shift + Tab keystroke.
+                focusPrevious: 'shift + tab',
+                // Navigate form fields forwards using the Tab key.
+                focusNext: 'tab'
+            }
+        });
+        this.setTemplate({
+            tag: 'form',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-image-custom-resize-form',
+                    'ck-responsive-form'
+                ],
+                // https://github.com/ckeditor/ckeditor5-image/issues/40
+                tabindex: '-1'
+            },
+            children: [
+                this.labeledInput,
+                this.saveButtonView,
+                this.cancelButtonView
+            ]
+        });
+    }
     /**
-     * @inheritDoc
-     */ render() {
+	 * @inheritDoc
+	 */ render() {
         super.render();
         this.keystrokes.listenTo(this.element);
         submitHandler({
@@ -4393,21 +4862,21 @@ class ImageCustomResizeFormView extends View {
         });
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         super.destroy();
         this.focusTracker.destroy();
         this.keystrokes.destroy();
     }
     /**
-     * Creates the button view.
-     *
-     * @param label The button label
-     * @param icon The button's icon.
-     * @param className The additional button CSS class name.
-     * @param eventName The event name that the ButtonView#execute event will be delegated to.
-     * @returns The button view instance.
-     */ _createButton(label, icon, className, eventName) {
+	 * Creates the button view.
+	 *
+	 * @param label The button label
+	 * @param icon The button's icon.
+	 * @param className The additional button CSS class name.
+	 * @param eventName The event name that the ButtonView#execute event will be delegated to.
+	 * @returns The button view instance.
+	 */ _createButton(label, icon, className, eventName) {
         const button = new ButtonView(this.locale);
         button.set({
             label,
@@ -4425,10 +4894,10 @@ class ImageCustomResizeFormView extends View {
         return button;
     }
     /**
-     * Creates an input with a label.
-     *
-     * @returns Labeled field view instance.
-     */ _createLabeledInputView() {
+	 * Creates an input with a label.
+	 *
+	 * @returns Labeled field view instance.
+	 */ _createLabeledInputView() {
         const t = this.locale.t;
         const labeledInput = new LabeledFieldView(this.locale, createLabeledInputNumber);
         labeledInput.label = t('Resize image (in %0)', this.unit);
@@ -4438,8 +4907,8 @@ class ImageCustomResizeFormView extends View {
         return labeledInput;
     }
     /**
-     * Validates the form and returns `false` when some fields are invalid.
-     */ isValid() {
+	 * Validates the form and returns `false` when some fields are invalid.
+	 */ isValid() {
         this.resetFormStatus();
         for (const validator of this._validators){
             const errorText = validator(this);
@@ -4453,16 +4922,16 @@ class ImageCustomResizeFormView extends View {
         return true;
     }
     /**
-     * Cleans up the supplementary error and information text of the {@link #labeledInput}
-     * bringing them back to the state when the form has been displayed for the first time.
-     *
-     * See {@link #isValid}.
-     */ resetFormStatus() {
+	 * Cleans up the supplementary error and information text of the {@link #labeledInput}
+	 * bringing them back to the state when the form has been displayed for the first time.
+	 *
+	 * See {@link #isValid}.
+	 */ resetFormStatus() {
         this.labeledInput.errorText = null;
     }
     /**
-     * The native DOM `value` of the input element of {@link #labeledInput}.
-     */ get rawSize() {
+	 * The native DOM `value` of the input element of {@link #labeledInput}.
+	 */ get rawSize() {
         const { element } = this.labeledInput.fieldView;
         if (!element) {
             return null;
@@ -4470,8 +4939,8 @@ class ImageCustomResizeFormView extends View {
         return element.value;
     }
     /**
-     * Get numeric value of size. Returns `null` if value of size input element in {@link #labeledInput}.is not a number.
-     */ get parsedSize() {
+	 * Get numeric value of size. Returns `null` if value of size input element in {@link #labeledInput}.is not a number.
+	 */ get parsedSize() {
         const { rawSize } = this;
         if (rawSize === null) {
             return null;
@@ -4483,58 +4952,15 @@ class ImageCustomResizeFormView extends View {
         return parsed;
     }
     /**
-     * Returns serialized image input size with unit.
-     * Returns `null` if value of size input element in {@link #labeledInput}.is not a number.
-     */ get sizeWithUnits() {
+	 * Returns serialized image input size with unit.
+	 * Returns `null` if value of size input element in {@link #labeledInput}.is not a number.
+	 */ get sizeWithUnits() {
         const { parsedSize, unit } = this;
         if (parsedSize === null) {
             return null;
         }
         return `${parsedSize}${unit}`;
     }
-    /**
-     * @inheritDoc
-     */ constructor(locale, unit, validators){
-        super(locale);
-        const t = this.locale.t;
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this.unit = unit;
-        this.labeledInput = this._createLabeledInputView();
-        this.saveButtonView = this._createButton(t('Save'), icons.check, 'ck-button-save');
-        this.saveButtonView.type = 'submit';
-        this.cancelButtonView = this._createButton(t('Cancel'), icons.cancel, 'ck-button-cancel', 'cancel');
-        this._focusables = new ViewCollection();
-        this._validators = validators;
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate form fields backwards using the Shift + Tab keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate form fields forwards using the Tab key.
-                focusNext: 'tab'
-            }
-        });
-        this.setTemplate({
-            tag: 'form',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-image-custom-resize-form',
-                    'ck-responsive-form'
-                ],
-                // https://github.com/ckeditor/ckeditor5-image/issues/40
-                tabindex: '-1'
-            },
-            children: [
-                this.labeledInput,
-                this.saveButtonView,
-                this.cancelButtonView
-            ]
-        });
-    }
 }
 
 /**
@@ -4562,22 +4988,32 @@ class ImageCustomResizeFormView extends View {
     };
 }
 
-class ImageCustomResizeUI extends Plugin {
+/**
+ * The custom resize image UI plugin.
+ *
+ * The plugin uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
+ */ class ImageCustomResizeUI extends Plugin {
+    /**
+	 * The contextual balloon plugin instance.
+	 */ _balloon;
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * A form containing a textarea and buttons, used to change the `alt` text value.
+	 */ _form;
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ContextualBalloon
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageCustomResizeUI';
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         super.destroy();
         // Destroy created UI components as they are not automatically destroyed (see ckeditor5#1341).
         if (this._form) {
@@ -4585,9 +5021,9 @@ class ImageCustomResizeUI extends Plugin {
         }
     }
     /**
-     * Creates the {@link module:image/imageresize/ui/imagecustomresizeformview~ImageCustomResizeFormView}
-     * form.
-     */ _createForm(unit) {
+	 * Creates the {@link module:image/imageresize/ui/imagecustomresizeformview~ImageCustomResizeFormView}
+	 * form.
+	 */ _createForm(unit) {
         const editor = this.editor;
         this._balloon = this.editor.plugins.get('ContextualBalloon');
         this._form = new (CssTransitionDisablerMixin(ImageCustomResizeFormView))(editor.locale, unit, getFormValidators(editor));
@@ -4624,10 +5060,10 @@ class ImageCustomResizeUI extends Plugin {
         });
     }
     /**
-     * Shows the {@link #_form} in the {@link #_balloon}.
-     *
-     * @internal
-     */ _showForm(unit) {
+	 * Shows the {@link #_form} in the {@link #_balloon}.
+	 *
+	 * @internal
+	 */ _showForm(unit) {
         if (this._isVisible) {
             return;
         }
@@ -4662,10 +5098,10 @@ class ImageCustomResizeUI extends Plugin {
         this._form.enableCssTransitions();
     }
     /**
-     * Removes the {@link #_form} from the {@link #_balloon}.
-     *
-     * @param focusEditable Controls whether the editing view is focused afterwards.
-     */ _hideForm(focusEditable = false) {
+	 * Removes the {@link #_form} from the {@link #_balloon}.
+	 *
+	 * @param focusEditable Controls whether the editing view is focused afterwards.
+	 */ _hideForm(focusEditable = false) {
         if (!this._isInBalloon) {
             return;
         }
@@ -4680,13 +5116,13 @@ class ImageCustomResizeUI extends Plugin {
         }
     }
     /**
-     * Returns `true` when the {@link #_form} is the visible view in the {@link #_balloon}.
-     */ get _isVisible() {
+	 * Returns `true` when the {@link #_form} is the visible view in the {@link #_balloon}.
+	 */ get _isVisible() {
         return !!this._balloon && this._balloon.visibleView === this._form;
     }
     /**
-     * Returns `true` when the {@link #_form} is in the {@link #_balloon}.
-     */ get _isInBalloon() {
+	 * Returns `true` when the {@link #_form} is in the {@link #_balloon}.
+	 */ get _isInBalloon() {
         return !!this._balloon && this._balloon.hasView(this._form);
     }
 }
@@ -4708,10 +5144,14 @@ class ImageCustomResizeUI extends Plugin {
     ];
 }
 
-class ImageResize extends Plugin {
+/**
+ * The image resize plugin.
+ *
+ * It adds a possibility to resize each image using handles.
+ */ class ImageResize extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageResizeEditing,
             ImageResizeHandles,
@@ -4720,16 +5160,54 @@ class ImageResize extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageResize';
     }
 }
 
-class ImageStyleCommand extends Command {
+/**
+ * The image style command. It is used to apply {@link module:image/imageconfig~ImageStyleConfig#options image style option}
+ * to a selected image.
+ *
+ * **Note**: Executing this command may change the image model element if the desired style requires an image of a different
+ * type. See {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand#execute} to learn more.
+ */ class ImageStyleCommand extends Command {
+    /**
+	 * An object containing names of default style options for the inline and block images.
+	 * If there is no default style option for the given image type in the configuration,
+	 * the name will be `false`.
+	 */ _defaultStyles;
+    /**
+	 * The styles handled by this command.
+	 */ _styles;
+    /**
+	 * Creates an instance of the image style command. When executed, the command applies one of
+	 * {@link module:image/imageconfig~ImageStyleConfig#options style options} to the currently selected image.
+	 *
+	 * @param editor The editor instance.
+	 * @param styles The style options that this command supports.
+	 */ constructor(editor, styles){
+        super(editor);
+        this._defaultStyles = {
+            imageBlock: false,
+            imageInline: false
+        };
+        this._styles = new Map(styles.map((style)=>{
+            if (style.isDefault) {
+                for (const modelElementName of style.modelElements){
+                    this._defaultStyles[modelElementName] = style.name;
+                }
+            }
+            return [
+                style.name,
+                style
+            ];
+        }));
+    }
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ refresh() {
         const editor = this.editor;
         const imageUtils = editor.plugins.get('ImageUtils');
         const element = imageUtils.getClosestSelectedImageElement(this.editor.model.document.selection);
@@ -4743,21 +5221,21 @@ class ImageStyleCommand extends Command {
         }
     }
     /**
-     * Executes the command and applies the style to the currently selected image:
-     *
-     * ```ts
-     * editor.execute( 'imageStyle', { value: 'side' } );
-     * ```
-     *
-     * **Note**: Executing this command may change the image model element if the desired style requires an image
-     * of a different type. Learn more about {@link module:image/imageconfig~ImageStyleOptionDefinition#modelElements model element}
-     * 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 = {}) {
+	 * Executes the command and applies the style to the currently selected image:
+	 *
+	 * ```ts
+	 * editor.execute( 'imageStyle', { value: 'side' } );
+	 * ```
+	 *
+	 * **Note**: Executing this command may change the image model element if the desired style requires an image
+	 * of a different type. Learn more about {@link module:image/imageconfig~ImageStyleOptionDefinition#modelElements model element}
+	 * 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 = {}) {
         const editor = this.editor;
         const model = editor.model;
         const imageUtils = editor.plugins.get('ImageUtils');
@@ -4786,41 +5264,16 @@ class ImageStyleCommand extends Command {
         });
     }
     /**
-     * Returns `true` if requested style change would trigger the image type change.
-     *
-     * @param requestedStyle The name of the style (as configured in {@link module:image/imageconfig~ImageStyleConfig#options}).
-     * @param imageElement The image model element.
-     */ shouldConvertImageType(requestedStyle, imageElement) {
+	 * Returns `true` if requested style change would trigger the image type change.
+	 *
+	 * @param requestedStyle The name of the style (as configured in {@link module:image/imageconfig~ImageStyleConfig#options}).
+	 * @param imageElement The image model element.
+	 */ shouldConvertImageType(requestedStyle, imageElement) {
         const supportedTypes = this._styles.get(requestedStyle).modelElements;
         return !supportedTypes.includes(imageElement.name);
     }
-    /**
-     * Creates an instance of the image style command. When executed, the command applies one of
-     * {@link module:image/imageconfig~ImageStyleConfig#options style options} to the currently selected image.
-     *
-     * @param editor The editor instance.
-     * @param styles The style options that this command supports.
-     */ constructor(editor, styles){
-        super(editor);
-        this._defaultStyles = {
-            imageBlock: false,
-            imageInline: false
-        };
-        this._styles = new Map(styles.map((style)=>{
-            if (style.isDefault) {
-                for (const modelElementName of style.modelElements){
-                    this._defaultStyles[modelElementName] = style.name;
-                }
-            }
-            return [
-                style.name,
-                style
-            ];
-        }));
-    }
 }
 
-const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, objectBlockLeft, objectBlockRight } = icons;
 /**
  * Default image style options provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}
  * configuration.
@@ -4844,7 +5297,7 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
         return {
             name: 'inline',
             title: 'In line',
-            icon: objectInline,
+            icon: icons.objectInline,
             modelElements: [
                 'imageInline'
             ],
@@ -4856,7 +5309,7 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
         return {
             name: 'alignLeft',
             title: 'Left aligned image',
-            icon: objectLeft,
+            icon: icons.objectLeft,
             modelElements: [
                 'imageBlock',
                 'imageInline'
@@ -4869,7 +5322,7 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
         return {
             name: 'alignBlockLeft',
             title: 'Left aligned image',
-            icon: objectBlockLeft,
+            icon: icons.objectBlockLeft,
             modelElements: [
                 'imageBlock'
             ],
@@ -4881,7 +5334,7 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
         return {
             name: 'alignCenter',
             title: 'Centered image',
-            icon: objectCenter,
+            icon: icons.objectCenter,
             modelElements: [
                 'imageBlock'
             ],
@@ -4893,7 +5346,7 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
         return {
             name: 'alignRight',
             title: 'Right aligned image',
-            icon: objectRight,
+            icon: icons.objectRight,
             modelElements: [
                 'imageBlock',
                 'imageInline'
@@ -4906,7 +5359,7 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
         return {
             name: 'alignBlockRight',
             title: 'Right aligned image',
-            icon: objectBlockRight,
+            icon: icons.objectBlockRight,
             modelElements: [
                 'imageBlock'
             ],
@@ -4918,7 +5371,7 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
         return {
             name: 'block',
             title: 'Centered image',
-            icon: objectCenter,
+            icon: icons.objectCenter,
             modelElements: [
                 'imageBlock'
             ],
@@ -4930,7 +5383,7 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
         return {
             name: 'side',
             title: 'Side image',
-            icon: objectRight,
+            icon: icons.objectRight,
             modelElements: [
                 'imageBlock'
             ],
@@ -4945,15 +5398,15 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
  * See {@link module:image/imageconfig~ImageStyleOptionDefinition#icon} to learn more.
  *
  * There are 7 default icons available: `'full'`, `'left'`, `'inlineLeft'`, `'center'`, `'right'`, `'inlineRight'`, and `'inline'`.
- */ const DEFAULT_ICONS = {
-    full: objectFullWidth,
-    left: objectBlockLeft,
-    right: objectBlockRight,
-    center: objectCenter,
-    inlineLeft: objectLeft,
-    inlineRight: objectRight,
-    inline: objectInline
-};
+ */ const DEFAULT_ICONS = /* #__PURE__ */ (()=>({
+        full: icons.objectFullWidth,
+        left: icons.objectBlockLeft,
+        right: icons.objectBlockRight,
+        center: icons.objectCenter,
+        inlineLeft: icons.objectLeft,
+        inlineRight: icons.objectRight,
+        inline: icons.objectInline
+    }))();
 /**
  * Default drop-downs provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#toolbar}
  * configuration. The drop-downs are containers for the {@link module:image/imageconfig~ImageStyleConfig#options image style options}.
@@ -5110,20 +5563,20 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
         // Check if the option is supported by any of the loaded plugins.
         if (!modelElements.some((elementName)=>supportedElements.includes(elementName))) {
             /**
-             * In order to work correctly, each image style {@link module:image/imageconfig~ImageStyleOptionDefinition option}
-             * requires specific model elements (also: types of images) to be supported by the editor.
-             *
-             * Model element names to which the image style option can be applied are defined in the
-             * {@link module:image/imageconfig~ImageStyleOptionDefinition#modelElements} property of the style option
-             * definition.
-             *
-             * Explore the warning in the console to find out precisely which option is not supported and which editor plugins
-             * are missing. Make sure these plugins are loaded in your editor to get this image style option working.
-             *
-             * @error image-style-missing-dependency
-             * @param {String} [option] The name of the unsupported option.
-             * @param {String} [missingPlugins] The names of the plugins one of which has to be loaded for the particular option.
-             */ logWarning('image-style-missing-dependency', {
+			 * In order to work correctly, each image style {@link module:image/imageconfig~ImageStyleOptionDefinition option}
+			 * requires specific model elements (also: types of images) to be supported by the editor.
+			 *
+			 * Model element names to which the image style option can be applied are defined in the
+			 * {@link module:image/imageconfig~ImageStyleOptionDefinition#modelElements} property of the style option
+			 * definition.
+			 *
+			 * Explore the warning in the console to find out precisely which option is not supported and which editor plugins
+			 * are missing. Make sure these plugins are loaded in your editor to get this image style option working.
+			 *
+			 * @error image-style-missing-dependency
+			 * @param {String} [option] The name of the unsupported option.
+			 * @param {String} [missingPlugins] The names of the plugins one of which has to be loaded for the particular option.
+			 */ logWarning('image-style-missing-dependency', {
                 style: option,
                 missingPlugins: modelElements.map((name)=>name === 'imageBlock' ? 'ImageBlockEditing' : 'ImageInlineEditing')
             });
@@ -5150,17 +5603,17 @@ const { objectFullWidth, objectInline, objectLeft, objectRight, objectCenter, ob
  * Displays a console warning with the 'image-style-configuration-definition-invalid' error.
  */ function warnInvalidStyle(info) {
     /**
-     * The image style definition provided in the configuration is invalid.
-     *
-     * Please make sure the definition implements properly one of the following:
-     *
-     * * {@link module:image/imageconfig~ImageStyleOptionDefinition image style option definition},
-     * * {@link module:image/imageconfig~ImageStyleDropdownDefinition image style dropdown definition}
-     *
-     * @error image-style-configuration-definition-invalid
-     * @param {String} [dropdown] The name of the invalid drop-down
-     * @param {String} [style] The name of the invalid image style option
-     */ logWarning('image-style-configuration-definition-invalid', info);
+	 * The image style definition provided in the configuration is invalid.
+	 *
+	 * Please make sure the definition implements properly one of the following:
+	 *
+	 * * {@link module:image/imageconfig~ImageStyleOptionDefinition image style option definition},
+	 * * {@link module:image/imageconfig~ImageStyleDropdownDefinition image style dropdown definition}
+	 *
+	 * @error image-style-configuration-definition-invalid
+	 * @param {String} [dropdown] The name of the invalid drop-down
+	 * @param {String} [style] The name of the invalid image style option
+	 */ logWarning('image-style-configuration-definition-invalid', info);
 }
 var utils = {
     normalizeStyles,
@@ -5245,22 +5698,36 @@ var utils = {
     }
 }
 
-class ImageStyleEditing extends Plugin {
+/**
+ * The image style engine plugin. It sets the default configuration, creates converters and registers
+ * {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand ImageStyleCommand}.
+ */ class ImageStyleEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageStyleEditing';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * It contains a list of the normalized and validated style options.
+	 *
+	 * * Each option contains a complete icon markup.
+	 * * The style options not supported by any of the loaded image editing plugins (
+	 * {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`} or
+	 * {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`}) are filtered out.
+	 *
+	 * @internal
+	 * @readonly
+	 */ normalizedStyles;
+    /**
+	 * @inheritDoc
+	 */ init() {
         const { normalizeStyles, getDefaultStylesConfiguration } = utils;
         const editor = this.editor;
         const isBlockPluginLoaded = editor.plugins.has('ImageBlockEditing');
@@ -5277,10 +5744,10 @@ class ImageStyleEditing extends Plugin {
         editor.commands.add('imageStyle', new ImageStyleCommand(editor, this.normalizedStyles));
     }
     /**
-     * Sets the editor conversion taking the presence of
-     * {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`}
-     * and {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugins into consideration.
-     */ _setupConversion(isBlockPluginLoaded, isInlinePluginLoaded) {
+	 * Sets the editor conversion taking the presence of
+	 * {@link module:image/image/imageinlineediting~ImageInlineEditing `ImageInlineEditing`}
+	 * and {@link module:image/image/imageblockediting~ImageBlockEditing `ImageBlockEditing`} plugins into consideration.
+	 */ _setupConversion(isBlockPluginLoaded, isInlinePluginLoaded) {
         const editor = this.editor;
         const schema = editor.model.schema;
         const modelToViewConverter = modelToViewStyleAttribute(this.normalizedStyles);
@@ -5309,8 +5776,8 @@ class ImageStyleEditing extends Plugin {
         }
     }
     /**
-     * Registers a post-fixer that will make sure that the style attribute value is correct for a specific image type (block vs inline).
-     */ _setupPostFixer() {
+	 * Registers a post-fixer that will make sure that the style attribute value is correct for a specific image type (block vs inline).
+	 */ _setupPostFixer() {
         const editor = this.editor;
         const document = editor.model.document;
         const imageUtils = editor.plugins.get(ImageUtils);
@@ -5346,34 +5813,40 @@ class ImageStyleEditing extends Plugin {
     }
 }
 
-class ImageStyleUI extends Plugin {
+/**
+ * The image style UI plugin.
+ *
+ * It registers buttons corresponding to the {@link module:image/imageconfig~ImageConfig#styles} configuration.
+ * It also registers the {@link module:image/imagestyle/utils#DEFAULT_DROPDOWN_DEFINITIONS default drop-downs} and the
+ * custom drop-downs defined by the developer in the {@link module:image/imageconfig~ImageConfig#toolbar} configuration.
+ */ class ImageStyleUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageStyleEditing
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageStyleUI';
     }
     /**
-     * Returns the default localized style titles provided by the plugin.
-     *
-     * The following localized titles corresponding with
-     * {@link module:image/imagestyle/utils#DEFAULT_OPTIONS} are available:
-     *
-     * * `'Wrap text'`,
-     * * `'Break text'`,
-     * * `'In line'`,
-     * * `'Full size image'`,
-     * * `'Side image'`,
-     * * `'Left aligned image'`,
-     * * `'Centered image'`,
-     * * `'Right aligned image'`
-     */ get localizedDefaultStylesTitles() {
+	 * Returns the default localized style titles provided by the plugin.
+	 *
+	 * The following localized titles corresponding with
+	 * {@link module:image/imagestyle/utils#DEFAULT_OPTIONS} are available:
+	 *
+	 * * `'Wrap text'`,
+	 * * `'Break text'`,
+	 * * `'In line'`,
+	 * * `'Full size image'`,
+	 * * `'Side image'`,
+	 * * `'Left aligned image'`,
+	 * * `'Centered image'`,
+	 * * `'Right aligned image'`
+	 */ get localizedDefaultStylesTitles() {
         const t = this.editor.t;
         return {
             'Wrap text': t('Wrap text'),
@@ -5387,8 +5860,8 @@ class ImageStyleUI extends Plugin {
         };
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const plugins = this.editor.plugins;
         const toolbarConfig = this.editor.config.get('image.toolbar') || [];
         const imageStyleEditing = plugins.get('ImageStyleEditing');
@@ -5405,8 +5878,8 @@ class ImageStyleUI extends Plugin {
         }
     }
     /**
-     * Creates a dropdown and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
-     */ _createDropdown(dropdownConfig, definedStyles) {
+	 * Creates a dropdown and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
+	 */ _createDropdown(dropdownConfig, definedStyles) {
         const factory = this.editor.ui.componentFactory;
         factory.add(dropdownConfig.name, (locale)=>{
             let defaultButton;
@@ -5465,8 +5938,8 @@ class ImageStyleUI extends Plugin {
         });
     }
     /**
-     * Creates a button and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
-     */ _createButton(buttonConfig) {
+	 * Creates a button and stores it in the editor {@link module:ui/componentfactory~ComponentFactory}.
+	 */ _createButton(buttonConfig) {
         const buttonName = buttonConfig.name;
         this.editor.ui.componentFactory.add(getUIComponentName(buttonName), (locale)=>{
             const command = this.editor.commands.get('imageStyle');
@@ -5513,39 +5986,60 @@ class ImageStyleUI extends Plugin {
     return (dropdownTitle ? dropdownTitle + ': ' : '') + buttonTitle;
 }
 
-class ImageStyle extends Plugin {
+/**
+ * The image style plugin.
+ *
+ * For a detailed overview of the image styles feature, check the {@glink features/images/images-styles documentation}.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ * * {@link module:image/imagestyle/imagestyleediting~ImageStyleEditing},
+ * * {@link module:image/imagestyle/imagestyleui~ImageStyleUI}
+ *
+ * It provides a default configuration, which can be extended or overwritten.
+ * Read more about the {@link module:image/imageconfig~ImageConfig#styles image styles configuration}.
+ */ class ImageStyle extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageStyleEditing,
             ImageStyleUI
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageStyle';
     }
 }
 
-class ImageToolbar extends Plugin {
+/**
+ * The image toolbar plugin. It creates and manages the image toolbar (the toolbar displayed when an image is selected).
+ *
+ * For an overview, check the {@glink features/images/images-overview#image-contextual-toolbar image contextual toolbar} documentation.
+ *
+ * Instances of toolbar components (e.g. buttons) are created using the editor's
+ * {@link module:ui/componentfactory~ComponentFactory component factory}
+ * based on the {@link module:image/imageconfig~ImageConfig#toolbar `image.toolbar` configuration option}.
+ *
+ * The toolbar uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
+ */ class ImageToolbar extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             WidgetToolbarRepository,
             ImageUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ImageToolbar';
     }
     /**
-     * @inheritDoc
-     */ afterInit() {
+	 * @inheritDoc
+	 */ afterInit() {
         const editor = this.editor;
         const t = editor.t;
         const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);
@@ -5564,23 +6058,75 @@ class ImageToolbar extends Plugin {
     return config.map((item)=>isObject(item) ? item.name : item);
 }
 
-class PictureEditing extends Plugin {
+/**
+ * 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
+ */ class PictureEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             ImageEditing,
             ImageUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'PictureEditing';
     }
     /**
-     * @inheritDoc
-     */ afterInit() {
+	 * @inheritDoc
+	 */ afterInit() {
         const editor = this.editor;
         if (editor.plugins.has('ImageBlockEditing')) {
             editor.model.schema.extend('imageBlock', {
@@ -5600,9 +6146,9 @@ class PictureEditing extends Plugin {
         this._setupImageUploadEditingIntegration();
     }
     /**
-     * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
-     * and the model `sources` attribute.
-     */ _setupConversion() {
+	 * 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');
@@ -5610,10 +6156,10 @@ class PictureEditing extends Plugin {
         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() {
+	 * 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;