@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

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;

package/src/imageresize/utils/getselectedimagewidthinunits.js

@@ -0,0 +1,41 @@
+/**
+ * @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/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).
+ */
+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.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @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/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.
+ */
+export declare function tryParseDimensionWithUnit(dimension: string | null | undefined): DimensionWithUnit | null;
+/**
+ * Converts dimension between `px` -> `%` and `%` -> `px`.
+ *
+ * @param parentDimensionPx	Dimension of parent element that contains measured element.
+ * @param dimension Measured element dimension.
+ * @returns Casted dimension.
+ */
+export declare function tryCastDimensionsToUnit(parentDimensionPx: number, dimension: DimensionWithUnit, targetUnit: string): DimensionWithUnit;
+/**
+ * @internal
+ */
+export type DimensionWithUnit = {
+    value: number;
+    unit: string;
+};

package/src/imageresize/utils/tryparsedimensionwithunit.js

@@ -0,0 +1,56 @@
+/**
+ * @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/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.
+ */
+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.
+ */
+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.d.ts

@@ -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
+ */
+/**
+ * @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 default class ImageResize extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageResizeEditing, typeof ImageResizeHandles, typeof ImageCustomResizeUI, typeof ImageResizeButtons];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageResize";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+}

package/src/imageresize.js

@@ -0,0 +1,38 @@
+/**
+ * @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
+ */
+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 default 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;
+    }
+}

package/src/imagesizeattributes.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @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/imagesizeattributes
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUtils from './imageutils.js';
+/**
+ * This plugin enables `width` and `height` attributes in inline and block image elements.
+ */
+export default class ImageSizeAttributes extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageSizeAttributes";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+    /**
+     * Registers the `width` and `height` attributes for inline and block images.
+     */
+    private _registerSchema;
+    /**
+     * Registers converters for `width` and `height` attributes.
+     */
+    private _registerConverters;
+}