From 4cec13da6321a12803210507650e4668869ed8d0 Mon Sep 17 00:00:00 2001
From: Bhavesh Kshatriya <bhavesh.kshatriya@gmail.com>
Date: Sat, 19 Jul 2025 18:56:49 +0530
Subject: [PATCH] feat: replace text inputs with code editor in JSON tools

---
 src/pages/tools/json/escape-json/index.tsx  | 9 +++++++--
 src/pages/tools/json/json-to-xml/index.tsx  | 9 +++++++--
 src/pages/tools/json/minify/index.tsx       | 5 +++--
 src/pages/tools/json/prettify/index.tsx     | 5 +++--
 src/pages/tools/json/stringify/index.tsx    | 5 +++--
 src/pages/tools/json/tsv-to-json/index.tsx  | 9 +++++++--
 src/pages/tools/json/validateJson/index.tsx | 5 +++--
 7 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/pages/tools/json/escape-json/index.tsx b/src/pages/tools/json/escape-json/index.tsx
index 17173ae..41c5d6e 100644
--- a/src/pages/tools/json/escape-json/index.tsx
+++ b/src/pages/tools/json/escape-json/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import ToolContent from '@components/ToolContent';
-import ToolTextInput from '@components/input/ToolTextInput';
+import ToolCodeInput from '@components/input/ToolCodeInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { escapeJson } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
@@ -88,7 +88,12 @@ export default function EscapeJsonTool({
     <ToolContent
       title={title}
       inputComponent={
-        <ToolTextInput title="Input JSON" value={input} onChange={setInput} />
+        <ToolCodeInput
+          title="Input JSON"
+          value={input}
+          onChange={setInput}
+          language="json"
+        />
       }
       resultComponent={
         <ToolTextResult
diff --git a/src/pages/tools/json/json-to-xml/index.tsx b/src/pages/tools/json/json-to-xml/index.tsx
index 11977a4..5c20ee2 100644
--- a/src/pages/tools/json/json-to-xml/index.tsx
+++ b/src/pages/tools/json/json-to-xml/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import ToolContent from '@components/ToolContent';
-import ToolTextInput from '@components/input/ToolTextInput';
+import ToolCodeInput from '@components/input/ToolCodeInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { convertJsonToXml } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
@@ -84,7 +84,12 @@ export default function JsonToXml({ title }: ToolComponentProps) {
       compute={compute}
       exampleCards={exampleCards}
       inputComponent={
-        <ToolTextInput title="Input Json" value={input} onChange={setInput} />
+        <ToolCodeInput
+          title="Input Json"
+          value={input}
+          onChange={setInput}
+          language="json"
+        />
       }
       resultComponent={
         <ToolTextResult title="Output XML" value={result} extension={'xml'} />
diff --git a/src/pages/tools/json/minify/index.tsx b/src/pages/tools/json/minify/index.tsx
index 69c0646..379d0f3 100644
--- a/src/pages/tools/json/minify/index.tsx
+++ b/src/pages/tools/json/minify/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import ToolContent from '@components/ToolContent';
-import ToolTextInput from '@components/input/ToolTextInput';
+import ToolCodeInput from '@components/input/ToolCodeInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { minifyJson } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
@@ -60,10 +60,11 @@ export default function MinifyJson({ title }: ToolComponentProps) {
     <ToolContent
       title={title}
       inputComponent={
-        <ToolTextInput
+        <ToolCodeInput
           title={t('minify.inputTitle')}
           value={input}
           onChange={setInput}
+          language="json"
         />
       }
       resultComponent={
diff --git a/src/pages/tools/json/prettify/index.tsx b/src/pages/tools/json/prettify/index.tsx
index c24b825..0d43d27 100644
--- a/src/pages/tools/json/prettify/index.tsx
+++ b/src/pages/tools/json/prettify/index.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@mui/material';
 import React, { useRef, useState } from 'react';
-import ToolTextInput from '@components/input/ToolTextInput';
+import ToolCodeInput from '@components/input/ToolCodeInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { beautifyJson } from './service';
 import ToolInfo from '@components/ToolInfo';
@@ -130,10 +130,11 @@ export default function PrettifyJson({ title }: ToolComponentProps) {
       title={title}
       input={input}
       inputComponent={
-        <ToolTextInput
+        <ToolCodeInput
           title={t('prettify.inputTitle')}
           value={input}
           onChange={setInput}
+          language="json"
         />
       }
       resultComponent={
diff --git a/src/pages/tools/json/stringify/index.tsx b/src/pages/tools/json/stringify/index.tsx
index 653fb36..e8ba3bf 100644
--- a/src/pages/tools/json/stringify/index.tsx
+++ b/src/pages/tools/json/stringify/index.tsx
@@ -1,7 +1,7 @@
 import { Box } from '@mui/material';
 import React, { useState } from 'react';
 import ToolContent from '@components/ToolContent';
-import ToolTextInput from '@components/input/ToolTextInput';
+import ToolCodeInput from '@components/input/ToolCodeInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { stringifyJson } from './service';
 import { ToolComponentProps } from '@tools/defineTool';
@@ -103,10 +103,11 @@ export default function StringifyJson({ title }: ToolComponentProps) {
       compute={compute}
       exampleCards={exampleCards}
       inputComponent={
-        <ToolTextInput
+        <ToolCodeInput
           title="JavaScript Object/Array"
           value={input}
           onChange={setInput}
+          language="json"
         />
       }
       resultComponent={
diff --git a/src/pages/tools/json/tsv-to-json/index.tsx b/src/pages/tools/json/tsv-to-json/index.tsx
index b7435a8..8b290d7 100644
--- a/src/pages/tools/json/tsv-to-json/index.tsx
+++ b/src/pages/tools/json/tsv-to-json/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import ToolContent from '@components/ToolContent';
-import ToolTextInput from '@components/input/ToolTextInput';
+import ToolCodeInput from '@components/input/ToolCodeInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { convertTsvToJson } from './service';
 import { CardExampleType } from '@components/examples/ToolExamples';
@@ -216,7 +216,12 @@ export default function TsvToJson({
       exampleCards={exampleCards}
       getGroups={getGroups}
       inputComponent={
-        <ToolTextInput title="Input TSV" value={input} onChange={setInput} />
+        <ToolCodeInput
+          title="Input TSV"
+          value={input}
+          onChange={setInput}
+          language="tsv"
+        />
       }
       resultComponent={
         <ToolTextResult title="Output JSON" value={result} extension={'json'} />
diff --git a/src/pages/tools/json/validateJson/index.tsx b/src/pages/tools/json/validateJson/index.tsx
index 7642b59..ca8ec1f 100644
--- a/src/pages/tools/json/validateJson/index.tsx
+++ b/src/pages/tools/json/validateJson/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ToolTextInput from '@components/input/ToolTextInput';
+import ToolCodeInput from '@components/input/ToolCodeInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { validateJson } from './service';
@@ -65,10 +65,11 @@ export default function ValidateJson({ title }: ToolComponentProps) {
     <ToolContent
       title={title}
       inputComponent={
-        <ToolTextInput
+        <ToolCodeInput
           title={t('validateJson.inputTitle')}
           value={input}
           onChange={setInput}
+          language="json"
         />
       }
       resultComponent={