feat: add JsonCodeEditor component and integrate it into JsonGrid and JsonViewer

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 */}