Allow dropping images into notebook cells to create attachments (#180256)

* Allow dropping images into notebook to create attachments

Fixes #157577

This allows you to drag and drop image files or image data into a notebook cell to create an attachment

As part of this work, I also updated the paste attachment logic so that we can:

- Create multiple attachments in a single operation
- Create attachments of other mime types besides `image/png`
- Create attachments for images that have spaces in the filename

* Also allow pasting uri lists to create attachments

* Fix indent

* Add id

extensions/ipynb/notebook-src/cellAttachmentRenderer.ts

@@ -24,7 +24,7 @@ export async function activate(ctx: RendererContext<void>) {
 			const src = token.attrGet('src');
 			const attachments: Record<string, Record<string, string>> | undefined = env.outputItem.metadata?.attachments;
 			if (attachments && src) {
-				const imageAttachment = attachments[src.replace('attachment:', '')];
+				const imageAttachment = attachments[tryDecodeURIComponent(src.replace('attachment:', ''))];
 				if (imageAttachment) {
 					// objEntries will always be length 1, with objEntries[0] holding [0]=mime,[1]=b64
 					// if length = 0, something is wrong with the attachment, mime/b64 weren't copied over
@@ -45,3 +45,11 @@ export async function activate(ctx: RendererContext<void>) {
 		};
 	});
 }
+
+function tryDecodeURIComponent(uri: string) {
+	try {
+		return decodeURIComponent(uri);
+	} catch {
+		return uri;
+	}
+}