Paste images from clipboard / screenshots

[leemengtw]

Hi, I wonder if there is a way to paste images into (MarkDown) cells directly from clipboard? This will be a lot of help because I frequently take screenshots and incorporate them into Markdown cells in my notebooks.

The Pycharm equivalent plugin of this feature is Paste Image To Markdown.

Any comments is appreciated, thanks in advance!

[Bamieh]

Any news on this? I have become very familiar with the code base and writing plugins lately so I want to take on this task and write it as a plugin if no one has done this already.

[leemengtw]

@Bamieh I don't know any existing plugin for doing this from the time I posted this isse, but I think many people including me will be very appreciated if there is a working one!

[Bamieh]

@leemengtaiwan I am almost done with the basic implementation, i'll share the results soon 😄

[jasongrout]

I think this is important to be in core. I'm excited to see your implementation!

[Bamieh]

@jasongrout I am starting to get this error all out of the blue:

Error: No provider for: @jupyterlab/filebrowser:IFileBrowserFactory.

It was working fine just a moment ago 😕

[vidartf]

The existing mechanism for this in classic notebook is using attachments, but the user interface for adding attachments has not yet been added to lab. See also #4333. If you want to work on it, the best place to add the code is likely in the attachments package. Hope this helps 👍

[vidartf]

See also #4828.

[Bamieh]

@vidartf thank you, I am done with the implementation (as a separate plugin for now called clipboard). But just before I publish I started getting this error that im still stuck on:

Error: No provider for: @jupyterlab/filebrowser:IFileBrowserFactory.

Any clue?

import {
  IFileBrowserFactory
} from '@jupyterlab/filebrowser';

const plugin: JupyterLabPlugin<void> = {
  id: 'jupyterlab-clipboard',
  requires: [
    IFileBrowserFactory,
  ],
  autoStart: true,
  activate: activateJupyterlabClipboard,
};

[jasongrout]

Sometimes this happens if you accidentally have two packages that aren't deduped. One thing you can try is to clean out your node_modules and do jupyter lab clean, then build again. Check to make sure your jupyterlab dependency versions match up with the jupyterlab versions too.

[Bamieh]

@jasongrout thank you.

here is a link to the extension: https://github.com/Bamieh/jupyterlab-clipboard
It can be also found on npm: https://www.npmjs.com/package/jupyterlab-clipboard

CC @leemengtaiwan @vidartf

[Will-So]

@Bamieh, tried it out and it works quite well. Thanks!

[Bamieh]

@Will-So awesome! i'll improve the implementation gradually within these few days (currently pasting anything opens the save as dialog which is a little annoying) fixed

[agoose77]

I've created an extension to restore the original UI for attachments here. I've also added the ability to add from the File Browser Tree context menu. I'm going to look into adding the clipboard paste feature too, but I could use some input on this, as I'm not sure where it is appropriate to add the event handler (as it seems one must handle this through native JS code rather than any JupyterLab API?)

[ZedTDean]

You can copy and paste images and screenshots in normal Jupyter but not jupyter lab.I use OneNote or snip & sketch that comes with windows 10 to capture some screen areas.

1. take screenshot using Prtscn or any of the mentioned toots above.
2. convert the cell to markdown.
3. Ctrl-V in the cell ,you will see the following line ""
4. run the sell
5. the screenshot will appear in the cell

Not sure why it does not work in Jupyter lab

I am not sure why it does not

[llinfeng]

@ZedTDean I tried to paste OneNote-clipped screenshot into JupyterLab and it works now. The image file is saved in some binary format, directly to the *.ipynb file. This is with Version 1.1.4 for Jupyter Lab.

Note 1: Github does not render screenshots in Markdown cells, nor does colab. nbviewer renders things perfectly, as in this example.

Note 2: There can only be one unique screenshot in one Markdown cell. Pasting one more screenshot into the same Markdown cell will refresh the existing screenshot.

Issue #4333, once solved, can allow us to insert more than one screenshot into a single Markdown cell.

[ianhi]

@llinfeng as of version 2.1 you can paste multiple images into the same cell and they won't overwrite.

[jasongrout]

I just tested this as well, and in the latest version, I can paste multiple images into a markdown cell successfully.

Closing as fixed. Thanks everyone!