Cannot paste images from Snipping Tool
See original GitHub issueA 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
- Visit my CodePen
- Capture an image with Windows Snipping Tool
- Copy the image and try to paste it in the editor
- 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.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:8
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!
I’ve made another CodePen where I catch the
paste
event onquill.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.