popup/ScreenshotPreview: drag-and-drop pastes raw base64 data URI instead of image

[codehakase]

Summary

I was testing the capture flow and noticed that dragging a screenshot from the popup preview into another app (Slack, a browser text field, etc.) dumps the entire data:image/png;base64,... string as plain text instead of transferring the image.

This happens because handleDragStart in ScreenshotPreview.tsx sets the drag payload directly to the base64 data URI:

e.dataTransfer.setData("text/uri-list", imageUrl); // imageUrl is data:image/png;base64,...
e.dataTransfer.setData("text/plain", imageUrl);

This becomes dangerous when drop targets accept text -- they receive the raw base64 dump verbatim. There is a second issue here: the canvas.toBlob callback that calls setDragImage is async. By the time it fires, the drag operation has already started, so the custom drag preview never takes effect.

The fix direction is to either write the capture to a temp file via a Tauri command and set text/uri-list to the file:// path, or use DataTransfer.items.add(file, "image/png") with the blob from the canvas. The drag thumbnail should also be pre-computed on mount so setDragImage is called synchronously.

Code path

• src/components/ScreenshotPreview.tsx L29-55
• src/popup.tsx L63