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

package/src/imageupload/imageuploadui.js

@@ -2,15 +2,10 @@
  * @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/imageupload/imageuploadui
- */
-
 import { Plugin, icons } from 'ckeditor5/src/core';
 import { FileDialogButtonView } from 'ckeditor5/src/upload';
 import { createImageTypeRegExp } from './utils';
-
+import '../imageconfig';
 /**
  * The image upload button plugin.
  *
@@ -18,57 +13,46 @@ import { createImageTypeRegExp } from './utils';
  *
  * Adds the `'uploadImage'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
  * and also the `imageUpload` button as an alias for backward compatibility.
- *
- * @extends module:core/plugin~Plugin
  */
 export default class ImageUploadUI extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'ImageUploadUI';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	init() {
-		const editor = this.editor;
-		const t = editor.t;
-		const componentCreator = locale => {
-			const view = new FileDialogButtonView( locale );
-			const command = editor.commands.get( 'uploadImage' );
-			const imageTypes = editor.config.get( 'image.upload.types' );
-			const imageTypesRegExp = createImageTypeRegExp( imageTypes );
-
-			view.set( {
-				acceptedType: imageTypes.map( type => `image/${ type }` ).join( ',' ),
-				allowMultipleFiles: true
-			} );
-
-			view.buttonView.set( {
-				label: t( 'Insert image' ),
-				icon: icons.image,
-				tooltip: true
-			} );
-
-			view.buttonView.bind( 'isEnabled' ).to( command );
-
-			view.on( 'done', ( evt, files ) => {
-				const imagesToUpload = Array.from( files ).filter( file => imageTypesRegExp.test( file.type ) );
-
-				if ( imagesToUpload.length ) {
-					editor.execute( 'uploadImage', { file: imagesToUpload } );
-
-					editor.editing.view.focus();
-				}
-			} );
-
-			return view;
-		};
-
-		// Setup `uploadImage` button and add `imageUpload` button as an alias for backward compatibility.
-		editor.ui.componentFactory.add( 'uploadImage', componentCreator );
-		editor.ui.componentFactory.add( 'imageUpload', componentCreator );
-	}
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'ImageUploadUI';
+    }
+    /**
+     * @inheritDoc
+     */
+    init() {
+        const editor = this.editor;
+        const t = editor.t;
+        const componentCreator = (locale) => {
+            const view = new FileDialogButtonView(locale);
+            const command = editor.commands.get('uploadImage');
+            const imageTypes = editor.config.get('image.upload.types');
+            const imageTypesRegExp = createImageTypeRegExp(imageTypes);
+            view.set({
+                acceptedType: imageTypes.map(type => `image/${type}`).join(','),
+                allowMultipleFiles: true
+            });
+            view.buttonView.set({
+                label: t('Insert image'),
+                icon: icons.image,
+                tooltip: true
+            });
+            view.buttonView.bind('isEnabled').to(command);
+            view.on('done', (evt, files) => {
+                const imagesToUpload = Array.from(files).filter(file => imageTypesRegExp.test(file.type));
+                if (imagesToUpload.length) {
+                    editor.execute('uploadImage', { file: imagesToUpload });
+                    editor.editing.view.focus();
+                }
+            });
+            return view;
+        };
+        // Setup `uploadImage` button and add `imageUpload` button as an alias for backward compatibility.
+        editor.ui.componentFactory.add('uploadImage', componentCreator);
+        editor.ui.componentFactory.add('imageUpload', componentCreator);
+    }
 }

package/src/imageupload/uploadimagecommand.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @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';
+import { type ArrayOrItem } from 'ckeditor5/src/utils';
+/**
+ * @module image/imageupload/uploadimagecommand
+ */
+/**
+ * The upload image command.
+ *
+ * The command is registered by the {@link module:image/imageupload/imageuploadediting~ImageUploadEditing} plugin as `uploadImage`
+ * and it is also available via aliased `imageUpload` name.
+ *
+ * In order to upload an image at the current selection position
+ * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
+ * execute the command and pass the native image file instance:
+ *
+ * ```ts
+ * this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
+ * 	// Assuming that only images were pasted:
+ * 	const images = Array.from( data.dataTransfer.files );
+ *
+ * 	// Upload the first image:
+ * 	editor.execute( 'uploadImage', { file: images[ 0 ] } );
+ * } );
+ * ```
+ *
+ * It is also possible to insert multiple images at once:
+ *
+ * ```ts
+ * editor.execute( 'uploadImage', {
+ * 	file: [
+ * 		file1,
+ * 		file2
+ * 	]
+ * } );
+ * ```
+ */
+export default class UploadImageCommand extends Command {
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options Options for the executed command.
+     * @param options.file The image file or an array of image files to upload.
+     */
+    execute(options: {
+        file: ArrayOrItem<File>;
+    }): void;
+    /**
+     * Handles uploading single file.
+     */
+    private _uploadImage;
+}
+declare module '@ckeditor/ckeditor5-core' {
+    interface CommandsMap {
+        uploadImage: UploadImageCommand;
+    }
+}

package/src/imageupload/uploadimagecommand.js

@@ -2,15 +2,12 @@
  * @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 { FileRepository } from 'ckeditor5/src/upload';
 import { Command } from 'ckeditor5/src/core';
 import { toArray } from 'ckeditor5/src/utils';
-
 /**
  * @module image/imageupload/uploadimagecommand
  */
-
 /**
  * The upload image command.
  *
@@ -21,94 +18,83 @@ import { toArray } from 'ckeditor5/src/utils';
  * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
  * execute the command and pass the native image file instance:
  *
- *		this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
- *			// Assuming that only images were pasted:
- *			const images = Array.from( data.dataTransfer.files );
+ * ```ts
+ * this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
+ * 	// Assuming that only images were pasted:
+ * 	const images = Array.from( data.dataTransfer.files );
  *
- *			// Upload the first image:
- *			editor.execute( 'uploadImage', { file: images[ 0 ] } );
- *		} );
+ * 	// Upload the first image:
+ * 	editor.execute( 'uploadImage', { file: images[ 0 ] } );
+ * } );
+ * ```
  *
  * It is also possible to insert multiple images at once:
  *
- *		editor.execute( 'uploadImage', {
- *			file: [
- *				file1,
- *				file2
- *			]
- *		} );
- *
- * @extends module:core/command~Command
+ * ```ts
+ * editor.execute( 'uploadImage', {
+ * 	file: [
+ * 		file1,
+ * 		file2
+ * 	]
+ * } );
+ * ```
  */
 export default class UploadImageCommand extends Command {
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const imageUtils = editor.plugins.get( 'ImageUtils' );
-		const selectedElement = editor.model.document.selection.getSelectedElement();
-
-		// TODO: This needs refactoring.
-		this.isEnabled = imageUtils.isImageAllowed() || imageUtils.isImage( selectedElement );
-	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @fires execute
-	 * @param {Object} options Options for the executed command.
-	 * @param {File|Array.<File>} options.file The image file or an array of image files to upload.
-	 */
-	execute( options ) {
-		const files = toArray( options.file );
-		const selection = this.editor.model.document.selection;
-		const imageUtils = this.editor.plugins.get( 'ImageUtils' );
-
-		// In case of multiple files, each file (starting from the 2nd) will be inserted at a position that
-		// follows the previous one. That will move the selection and, to stay on the safe side and make sure
-		// all images inherit the same selection attributes, they are collected beforehand.
-		//
-		// Applying these attributes ensures, for instance, that inserting an (inline) image into a link does
-		// not split that link but preserves its continuity.
-		//
-		// Note: Selection attributes that do not make sense for images will be filtered out by insertImage() anyway.
-		const selectionAttributes = Object.fromEntries( selection.getAttributes() );
-
-		files.forEach( ( file, index ) => {
-			const selectedElement = selection.getSelectedElement();
-
-			// Inserting of an inline image replace the selected element and make a selection on the inserted image.
-			// Therefore inserting multiple inline images requires creating position after each element.
-			if ( index && selectedElement && imageUtils.isImage( selectedElement ) ) {
-				const position = this.editor.model.createPositionAfter( selectedElement );
-
-				this._uploadImage( file, selectionAttributes, position );
-			} else {
-				this._uploadImage( file, selectionAttributes );
-			}
-		} );
-	}
-
-	/**
-	 * Handles uploading single file.
-	 *
-	 * @private
-	 * @param {File} file
-	 * @param {Object} attributes
-	 * @param {module:engine/model/position~Position} position
-	 */
-	_uploadImage( file, attributes, position ) {
-		const editor = this.editor;
-		const fileRepository = editor.plugins.get( FileRepository );
-		const loader = fileRepository.createLoader( file );
-		const imageUtils = editor.plugins.get( 'ImageUtils' );
-
-		// Do not throw when upload adapter is not set. FileRepository will log an error anyway.
-		if ( !loader ) {
-			return;
-		}
-
-		imageUtils.insertImage( { ...attributes, uploadId: loader.id }, position );
-	}
+    /**
+     * @inheritDoc
+     */
+    refresh() {
+        const editor = this.editor;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        const selectedElement = editor.model.document.selection.getSelectedElement();
+        // TODO: This needs refactoring.
+        this.isEnabled = imageUtils.isImageAllowed() || imageUtils.isImage(selectedElement);
+    }
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options Options for the executed command.
+     * @param options.file The image file or an array of image files to upload.
+     */
+    execute(options) {
+        const files = toArray(options.file);
+        const selection = this.editor.model.document.selection;
+        const imageUtils = this.editor.plugins.get('ImageUtils');
+        // In case of multiple files, each file (starting from the 2nd) will be inserted at a position that
+        // follows the previous one. That will move the selection and, to stay on the safe side and make sure
+        // all images inherit the same selection attributes, they are collected beforehand.
+        //
+        // Applying these attributes ensures, for instance, that inserting an (inline) image into a link does
+        // not split that link but preserves its continuity.
+        //
+        // Note: Selection attributes that do not make sense for images will be filtered out by insertImage() anyway.
+        const selectionAttributes = Object.fromEntries(selection.getAttributes());
+        files.forEach((file, index) => {
+            const selectedElement = selection.getSelectedElement();
+            // Inserting of an inline image replace the selected element and make a selection on the inserted image.
+            // Therefore inserting multiple inline images requires creating position after each element.
+            if (index && selectedElement && imageUtils.isImage(selectedElement)) {
+                const position = this.editor.model.createPositionAfter(selectedElement);
+                this._uploadImage(file, selectionAttributes, position);
+            }
+            else {
+                this._uploadImage(file, selectionAttributes);
+            }
+        });
+    }
+    /**
+     * Handles uploading single file.
+     */
+    _uploadImage(file, attributes, position) {
+        const editor = this.editor;
+        const fileRepository = editor.plugins.get(FileRepository);
+        const loader = fileRepository.createLoader(file);
+        const imageUtils = editor.plugins.get('ImageUtils');
+        // Do not throw when upload adapter is not set. FileRepository will log an error anyway.
+        if (!loader) {
+            return;
+        }
+        imageUtils.insertImage({ ...attributes, uploadId: loader.id }, position);
+    }
 }

package/src/imageupload/utils.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @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/imageupload/utils
+ */
+import type { ViewElement } from 'ckeditor5/src/engine';
+import type ImageUtils from '../imageutils';
+/**
+ * Creates a regular expression used to test for image files.
+ *
+ * ```ts
+ * const imageType = createImageTypeRegExp( [ 'png', 'jpeg', 'svg+xml', 'vnd.microsoft.icon' ] );
+ *
+ * console.log( 'is supported image', imageType.test( file.type ) );
+ * ```
+ */
+export declare function createImageTypeRegExp(types: Array<string>): RegExp;
+/**
+ * Creates a promise that fetches the image local source (Base64 or blob) and resolves with a `File` object.
+ *
+ * @param image Image whose source to fetch.
+ * @returns A promise which resolves when an image source is fetched and converted to a `File` instance.
+ * It resolves with a `File` object. If there were any errors during file processing, the promise will be rejected.
+ */
+export declare function fetchLocalImage(image: ViewElement): Promise<File>;
+/**
+ * Checks whether a given node is an image element with a local source (Base64 or blob).
+ *
+ * @param node The node to check.
+ */
+export declare function isLocalImage(imageUtils: ImageUtils, node: ViewElement): boolean;

package/src/imageupload/utils.js

@@ -2,136 +2,111 @@
  * @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/imageupload/utils
- */
-
-/* global fetch, File */
-
 import { global } from 'ckeditor5/src/utils';
-
 /**
  * Creates a regular expression used to test for image files.
  *
- *		const imageType = createImageTypeRegExp( [ 'png', 'jpeg', 'svg+xml', 'vnd.microsoft.icon' ] );
- *
- *		console.log( 'is supported image', imageType.test( file.type ) );
+ * ```ts
+ * const imageType = createImageTypeRegExp( [ 'png', 'jpeg', 'svg+xml', 'vnd.microsoft.icon' ] );
  *
- * @param {Array.<String>} types
- * @returns {RegExp}
+ * console.log( 'is supported image', imageType.test( file.type ) );
+ * ```
  */
-export function createImageTypeRegExp( types ) {
-	// Sanitize the MIME type name which may include: "+", "-" or ".".
-	const regExpSafeNames = types.map( type => type.replace( '+', '\\+' ) );
-
-	return new RegExp( `^image\\/(${ regExpSafeNames.join( '|' ) })$` );
+export function createImageTypeRegExp(types) {
+    // Sanitize the MIME type name which may include: "+", "-" or ".".
+    const regExpSafeNames = types.map(type => type.replace('+', '\\+'));
+    return new RegExp(`^image\\/(${regExpSafeNames.join('|')})$`);
 }
-
 /**
  * Creates a promise that fetches the image local source (Base64 or blob) and resolves with a `File` object.
  *
- * @param {module:engine/view/element~Element} image Image whose source to fetch.
- * @returns {Promise.<File>} A promise which resolves when an image source is fetched and converted to a `File` instance.
+ * @param image Image whose source to fetch.
+ * @returns A promise which resolves when an image source is fetched and converted to a `File` instance.
  * It resolves with a `File` object. If there were any errors during file processing, the promise will be rejected.
  */
-export function fetchLocalImage( image ) {
-	return new Promise( ( resolve, reject ) => {
-		const imageSrc = image.getAttribute( 'src' );
-
-		// Fetch works asynchronously and so does not block browser UI when processing data.
-		fetch( imageSrc )
-			.then( resource => resource.blob() )
-			.then( blob => {
-				const mimeType = getImageMimeType( blob, imageSrc );
-				const ext = mimeType.replace( 'image/', '' );
-				const filename = `image.${ ext }`;
-				const file = new File( [ blob ], filename, { type: mimeType } );
-
-				resolve( file );
-			} )
-			.catch( err => {
-				// Fetch fails only, if it can't make a request due to a network failure or if anything prevented the request
-				// from completing, i.e. the Content Security Policy rules. It is not possible to detect the exact cause of failure,
-				// so we are just trying the fallback solution, if general TypeError is thrown.
-				return err && err.name === 'TypeError' ?
-					convertLocalImageOnCanvas( imageSrc ).then( resolve ).catch( reject ) :
-					reject( err );
-			} );
-	} );
+export function fetchLocalImage(image) {
+    return new Promise((resolve, reject) => {
+        const imageSrc = image.getAttribute('src');
+        // Fetch works asynchronously and so does not block browser UI when processing data.
+        fetch(imageSrc)
+            .then(resource => resource.blob())
+            .then(blob => {
+            const mimeType = getImageMimeType(blob, imageSrc);
+            const ext = mimeType.replace('image/', '');
+            const filename = `image.${ext}`;
+            const file = new File([blob], filename, { type: mimeType });
+            resolve(file);
+        })
+            .catch(err => {
+            // Fetch fails only, if it can't make a request due to a network failure or if anything prevented the request
+            // from completing, i.e. the Content Security Policy rules. It is not possible to detect the exact cause of failure,
+            // so we are just trying the fallback solution, if general TypeError is thrown.
+            return err && err.name === 'TypeError' ?
+                convertLocalImageOnCanvas(imageSrc).then(resolve).catch(reject) :
+                reject(err);
+        });
+    });
 }
-
 /**
  * Checks whether a given node is an image element with a local source (Base64 or blob).
  *
- * @param {module:image/imageutils~ImageUtils} imageUtils
- * @param {module:engine/view/node~Node} node The node to check.
- * @returns {Boolean}
+ * @param node The node to check.
  */
-export function isLocalImage( imageUtils, node ) {
-	if ( !imageUtils.isInlineImageView( node ) || !node.getAttribute( 'src' ) ) {
-		return false;
-	}
-
-	return node.getAttribute( 'src' ).match( /^data:image\/\w+;base64,/g ) ||
-		node.getAttribute( 'src' ).match( /^blob:/g );
+export function isLocalImage(imageUtils, node) {
+    if (!imageUtils.isInlineImageView(node) || !node.getAttribute('src')) {
+        return false;
+    }
+    return !!node.getAttribute('src').match(/^data:image\/\w+;base64,/g) ||
+        !!node.getAttribute('src').match(/^blob:/g);
 }
-
-// Extracts an image type based on its blob representation or its source.
-//
-// @param {String} src Image `src` attribute value.
-// @param {Blob} blob Image blob representation.
-// @returns {String}
-function getImageMimeType( blob, src ) {
-	if ( blob.type ) {
-		return blob.type;
-	} else if ( src.match( /data:(image\/\w+);base64/ ) ) {
-		return src.match( /data:(image\/\w+);base64/ )[ 1 ].toLowerCase();
-	} else {
-		// Fallback to 'jpeg' as common extension.
-		return 'image/jpeg';
-	}
+/**
+ * Extracts an image type based on its blob representation or its source.
+ * @param blob Image blob representation.
+ * @param src Image `src` attribute value.
+ */
+function getImageMimeType(blob, src) {
+    if (blob.type) {
+        return blob.type;
+    }
+    else if (src.match(/data:(image\/\w+);base64/)) {
+        return src.match(/data:(image\/\w+);base64/)[1].toLowerCase();
+    }
+    else {
+        // Fallback to 'jpeg' as common extension.
+        return 'image/jpeg';
+    }
 }
-
-// Creates a promise that converts the image local source (Base64 or blob) to a blob using canvas and resolves
-// with a `File` object.
-//
-// @param {String} imageSrc Image `src` attribute value.
-// @returns {Promise.<File>} A promise which resolves when an image source is converted to a `File` instance.
-// It resolves with a `File` object. If there were any errors during file processing, the promise will be rejected.
-function convertLocalImageOnCanvas( imageSrc ) {
-	return getBlobFromCanvas( imageSrc ).then( blob => {
-		const mimeType = getImageMimeType( blob, imageSrc );
-		const ext = mimeType.replace( 'image/', '' );
-		const filename = `image.${ ext }`;
-
-		return new File( [ blob ], filename, { type: mimeType } );
-	} );
+/**
+ * Creates a promise that converts the image local source (Base64 or blob) to a blob using canvas and resolves
+ * with a `File` object.
+ * @param imageSrc Image `src` attribute value.
+ * @returns A promise which resolves when an image source is converted to a `File` instance.
+ * It resolves with a `File` object. If there were any errors during file processing, the promise will be rejected.
+ */
+function convertLocalImageOnCanvas(imageSrc) {
+    return getBlobFromCanvas(imageSrc).then(blob => {
+        const mimeType = getImageMimeType(blob, imageSrc);
+        const ext = mimeType.replace('image/', '');
+        const filename = `image.${ext}`;
+        return new File([blob], filename, { type: mimeType });
+    });
 }
-
-// Creates a promise that resolves with a `Blob` object converted from the image source (Base64 or blob).
-//
-// @param {String} imageSrc Image `src` attribute value.
-// @returns {Promise.<Blob>}
-function getBlobFromCanvas( imageSrc ) {
-	return new Promise( ( resolve, reject ) => {
-		const image = global.document.createElement( 'img' );
-
-		image.addEventListener( 'load', () => {
-			const canvas = global.document.createElement( 'canvas' );
-
-			canvas.width = image.width;
-			canvas.height = image.height;
-
-			const ctx = canvas.getContext( '2d' );
-
-			ctx.drawImage( image, 0, 0 );
-
-			canvas.toBlob( blob => blob ? resolve( blob ) : reject() );
-		} );
-
-		image.addEventListener( 'error', () => reject() );
-
-		image.src = imageSrc;
-	} );
+/**
+ * Creates a promise that resolves with a `Blob` object converted from the image source (Base64 or blob).
+ * @param imageSrc Image `src` attribute value.
+ */
+function getBlobFromCanvas(imageSrc) {
+    return new Promise((resolve, reject) => {
+        const image = global.document.createElement('img');
+        image.addEventListener('load', () => {
+            const canvas = global.document.createElement('canvas');
+            canvas.width = image.width;
+            canvas.height = image.height;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(image, 0, 0);
+            canvas.toBlob(blob => blob ? resolve(blob) : reject());
+        });
+        image.addEventListener('error', () => reject());
+        image.src = imageSrc;
+    });
 }