From 19e0074563f0293f56dfc9bcb3fdb1d560caa9a8 Mon Sep 17 00:00:00 2001
From: stuzer05 <stuzer05@stuzer.link>
Date: Wed, 30 Oct 2024 14:43:22 +0200
Subject: [PATCH] Add copy invisible character tool

---
 src/router/index.js                          |  5 +++
 src/stores/toolsStore.js                     |  1 +
 src/views/general/CopyInvisibleCharacter.vue | 44 ++++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 src/views/general/CopyInvisibleCharacter.vue

diff --git a/src/router/index.js b/src/router/index.js
index e45f800..ac02ae5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,6 +32,11 @@ const router = createRouter({
       name: "%_of_number",
       component: () => import("../views/general/PercentOfNumber.vue"),
     },
+    {
+      path: "/copy_invisible_character",
+      name: "copy_invisible_character",
+      component: () => import("../views/general/CopyInvisibleCharacter.vue"),
+    },
 
     /**
      * String manipulation
diff --git a/src/stores/toolsStore.js b/src/stores/toolsStore.js
index b54da52..18ff00f 100644
--- a/src/stores/toolsStore.js
+++ b/src/stores/toolsStore.js
@@ -25,6 +25,7 @@ export const useToolsStore = defineStore("tools", {
         table_to_mediawiki_table: "Table to Mediawiki table",
         humans_txt: "humans.txt generator",
         "%_of_number": "% of number",
+        copy_invisible_character: "Copy invisible character",
       },
       Docker: {
         docker_convert_run_compose: "Convert run compose",
diff --git a/src/views/general/CopyInvisibleCharacter.vue b/src/views/general/CopyInvisibleCharacter.vue
new file mode 100644
index 0000000..be6bd71
--- /dev/null
+++ b/src/views/general/CopyInvisibleCharacter.vue
@@ -0,0 +1,44 @@
+<template>
+  <h2 class="tool-title">Copy invisible character</h2>
+  <hr class="mt-5 mb-5" />
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <div>
+      <input
+        id="result"
+        class="input"
+        :value="toolResult"
+        type="text"
+        readonly
+      >
+    </div>
+  </div>
+
+  <p class="mt-3">
+    <button @click="copyResult" class="btn">{{ toolData.btnName }}</button>
+  </p>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolData: {
+        btnName: 'Copy',
+      },
+      toolResult: `‎`,
+    };
+  },
+  methods: {
+    async copyResult() {
+      document.getElementById("result").select();
+      navigator.clipboard?.writeText(this.toolResult);
+      document.execCommand('copy');
+
+      this.toolData.btnName = 'Copied!';
+      setTimeout(() => this.toolData.btnName = 'Copy', 500);
+    },
+  },
+};
+</script>
\ No newline at end of file