Copy and paste images from clipboard

[smahood]

One of the things I want to use Ghost for is writing software documentation and step-by-step instructions, which often involve a lot of screenshots. I would love to be able to paste images from the clipboard straight into Ghost without having to save them to disk first. It sounds a bit lazy but it has been my biggest point of friction when writing documentation with other web based tools. It looks like it is at least possible to do in Javascript now with Chrome (http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/), though I'm not sure if it is possible to do this with the image uploader or code editor Ghost uses.

I know this is going to be pretty specific to both the OS and browser and may not be possible in all of them. If I can get it working in Ghost for a specific OS and browser, is it something that might be accepted as a pull request? Or would it have to be working in all supported platforms?

[gotdibbs]

👍 I've done this working before in Chrome on Windows at least in an internal web app. Even though it doesn't work in IE, I still love it.

[ErisDS]

So it seems blueimp actually supports a pasteZone in Chrome. I see no reason to turn it on as long as it works only in the same way as the dropzone does.

I recommend using blueImp and not implementing this yourself as we can depend on them to add support for more browsers as it becomes available.

[smahood]

Well that's cool, nice that it's basically already there.

[halfdan]

@smahood Are you working on a pull request or do you mind if I pick this one up?

[smahood]

Please go ahead @halfdan, I haven't started working on it yet.

[halfdan]

@JohnONolan I would like to add \e601 or \e602 (paste icon from IcoMoon to the Icons font and use it on the Image drag/drop zone as an additional button. Is there an easy way to it?

Edit: I managed to import icons.svg and icons.dev.svg and would be able to add the paste icon. I noticed that icons.dev.svg isn't used in icons.scss. Is there a reason why that file exists?

[JohnONolan]

I would like to add \e601 or \e602 (paste icon from IcoMoon to the Icons font and use it on the Image drag/drop zone as an additional button. Is there an easy way to it?

That's entirely the wrong question. The question should - be a discussion about whether or not that proposed UI modification is actually a sensible idea to implement at all. Ghost is not a project where we just throw "an additional button" here and there without thought.

I see absolutely no need for any additional UI as a part of this issue. It should work like GitHub's image upload facility. (Copy an image to clipboard and paste it into the GitHub comment box to see it in action)

Is there a reason why [icons.dev.svg] exists?

There are very few files in the codebase (I would suggest, a total of zero) which exist for no reason. This is the icon development file used by icomoon.

[halfdan]

@JohnONolan I see your point. The reason why I would like to add a new icon is that the paste functionality requires an editable element you can paste the image to. Clicking the dropzone currently opens the file chooser and this makes it impossible to paste an image.

Pasting the image directly to the editor would be the alternative but that leaves the author no way to have the image placeholder while writing.

[JohnONolan]

In a workflow of pasting images into a document the placeholder is a lot less relevant. In the use case example given above of writing software documentation, it's fairly likely that you're writing and pasting in screencaps simultaneously as you go. Not coming back later and going through to add the images. Nevertheless, you could still achieve that that by pasting over the top of the placeholder tag inside the editor.

Performing a paste action inside a dropzone is not intuitive, or - I would suggest - reliable.

[ErisDS]

When I put this into 0.4, I thought it was going to be a simple case of adding copyZone to the blueimp config. If it requires more than that then it requires more consideration. Dropping from 0.4 for now.

[karlmikko]

This is something i really want to be able to do.

Has anyone started on a PR for this? else i may work on a PR like how @JohnONolan specified github works.

http://pasteboard.co/ does this functionality. really well also.

[wamatt]

would love this feature. 👍

[ErisDS]

Closing this as wontfix against #1294 to be revisited when we look at overhauling the editor.

[mgmccarthy]

@JohnONolan, I'm trying to figure out if this Issue ever was addressed or is still to be built or was dropped.

I agree with your statement made here about it working like GitHub paste an image, and would love to see this implemented in Ghost.

Is there an existing Issue that encompasses this functionality?

[ErisDS]

There was a PR that was worked on for a while, however it never worked 100%. We decided to close it in the end as the upcoming Ghost 1.0 version will have a completely different editor. The issue for the new editor is here: #7429, the currently open issue for this feature is here: #4753