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

package/src/imagetextalternative/ui/textalternativeformview.js

@@ -5,30 +5,82 @@
 /**
  * @module image/imagetextalternative/ui/textalternativeformview
  */
-import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui.js';
+import { ButtonView, FocusCycler, FormRowView, FormHeaderView, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { icons } from 'ckeditor5/src/core.js';
+import { IconPreviousArrow } from 'ckeditor5/src/icons.js';
 import '../../../theme/textalternativeform.css';
 // See: #8833.
 // eslint-disable-next-line ckeditor5-rules/ckeditor-imports
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
 /**
  * The TextAlternativeFormView class.
  */
 export default 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;
+    /**
+     * The Back button view displayed in the header.
+     */
+    backButtonView;
+    /**
+     * A button used to submit the form.
+     */
+    saveButtonView;
+    /**
+     * A collection of child views.
+     */
+    children;
+    /**
+     * 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();
+        // 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,
@@ -45,17 +97,14 @@ export default class TextAlternativeFormView extends View {
             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
         });
     }
     /**
@@ -63,15 +112,21 @@ export default class TextAlternativeFormView extends View {
      */
     render() {
         super.render();
-        this.keystrokes.listenTo(this.element);
-        submitHandler({ view: this });
-        [this.labeledInput, this.saveButtonView, this.cancelButtonView]
-            .forEach(v => {
+        submitHandler({
+            view: this
+        });
+        const childViews = [
+            this.backButtonView,
+            this.labeledInput,
+            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
@@ -82,30 +137,44 @@ export default class TextAlternativeFormView extends View {
         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.
+     * Creates a back button view that cancels the form.
      */
-    _createButton(label, icon, className, eventName) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            icon,
+    _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'
+        });
+        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')
         });
-        if (eventName) {
-            button.delegate('execute').to(this, eventName);
-        }
-        return button;
+        header.children.add(this.backButtonView, 0);
+        return header;
     }
     /**
      * Creates an input with a label.
@@ -116,6 +185,7 @@ export default class TextAlternativeFormView extends View {
         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;
     }
 }

package/src/imagetoolbar.js

@@ -8,7 +8,7 @@
 import { Plugin } from 'ckeditor5/src/core.js';
 import { WidgetToolbarRepository } from 'ckeditor5/src/widget.js';
 import ImageUtils from './imageutils.js';
-import { isObject } from 'lodash-es';
+import { isObject } from 'es-toolkit/compat';
 /**
  * The image toolbar plugin. It creates and manages the image toolbar (the toolbar displayed when an image is selected).
  *

package/src/imageupload/imageuploadediting.js

@@ -38,18 +38,28 @@ export default class ImageUploadEditing extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    /**
+     * 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;
+    /**
+     * An internal mapping of {@link module:upload/filerepository~FileLoader#id file loader UIDs} and
+     * upload responses for handling images dragged during their upload process. When such images are later
+     * dropped, their original upload IDs no longer exist in the registry (as the original upload completed).
+     * This map preserves the upload responses to properly handle such cases.
+     */
+    _uploadedImages = new Map();
     /**
      * @inheritDoc
      */
     constructor(editor) {
         super(editor);
-        /**
-         * An internal mapping of {@link module:upload/filerepository~FileLoader#id file loader UIDs} and
-         * upload responses for handling images dragged during their upload process. When such images are later
-         * dropped, their original upload IDs no longer exist in the registry (as the original upload completed).
-         * This map preserves the upload responses to properly handle such cases.
-         */
-        this._uploadedImages = new Map();
         editor.config.define('image', {
             upload: {
                 types: ['jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff']

package/src/imageupload/imageuploadprogress.js

@@ -28,64 +28,17 @@ export default class ImageUploadProgress extends Plugin {
     static get isOfficialPlugin() {
         return true;
     }
+    /**
+     * 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 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);
-                _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);
-            }
-            // Clean up.
-            _hideProgressBar(viewFigure, viewWriter);
-            _hidePlaceholder(viewFigure, viewWriter);
-            _stopAppearEffect(viewFigure, viewWriter);
-        };
         this.placeholder = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
     }
     /**
@@ -101,6 +54,59 @@ export default class ImageUploadProgress extends Plugin {
             editor.editing.downcastDispatcher.on('attribute:uploadStatus:imageInline', this.uploadStatusChange);
         }
     }
+    /**
+     * 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);
+            }
+            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);
+        }
+        // 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.

package/src/imageupload/imageuploadui.js

@@ -5,8 +5,9 @@
 /**
  * @module image/imageupload/imageuploadui
  */
-import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
 import { FileDialogButtonView, MenuBarMenuListItemFileDialogButtonView } from 'ckeditor5/src/ui.js';
+import { IconImageUpload } from 'ckeditor5/src/icons.js';
 import { createImageTypeRegExp } from './utils.js';
 /**
  * The image upload button plugin.
@@ -68,7 +69,7 @@ export default class ImageUploadUI extends Plugin {
             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) => {

package/src/imageutils.js

@@ -11,13 +11,10 @@ const IMAGE_WIDGETS_CLASSES_MATCH_REGEXP = /^(image|image-inline)$/;
  * A set of helpers related to images.
  */
 export default class ImageUtils extends Plugin {
-    constructor() {
-        super(...arguments);
-        /**
-         * DOM Emitter.
-         */
-        this._domEmitter = new (DomEmitterMixin())();
-    }
+    /**
+     * DOM Emitter.
+     */
+    _domEmitter = new (DomEmitterMixin())();
     /**
      * @inheritDoc
      */

package/theme/imagecustomresizeform.css

@@ -2,32 +2,3 @@
  * 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 "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
-
-.ck.ck-image-custom-resize-form {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	align-items: flex-start;
-
-	& .ck-labeled-field-view {
-		display: inline-block;
-	}
-
-	& .ck-label {
-		display: none;
-	}
-
-	@mixin ck-media-phone {
-		flex-wrap: wrap;
-
-		& .ck-labeled-field-view {
-			flex-basis: 100%;
-		}
-
-		& .ck-button {
-			flex-basis: 50%;
-		}
-	}
-}

package/theme/textalternativeform.css

@@ -2,31 +2,3 @@
  * 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 "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
-
-.ck.ck-text-alternative-form {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-
-	& .ck-labeled-field-view {
-		display: inline-block;
-	}
-
-	& .ck-label {
-		display: none;
-	}
-
-	@mixin ck-media-phone {
-		flex-wrap: wrap;
-
-		& .ck-labeled-field-view {
-			flex-basis: 100%;
-		}
-
-		& .ck-button {
-			flex-basis: 50%;
-		}
-	}
-}