@ckeditor/ckeditor5-image 40.0.0 → 40.1.0

package/src/autoimage.d.ts

@@ -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/autoimage
- */
-import { Plugin, type Editor } from 'ckeditor5/src/core';
-import { Clipboard } from 'ckeditor5/src/clipboard';
-import { Undo } from 'ckeditor5/src/undo';
-import { Delete } from 'ckeditor5/src/typing';
-import ImageUtils from './imageutils';
-/**
- * The auto-image plugin. It recognizes image links in the pasted content and embeds
- * them shortly after they are injected into the document.
- */
-export default class AutoImage extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires(): readonly [typeof Clipboard, typeof ImageUtils, typeof Undo, typeof Delete];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "AutoImage";
-    /**
-     * The paste–to–embed `setTimeout` ID. Stored as a property to allow
-     * cleaning of the timeout.
-     */
-    private _timeoutId;
-    /**
-     * The position where the `<imageBlock>` element will be inserted after the timeout,
-     * determined each time a new content is pasted into the document.
-     */
-    private _positionToInsert;
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
-    /**
-     * @inheritDoc
-     */
-    init(): void;
-    /**
-     * Analyzes the part of the document between provided positions in search for a URL representing an image.
-     * When the URL is found, it is automatically converted into an image.
-     *
-     * @param leftPosition Left position of the selection.
-     * @param rightPosition Right position of the selection.
-     */
-    private _embedImageBetweenPositions;
-}
+/**
+ * @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/autoimage
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core';
+import { Clipboard } from 'ckeditor5/src/clipboard';
+import { Undo } from 'ckeditor5/src/undo';
+import { Delete } from 'ckeditor5/src/typing';
+import ImageUtils from './imageutils';
+/**
+ * The auto-image plugin. It recognizes image links in the pasted content and embeds
+ * them shortly after they are injected into the document.
+ */
+export default class AutoImage extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof Clipboard, typeof ImageUtils, typeof Undo, typeof Delete];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "AutoImage";
+    /**
+     * The paste–to–embed `setTimeout` ID. Stored as a property to allow
+     * cleaning of the timeout.
+     */
+    private _timeoutId;
+    /**
+     * The position where the `<imageBlock>` element will be inserted after the timeout,
+     * determined each time a new content is pasted into the document.
+     */
+    private _positionToInsert;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Analyzes the part of the document between provided positions in search for a URL representing an image.
+     * When the URL is found, it is automatically converted into an image.
+     *
+     * @param leftPosition Left position of the selection.
+     * @param rightPosition Right position of the selection.
+     */
+    private _embedImageBetweenPositions;
+}

package/src/autoimage.js

@@ -1,132 +1,132 @@
-/**
- * @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/autoimage
- */
-import { Plugin } from 'ckeditor5/src/core';
-import { Clipboard } from 'ckeditor5/src/clipboard';
-import { LivePosition, LiveRange } from 'ckeditor5/src/engine';
-import { Undo } from 'ckeditor5/src/undo';
-import { Delete } from 'ckeditor5/src/typing';
-import { global } from 'ckeditor5/src/utils';
-import ImageUtils from './imageutils';
-// Implements the pattern: http(s)://(www.)example.com/path/to/resource.ext?query=params&maybe=too.
-const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@!$&'()*+,;=%-]+/.source +
-    /\.(jpg|jpeg|png|gif|ico|webp|JPG|JPEG|PNG|GIF|ICO|WEBP)/.source +
-    /(\?[\w.~:/[\]@!$&'()*+,;=%-]*)?/.source +
-    /(#[\w.~:/[\]@!$&'()*+,;=%-]*)?$/.source));
-/**
- * The auto-image plugin. It recognizes image links in the pasted content and embeds
- * them shortly after they are injected into the document.
- */
-export default class AutoImage extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires() {
-        return [Clipboard, ImageUtils, Undo, Delete];
-    }
-    /**
-     * @inheritDoc
-     */
-    static get pluginName() {
-        return 'AutoImage';
-    }
-    /**
-     * @inheritDoc
-     */
-    constructor(editor) {
-        super(editor);
-        this._timeoutId = null;
-        this._positionToInsert = null;
-    }
-    /**
-     * @inheritDoc
-     */
-    init() {
-        const editor = this.editor;
-        const modelDocument = editor.model.document;
-        const clipboardPipeline = editor.plugins.get('ClipboardPipeline');
-        // We need to listen on `Clipboard#inputTransformation` because we need to save positions of selection.
-        // After pasting, the content between those positions will be checked for a URL that could be transformed
-        // into an image.
-        this.listenTo(clipboardPipeline, 'inputTransformation', () => {
-            const firstRange = modelDocument.selection.getFirstRange();
-            const leftLivePosition = LivePosition.fromPosition(firstRange.start);
-            leftLivePosition.stickiness = 'toPrevious';
-            const rightLivePosition = LivePosition.fromPosition(firstRange.end);
-            rightLivePosition.stickiness = 'toNext';
-            modelDocument.once('change:data', () => {
-                this._embedImageBetweenPositions(leftLivePosition, rightLivePosition);
-                leftLivePosition.detach();
-                rightLivePosition.detach();
-            }, { priority: 'high' });
-        });
-        editor.commands.get('undo').on('execute', () => {
-            if (this._timeoutId) {
-                global.window.clearTimeout(this._timeoutId);
-                this._positionToInsert.detach();
-                this._timeoutId = null;
-                this._positionToInsert = null;
-            }
-        }, { priority: 'high' });
-    }
-    /**
-     * Analyzes the part of the document between provided positions in search for a URL representing an image.
-     * When the URL is found, it is automatically converted into an image.
-     *
-     * @param leftPosition Left position of the selection.
-     * @param rightPosition Right position of the selection.
-     */
-    _embedImageBetweenPositions(leftPosition, rightPosition) {
-        const editor = this.editor;
-        // TODO: Use a marker instead of LiveRange & LivePositions.
-        const urlRange = new LiveRange(leftPosition, rightPosition);
-        const walker = urlRange.getWalker({ ignoreElementEnd: true });
-        const selectionAttributes = Object.fromEntries(editor.model.document.selection.getAttributes());
-        const imageUtils = this.editor.plugins.get('ImageUtils');
-        let src = '';
-        for (const node of walker) {
-            if (node.item.is('$textProxy')) {
-                src += node.item.data;
-            }
-        }
-        src = src.trim();
-        // If the URL does not match the image URL regexp, let's skip that.
-        if (!src.match(IMAGE_URL_REGEXP)) {
-            urlRange.detach();
-            return;
-        }
-        // Position will not be available in the `setTimeout` function so let's clone it.
-        this._positionToInsert = LivePosition.fromPosition(leftPosition);
-        // This action mustn't be executed if undo was called between pasting and auto-embedding.
-        this._timeoutId = setTimeout(() => {
-            // Do nothing if image element cannot be inserted at the current position.
-            // See https://github.com/ckeditor/ckeditor5/issues/2763.
-            // Condition must be checked after timeout - pasting may take place on an element, replacing it. The final position matters.
-            const imageCommand = editor.commands.get('insertImage');
-            if (!imageCommand.isEnabled) {
-                urlRange.detach();
-                return;
-            }
-            editor.model.change(writer => {
-                this._timeoutId = null;
-                writer.remove(urlRange);
-                urlRange.detach();
-                let insertionPosition;
-                // Check if the position where the element should be inserted is still valid.
-                // Otherwise leave it as undefined to use the logic of insertImage().
-                if (this._positionToInsert.root.rootName !== '$graveyard') {
-                    insertionPosition = this._positionToInsert.toPosition();
-                }
-                imageUtils.insertImage({ ...selectionAttributes, src }, insertionPosition);
-                this._positionToInsert.detach();
-                this._positionToInsert = null;
-            });
-            const deletePlugin = editor.plugins.get('Delete');
-            deletePlugin.requestUndoOnBackspace();
-        }, 100);
-    }
-}
+/**
+ * @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/autoimage
+ */
+import { Plugin } from 'ckeditor5/src/core';
+import { Clipboard } from 'ckeditor5/src/clipboard';
+import { LivePosition, LiveRange } from 'ckeditor5/src/engine';
+import { Undo } from 'ckeditor5/src/undo';
+import { Delete } from 'ckeditor5/src/typing';
+import { global } from 'ckeditor5/src/utils';
+import ImageUtils from './imageutils';
+// Implements the pattern: http(s)://(www.)example.com/path/to/resource.ext?query=params&maybe=too.
+const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@!$&'()*+,;=%-]+/.source +
+    /\.(jpg|jpeg|png|gif|ico|webp|JPG|JPEG|PNG|GIF|ICO|WEBP)/.source +
+    /(\?[\w.~:/[\]@!$&'()*+,;=%-]*)?/.source +
+    /(#[\w.~:/[\]@!$&'()*+,;=%-]*)?$/.source));
+/**
+ * The auto-image plugin. It recognizes image links in the pasted content and embeds
+ * them shortly after they are injected into the document.
+ */
+export default class AutoImage extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [Clipboard, ImageUtils, Undo, Delete];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'AutoImage';
+    }
+    /**
+     * @inheritDoc
+     */
+    constructor(editor) {
+        super(editor);
+        this._timeoutId = null;
+        this._positionToInsert = null;
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const modelDocument = editor.model.document;
+        const clipboardPipeline = editor.plugins.get('ClipboardPipeline');
+        // We need to listen on `Clipboard#inputTransformation` because we need to save positions of selection.
+        // After pasting, the content between those positions will be checked for a URL that could be transformed
+        // into an image.
+        this.listenTo(clipboardPipeline, 'inputTransformation', () => {
+            const firstRange = modelDocument.selection.getFirstRange();
+            const leftLivePosition = LivePosition.fromPosition(firstRange.start);
+            leftLivePosition.stickiness = 'toPrevious';
+            const rightLivePosition = LivePosition.fromPosition(firstRange.end);
+            rightLivePosition.stickiness = 'toNext';
+            modelDocument.once('change:data', () => {
+                this._embedImageBetweenPositions(leftLivePosition, rightLivePosition);
+                leftLivePosition.detach();
+                rightLivePosition.detach();
+            }, { priority: 'high' });
+        });
+        editor.commands.get('undo').on('execute', () => {
+            if (this._timeoutId) {
+                global.window.clearTimeout(this._timeoutId);
+                this._positionToInsert.detach();
+                this._timeoutId = null;
+                this._positionToInsert = null;
+            }
+        }, { priority: 'high' });
+    }
+    /**
+     * Analyzes the part of the document between provided positions in search for a URL representing an image.
+     * When the URL is found, it is automatically converted into an image.
+     *
+     * @param leftPosition Left position of the selection.
+     * @param rightPosition Right position of the selection.
+     */
+    _embedImageBetweenPositions(leftPosition, rightPosition) {
+        const editor = this.editor;
+        // TODO: Use a marker instead of LiveRange & LivePositions.
+        const urlRange = new LiveRange(leftPosition, rightPosition);
+        const walker = urlRange.getWalker({ ignoreElementEnd: true });
+        const selectionAttributes = Object.fromEntries(editor.model.document.selection.getAttributes());
+        const imageUtils = this.editor.plugins.get('ImageUtils');
+        let src = '';
+        for (const node of walker) {
+            if (node.item.is('$textProxy')) {
+                src += node.item.data;
+            }
+        }
+        src = src.trim();
+        // If the URL does not match the image URL regexp, let's skip that.
+        if (!src.match(IMAGE_URL_REGEXP)) {
+            urlRange.detach();
+            return;
+        }
+        // Position will not be available in the `setTimeout` function so let's clone it.
+        this._positionToInsert = LivePosition.fromPosition(leftPosition);
+        // This action mustn't be executed if undo was called between pasting and auto-embedding.
+        this._timeoutId = setTimeout(() => {
+            // Do nothing if image element cannot be inserted at the current position.
+            // See https://github.com/ckeditor/ckeditor5/issues/2763.
+            // Condition must be checked after timeout - pasting may take place on an element, replacing it. The final position matters.
+            const imageCommand = editor.commands.get('insertImage');
+            if (!imageCommand.isEnabled) {
+                urlRange.detach();
+                return;
+            }
+            editor.model.change(writer => {
+                this._timeoutId = null;
+                writer.remove(urlRange);
+                urlRange.detach();
+                let insertionPosition;
+                // Check if the position where the element should be inserted is still valid.
+                // Otherwise leave it as undefined to use the logic of insertImage().
+                if (this._positionToInsert.root.rootName !== '$graveyard') {
+                    insertionPosition = this._positionToInsert.toPosition();
+                }
+                imageUtils.insertImage({ ...selectionAttributes, src }, insertionPosition);
+                this._positionToInsert.detach();
+                this._positionToInsert = null;
+            });
+            const deletePlugin = editor.plugins.get('Delete');
+            deletePlugin.requestUndoOnBackspace();
+        }, 100);
+    }
+}

package/src/image/converters.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/converters
- */
-import type { DowncastDispatcher, UpcastDispatcher } from 'ckeditor5/src/engine';
-import type ImageUtils from '../imageutils';
-/**
- * Returns a function that converts the image view representation:
- *
- * ```html
- * <figure class="image"><img src="..." alt="..."></img></figure>
- * ```
- *
- * to the model representation:
- *
- * ```html
- * <imageBlock src="..." alt="..."></imageBlock>
- * ```
- *
- * The entire content of the `<figure>` element except the first `<img>` is being converted as children
- * of the `<imageBlock>` model element.
- *
- * @internal
- */
-export declare function upcastImageFigure(imageUtils: ImageUtils): (dispatcher: UpcastDispatcher) => void;
-/**
- * Returns a function that converts the image view representation:
- *
- * ```html
- * <picture><source ... /><source ... />...<img ... /></picture>
- * ```
- *
- * to the model representation as the `sources` attribute:
- *
- * ```html
- * <image[Block|Inline] ... sources="..."></image[Block|Inline]>
- * ```
- *
- * @internal
- */
-export declare function upcastPicture(imageUtils: ImageUtils): (dispatcher: UpcastDispatcher) => void;
-/**
- * Converter used to convert the `srcset` model image attribute to the `srcset` and `sizes` attributes in the view.
- *
- * @internal
- * @param imageType The type of the image.
- */
-export declare function downcastSrcsetAttribute(imageUtils: ImageUtils, imageType: 'imageBlock' | 'imageInline'): (dispatcher: DowncastDispatcher) => void;
-/**
- * Converts the `source` model attribute to the `<picture><source /><source />...<img /></picture>`
- * view structure.
- *
- * @internal
- */
-export declare function downcastSourcesAttribute(imageUtils: ImageUtils): (dispatcher: DowncastDispatcher) => void;
-/**
- * Converter used to convert a given image attribute from the model to the view.
- *
- * @internal
- * @param imageType The type of the image.
- * @param attributeKey The name of the attribute to convert.
- */
-export declare function downcastImageAttribute(imageUtils: ImageUtils, imageType: 'imageBlock' | 'imageInline', attributeKey: string): (dispatcher: DowncastDispatcher) => 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/converters
+ */
+import type { DowncastDispatcher, UpcastDispatcher } from 'ckeditor5/src/engine';
+import type ImageUtils from '../imageutils';
+/**
+ * Returns a function that converts the image view representation:
+ *
+ * ```html
+ * <figure class="image"><img src="..." alt="..."></img></figure>
+ * ```
+ *
+ * to the model representation:
+ *
+ * ```html
+ * <imageBlock src="..." alt="..."></imageBlock>
+ * ```
+ *
+ * The entire content of the `<figure>` element except the first `<img>` is being converted as children
+ * of the `<imageBlock>` model element.
+ *
+ * @internal
+ */
+export declare function upcastImageFigure(imageUtils: ImageUtils): (dispatcher: UpcastDispatcher) => void;
+/**
+ * Returns a function that converts the image view representation:
+ *
+ * ```html
+ * <picture><source ... /><source ... />...<img ... /></picture>
+ * ```
+ *
+ * to the model representation as the `sources` attribute:
+ *
+ * ```html
+ * <image[Block|Inline] ... sources="..."></image[Block|Inline]>
+ * ```
+ *
+ * @internal
+ */
+export declare function upcastPicture(imageUtils: ImageUtils): (dispatcher: UpcastDispatcher) => void;
+/**
+ * Converter used to convert the `srcset` model image attribute to the `srcset` and `sizes` attributes in the view.
+ *
+ * @internal
+ * @param imageType The type of the image.
+ */
+export declare function downcastSrcsetAttribute(imageUtils: ImageUtils, imageType: 'imageBlock' | 'imageInline'): (dispatcher: DowncastDispatcher) => void;
+/**
+ * Converts the `source` model attribute to the `<picture><source /><source />...<img /></picture>`
+ * view structure.
+ *
+ * @internal
+ */
+export declare function downcastSourcesAttribute(imageUtils: ImageUtils): (dispatcher: DowncastDispatcher) => void;
+/**
+ * Converter used to convert a given image attribute from the model to the view.
+ *
+ * @internal
+ * @param imageType The type of the image.
+ * @param attributeKey The name of the attribute to convert.
+ */
+export declare function downcastImageAttribute(imageUtils: ImageUtils, imageType: 'imageBlock' | 'imageInline', attributeKey: string): (dispatcher: DowncastDispatcher) => void;