feat: use ClipboardJS for copying shareable link

client/package.json

@@ -18,6 +18,7 @@
     "@rollup/plugin-inject": "^5.0.3",
     "axios": "^1.2.5",
     "bootstrap": "^5.2.3",
+    "clipboard": "^2.0.11",
     "d3": "^7.8.2",
     "jquery": "^3.6.3",
     "monaco-editor": "^0.34.1",

client/src/components/SubstraitGraph.vue

@@ -4,11 +4,13 @@
     <div id="svgContainer">
       <div style="margin-right: 10vh; text-align: right">
         <button
+          id="copy-button"
           type="button"
           class="btn btn-outline-primary btn-sm"
           v-show="download"
           style="margin-right: 1vh"
           @click="generateLink"
+          ref="copyButton"
         >
           Copy Link
         </button>
@@ -39,12 +41,14 @@
 <script>
 import { store } from "../components/store";
 import axios from "axios";
+import Clipboard from "clipboard";
 
 export default {
   name: "SubstraitGraph",
   data: function () {
     return {
       download: false,
+      shareable_link: "",
     };
   },
   mounted() {
@@ -57,6 +61,9 @@ export default {
     this.observer.observe(this.$refs.d3Plot, {
       childList: true,
     });
+    this.clipboard = new Clipboard("#copy-button", {
+      text: () => this.shareable_link,
+    });
   },
   beforeDestroy() {
     this.observer.disconnect();
@@ -105,12 +112,8 @@ export default {
           validator_overrides: store.validation_override_levels,
         });
 
-        const textField = document.createElement("textarea");
-        textField.innerText = this.currentUrl + "/plan/" + resp.data;
-        document.body.appendChild(textField);
-        textField.select();
-        document.execCommand("copy");
-        textField.remove();
+        this.shareable_link = this.currentUrl + "/plan/" + resp.data;
+        this.clipboard.onClick({ currentTarget: this.$refs.copyButton });
         alert("Link copied to clipboard!");
       } catch (error) {
         console.log(error.response.data["detail"]);