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

package/lang/translations/vi.po

@@ -85,10 +85,14 @@ msgctxt "The label for the upload image from computer toolbar button."
 msgid "Upload image from computer"
 msgstr "Tải hình ảnh lên từ máy tính"
 
-msgctxt "The label for the upload image from computer menu bar button."
+msgctxt "The label for the upload image from computer menu bar button (standalone button)."
 msgid "Image from computer"
 msgstr "Hình ảnh từ máy tính"
 
+msgctxt "The label for the upload image from computer menu bar button (inside 'Image' menu)."
+msgid "From computer"
+msgstr ""
+
 msgctxt "The label for the replace image by upload from computer toolbar button."
 msgid "Replace image from computer"
 msgstr "Thay thế hình ảnh từ máy tính"
@@ -133,18 +137,22 @@ msgctxt "The accessibility label of the image resize dropdown for screen readers
 msgid "Image resize list"
 msgstr "Danh sách ảnh đã chỉnh kích thước"
 
-msgctxt "The label of the form submit button if the image source URL input has no value."
-msgid "Insert"
-msgstr "Chèn"
-
-msgctxt "The label of the form submit button if the image source URL input has a value."
-msgid "Update"
-msgstr "Cập nhật"
-
 msgctxt "The input label for the Insert image via URL form."
 msgid "Insert image via URL"
 msgstr "Chèn ảnh từ URL"
 
+msgctxt "The label for the insert image via url dropdown button."
+msgid "Insert via URL"
+msgstr ""
+
+msgctxt "The label for the insert image via url menu bar button (standalone button)."
+msgid "Image via URL"
+msgstr ""
+
+msgctxt "The label for the insert image via url menu bar button (inside 'Image' menu)."
+msgid "Via URL"
+msgstr ""
+
 msgctxt "The input label for the Insert image via URL form for a pre-existing image."
 msgid "Update image URL"
 msgstr "Cập nhật ảnh từ URL"
@@ -176,3 +184,7 @@ msgstr "Hoàn tất quá trình tải hình ảnh lên"
 msgctxt "Aria status message indicating that an error has occurred during image upload. Example: 'Error during image upload'."
 msgid "Error during image upload"
 msgstr "Xảy ra lỗi trong quá trình tải hình ảnh lên"
+
+msgctxt "Label for the widget inserted by the image feature (as in 'insert image')"
+msgid "Image"
+msgstr ""

package/lang/translations/zh-cn.po

@@ -85,10 +85,14 @@ msgctxt "The label for the upload image from computer toolbar button."
 msgid "Upload image from computer"
 msgstr "从电脑上传图片"
 
-msgctxt "The label for the upload image from computer menu bar button."
+msgctxt "The label for the upload image from computer menu bar button (standalone button)."
 msgid "Image from computer"
 msgstr "从计算机中选择图片"
 
+msgctxt "The label for the upload image from computer menu bar button (inside 'Image' menu)."
+msgid "From computer"
+msgstr ""
+
 msgctxt "The label for the replace image by upload from computer toolbar button."
 msgid "Replace image from computer"
 msgstr "从电脑替换图片"
@@ -133,18 +137,22 @@ msgctxt "The accessibility label of the image resize dropdown for screen readers
 msgid "Image resize list"
 msgstr "图片大小列表"
 
-msgctxt "The label of the form submit button if the image source URL input has no value."
-msgid "Insert"
-msgstr "插入"
-
-msgctxt "The label of the form submit button if the image source URL input has a value."
-msgid "Update"
-msgstr "更新"
-
 msgctxt "The input label for the Insert image via URL form."
 msgid "Insert image via URL"
 msgstr "通过URL地址插入图片"
 
+msgctxt "The label for the insert image via url dropdown button."
+msgid "Insert via URL"
+msgstr ""
+
+msgctxt "The label for the insert image via url menu bar button (standalone button)."
+msgid "Image via URL"
+msgstr ""
+
+msgctxt "The label for the insert image via url menu bar button (inside 'Image' menu)."
+msgid "Via URL"
+msgstr ""
+
 msgctxt "The input label for the Insert image via URL form for a pre-existing image."
 msgid "Update image URL"
 msgstr "更新图片URL地址"
@@ -176,3 +184,7 @@ msgstr "图片上传完成"
 msgctxt "Aria status message indicating that an error has occurred during image upload. Example: 'Error during image upload'."
 msgid "Error during image upload"
 msgstr "图片上传时出错"
+
+msgctxt "Label for the widget inserted by the image feature (as in 'insert image')"
+msgid "Image"
+msgstr ""

package/lang/translations/zh.po

@@ -85,10 +85,14 @@ msgctxt "The label for the upload image from computer toolbar button."
 msgid "Upload image from computer"
 msgstr "從電腦上傳圖片"
 
-msgctxt "The label for the upload image from computer menu bar button."
+msgctxt "The label for the upload image from computer menu bar button (standalone button)."
 msgid "Image from computer"
 msgstr "來自電腦的圖片"
 
+msgctxt "The label for the upload image from computer menu bar button (inside 'Image' menu)."
+msgid "From computer"
+msgstr ""
+
 msgctxt "The label for the replace image by upload from computer toolbar button."
 msgid "Replace image from computer"
 msgstr "從電腦替換圖片"
@@ -133,18 +137,22 @@ msgctxt "The accessibility label of the image resize dropdown for screen readers
 msgid "Image resize list"
 msgstr "圖片縮放清單"
 
-msgctxt "The label of the form submit button if the image source URL input has no value."
-msgid "Insert"
-msgstr "插入"
-
-msgctxt "The label of the form submit button if the image source URL input has a value."
-msgid "Update"
-msgstr "更新"
-
 msgctxt "The input label for the Insert image via URL form."
 msgid "Insert image via URL"
 msgstr "使用連結插入圖片"
 
+msgctxt "The label for the insert image via url dropdown button."
+msgid "Insert via URL"
+msgstr ""
+
+msgctxt "The label for the insert image via url menu bar button (standalone button)."
+msgid "Image via URL"
+msgstr ""
+
+msgctxt "The label for the insert image via url menu bar button (inside 'Image' menu)."
+msgid "Via URL"
+msgstr ""
+
 msgctxt "The input label for the Insert image via URL form for a pre-existing image."
 msgid "Update image URL"
 msgstr "更新圖片連結"
@@ -176,3 +184,7 @@ msgstr "圖片上傳完成"
 msgctxt "Aria status message indicating that an error has occurred during image upload. Example: 'Error during image upload'."
 msgid "Error during image upload"
 msgstr "圖片上傳期間發生錯誤"
+
+msgctxt "Label for the widget inserted by the image feature (as in 'insert image')"
+msgid "Image"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-image",
-  "version": "41.4.2",
+  "version": "42.0.0-alpha.1",
   "description": "Image feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,8 +13,8 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "41.4.2",
-    "ckeditor5": "41.4.2",
+    "@ckeditor/ckeditor5-ui": "42.0.0-alpha.1",
+    "ckeditor5": "42.0.0-alpha.1",
     "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/image/imageinlineediting.js

@@ -47,15 +47,10 @@ export default class ImageInlineEditing extends Plugin {
         // Converters 'alt' and 'srcset' are added in 'ImageEditing' plugin.
         schema.register('imageInline', {
             inheritAllFrom: '$inlineObject',
-            allowAttributes: ['alt', 'src', 'srcset']
-        });
-        // 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;
-            }
+            allowAttributes: ['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']
         });
         this._setupConversion();
         if (editor.plugins.has('ImageBlockEditing')) {

package/src/imageinsert/imageinsertui.d.ts

@@ -7,7 +7,7 @@
  */
 import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 import { type Observable } from 'ckeditor5/src/utils.js';
-import { type ButtonView, type DropdownView, type FocusableView } from 'ckeditor5/src/ui.js';
+import { type ButtonView, type DropdownView, type FocusableView, type MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 import ImageUtils from '../imageutils.js';
 /**
  * The image insert dropdown plugin.
@@ -17,6 +17,9 @@ import ImageUtils from '../imageutils.js';
  *
  * 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.
  */
 export default class ImageInsertUI extends Plugin {
     /**
@@ -52,7 +55,7 @@ export default class ImageInsertUI extends Plugin {
     /**
      * Registers the insert image dropdown integration.
      */
-    registerIntegration({ name, observable, buttonViewCreator, formViewCreator, requiresForm }: {
+    registerIntegration({ name, observable, buttonViewCreator, formViewCreator, menuBarButtonViewCreator, requiresForm }: {
         name: string;
         observable: (Observable & {
             isEnabled: boolean;
@@ -61,12 +64,17 @@ export default class ImageInsertUI extends Plugin {
         });
         buttonViewCreator: (isOnlyOne: boolean) => ButtonView;
         formViewCreator: (isOnlyOne: boolean) => FocusableView;
+        menuBarButtonViewCreator: (isOnlyOne: boolean) => MenuBarMenuListItemButtonView;
         requiresForm?: boolean;
     }): void;
     /**
      * Creates the toolbar component.
      */
     private _createToolbarComponent;
+    /**
+     * Creates the menu bar component.
+     */
+    private _createMenuBarComponent;
     /**
      * Validates the integrations list.
      */

package/src/imageinsert/imageinsertui.js

@@ -5,9 +5,9 @@
 /**
  * @module image/imageinsert/imageinsertui
  */
-import { Plugin } from 'ckeditor5/src/core.js';
+import { Plugin, icons } from 'ckeditor5/src/core.js';
 import { logWarning } from 'ckeditor5/src/utils.js';
-import { createDropdown, SplitButtonView } from 'ckeditor5/src/ui.js';
+import { createDropdown, MenuBarMenuListItemView, MenuBarMenuListView, MenuBarMenuView, SplitButtonView } from 'ckeditor5/src/ui.js';
 import ImageInsertFormView from './ui/imageinsertformview.js';
 import ImageUtils from '../imageutils.js';
 /**
@@ -18,6 +18,9 @@ import ImageUtils from '../imageutils.js';
  *
  * 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.
  */
 export default class ImageInsertUI extends Plugin {
     /**
@@ -59,14 +62,16 @@ export default class ImageInsertUI extends Plugin {
             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 }) {
+    registerIntegration({ name, observable, buttonViewCreator, formViewCreator, menuBarButtonViewCreator, requiresForm = false }) {
         if (this._integrations.has(name)) {
             /**
              * There are two insert-image integrations registered with the same name.
@@ -80,8 +85,9 @@ export default class ImageInsertUI extends Plugin {
         this._integrations.set(name, {
             observable,
             buttonViewCreator,
+            menuBarButtonViewCreator,
             formViewCreator,
-            requiresForm: !!requiresForm
+            requiresForm
         });
     }
     /**
@@ -121,6 +127,37 @@ export default class ImageInsertUI extends Plugin {
         });
         return dropdownView;
     }
+    /**
+     * 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.
      */

package/src/imageinsert/imageinsertviaurlui.d.ts

@@ -6,17 +6,22 @@
  * @module image/imageinsert/imageinsertviaurlui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { Dialog } from 'ckeditor5/src/ui.js';
 import ImageInsertUI from './imageinsertui.js';
 /**
  * The image insert via URL plugin (UI part).
  *
- * For a detailed overview, check the {@glink features/images/images-inserting
- * Insert images via source URL} documentation.
+ * The plugin introduces two UI components to the {@link module:ui/componentfactory~ComponentFactory UI component factory}:
  *
- * This plugin registers the {@link module:image/imageinsert/imageinsertui~ImageInsertUI} integration for `url`.
+ * * 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.
  */
 export default class ImageInsertViaUrlUI extends Plugin {
     private _imageInsertUI;
+    private _formView?;
     /**
      * @inheritDoc
      */
@@ -24,21 +29,38 @@ export default class ImageInsertViaUrlUI extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof ImageInsertUI];
+    static get requires(): readonly [typeof ImageInsertUI, typeof Dialog];
+    init(): void;
     /**
      * @inheritDoc
      */
     afterInit(): void;
     /**
-     * Creates the view displayed in the dropdown.
+     * Creates the base for various kinds of the button component provided by this feature.
+     */
+    private _createInsertUrlButton;
+    /**
+     * Creates a simple toolbar button, with an icon and a tooltip.
+     */
+    private _createToolbarButton;
+    /**
+     * Creates a button for the dropdown view, with an icon, text and no tooltip.
+     */
+    private _createDropdownButton;
+    /**
+     * Creates a button for the menu bar.
+     */
+    private _createMenuBarButton;
+    /**
+     * Creates the form view used to submit the image URL.
      */
     private _createInsertUrlView;
     /**
-     * Creates the toolbar button.
+     * Shows the insert image via URL form view in a modal.
      */
-    private _createInsertUrlButton;
+    private _showModal;
     /**
-     * Closes the dropdown.
+     * Executes appropriate command depending on selection and form value.
      */
-    private _closePanel;
+    private _handleSave;
 }

package/src/imageinsert/imageinsertviaurlui.js

@@ -6,16 +6,19 @@
  * @module image/imageinsert/imageinsertviaurlui
  */
 import { icons, Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView, CollapsibleView, DropdownButtonView } from 'ckeditor5/src/ui.js';
+import { ButtonView, Dialog, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 import ImageInsertUI from './imageinsertui.js';
 import ImageInsertUrlView from './ui/imageinserturlview.js';
 /**
  * The image insert via URL plugin (UI part).
  *
- * For a detailed overview, check the {@glink features/images/images-inserting
- * Insert images via source URL} documentation.
+ * The plugin introduces two UI components to the {@link module:ui/componentfactory~ComponentFactory UI component factory}:
  *
- * This plugin registers the {@link module:image/imageinsert/imageinsertui~ImageInsertUI} integration for `url`.
+ * * 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.
  */
 export default class ImageInsertViaUrlUI extends Plugin {
     /**
@@ -28,7 +31,11 @@ export default class ImageInsertViaUrlUI extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [ImageInsertUI];
+        return [ImageInsertUI, Dialog];
+    }
+    init() {
+        this.editor.ui.componentFactory.add('insertImageViaUrl', () => this._createToolbarButton());
+        this.editor.ui.componentFactory.add('menuBar:insertImageViaUrl', () => this._createMenuBarButton('standalone'));
     }
     /**
      * @inheritDoc
@@ -38,84 +45,124 @@ export default class ImageInsertViaUrlUI extends Plugin {
         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 view displayed in the dropdown.
+     * 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 form view used to submit the image URL.
      */
-    _createInsertUrlView(isOnlyOne) {
+    _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.
+     * Shows the insert image via URL form view in a modal.
      */
-    _createInsertUrlButton(isOnlyOne) {
-        const ButtonClass = isOnlyOne ? DropdownButtonView : ButtonView;
+    _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.
+     * Executes appropriate command depending on selection and form value.
      */
-    _closePanel() {
-        this.editor.editing.view.focus();
-        this._imageInsertUI.dropdownView.isOpen = false;
+    _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();
     }
 }

package/src/imageinsert/ui/imageinsertformview.js

@@ -44,20 +44,6 @@ export default 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: {
@@ -107,6 +93,3 @@ export default class ImageInsertFormView extends View {
         this._focusCycler.focusFirst();
     }
 }
-function isViewWithFocusCycler(view) {
-    return 'focusCycler' in view;
-}