Copying MakeCode image data from another application

I saw in a recent stream that @jwunderl was mentioning the ability to copy + paste in the Sprite Editor on the arcade beta. … but sadly in the stream, they ended up having to resort to switching to JS to actually paste the image data in, since it was copied from another application.

Here’s a codesandbox that lets you get img`…` formatted plain text onto your clipboard with the clipboard format that the sprite editor is looking for: https://codesandbox.io/embed/recursing-haze-642e2?fontsize=14&hidenavigation=1&theme=dark&view=preview

[Technical explanation: The current version of the sprite editor puts two formats onto the clipboard when copying but only accepts the application/makecode-image format as pasted image data.]

1 Like

Ahhh, fantastic! I was just about to look at that, hah

Out of curiosity, did you have any particular reasons against changing the paste logic to

const imageData = ev.clipboardData.getData('application/makecode-image') || ev.clipboardData.getData("text/plain");

so that it falls back to the plain text if previous copy wasn’t explicitly set as an image? Works fine (on my machine™) as the setdata properly clears the old data when another window’s copy event overrides it, though I suppose it does make it possible to end up pasting garbage as imageLiteralToBitmap just ignores any invalid characters.

kinda fun to paste random text in and see what image it converts to too, e.g. it was the best of times ... sentence from A Tale of Two Cities with linebreaks added in:

Yes, one of the reasons was that I didn’t know the consequences of attempting to parse garbage data…

Another potential issue is that the paste handler is registered with the document. By requiring the specific format, we only preventDefault pastes that we are sure we should handle, and avoid interfering with other valid paste destinations in the sprite editor (like the image dimensions inputs).

1 Like

Ahh, right, thanks! Well, there’s little downside to pasting garbage data as it will just generate a few random pixels that can be dragged away, and easy enough to do a quick check that it looks ~~ like an image literal before pasting. Put up a quick PR for that: https://github.com/microsoft/pxt/pull/7270

1 Like

Looks like Joey merged this PR today, so in an upcoming /beta release, you shouldn’t need to do the codesandbox dance to get ``img`…``` formatted data to paste into the sprite editor.

Thanks @jwunderl!

2 Likes