Provide text-only copy option

[cibolog]

Ubuntu 20.04,

On "Copy SVG" click with default image (or any image):

• crashes in Chromium 88
• shows "ClipboardItem is not defined" in Firefox 94.0

[tomayac]

Thanks for the report.

I have fixed the Firefox issue (Firefox doesn't support module workers so I needed to load a polyfill and only supports the text part but not the binary part of the clipboard API).

The Chrome issue is due to this outdated version (released a year ago) not yet supporting copying SVGs. Please update your Chrome version.

[cibolog]

No hope to make it work on older chrome just as text?

[tomayac]

Oh, so you’re stuck on 88? Curious to hear the background. But yes, text-only should work as a fallback in this case. Let me reopen this issue.

[tomayac]

@cibolog Not particularly proud of this code, but it gets the job done:

SVGcode/src/js/clipboard.js

Line 96 in 543a6e6

Number(navigator.userAgent.replace(/.*Chrome\/(\d+).*/, '$1')) <= 88

. Chrome 88 always crashes the tab hard when you attempt to copy image/svg+xml, so user agent sniffing is the only workable solution.

[ShangChien]

@tomayac Hello! I am new to web-dev, and learn to use Async Clipboard API in copy web item to Microsoft-Offices.
I read your blog multi-mime-type-copying-with-the-async-clipboard-api, so cool work !
But it still paste a png or text in Microsoft-Offices.
My goal is to write native svg file in clipboarditems ,then paste native svg in MS-word by command ctrl+v.
During the process of realizing my goal, two doubts：
my chrome version: 104.0.5112.81 (cohort: Stable Installs & Version Pins)

• I need to manual enable chrome flag : Experimental Web Platform features to clear bellow crash snapshot:
  Is this meaning it not suitable to use this feature(could change or even delete) in base project?
  

• By enable Experimental Web Platform features flag, i can write svg text in clipboard with type of image/svg+xml. But with command ctrl+v in Office-Word, it behaves as shown below, which is not satisfactory.
  

I can new a *.svg suffix file and paste svg text in it , then drag or copy svg file from Windows10 to Office-Word2019, which work well. lacking desktop programming experience，I know this approach is much related to Office rather than web-chrome.

Is there any suggestion for a elegent way to copy svg item cross platform( Web to Office)?

thank you !

[ShangChien]

I just read a chrome official release feature blog about your team work on Async Clipboard:
Web custom formats for the Async Clipboard API
Congratulations！
But ,the demo do not work in my chrome :
my chrome version: 104.0.5112.81 (cohort: Stable Installs & Version Pins)

[tomayac]

But ,the demo do not work in my chrome :
my chrome version: 104.0.5112.81 (cohort: Stable Installs & Version Pins)

This is a problem that's fixed in Chrome 105, the current Canary version. Please try it there.

[tomayac]

@tomayac Hello! I am new to web-dev, and learn to use Async Clipboard API in copy web item to Microsoft-Offices. I read your blog multi-mime-type-copying-with-the-async-clipboard-api, so cool work !

Thank you ☺️!

But it still paste a png or text in Microsoft-Offices. My goal is to write native svg file in clipboarditems ,then paste native svg in MS-word by command ctrl+v. During the process of realizing my goal, two doubts： my chrome version: 104.0.5112.81 (cohort: Stable Installs & Version Pins)

• I need to manual enable chrome flag : Experimental Web Platform features to clear bellow crash snapshot:
  Is this meaning it not suitable to use this feature(could change or even delete) in base project?

Correct, copying SVGs is still behind a flag.

• By enable Experimental Web Platform features flag, i can write svg text in clipboard with type of image/svg+xml. But with command ctrl+v in Office-Word, it behaves as shown below, which is not satisfactory.

The problem here is that Office looks at the clipboard and inspects the formats, and it finds three representations. You may prefer SVG, but Office prefers some other representation. The solution probably is to only copy SVG, and not the other representations.

I can new a *.svg suffix file and paste svg text in it , then drag or copy svg file from Windows10 to Office-Word2019, which work well. lacking desktop programming experience，I know this approach is much related to Office rather than web-chrome.

In this case Office has no choice, so it deals with the SVG in the drag & drop operation, which it clearly is capable of. If you put just one representation, the SVG one, in the clipboard, it should work with pasting, too.

[ShangChien]

@tomayac Thanks for you sparing time to guide me！
I found the behavior of copy varies between Web-Chrome and Windows10_OS:

• case1: If we select and copy a file in Windows10_OS_file_folder, no valid data read from navigator.clipboard（seem nothing written to navigator.clipboard）
• case2: If we copy a item( like: a image ) in a programs( like: Office ) running on the Windows10_OS, it can deal with navigator.clipboard function and write&read data by MIME type.

But, in case2, the encoded format is different and more complex. ( I just test copy event between Chrome and Office_Word):
If we properly insert a svg, then copy it in Word, last paste it in Chrome. Chrome can read two type( image/svg+xml: ... ; image/png: ... ). The data of image/png is valid, the data of image/svg+xml is invalid.
With debug code fileReader.readAsText(item.getType('image/svg+xml')), it will return a garbled string.

It may be that the Office follows its own internal blob file svg format specification, which make idea of directly copy svg between Office and Web unrealistic.
So Sad....

[tomayac]

For case 1, files are exposed via the paste event, as outlined in https://web.dev/async-clipboard/#working-with-pasted-files.

For case 2, this may well be Office-specific behavior. Maybe worth finding someone from the Office team to talk to about that.

[yisibl]

Office uses the com.microsoft.image-svg-xml type, which is incompatible with Web standards, making it impossible to interoperate with browsers and other programs.

word-copy-svg-to-clipboard.mp4

[tomayac]

Is there anything actionable for SVGcode to do left?

[yisibl]

For SVGcode, I'd suggest adding the image/svg+xml type to the clipboard, so that once Chrome ships, we can paste SVG from the browser into any App that supports it, like Keynote.

For Office, I'm afraid it will take their team to improve it. @snianu Can you help me get in touch with the Office people?

[tomayac]

Can you try again now? (Make sure the service worker had time to reload the new app version, please.) It seems like I can't influence the order, but you're well aware via w3c/clipboard-apis#137.

[yisibl]

Can you try again now? (Make sure the service worker had time to reload the new app version, please.) It seems like I can't influence the order, but you're well aware via w3c/clipboard-apis#137.

Yes, the main obstacle is the order.