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

package/lang/translations/uz.po

@@ -186,3 +186,11 @@ msgstr ""
 msgctxt "Label for the widget inserted by the image feature (as in 'insert image')"
 msgid "Image"
 msgstr ""
+
+msgctxt "The label for the header of the image resize balloon."
+msgid "Image Resize"
+msgstr ""
+
+msgctxt "The label of the input field for the text alternative of the image."
+msgid "Text Alternative"
+msgstr ""

package/lang/translations/vi.po

@@ -186,3 +186,11 @@ 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 "Hình ảnh"
+
+msgctxt "The label for the header of the image resize balloon."
+msgid "Image Resize"
+msgstr ""
+
+msgctxt "The label of the input field for the text alternative of the image."
+msgid "Text Alternative"
+msgstr ""

package/lang/translations/zh-cn.po

@@ -186,3 +186,11 @@ msgstr "图片上传时出错"
 msgctxt "Label for the widget inserted by the image feature (as in 'insert image')"
 msgid "Image"
 msgstr "图像"
+
+msgctxt "The label for the header of the image resize balloon."
+msgid "Image Resize"
+msgstr ""
+
+msgctxt "The label of the input field for the text alternative of the image."
+msgid "Text Alternative"
+msgstr ""

package/lang/translations/zh.po

@@ -186,3 +186,11 @@ msgstr "圖片上傳期間發生錯誤"
 msgctxt "Label for the widget inserted by the image feature (as in 'insert image')"
 msgid "Image"
 msgstr "圖片"
+
+msgctxt "The label for the header of the image resize balloon."
+msgid "Image Resize"
+msgstr ""
+
+msgctxt "The label of the input field for the text alternative of the image."
+msgid "Text Alternative"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-image",
-  "version": "44.3.0",
+  "version": "45.0.0-alpha.0",
   "description": "Image feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,17 +13,18 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-clipboard": "44.3.0",
-    "@ckeditor/ckeditor5-core": "44.3.0",
-    "@ckeditor/ckeditor5-engine": "44.3.0",
-    "@ckeditor/ckeditor5-typing": "44.3.0",
-    "@ckeditor/ckeditor5-ui": "44.3.0",
-    "@ckeditor/ckeditor5-undo": "44.3.0",
-    "@ckeditor/ckeditor5-upload": "44.3.0",
-    "@ckeditor/ckeditor5-utils": "44.3.0",
-    "@ckeditor/ckeditor5-widget": "44.3.0",
-    "ckeditor5": "44.3.0",
-    "lodash-es": "4.17.21"
+    "@ckeditor/ckeditor5-clipboard": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-core": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-engine": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-icons": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-typing": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-ui": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-undo": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-upload": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-utils": "45.0.0-alpha.0",
+    "@ckeditor/ckeditor5-widget": "45.0.0-alpha.0",
+    "ckeditor5": "45.0.0-alpha.0",
+    "es-toolkit": "1.32.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/autoimage.js

@@ -40,6 +40,16 @@ export default class AutoImage extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    /**
+     * 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
      */

package/src/image/imagetypecommand.js

@@ -7,6 +7,10 @@ import { Command } from 'ckeditor5/src/core.js';
  * The image type command. It changes the type of a selected image, depending on the configuration.
  */
 export default class ImageTypeCommand extends Command {
+    /**
+     * Model element name the command converts to.
+     */
+    _modelElementName;
     /**
      * @inheritDoc
      *

package/src/imagecaption/imagecaptionediting.js

@@ -37,6 +37,13 @@ export default class ImageCaptionEditing extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    /**
+     * 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
      */

package/src/imagecaption/imagecaptionui.js

@@ -5,8 +5,9 @@
 /**
  * @module image/imagecaption/imagecaptionui
  */
-import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
 import { ButtonView } from 'ckeditor5/src/ui.js';
+import { IconCaption } from 'ckeditor5/src/icons.js';
 import ImageCaptionUtils from './imagecaptionutils.js';
 /**
  * The image caption UI plugin. It introduces the `'toggleImageCaption'` UI button.
@@ -42,7 +43,7 @@ export default class ImageCaptionUI extends Plugin {
             const command = editor.commands.get('toggleImageCaption');
             const view = new ButtonView(locale);
             view.set({
-                icon: icons.caption,
+                icon: IconCaption,
                 tooltip: true,
                 isToggleable: true
             });

package/src/imageinsert/imageinsertui.js

@@ -5,9 +5,10 @@
 /**
  * @module image/imageinsert/imageinsertui
  */
-import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
 import { logWarning } from 'ckeditor5/src/utils.js';
 import { createDropdown, MenuBarMenuListItemView, MenuBarMenuListView, MenuBarMenuView, SplitButtonView } from 'ckeditor5/src/ui.js';
+import { IconImage } from 'ckeditor5/src/icons.js';
 import ImageInsertFormView from './ui/imageinsertformview.js';
 import ImageUtils from '../imageutils.js';
 /**
@@ -41,15 +42,19 @@ export default class ImageInsertUI extends Plugin {
     static get requires() {
         return [ImageUtils];
     }
+    /**
+     * The dropdown view responsible for displaying the image insert UI.
+     */
+    dropdownView;
+    /**
+     * Registered integrations map.
+     */
+    _integrations = new Map();
     /**
      * @inheritDoc
      */
     constructor(editor) {
         super(editor);
-        /**
-         * Registered integrations map.
-         */
-        this._integrations = new Map();
         editor.config.define('image.insert.integrations', [
             'upload',
             'assetManager',
@@ -147,7 +152,7 @@ export default class ImageInsertUI extends Plugin {
         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) {

package/src/imageinsert/imageinsertviaurlui.js

@@ -5,8 +5,9 @@
 /**
  * @module image/imageinsert/imageinsertviaurlui
  */
-import { icons, Plugin } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
 import { ButtonView, Dialog, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
+import { IconImageUrl } from 'ckeditor5/src/icons.js';
 import ImageInsertUI from './imageinsertui.js';
 import ImageInsertUrlView from './ui/imageinserturlview.js';
 /**
@@ -21,6 +22,8 @@ import ImageInsertUrlView from './ui/imageinserturlview.js';
  * through which inserting image via URL is available.
  */
 export default class ImageInsertViaUrlUI extends Plugin {
+    _imageInsertUI;
+    _formView;
     /**
      * @inheritDoc
      */
@@ -61,7 +64,7 @@ export default class ImageInsertViaUrlUI extends Plugin {
      */
     _createInsertUrlButton(ButtonClass) {
         const button = new ButtonClass(this.editor.locale);
-        button.icon = icons.imageUrl;
+        button.icon = IconImageUrl;
         button.on('execute', () => {
             this._showModal();
         });
@@ -136,9 +139,7 @@ export default class ImageInsertViaUrlUI extends Plugin {
         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: [
@@ -148,7 +149,7 @@ export default class ImageInsertViaUrlUI extends Plugin {
                     onExecute: () => dialog.hide()
                 },
                 {
-                    label: t('Accept'),
+                    label: this._imageInsertUI.isImageSelected ? t('Save') : t('Insert'),
                     class: 'ck-button-action',
                     withText: true,
                     onExecute: () => this._handleSave()

package/src/imageinsert/ui/imageinsertformview.js

@@ -14,6 +14,26 @@ import '../../../theme/imageinsert.css';
  * See {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
  */
 export default class ImageInsertFormView extends View {
+    /**
+     * Tracks information about DOM focus in the form.
+     */
+    focusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes;
+    /**
+     * A collection of views that can be focused in the form.
+     */
+    _focusables;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    _focusCycler;
+    /**
+     * 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}.
      *

package/src/imageinsert/ui/imageinserturlview.js

@@ -13,6 +13,14 @@ import { KeystrokeHandler } from 'ckeditor5/src/utils.js';
  * See {@link module:image/imageinsert/imageinsertviaurlui~ImageInsertViaUrlUI}.
  */
 export default class ImageInsertUrlView extends View {
+    /**
+     * The URL input field view.
+     */
+    urlInputView;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    keystrokes;
     /**
      * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
      *

package/src/imageresize/imagecustomresizeui.js

@@ -17,6 +17,14 @@ import { getSelectedImagePossibleResizeRange } from './utils/getselectedimagepos
  * The plugin uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
  */
 export default class ImageCustomResizeUI extends Plugin {
+    /**
+     * The contextual balloon plugin instance.
+     */
+    _balloon;
+    /**
+     * A form containing a textarea and buttons, used to change the `alt` text value.
+     */
+    _form;
     /**
      * @inheritDoc
      */
@@ -70,11 +78,6 @@ export default class ImageCustomResizeUI extends Plugin {
         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,

package/src/imageresize/imageresizebuttons.d.ts

@@ -2,6 +2,9 @@
  * @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
  */
+/**
+ * @module image/imageresize/imageresizebuttons
+ */
 import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 import ImageResizeEditing from './imageresizeediting.js';
 /**

package/src/imageresize/imageresizebuttons.js

@@ -5,17 +5,17 @@
 /**
  * @module image/imageresize/imageresizebuttons
  */
-import { map } from 'lodash-es';
-import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
 import { ButtonView, DropdownButtonView, ViewModel, createDropdown, addListToDropdown } from 'ckeditor5/src/ui.js';
 import { CKEditorError, Collection } from 'ckeditor5/src/utils.js';
+import { IconObjectSizeCustom, IconObjectSizeFull, IconObjectSizeLarge, IconObjectSizeMedium, IconObjectSizeSmall } from 'ckeditor5/src/icons.js';
 import ImageResizeEditing from './imageresizeediting.js';
 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.
@@ -41,6 +41,11 @@ export default class ImageResizeButtons extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    /**
+     * The resize unit.
+     * @default '%'
+     */
+    _resizeUnit;
     /**
      * @inheritDoc
      */
@@ -103,7 +108,7 @@ export default class ImageResizeButtons extends Plugin {
             }
             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 });
                 });
@@ -246,8 +251,8 @@ export default class ImageResizeButtons extends Plugin {
                         }
                     })
                 };
-                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 = {
@@ -261,7 +266,7 @@ export default class ImageResizeButtons extends Plugin {
                         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);
@@ -279,8 +284,11 @@ function isCustomImageResizeOption(option) {
  * 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;
         }
@@ -291,5 +299,5 @@ function getIsOnButtonCallback(value) {
  * 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));
 }

package/src/imageresize/resizeimagecommand.d.ts

@@ -13,7 +13,7 @@ export default class ResizeImageCommand extends Command {
     /**
      * Desired image width and height.
      */
-    value: null | {
+    value: undefined | null | {
         width: string | null;
         height: string | null;
     };

package/src/imageresize/ui/imagecustomresizeformview.d.ts

@@ -9,6 +9,7 @@ import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, type F
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
 import '../../../theme/imagecustomresizeform.css';
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
 /**
  * The ImageCustomResizeFormView class.
  */
@@ -26,17 +27,21 @@ export default class ImageCustomResizeFormView extends View {
      */
     readonly unit: string;
     /**
-     * An input with a label.
+     * The Back button view displayed in the header.
      */
-    labeledInput: LabeledFieldView<InputNumberView>;
+    backButtonView: ButtonView;
     /**
      * A button used to submit the form.
      */
     saveButtonView: ButtonView;
     /**
-     * A button used to cancel the form.
+     * An input with a label.
+     */
+    labeledInput: LabeledFieldView<InputNumberView>;
+    /**
+     * A collection of child views.
      */
-    cancelButtonView: ButtonView;
+    readonly children: ViewCollection;
     /**
      * A collection of views which can be focused in the form.
      */
@@ -62,15 +67,17 @@ export default class ImageCustomResizeFormView extends View {
      */
     destroy(): void;
     /**
-     * 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.
+     * Creates a back button view that cancels the form.
+     */
+    private _createBackButton;
+    /**
+     * Creates a save button view that resize the image.
+     */
+    private _createSaveButton;
+    /**
+     * Creates a header view for the form.
      */
-    private _createButton;
+    private _createHeaderView;
     /**
      * Creates an input with a label.
      *