@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

package/src/imageresize/imagecustomresizeui.js

@@ -0,0 +1,174 @@
+/**
+ * @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/imagecustomresizeui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ContextualBalloon, clickOutsideHandler, CssTransitionDisablerMixin } from 'ckeditor5/src/ui.js';
+import { getBalloonPositionData } from '../image/ui/utils.js';
+import { getSelectedImageWidthInUnits } from './utils/getselectedimagewidthinunits.js';
+import ImageCustomResizeFormView from './ui/imagecustomresizeformview.js';
+import { getSelectedImagePossibleResizeRange } from './utils/getselectedimagepossibleresizerange.js';
+/**
+ * The custom resize image UI plugin.
+ *
+ * The plugin uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
+ */
+export default class ImageCustomResizeUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ContextualBalloon];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageCustomResizeUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        // Destroy created UI components as they are not automatically destroyed (see ckeditor5#1341).
+        if (this._form) {
+            this._form.destroy();
+        }
+    }
+    /**
+     * Creates the {@link module:image/imageresize/ui/imagecustomresizeformview~ImageCustomResizeFormView}
+     * form.
+     */
+    _createForm(unit) {
+        const editor = this.editor;
+        this._balloon = this.editor.plugins.get('ContextualBalloon');
+        this._form = new (CssTransitionDisablerMixin(ImageCustomResizeFormView))(editor.locale, unit, getFormValidators(editor));
+        // Render the form so its #element is available for clickOutsideHandler.
+        this._form.render();
+        this.listenTo(this._form, 'submit', () => {
+            if (this._form.isValid()) {
+                editor.execute('resizeImage', {
+                    width: this._form.sizeWithUnits
+                });
+                this._hideForm(true);
+            }
+        });
+        // Update balloon position when form error label is added .
+        this.listenTo(this._form.labeledInput, 'change:errorText', () => {
+            editor.ui.update();
+        });
+        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,
+            activator: () => this._isVisible,
+            contextElements: () => [this._balloon.view.element],
+            callback: () => this._hideForm()
+        });
+    }
+    /**
+     * Shows the {@link #_form} in the {@link #_balloon}.
+     *
+     * @internal
+     */
+    _showForm(unit) {
+        if (this._isVisible) {
+            return;
+        }
+        if (!this._form) {
+            this._createForm(unit);
+        }
+        const editor = this.editor;
+        const labeledInput = this._form.labeledInput;
+        this._form.disableCssTransitions();
+        this._form.resetFormStatus();
+        if (!this._isInBalloon) {
+            this._balloon.add({
+                view: this._form,
+                position: getBalloonPositionData(editor)
+            });
+        }
+        // Make sure that each time the panel shows up, the field remains in sync with the value of
+        // the command. If the user typed in the input, then canceled the balloon (`labeledInput#value`
+        // stays unaltered) and re-opened it without changing the value of the command, they would see the
+        // old value instead of the actual value of the command.
+        const currentParsedWidth = getSelectedImageWidthInUnits(editor, unit);
+        const initialInputValue = currentParsedWidth ? currentParsedWidth.value.toFixed(1) : '';
+        const possibleRange = getSelectedImagePossibleResizeRange(editor, unit);
+        labeledInput.fieldView.value = labeledInput.fieldView.element.value = initialInputValue;
+        if (possibleRange) {
+            Object.assign(labeledInput.fieldView, {
+                min: possibleRange.lower.toFixed(1),
+                max: Math.ceil(possibleRange.upper).toFixed(1)
+            });
+        }
+        this._form.labeledInput.fieldView.select();
+        this._form.enableCssTransitions();
+    }
+    /**
+     * Removes the {@link #_form} from the {@link #_balloon}.
+     *
+     * @param focusEditable Controls whether the editing view is focused afterwards.
+     */
+    _hideForm(focusEditable = false) {
+        if (!this._isInBalloon) {
+            return;
+        }
+        // Blur the input element before removing it from DOM to prevent issues in some browsers.
+        // See https://github.com/ckeditor/ckeditor5/issues/1501.
+        if (this._form.focusTracker.isFocused) {
+            this._form.saveButtonView.focus();
+        }
+        this._balloon.remove(this._form);
+        if (focusEditable) {
+            this.editor.editing.view.focus();
+        }
+    }
+    /**
+     * Returns `true` when the {@link #_form} is the visible view in the {@link #_balloon}.
+     */
+    get _isVisible() {
+        return !!this._balloon && this._balloon.visibleView === this._form;
+    }
+    /**
+     * Returns `true` when the {@link #_form} is in the {@link #_balloon}.
+     */
+    get _isInBalloon() {
+        return !!this._balloon && this._balloon.hasView(this._form);
+    }
+}
+/**
+ * Returns image resize form validation callbacks.
+ *
+ * @param editor Editor instance.
+ */
+function getFormValidators(editor) {
+    const t = editor.t;
+    return [
+        form => {
+            if (form.rawSize.trim() === '') {
+                return t('The value must not be empty.');
+            }
+            if (form.parsedSize === null) {
+                return t('The value should be a plain number.');
+            }
+        }
+    ];
+}

package/src/imageresize/imageresizebuttons.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @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 { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import ImageResizeEditing from './imageresizeediting.js';
+/**
+ * The image resize buttons plugin.
+ *
+ * It adds a possibility to resize images using the toolbar dropdown or individual buttons, depending on the plugin configuration.
+ */
+export default class ImageResizeButtons extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageResizeEditing];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageResizeButtons";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * The resize unit.
+     * @default '%'
+     */
+    private readonly _resizeUnit;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * A helper function that creates a standalone button component for the plugin.
+     *
+     * @param resizeOption A model of the resize option.
+     */
+    private _registerImageResizeButton;
+    /**
+     * A helper function that creates a dropdown component for the plugin containing all the resize options defined in
+     * the editor configuration.
+     *
+     * @param options An array of configured options.
+     */
+    private _registerImageResizeDropdown;
+    /**
+     * A helper function for creating an option label value string.
+     *
+     * @param option A resize option object.
+     * @param forTooltip An optional flag for creating a tooltip label.
+     * @returns A user-defined label combined from the numeric value and the resize unit or the default label
+     * for reset options (`Original`).
+     */
+    private _getOptionLabelValue;
+    /**
+     * A helper function that parses the resize options and returns list item definitions ready for use in the dropdown.
+     *
+     * @param options The resize options.
+     * @param command The resize image command.
+     * @returns Dropdown item definitions.
+     */
+    private _getResizeDropdownListItemDefinitions;
+}

package/src/imageresize/imageresizebuttons.js

@@ -0,0 +1,295 @@
+/**
+ * @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/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';
+import ImageResizeEditing from './imageresizeediting.js';
+const RESIZE_ICONS = /* #__PURE__ */ (() => ({
+    small: icons.objectSizeSmall,
+    medium: icons.objectSizeMedium,
+    large: icons.objectSizeLarge,
+    custom: icons.objectSizeCustom,
+    original: icons.objectSizeFull
+}))();
+/**
+ * The image resize buttons plugin.
+ *
+ * It adds a possibility to resize images using the toolbar dropdown or individual buttons, depending on the plugin configuration.
+ */
+export default class ImageResizeButtons extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageResizeEditing];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageResizeButtons';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        this._resizeUnit = editor.config.get('image.resizeUnit');
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const options = editor.config.get('image.resizeOptions');
+        const command = editor.commands.get('resizeImage');
+        this.bind('isEnabled').to(command);
+        for (const option of options) {
+            this._registerImageResizeButton(option);
+        }
+        this._registerImageResizeDropdown(options);
+    }
+    /**
+     * A helper function that creates a standalone button component for the plugin.
+     *
+     * @param resizeOption A model of the resize option.
+     */
+    _registerImageResizeButton(option) {
+        const editor = this.editor;
+        const { name, value, icon } = option;
+        editor.ui.componentFactory.add(name, locale => {
+            const button = new ButtonView(locale);
+            const command = editor.commands.get('resizeImage');
+            const labelText = this._getOptionLabelValue(option, true);
+            if (!RESIZE_ICONS[icon]) {
+                /**
+                 * When configuring {@link module:image/imageconfig~ImageConfig#resizeOptions `config.image.resizeOptions`} for standalone
+                 * buttons, a valid `icon` token must be set for each option.
+                 *
+                 * See all valid options described in the
+                 * {@link module:image/imageconfig~ImageResizeOption plugin configuration}.
+                 *
+                 * @error imageresizebuttons-missing-icon
+                 * @param option Invalid image resize option.
+                */
+                throw new CKEditorError('imageresizebuttons-missing-icon', editor, option);
+            }
+            button.set({
+                // Use the `label` property for a verbose description (because of ARIA).
+                label: labelText,
+                icon: RESIZE_ICONS[icon],
+                tooltip: labelText,
+                isToggleable: true
+            });
+            // Bind button to the command.
+            button.bind('isEnabled').to(this);
+            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;
+        });
+    }
+    /**
+     * A helper function that creates a dropdown component for the plugin containing all the resize options defined in
+     * the editor configuration.
+     *
+     * @param options An array of configured options.
+     */
+    _registerImageResizeDropdown(options) {
+        const editor = this.editor;
+        const t = editor.t;
+        const originalSizeOption = options.find(option => !option.value);
+        const componentCreator = (locale) => {
+            const command = editor.commands.get('resizeImage');
+            const dropdownView = createDropdown(locale, DropdownButtonView);
+            const dropdownButton = dropdownView.buttonView;
+            const accessibleLabel = t('Resize image');
+            dropdownButton.set({
+                tooltip: accessibleLabel,
+                commandValue: originalSizeOption.value,
+                icon: RESIZE_ICONS.medium,
+                isToggleable: true,
+                label: this._getOptionLabelValue(originalSizeOption),
+                withText: true,
+                class: 'ck-resize-image-button',
+                ariaLabel: accessibleLabel,
+                ariaLabelledBy: undefined
+            });
+            dropdownButton.bind('label').to(command, 'value', commandValue => {
+                if (commandValue && commandValue.width) {
+                    return commandValue.width;
+                }
+                else {
+                    return this._getOptionLabelValue(originalSizeOption);
+                }
+            });
+            dropdownView.bind('isEnabled').to(this);
+            addListToDropdown(dropdownView, () => this._getResizeDropdownListItemDefinitions(options, command), {
+                ariaLabel: t('Image resize list'),
+                role: 'menu'
+            });
+            // Execute command when an item from the dropdown is selected.
+            this.listenTo(dropdownView, 'execute', evt => {
+                if ('onClick' in evt.source) {
+                    evt.source.onClick();
+                }
+                else {
+                    editor.execute(evt.source.commandName, { width: evt.source.commandValue });
+                    editor.editing.view.focus();
+                }
+            });
+            return dropdownView;
+        };
+        // Register `resizeImage` dropdown and add `imageResize` dropdown as an alias for backward compatibility.
+        editor.ui.componentFactory.add('resizeImage', componentCreator);
+        editor.ui.componentFactory.add('imageResize', componentCreator);
+    }
+    /**
+     * A helper function for creating an option label value string.
+     *
+     * @param option A resize option object.
+     * @param forTooltip An optional flag for creating a tooltip label.
+     * @returns A user-defined label combined from the numeric value and the resize unit or the default label
+     * for reset options (`Original`).
+     */
+    _getOptionLabelValue(option, forTooltip = false) {
+        const t = this.editor.t;
+        if (option.label) {
+            return option.label;
+        }
+        else if (forTooltip) {
+            if (isCustomImageResizeOption(option)) {
+                return t('Custom image size');
+            }
+            else if (option.value) {
+                return t('Resize image to %0', option.value + this._resizeUnit);
+            }
+            else {
+                return t('Resize image to the original size');
+            }
+        }
+        else {
+            if (isCustomImageResizeOption(option)) {
+                return t('Custom');
+            }
+            else if (option.value) {
+                return option.value + this._resizeUnit;
+            }
+            else {
+                return t('Original');
+            }
+        }
+    }
+    /**
+     * A helper function that parses the resize options and returns list item definitions ready for use in the dropdown.
+     *
+     * @param options The resize options.
+     * @param command The resize image command.
+     * @returns Dropdown item definitions.
+     */
+    _getResizeDropdownListItemDefinitions(options, command) {
+        const { editor } = this;
+        const itemDefinitions = new Collection();
+        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}`
+            };
+        });
+        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.
+ */
+function getIsOnButtonCallback(value) {
+    return (commandValue) => {
+        const objectCommandValue = commandValue;
+        if (value === null && objectCommandValue === value) {
+            return true;
+        }
+        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.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @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, Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from '../imageutils.js';
+/**
+ * The image resize editing feature.
+ *
+ * It adds the ability to resize each image using handles or manually by
+ * {@link module:image/imageresize/imageresizebuttons~ImageResizeButtons} buttons.
+ */
+export default class ImageResizeEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageResizeEditing";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+    private _registerSchema;
+    /**
+     * Registers image resize converters.
+     *
+     * @param imageType The type of the image.
+     */
+    private _registerConverters;
+}