Merge pull request #215

feat: replace text inputs with code editor in JSON tools

Author: iib0011

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

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

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={

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={

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={

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

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={