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

package/src/imageresize/ui/imagecustomresizeformview.js

@@ -5,32 +5,90 @@
 /**
  * @module image/imageresize/ui/imagecustomresizeformview
  */
-import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, createLabeledInputNumber, submitHandler } from 'ckeditor5/src/ui.js';
+import { ButtonView, FocusCycler, FormHeaderView, FormRowView, LabeledFieldView, View, ViewCollection, createLabeledInputNumber, 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/imagecustomresizeform.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 ImageCustomResizeFormView class.
  */
 export default 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;
+    /**
+     * The Back button view displayed in the header.
+     */
+    backButtonView;
+    /**
+     * A button used to submit the form.
+     */
+    saveButtonView;
+    /**
+     * An input with a label.
+     */
+    labeledInput;
+    /**
+     * 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;
+    /**
+     * 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;
+        // 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,
@@ -47,17 +105,14 @@ export default class ImageCustomResizeFormView extends View {
             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
         });
     }
     /**
@@ -65,15 +120,21 @@ export default class ImageCustomResizeFormView 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
@@ -84,30 +145,44 @@ export default class ImageCustomResizeFormView 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.
-     */
-    _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.
@@ -118,6 +193,7 @@ export default class ImageCustomResizeFormView extends View {
         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
         });

package/src/imagestyle/imagestylecommand.js

@@ -11,6 +11,16 @@ import { Command } from 'ckeditor5/src/core.js';
  * type. See {@link module:image/imagestyle/imagestylecommand~ImageStyleCommand#execute} to learn more.
  */
 export default 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.

package/src/imagestyle/imagestyleediting.js

@@ -33,6 +33,18 @@ export default class ImageStyleEditing extends Plugin {
     static get requires() {
         return [ImageUtils];
     }
+    /**
+     * 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
      */

package/src/imagestyle/imagestyleui.js

@@ -7,7 +7,7 @@
  */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { ButtonView, createDropdown, addToolbarToDropdown, SplitButtonView } from 'ckeditor5/src/ui.js';
-import { isObject, identity } from 'lodash-es';
+import { isObject, identity } from 'es-toolkit/compat';
 import ImageStyleEditing from './imagestyleediting.js';
 import utils from './utils.js';
 import '../../theme/imagestyle.css';

package/src/imagestyle/utils.d.ts

@@ -2,10 +2,7 @@
  * @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/imagestyle/utils
- */
-import { type Editor, type PluginCollection } from 'ckeditor5/src/core.js';
+import type { Editor, PluginCollection } from 'ckeditor5/src/core.js';
 import type { ImageStyleConfig, ImageStyleDropdownDefinition, ImageStyleOptionDefinition } from '../imageconfig.js';
 /**
  * Default image style options provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}

package/src/imagestyle/utils.js

@@ -5,8 +5,8 @@
 /**
  * @module image/imagestyle/utils
  */
-import { icons } from 'ckeditor5/src/core.js';
 import { logWarning } from 'ckeditor5/src/utils.js';
+import { IconObjectCenter, IconObjectFullWidth, IconObjectInline, IconObjectInlineLeft, IconObjectInlineRight, IconObjectLeft, IconObjectRight } from 'ckeditor5/src/icons.js';
 /**
  * Default image style options provided by the plugin that can be referred in the {@link module:image/imageconfig~ImageConfig#styles}
  * configuration.
@@ -31,7 +31,7 @@ export const DEFAULT_OPTIONS = {
         return {
             name: 'inline',
             title: 'In line',
-            icon: icons.objectInline,
+            icon: IconObjectInline,
             modelElements: ['imageInline'],
             isDefault: true
         };
@@ -41,7 +41,7 @@ export const DEFAULT_OPTIONS = {
         return {
             name: 'alignLeft',
             title: 'Left aligned image',
-            icon: icons.objectLeft,
+            icon: IconObjectInlineLeft,
             modelElements: ['imageBlock', 'imageInline'],
             className: 'image-style-align-left'
         };
@@ -51,7 +51,7 @@ export const DEFAULT_OPTIONS = {
         return {
             name: 'alignBlockLeft',
             title: 'Left aligned image',
-            icon: icons.objectBlockLeft,
+            icon: IconObjectLeft,
             modelElements: ['imageBlock'],
             className: 'image-style-block-align-left'
         };
@@ -61,7 +61,7 @@ export const DEFAULT_OPTIONS = {
         return {
             name: 'alignCenter',
             title: 'Centered image',
-            icon: icons.objectCenter,
+            icon: IconObjectCenter,
             modelElements: ['imageBlock'],
             className: 'image-style-align-center'
         };
@@ -71,7 +71,7 @@ export const DEFAULT_OPTIONS = {
         return {
             name: 'alignRight',
             title: 'Right aligned image',
-            icon: icons.objectRight,
+            icon: IconObjectInlineRight,
             modelElements: ['imageBlock', 'imageInline'],
             className: 'image-style-align-right'
         };
@@ -81,7 +81,7 @@ export const DEFAULT_OPTIONS = {
         return {
             name: 'alignBlockRight',
             title: 'Right aligned image',
-            icon: icons.objectBlockRight,
+            icon: IconObjectRight,
             modelElements: ['imageBlock'],
             className: 'image-style-block-align-right'
         };
@@ -91,7 +91,7 @@ export const DEFAULT_OPTIONS = {
         return {
             name: 'block',
             title: 'Centered image',
-            icon: icons.objectCenter,
+            icon: IconObjectCenter,
             modelElements: ['imageBlock'],
             isDefault: true
         };
@@ -101,7 +101,7 @@ export const DEFAULT_OPTIONS = {
         return {
             name: 'side',
             title: 'Side image',
-            icon: icons.objectRight,
+            icon: IconObjectInlineRight,
             modelElements: ['imageBlock'],
             className: 'image-style-side'
         };
@@ -116,13 +116,13 @@ export const DEFAULT_OPTIONS = {
  * There are 7 default icons available: `'full'`, `'left'`, `'inlineLeft'`, `'center'`, `'right'`, `'inlineRight'`, and `'inline'`.
  */
 export 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}

package/src/imagetextalternative/imagetextalternativeui.js

@@ -5,8 +5,9 @@
 /**
  * @module image/imagetextalternative/imagetextalternativeui
  */
-import { Plugin, icons } from 'ckeditor5/src/core.js';
+import { Plugin } from 'ckeditor5/src/core.js';
 import { ButtonView, ContextualBalloon, clickOutsideHandler, CssTransitionDisablerMixin } from 'ckeditor5/src/ui.js';
+import { IconTextAlternative } from 'ckeditor5/src/icons.js';
 import TextAlternativeFormView from './ui/textalternativeformview.js';
 import { repositionContextualBalloon, getBalloonPositionData } from '../image/ui/utils.js';
 /**
@@ -15,6 +16,14 @@ import { repositionContextualBalloon, getBalloonPositionData } from '../image/ui
  * The plugin uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
  */
 export default class ImageTextAlternativeUI extends Plugin {
+    /**
+     * The contextual balloon plugin instance.
+     */
+    _balloon;
+    /**
+     * A form containing a textarea and buttons, used to change the `alt` text value.
+     */
+    _form;
     /**
      * @inheritDoc
      */
@@ -61,7 +70,7 @@ export default class ImageTextAlternativeUI extends Plugin {
             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');
@@ -94,11 +103,6 @@ export default class ImageTextAlternativeUI 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();
-        });
         // 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)) {

package/src/imagetextalternative/ui/textalternativeformview.d.ts

@@ -9,6 +9,7 @@ import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, type I
 import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
 import '../../../theme/textalternativeform.css';
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+import '@ckeditor/ckeditor5-ui/theme/components/form/form.css';
 /**
  * The TextAlternativeFormView class.
  */
@@ -25,14 +26,18 @@ export default class TextAlternativeFormView extends View {
      * An input with a label.
      */
     labeledInput: LabeledFieldView<InputView>;
+    /**
+     * The Back button view displayed in the header.
+     */
+    backButtonView: ButtonView;
     /**
      * A button used to submit the form.
      */
     saveButtonView: ButtonView;
     /**
-     * A button used to cancel the form.
+     * A collection of child views.
      */
-    cancelButtonView: ButtonView;
+    readonly children: ViewCollection;
     /**
      * A collection of views which can be focused in the form.
      */
@@ -54,15 +59,17 @@ export default class TextAlternativeFormView 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 text alternative the image.
+     */
+    private _createSaveButton;
+    /**
+     * Creates a header view for the form.
      */
-    private _createButton;
+    private _createHeaderView;
     /**
      * Creates an input with a label.
      *