@ckeditor/ckeditor5-image 27.1.0 → 29.2.0

package/src/imageupload/imageuploadediting.js

@@ -16,16 +16,16 @@ import { ClipboardPipeline } from 'ckeditor5/src/clipboard';
 import { FileRepository } from 'ckeditor5/src/upload';
 import { env } from 'ckeditor5/src/utils';
 
+import ImageUtils from '../imageutils';
 import UploadImageCommand from './uploadimagecommand';
 import { fetchLocalImage, isLocalImage } from '../../src/imageupload/utils';
 import { createImageTypeRegExp } from './utils';
-import { getViewImgFromWidget } from '../image/utils';
 
 /**
  * The editing part of the image upload feature. It registers the `'uploadImage'` command
- * and `imageUpload` command as an aliased name.
+ * and the `imageUpload` command as an aliased name.
  *
- * When an image is uploaded it fires the {@link ~ImageUploadEditing#event:uploadComplete `uploadComplete` event}
+ * When an image is uploaded, it fires the {@link ~ImageUploadEditing#event:uploadComplete `uploadComplete`} event
  * that allows adding custom attributes to the {@link module:engine/model/element~Element image element}.
  *
  * @extends module:core/plugin~Plugin
@@ -35,7 +35,7 @@ export default class ImageUploadEditing extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ FileRepository, Notification, ClipboardPipeline ];
+		return [ FileRepository, Notification, ClipboardPipeline, ImageUtils ];
 	}
 
 	static get pluginName() {
@@ -53,6 +53,21 @@ export default class ImageUploadEditing extends Plugin {
 				types: [ 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff' ]
 			}
 		} );
+
+		/**
+		 * An internal mapping of {@link module:upload/filerepository~FileLoader#id file loader UIDs} and
+		 * model elements during the upload.
+		 *
+		 * Model element of the uploaded image can change, for instance, when {@link module:image/image/imagetypecommand~ImageTypeCommand}
+		 * is executed as a result of adding caption or changing image style. As a result, the upload logic must keep track of the model
+		 * element (reference) and resolve the upload for the correct model element (instead of the one that landed in the `$graveyard`
+		 * after image type changed).
+		 *
+		 * @private
+		 * @readonly
+		 * @member {Map.<String,module:engine/model/element~Element>}
+		 */
+		this._uploadImageElements = new Map();
 	}
 
 	/**
@@ -61,17 +76,10 @@ export default class ImageUploadEditing extends Plugin {
 	init() {
 		const editor = this.editor;
 		const doc = editor.model.document;
-		const schema = editor.model.schema;
 		const conversion = editor.conversion;
 		const fileRepository = editor.plugins.get( FileRepository );
-
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
 		const imageTypes = createImageTypeRegExp( editor.config.get( 'image.upload.types' ) );
-
-		// Setup schema to allow uploadId and uploadStatus for images.
-		schema.extend( 'image', {
-			allowAttributes: [ 'uploadId', 'uploadStatus' ]
-		} );
-
 		const uploadImageCommand = new UploadImageCommand( editor );
 
 		// Register `uploadImage` command and add `imageUpload` command as an alias for backward compatibility.
@@ -133,7 +141,7 @@ export default class ImageUploadEditing extends Plugin {
 		// (see Document#change listener below).
 		this.listenTo( editor.plugins.get( 'ClipboardPipeline' ), 'inputTransformation', ( evt, data ) => {
 			const fetchableImages = Array.from( editor.editing.view.createRangeIn( data.content ) )
-				.filter( value => isLocalImage( value.item ) && !value.item.getAttribute( 'uploadProcessed' ) )
+				.filter( value => isLocalImage( imageUtils, value.item ) && !value.item.getAttribute( 'uploadProcessed' ) )
 				.map( value => { return { promise: fetchLocalImage( value.item ), imageElement: value.item }; } );
 
 			if ( !fetchableImages.length ) {
@@ -162,16 +170,20 @@ export default class ImageUploadEditing extends Plugin {
 
 		// Upload placeholder images that appeared in the model.
 		doc.on( 'change', () => {
-			const changes = doc.differ.getChanges( { includeChangesInGraveyard: true } );
+			// Note: Reversing changes to start with insertions and only then handle removals. If it was the other way around,
+			// loaders for **all** images that land in the $graveyard would abort while in fact only those that were **not** replaced
+			// by other images should be aborted.
+			const changes = doc.differ.getChanges( { includeChangesInGraveyard: true } ).reverse();
+			const insertedImagesIds = new Set();
 
 			for ( const entry of changes ) {
 				if ( entry.type == 'insert' && entry.name != '$text' ) {
 					const item = entry.position.nodeAfter;
-					const isInGraveyard = entry.position.root.rootName == '$graveyard';
+					const isInsertedInGraveyard = entry.position.root.rootName == '$graveyard';
 
-					for ( const image of getImagesFromChangeItem( editor, item ) ) {
+					for ( const imageElement of getImagesFromChangeItem( editor, item ) ) {
 						// Check if the image element still has upload id.
-						const uploadId = image.getAttribute( 'uploadId' );
+						const uploadId = imageElement.getAttribute( 'uploadId' );
 
 						if ( !uploadId ) {
 							continue;
@@ -184,12 +196,28 @@ export default class ImageUploadEditing extends Plugin {
 							continue;
 						}
 
-						if ( isInGraveyard ) {
-							// If the image was inserted to the graveyard - abort the loading process.
-							loader.abort();
-						} else if ( loader.status == 'idle' ) {
-							// If the image was inserted into content and has not been loaded yet, start loading it.
-							this._readAndUpload( loader, image );
+						if ( isInsertedInGraveyard ) {
+							// If the image was inserted to the graveyard for good (**not** replaced by another image),
+							// only then abort the loading process.
+							if ( !insertedImagesIds.has( uploadId ) ) {
+								loader.abort();
+							}
+						} else {
+							// Remember the upload id of the inserted image. If it acted as a replacement for another
+							// image (which landed in the $graveyard), the related loader will not be aborted because
+							// this is still the same image upload.
+							insertedImagesIds.add( uploadId );
+
+							// Keep the mapping between the upload ID and the image model element so the upload
+							// can later resolve in the context of the correct model element. The model element could
+							// change for the same upload if one image was replaced by another (e.g. image type was changed),
+							// so this may also replace an existing mapping.
+							this._uploadImageElements.set( uploadId, imageElement );
+
+							if ( loader.status == 'idle' ) {
+								// If the image was inserted into content and has not been loaded yet, start loading it.
+								this._readAndUpload( loader );
+							}
 						}
 					}
 				}
@@ -207,6 +235,28 @@ export default class ImageUploadEditing extends Plugin {
 		}, { priority: 'low' } );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	afterInit() {
+		const schema = this.editor.model.schema;
+
+		// Setup schema to allow uploadId and uploadStatus for images.
+		// Wait for ImageBlockEditing or ImageInlineEditing to register their elements first,
+		// that's why doing this in afterInit() instead of init().
+		if ( this.editor.plugins.has( 'ImageBlockEditing' ) ) {
+			schema.extend( 'imageBlock', {
+				allowAttributes: [ 'uploadId', 'uploadStatus' ]
+			} );
+		}
+
+		if ( this.editor.plugins.has( 'ImageInlineEditing' ) ) {
+			schema.extend( 'imageInline', {
+				allowAttributes: [ 'uploadId', 'uploadStatus' ]
+			} );
+		}
+	}
+
 	/**
 	 * Reads and uploads an image.
 	 *
@@ -216,30 +266,32 @@ export default class ImageUploadEditing extends Plugin {
 	 *
 	 * @protected
 	 * @param {module:upload/filerepository~FileLoader} loader
-	 * @param {module:engine/model/element~Element} imageElement
 	 * @returns {Promise}
 	 */
-	_readAndUpload( loader, imageElement ) {
+	_readAndUpload( loader ) {
 		const editor = this.editor;
 		const model = editor.model;
 		const t = editor.locale.t;
 		const fileRepository = editor.plugins.get( FileRepository );
 		const notification = editor.plugins.get( Notification );
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
+		const imageUploadElements = this._uploadImageElements;
 
 		model.enqueueChange( 'transparent', writer => {
-			writer.setAttribute( 'uploadStatus', 'reading', imageElement );
+			writer.setAttribute( 'uploadStatus', 'reading', imageUploadElements.get( loader.id ) );
 		} );
 
 		return loader.read()
 			.then( () => {
 				const promise = loader.upload();
+				const imageElement = imageUploadElements.get( loader.id );
 
 				// Force re–paint in Safari. Without it, the image will display with a wrong size.
 				// https://github.com/ckeditor/ckeditor5/issues/1975
 				/* istanbul ignore next */
 				if ( env.isSafari ) {
 					const viewFigure = editor.editing.mapper.toViewElement( imageElement );
-					const viewImg = getViewImgFromWidget( viewFigure );
+					const viewImg = imageUtils.findViewImgElement( viewFigure );
 
 					editor.editing.view.once( 'render', () => {
 						// Early returns just to be safe. There might be some code ran
@@ -273,6 +325,8 @@ export default class ImageUploadEditing extends Plugin {
 			} )
 			.then( data => {
 				model.enqueueChange( 'transparent', writer => {
+					const imageElement = imageUploadElements.get( loader.id );
+
 					writer.setAttribute( 'uploadStatus', 'complete', imageElement );
 
 					/**
@@ -323,18 +377,22 @@ export default class ImageUploadEditing extends Plugin {
 					} );
 				}
 
-				clean();
-
 				// Permanently remove image from insertion batch.
 				model.enqueueChange( 'transparent', writer => {
-					writer.remove( imageElement );
+					writer.remove( imageUploadElements.get( loader.id ) );
 				} );
+
+				clean();
 			} );
 
 		function clean() {
 			model.enqueueChange( 'transparent', writer => {
+				const imageElement = imageUploadElements.get( loader.id );
+
 				writer.removeAttribute( 'uploadId', imageElement );
 				writer.removeAttribute( 'uploadStatus', imageElement );
+
+				imageUploadElements.delete( loader.id );
 			} );
 
 			fileRepository.destroyLoader( loader );
@@ -389,7 +447,9 @@ export function isHtmlIncluded( dataTransfer ) {
 }
 
 function getImagesFromChangeItem( editor, item ) {
+	const imageUtils = editor.plugins.get( 'ImageUtils' );
+
 	return Array.from( editor.model.createRangeOn( item ) )
-		.filter( value => value.item.is( 'element', 'image' ) )
+		.filter( value => imageUtils.isImage( value.item ) )
 		.map( value => value.item );
 }

package/src/imageupload/imageuploadprogress.js

@@ -11,7 +11,6 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 import { FileRepository } from 'ckeditor5/src/upload';
-import { getViewImgFromWidget } from '../image/utils';
 
 import uploadingPlaceholder from '../../theme/icons/image_placeholder.svg';
 
@@ -55,7 +54,13 @@ export default class ImageUploadProgress extends Plugin {
 		const editor = this.editor;
 
 		// Upload status change - update image's view according to that status.
-		editor.editing.downcastDispatcher.on( 'attribute:uploadStatus:image', ( ...args ) => this.uploadStatusChange( ...args ) );
+		if ( editor.plugins.has( 'ImageBlockEditing' ) ) {
+			editor.editing.downcastDispatcher.on( 'attribute:uploadStatus:imageBlock', ( ...args ) => this.uploadStatusChange( ...args ) );
+		}
+
+		if ( editor.plugins.has( 'ImageInlineEditing' ) ) {
+			editor.editing.downcastDispatcher.on( 'attribute:uploadStatus:imageInline', ( ...args ) => this.uploadStatusChange( ...args ) );
+		}
 	}
 
 	/**
@@ -74,6 +79,7 @@ export default class ImageUploadProgress extends Plugin {
 			return;
 		}
 
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
 		const fileRepository = editor.plugins.get( FileRepository );
 		const status = uploadId ? data.attributeNewValue : null;
 		const placeholder = this.placeholder;
@@ -84,7 +90,7 @@ export default class ImageUploadProgress extends Plugin {
 			// Start "appearing" effect and show placeholder with infinite progress bar on the top
 			// while image is read from disk.
 			_startAppearEffect( viewFigure, viewWriter );
-			_showPlaceholder( placeholder, viewFigure, viewWriter );
+			_showPlaceholder( imageUtils, placeholder, viewFigure, viewWriter );
 
 			return;
 		}
@@ -100,12 +106,12 @@ export default class ImageUploadProgress extends Plugin {
 				// There is no loader associated with uploadId - this means that image came from external changes.
 				// In such cases we still want to show the placeholder until image is fully uploaded.
 				// Show placeholder if needed - see https://github.com/ckeditor/ckeditor5-image/issues/191.
-				_showPlaceholder( placeholder, viewFigure, viewWriter );
+				_showPlaceholder( imageUtils, placeholder, viewFigure, viewWriter );
 			} else {
 				// Hide placeholder and initialize progress bar showing upload progress.
 				_hidePlaceholder( viewFigure, viewWriter );
 				_showProgressBar( viewFigure, viewWriter, loader, editor.editing.view );
-				_displayLocalImage( viewFigure, viewWriter, loader );
+				_displayLocalImage( imageUtils, viewFigure, viewWriter, loader );
 			}
 
 			return;
@@ -142,15 +148,16 @@ function _stopAppearEffect( viewFigure, writer ) {
 
 // Shows placeholder together with infinite progress bar on given image figure.
 //
+// @param {module:image/imageutils~ImageUtils} imageUtils
 // @param {String} Data-uri with a svg placeholder.
 // @param {module:engine/view/containerelement~ContainerElement} viewFigure
 // @param {module:engine/view/downcastwriter~DowncastWriter} writer
-function _showPlaceholder( placeholder, viewFigure, writer ) {
+function _showPlaceholder( imageUtils, placeholder, viewFigure, writer ) {
 	if ( !viewFigure.hasClass( 'ck-image-upload-placeholder' ) ) {
 		writer.addClass( 'ck-image-upload-placeholder', viewFigure );
 	}
 
-	const viewImg = getViewImgFromWidget( viewFigure );
+	const viewImg = imageUtils.findViewImgElement( viewFigure );
 
 	if ( viewImg.getAttribute( 'src' ) !== placeholder ) {
 		writer.setAttribute( 'src', placeholder, viewImg );
@@ -272,12 +279,13 @@ function _removeUIElement( viewFigure, writer, uniqueProperty ) {
 
 // Displays local data from file loader.
 //
+// @param {module:image/imageutils~ImageUtils} imageUtils
 // @param {module:engine/view/element~Element} imageFigure
 // @param {module:engine/view/downcastwriter~DowncastWriter} writer
 // @param {module:upload/filerepository~FileLoader} loader
-function _displayLocalImage( viewFigure, writer, loader ) {
+function _displayLocalImage( imageUtils, viewFigure, writer, loader ) {
 	if ( loader.data ) {
-		const viewImg = getViewImgFromWidget( viewFigure );
+		const viewImg = imageUtils.findViewImgElement( viewFigure );
 
 		writer.setAttribute( 'src', loader.data, viewImg );
 	}

package/src/imageupload/imageuploadui.js

@@ -14,7 +14,7 @@ import { createImageTypeRegExp } from './utils';
 /**
  * The image upload button plugin.
  *
- * For a detailed overview, check the {@glink features/image-upload/image-upload Image upload feature} documentation.
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature} documentation.
  *
  * 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.

package/src/imageupload/uploadimagecommand.js

@@ -7,8 +7,6 @@ import { FileRepository } from 'ckeditor5/src/upload';
 import { Command } from 'ckeditor5/src/core';
 import { toArray } from 'ckeditor5/src/utils';
 
-import { insertImage, isImageAllowed } from '../image/utils';
-
 /**
  * @module image/imageupload/uploadimagecommand
  */
@@ -20,7 +18,7 @@ import { insertImage, isImageAllowed } from '../image/utils';
  * 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~findOptimalInsertionPosition} algorithm),
+ * (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 ) => {
@@ -47,10 +45,12 @@ export default class UploadImageCommand extends Command {
 	 * @inheritDoc
 	 */
 	refresh() {
-		const imageElement = this.editor.model.document.selection.getSelectedElement();
-		const isImage = imageElement && imageElement.name === 'image' || false;
+		const editor = this.editor;
+		const imageUtils = editor.plugins.get( 'ImageUtils' );
+		const selectedElement = editor.model.document.selection.getSelectedElement();
 
-		this.isEnabled = isImageAllowed( this.editor.model ) || isImage;
+		// TODO: This needs refactoring.
+		this.isEnabled = imageUtils.isImageAllowed() || imageUtils.isImage( selectedElement );
 	}
 
 	/**
@@ -61,28 +61,54 @@ export default class UploadImageCommand extends Command {
 	 * @param {File|Array.<File>} options.file The image file or an array of image files to upload.
 	 */
 	execute( options ) {
-		const editor = this.editor;
-		const model = editor.model;
+		const files = toArray( options.file );
+		const selection = this.editor.model.document.selection;
+		const imageUtils = this.editor.plugins.get( 'ImageUtils' );
 
-		const fileRepository = editor.plugins.get( FileRepository );
+		// 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() );
 
-		for ( const file of toArray( options.file ) ) {
-			uploadImage( model, fileRepository, file );
-		}
-	}
-}
+		files.forEach( ( file, index ) => {
+			const selectedElement = selection.getSelectedElement();
 
-// Handles uploading single file.
-//
-// @param {module:engine/model/model~Model} model
-// @param {File} file
-function uploadImage( model, fileRepository, file ) {
-	const loader = fileRepository.createLoader( file );
+			// 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 );
 
-	// Do not throw when upload adapter is not set. FileRepository will log an error anyway.
-	if ( !loader ) {
-		return;
+				this._uploadImage( file, selectionAttributes, position );
+			} else {
+				this._uploadImage( file, selectionAttributes );
+			}
+		} );
 	}
 
-	insertImage( model, { uploadId: loader.id } );
+	/**
+	 * 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 );
+	}
 }

package/src/imageupload/utils.js

@@ -64,11 +64,12 @@ export function fetchLocalImage( image ) {
 /**
  * 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}
  */
-export function isLocalImage( node ) {
-	if ( !node.is( 'element', 'img' ) || !node.getAttribute( 'src' ) ) {
+export function isLocalImage( imageUtils, node ) {
+	if ( !imageUtils.isInlineImageView( node ) || !node.getAttribute( 'src' ) ) {
 		return false;
 	}
 

package/src/imageupload.js

@@ -15,7 +15,7 @@ import ImageUploadEditing from './imageupload/imageuploadediting';
 /**
  * The image upload plugin.
  *
- * For a detailed overview, check the {@glink features/image-upload/image-upload image upload feature} documentation.
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload image upload feature} documentation.
  *
  * This plugin does not do anything directly, but it loads a set of specific plugins to enable image uploading:
  *