@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

package/src/imageresize/imageresizeediting.js

@@ -0,0 +1,183 @@
+/**
+ * @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 } 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 default class ImageResizeEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageResizeEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        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() {
+        if (this.editor.plugins.has('ImageBlockEditing')) {
+            this.editor.model.schema.extend('imageBlock', { allowAttributes: ['resizedWidth', 'resizedHeight'] });
+        }
+        if (this.editor.plugins.has('ImageInlineEditing')) {
+            this.editor.model.schema.extend('imageInline', { allowAttributes: ['resizedWidth', 'resizedHeight'] });
+        }
+    }
+    /**
+     * 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');
+                }
+            }
+        });
+    }
+}

package/src/imageresize/imageresizehandles.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @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 } from 'ckeditor5/src/core.js';
+import { WidgetResize } from 'ckeditor5/src/widget.js';
+import ImageUtils from '../imageutils.js';
+/**
+ * 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 default class ImageResizeHandles extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof WidgetResize, typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageResizeHandles";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Attaches the listeners responsible for creating a resizer for each image, except for images inside the HTML embed preview.
+     */
+    private _setupResizerCreator;
+}

package/src/imageresize/imageresizehandles.js

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

@@ -0,0 +1,42 @@
+/**
+ * @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/resizeimagecommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+/**
+ * The resize image command. Currently, it only supports the width attribute.
+ */
+export default class ResizeImageCommand extends Command {
+    /**
+     * Desired image width and height.
+     */
+    value: null | {
+        width: string | null;
+        height: string | null;
+    };
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * 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: {
+        width: string | null;
+    }): void;
+}

package/src/imageresize/resizeimagecommand.js

@@ -0,0 +1,63 @@
+/**
+ * @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/resizeimagecommand
+ */
+import { Command } from 'ckeditor5/src/core.js';
+/**
+ * The resize image command. Currently, it only supports the width attribute.
+ */
+export default 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.d.ts

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