@ckeditor/ckeditor5-image 44.3.0-alpha.7 → 45.0.0-alpha.0

package/dist/index.js

@@ -2,16 +2,17 @@
  * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import { Plugin, Command, icons } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { Plugin, Command } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { Clipboard, ClipboardPipeline } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
 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, 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, 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 { View, FormRowView, ViewCollection, FocusCycler, submitHandler, ButtonView, FormHeaderView, 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 { IconPreviousArrow, IconTextAlternative, IconImage, IconCaption, IconImageUpload, IconImageUrl, IconObjectSizeFull, IconObjectSizeCustom, IconObjectSizeLarge, IconObjectSizeMedium, IconObjectSizeSmall, IconObjectInline, IconObjectInlineRight, IconObjectInlineLeft, IconObjectCenter, IconObjectRight, IconObjectLeft, IconObjectFullWidth } from '@ckeditor/ckeditor5-icons/dist/index.js';
 import { FileRepository } from '@ckeditor/ckeditor5-upload/dist/index.js';
-import { map, isObject, identity } from 'lodash-es';
+import { isObject, identity } from 'es-toolkit/compat';
 
 /**
  * Creates a view element representing the inline image.
@@ -623,12 +624,15 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
     /**
 	 * An input with a label.
 	 */ labeledInput;
+    /**
+	 * The Back button view displayed in the header.
+	 */ backButtonView;
     /**
 	 * A button used to submit the form.
 	 */ saveButtonView;
     /**
-	 * A button used to cancel the form.
-	 */ cancelButtonView;
+	 * A collection of child views.
+	 */ children;
     /**
 	 * A collection of views which can be focused in the form.
 	 */ _focusables;
@@ -639,14 +643,32 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
 	 * @inheritDoc
 	 */ constructor(locale){
         super(locale);
-        const t = this.locale.t;
         this.focusTracker = new FocusTracker();
         this.keystrokes = new KeystrokeHandler();
+        // Create buttons.
+        this.backButtonView = this._createBackButton();
+        this.saveButtonView = this._createSaveButton();
+        // Create input fields.
         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.children = this.createCollection([
+            this._createHeaderView()
+        ]);
+        this.children.add(new FormRowView(locale, {
+            children: [
+                this.labeledInput,
+                this.saveButtonView
+            ],
+            class: [
+                'ck-form__row_with-submit',
+                'ck-form__row_large-top-padding'
+            ]
+        }));
         this._focusables = new ViewCollection();
+        // Close the panel on esc key press when the **form has focus**.
+        this.keystrokes.set('Esc', (data, cancel)=>{
+            this.fire('cancel');
+            cancel();
+        });
         this._focusCycler = new FocusCycler({
             focusables: this._focusables,
             focusTracker: this.focusTracker,
@@ -663,37 +685,35 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             attributes: {
                 class: [
                     'ck',
+                    'ck-form',
                     'ck-text-alternative-form',
                     'ck-responsive-form'
                 ],
                 // https://github.com/ckeditor/ckeditor5-image/issues/40
                 tabindex: '-1'
             },
-            children: [
-                this.labeledInput,
-                this.saveButtonView,
-                this.cancelButtonView
-            ]
+            children: this.children
         });
     }
     /**
 	 * @inheritDoc
 	 */ render() {
         super.render();
-        this.keystrokes.listenTo(this.element);
         submitHandler({
             view: this
         });
-        [
+        const childViews = [
+            this.backButtonView,
             this.labeledInput,
-            this.saveButtonView,
-            this.cancelButtonView
-        ].forEach((v)=>{
+            this.saveButtonView
+        ];
+        childViews.forEach((v)=>{
             // Register the view as focusable.
             this._focusables.add(v);
             // Register the view in the focus tracker.
             this.focusTracker.add(v.element);
         });
+        this.keystrokes.listenTo(this.element);
     }
     /**
 	 * @inheritDoc
@@ -703,29 +723,41 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         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) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            icon,
+	 * Creates a back button view that cancels the form.
+	 */ _createBackButton() {
+        const t = this.locale.t;
+        const backButton = new ButtonView(this.locale);
+        backButton.set({
+            class: 'ck-button-back',
+            label: t('Back'),
+            icon: IconPreviousArrow,
             tooltip: true
         });
-        button.extendTemplate({
-            attributes: {
-                class: className
-            }
+        backButton.delegate('execute').to(this, 'cancel');
+        return backButton;
+    }
+    /**
+	 * Creates a save button view that text alternative the image.
+	 */ _createSaveButton() {
+        const t = this.locale.t;
+        const saveButton = new ButtonView(this.locale);
+        saveButton.set({
+            label: t('Save'),
+            withText: true,
+            type: 'submit',
+            class: 'ck-button-action ck-button-bold'
         });
-        if (eventName) {
-            button.delegate('execute').to(this, eventName);
-        }
-        return button;
+        return saveButton;
+    }
+    /**
+	 * Creates a header view for the form.
+	 */ _createHeaderView() {
+        const t = this.locale.t;
+        const header = new FormHeaderView(this.locale, {
+            label: t('Text Alternative')
+        });
+        header.children.add(this.backButtonView, 0);
+        return header;
     }
     /**
 	 * Creates an input with a label.
@@ -735,6 +767,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         const t = this.locale.t;
         const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
         labeledInput.label = t('Text alternative');
+        labeledInput.class = 'ck-labeled-field-view_full-width';
         return labeledInput;
     }
 }
@@ -830,7 +863,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             const view = new ButtonView(locale);
             view.set({
                 label: t('Change image text alternative'),
-                icon: icons.textAlternative,
+                icon: IconTextAlternative,
                 tooltip: true
             });
             view.bind('isEnabled').to(command, 'isEnabled');
@@ -862,11 +895,6 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         this.listenTo(this._form, 'cancel', ()=>{
             this._hideForm(true);
         });
-        // Close the form on Esc key press.
-        this._form.keystrokes.set('Esc', (data, cancel)=>{
-            this._hideForm(true);
-            cancel();
-        });
         // Reposition the balloon or hide the form if an image widget is no longer selected.
         this.listenTo(editor.ui, 'update', ()=>{
             if (!imageUtils.getClosestSelectedImageWidget(viewDocument.selection)) {
@@ -2194,7 +2222,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         const listView = new MenuBarMenuListView(locale);
         resultView.panelView.children.add(listView);
         resultView.buttonView.set({
-            icon: icons.image,
+            icon: IconImage,
             label: t('Image')
         });
         for (const integrationView of integrationViews){
@@ -2956,7 +2984,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             const command = editor.commands.get('toggleImageCaption');
             const view = new ButtonView(locale);
             view.set({
-                icon: icons.caption,
+                icon: IconCaption,
                 tooltip: true,
                 isToggleable: true
             });
@@ -3164,7 +3192,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             acceptedType: imageTypes.map((type)=>`image/${type}`).join(','),
             allowMultipleFiles: true,
             label: t('Upload from computer'),
-            icon: icons.imageUpload
+            icon: IconImageUpload
         });
         view.bind('isEnabled').to(command);
         view.on('done', (evt, files)=>{
@@ -4179,7 +4207,7 @@ function getImagesFromChangeItem(editor, item) {
 	 * 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.icon = IconImageUrl;
         button.on('execute', ()=>{
             this._showModal();
         });
@@ -4252,7 +4280,7 @@ function getImagesFromChangeItem(editor, item) {
         this._formView.imageURLInputValue = replaceImageSourceCommand.value || '';
         dialog.show({
             id: 'insertImageViaUrl',
-            title: this._imageInsertUI.isImageSelected ? t('Update image URL') : t('Insert image via URL'),
+            title: t('Image via URL'),
             isModal: true,
             content: this._formView,
             actionButtons: [
@@ -4262,7 +4290,7 @@ function getImagesFromChangeItem(editor, item) {
                     onExecute: ()=>dialog.hide()
                 },
                 {
-                    label: t('Accept'),
+                    label: this._imageInsertUI.isImageSelected ? t('Save') : t('Insert'),
                     class: 'ck-button-action',
                     withText: true,
                     onExecute: ()=>this._handleSave()
@@ -4582,11 +4610,11 @@ function getImagesFromChangeItem(editor, item) {
 }
 
 const RESIZE_ICONS = /* #__PURE__ */ (()=>({
-        small: icons.objectSizeSmall,
-        medium: icons.objectSizeMedium,
-        large: icons.objectSizeLarge,
-        custom: icons.objectSizeCustom,
-        original: icons.objectSizeFull
+        small: IconObjectSizeSmall,
+        medium: IconObjectSizeMedium,
+        large: IconObjectSizeLarge,
+        custom: IconObjectSizeCustom,
+        original: IconObjectSizeFull
     }))();
 /**
  * The image resize buttons plugin.
@@ -4671,7 +4699,7 @@ const RESIZE_ICONS = /* #__PURE__ */ (()=>({
                 });
             } else {
                 const optionValueWithUnit = value ? value + this._resizeUnit : null;
-                button.bind('isOn').to(command, 'value', getIsOnButtonCallback(optionValueWithUnit));
+                button.bind('isOn').to(command, 'value', command, 'isEnabled', getIsOnButtonCallback(optionValueWithUnit));
                 this.listenTo(button, 'execute', ()=>{
                     editor.execute('resizeImage', {
                         width: optionValueWithUnit
@@ -4807,8 +4835,8 @@ const RESIZE_ICONS = /* #__PURE__ */ (()=>({
                         }
                     })
                 };
-                const allDropdownValues = map(optionsWithSerializedValues, 'valueWithUnits');
-                definition.model.bind('isOn').to(command, 'value', getIsOnCustomButtonCallback(allDropdownValues));
+                const allDropdownValues = Object.values(optionsWithSerializedValues).map((option)=>option.valueWithUnits);
+                definition.model.bind('isOn').to(command, 'value', command, 'isEnabled', getIsOnCustomButtonCallback(allDropdownValues));
             } else {
                 definition = {
                     type: 'button',
@@ -4821,7 +4849,7 @@ const RESIZE_ICONS = /* #__PURE__ */ (()=>({
                         icon: null
                     })
                 };
-                definition.model.bind('isOn').to(command, 'value', getIsOnButtonCallback(option.valueWithUnits));
+                definition.model.bind('isOn').to(command, 'value', command, 'isEnabled', getIsOnButtonCallback(option.valueWithUnits));
             }
             definition.model.bind('isEnabled').to(command, 'isEnabled');
             itemDefinitions.add(definition);
@@ -4837,8 +4865,11 @@ const RESIZE_ICONS = /* #__PURE__ */ (()=>({
 /**
  * A helper function for setting the `isOn` state of buttons in value bindings.
  */ function getIsOnButtonCallback(value) {
-    return (commandValue)=>{
+    return (commandValue, isEnabled)=>{
         const objectCommandValue = commandValue;
+        if (objectCommandValue === undefined || !isEnabled) {
+            return false;
+        }
         if (value === null && objectCommandValue === value) {
             return true;
         }
@@ -4848,7 +4879,7 @@ const RESIZE_ICONS = /* #__PURE__ */ (()=>({
 /**
  * A helper function for setting the `isOn` state of custom size button in value bindings.
  */ function getIsOnCustomButtonCallback(allDropdownValues) {
-    return (commandValue)=>!allDropdownValues.some((dropdownValue)=>getIsOnButtonCallback(dropdownValue)(commandValue));
+    return (commandValue, isEnabled)=>!allDropdownValues.some((dropdownValue)=>getIsOnButtonCallback(dropdownValue)(commandValue, isEnabled));
 }
 
 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';
@@ -5074,14 +5105,17 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 	 * Resize unit shortcut.
 	 */ unit;
     /**
-	 * An input with a label.
-	 */ labeledInput;
+	 * The Back button view displayed in the header.
+	 */ backButtonView;
     /**
 	 * A button used to submit the form.
 	 */ saveButtonView;
     /**
-	 * A button used to cancel the form.
-	 */ cancelButtonView;
+	 * An input with a label.
+	 */ labeledInput;
+    /**
+	 * A collection of child views.
+	 */ children;
     /**
 	 * A collection of views which can be focused in the form.
 	 */ _focusables;
@@ -5095,16 +5129,34 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 	 * @inheritDoc
 	 */ constructor(locale, unit, validators){
         super(locale);
-        const t = this.locale.t;
         this.focusTracker = new FocusTracker();
         this.keystrokes = new KeystrokeHandler();
         this.unit = unit;
+        // Create buttons.
+        this.backButtonView = this._createBackButton();
+        this.saveButtonView = this._createSaveButton();
+        // Create input fields.
         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.children = this.createCollection([
+            this._createHeaderView()
+        ]);
+        this.children.add(new FormRowView(locale, {
+            children: [
+                this.labeledInput,
+                this.saveButtonView
+            ],
+            class: [
+                'ck-form__row_with-submit',
+                'ck-form__row_large-top-padding'
+            ]
+        }));
         this._focusables = new ViewCollection();
         this._validators = validators;
+        // Close the panel on esc key press when the **form has focus**.
+        this.keystrokes.set('Esc', (data, cancel)=>{
+            this.fire('cancel');
+            cancel();
+        });
         this._focusCycler = new FocusCycler({
             focusables: this._focusables,
             focusTracker: this.focusTracker,
@@ -5121,37 +5173,35 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
             attributes: {
                 class: [
                     'ck',
+                    'ck-form',
                     '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
-            ]
+            children: this.children
         });
     }
     /**
 	 * @inheritDoc
 	 */ render() {
         super.render();
-        this.keystrokes.listenTo(this.element);
         submitHandler({
             view: this
         });
-        [
+        const childViews = [
+            this.backButtonView,
             this.labeledInput,
-            this.saveButtonView,
-            this.cancelButtonView
-        ].forEach((v)=>{
+            this.saveButtonView
+        ];
+        childViews.forEach((v)=>{
             // Register the view as focusable.
             this._focusables.add(v);
             // Register the view in the focus tracker.
             this.focusTracker.add(v.element);
         });
+        this.keystrokes.listenTo(this.element);
     }
     /**
 	 * @inheritDoc
@@ -5161,29 +5211,41 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         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) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            icon,
+	 * Creates a back button view that cancels the form.
+	 */ _createBackButton() {
+        const t = this.locale.t;
+        const backButton = new ButtonView(this.locale);
+        backButton.set({
+            class: 'ck-button-back',
+            label: t('Back'),
+            icon: IconPreviousArrow,
             tooltip: true
         });
-        button.extendTemplate({
-            attributes: {
-                class: className
-            }
+        backButton.delegate('execute').to(this, 'cancel');
+        return backButton;
+    }
+    /**
+	 * Creates a save button view that resize the image.
+	 */ _createSaveButton() {
+        const t = this.locale.t;
+        const saveButton = new ButtonView(this.locale);
+        saveButton.set({
+            label: t('Save'),
+            withText: true,
+            type: 'submit',
+            class: 'ck-button-action ck-button-bold'
         });
-        if (eventName) {
-            button.delegate('execute').to(this, eventName);
-        }
-        return button;
+        return saveButton;
+    }
+    /**
+	 * Creates a header view for the form.
+	 */ _createHeaderView() {
+        const t = this.locale.t;
+        const header = new FormHeaderView(this.locale, {
+            label: t('Image Resize')
+        });
+        header.children.add(this.backButtonView, 0);
+        return header;
     }
     /**
 	 * Creates an input with a label.
@@ -5193,6 +5255,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         const t = this.locale.t;
         const labeledInput = new LabeledFieldView(this.locale, createLabeledInputNumber);
         labeledInput.label = t('Resize image (in %0)', this.unit);
+        labeledInput.class = 'ck-labeled-field-view_full-width';
         labeledInput.fieldView.set({
             step: 0.1
         });
@@ -5339,11 +5402,6 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         this.listenTo(this._form, 'cancel', ()=>{
             this._hideForm(true);
         });
-        // Close the form on Esc key press.
-        this._form.keystrokes.set('Esc', (data, cancel)=>{
-            this._hideForm(true);
-            cancel();
-        });
         // Close on click outside of balloon panel element.
         clickOutsideHandler({
             emitter: this._form,
@@ -5597,7 +5655,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         return {
             name: 'inline',
             title: 'In line',
-            icon: icons.objectInline,
+            icon: IconObjectInline,
             modelElements: [
                 'imageInline'
             ],
@@ -5609,7 +5667,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         return {
             name: 'alignLeft',
             title: 'Left aligned image',
-            icon: icons.objectLeft,
+            icon: IconObjectInlineLeft,
             modelElements: [
                 'imageBlock',
                 'imageInline'
@@ -5622,7 +5680,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         return {
             name: 'alignBlockLeft',
             title: 'Left aligned image',
-            icon: icons.objectBlockLeft,
+            icon: IconObjectLeft,
             modelElements: [
                 'imageBlock'
             ],
@@ -5634,7 +5692,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         return {
             name: 'alignCenter',
             title: 'Centered image',
-            icon: icons.objectCenter,
+            icon: IconObjectCenter,
             modelElements: [
                 'imageBlock'
             ],
@@ -5646,7 +5704,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         return {
             name: 'alignRight',
             title: 'Right aligned image',
-            icon: icons.objectRight,
+            icon: IconObjectInlineRight,
             modelElements: [
                 'imageBlock',
                 'imageInline'
@@ -5659,7 +5717,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         return {
             name: 'alignBlockRight',
             title: 'Right aligned image',
-            icon: icons.objectBlockRight,
+            icon: IconObjectRight,
             modelElements: [
                 'imageBlock'
             ],
@@ -5671,7 +5729,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         return {
             name: 'block',
             title: 'Centered image',
-            icon: icons.objectCenter,
+            icon: IconObjectCenter,
             modelElements: [
                 'imageBlock'
             ],
@@ -5683,7 +5741,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
         return {
             name: 'side',
             title: 'Side image',
-            icon: icons.objectRight,
+            icon: IconObjectInlineRight,
             modelElements: [
                 'imageBlock'
             ],
@@ -5699,13 +5757,13 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
  *
  * There are 7 default icons available: `'full'`, `'left'`, `'inlineLeft'`, `'center'`, `'right'`, `'inlineRight'`, and `'inline'`.
  */ 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
+        full: IconObjectFullWidth,
+        left: IconObjectLeft,
+        right: IconObjectRight,
+        center: IconObjectCenter,
+        inlineLeft: IconObjectInlineLeft,
+        inlineRight: IconObjectInlineRight,
+        inline: IconObjectInline
     }))();
 /**
  * Default drop-downs provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#toolbar}