fix(markdown-preview/copy-image): invalid error with blob when download image. #233497
Conversation
…ad external image url.
Felipeex
changed the title
@microsoft-github-policy-service agree |
| @@ -11,6 +11,7 @@ import { SettingsManager, getData } from './settings'; | |||
| import throttle = require('lodash.throttle'); | |||
| import morphdom from 'morphdom'; | |||
| import type { ToWebviewMessage } from '../types/previewMessaging'; | |||
| import { isURL } from '../src/util/is-url'; | |||
There was a problem hiding this comment.
Code here not access the parent directory. Instead only load from preview-src
| 'image/png': new Promise((resolve) => { | ||
| const imageSrc = image.getAttribute('data-src') || 'src-not-found'; | ||
|
|
||
| if (isURL(imageSrc)) { |
There was a problem hiding this comment.
Shouldn't this try the image and then only write text if that fails?
| const imageSrc = image.getAttribute('data-src') || 'src-not-found'; | ||
|
|
||
| if (isURL(imageSrc)) { | ||
| await navigator.clipboard.writeText(imageSrc); |
There was a problem hiding this comment.
Instead of writing text, maybe use apis to select the image and then use execCommand('copy') tocopy it. It still won't write out image data but it will better match what browser do. Most of them write out text/html too for example
| @@ -16,6 +16,10 @@ export class CopyImageCommand implements Command { | |||
|
|
|||
| public execute(args: { id: string; resource: string }) { | |||
| const source = vscode.Uri.parse(args.resource); | |||
| this._webviewManager.findPreview(source)?.copyImage(args.id); | |||
| const imagePreview = this._webviewManager.findPreview(source); | |||
| })]); | ||
| }); | ||
|
|
||
| await navigator.clipboard.write([new ClipboardItem({ 'image/png': blobImage })]); |
There was a problem hiding this comment.
I'd revert this too. You want to call write early so that browsers know there is pending image data. Now it will instead wait for the blob to be created and only then write the clipboard. It's possible that clipboard changes between those steps
When you copied an image with an external link, it gave a CORS error.
Since it wasn't possible to fix the CORS issue directly to resolve this problem, instead of copying an image from an external source, it now copies the link to your clipboard so you can access the image. For local images, it still copies normally like before.
before:
Screen.Recording.2024-11-10.at.13.20.31.mov
after:
Screen.Recording.2024-11-10.at.13.22.08.mov
issue: #205624