Add copy invisible character tool

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

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",

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>