From 058c16b99f9d189647232b89ee27decf21d79355 Mon Sep 17 00:00:00 2001
From: zihluwang <real@zihluwang.me>
Date: Tue, 24 Feb 2026 09:52:34 +0800
Subject: [PATCH] feat: add JsonCodeEditor component and integrate it into
 JsonGrid and JsonViewer

---
 .vscode/settings.json                     |  5 ++
 src/components/json-code-editor/index.tsx | 75 +++++++++++++++++++++++
 src/page/json-grid/index.tsx              |  8 +--
 src/page/json-viewer/index.tsx            |  8 +--
 4 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 src/components/json-code-editor/index.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..f60bf45
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "chat.tools.terminal.autoApprove": {
+        "pnpm": true
+    }
+}
\ No newline at end of file
diff --git a/src/components/json-code-editor/index.tsx b/src/components/json-code-editor/index.tsx
new file mode 100644
index 0000000..1f0c1e8
--- /dev/null
+++ b/src/components/json-code-editor/index.tsx
@@ -0,0 +1,75 @@
+import { useMemo, useRef } from "react"
+
+type JsonCodeEditorProps = {
+  value: string
+  onChange: (value: string) => void
+}
+
+const tokenRegex = /"(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"\s*:?|\btrue\b|\bfalse\b|\bnull\b|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g
+
+function escapeHtml(input: string): string {
+  return input
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+}
+
+function getTokenClass(token: string): string {
+  if (token.startsWith('"')) {
+    return token.endsWith(":") ? "text-indigo-600" : "text-emerald-600"
+  }
+  if (token === "true" || token === "false") {
+    return "text-violet-600"
+  }
+  if (token === "null") {
+    return "text-slate-500 italic"
+  }
+  return "text-amber-600"
+}
+
+function highlightJson(input: string): string {
+  let result = ""
+  let lastIndex = 0
+
+  for (const match of input.matchAll(tokenRegex)) {
+    const token = match[0]
+    const index = match.index ?? 0
+
+    result += escapeHtml(input.slice(lastIndex, index))
+    result += `<span class="${getTokenClass(token)}">${escapeHtml(token)}</span>`
+    lastIndex = index + token.length
+  }
+
+  result += escapeHtml(input.slice(lastIndex))
+  return result || " "
+}
+
+export default function JsonCodeEditor({ value, onChange }: JsonCodeEditorProps) {
+  const highlighted = useMemo(() => highlightJson(value), [value])
+  const preRef = useRef<HTMLPreElement>(null)
+
+  const syncScroll = (event: React.UIEvent<HTMLTextAreaElement>) => {
+    if (!preRef.current) return
+    preRef.current.scrollTop = event.currentTarget.scrollTop
+    preRef.current.scrollLeft = event.currentTarget.scrollLeft
+  }
+
+  return (
+    <div className="relative flex-1 min-h-0">
+      <pre
+        ref={preRef}
+        aria-hidden
+        className="absolute inset-0 m-0 p-4 font-mono text-sm leading-6 overflow-auto whitespace-pre-wrap wrap-break-word"
+      >
+        <code dangerouslySetInnerHTML={{ __html: highlighted }} />
+      </pre>
+      <textarea
+        className="absolute inset-0 w-full h-full p-4 font-mono text-sm leading-6 resize-none overflow-auto bg-transparent text-transparent caret-slate-900 outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onScroll={syncScroll}
+        spellCheck={false}
+      />
+    </div>
+  )
+}
diff --git a/src/page/json-grid/index.tsx b/src/page/json-grid/index.tsx
index bbf7999..a9351c2 100644
--- a/src/page/json-grid/index.tsx
+++ b/src/page/json-grid/index.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
+import JsonCodeEditor from "@/components/json-code-editor"
 
 type RowRecord = Record<string, unknown>
 
@@ -84,12 +85,7 @@ export default function JsonGrid() {
             {t("jsonGrid.jsonInput")}
           </span>
         </div>
-        <textarea
-          className="flex-1 w-full p-4 font-mono text-sm outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all resize-none overflow-auto"
-          value={jsonInput}
-          onChange={(e) => setJsonInput(e.target.value)}
-          spellCheck={false}
-        />
+        <JsonCodeEditor value={jsonInput} onChange={setJsonInput} />
       </div>
 
       <div className="w-[65%] bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden flex flex-col min-h-0">
diff --git a/src/page/json-viewer/index.tsx b/src/page/json-viewer/index.tsx
index f2d275a..4b879e2 100644
--- a/src/page/json-viewer/index.tsx
+++ b/src/page/json-viewer/index.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
 import jp from "jsonpath"
 import JsonTreeNode from "@/components/json-tree-node"
+import JsonCodeEditor from "@/components/json-code-editor"
 
 /**
  * JSON Viewer page component that displays the JSON visualisation tool in DevLab.
@@ -83,12 +84,7 @@ export default function JsonViewer() {
               {t("jsonViewer.jsonSource")}
             </span>
           </div>
-          <textarea
-            className="flex-1 w-full p-4 font-mono text-sm outline-none focus:ring-2 focus:ring-indigo-500/20 transition-all resize-none overflow-auto"
-            value={jsonInput}
-            onChange={(e) => setJsonInput(e.target.value)}
-            spellCheck={false}
-          />
+          <JsonCodeEditor value={jsonInput} onChange={setJsonInput} />
         </div>
 
         {/* JSONPath Expression - fixed height */}