@ckeditor/ckeditor5-image 39.0.2 → 40.0.0

package/src/imageresize/resizeimagecommand.d.ts

@@ -1,42 +1,42 @@
-/**
- * @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
- */
-/**
- * @module image/imageresize/resizeimagecommand
- */
-import { Command } from 'ckeditor5/src/core';
-/**
- * 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;
-}
+/**
+ * @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
+ */
+/**
+ * @module image/imageresize/resizeimagecommand
+ */
+import { Command } from 'ckeditor5/src/core';
+/**
+ * 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

@@ -1,61 +1,63 @@
-/**
- * @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
- */
-/**
- * @module image/imageresize/resizeimagecommand
- */
-import { Command } from 'ckeditor5/src/core';
-/**
- * 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('width')) {
-            this.value = null;
-        }
-        else {
-            this.value = {
-                width: element.getAttribute('width'),
-                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('width', options.width, imageElement);
-            });
-        }
-    }
-}
+/**
+ * @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
+ */
+/**
+ * @module image/imageresize/resizeimagecommand
+ */
+import { Command } from 'ckeditor5/src/core';
+/**
+ * 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.d.ts

@@ -1,27 +1,27 @@
-/**
- * @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
- */
-/**
- * @module image/imageresize
- */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageResizeButtons from './imageresize/imageresizebuttons';
-import ImageResizeEditing from './imageresize/imageresizeediting';
-import ImageResizeHandles from './imageresize/imageresizehandles';
-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 ImageResizeButtons];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "ImageResize";
-}
+/**
+ * @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
+ */
+/**
+ * @module image/imageresize
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageResizeButtons from './imageresize/imageresizebuttons';
+import ImageResizeEditing from './imageresize/imageresizeediting';
+import ImageResizeHandles from './imageresize/imageresizehandles';
+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 ImageResizeButtons];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageResize";
+}

package/src/imageresize.js

@@ -1,31 +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
- */
-/**
- * @module image/imageresize
- */
-import { Plugin } from 'ckeditor5/src/core';
-import ImageResizeButtons from './imageresize/imageresizebuttons';
-import ImageResizeEditing from './imageresize/imageresizeediting';
-import ImageResizeHandles from './imageresize/imageresizehandles';
-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, ImageResizeButtons];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'ImageResize';
-    }
-}
+/**
+ * @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
+ */
+/**
+ * @module image/imageresize
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageResizeButtons from './imageresize/imageresizebuttons';
+import ImageResizeEditing from './imageresize/imageresizeediting';
+import ImageResizeHandles from './imageresize/imageresizehandles';
+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, ImageResizeButtons];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageResize';
+    }
+}

package/src/imagesizeattributes.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @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
+ */
+/**
+ * @module image/imagesizeattributes
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageUtils from './imageutils';
+/**
+ * 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
+     */
+    afterInit(): void;
+    /**
+     * Registers the `width` and `height` attributes for inline and block images.
+     */
+    private _registerSchema;
+    /**
+     * Registers converters for `width` and `height` attributes.
+     */
+    private _registerConverters;
+}

package/src/imagesizeattributes.js

@@ -0,0 +1,143 @@
+/**
+ * @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
+ */
+/**
+ * @module image/imagesizeattributes
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import ImageUtils from './imageutils';
+import { widthAndHeightStylesAreBothSet, getSizeValueIfInPx } from './image/utils';
+/**
+ * This plugin enables `width` and `height` attributes in inline and block image elements.
+ */
+export default class ImageSizeAttributes extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageSizeAttributes';
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        this._registerSchema();
+        this._registerConverters('imageBlock');
+        this._registerConverters('imageInline');
+    }
+    /**
+     * Registers the `width` and `height` attributes for inline and block images.
+     */
+    _registerSchema() {
+        if (this.editor.plugins.has('ImageBlockEditing')) {
+            this.editor.model.schema.extend('imageBlock', { allowAttributes: ['width', 'height'] });
+        }
+        if (this.editor.plugins.has('ImageInlineEditing')) {
+            this.editor.model.schema.extend('imageInline', { allowAttributes: ['width', 'height'] });
+        }
+    }
+    /**
+     * Registers converters for `width` and `height` attributes.
+     */
+    _registerConverters(imageType) {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const viewElementName = imageType === 'imageBlock' ? 'figure' : 'img';
+        editor.conversion.for('upcast')
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                styles: {
+                    width: /.+/
+                }
+            },
+            model: {
+                key: 'width',
+                value: (viewElement) => {
+                    if (widthAndHeightStylesAreBothSet(viewElement)) {
+                        return getSizeValueIfInPx(viewElement.getStyle('width'));
+                    }
+                    return null;
+                }
+            }
+        })
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                key: 'width'
+            },
+            model: 'width'
+        })
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                styles: {
+                    height: /.+/
+                }
+            },
+            model: {
+                key: 'height',
+                value: (viewElement) => {
+                    if (widthAndHeightStylesAreBothSet(viewElement)) {
+                        return getSizeValueIfInPx(viewElement.getStyle('height'));
+                    }
+                    return null;
+                }
+            }
+        })
+            .attributeToAttribute({
+            view: {
+                name: viewElementName,
+                key: 'height'
+            },
+            model: 'height'
+        });
+        // Dedicated converters to propagate attributes to the <img> element.
+        editor.conversion.for('editingDowncast').add(dispatcher => {
+            attachDowncastConverter(dispatcher, 'width', 'width', true);
+            attachDowncastConverter(dispatcher, 'height', 'height', true);
+        });
+        editor.conversion.for('dataDowncast').add(dispatcher => {
+            attachDowncastConverter(dispatcher, 'width', 'width', false);
+            attachDowncastConverter(dispatcher, 'height', 'height', false);
+        });
+        function attachDowncastConverter(dispatcher, modelAttributeName, viewAttributeName, setRatioForInlineImage) {
+            dispatcher.on(`attribute:${modelAttributeName}:${imageType}`, (evt, data, conversionApi) => {
+                if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                    return;
+                }
+                const viewWriter = conversionApi.writer;
+                const viewElement = conversionApi.mapper.toViewElement(data.item);
+                const img = imageUtils.findViewImgElement(viewElement);
+                if (data.attributeNewValue !== null) {
+                    viewWriter.setAttribute(viewAttributeName, data.attributeNewValue, img);
+                }
+                else {
+                    viewWriter.removeAttribute(viewAttributeName, img);
+                }
+                // Do not set aspect-ratio for pictures. See https://github.com/ckeditor/ckeditor5/issues/14579.
+                if (data.item.hasAttribute('sources')) {
+                    return;
+                }
+                const isResized = data.item.hasAttribute('resizedWidth');
+                // Do not set aspect ratio for inline images which are not resized (data pipeline).
+                if (imageType === 'imageInline' && !isResized && !setRatioForInlineImage) {
+                    return;
+                }
+                const width = data.item.getAttribute('width');
+                const height = data.item.getAttribute('height');
+                const aspectRatio = img.getStyle('aspect-ratio');
+                if (width && height && !aspectRatio) {
+                    viewWriter.setStyle('aspect-ratio', `${width}/${height}`, img);
+                }
+            });
+        }
+    }
+}

package/src/imagestyle/converters.d.ts

@@ -1,24 +1,24 @@
-/**
- * @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 type { DowncastAttributeEvent, UpcastElementEvent } from 'ckeditor5/src/engine';
-import { type GetCallback } from 'ckeditor5/src/utils';
-import type { ImageStyleOptionDefinition } from '../imageconfig';
-/**
- * @module image/imagestyle/converters
- */
-/**
- * Returns a converter for the `imageStyle` attribute. It can be used for adding, changing and removing the attribute.
- *
- * @param styles An array containing available image style options.
- * @returns A model-to-view attribute converter.
- */
-export declare function modelToViewStyleAttribute(styles: Array<ImageStyleOptionDefinition>): GetCallback<DowncastAttributeEvent>;
-/**
- * Returns a view-to-model converter converting image CSS classes to a proper value in the model.
- *
- * @param styles Image style options for which the converter is created.
- * @returns A view-to-model converter.
- */
-export declare function viewToModelStyleAttribute(styles: Array<ImageStyleOptionDefinition>): GetCallback<UpcastElementEvent>;
+/**
+ * @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 type { DowncastAttributeEvent, UpcastElementEvent } from 'ckeditor5/src/engine';
+import { type GetCallback } from 'ckeditor5/src/utils';
+import type { ImageStyleOptionDefinition } from '../imageconfig';
+/**
+ * @module image/imagestyle/converters
+ */
+/**
+ * Returns a converter for the `imageStyle` attribute. It can be used for adding, changing and removing the attribute.
+ *
+ * @param styles An array containing available image style options.
+ * @returns A model-to-view attribute converter.
+ */
+export declare function modelToViewStyleAttribute(styles: Array<ImageStyleOptionDefinition>): GetCallback<DowncastAttributeEvent>;
+/**
+ * Returns a view-to-model converter converting image CSS classes to a proper value in the model.
+ *
+ * @param styles Image style options for which the converter is created.
+ * @returns A view-to-model converter.
+ */
+export declare function viewToModelStyleAttribute(styles: Array<ImageStyleOptionDefinition>): GetCallback<UpcastElementEvent>;