@ckeditor/ckeditor5-image 39.0.2 → 40.0.0

package/src/imageresize/imageresizeediting.js

@@ -1,114 +1,165 @@
-/**
- * @license Copyright (c) 2003-2023, 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';
-import ImageUtils from '../imageutils';
-import ResizeImageCommand from './resizeimagecommand';
-/**
- * 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
-     */
-    constructor(editor) {
-        super(editor);
-        editor.config.define('image', {
-            resizeUnit: '%',
-            resizeOptions: [{
-                    name: 'resizeImage:original',
-                    value: null,
-                    icon: 'original'
-                },
-                {
-                    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._registerSchema();
-        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);
-    }
-    _registerSchema() {
-        if (this.editor.plugins.has('ImageBlockEditing')) {
-            this.editor.model.schema.extend('imageBlock', { allowAttributes: 'width' });
-        }
-        if (this.editor.plugins.has('ImageInlineEditing')) {
-            this.editor.model.schema.extend('imageInline', { allowAttributes: 'width' });
-        }
-    }
-    /**
-     * Registers image resize converters.
-     *
-     * @param imageType The type of the image.
-     */
-    _registerConverters(imageType) {
-        const editor = this.editor;
-        // Dedicated converter to propagate image's attribute to the img tag.
-        editor.conversion.for('downcast').add(dispatcher => dispatcher.on(`attribute:width:${imageType}`, (evt, data, conversionApi) => {
-            if (!conversionApi.consumable.consume(data.item, evt.name)) {
-                return;
-            }
-            const viewWriter = conversionApi.writer;
-            const figure = conversionApi.mapper.toViewElement(data.item);
-            if (data.attributeNewValue !== null) {
-                viewWriter.setStyle('width', data.attributeNewValue, figure);
-                viewWriter.addClass('image_resized', figure);
-            }
-            else {
-                viewWriter.removeStyle('width', figure);
-                viewWriter.removeClass('image_resized', figure);
-            }
-        }));
-        editor.conversion.for('upcast')
-            .attributeToAttribute({
-            view: {
-                name: imageType === 'imageBlock' ? 'figure' : 'img',
-                styles: {
-                    width: /.+/
-                }
-            },
-            model: {
-                key: 'width',
-                value: (viewElement) => viewElement.getStyle('width')
-            }
-        });
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, 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';
+import ImageUtils from '../imageutils';
+import ResizeImageCommand from './resizeimagecommand';
+import { widthAndHeightStylesAreBothSet } from '../image/utils';
+/**
+ * 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
+     */
+    constructor(editor) {
+        super(editor);
+        editor.config.define('image', {
+            resizeUnit: '%',
+            resizeOptions: [{
+                    name: 'resizeImage:original',
+                    value: null,
+                    icon: 'original'
+                },
+                {
+                    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._registerSchema();
+        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);
+    }
+    _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

@@ -1,30 +1,31 @@
-/**
- * @license Copyright (c) 2003-2023, 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';
-import { WidgetResize } from 'ckeditor5/src/widget';
-/**
- * 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];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "ImageResizeHandles";
-    /**
-     * @inheritDoc
-     */
-    init(): void;
-    /**
-     * Attaches the listeners responsible for creating a resizer for each image, except for images inside the HTML embed preview.
-     */
-    private _setupResizerCreator;
-}
+/**
+ * @license Copyright (c) 2003-2023, 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';
+import { WidgetResize } from 'ckeditor5/src/widget';
+import ImageUtils from '../imageutils';
+/**
+ * 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
+     */
+    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

@@ -1,107 +1,114 @@
-/**
- * @license Copyright (c) 2003-2023, 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';
-import { WidgetResize } from 'ckeditor5/src/widget';
-import ImageLoadObserver from '../image/imageloadobserver';
-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 IMAGE_WIDGETS_CLASSES_MATCH_REGEXP = /(image|image-inline)/;
-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];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageResizeHandles';
-    }
-    /**
-     * @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;
-        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 = imageView.findAncestor({ classes: IMAGE_WIDGETS_CLASSES_MATCH_REGEXP });
-            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 the model image element parent to avoid setting an inline element (<a>/<span>) as a resize host.
-                    return domConverter.mapViewToDom(mapper.toViewElement(imageModel.parent));
-                },
-                // TODO consider other positions.
-                isCentered() {
-                    const imageStyle = imageModel.getAttribute('imageStyle');
-                    return !imageStyle || imageStyle == 'block' || 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);
-                    });
-                }
-            });
-            resizer.bind('isEnabled').to(this);
-        });
-    }
-}
+/**
+ * @license Copyright (c) 2003-2023, 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';
+import { WidgetResize } from 'ckeditor5/src/widget';
+import ImageUtils from '../imageutils';
+import ImageLoadObserver from '../image/imageloadobserver';
+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
+     */
+    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 the model image element parent to avoid setting an inline element (<a>/<span>) as a resize host.
+                    return domConverter.mapViewToDom(mapper.toViewElement(imageModel.parent));
+                },
+                // TODO consider other positions.
+                isCentered() {
+                    const imageStyle = imageModel.getAttribute('imageStyle');
+                    return !imageStyle || imageStyle == 'block' || 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);
+        });
+    }
+}