feat: add json visualizer

package.json

@@ -35,9 +35,14 @@
     "prepare": "simple-git-hooks && npm run rebuild"
   },
   "dependencies": {
+    "@dagrejs/dagre": "^1.1.5",
     "@elysiajs/cors": "^1.2.0",
     "@elysiajs/node": "^1.2.5",
     "@elysiajs/swagger": "^1.2.2",
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.46.5",
+    "@vue-flow/minimap": "^1.5.4",
     "@vueuse/core": "^12.7.0",
     "better-sqlite3": "^12.4.1",
     "change-case": "^5.4.4",
@@ -88,6 +93,7 @@
     "@types/chroma-js": "^3.1.1",
     "@types/codemirror": "^5.60.15",
     "@types/crypto-js": "^4.2.2",
+    "@types/dagre": "^0.7.53",
     "@types/dom-to-image": "^2.6.7",
     "@types/fs-extra": "^11.0.4",
     "@types/js-yaml": "^4.0.9",

src/main/i18n/locales/cs_CZ/menu.json

@@ -52,6 +52,7 @@
     "format": "Formátovat",
     "previewCode": "Náhled kódu",
     "previewScreenshot": "Náhled snímku obrazovky",
+    "previewJson": "Náhled JSON",
     "fontSizeIncrease": "Zvětšit velikost písma",
     "fontSizeDecrease": "Zmenšit velikost písma",
     "fontSizeReset": "Obnovit velikost písma"

src/main/i18n/locales/de_DE/menu.json

@@ -52,6 +52,7 @@
     "format": "Formatieren",
     "previewCode": "Code-Vorschau",
     "previewScreenshot": "Screenshot-Vorschau",
+    "previewJson": "JSON-Vorschau",
     "fontSizeIncrease": "Schriftgröße erhöhen",
     "fontSizeDecrease": "Schriftgröße verringern",
     "fontSizeReset": "Schriftgröße zurücksetzen"

src/main/i18n/locales/el_GR/menu.json

@@ -52,6 +52,7 @@
     "format": "Μορφοποίηση",
     "previewCode": "Προεπισκόπηση Κώδικα",
     "previewScreenshot": "Προεπισκόπηση Screenshot",
+    "previewJson": "Προεπισκόπηση JSON",
     "fontSizeIncrease": "Αύξηση Μεγέθους Γραμματοσειράς",
     "fontSizeDecrease": "Μείωση Μεγέθους Γραμματοσειράς",
     "fontSizeReset": "Επαναφορά Μεγέθους Γραμματοσειράς"

src/main/i18n/locales/en_US/menu.json

@@ -52,6 +52,7 @@
     "format": "Format",
     "previewCode": "Preview Code",
     "previewScreenshot": "Preview Screenshot",
+    "previewJson": "Preview JSON",
     "fontSizeIncrease": "Font Size Increase",
     "fontSizeDecrease": "Font Size Decrease",
     "fontSizeReset": "Font Size Reset"

src/main/i18n/locales/es_ES/menu.json

@@ -52,6 +52,7 @@
     "format": "Formatear",
     "previewCode": "Vista Previa del Código",
     "previewScreenshot": "Vista Previa de Captura",
+    "previewJson": "Vista previa JSON",
     "fontSizeIncrease": "Aumentar Tamaño de Fuente",
     "fontSizeDecrease": "Disminuir Tamaño de Fuente",
     "fontSizeReset": "Restablecer Tamaño de Fuente"

src/main/i18n/locales/fa_IR/menu.json

@@ -52,6 +52,7 @@
     "format": "قالب‌بندی",
     "previewCode": "پیش‌نمایش کد",
     "previewScreenshot": "پیش‌نمایش تصویر",
+    "previewJson": "پیش‌نمایش JSON",
     "fontSizeIncrease": "افزایش اندازه فونت",
     "fontSizeDecrease": "کاهش اندازه فونت",
     "fontSizeReset": "بازنشانی اندازه فونت"

src/main/i18n/locales/fr_FR/menu.json

@@ -52,6 +52,7 @@
     "format": "Formater",
     "previewCode": "Aperçu du code",
     "previewScreenshot": "Aperçu de la capture d'écran",
+    "previewJson": "Aperçu JSON",
     "fontSizeIncrease": "Augmenter la taille de la police",
     "fontSizeDecrease": "Diminuer la taille de la police",
     "fontSizeReset": "Réinitialiser la taille de la police"

src/main/i18n/locales/ja_JP/menu.json

@@ -52,6 +52,7 @@
     "format": "フォーマット",
     "previewCode": "コードのプレビュー",
     "previewScreenshot": "スクリーンショットのプレビュー",
+    "previewJson": "JSON プレビュー",
     "fontSizeIncrease": "フォントサイズを大きく",
     "fontSizeDecrease": "フォントサイズを小さく",
     "fontSizeReset": "フォントサイズをリセット"

src/main/i18n/locales/pl_PL/menu.json

@@ -52,6 +52,7 @@
     "format": "Formatuj",
     "previewCode": "Podgląd kodu",
     "previewScreenshot": "Podgląd zrzutu ekranu",
+    "previewJson": "Podgląd JSON",
     "fontSizeIncrease": "Zwiększ rozmiar czcionki",
     "fontSizeDecrease": "Zmniejsz rozmiar czcionki",
     "fontSizeReset": "Resetuj rozmiar czcionki"

src/main/i18n/locales/pt_BR/menu.json

@@ -52,6 +52,7 @@
     "format": "Formatar",
     "previewCode": "Visualizar Código",
     "previewScreenshot": "Visualizar Screenshot",
+    "previewJson": "Prévia do JSON",
     "fontSizeIncrease": "Aumentar Tamanho da Fonte",
     "fontSizeDecrease": "Diminuir Tamanho da Fonte",
     "fontSizeReset": "Redefinir Tamanho da Fonte"

src/main/i18n/locales/ro_RO/menu.json

@@ -52,6 +52,7 @@
     "format": "Formatare",
     "previewCode": "Previzualizare Cod",
     "previewScreenshot": "Previzualizare Screenshot",
+    "previewJson": "Previzualizare JSON",
     "fontSizeIncrease": "Mărește Dimensiunea Fontului",
     "fontSizeDecrease": "Micșorează Dimensiunea Fontului",
     "fontSizeReset": "Resetează Dimensiunea Fontului"

src/main/i18n/locales/ru_RU/menu.json

@@ -52,6 +52,7 @@
     "format": "Форматировать",
     "previewCode": "Предпросмотр кода",
     "previewScreenshot": "Предпросмотр скриншота",
+    "previewJson": "Предпросмотр JSON",
     "fontSizeIncrease": "Увеличить размер шрифта",
     "fontSizeDecrease": "Уменьшить размер шрифта",
     "fontSizeReset": "Сбросить размер шрифта"

src/main/i18n/locales/tr_TR/menu.json

@@ -52,6 +52,7 @@
     "format": "Biçimlendir",
     "previewCode": "Kodu Önizle",
     "previewScreenshot": "Ekran Görüntüsünü Önizle",
+    "previewJson": "JSON Önizleme",
     "fontSizeIncrease": "Yazı Boyutunu Artır",
     "fontSizeDecrease": "Yazı Boyutunu Azalt",
     "fontSizeReset": "Yazı Boyutunu Sıfırla"

src/main/i18n/locales/uk_UA/menu.json

@@ -52,6 +52,7 @@
     "format": "Форматувати",
     "previewCode": "Попередній перегляд коду",
     "previewScreenshot": "Попередній перегляд знімка екрану",
+    "previewJson": "Попередній перегляд JSON",
     "fontSizeIncrease": "Збільшити розмір шрифту",
     "fontSizeDecrease": "Зменшити розмір шрифту",
     "fontSizeReset": "Скинути розмір шрифту"

src/main/i18n/locales/zh_CN/menu.json

@@ -52,6 +52,7 @@
     "format": "格式化",
     "previewCode": "预览代码",
     "previewScreenshot": "预览截图",
+    "previewJson": "预览 JSON",
     "fontSizeIncrease": "增大字体",
     "fontSizeDecrease": "减小字体",
     "fontSizeReset": "重置字体大小"

src/main/i18n/locales/zh_HK/menu.json

@@ -52,6 +52,7 @@
     "format": "格式化",
     "previewCode": "預覽程式碼",
     "previewScreenshot": "預覽截圖",
+    "previewJson": "預覽 JSON",
     "fontSizeIncrease": "增大字體",
     "fontSizeDecrease": "減小字體",
     "fontSizeReset": "重置字體大小"

src/main/i18n/locales/zh_TW/menu.json

@@ -52,6 +52,7 @@
     "format": "格式化",
     "previewCode": "預覽程式碼",
     "previewScreenshot": "預覽截圖",
+    "previewJson": "預覽 JSON",
     "fontSizeIncrease": "增大字體",
     "fontSizeDecrease": "減小字體",
     "fontSizeReset": "重置字體大小"

src/main/menu/main.ts

@@ -219,6 +219,11 @@ const editorMenuItems: MenuConfig[] = [
     click: () => send('main-menu:preview-code'),
     accelerator: 'Alt+CommandOrControl+P',
   },
+  {
+    label: i18n.t('menu:editor.previewJson'),
+    click: () => send('main-menu:preview-json'),
+    accelerator: 'Alt+CommandOrControl+J',
+  },
   {
     type: 'separator',
   },

src/main/types/ipc.ts

@@ -19,6 +19,7 @@ type MainMenuAction =
   | 'preview-markdown'
   | 'preview-mindmap'
   | 'preview-code'
+  | 'preview-json'
   | 'presentation-mode'
 
 type DBAction =

src/renderer/components/editor/Editor.vue

@@ -38,6 +38,7 @@ const {
   isShowCodeImage,
   isShowMarkdownPresentation,
   isFocusedSearch,
+  isShowJsonVisualizer,
 } = useApp()
 
 const { addToUpdateContentQueue } = useSnippetUpdate()
@@ -77,6 +78,7 @@ const isShowEditor = computed(() => {
     && !isShowMindmap.value
     && !isShowCodeImage.value
     && !isShowMarkdownPresentation.value
+    && !isShowJsonVisualizer.value
     && !isEmpty.value
     && selectedSnippet.value !== undefined
   )
@@ -88,6 +90,10 @@ watch(selectedSnippetContent, () => {
     isShowMindmap.value = false
   }
 
+  if (selectedSnippetContent.value?.language !== 'json') {
+    isShowJsonVisualizer.value = false
+  }
+
   if (!isAvailableToCodePreview.value) {
     isShowCodePreview.value = false
   }
@@ -243,6 +249,12 @@ async function init() {
       })
     },
   )
+
+  watch(searchQuery, () => {
+    nextTick(() => {
+      updateSearchOverlay()
+    })
+  })
 }
 
 function setValue(value: string, programmatic = true) {
@@ -395,12 +407,6 @@ function updateSearchOverlay() {
 
 onMounted(() => {
   init()
-
-  watch(searchQuery, () => {
-    nextTick(() => {
-      updateSearchOverlay()
-    })
-  })
 })
 </script>
 
@@ -433,6 +439,7 @@ onMounted(() => {
     <EditorFooter v-if="isShowEditor" />
     <EditorMindmap v-if="isShowMindmap" />
     <EditorCodeImage v-if="isShowCodeImage" />
+    <EditorJsonVisualizer v-if="isShowJsonVisualizer" />
     <div
       v-if="
         isEmpty