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);
+}