feat(new-tool): json viewer

package-lock.json

@@ -20,6 +20,7 @@
         "cronstrue": "^2.2.0",
         "crypto-js": "^4.1.1",
         "date-fns": "^2.28.0",
+        "highlight.js": "^11.5.1",
         "lodash": "^4.17.21",
         "naive-ui": "^2.28.0",
         "pinia": "^2.0.11",

package.json

@@ -25,6 +25,7 @@
     "cronstrue": "^2.2.0",
     "crypto-js": "^4.1.1",
     "date-fns": "^2.28.0",
+    "highlight.js": "^11.5.1",
     "lodash": "^4.17.21",
     "naive-ui": "^2.28.0",
     "pinia": "^2.0.11",

src/plugins/naive.plugin.ts

@@ -50,9 +50,11 @@ import {
   NImage,
   NScrollbar,
   NGradientText,
+  NCode,
 } from 'naive-ui';
 
 const components = [
+  NCode,
   NGradientText,
   NScrollbar,
   NImage,

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './Tool';
 
+import { tool as jsonViewer } from './json-viewer';
 import { tool as htmlEntities } from './html-entities';
 import { tool as urlParser } from './url-parser';
 import { tool as deviceInformation } from './device-information';
@@ -50,7 +51,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Development',
     icon: LockOpen,
-    components: [gitMemo, randomPortGenerator, crontabGenerator],
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer],
   },
   {
     name: 'Text',

src/tools/json-viewer/index.ts

@@ -0,0 +1,11 @@
+import { Braces } from '@vicons/tabler';
+import type { ITool } from './../Tool';
+
+export const tool: ITool = {
+  name: 'JSON viewer',
+  path: '/json-viewer',
+  description: 'Prettify JSON string to a human friendly readable format.',
+  keywords: ['json', 'viewer', 'prettify', 'format'],
+  component: () => import('./json-viewer.vue'),
+  icon: Braces,
+};

src/tools/json-viewer/json-viewer.vue

@@ -0,0 +1,53 @@
+<template>
+  <n-card>
+    <n-form-item
+      label="Your raw json:"
+      :feedback="rawJsonValidation.message"
+      :validation-status="rawJsonValidation.status"
+    >
+      <n-input v-model:value="rawJson" class="json-input" type="textarea" placeholder="Paste your raw json here..." />
+    </n-form-item>
+  </n-card>
+
+  <n-card v-if="cleanJson.length > 0">
+    <n-scrollbar :x-scrollable="true">
+      <n-config-provider :hljs="hljs">
+        <n-code :code="cleanJson" language="json" />
+      </n-config-provider>
+    </n-scrollbar>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import hljs from 'highlight.js/lib/core';
+import json from 'highlight.js/lib/languages/json';
+import { useValidation } from '@/composable/validation';
+
+hljs.registerLanguage('json', json);
+
+const rawJson = ref('');
+const cleanJson = computed(() => {
+  try {
+    return JSON.stringify(JSON.parse(rawJson.value), null, 3);
+  } catch (_) {
+    return '';
+  }
+});
+
+const rawJsonValidation = useValidation({
+  source: rawJson,
+  rules: [
+    {
+      validator: (v) => JSON.parse(v),
+      message: 'Invalid json string',
+    },
+  ],
+});
+</script>
+
+<style lang="less" scoped>
+.json-input ::v-deep(.n-input-wrapper) {
+  resize: both !important;
+}
+</style>