Quill: Cannot paste images from Snipping Tool

[ashleemboyer]

A paste event is detected, but the images never show when you try to copy and paste images from things Windows Snipping Tool. Copying and pasting images from Google, for example, has no issues.

It seems like there is a timing issue for reading files with a base64. I have not been able to reproduce a "fix" I discovered in CodePen, but in the actual project I'm using Quill for, extending the Clipboard module and lengthening the timeout duration at the end of the default onPaste function makes pasting from Snipping Tool work. The bigger the image that needs to be pasted, the larger the duration needs to be.

Again, I am not able to reproduce a bug caused by my "fix", but in my project, lengthening the timeout duration causes two "regular" images to be pasted. I'm throwing this part out there in case it comes up for anyone else. It may be something in my project.

Steps for Reproduction

1. Visit my CodePen
2. Capture an image with Windows Snipping Tool
3. Copy the image and try to paste it in the editor
4. No image is pasted

Expected behavior:
All image pasting should behave consistently.

Actual behavior:
Cannot paste images from snipping tools.

Platforms:
Windows 10 (I have not tested this on others yet)
Chrome 72

Version:
My project uses 1.3.4, but the issue persists in 1.3.6. The CodePen is using 1.3.4.

[ashleemboyer]

I'm seeing now that you can't even paste snips into the editor on https://quilljs.com/.

[ashleemboyer]

I've made another CodePen where I catch the paste event on quill.root and prevent the default Quill pasting functionality. In all the cases I could come up with, it appears to work the same as the editor playground. I added the (code for drag and drop)[https://github.com/kensnyder/quill-image-drop-module/blob/master/image-drop.min.js] as well to make sure that functionality still worked for the project I'm working on.

I'd still like to better understand why Quill doesn't work with images from Snipping Tool.

[ashleemboyer]

According to this answer, dangerouslyPasteHTML is deprecated? In what version? It's what I use in my second CodePen.

[josephadah]

@ashleemboyer thank you for sharing. Nevertheless, do you have any new and better implementation for this? I'm faced with fixing this same issue... thanks

[ashleemboyer]

Hi, @josephadah! What I ended up doing was completely overriding the paste functionality and implementing my own. This involved figuring out what exactly we wanted to support at the time including Microsoft products, code editors, and plain text. It wasn't the most fun thing I've ever done, sorry I don't have a better answer for you!

[capaj]

@ashleemboyer are you able to share any kind of a snippet showing how we can override paste functionality?

[ISNIT0]

@ashleemboyer Would really appreciate an example of what ended up working for you 🎉

[ashleemboyer]

@capaj @ISNIT0 If I recall correctly, what I ended up doing was extending the Clipboard module and writing my own onPaste function. I don't work with the same codebase as I did a year ago so I'm unable to check for sure.