Added syntax highlighter and formatting options

Author: shreyakurian02

constants/theme.js

@@ -0,0 +1,21 @@
+import { tags as t } from "@lezer/highlight";
+
+export const CODE_EDITOR_THEME = {
+  theme: "dark",
+  settings: {
+    background: "#282c34",
+    foreground: "#282c34;",
+    caret: "#282c34",
+    gutters: "#282c34",
+    selection: "black",
+    lineHighlight: "#6699ff0b",
+    gutterBackground: "#282c34",
+    gutterForeground: "#7d8799",
+  },
+  styles: [
+    { tag: t.brace, color: "red" },
+    { tag: t.separator, color: "orange" },
+    { tag: t.bool, color: "blue" },
+    { tag: t.string, color: "#98c379" },
+  ],
+};

package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.1.2",
+    "@lezer/highlight": "^1.1.3",
+    "@uiw/codemirror-themes": "^4.19.4",
     "@uiw/react-codemirror": "^4.19.4",
     "classnames": "^2.3.2",
     "eslint": "8.29.0",

pages/_app.js

@@ -1,5 +1,4 @@
 import "../styles/application.scss";
-// import 'codemirror/lib/codemirror.css'
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />;

pages/index.js

@@ -1,18 +1,26 @@
-import {useState, useEffect, useRef} from "react";
-import CodeMirror from '@uiw/react-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
+import { useState } from "react";
+import CodeMirror from "@uiw/react-codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+import { createTheme } from "@uiw/codemirror-themes";
+import { EditorView } from "@codemirror/view";
 
 import Head from "next/head";
 import Button from "../components/Button";
-import Textarea from "../components/Textarea";
 
-export default function Home() {
+import { CODE_EDITOR_THEME } from "../constants/theme";
 
-  const [json, setJson] = useState();
+export default function Home() {
+  const [inputString, setInputString] = useState("");
+  const [outputString, setOutputString] = useState("");
 
   const handleFormat = () => {
-    console.log(JSON.stringify(json, null, 4))
-  }
+    setOutputString(JSON.stringify(JSON.parse(inputString), null, 2));
+  };
+
+  const handleClear = () => {
+    setInputString("");
+    setOutputString("");
+  };
 
   return (
     <div className="h-screen flex-col justify-between bg-zinc-900 p-5">
@@ -26,32 +34,27 @@ export default function Home() {
         <p className="text-2xl text-center">JSON STYLE</p>
         <div className="space-y-3 flex-col">
           <div className="flex space-x-3 h-90">
-            {/* <Textarea
-              className="w-1/2"
-              rows={22}
-              label="JSON String"
-              onChange={(e) => setJson(JSON.parse(e.target.value))}
-            /> */}
-             <CodeMirror
-              className="w-1/2 mt-7 overflow-x-auto h-full"
-              value={JSON.stringify(json)}
+            <CodeMirror
+              autoFocus
               height="548px"
               theme="dark"
+              value={inputString}
               extensions={[javascript({ jsx: true })]}
-              onChange={(e) => setJson(JSON.parse(e))}
+              onChange={(e) => setInputString(e)}
+              className="w-1/2 mt-7 h-full"
             />
             <CodeMirror
-              className="w-1/2 mt-7 overflow-auto h-full"
-              value={JSON.stringify(json, null, 2)}
               height="548px"
-              theme="dark"
+              theme={createTheme(CODE_EDITOR_THEME)}
               editable={false}
-              extensions={[javascript({ jsx: true })]}
+              value={outputString}
+              extensions={[javascript({ jsx: true }), EditorView.lineWrapping]}
+              className="w-1/2 mt-7 overflow-auto h-full"
             />
           </div>
           <div className="flex bg-zinc-800 space-x-3 px-1 py-3 rounded">
             <Button className="ml-1" label="Format" onClick={handleFormat} />
-            <Button className="ml-1" label="Reset" />
+            <Button className="ml-1" label="Clear" onClick={handleClear} />
           </div>
         </div>
         {/* <Footer /> */}

yarn.lock

@@ -162,7 +162,7 @@
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.2.tgz#8fb9b86bdaa2ece57e7d59e5ffbcb37d71815087"
   integrity sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==
 
-"@lezer/highlight@^1.0.0":
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.3.tgz#bf5a36c2ee227f526d74997ac91f7777e29bd25d"
   integrity sha512-3vLKLPThO4td43lYRBygmMY18JN3CPh9w+XS2j8WC30vR4yZeFG4z1iFe4jXE43NtGqe//zHW5q8ENLlHvz9gw==
@@ -421,6 +421,15 @@
     "@codemirror/state" "^6.0.0"
     "@codemirror/view" "^6.0.0"
 
+"@uiw/codemirror-themes@^4.19.4":
+  version "4.19.4"
+  resolved "https://registry.yarnpkg.com/@uiw/codemirror-themes/-/codemirror-themes-4.19.4.tgz#78a443d98ec8261134349163efd01e939e4a3f22"
+  integrity sha512-n2k1GPH9oTeeXY/Xbu5KQiw2rvrM5wkvhFDNRvoX9N/2e3+/lmyloZZ1C1Pk/OpDfOH2hWns8jiH7BKfn+I82A==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+
 "@uiw/react-codemirror@^4.19.4":
   version "4.19.4"
   resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.19.4.tgz#0e5f2534705c24d166b17780496e2c96bf0991d9"