Merge branch 'feat/json-escape' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -266,6 +266,7 @@
     "potrace": "^2.1.8",
     "qrcode": "^1.5.1",
     "rtf-stream-parser": "^3.8.0",
+    "slashes": "^3.0.12",
     "sql-formatter": "^13.0.0",
     "sshpk": "^1.18.0",
     "turndown": "^7.1.2",

pnpm-lock.yaml

@@ -118,6 +118,7 @@ import { tool as fileType } from './file-type';
 import { tool as htmlCleaner } from './html-cleaner';
 import { tool as imageToAsciiArt } from './image-to-ascii-art';
 import { tool as ipv6SubnetCalculator } from './ipv6-subnet-calculator';
+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';
@@ -335,6 +336,7 @@ export const toolsByCategory: ToolCategory[] = [
       phpArrayToJson,
       torrentToMagnet,
       unicodeSearch,
+      jsonEscaper,
     ],
   },
   {

src/tools/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/index.ts

@@ -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>