@ckeditor/ckeditor5-image 39.0.1 → 40.0.0

package/src/image/imageloadobserver.js

@@ -1,52 +1,52 @@
-/**
- * @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/image/imageloadobserver
- */
-import { Observer } from 'ckeditor5/src/engine';
-/**
- * Observes all new images added to the {@link module:engine/view/document~Document},
- * fires {@link module:engine/view/document~Document#event:imageLoaded} and
- * {@link module:engine/view/document~Document#event:layoutChanged} event every time when the new image
- * has been loaded.
- *
- * **Note:** This event is not fired for images that has been added to the document and rendered as `complete` (already loaded).
- */
-export default class ImageLoadObserver extends Observer {
-    /**
-     * @inheritDoc
-     */
-    observe(domRoot) {
-        this.listenTo(domRoot, 'load', (event, domEvent) => {
-            const domElement = domEvent.target;
-            if (this.checkShouldIgnoreEventFromTarget(domElement)) {
-                return;
-            }
-            if (domElement.tagName == 'IMG') {
-                this._fireEvents(domEvent);
-            }
-            // Use capture phase for better performance (#4504).
-        }, { useCapture: true });
-    }
-    /**
-     * @inheritDoc
-     */
-    stopObserving(domRoot) {
-        this.stopListening(domRoot);
-    }
-    /**
-     * Fires {@link module:engine/view/document~Document#event:layoutChanged} and
-     * {@link module:engine/view/document~Document#event:imageLoaded}
-     * if observer {@link #isEnabled is enabled}.
-     *
-     * @param domEvent The DOM event.
-     */
-    _fireEvents(domEvent) {
-        if (this.isEnabled) {
-            this.document.fire('layoutChanged');
-            this.document.fire('imageLoaded', domEvent);
-        }
-    }
-}
+/**
+ * @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/image/imageloadobserver
+ */
+import { Observer } from 'ckeditor5/src/engine';
+/**
+ * Observes all new images added to the {@link module:engine/view/document~Document},
+ * fires {@link module:engine/view/document~Document#event:imageLoaded} and
+ * {@link module:engine/view/document~Document#event:layoutChanged} event every time when the new image
+ * has been loaded.
+ *
+ * **Note:** This event is not fired for images that has been added to the document and rendered as `complete` (already loaded).
+ */
+export default class ImageLoadObserver extends Observer {
+    /**
+     * @inheritDoc
+     */
+    observe(domRoot) {
+        this.listenTo(domRoot, 'load', (event, domEvent) => {
+            const domElement = domEvent.target;
+            if (this.checkShouldIgnoreEventFromTarget(domElement)) {
+                return;
+            }
+            if (domElement.tagName == 'IMG') {
+                this._fireEvents(domEvent);
+            }
+            // Use capture phase for better performance (#4504).
+        }, { useCapture: true });
+    }
+    /**
+     * @inheritDoc
+     */
+    stopObserving(domRoot) {
+        this.stopListening(domRoot);
+    }
+    /**
+     * Fires {@link module:engine/view/document~Document#event:layoutChanged} and
+     * {@link module:engine/view/document~Document#event:imageLoaded}
+     * if observer {@link #isEnabled is enabled}.
+     *
+     * @param domEvent The DOM event.
+     */
+    _fireEvents(domEvent) {
+        if (this.isEnabled) {
+            this.document.fire('layoutChanged');
+            this.document.fire('imageLoaded', domEvent);
+        }
+    }
+}

package/src/image/imagetypecommand.d.ts

@@ -1,40 +1,44 @@
-/**
- * @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/image/imagetypecommand
- */
-import type { Element } from 'ckeditor5/src/engine';
-import { Command, type Editor } from 'ckeditor5/src/core';
-/**
- * The image type command. It changes the type of a selected image, depending on the configuration.
- */
-export default class ImageTypeCommand extends Command {
-    /**
-     * Model element name the command converts to.
-     */
-    private readonly _modelElementName;
-    /**
-     * @inheritDoc
-     *
-     * @param modelElementName Model element name the command converts to.
-     */
-    constructor(editor: Editor, modelElementName: 'imageBlock' | 'imageInline');
-    /**
-     * @inheritDoc
-     */
-    refresh(): void;
-    /**
-     * Executes the command and changes the type of a selected image.
-     *
-     * @fires execute
-     * @returns An object containing references to old and new model image elements
-     * (for before and after the change) so external integrations can hook into the decorated
-     * `execute` event and handle this change. `null` if the type change failed.
-     */
-    execute(): {
-        oldElement: Element;
-        newElement: Element;
-    } | null;
-}
+/**
+ * @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/image/imagetypecommand
+ */
+import type { Element } from 'ckeditor5/src/engine';
+import { Command, type Editor } from 'ckeditor5/src/core';
+/**
+ * The image type command. It changes the type of a selected image, depending on the configuration.
+ */
+export default class ImageTypeCommand extends Command {
+    /**
+     * Model element name the command converts to.
+     */
+    private readonly _modelElementName;
+    /**
+     * @inheritDoc
+     *
+     * @param modelElementName Model element name the command converts to.
+     */
+    constructor(editor: Editor, modelElementName: 'imageBlock' | 'imageInline');
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command and changes the type of a selected image.
+     *
+     * @fires execute
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
+     * @returns An object containing references to old and new model image elements
+     * (for before and after the change) so external integrations can hook into the decorated
+     * `execute` event and handle this change. `null` if the type change failed.
+     */
+    execute(options?: {
+        setImageSizes?: boolean;
+    }): {
+        oldElement: Element;
+        newElement: Element;
+    } | null;
+}

package/src/image/imagetypecommand.js

@@ -1,77 +1,80 @@
-/**
- * @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 { Command } from 'ckeditor5/src/core';
-/**
- * The image type command. It changes the type of a selected image, depending on the configuration.
- */
-export default class ImageTypeCommand extends Command {
-    /**
-     * @inheritDoc
-     *
-     * @param modelElementName Model element name the command converts to.
-     */
-    constructor(editor, modelElementName) {
-        super(editor);
-        this._modelElementName = modelElementName;
-    }
-    /**
-     * @inheritDoc
-     */
-    refresh() {
-        const editor = this.editor;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const element = imageUtils.getClosestSelectedImageElement(this.editor.model.document.selection);
-        if (this._modelElementName === 'imageBlock') {
-            this.isEnabled = imageUtils.isInlineImage(element);
-        }
-        else {
-            this.isEnabled = imageUtils.isBlockImage(element);
-        }
-    }
-    /**
-     * Executes the command and changes the type of a selected image.
-     *
-     * @fires execute
-     * @returns An object containing references to old and new model image elements
-     * (for before and after the change) so external integrations can hook into the decorated
-     * `execute` event and handle this change. `null` if the type change failed.
-     */
-    execute() {
-        const editor = this.editor;
-        const model = this.editor.model;
-        const imageUtils = editor.plugins.get('ImageUtils');
-        const oldElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
-        const attributes = Object.fromEntries(oldElement.getAttributes());
-        // Don't change image type if "src" is missing (a broken image), unless there's "uploadId" set.
-        // This state may happen during image upload (before it finishes) and it should be possible to change type
-        // of the image in the meantime.
-        if (!attributes.src && !attributes.uploadId) {
-            return null;
-        }
-        return model.change(writer => {
-            // Get all markers that contain the old image element.
-            const markers = Array.from(model.markers)
-                .filter(marker => marker.getRange().containsItem(oldElement));
-            const newElement = imageUtils.insertImage(attributes, model.createSelection(oldElement, 'on'), this._modelElementName);
-            if (!newElement) {
-                return null;
-            }
-            const newElementRange = writer.createRangeOn(newElement);
-            // Expand the previously intersecting markers' ranges to include the new image element.
-            for (const marker of markers) {
-                const markerRange = marker.getRange();
-                // Join the survived part of the old marker range with the new element range
-                // (loosely because there could be some new paragraph or the existing one might got split).
-                const range = markerRange.root.rootName != '$graveyard' ?
-                    markerRange.getJoined(newElementRange, true) : newElementRange;
-                writer.updateMarker(marker, { range });
-            }
-            return {
-                oldElement,
-                newElement
-            };
-        });
-    }
-}
+/**
+ * @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 { Command } from 'ckeditor5/src/core';
+/**
+ * The image type command. It changes the type of a selected image, depending on the configuration.
+ */
+export default class ImageTypeCommand extends Command {
+    /**
+     * @inheritDoc
+     *
+     * @param modelElementName Model element name the command converts to.
+     */
+    constructor(editor, modelElementName) {
+        super(editor);
+        this._modelElementName = modelElementName;
+    }
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const element = imageUtils.getClosestSelectedImageElement(this.editor.model.document.selection);
+        if (this._modelElementName === 'imageBlock') {
+            this.isEnabled = imageUtils.isInlineImage(element);
+        }
+        else {
+            this.isEnabled = imageUtils.isBlockImage(element);
+        }
+    }
+    /**
+     * Executes the command and changes the type of a selected image.
+     *
+     * @fires execute
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
+     * @returns An object containing references to old and new model image elements
+     * (for before and after the change) so external integrations can hook into the decorated
+     * `execute` event and handle this change. `null` if the type change failed.
+     */
+    execute(options = {}) {
+        const editor = this.editor;
+        const model = this.editor.model;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const oldElement = imageUtils.getClosestSelectedImageElement(model.document.selection);
+        const attributes = Object.fromEntries(oldElement.getAttributes());
+        // Don't change image type if "src" is missing (a broken image), unless there's "uploadId" set.
+        // This state may happen during image upload (before it finishes) and it should be possible to change type
+        // of the image in the meantime.
+        if (!attributes.src && !attributes.uploadId) {
+            return null;
+        }
+        return model.change(writer => {
+            const { setImageSizes = true } = options;
+            // Get all markers that contain the old image element.
+            const markers = Array.from(model.markers)
+                .filter(marker => marker.getRange().containsItem(oldElement));
+            const newElement = imageUtils.insertImage(attributes, model.createSelection(oldElement, 'on'), this._modelElementName, { setImageSizes });
+            if (!newElement) {
+                return null;
+            }
+            const newElementRange = writer.createRangeOn(newElement);
+            // Expand the previously intersecting markers' ranges to include the new image element.
+            for (const marker of markers) {
+                const markerRange = marker.getRange();
+                // Join the survived part of the old marker range with the new element range
+                // (loosely because there could be some new paragraph or the existing one might got split).
+                const range = markerRange.root.rootName != '$graveyard' ?
+                    markerRange.getJoined(newElementRange, true) : newElementRange;
+                writer.updateMarker(marker, { range });
+            }
+            return {
+                oldElement,
+                newElement
+            };
+        });
+    }
+}

package/src/image/insertimagecommand.d.ts

@@ -1,66 +1,66 @@
-/**
- * @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/image/insertimagecommand
- */
-import { Command, type Editor } from 'ckeditor5/src/core';
-import { type ArrayOrItem } from 'ckeditor5/src/utils';
-/**
- * Insert image command.
- *
- * The command is registered by the {@link module:image/image/imageediting~ImageEditing} plugin as `insertImage`
- * and it is also available via aliased `imageInsert` name.
- *
- * In order to insert an image at the current selection position
- * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
- * execute the command and specify the image source:
- *
- * ```ts
- * editor.execute( 'insertImage', { source: 'http://url.to.the/image' } );
- * ```
- *
- * It is also possible to insert multiple images at once:
- *
- * ```ts
- * editor.execute( 'insertImage', {
- * 	source:  [
- * 		'path/to/image.jpg',
- * 		'path/to/other-image.jpg'
- * 	]
- * } );
- * ```
- *
- * If you want to take the full control over the process, you can specify individual model attributes:
- *
- * ```ts
- * editor.execute( 'insertImage', {
- * 	source:  [
- * 		{ src: 'path/to/image.jpg', alt: 'First alt text' },
- * 		{ src: 'path/to/other-image.jpg', alt: 'Second alt text', customAttribute: 'My attribute value' }
- * 	]
- * } );
- * ```
- */
-export default class InsertImageCommand extends Command {
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
-    /**
-     * @inheritDoc
-     */
-    refresh(): void;
-    /**
-     * Executes the command.
-     *
-     * @fires execute
-     * @param options Options for the executed command.
-     * @param options.source The image source or an array of image sources to insert.
-     * See the documentation of the command to learn more about accepted formats.
-     */
-    execute(options: {
-        source: ArrayOrItem<string | Record<string, unknown>>;
-    }): 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/image/insertimagecommand
+ */
+import { Command, type Editor } from 'ckeditor5/src/core';
+import { type ArrayOrItem } from 'ckeditor5/src/utils';
+/**
+ * Insert image command.
+ *
+ * The command is registered by the {@link module:image/image/imageediting~ImageEditing} plugin as `insertImage`
+ * and it is also available via aliased `imageInsert` name.
+ *
+ * In order to insert an image at the current selection position
+ * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
+ * execute the command and specify the image source:
+ *
+ * ```ts
+ * editor.execute( 'insertImage', { source: 'http://url.to.the/image' } );
+ * ```
+ *
+ * It is also possible to insert multiple images at once:
+ *
+ * ```ts
+ * editor.execute( 'insertImage', {
+ * 	source:  [
+ * 		'path/to/image.jpg',
+ * 		'path/to/other-image.jpg'
+ * 	]
+ * } );
+ * ```
+ *
+ * If you want to take the full control over the process, you can specify individual model attributes:
+ *
+ * ```ts
+ * editor.execute( 'insertImage', {
+ * 	source:  [
+ * 		{ src: 'path/to/image.jpg', alt: 'First alt text' },
+ * 		{ src: 'path/to/other-image.jpg', alt: 'Second alt text', customAttribute: 'My attribute value' }
+ * 	]
+ * } );
+ * ```
+ */
+export default class InsertImageCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options Options for the executed command.
+     * @param options.source The image source or an array of image sources to insert.
+     * See the documentation of the command to learn more about accepted formats.
+     */
+    execute(options: {
+        source: ArrayOrItem<string | Record<string, unknown>>;
+    }): void;
+}