Merge pull request #39 from MicrosoftEdge/svg-clipboard

New SVG clipboard demo
MicrosoftEdge · Jul 3, 2024 · 5c7a358 · 5c7a358
2 parents 1a5c5b3 + 262c2e7
commit 5c7a358
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -86,6 +86,7 @@ last sync'd April 16, 2024
 | Reader app | An article reader app used to demonstrate how to use various web APIs such as CSS Custom Highlight, `<selectlist>`, EyeDropper, CSS and JSON modules, Scroll animation timeline, and Async Clipboard. | [/reader/](https://github.com/MicrosoftEdge/Demos/tree/main/reader) | [Reader](https://microsoftedge.github.io/Demos/reader/) |
 | Selectlist demos | Demo page showing how the Open UI's `<selectlist>` element can be used. | [/selectlist/](https://github.com/MicrosoftEdge/Demos/tree/main/selectlist) | [Open UI's \<selectlist\> demos](https://microsoftedge.github.io/Demos/selectlist/) |
 | EditContext API demo | Demo page showing how the EditContext API can be used to build an advanced text editor. | [/edit-context/](https://github.com/MicrosoftEdge/Demos/tree/main/edit-context) | [HTML editor demo](https://microsoftedge.github.io/Demos/edit-context/) |
+| SVG support in the Async Clipboard API | Demo page showing how the Async Clipboard API supports SVG format. | [/svg-clipboard/](https://github.com/MicrosoftEdge/Demos/tree/main/svg-clipboard) | [SVG clipbard support demo](https://microsoftedge.github.io/Demos/svg-clipboard/) |
 
 
 ## Adding a new demo

diff --git a/svg-clipboard/README.md b/svg-clipboard/README.md
@@ -0,0 +1,5 @@
+# SVG support in the Async Clipboard API
+
+➡️ **[Open the demo](https://microsoftedge.github.io/Demos/svg-clipboard/)** ⬅️
+
+This demo showcases the support for SVG format in the Async Clipboard API.
diff --git a/svg-clipboard/edge.svg b/svg-clipboard/edge.svg
diff --git a/svg-clipboard/index.html b/svg-clipboard/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>SVG clipbard support demo</title>
+ <link rel="icon" type="image/png" href="https://edgestatic.azureedge.net/welcome/static/favicon.png">
+ <link rel="stylesheet" href="style.css" />
+ <script src="script.js" type="module" defer></script>
+</head>
+
+<body>
+ <h1>Support for the SVG format in the Async Clipboard API</h1>
+ <p>This page demos support for the SVG format in the Async Clipboard API. Support for SVG makes it possible for web
+ apps to participate in SVG file copy/paste operations with other web and native apps, such as:</p>
+ <ul>
+ <li>Copying SVG content from a webpage to a native app like PowerPoint.</li>
+ <li>Copying SVG content from a native app like the Windows Explorer to a web app.</li>
+ <li>Copying SVG content between two web apps.</li>
+ </ul>
+
+ <p class="support-notice">Your browser supports SVG format in the Async Clipboard API.</p>
+
+ <div class="test copy">
+ <h2>Copy</h2>
+ <p>Click the <strong>Copy</strong> button below to write the SVG content to the system clipboard.</p>
+ <button type="button">Copy ✂️</button>
+ <div class="svg-area"></div>
+ </div>
+
+ <div class="test paste">
+ <h2>Paste</h2>
+ <p>Click the <strong>Paste</strong> button below to paste SVG content you copied from another app into the system clipboard, and display the image below.</p>
+ <button type="button">Paste 📋</button>
+ <div class="svg-area"></div>
+ </div>
+</body>
+
+</html>
diff --git a/svg-clipboard/script.js b/svg-clipboard/script.js
@@ -0,0 +1,57 @@
+const copyEl = document.querySelector(".copy");
+const copyButton = copyEl.querySelector("button");
+const copySvgArea = copyEl.querySelector(".svg-area");
+
+const pasteEl = document.querySelector(".paste");
+const pasteButton = pasteEl.querySelector("button");
+const pasteSvgArea = pasteEl.querySelector(".svg-area");
+
+const supportNotice = document.querySelector(".support-notice");
+
+// Start by loading the edge.svg image and displaying it in the copy area.
+fetch("edge.svg")
+ .then((response) => response.text())
+ .then((text) => (copySvgArea.innerHTML = text));
+
+// Update the support notice based on the browser's capabilities.
+const supportsSVG = ("supports" in window.ClipboardItem) && window.ClipboardItem.supports("image/svg+xml");
+if (!supportsSVG) {
+ supportNotice.classList.add("no-support");
+ supportNotice.textContent = "Your browser does not support reading or writing SVG to the clipboard.";
+}
+
+copyButton.addEventListener("click", async () => {
+ if (!supportsSVG) {
+ return;
+ }
+
+ // Get the SVG image as a Blob.
+ const response = await fetch("edge.svg");
+ const blob = await response.blob();
+
+ // Store the SVG content in the clipboard.
+ await navigator.clipboard.write([
+ new window.ClipboardItem({
+ [blob.type]: blob
+ }),
+ ]);
+});
+
+pasteButton.addEventListener("click", async () => {
+ if (!supportsSVG) {
+ return;
+ }
+
+ // On paste, read the system clipboard.
+ const [clipboardItem] = await navigator.clipboard.read();
+ const svgBlob = await clipboardItem.getType("image/svg+xml");
+ if (!svgBlob) {
+ alert("No SVG in the clipboard.");
+ return;
+ }
+
+ // Getting the source code here, since :hover effects don't
+ // work when the SVG is referenced as `<img src>`.
+ const svgCode = await svgBlob.text();
+ pasteSvgArea.innerHTML = svgCode;
+});
diff --git a/svg-clipboard/style.css b/svg-clipboard/style.css
@@ -0,0 +1,42 @@
+:root {
+ color-scheme: dark light;
+}
+
+body {
+ margin: 2rem;
+ font-family: system-ui, sans-serif;
+ font-size: 1rem;
+}
+
+h1, h2, p, ul {
+ margin: 1rem 0;
+}
+
+.test .svg-area {
+ height: 20vh;
+}
+
+.test .svg-area svg {
+ height: 100%;
+}
+
+.test button {
+ display: block;
+ padding: .5rem;
+ margin: 1rem 0;
+}
+
+.test .svg-area {
+ border: 1rem dashed #eee;
+ border-radius: .5rem;
+}
+
+.support-notice {
+ font-weight: bold;
+ background: rgb(223, 247, 223);
+ padding: .5rem;
+}
+
+.support-notice.no-support {
+ background: rgb(247, 223, 223);
+}