feat(devtools): add JSON Diff tool (#722)

* feat(devtools): add json diff navigation and assets

* feat(devtools): add json diff state management

* feat(devtools): add json diff interface

* chore(i18n): add russian json diff locale

Author: antonreshetov

package.json

@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/language": "^6.12.2",
     "@codemirror/language-data": "^6.5.2",
@@ -86,6 +87,7 @@
     "i18next-fs-backend": "^2.6.0",
     "interactjs": "^1.10.27",
     "js-yaml": "^4.1.0",
+    "jsondiffpatch": "^0.7.3",
     "ky": "^1.7.5",
     "lucide-vue-next": "^0.476.0",
     "markmap-lib": "^0.18.11",

pnpm-lock.yaml

@@ -190,6 +190,25 @@
       "description": "Convert text to a URL-friendly slug"
     }
   },
+  "compare": {
+    "label": "Compare",
+    "jsonDiff": {
+      "label": "JSON Diff",
+      "description": "Compare and visualize differences between two JSON documents",
+      "original": "Original",
+      "modified": "Modified",
+      "filters": {
+        "added": "Added",
+        "removed": "Removed",
+        "modified": "Modified"
+      },
+      "empty": "Paste JSON into both fields to see the diff",
+      "errors": {
+        "invalidJson": "Invalid JSON",
+        "diffFailed": "Failed to compute diff"
+      }
+    }
+  },
   "form": {
     "input": "Input",
     "output": "Output",

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

@@ -190,6 +190,25 @@
       "description": "Преобразование текста в URL-совместимый slug"
     }
   },
+  "compare": {
+    "label": "Сравнение",
+    "jsonDiff": {
+      "label": "JSON Diff",
+      "description": "Сравнение и визуализация различий между двумя JSON-документами",
+      "original": "Исходный",
+      "modified": "Изменённый",
+      "filters": {
+        "added": "Добавлено",
+        "removed": "Удалено",
+        "modified": "Изменено"
+      },
+      "empty": "Вставьте JSON в оба поля, чтобы увидеть различия",
+      "errors": {
+        "invalidJson": "Невалидный JSON",
+        "diffFailed": "Не удалось вычислить diff"
+      }
+    }
+  },
   "form": {
     "input": "Ввод",
     "output": "Вывод",

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

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { getJsonDiffFontVariables } from '@/components/devtools/compare/fontVariables'
+import { Checkbox } from '@/components/ui/shadcn/checkbox'
+import { useEditor, useJsonDiff } from '@/composables'
+import { i18n } from '@/electron'
+
+const { settings: editorSettings } = useEditor()
+const {
+  leftText,
+  rightText,
+  leftError,
+  rightError,
+  viewerError,
+  filters,
+  nodes,
+  isReady,
+  showEmptyState,
+  scheduleLeftFormat,
+  scheduleRightFormat,
+  formatLeftOnBlur,
+  formatRightOnBlur,
+  toggleExpanded,
+  isExpanded,
+} = useJsonDiff()
+
+const title = computed(() => i18n.t('devtools:compare.jsonDiff.label'))
+const description = computed(() =>
+  i18n.t('devtools:compare.jsonDiff.description'),
+)
+const fontVariables = computed(() => getJsonDiffFontVariables(editorSettings))
+const leftTargetScrollTop = ref(0)
+const leftTargetScrollLeft = ref(0)
+const rightTargetScrollTop = ref(0)
+const rightTargetScrollLeft = ref(0)
+
+const filterButtons = computed(() => {
+  return [
+    {
+      key: 'added' as const,
+      label: i18n.t('devtools:compare.jsonDiff.filters.added'),
+    },
+    {
+      key: 'removed' as const,
+      label: i18n.t('devtools:compare.jsonDiff.filters.removed'),
+    },
+    {
+      key: 'modified' as const,
+      label: i18n.t('devtools:compare.jsonDiff.filters.modified'),
+    },
+  ]
+})
+
+function setFilter(
+  key: 'added' | 'removed' | 'modified',
+  value: boolean | 'indeterminate',
+) {
+  filters.value[key] = value === true
+}
+
+function localizedError(errorKey: string) {
+  if (!errorKey)
+    return ''
+
+  return i18n.t(`devtools:compare.jsonDiff.errors.${errorKey}`)
+}
+
+function syncLeftEditorScroll(position: { top: number, left: number }) {
+  rightTargetScrollTop.value = position.top
+  rightTargetScrollLeft.value = position.left
+}
+
+function syncRightEditorScroll(position: { top: number, left: number }) {
+  leftTargetScrollTop.value = position.top
+  leftTargetScrollLeft.value = position.left
+}
+</script>
+
+<template>
+  <div
+    class="flex h-full min-h-0 flex-col gap-6"
+    :style="fontVariables"
+  >
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+
+    <div class="flex shrink-0 flex-wrap items-center gap-4">
+      <label
+        v-for="button in filterButtons"
+        :key="button.key"
+        class="flex cursor-pointer items-center gap-2"
+      >
+        <Checkbox
+          :model-value="filters[button.key]"
+          @update:model-value="setFilter(button.key, $event)"
+        />
+        <UiText as="span">
+          {{ button.label }}
+        </UiText>
+      </label>
+    </div>
+
+    <div class="grid shrink-0 gap-3 md:grid-cols-2">
+      <div class="space-y-2">
+        <UiHeading
+          :title="i18n.t('devtools:compare.jsonDiff.original')"
+          :level="3"
+        />
+        <DevtoolsCompareJsonDiffInput
+          v-model="leftText"
+          :placeholder="i18n.t('devtools:form.placeholder.text')"
+          :error="localizedError(leftError)"
+          :scroll-top="leftTargetScrollTop"
+          :scroll-left="leftTargetScrollLeft"
+          @paste="scheduleLeftFormat"
+          @blur="formatLeftOnBlur"
+          @scroll="syncLeftEditorScroll"
+        />
+      </div>
+      <div class="space-y-2">
+        <UiHeading
+          :title="i18n.t('devtools:compare.jsonDiff.modified')"
+          :level="3"
+        />
+        <DevtoolsCompareJsonDiffInput
+          v-model="rightText"
+          :placeholder="i18n.t('devtools:form.placeholder.text')"
+          :error="localizedError(rightError)"
+          :scroll-top="rightTargetScrollTop"
+          :scroll-left="rightTargetScrollLeft"
+          @paste="scheduleRightFormat"
+          @blur="formatRightOnBlur"
+          @scroll="syncRightEditorScroll"
+        />
+      </div>
+    </div>
+
+    <UiText
+      v-if="viewerError"
+      as="div"
+      class="text-destructive"
+    >
+      {{ localizedError(viewerError) }}
+    </UiText>
+
+    <DevtoolsCompareJsonDiffViewer
+      v-else-if="isReady"
+      class="min-h-0 flex-1"
+      :nodes="nodes"
+      :is-expanded="isExpanded"
+      @toggle="toggleExpanded"
+    />
+
+    <UiText
+      v-else-if="showEmptyState"
+      as="div"
+      muted
+      class="flex flex-1 items-center justify-center py-8 text-center"
+    >
+      {{ i18n.t("devtools:compare.jsonDiff.empty") }}
+    </UiText>
+  </div>
+</template>