Image upload breaks when using multiple instances and destroy on blur

[FWennerdahl]

Expected behavior.

Image upload should work regardless of using one or multiple editor instances and using destroy on blur to reinitialize the editor.

Actual behavior.

When using multiple instances and destroying the editor on blur, image upload fails when uploading images in more than one editor instance.

The following error is logged twice in the dev console:

image.min.js:8 The given range isn't in document.
xa @ image.min.js:8
ja @ image.min.js:8
x @ image.min.js:7
g @ image.min.js:7
dispatch @ jquery-2.1.3.min.js:3
r.handle @ jquery-2.1.3.min.js:3

Subsequent uploads in any editor instance yields the following error:

image.min.js:8 Uncaught DOMException: Failed to execute 'selectNode' on 'Range': the given Node has no parent.
    at xa (https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/js/plugins/image.min.js:8:4934)
    at HTMLImageElement.ja (https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/js/plugins/image.min.js:8:1673)
    at x (https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/js/plugins/image.min.js:7:10188)
    at HTMLImageElement.g (https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.7.5/js/plugins/image.min.js:7:13162)
    at HTMLImageElement.dispatch (https://code.jquery.com/jquery-2.1.3.min.js:3:6444)
    at HTMLImageElement.r.handle (https://code.jquery.com/jquery-2.1.3.min.js:3:3219)

When clicking outside the editor after this the following error is logged and the editor is not reinitialized:

image.min.js:8 Uncaught TypeError: Cannot read property 'removeClass' of undefined
    at ka (image.min.js:8)
    at b.<anonymous> (image.min.js:7)
    at v (froala_editor.min.js:7)
    at HTMLDivElement.<anonymous> (froala_editor.min.js:7)
    at HTMLDivElement.dispatch (jquery-2.1.3.min.js:3)
    at HTMLDivElement.r.handle (jquery-2.1.3.min.js:3)

The issue seems to not be reproducible using the Froala editor without angular-froala, see https://jsfiddle.net/9jmtwg1p/

Steps to reproduce the problem.

1. Open JSFiddle at: https://jsfiddle.net/e8hx9zdx/
2. Open the browser developer console.
3. Upload an image to the first editor.
4. Upload an image to the second editor.

OS.

macOS 10.12.6

Browser.

Chrome 63.0.3239.132

Notes:

It seems this happens $image_placeholder is defined when _startUpload is called in image.js.

[stefanneculai]

@FWennerdahl somehow we cannot reproduce it. Do you think you could make a recording? Thanks in advance.

[FWennerdahl]

You're right that this does not seem to happen every time. My guess is that it's some kind of race due to upload I/O.

[stefanneculai]

@FWennerdahl I believe somehow when you're initializing the editor again it hasn't finished the destroy phase. I would recommend adding a bit of timeout between the destruction and the new initialization phase. Something like 20ms.

[FWennerdahl]

@stefanneculai I tested a 20ms timout in the JSFiddle and I still reproduced the issue on the first try. This doesn't seem like a reliable solution. Increasing it further will also introduce a visible flashing when the the editor will vanish and then reappear.

One thing that occurred to me though: does the editor have to fire the blur event when uploading an image? From a user perspective you're still using the editor so it shouldn't have lost focus, and if using destroy on blur like we are, disabling the blur event when uploading an image would prevent the editor from being destroyed and leave it active for the user to keep working with their image.

[FWennerdahl]

@stefanneculai Any news on this? You mentioned in mail that this was an issue in the Froala editor rather than the Angular implementation and that it would be fixed in 2.7.6 when it is released, is this still the case?

Also, the workaround you mentioned there, adding a unique _id to each editor instance, only partially worked. When pasting content from example from Google Docs with more than one image the issue still persists.