feat(new tool): JSON Editor

Fix #925, #469, #990

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as jsonEditor } from './json-editor';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -148,6 +149,7 @@ export const toolsByCategory: ToolCategory[] = [
       dockerRunToDockerComposeConverter,
       xmlFormatter,
       yamlViewer,
+      jsonEditor,
     ],
   },
   {

src/tools/json-editor/index.ts

@@ -0,0 +1,12 @@
+import { Braces } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JSON Editor',
+  path: '/json-editor',
+  description: 'Edit JSON content',
+  keywords: ['json', 'editor'],
+  component: () => import('./json-editor.vue'),
+  icon: Braces,
+  createdAt: new Date('2024-05-11'),
+});

src/tools/json-editor/json-editor-vue3.d.ts

@@ -0,0 +1,3 @@
+declare module 'json-editor-vue3'{
+    
+}

src/tools/json-editor/json-editor.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import JsonEditorVue from 'json-editor-vue3';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const jsonData = ref({ array: [1, 2, 3] });
+const jsonText = computed(() => withDefaultOnError(() => JSON.stringify(jsonData.value, null, 2), ''));
+</script>
+
+<template>
+  <div>
+    <JsonEditorVue
+      v-model="jsonData"
+      mode="text"
+    />
+
+    <n-divider />
+
+    <n-form-item label="Your edited JSON:">
+      <textarea-copyable :value="jsonText" language="json" />
+    </n-form-item>
+  </div>
+</template>