From ec8c53cd5de8de161253a64044d9513c337123b9 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 30 Jan 2021 11:09:37 +0530
Subject: [PATCH 1/2] Hide copy button if clipboardItem unavailable.

Fixes #97
---
 src/components/Links.svelte | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/Links.svelte b/src/components/Links.svelte
index 07ed2f95..d2a0cd92 100755
--- a/src/components/Links.svelte
+++ b/src/components/Links.svelte
@@ -50,6 +50,10 @@
     };
   };
 
+  const isClipboardAvailable = () => {
+    return !!window.ClipboardItem;
+  };
+
   const clipboardCopy = (canvas, context, image) => {
     return () => {
       context.drawImage(image, 0, 0, canvas.width, canvas.height);
@@ -101,7 +105,7 @@
 
   const unsubscribe = codeStore.subscribe((state) => {
     b64Code = Base64.encodeURI(JSON.stringify(state));
-    url = `${window.location.pathname.split("#")[0]}#/view/${b64Code}`;
+    url = `${window.location.pathname.split('#')[0]}#/view/${b64Code}`;
     iUrl = `https://mermaid.ink/img/${b64Code}`;
     svgUrl = `https://mermaid.ink/svg/${b64Code}`;
     mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${b64Code})`;
@@ -159,11 +163,13 @@
 </style>
 
 <div id="links">
-  <button class="button-style">
-    <a class="link-style" href={url} download="" on:click={onCopyClipboard}>
-      Copy Image
-    </a>
-  </button>
+  {#if isClipboardAvailable()}
+    <button class="button-style">
+      <a class="link-style" href={url} download="" on:click={onCopyClipboard}>
+        Copy Image
+      </a>
+    </button>
+  {/if}
   <button class="button-style">
     <a class="link-style" href={url} download="" on:click={onDownloadPNG}>
       Download PNG
@@ -191,13 +197,13 @@
   <input id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
 </div>
 <p>
-  <label>PNG size:</label>
+  <label>PNG size:</label><br />
   <input
     type="radio"
     value="auto"
     id="autosize"
     bind:group={imagemodeselected} />
-  <label for="autosize">auto</label>
+  <label for="autosize">auto</label><br />
   <input
     type="radio"
     value="width"
@@ -210,7 +216,7 @@
     min="3"
     max="10000"
     bind:value={userimagewidth}
-    disabled={imagemodeselected !== 'width'} />
+    disabled={imagemodeselected !== 'width'} /><br />
   <input
     type="radio"
     value="height"

From 9da7238c3b998245abe98340ea1cae4803acb730 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Sat, 30 Jan 2021 11:14:34 +0530
Subject: [PATCH 2/2] Use hasOwnProperty

---
 src/components/Links.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Links.svelte b/src/components/Links.svelte
index d2a0cd92..43b80979 100755
--- a/src/components/Links.svelte
+++ b/src/components/Links.svelte
@@ -51,7 +51,7 @@
   };
 
   const isClipboardAvailable = () => {
-    return !!window.ClipboardItem;
+    return window.hasOwnProperty('ClipboardItem');
   };
 
   const clipboardCopy = (canvas, context, image) => {