Ghost: Feature: Paste image from clipboard in editor

[Rovak]

While writing a blog post with Ghost i sometimes use the Windows/Ubuntu Snippet tool to copy images or make screenshots.

Current steps to add an image

1. Open snippet tool
2. Select area to copy
3. Save image to folder
4. Open editor and press Ctrl + Shift + I to add image tag
5. Click on the image preview
6. Open popup, navigate to folder and choose image
7. Image added

With paste support from clipboard these steps are reduced to

1. Open snippet tool
2. Select area to copy
3. Open editor and press Ctrl + V
4. Image added

I've written a plugin which allows users to paste content from the clipboard in a textarea or editors like CodeMirror. This plugin can be used, or only use the code which is relevant for the textarea editor.

Right now most browsers lack the support for listening to paste events, only Chrome supports it natively, Firefox works with some ugly hacks. I'm also not sure how pasting images would work on mobile.

If this feature is accepted then i can implement it and base it on #4373.

As an extra adding drag-drop support is fairly simple with these changes, it only requires hooking into a few native drag events. Both the drag and paste event have a FileList available from which to read the files.

[ekulabuhov]

That's a very cool feature to have! I find it extra productive in GMail when used in conjunction with Windows Print Screen functionality & basic image resizing.

[ErisDS]

This has been raised before, and it got stuck: #1246 - it'd be great if you could check out that issue, and explain how your solution is different to that one ;)

[Rovak]

After reading issue #1246 my understanding is that there were given 2 suggestions:

1. Use the current Upload Plugin plugin and configure pasteZone to allow for pasting with the default paste shortcut in the editor. I guess this does not work out-of-the-box with the current codemirror editor.
2. Add the option to click the image placeholder (dropzone) and paste, this requires an extra button on the image placeholder.

The issue was closed because it required more consideration, which i agree if you choose for option 2. It is not intuitive.

My issue is based on the first suggestion, and the new textarea editor. No extra UI buttons, just an extra shortcut which automagically uploads the image from the clipboard and adds the image tag with the url in the current cursor position inside the editor. Users who use shortcuts expect paste to work in most applications.

[alexanderchan]

:thumbsup:

@Rovak I totally agree this would simplify adding images since pasting directly is a really nice feature. It's an added bonus that you've already implemented the working version of this. Either way I'm testing out your plugin the next chance I get :smile:

[ErisDS]

Hi @Rovak, after a bit of a delay, the new textarea version of our editor is now in master. It think your proposal makes sense for this version of the editor so if you're still interested in integrating your plugin into Ghost, that would be awesome.

The only thing I'd add is that the result of the upload should be correctly formatted markdown, much the same as how the uploader works here in GitHub (and hey if we can get drag and drop working as well that would be sweeeeeet :cake:).

[Rovak]

I'm gonna start working on it then, i already started digging into the editor component and found that the current fileupload plugin has some logic that can be reused to paste files, so i may get this working without introducing any new plugins.

[mgmccarthy]

@Rovak @ErisDS any idea if this functionality will be added to Ghost editor?

[ErisDS]

I just replied to this question over on this issue: https://github.com/TryGhost/Ghost/issues/1246#issuecomment-270586317.

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. This issue remains open as something to consider for the new editor.

[intrd]

I was using this function and after updating it stopped working, did you remove it? This was very useful!

[kevinansfield]

Hey @intrd, the function was never implemented, I'm not quite sure how it was working for you before? 😕

[intrd]

Wow!
I swear it was working for me, published several articles doing this..
..clipped something using screenshot tool, went to ghost editor on browser(ffox), ctrl+shift+I and ctrl+v to paste directly the image that was on the clipboard, it replaced "http://" with "/content/images/.." and it already uploaded!

I was using a very old version of the ghost and when I updated it stopped working.. very strange! No plugin or browser extension installed..

[ErisDS]

I think it makes sense to close this and #6897 in favour of #7429 (the epic issue for the new editor). We can reopen them once the new editor is shipped, if these features don't make it into the first iteration.

[hedefalk]

I think it makes sense to close this and #6897 in favour of #7429 (the epic issue for the new editor). We can reopen them once the new editor is shipped, if these features don't make it into the first iteration.

I just upgraded from 0.x something to latest for this feature but it doesn't seem to be here yet? Something similar to what I have here on github would be great… Should we reopen?

[hedefalk]

For reference, there's the github functionality that's closed source I guess, and there's an Atom plugin, https://atom.io/packages/markdown-image-helper and a vscode one: https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image

I would want it to work like the github one, when typing this on OSX I just hit cmd-shit-4, mark an area and paste it with cmd-v:

turns to an ajax upload and inserted markdown image. It's like zillion times better than file handling , drag and drops for productivity. It's really sub-second compared to at least tens of seconds to grab a file.

PS. there's a setting in osx to make screenshots go to clipboard instead of png's on desktop.

[dandv]

FWIW, I've compared tens of open source rich text editors, and pasting images from clipboard was a key requirement. Perhaps a plugin can be used or ported from one of the leading editors.

[kevinansfield]

This issue is closed, the behaviour won't be added to the current markdown editor. Our upcoming rich-text editor (codenamed Koenig) will have paste+upload behaviour.

[hedefalk]

@kevinansfield Is there any way to enable the upcoming editor today? There is markdown in the new rich-editor as described in the first ticket post, right?

[kevinansfield]

Is there any way to enable the upcoming editor today?

@hedefalk you can follow progress and see usage instructions in the ticket I linked you to https://github.com/TryGhost/Ghost/issues/9311. It's still in Alpha state so not recommended for daily usage/

There is markdown in the new rich-editor as described in the first ticket post, right?

No, this is a completely new editor. There is some backwards compatibility with markdown in the main editor via text expansions and our current markdown editor is available by inserting a markdown card. Pasting of images is a planned feature, it's not in the new editor just yet