@ckeditor/ckeditor5-image 36.0.1 → 37.0.0-alpha.0

package/src/autoimage.js

@@ -2,180 +2,131 @@
  * @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 ) );
-
+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.
- *
- * @extends module:core/plugin~Plugin
  */
 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 );
-
-		/**
-		 * The paste–to–embed `setTimeout` ID. Stored as a property to allow
-		 * cleaning of the timeout.
-		 *
-		 * @private
-		 * @member {Number} #_timeoutId
-		 */
-		this._timeoutId = null;
-
-		/**
-		 * The position where the `<imageBlock>` element will be inserted after the timeout,
-		 * determined each time a new content is pasted into the document.
-		 *
-		 * @private
-		 * @member {module:engine/model/liveposition~LivePosition} #_positionToInsert
-		 */
-		this._positionToInsert = null;
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const modelDocument = editor.model.document;
-
-		// 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( editor.plugins.get( '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.
-	 *
-	 * @protected
-	 * @param {module:engine/model/liveposition~LivePosition} leftPosition Left position of the selection.
-	 * @param {module:engine/model/liveposition~LivePosition} 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 = global.window.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;
-			} );
-
-			editor.plugins.get( 'Delete' ).requestUndoOnBackspace();
-		}, 100 );
-	}
+    /**
+     * @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

@@ -0,0 +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`, `sizes` and `width` 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;