@ckeditor/ckeditor5-image 41.3.1 → 41.4.0

package/src/imageresize/imageresizebuttons.js

@@ -5,6 +5,7 @@
 /**
  * @module image/imageresize/imageresizebuttons
  */
+import { map } from 'lodash-es';
 import { Plugin, icons } from 'ckeditor5/src/core.js';
 import { ButtonView, DropdownButtonView, ViewModel, createDropdown, addListToDropdown } from 'ckeditor5/src/ui.js';
 import { CKEditorError, Collection } from 'ckeditor5/src/utils.js';
@@ -13,6 +14,7 @@ const RESIZE_ICONS = {
     small: icons.objectSizeSmall,
     medium: icons.objectSizeMedium,
     large: icons.objectSizeLarge,
+    custom: icons.objectSizeCustom,
     original: icons.objectSizeFull
 };
 /**
@@ -61,7 +63,6 @@ export default class ImageResizeButtons extends Plugin {
     _registerImageResizeButton(option) {
         const editor = this.editor;
         const { name, value, icon } = option;
-        const optionValueWithUnit = value ? value + this._resizeUnit : null;
         editor.ui.componentFactory.add(name, locale => {
             const button = new ButtonView(locale);
             const command = editor.commands.get('resizeImage');
@@ -88,10 +89,19 @@ export default class ImageResizeButtons extends Plugin {
             });
             // Bind button to the command.
             button.bind('isEnabled').to(this);
-            button.bind('isOn').to(command, 'value', getIsOnButtonCallback(optionValueWithUnit));
-            this.listenTo(button, 'execute', () => {
-                editor.execute('resizeImage', { width: optionValueWithUnit });
-            });
+            if (editor.plugins.has('ImageCustomResizeUI') && isCustomImageResizeOption(option)) {
+                const customResizeUI = editor.plugins.get('ImageCustomResizeUI');
+                this.listenTo(button, 'execute', () => {
+                    customResizeUI._showForm(this._resizeUnit);
+                });
+            }
+            else {
+                const optionValueWithUnit = value ? value + this._resizeUnit : null;
+                button.bind('isOn').to(command, 'value', getIsOnButtonCallback(optionValueWithUnit));
+                this.listenTo(button, 'execute', () => {
+                    editor.execute('resizeImage', { width: optionValueWithUnit });
+                });
+            }
             return button;
         });
     }
@@ -136,8 +146,13 @@ export default class ImageResizeButtons extends Plugin {
             });
             // Execute command when an item from the dropdown is selected.
             this.listenTo(dropdownView, 'execute', evt => {
-                editor.execute(evt.source.commandName, { width: evt.source.commandValue });
-                editor.editing.view.focus();
+                if ('onClick' in evt.source) {
+                    evt.source.onClick();
+                }
+                else {
+                    editor.execute(evt.source.commandName, { width: evt.source.commandValue });
+                    editor.editing.view.focus();
+                }
             });
             return dropdownView;
         };
@@ -159,7 +174,10 @@ export default class ImageResizeButtons extends Plugin {
             return option.label;
         }
         else if (forTooltip) {
-            if (option.value) {
+            if (isCustomImageResizeOption(option)) {
+                return t('Custom image size');
+            }
+            else if (option.value) {
                 return t('Resize image to %0', option.value + this._resizeUnit);
             }
             else {
@@ -167,7 +185,10 @@ export default class ImageResizeButtons extends Plugin {
             }
         }
         else {
-            if (option.value) {
+            if (isCustomImageResizeOption(option)) {
+                return t('Custom');
+            }
+            else if (option.value) {
                 return option.value + this._resizeUnit;
             }
             else {
@@ -183,26 +204,71 @@ export default class ImageResizeButtons extends Plugin {
      * @returns Dropdown item definitions.
      */
     _getResizeDropdownListItemDefinitions(options, command) {
+        const { editor } = this;
         const itemDefinitions = new Collection();
-        options.map(option => {
-            const optionValueWithUnit = option.value ? option.value + this._resizeUnit : null;
-            const definition = {
-                type: 'button',
-                model: new ViewModel({
-                    commandName: 'resizeImage',
-                    commandValue: optionValueWithUnit,
-                    label: this._getOptionLabelValue(option),
-                    role: 'menuitemradio',
-                    withText: true,
-                    icon: null
-                })
+        const optionsWithSerializedValues = options.map(option => {
+            if (isCustomImageResizeOption(option)) {
+                return {
+                    ...option,
+                    valueWithUnits: 'custom'
+                };
+            }
+            if (!option.value) {
+                return {
+                    ...option,
+                    valueWithUnits: null
+                };
+            }
+            return {
+                ...option,
+                valueWithUnits: `${option.value}${this._resizeUnit}`
             };
-            definition.model.bind('isOn').to(command, 'value', getIsOnButtonCallback(optionValueWithUnit));
-            itemDefinitions.add(definition);
         });
+        for (const option of optionsWithSerializedValues) {
+            let definition = null;
+            if (editor.plugins.has('ImageCustomResizeUI') && isCustomImageResizeOption(option)) {
+                const customResizeUI = editor.plugins.get('ImageCustomResizeUI');
+                definition = {
+                    type: 'button',
+                    model: new ViewModel({
+                        label: this._getOptionLabelValue(option),
+                        role: 'menuitemradio',
+                        withText: true,
+                        icon: null,
+                        onClick: () => {
+                            customResizeUI._showForm(this._resizeUnit);
+                        }
+                    })
+                };
+                const allDropdownValues = map(optionsWithSerializedValues, 'valueWithUnits');
+                definition.model.bind('isOn').to(command, 'value', getIsOnCustomButtonCallback(allDropdownValues));
+            }
+            else {
+                definition = {
+                    type: 'button',
+                    model: new ViewModel({
+                        commandName: 'resizeImage',
+                        commandValue: option.valueWithUnits,
+                        label: this._getOptionLabelValue(option),
+                        role: 'menuitemradio',
+                        withText: true,
+                        icon: null
+                    })
+                };
+                definition.model.bind('isOn').to(command, 'value', getIsOnButtonCallback(option.valueWithUnits));
+            }
+            definition.model.bind('isEnabled').to(command, 'isEnabled');
+            itemDefinitions.add(definition);
+        }
         return itemDefinitions;
     }
 }
+/**
+ * A helper that checks if provided option triggers custom resize balloon.
+ */
+function isCustomImageResizeOption(option) {
+    return option.value === 'custom';
+}
 /**
  * A helper function for setting the `isOn` state of buttons in value bindings.
  */
@@ -215,3 +281,9 @@ function getIsOnButtonCallback(value) {
         return objectCommandValue !== null && objectCommandValue.width === 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));
+}

package/src/imageresize/imageresizeediting.js

@@ -32,11 +32,17 @@ export default class ImageResizeEditing extends Plugin {
         super(editor);
         editor.config.define('image', {
             resizeUnit: '%',
-            resizeOptions: [{
+            resizeOptions: [
+                {
                     name: 'resizeImage:original',
                     value: null,
                     icon: 'original'
                 },
+                {
+                    name: 'resizeImage:custom',
+                    value: 'custom',
+                    icon: 'custom'
+                },
                 {
                     name: 'resizeImage:25',
                     value: '25',
@@ -51,7 +57,8 @@ export default class ImageResizeEditing extends Plugin {
                     name: 'resizeImage:75',
                     value: '75',
                     icon: 'large'
-                }]
+                }
+            ]
         });
     }
     /**

package/src/imageresize/imageresizehandles.js

@@ -76,8 +76,7 @@ export default class ImageResizeHandles extends Plugin {
                     return domWidgetElement.querySelector('img');
                 },
                 getResizeHost() {
-                    // Return the model image element parent to avoid setting an inline element (<a>/<span>) as a resize host.
-                    return domConverter.mapViewToDom(mapper.toViewElement(imageModel.parent));
+                    return domConverter.mapViewToDom(mapper.toViewElement(imageModel));
                 },
                 isCentered() {
                     const imageStyle = imageModel.getAttribute('imageStyle');

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

@@ -0,0 +1,129 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageresize/ui/imagecustomresizeformview
+ */
+import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, type FocusableView, type InputNumberView } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
+import '../../../theme/imagecustomresizeform.css';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+/**
+ * The ImageCustomResizeFormView class.
+ */
+export default class ImageCustomResizeFormView extends View {
+    /**
+     * Tracks information about the DOM focus in the form.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * Resize unit shortcut.
+     */
+    readonly unit: string;
+    /**
+     * An input with a label.
+     */
+    labeledInput: LabeledFieldView<InputNumberView>;
+    /**
+     * A button used to submit the form.
+     */
+    saveButtonView: ButtonView;
+    /**
+     * A button used to cancel the form.
+     */
+    cancelButtonView: ButtonView;
+    /**
+     * A collection of views which can be focused in the form.
+     */
+    protected readonly _focusables: ViewCollection<FocusableView>;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    protected readonly _focusCycler: FocusCycler;
+    /**
+     * An array of form validators used by {@link #isValid}.
+     */
+    private readonly _validators;
+    /**
+     * @inheritDoc
+     */
+    constructor(locale: Locale, unit: string, validators: Array<ImageCustomResizeFormValidatorCallback>);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    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.
+     */
+    private _createButton;
+    /**
+     * Creates an input with a label.
+     *
+     * @returns Labeled field view instance.
+     */
+    private _createLabeledInputView;
+    /**
+     * Validates the form and returns `false` when some fields are invalid.
+     */
+    isValid(): boolean;
+    /**
+     * Cleans up the supplementary error and information text of the {@link #labeledInput}
+     * bringing them back to the state when the form has been displayed for the first time.
+     *
+     * See {@link #isValid}.
+     */
+    resetFormStatus(): void;
+    /**
+     * The native DOM `value` of the input element of {@link #labeledInput}.
+     */
+    get rawSize(): string | null;
+    /**
+     * Get numeric value of size. Returns `null` if value of size input element in {@link #labeledInput}.is not a number.
+     */
+    get parsedSize(): number | null;
+    /**
+     * Returns serialized image input size with unit.
+     * Returns `null` if value of size input element in {@link #labeledInput}.is not a number.
+     */
+    get sizeWithUnits(): string | null;
+}
+/**
+ * Callback used by {@link ~ImageCustomResizeFormView} to check if passed form value is valid.
+ *
+ * 	* If `undefined` is returned, it is assumed that the form value is correct and there is no error.
+ * 	* If string is returned, it is assumed that the form value is incorrect and the returned string is displayed in the error label
+ */
+export type ImageCustomResizeFormValidatorCallback = (form: ImageCustomResizeFormView) => string | undefined;
+/**
+ * Fired when the form view is submitted.
+ *
+ * @eventName ~ImageCustomResizeFormView#submit
+ */
+export type ImageCustomResizeFormViewSubmitEvent = {
+    name: 'submit';
+    args: [];
+};
+/**
+ * Fired when the form view is canceled.
+ *
+ * @eventName ~ImageCustomResizeFormView#cancel
+ */
+export type ImageCustomResizeFormViewCancelEvent = {
+    name: 'cancel';
+    args: [];
+};

package/src/imageresize/ui/imagecustomresizeformview.js

@@ -0,0 +1,186 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageresize/ui/imagecustomresizeformview
+ */
+import { ButtonView, FocusCycler, 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 '../../../theme/imagecustomresizeform.css';
+// See: #8833.
+// eslint-disable-next-line ckeditor5-rules/ckeditor-imports
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+/**
+ * The ImageCustomResizeFormView class.
+ */
+export default class ImageCustomResizeFormView extends View {
+    /**
+     * @inheritDoc
+     */
+    constructor(locale, unit, validators) {
+        super(locale);
+        const t = this.locale.t;
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.unit = unit;
+        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._focusables = new ViewCollection();
+        this._validators = validators;
+        this._focusCycler = new FocusCycler({
+            focusables: this._focusables,
+            focusTracker: this.focusTracker,
+            keystrokeHandler: this.keystrokes,
+            actions: {
+                // Navigate form fields backwards using the Shift + Tab keystroke.
+                focusPrevious: 'shift + tab',
+                // Navigate form fields forwards using the Tab key.
+                focusNext: 'tab'
+            }
+        });
+        this.setTemplate({
+            tag: 'form',
+            attributes: {
+                class: [
+                    'ck',
+                    '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
+            ]
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.keystrokes.listenTo(this.element);
+        submitHandler({ view: this });
+        [this.labeledInput, this.saveButtonView, this.cancelButtonView]
+            .forEach(v => {
+            // Register the view as focusable.
+            this._focusables.add(v);
+            // Register the view in the focus tracker.
+            this.focusTracker.add(v.element);
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        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,
+            tooltip: true
+        });
+        button.extendTemplate({
+            attributes: {
+                class: className
+            }
+        });
+        if (eventName) {
+            button.delegate('execute').to(this, eventName);
+        }
+        return button;
+    }
+    /**
+     * Creates an input with a label.
+     *
+     * @returns Labeled field view instance.
+     */
+    _createLabeledInputView() {
+        const t = this.locale.t;
+        const labeledInput = new LabeledFieldView(this.locale, createLabeledInputNumber);
+        labeledInput.label = t('Resize image (in %0)', this.unit);
+        labeledInput.fieldView.set({
+            step: 0.1
+        });
+        return labeledInput;
+    }
+    /**
+     * Validates the form and returns `false` when some fields are invalid.
+     */
+    isValid() {
+        this.resetFormStatus();
+        for (const validator of this._validators) {
+            const errorText = validator(this);
+            // One error per field is enough.
+            if (errorText) {
+                // Apply updated error.
+                this.labeledInput.errorText = errorText;
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Cleans up the supplementary error and information text of the {@link #labeledInput}
+     * bringing them back to the state when the form has been displayed for the first time.
+     *
+     * See {@link #isValid}.
+     */
+    resetFormStatus() {
+        this.labeledInput.errorText = null;
+    }
+    /**
+     * The native DOM `value` of the input element of {@link #labeledInput}.
+     */
+    get rawSize() {
+        const { element } = this.labeledInput.fieldView;
+        if (!element) {
+            return null;
+        }
+        return element.value;
+    }
+    /**
+     * Get numeric value of size. Returns `null` if value of size input element in {@link #labeledInput}.is not a number.
+     */
+    get parsedSize() {
+        const { rawSize } = this;
+        if (rawSize === null) {
+            return null;
+        }
+        const parsed = Number.parseFloat(rawSize);
+        if (Number.isNaN(parsed)) {
+            return null;
+        }
+        return parsed;
+    }
+    /**
+     * Returns serialized image input size with unit.
+     * Returns `null` if value of size input element in {@link #labeledInput}.is not a number.
+     */
+    get sizeWithUnits() {
+        const { parsedSize, unit } = this;
+        if (parsedSize === null) {
+            return null;
+        }
+        return `${parsedSize}${unit}`;
+    }
+}

package/src/imageresize/utils/getselectedimageeditornodes.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageresize/utils/getselectedimageeditornodes
+ */
+import type { ViewElement, Element } from 'ckeditor5/src/engine.js';
+import type { Editor } from 'ckeditor5/src/core.js';
+/**
+ * Finds model, view and DOM element for selected image element. Returns `null` if there is no image selected.
+ *
+ * @param editor Editor instance.
+ */
+export declare function getSelectedImageEditorNodes(editor: Editor): ImageEditorNodes | null;
+/**
+ * @internal;
+ */
+type ImageEditorNodes = {
+    model: Element;
+    view: ViewElement;
+    dom: HTMLElement;
+};
+export {};

package/src/imageresize/utils/getselectedimageeditornodes.js

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * Finds model, view and DOM element for selected image element. Returns `null` if there is no image selected.
+ *
+ * @param editor Editor instance.
+ */
+export function getSelectedImageEditorNodes(editor) {
+    const { editing } = editor;
+    const imageUtils = editor.plugins.get('ImageUtils');
+    const imageModelElement = imageUtils.getClosestSelectedImageElement(editor.model.document.selection);
+    if (!imageModelElement) {
+        return null;
+    }
+    const imageViewElement = editing.mapper.toViewElement(imageModelElement);
+    const imageDOMElement = editing.view.domConverter.mapViewToDom(imageViewElement);
+    return {
+        model: imageModelElement,
+        view: imageViewElement,
+        dom: imageDOMElement
+    };
+}

package/src/imageresize/utils/getselectedimagepossibleresizerange.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageresize/utils/getselectedimagepossibleresizerange
+ */
+import type { Editor } from 'ckeditor5/src/core.js';
+/**
+ * Returns min and max value of resize image in specified unit.
+ *
+ * @param editor Editor instance.
+ * @param targetUnit Unit in which dimension will be returned.
+ * @returns Possible resize range in numeric form.
+ */
+export declare function getSelectedImagePossibleResizeRange(editor: Editor, targetUnit: string): PossibleResizeImageRange | null;
+/**
+ * @internal
+ */
+export type PossibleResizeImageRange = {
+    unit: string;
+    lower: number;
+    upper: number;
+};

package/src/imageresize/utils/getselectedimagepossibleresizerange.js

@@ -0,0 +1,32 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { calculateResizeHostAncestorWidth } from 'ckeditor5/src/widget.js';
+import { getSelectedImageEditorNodes } from './getselectedimageeditornodes.js';
+import { tryCastDimensionsToUnit, tryParseDimensionWithUnit } from './tryparsedimensionwithunit.js';
+/**
+ * Returns min and max value of resize image in specified unit.
+ *
+ * @param editor Editor instance.
+ * @param targetUnit Unit in which dimension will be returned.
+ * @returns Possible resize range in numeric form.
+ */
+export function getSelectedImagePossibleResizeRange(editor, targetUnit) {
+    const imageNodes = getSelectedImageEditorNodes(editor);
+    if (!imageNodes) {
+        return null;
+    }
+    const imageParentWidthPx = calculateResizeHostAncestorWidth(imageNodes.dom);
+    const minimumImageWidth = tryParseDimensionWithUnit(window.getComputedStyle(imageNodes.dom).minWidth) || {
+        value: 1,
+        unit: 'px'
+    };
+    const lower = Math.max(0.1, tryCastDimensionsToUnit(imageParentWidthPx, minimumImageWidth, targetUnit).value);
+    const upper = targetUnit === 'px' ? imageParentWidthPx : 100;
+    return {
+        unit: targetUnit,
+        lower,
+        upper
+    };
+}

package/src/imageresize/utils/getselectedimagewidthinunits.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type { Editor } from 'ckeditor5/src/core.js';
+import { type DimensionWithUnit } from './tryparsedimensionwithunit.js';
+/**
+ * Returns image width in specified units. It is width of image after resize.
+ *
+ * 	* If image is not selected or command is disabled then `null` will be returned.
+ * 	* If image is not fully loaded (and it is impossible to determine its natural size) then `null` will be returned.
+ *	* If `targetUnit` percentage is passed then it will return width percentage of image related to its accessors.
+ *
+ * @param editor Editor instance.
+ * @param targetUnit Unit in which dimension will be returned.
+ * @returns Parsed image width after resize (with unit).
+ */
+export declare function getSelectedImageWidthInUnits(editor: Editor, targetUnit: string): DimensionWithUnit | null;