From 98d2b2ee9cc2d03909de97b09661909909ddd42f Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 31 Jul 2021 22:50:08 +0530
Subject: [PATCH] feat: supported copy to clipboard utlity

---
 components/http/CodegenModal.vue                 |  3 ++-
 components/lenses/renderers/HTMLLensRenderer.vue |  3 ++-
 components/lenses/renderers/JSONLensRenderer.vue |  3 ++-
 components/lenses/renderers/RawLensRenderer.vue  |  3 ++-
 components/lenses/renderers/XMLLensRenderer.vue  |  3 ++-
 helpers/utils/clipboard.ts                       |  2 +-
 nuxt.config.js                                   |  1 -
 package-lock.json                                | 11 -----------
 package.json                                     |  1 -
 pages/graphql.vue                                |  3 ++-
 plugins/v-clipboard.js                           |  4 ----
 11 files changed, 13 insertions(+), 24 deletions(-)
 delete mode 100644 plugins/v-clipboard.js

diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index c29935135..bf05e54eb 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -90,6 +90,7 @@ import { codegens } from "~/helpers/codegen/codegen"
 import { getRESTRequest } from "~/newstore/RESTSession"
 import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
 import { getCurrentEnvironment } from "~/newstore/environments"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
 
 export default defineComponent({
   props: {
@@ -151,7 +152,7 @@ export default defineComponent({
       this.$emit("handle-import")
     },
     copyRequestCode() {
-      ;(this.$clipboard as any)(this.requestCode)
+      copyToClipboard(this.requestCode)
       this.copyIcon = "done"
       this.$toast.success(this.$t("copied_to_clipboard").toString(), {
         icon: "done",
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 01ccdf595..a1ea3bf9f 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -67,6 +67,7 @@
 
 <script>
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
 
 export default {
   mixins: [TextContentRendererMixin],
@@ -102,7 +103,7 @@ export default {
       }, 1000)
     },
     copyResponse() {
-      this.$clipboard(this.responseBodyText)
+      copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index eaebc8d72..b67be36d5 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -55,6 +55,7 @@
 
 <script>
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
 
 export default {
   mixins: [TextContentRendererMixin],
@@ -104,7 +105,7 @@ export default {
       }, 1000)
     },
     copyResponse() {
-      this.$clipboard(this.responseBodyText)
+      copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 253474277..a3b284b95 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -54,6 +54,7 @@
 
 <script>
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
 
 export default {
   mixins: [TextContentRendererMixin],
@@ -95,7 +96,7 @@ export default {
       }, 1000)
     },
     copyResponse() {
-      this.$clipboard(this.responseBodyText)
+      copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index e8f3174a3..66701493b 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -54,6 +54,7 @@
 
 <script>
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
 
 export default {
   mixins: [TextContentRendererMixin],
@@ -95,7 +96,7 @@ export default {
       }, 1000)
     },
     copyResponse() {
-      this.$clipboard(this.responseBodyText)
+      copyToClipboard(this.responseBodyText)
       this.copyIcon = "done"
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
diff --git a/helpers/utils/clipboard.ts b/helpers/utils/clipboard.ts
index 81a1a0c0f..44dbcbf0b 100644
--- a/helpers/utils/clipboard.ts
+++ b/helpers/utils/clipboard.ts
@@ -5,7 +5,7 @@
  * @param content The content to be copied
  */
 export function copyToClipboard(content: string) {
-  const dummy = document.createElement("input")
+  const dummy = document.createElement("textarea")
   document.body.appendChild(dummy)
   dummy.value = content
   dummy.select()
diff --git a/nuxt.config.js b/nuxt.config.js
index d0337e6ff..87a4bfde8 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -94,7 +94,6 @@ export default {
   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
   plugins: [
     "~/plugins/v-tippy",
-    "~/plugins/v-clipboard",
     "~/plugins/vuex-persist",
     "~/plugins/vue-rx",
     "~/plugins/vue-apollo",
diff --git a/package-lock.json b/package-lock.json
index c55ed2af1..392c79ce8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,6 @@
         "socketio-wildcard": "^2.0.0",
         "splitpanes": "^2.3.8",
         "tern": "^0.24.3",
-        "v-clipboard": "^2.2.3",
         "vue-apollo": "^3.0.7",
         "vue-cli-plugin-apollo": "^0.22.2",
         "vue-functional-data-merge": "^3.1.0",
@@ -28823,11 +28822,6 @@
         "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/v-clipboard": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/v-clipboard/-/v-clipboard-2.2.3.tgz",
-      "integrity": "sha512-Wg+ObZoYK6McHb5OOCFWvm0R7xHp0/p0G1ocx/8bO22jvA/yVY05rADbfiztwCokXBNfQuGv/XSd1ozcTFgekw=="
-    },
     "node_modules/v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
@@ -55448,11 +55442,6 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
-    "v-clipboard": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/v-clipboard/-/v-clipboard-2.2.3.tgz",
-      "integrity": "sha512-Wg+ObZoYK6McHb5OOCFWvm0R7xHp0/p0G1ocx/8bO22jvA/yVY05rADbfiztwCokXBNfQuGv/XSd1ozcTFgekw=="
-    },
     "v8-compile-cache": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
diff --git a/package.json b/package.json
index 9cad9cd3b..bed8acd5c 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,6 @@
     "socketio-wildcard": "^2.0.0",
     "splitpanes": "^2.3.8",
     "tern": "^0.24.3",
-    "v-clipboard": "^2.2.3",
     "vue-apollo": "^3.0.7",
     "vue-cli-plugin-apollo": "^0.22.2",
     "vue-functional-data-merge": "^3.1.0",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index dd462475b..4dda0eb20 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -589,6 +589,7 @@ import { getCurrentStrategyID, sendNetworkRequest } from "~/helpers/network"
 import { getSettingSubject, useSetting } from "~/newstore/settings"
 import { addGraphqlHistoryEntry } from "~/newstore/history"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
@@ -878,7 +879,7 @@ export default defineComponent({
       setTimeout(() => (this.copyVariablesIcon = "content_copy"), 1000)
     },
     copyToClipboard(content) {
-      this.$clipboard(content)
+      copyToClipboard(content)
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })
diff --git a/plugins/v-clipboard.js b/plugins/v-clipboard.js
deleted file mode 100644
index 2e9aaacd8..000000000
--- a/plugins/v-clipboard.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import Vue from "vue"
-import Clipboard from "v-clipboard"
-
-Vue.use(Clipboard)