Merge bf9e07a0a8 into e876d03608

package.json

@@ -80,6 +80,7 @@
     "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
     "qrcode": "^1.5.1",
+    "slashes": "^3.0.12",
     "sql-formatter": "^13.0.0",
     "ua-parser-js": "^1.0.35",
     "ulid": "^2.3.0",

pnpm-lock.yaml

@@ -140,6 +140,9 @@ dependencies:
   qrcode:
     specifier: ^1.5.1
     version: 1.5.1
+  slashes:
+    specifier: ^3.0.12
+    version: 3.0.12
   sql-formatter:
     specifier: ^13.0.0
     version: 13.0.0
@@ -3351,7 +3354,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.7.2(vue@3.3.4)
+      '@vueuse/shared': 10.9.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3993,10 +3996,10 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.7.2(vue@3.3.4):
+  /@vueuse/shared@10.9.0(vue@3.3.4):
-    resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
+    resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.7(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -8108,6 +8111,10 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /slashes@3.0.12:
+    resolution: {integrity: sha512-Q9VME8WyGkc7pJf6QEkj3wE+2CnvZMI+XJhwdTPR8Z/kWQRXi7boAWLDibRPyHRTUTPx5FaU7MsyrjI3yLB4HA==}
+    dev: false
+
   /snake-case@2.1.0:
     resolution: {integrity: sha512-FMR5YoPFwOLuh4rRz92dywJjyKYZNLpMn1R5ujVpIYkbA9p01fq8RMg0FkO4M+Yobt4MjHeLTJVm5xFFBHSV2Q==}
     dependencies:
@@ -9151,8 +9158,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
+  /vue-demi@0.14.7(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true

src/tools/index.ts

@@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as jsonEscaper } from './json-escaper';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -128,6 +129,7 @@ export const toolsByCategory: ToolCategory[] = [
       httpStatusCodes,
       jsonDiff,
       safelinkDecoder,
+      jsonEscaper,
     ],
   },
   {

src/tools/json-escaper/index.ts

@@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Json Escaper/Unescaper',
+  path: '/json-escaper',
+  description: 'Escape and unescape JSON string',
+  keywords: ['json', 'string', 'escape', 'unescape'],
+  component: () => import('./json-escaper.vue'),
+  icon: Braces,
+  createdAt: new Date('2024-03-09'),
+});

src/tools/json-escaper/json-escaper.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { addSlashes, removeSlashes } from 'slashes';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const unescapedInput = ref('');
+const escapedOutput = computed(
+  () => {
+    try {
+      return addSlashes(unescapedInput.value);
+    }
+    catch (e: any) {
+      return e.toString();
+    }
+  },
+);
+
+const escapedInput = ref('');
+const unescapedOutput = computed(
+  () => {
+    try {
+      return removeSlashes(escapedInput.value);
+    }
+    catch (e: any) {
+      return e.toString();
+    }
+  },
+);
+</script>
+
+<template>
+  <div max-w-600>
+    <c-card title="Escape JSON string">
+      <c-input-text
+        v-model:value="unescapedInput"
+        placeholder="Put your string to escape..."
+        label="String to escape"
+        raw-text
+        multiline
+        rows="5"
+        mb-5
+      />
+
+      <n-divider />
+
+      <TextareaCopyable
+        label="Escaped string"
+        :value="escapedOutput"
+        multiline
+        readonly
+        rows="5"
+        mb-5
+      />
+    </c-card>
+
+    <c-card title="Unescape JSON string" mt-5>
+      <c-input-text
+        v-model:value="escapedInput"
+        placeholder="Put your string to unescape..."
+        label="String to unescape"
+        raw-text
+        multiline
+        rows="5"
+        mb-5
+      />
+
+      <n-divider />
+
+      <TextareaCopyable
+        label="Unescaped string"
+        :value="unescapedOutput"
+        multiline
+        readonly
+        rows="5"
+        mb-5
+      />
+    </c-card>
+  </div>
+</template>