@ckeditor/ckeditor5-image 47.6.1 → 48.0.0-alpha.1

package/src/imageresize/imagecustomresizeui.js

@@ -1,177 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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/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 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
-     */
-    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 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.js

@@ -1,303 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, 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 } from 'ckeditor5/src/core.js';
-import { ButtonView, DropdownButtonView, UIModel, 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: IconObjectSizeSmall,
-    medium: IconObjectSizeMedium,
-    large: IconObjectSizeLarge,
-    custom: IconObjectSizeCustom,
-    original: IconObjectSizeFull
-}))();
-/**
- * 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 class ImageResizeButtons extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageResizeEditing];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageResizeButtons';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * The resize unit.
-     * @default '%'
-     */
-    _resizeUnit;
-    /**
-     * @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 option 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 {module:image/imageconfig~ImageResizeOption} 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', command, 'isEnabled', 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 UIModel({
-                        label: this._getOptionLabelValue(option),
-                        role: 'menuitemradio',
-                        withText: true,
-                        icon: null,
-                        onClick: () => {
-                            customResizeUI._showForm(this._resizeUnit);
-                        }
-                    })
-                };
-                const allDropdownValues = Object.values(optionsWithSerializedValues).map(option => option.valueWithUnits);
-                definition.model.bind('isOn').to(command, 'value', command, 'isEnabled', getIsOnCustomButtonCallback(allDropdownValues));
-            }
-            else {
-                definition = {
-                    type: 'button',
-                    model: new UIModel({
-                        commandName: 'resizeImage',
-                        commandValue: option.valueWithUnits,
-                        label: this._getOptionLabelValue(option),
-                        role: 'menuitemradio',
-                        withText: true,
-                        icon: null
-                    })
-                };
-                definition.model.bind('isOn').to(command, 'value', command, 'isEnabled', 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, isEnabled) => {
-        const objectCommandValue = commandValue;
-        if (objectCommandValue === undefined || !isEnabled) {
-            return false;
-        }
-        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, isEnabled) => !allDropdownValues.some(dropdownValue => getIsOnButtonCallback(dropdownValue)(commandValue, isEnabled));
-}

package/src/imageresize/imageresizeediting.js

@@ -1,206 +0,0 @@
-/**
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ImageUtils } from '../imageutils.js';
-import { ResizeImageCommand } from './resizeimagecommand.js';
-import { widthAndHeightStylesAreBothSet } from '../image/utils.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 class ImageResizeEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageResizeEditing';
-    }
-    /**
-     * @inheritDoc
-     * @internal
-     */
-    static get licenseFeatureCode() {
-        return 'IR';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isPremiumPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        editor.config.define('image', {
-            resizeUnit: '%',
-            resizeOptions: [
-                {
-                    name: 'resizeImage:original',
-                    value: null,
-                    icon: 'original'
-                },
-                {
-                    name: 'resizeImage:custom',
-                    value: 'custom',
-                    icon: 'custom'
-                },
-                {
-                    name: 'resizeImage:25',
-                    value: '25',
-                    icon: 'small'
-                },
-                {
-                    name: 'resizeImage:50',
-                    value: '50',
-                    icon: 'medium'
-                },
-                {
-                    name: 'resizeImage:75',
-                    value: '75',
-                    icon: 'large'
-                }
-            ]
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const resizeImageCommand = new ResizeImageCommand(editor);
-        this._registerConverters('imageBlock');
-        this._registerConverters('imageInline');
-        // Register `resizeImage` command and add `imageResize` command as an alias for backward compatibility.
-        editor.commands.add('resizeImage', resizeImageCommand);
-        editor.commands.add('imageResize', resizeImageCommand);
-    }
-    /**
-     * @inheritDoc
-     */
-    afterInit() {
-        this._registerSchema();
-    }
-    _registerSchema() {
-        const schema = this.editor.model.schema;
-        if (this.editor.plugins.has('ImageBlockEditing')) {
-            schema.extend('imageBlock', { allowAttributes: ['resizedWidth', 'resizedHeight'] });
-            schema.setAttributeProperties('resizedWidth', { isFormatting: true });
-            schema.setAttributeProperties('resizedHeight', { isFormatting: true });
-        }
-        if (this.editor.plugins.has('ImageInlineEditing')) {
-            schema.extend('imageInline', { allowAttributes: ['resizedWidth', 'resizedHeight'] });
-            schema.setAttributeProperties('resizedWidth', { isFormatting: true });
-            schema.setAttributeProperties('resizedHeight', { isFormatting: true });
-        }
-    }
-    /**
-     * Registers image resize converters.
-     *
-     * @param imageType The type of the image.
-     */
-    _registerConverters(imageType) {
-        const editor = this.editor;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        // Dedicated converter to propagate image's attribute to the img tag.
-        editor.conversion.for('downcast').add(dispatcher => dispatcher.on(`attribute:resizedWidth:${imageType}`, (evt, data, conversionApi) => {
-            if (!conversionApi.consumable.consume(data.item, evt.name)) {
-                return;
-            }
-            const viewWriter = conversionApi.writer;
-            const viewImg = conversionApi.mapper.toViewElement(data.item);
-            if (data.attributeNewValue !== null) {
-                viewWriter.setStyle('width', data.attributeNewValue, viewImg);
-                viewWriter.addClass('image_resized', viewImg);
-            }
-            else {
-                viewWriter.removeStyle('width', viewImg);
-                viewWriter.removeClass('image_resized', viewImg);
-            }
-        }));
-        editor.conversion.for('dataDowncast').attributeToAttribute({
-            model: {
-                name: imageType,
-                key: 'resizedHeight'
-            },
-            view: modelAttributeValue => ({
-                key: 'style',
-                value: {
-                    'height': modelAttributeValue
-                }
-            })
-        });
-        editor.conversion.for('editingDowncast').add(dispatcher => dispatcher.on(`attribute:resizedHeight:${imageType}`, (evt, data, conversionApi) => {
-            if (!conversionApi.consumable.consume(data.item, evt.name)) {
-                return;
-            }
-            const viewWriter = conversionApi.writer;
-            const viewImg = conversionApi.mapper.toViewElement(data.item);
-            const target = imageType === 'imageInline' ? imageUtils.findViewImgElement(viewImg) : viewImg;
-            if (data.attributeNewValue !== null) {
-                viewWriter.setStyle('height', data.attributeNewValue, target);
-            }
-            else {
-                viewWriter.removeStyle('height', target);
-            }
-        }));
-        editor.conversion.for('upcast')
-            .attributeToAttribute({
-            view: {
-                name: imageType === 'imageBlock' ? 'figure' : 'img',
-                styles: {
-                    width: /.+/
-                }
-            },
-            model: {
-                key: 'resizedWidth',
-                value: (viewElement) => {
-                    if (widthAndHeightStylesAreBothSet(viewElement)) {
-                        return null;
-                    }
-                    return viewElement.getStyle('width');
-                }
-            }
-        });
-        editor.conversion.for('upcast')
-            .attributeToAttribute({
-            view: {
-                name: imageType === 'imageBlock' ? 'figure' : 'img',
-                styles: {
-                    height: /.+/
-                }
-            },
-            model: {
-                key: 'resizedHeight',
-                value: (viewElement) => {
-                    if (widthAndHeightStylesAreBothSet(viewElement)) {
-                        return null;
-                    }
-                    return viewElement.getStyle('height');
-                }
-            }
-        });
-        editor.conversion.for('upcast').add(dispatcher => {
-            dispatcher.on(`element:${imageType === 'imageBlock' ? 'figure' : 'img'}`, (evt, data, conversionApi) => {
-                conversionApi.consumable.consume(data.viewItem, { classes: ['image_resized'] });
-            });
-        });
-    }
-}