search

bevacqua / woofmark

:dog2: Barking up the DOM tree. A modular, progressive, and beautiful Markdown and HTML editor
https://bevacqua.github.io/woofmark
MIT License
1.62k stars 74 forks source link

Feature request: Paste image from system clipboard in Markdown mode #17

Open dandv opened 8 years ago

dandv commented 8 years ago

Woofmark can successfully paste rich text containing images (e.g. the contents of this Google Doc), but not standalone images from clipboard.

Pasting images directly from the clipboard is very widespread nowadays: Google Docs, GitHub, StackOverflow, Slack etc.

Having this feature would make this the most handy WYSIWYG/Markdown editor among the 50+ I've compared.

bevacqua commented 8 years ago

Cool. Would you be interested in contributing that enhancement?

dandv commented 8 years ago

Unfortunately I don't have the bandwidth for that right now, but perhaps you can find the relevant code in one of the open source editors that can paste images? (Alloy and Summernote)

septagram commented 8 years ago

Still open? I just tested at the demo page and it totally works. Actually, you can paste an image from clipboard and it's saved with a data: URL. Not to mention links. And the docs mention being able to react to the paste by uploading an image in a highly-configurable way.

Sounds like this was implemented, but never marked resolved.

dandv commented 7 years ago

I've just tested pasting an image in https://bevacqua.github.io/woofmark/ from Chrome 53 on Ubuntu and nothing was pasted. The same clipboard content was pasted in Trumbowyg.

karelv commented 7 years ago

Here it works on firefox 50 w/ os linux, but only in wysiwg mode I can paste. Wwitching to md-mode, I can see the inline data-string, but when switching back to wysiwg mode, the image is lost forever. (same switching story for html- vs md-mode, and html vs wysiwg keeps the image) Tested using: https://bevacqua.github.io/woofmark/

jywarren commented 7 years ago

Confirmed on latest Chrome/ChromeOS -- pasting in markdown mode for me on the demo doesn't do anything, apparently. And confirmed that pasting into the WYSIWYG mode correctly inserts the clipboard image. Ideas on the reasons?

Update: no errors in console when I paste into MD mode either, odd...

i imagine this is a tough one to test for?

bevacqua commented 7 years ago

I'd say we need to handle the paste event and use clipboard data to upload the image and then render the image tag with a link.

jywarren commented 7 years ago

Hm, but it's already working in WYSIWYG -- but do you think that's taking advantage of the browser's contentEditable features, and is not being handled by woofmark at all? That could explain why it doesn't work in markdown mode -- sorry, just trying to get a handle on the issue.

On Mon, Dec 12, 2016 at 1:04 PM, Nicolás Bevacqua notifications@github.com wrote:

I'd say we need to handle the paste event and use clipboard data to upload the image and then render the image tag with a link.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/bevacqua/woofmark/issues/17#issuecomment-266504288, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJxPcze256GQP0HURKtqLRYxo0v4Nks5rHYySgaJpZM4F0TzO .

bevacqua commented 7 years ago

yes

jywarren commented 7 years ago

Super, thanks. Sample code if anyone wants to take this on:

http://stackoverflow.com/questions/24540765/intercept-paste-data-in-javascript

http://stackoverflow.com/questions/35498858/paste-the-image-from-system-in-html-page-using-javascript?rq=1 (image specific)

I believe the event handlers might go in this file, and be loosely modeled on the "drag & drop" code:

https://github.com/bevacqua/woofmark/blob/2d932112d44c7f72ccc9e23daf6749b9cc8bcdde/src/uploads.js#L15