IE11: Copy/paste of images does not work

jmiserez commented 5 years ago

Expected behavior.

Click on an image, press CTRL-C or CTRL-X to copy or cut. Press CTRL-V to paste it somewhere else in the Froala editor. This works in Chrome/FF.

Actual behavior.

Nothing happens when copy/cut/paste on IE11. Only selecting the image like text and then copying works.

Steps to reproduce the problem.

Go to https://www.froala.com/wysiwyg-editor
Click on image
Copy using CTRL-C
Click somewhere else in the editor
Press CTRL-V
Nothing happens.

Editor version.

3.0.5

OS.

Windows 10 Enterprise

Browser.

Internet Explorer 11

jmiserez commented 5 years ago

Technical notes: I tried fixing this issue myself, and spent quite a bit of time on it but could not get it to work correctly but I did find some things that might be useful:

The first problem is that the editor loses focus. In IE, after MODULES.image._edit is called the document.activeElement is suddenly \<body> (it usually is the fr-view). This happens in this IE-specific block in image._edit:

if (editor.browser.msie) {
if (editor.popups.areVisible()) {
editor.events.disableBlur();
}
if (editor.win.getSelection) {
editor.win.getSelection().removeAllRanges();
editor.win.getSelection().addRange(editor.doc.createRange()); // <- document.activeElement is reset to <body>, image is not selected
}
}

I added a call to reset the active element as it was before:

if (editor.$el[0].setActive) {
editor.$el[0].setActive() // IE-specific method
}

Now, something happens on copy/cut! There seems to already be a IE-specific fix in Froala in MODULES.image._init, but I think it's broken and does not work anymore:

// Fix IE copy not working when selection is collapsed.
if (editor.browser.msie) {
editor.events.on('keydown', function (e) {
... // omitted
editor.events.trigger('window.copy');
.. // omitted
editor.events.trigger('window.cut');
..//
}

Unfortunately , this triggers a ""Unable to get property 'type' of undefined or null reference" for e.type" in the callback just above, as e is not passed in correctly:

editor.events.on('window.cut window.copy', function (e) {
...// omitted
if (e.type){ // <- ""Unable to get property 'type' of undefined or null reference"
..// omitted 
}

Fixing this by adding the 'keydown' event as a parameter in the caller:

// Fix IE copy not working when selection is collapsed.
if (editor.browser.msie) {
editor.events.on('keydown', function (e) {
... // omitted
editor.events.trigger('window.copy', [e]); // <- add e
.. // omitted
editor.events.trigger('window.cut', [e]); // <- add e
..//
}

and checking for copy/cut above:

editor.events.on('window.cut window.copy', function (e) {
...// omitted
       if (e.type == 'copy' || (e.type == 'keydown' && e.which == FroalaEditor.KEYCODE.C && editor.keys.ctrlKey(e))) { // <- handle 'keydown' event param
..// omitted 
}

Now, copy/cut does not throw any errors anymore. But it also still does not work, as IE does not copy the image into the clipboard.

At this point, the problem is that the call to editor.paste.saveCopiedText works correctly (editor.win.localStorage.setItem works), but the pasting of the image does not work due to the logic in MODULES.paste.clean that checks the clipboard contents and the image is never cut/copied into the clipboard in IE 11.

I tried calling _selectImage() and document.execCommand('cut') and a few other things but it does not seem to work, IE never copied the img tag into the clipboard.

jmiserez commented 4 years ago

Related when uploading images on IE11: https://github.com/froala/wysiwyg-editor/issues/3636

JaxonWright commented 4 years ago

This, among other things, is really hampering us from releasing a new product with Froala in it. A significant amount of customers use IE11, and Froala is essentially useless in that browser.

@stefanneculai @casualuser @dejanmartinovic do you have any timeline on when improvements for IE11 will be put into the Froala product?

casualuser commented 4 years ago

copy event is unsupported in IE https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event and paste event is partly supported in IE https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event

so in most cases paste also will not work because copy will be not triggered before it

at the moment all actual Windows system have both IE11 and Edge installed by default we even starting to think to detect IE11 and display compatibility warning

the question is that IE11 does not support some events and basic methods it partly solved with polyfills but that's hard to manage in Aurelia/React/Angular bundlers

JaxonWright commented 4 years ago

What is interesting is that you can right-click and copy in IE11 and then either right-click paste OR ctrl+v. So it clearly can do this.

jmiserez commented 4 years ago

@casualuser One major factor in choosing (EDIT: and commercially licensing) Froala 3 over other comparable HTML editors was and still is IE11 support.

It's your product and if you don't want to fix it because it's too hard, fine. But not fixing it just because IE11 is old or adding a compatibility warning while still advertising full IE11 support on your website is not great.

This bug has been open for nearly a year now, and I even put around a day of work into debugging the underlying issue for you, after working around several other bugs in that piece of code. It's probably possible to fix this or to add a workaround (e.g. a "copy" button), and from looking at the code it seems like this did in fact work for IE at some point.

froala / wysiwyg-editor