@ckeditor/ckeditor5-image 44.0.0 → 44.1.0-alpha.1

package/dist/index.js

@@ -3554,6 +3554,12 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
 	 * element (reference) and resolve the upload for the correct model element (instead of the one that landed in the `$graveyard`
 	 * after image type changed).
 	 */ _uploadImageElements;
+    /**
+	 * An internal mapping of {@link module:upload/filerepository~FileLoader#id file loader UIDs} and
+	 * upload responses for handling images dragged during their upload process. When such images are later
+	 * dropped, their original upload IDs no longer exist in the registry (as the original upload completed).
+	 * This map preserves the upload responses to properly handle such cases.
+	 */ _uploadedImages = new Map();
     /**
 	 * @inheritDoc
 	 */ constructor(editor){
@@ -3593,7 +3599,41 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
                 key: 'uploadId'
             },
             model: 'uploadId'
-        });
+        })// Handle the case when the image is not fully uploaded yet but it's being moved.
+        // See more: https://github.com/ckeditor/ckeditor5/pull/17327
+        .add((dispatcher)=>dispatcher.on('element:img', (evt, data, conversionApi)=>{
+                if (!conversionApi.consumable.test(data.viewItem, {
+                    attributes: [
+                        'data-ck-upload-id'
+                    ]
+                })) {
+                    return;
+                }
+                const uploadId = data.viewItem.getAttribute('data-ck-upload-id');
+                if (!uploadId) {
+                    return;
+                }
+                const [modelElement] = Array.from(data.modelRange.getItems({
+                    shallow: true
+                }));
+                const loader = fileRepository.loaders.get(uploadId);
+                if (modelElement) {
+                    // Handle case when `uploadId` is set on the image element but the loader is not present in the registry.
+                    // It may happen when the image was successfully uploaded and the loader was removed from the registry.
+                    // It's still present in the `_uploadedImages` map though. It's why we do not place this line in the condition below.
+                    conversionApi.writer.setAttribute('uploadId', uploadId, modelElement);
+                    conversionApi.consumable.consume(data.viewItem, {
+                        attributes: [
+                            'data-ck-upload-id'
+                        ]
+                    });
+                    if (loader && loader.data) {
+                        conversionApi.writer.setAttribute('uploadStatus', loader.status, modelElement);
+                    }
+                }
+            }, {
+                priority: 'low'
+            }));
         // Handle pasted images.
         // For every image file, a new file loader is created and a placeholder image is
         // inserted into the content. Then, those images are uploaded once they appear in the model
@@ -3685,13 +3725,38 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
                         // Check if the image is loaded on this client.
                         const loader = fileRepository.loaders.get(uploadId);
                         if (!loader) {
+                            // If the loader does not exist, it means that the image was already uploaded
+                            // and the loader promise was removed from the registry. In that scenario we need
+                            // to restore response object from the internal map.
+                            if (!isInsertedInGraveyard && this._uploadedImages.has(uploadId)) {
+                                // Fire `uploadComplete` to set proper attributes on the image element.
+                                editor.model.enqueueChange({
+                                    isUndoable: false
+                                }, (writer)=>{
+                                    writer.setAttribute('uploadStatus', 'complete', imageElement);
+                                    this.fire('uploadComplete', {
+                                        data: this._uploadedImages.get(uploadId),
+                                        imageElement: imageElement
+                                    });
+                                });
+                            // While it makes sense to remove the image from the `_uploadedImages` map here,
+                            // it's counterintuitive for the user that pastes image in uploading several times.
+                            // It'll work the first time, but the next time the image will be empty because the
+                            // `_uploadedImages` no longer contain the response.
+                            }
                             continue;
                         }
                         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();
+                                // ... but abort it only if all remain images that share the same loader are in the graveyard too.
+                                // This is to prevent situation when we have two images in uploading state and one of them is being
+                                // placed in the graveyard (e.g. using undo). The other one should not be aborted.
+                                const allImagesThatShareUploaderInGraveyard = Array.from(this._uploadImageElements.get(uploadId)).every((element)=>element.root.rootName == '$graveyard');
+                                if (allImagesThatShareUploaderInGraveyard) {
+                                    loader.abort();
+                                }
                             }
                         } else {
                             // Remember the upload id of the inserted image. If it acted as a replacement for another
@@ -3702,7 +3767,13 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
                             // 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 (!this._uploadImageElements.has(uploadId)) {
+                                this._uploadImageElements.set(uploadId, new Set([
+                                    imageElement
+                                ]));
+                            } else {
+                                this._uploadImageElements.get(uploadId).add(imageElement);
+                            }
                             if (loader.status == 'idle') {
                                 // If the image was inserted into content and has not been loaded yet, start loading it.
                                 this._readAndUpload(loader);
@@ -3739,6 +3810,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
                     'uploadStatus'
                 ]
             });
+            this._registerConverters('imageBlock');
         }
         if (this.editor.plugins.has('ImageInlineEditing')) {
             schema.extend('imageInline', {
@@ -3747,6 +3819,7 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
                     'uploadStatus'
                 ]
             });
+            this._registerConverters('imageInline');
         }
     }
     /**
@@ -3766,55 +3839,61 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
         model.enqueueChange({
             isUndoable: false
         }, (writer)=>{
-            writer.setAttribute('uploadStatus', 'reading', imageUploadElements.get(loader.id));
+            const elements = imageUploadElements.get(loader.id);
+            for (const element of elements){
+                writer.setAttribute('uploadStatus', 'reading', element);
+            }
         });
         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 -- @preserve */ if (env.isSafari) {
-                const viewFigure = editor.editing.mapper.toViewElement(imageElement);
-                const viewImg = imageUtils.findViewImgElement(viewFigure);
-                editor.editing.view.once('render', ()=>{
-                    // Early returns just to be safe. There might be some code ran
-                    // in between the outer scope and this callback.
-                    if (!viewImg.parent) {
-                        return;
-                    }
-                    const domFigure = editor.editing.view.domConverter.mapViewToDom(viewImg.parent);
-                    if (!domFigure) {
-                        return;
-                    }
-                    const originalDisplay = domFigure.style.display;
-                    domFigure.style.display = 'none';
-                    // Make sure this line will never be removed during minification for having "no effect".
-                    domFigure._ckHack = domFigure.offsetHeight;
-                    domFigure.style.display = originalDisplay;
-                });
-            }
             if (editor.ui) {
                 editor.ui.ariaLiveAnnouncer.announce(t('Uploading image'));
             }
-            model.enqueueChange({
-                isUndoable: false
-            }, (writer)=>{
-                writer.setAttribute('uploadStatus', 'uploading', imageElement);
-            });
+            for (const imageElement of 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 -- @preserve */ if (env.isSafari) {
+                    const viewFigure = editor.editing.mapper.toViewElement(imageElement);
+                    const viewImg = imageUtils.findViewImgElement(viewFigure);
+                    editor.editing.view.once('render', ()=>{
+                        // Early returns just to be safe. There might be some code ran
+                        // in between the outer scope and this callback.
+                        if (!viewImg.parent) {
+                            return;
+                        }
+                        const domFigure = editor.editing.view.domConverter.mapViewToDom(viewImg.parent);
+                        if (!domFigure) {
+                            return;
+                        }
+                        const originalDisplay = domFigure.style.display;
+                        domFigure.style.display = 'none';
+                        // Make sure this line will never be removed during minification for having "no effect".
+                        domFigure._ckHack = domFigure.offsetHeight;
+                        domFigure.style.display = originalDisplay;
+                    });
+                }
+                model.enqueueChange({
+                    isUndoable: false
+                }, (writer)=>{
+                    writer.setAttribute('uploadStatus', 'uploading', imageElement);
+                });
+            }
             return promise;
         }).then((data)=>{
             model.enqueueChange({
                 isUndoable: false
             }, (writer)=>{
-                const imageElement = imageUploadElements.get(loader.id);
-                writer.setAttribute('uploadStatus', 'complete', imageElement);
+                for (const imageElement of imageUploadElements.get(loader.id)){
+                    writer.setAttribute('uploadStatus', 'complete', imageElement);
+                    this.fire('uploadComplete', {
+                        data,
+                        imageElement
+                    });
+                }
                 if (editor.ui) {
                     editor.ui.ariaLiveAnnouncer.announce(t('Image upload complete'));
                 }
-                this.fire('uploadComplete', {
-                    data,
-                    imageElement
-                });
+                this._uploadedImages.set(loader.id, data);
             });
             clean();
         }).catch((error)=>{
@@ -3837,11 +3916,12 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             model.enqueueChange({
                 isUndoable: false
             }, (writer)=>{
-                const node = imageUploadElements.get(loader.id);
-                // Handle situation when the image has been removed and then `abort` exception was thrown.
-                // See: https://github.com/cksource/ckeditor5-commercial/issues/6817
-                if (node && node.root.rootName !== '$graveyard') {
-                    writer.remove(node);
+                for (const imageElement of imageUploadElements.get(loader.id)){
+                    // Handle situation when the image has been removed and then `abort` exception was thrown.
+                    // See: https://github.com/cksource/ckeditor5-commercial/issues/6817
+                    if (imageElement.root.rootName !== '$graveyard') {
+                        writer.remove(imageElement);
+                    }
                 }
             });
             clean();
@@ -3850,9 +3930,10 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             model.enqueueChange({
                 isUndoable: false
             }, (writer)=>{
-                const imageElement = imageUploadElements.get(loader.id);
-                writer.removeAttribute('uploadId', imageElement);
-                writer.removeAttribute('uploadStatus', imageElement);
+                for (const imageElement of imageUploadElements.get(loader.id)){
+                    writer.removeAttribute('uploadId', imageElement);
+                    writer.removeAttribute('uploadStatus', imageElement);
+                }
                 imageUploadElements.delete(loader.id);
             });
             fileRepository.destroyLoader(loader);
@@ -3886,6 +3967,35 @@ const IMAGE_URL_REGEXP = new RegExp(String(/^(http(s)?:\/\/)?[\w-]+\.[\w.~:/[\]@
             writer.setAttributes(attributes, image);
         }
     }
+    /**
+	 * Registers image upload converters.
+	 *
+	 * @param imageType The type of the image.
+	 */ _registerConverters(imageType) {
+        const { conversion, plugins } = this.editor;
+        const fileRepository = plugins.get(FileRepository);
+        const imageUtils = plugins.get(ImageUtils);
+        // It sets `data-ck-upload-id` attribute on the view image elements that are not fully uploaded.
+        // It avoids the situation when image disappears when it's being moved and upload is not finished yet.
+        // See more: https://github.com/ckeditor/ckeditor5/issues/16967
+        conversion.for('dataDowncast').add((dispatcher)=>{
+            dispatcher.on(`attribute:uploadId:${imageType}`, (evt, data, conversionApi)=>{
+                if (!conversionApi.consumable.test(data.item, evt.name)) {
+                    return;
+                }
+                const loader = fileRepository.loaders.get(data.attributeNewValue);
+                if (!loader || !loader.data) {
+                    return null;
+                }
+                const viewElement = conversionApi.mapper.toViewElement(data.item);
+                const img = imageUtils.findViewImgElement(viewElement);
+                if (img) {
+                    conversionApi.consumable.consume(data.item, evt.name);
+                    conversionApi.writer.setAttribute('data-ck-upload-id', loader.id, img);
+                }
+            });
+        });
+    }
 }
 /**
  * Returns `true` if non-empty `text/html` is included in the data transfer.
@@ -4837,7 +4947,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */ /**
  * @module image/imageresize/utils/tryparsedimensionwithunit
  */ /**
@@ -4890,7 +5000,7 @@ const RESIZED_IMAGE_CLASS = 'image_resized';
 
 /**
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */ /**
  * @module image/imageresize/utils/getselectedimageeditornodes
  */ /**