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

package/src/imageresize/imageresizehandles.js

@@ -1,118 +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 { WidgetResize } from 'ckeditor5/src/widget.js';
-import { ImageUtils } from '../imageutils.js';
-import { ImageLoadObserver } from '../image/imageloadobserver.js';
-const RESIZABLE_IMAGES_CSS_SELECTOR = 'figure.image.ck-widget > img,' +
-    'figure.image.ck-widget > picture > img,' +
-    'figure.image.ck-widget > a > img,' +
-    'figure.image.ck-widget > a > picture > img,' +
-    'span.image-inline.ck-widget > img,' +
-    'span.image-inline.ck-widget > picture > img';
-const RESIZED_IMAGE_CLASS = 'image_resized';
-/**
- * The image resize by handles feature.
- *
- * It adds the ability to resize each image using handles or manually by
- * {@link module:image/imageresize/imageresizebuttons~ImageResizeButtons} buttons.
- */
-export class ImageResizeHandles extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [WidgetResize, ImageUtils];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageResizeHandles';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const command = this.editor.commands.get('resizeImage');
-        this.bind('isEnabled').to(command);
-        this._setupResizerCreator();
-    }
-    /**
-     * Attaches the listeners responsible for creating a resizer for each image, except for images inside the HTML embed preview.
-     */
-    _setupResizerCreator() {
-        const editor = this.editor;
-        const editingView = editor.editing.view;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        editingView.addObserver(ImageLoadObserver);
-        this.listenTo(editingView.document, 'imageLoaded', (evt, domEvent) => {
-            // The resizer must be attached only to images loaded by the `ImageInsert`, `ImageUpload` or `LinkImage` plugins.
-            if (!domEvent.target.matches(RESIZABLE_IMAGES_CSS_SELECTOR)) {
-                return;
-            }
-            const domConverter = editor.editing.view.domConverter;
-            const imageView = domConverter.domToView(domEvent.target);
-            const widgetView = imageUtils.getImageWidgetFromImageView(imageView);
-            let resizer = this.editor.plugins.get(WidgetResize).getResizerByViewElement(widgetView);
-            if (resizer) {
-                // There are rare cases when the image will be triggered multiple times for the same widget, e.g. when
-                // the image's source was changed after upload (https://github.com/ckeditor/ckeditor5/pull/8108#issuecomment-708302992).
-                resizer.redraw();
-                return;
-            }
-            const mapper = editor.editing.mapper;
-            const imageModel = mapper.toModelElement(widgetView);
-            resizer = editor.plugins
-                .get(WidgetResize)
-                .attachTo({
-                unit: editor.config.get('image.resizeUnit'),
-                modelElement: imageModel,
-                viewElement: widgetView,
-                editor,
-                getHandleHost(domWidgetElement) {
-                    return domWidgetElement.querySelector('img');
-                },
-                getResizeHost() {
-                    return domConverter.mapViewToDom(mapper.toViewElement(imageModel));
-                },
-                isCentered() {
-                    const imageStyle = imageModel.getAttribute('imageStyle');
-                    return imageStyle == 'alignCenter';
-                },
-                onCommit(newValue) {
-                    // Get rid of the CSS class in case the command execution that follows is unsuccessful
-                    // (e.g. Track Changes can override it and the new dimensions will not apply). Otherwise,
-                    // the presence of the class and the absence of the width style will cause it to take 100%
-                    // of the horizontal space.
-                    editingView.change(writer => {
-                        writer.removeClass(RESIZED_IMAGE_CLASS, widgetView);
-                    });
-                    editor.execute('resizeImage', { width: newValue });
-                }
-            });
-            resizer.on('updateSize', () => {
-                if (!widgetView.hasClass(RESIZED_IMAGE_CLASS)) {
-                    editingView.change(writer => {
-                        writer.addClass(RESIZED_IMAGE_CLASS, widgetView);
-                    });
-                }
-                const target = imageModel.name === 'imageInline' ? imageView : widgetView;
-                if (target.getStyle('height')) {
-                    editingView.change(writer => {
-                        writer.removeStyle('height', target);
-                    });
-                }
-            });
-            resizer.bind('isEnabled').to(this);
-        });
-    }
-}

package/src/imageresize/resizeimagecommand.js

@@ -1,63 +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/resizeimagecommand
- */
-import { Command } from 'ckeditor5/src/core.js';
-/**
- * The resize image command. Currently, it only supports the width attribute.
- */
-export class ResizeImageCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const editor = this.editor;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const element = imageUtils.getClosestSelectedImageElement(editor.model.document.selection);
-        this.isEnabled = !!element;
-        if (!element || !element.hasAttribute('resizedWidth')) {
-            this.value = null;
-        }
-        else {
-            this.value = {
-                width: element.getAttribute('resizedWidth'),
-                height: null
-            };
-        }
-    }
-    /**
-     * Executes the command.
-     *
-     * ```ts
-     * // Sets the width to 50%:
-     * editor.execute( 'resizeImage', { width: '50%' } );
-     *
-     * // Removes the width attribute:
-     * editor.execute( 'resizeImage', { width: null } );
-     * ```
-     *
-     * @param options
-     * @param options.width The new width of the image.
-     * @fires execute
-     */
-    execute(options) {
-        const editor = this.editor;
-        const model = editor.model;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const imageElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
-        this.value = {
-            width: options.width,
-            height: null
-        };
-        if (imageElement) {
-            model.change(writer => {
-                writer.setAttribute('resizedWidth', options.width, imageElement);
-                writer.removeAttribute('resizedHeight', imageElement);
-                imageUtils.setImageNaturalSizeAttributes(imageElement);
-            });
-        }
-    }
-}

package/src/imageresize/ui/imagecustomresizeformview.js

@@ -1,264 +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/ui/imagecustomresizeformview
- */
-import { ButtonView, FocusCycler, FormHeaderView, FormRowView, LabeledFieldView, View, ViewCollection, createLabeledInputNumber, submitHandler } from 'ckeditor5/src/ui.js';
-import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.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.
- *
- * @internal
- */
-export 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);
-        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.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,
-            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-form',
-                    'ck-image-custom-resize-form',
-                    'ck-responsive-form'
-                ],
-                // https://github.com/ckeditor/ckeditor5-image/issues/40
-                tabindex: '-1'
-            },
-            children: this.children
-        });
-    }
-    /**
-     * @inheritDoc
-     */
-    render() {
-        super.render();
-        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
-     */
-    destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
-    /**
-     * 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
-        });
-        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'
-        });
-        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.
-     *
-     * @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.class = 'ck-labeled-field-view_full-width';
-        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.js

@@ -1,25 +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
- */
-/**
- * Finds model, view and DOM element for selected image element. Returns `null` if there is no image selected.
- *
- * @param editor Editor instance.
- * @internal
- */
-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.js

@@ -1,33 +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 { 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.
- * @internal
- */
-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.js

@@ -1,42 +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/utils/getselectedimagewidthinunits
- */
-import { Rect } from 'ckeditor5/src/utils.js';
-import { calculateResizeHostAncestorWidth } from 'ckeditor5/src/widget.js';
-import { tryCastDimensionsToUnit, tryParseDimensionWithUnit } from './tryparsedimensionwithunit.js';
-import { getSelectedImageEditorNodes } from './getselectedimageeditornodes.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).
- * @internal
- */
-export function getSelectedImageWidthInUnits(editor, targetUnit) {
-    const imageNodes = getSelectedImageEditorNodes(editor);
-    if (!imageNodes) {
-        return null;
-    }
-    const parsedResizedWidth = tryParseDimensionWithUnit(imageNodes.model.getAttribute('resizedWidth') || null);
-    if (!parsedResizedWidth) {
-        return null;
-    }
-    if (parsedResizedWidth.unit === targetUnit) {
-        return parsedResizedWidth;
-    }
-    const imageParentWidthPx = calculateResizeHostAncestorWidth(imageNodes.dom);
-    const imageHolderDimension = {
-        unit: 'px',
-        value: new Rect(imageNodes.dom).width
-    };
-    return tryCastDimensionsToUnit(imageParentWidthPx, imageHolderDimension, targetUnit);
-}

package/src/imageresize/utils/tryparsedimensionwithunit.js

@@ -1,58 +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/utils/tryparsedimensionwithunit
- */
-/**
- * Parses provided string with dimension value and returns extracted numeric value and unit.
- *
- * 	* If non-string dimension is passed then `null` value is returned.
- * 	* If unit is missing then `null` is returned.
- * 	* If numeric value part of string is not a number then `null` is returned.
- *
- * Example:
- * 	`"222px"` => `{ value: 222, unit: "px" }`
- *	`"99%"` => `{ value: 99, unit: "%" }`
-
- * @param dimension Unsafe string with dimension.
- * @returns Parsed dimension with extracted numeric value and units.
- * @internal
- */
-export function tryParseDimensionWithUnit(dimension) {
-    if (!dimension) {
-        return null;
-    }
-    const [, rawValue, unit] = dimension.trim().match(/([.,\d]+)(%|px)$/) || [];
-    const parsedValue = Number.parseFloat(rawValue);
-    if (Number.isNaN(parsedValue)) {
-        return null;
-    }
-    return {
-        value: parsedValue,
-        unit
-    };
-}
-/**
- * Converts dimension between `px` -> `%` and `%` -> `px`.
- *
- * @param parentDimensionPx	Dimension of parent element that contains measured element.
- * @param dimension Measured element dimension.
- * @returns Casted dimension.
- * @internal
- */
-export function tryCastDimensionsToUnit(parentDimensionPx, dimension, targetUnit) {
-    // "%" -> "px" conversion
-    if (targetUnit === 'px') {
-        return {
-            value: dimension.value,
-            unit: 'px'
-        };
-    }
-    // "px" -> "%" conversion
-    return {
-        value: dimension.value / parentDimensionPx * 100,
-        unit: '%'
-    };
-}

package/src/imageresize.js

@@ -1,38 +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
- */
-import { Plugin } from 'ckeditor5/src/core.js';
-import { ImageResizeButtons } from './imageresize/imageresizebuttons.js';
-import { ImageResizeEditing } from './imageresize/imageresizeediting.js';
-import { ImageResizeHandles } from './imageresize/imageresizehandles.js';
-import { ImageCustomResizeUI } from './imageresize/imagecustomresizeui.js';
-import '../theme/imageresize.css';
-/**
- * The image resize plugin.
- *
- * It adds a possibility to resize each image using handles.
- */
-export class ImageResize extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [ImageResizeEditing, ImageResizeHandles, ImageCustomResizeUI, ImageResizeButtons];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageResize';
-    }
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin() {
-        return true;
-    }
-}