Test: ipynb image attachment renderer

[Yoyokrazy]

Refs: #119961 #155777

• Mac @rebornix, @sandy081
• Windows @rzhao271, @hediet
• Linux @sadasant

Complexity: 2

Authors: @Yoyokrazy

---

Summary:

VScode now supports the builtin rendering of images within markdown ipynb cells when stored as attachment encoded base64 data.

Basics:

• Within vscode/extensions/ipynb/src is now the file cellAttachmentRenderer.ts which extends the markdown renderer implemented inside the builtin markdown-language-features extension. There is a new image rule extended, which access and renders the attached base64 image data from within the cell metadata when the markdown source references !()[attachment:filename.filetype]

Steps to Test:

This is specifically a test to render images from notebooks that are created outside of vscode. Previously, vscode did not support images referenced via attachment metadata. Follow the procedure below:

• Launch jupyter notebooks web client via conda or the command line with python using python -m notebook
• Create a new notebook inside the web client and create the following cases
  • Take a screenshot and paste it into a markdown cell
  • Take multiple screenshots and paste multiple into the same markdown cell. This will create !()[attachment:image.png] , !()[attachment:image-2.png] , !()[attachment:image-3.png] etc.
  • Copy a png file and paste it into a cell (this will have the format of !()[attachment:filename.png] isntead of !()[attachment:image.png]
• Save the file in jupyter, and re-open inside vscode with just the builtin ipynb extension

Things to Check:

• The images all render
• The correct images render in the correct locations
• Cells with multiple images render in the proper order

[bpasero]

@Yoyokrazy would you please find volunteers for testing, thanks.

[amunger]

there was an issue with how the scripts were built, should be fixed in the next insiders publish with #156469

[sadasant]

I'll test on Linux!

[sadasant]

On Linux:

• The jupyter notebooks web client is not allowing me to upload more than one picture consistently.
  • I was able to upload one picture, and then it stopped working.
  • If I add new cells, I still can’t upload another picture.
  • I can only upload another picture by creating a new notebook.
  • Even if I can upload one picture per notebook, the path to this picture isn't good. I have the picture in Downloads and the path ends up only having the name, without the folder nor the rest of the path to that picture.
• After opening the same file in VSCode, I can't see the picture.

Screenshots:

I don't think this is a VSCode issue per se. It seems like a Jupyter bug 🤔

[hediet]

It works, but I wasn't able to paste pictures from the explorer into Jupyter (only screenshots from my screenshot tool worked).

[amunger]

@sadasant - can you retry with the update from last night, images should be rendering with the latest insiders patch

[Yoyokrazy]

• Even if I can upload one picture per notebook, the path to this picture isn't good. I have the picture in Downloads and the path ends up only having the name, without the folder nor the rest of the path to that picture.

@sadasant This is actually expected behavior. Jupyter brings along the file name, but the image itself is just converted into base64 data and kept behind the notebook. There's no reference to the original file itself. Likely for the idea of keeping notebooks as portable as possible without needing people to transfer the image files as well.

As for the three points above that, not totally sure about the stability of Juypter's functionality, seems like they might have some bugs...

[sadasant]

@amunger ok cool! now the image does display! Yay!!

@Yoyokrazy ok thank you! Yeah I think Jupyter has some bugs, at least in Linux.

So, things look good from what I can tell, given the limitations of Jupyter on linux.

[rebornix]

The image attachment preview looks good, great work!

There is only one bug that we throw an error when we fail to find an image attachment and break the whole markdown preview, I'll suggest we have it fixed before release. We may also want to explore how to prevent markdown renderer plugins bring down the whole markdown preview. cc @mjbvz