Add ability to copy & paste images that are in uploading state.

[Mati365]

Suggested merge commit message (convention)

Fix (image): Copying and pasting images in the uploading state is now possible. Closes #16967

---

Additional information

It looks like we forgot to dump images that contain uploadId to clipboard data. It resulted in blank img being exported to the HTML:

I added a converter that lookups in file repository and checks if there is matching uploadId entry containing data. If so, it stores base64 of loaded image in src of img element, which is already pretty well handled later on.

Easily reproducible on http://localhost:8125/ckeditor5-image/tests/manual/imageupload.html

Before

before-image-upload-fix-2024-10-25_12.58.54.mp4

After

after-image-upload-fix-2024-10-25_12.55.59.mp4

[arkflpc]

After upload is done, will the copied image have src updated to the target or stick to the data-url?

[Mati365]

@arkflpc It's updated to the target, as uploadId is no longer present in downcast after successful uploading of image.

[arkflpc]

LGTM
@niegowski , wdyt?

[juliaflejterska]

@Mati365 We've finished testing the PR with @kubaklatt - it fixes the issue and looks good to us 👍

[niegowski]

If you trigger editor.getData() while an image is not fully uploaded, the editor data would contain the data: URL. For the user, it would look like the image is successfully uploaded but the URL would not point to the real asset on the server.
The proposed solution restarts the upload after the drop, but we should just keep the uploadId so the loader can match the given element and continue uploading.

[Mati365]

but we should just keep the uploadId

@niegowski we cannot, as it'll be no longer possible to paste such image to another instance of the editor. The second thing is that uploadId will be no longer valid after successful upload of original image, as it's removed from registry to avoid mem leak.

[Mati365]

@juliaflejterska / @charlttsie We changed a bit the behavior of this fix, so large data:base64 payload is no longer present in editor.getData and it's no longer possible to copy & paste such element from editor A, editor B (it'll work exactly like it is on production right now). Can you check it again?

[charlttsie]

Together with @juliaflejterska, we’ve retested the fix and image upload works the same as before the recent changes - copying and pasting images that are in the uploading state works well. We also haven’t found any regressions, so it looks good to us 🎉 However, as we didn’t have a lot of time for the retests, let’s pay special attention to this area during the testing phase 🙂

[niegowski]

copying and pasting images that are in the uploading state works well.

This part surprised me as we know it should not work (especially after the upload is completed).

I'd suggest writing down all scenarios and analyzing what happens and what is expected.

• while an upload is in progress
  • copy and paste
  • cut and paste
  • drag and drop
• start action while an upload is in progress and finish action after an image upload is complete
  • copy and paste
  • cut and paste
  • drag and drop

The above should also include scenarios with drop/paste outside the editor.

As we checked during the review, not all scenarios behave as expected.

[niegowski]

As discussed F2F we need to write down all scenarios and make sure those all work as expected.

[Mati365]

@charlttsie Can you take a look again? Please check these scenarios described by Kuba.

There are few exceptions:

1. Copy & paste (cut and any other actions on) image with uploading state is not implemented in this PR.
2. Cut & paste of image during uploading state is not fixed in scope of this ticket.

[charlttsie]

Undoing the pasting of an uploading image paste results in a crash

Steps

1. Open http://localhost:8125/ckeditor5-image/tests/manual/imageupload.html
2. Upload an image
3. Copy and paste the image
4. Undo

Result
The console shows the following error and there's no way to use the editor:

filerepository.ts:522 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isFulfilled')
    at FileLoader.abort (filerepository.ts:522:1)
    at Document.<anonymous> (imageuploadediting.ts:279:1)
    at Document.fire (emittermixin.ts:240:1)
    at Document._handleChangeBlock (document.ts:370:1)
    at Model._runPendingChanges (model.ts:1112:1)
    at Model.enqueueChange (model.ts:349:1)
    at imageuploadediting.ts:453:1

undo-error.mp4

Additional info
Also reproduces in docs built on the branch

[juliaflejterska]

Copying an image while the upload is in progress and pasting after upload results in inconsistent behavior

Steps

1. Open http://localhost:8125/ckeditor5-image/tests/manual/imageupload.html
2. Upload an image.
3. Copy the image while it is still in the uploading state.
4. Finish the upload.
5. Paste the image two times.

Result

The first paste successfully inserts the image. The second (and any subsequent) paste results in a blank img element.

copy-paste.mov

[charlttsie]

We've finished the retest with @juliaflejterska and have found the two issues reported above:

• Add ability to copy & paste images that are in uploading state. #17327 (comment)
• Add ability to copy & paste images that are in uploading state. #17327 (comment)

The remaining scenarios behave as expected, also in the multi-root editor, and when pasting into a different editor.

[Mati365]

@charlttsie Thanks. I pushed some modifications and hope these issues should be no longer present. Can you check again?

Commits:

1. Undoing the pasting of an uploading image paste results in a crash - 269db0d
2. Copying an image while the upload is in progress and pasting after upload results in inconsistent behavior - c28e480

[charlttsie]

@Mati365 According to our tests, both issues are fixed. The rest of the scenarios behave as before and we have not found anything new, so the PR looks good to us 🎉