From 2757157d653bf64361cc6e55f570bd4b3e3f4d30 Mon Sep 17 00:00:00 2001
From: Pavan YDG <113893382+pavanydg@users.noreply.github.com>
Date: Sat, 21 Dec 2024 22:45:27 +0530
Subject: [PATCH 1/2] feat: prettify code in code editor (#116)

* feat: prettify code in code editor

* refactor: move tryFormatting to separate file

* refactor: format tryFormattingCode function parameters for readability

* refactor: remove unused useCallback import in CodeEditor component

* refactor: remove unused useMonaco import in CodeEditor component

---------

Co-authored-by: JeelRajodiya <jeelrajodiyajeel@gmail.com>
---
 app/components/CodeEditor/CodeEditor.tsx | 27 ++++++++++++++++--------
 lib/client-functions.ts                  | 15 +++++++++++++
 2 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/app/components/CodeEditor/CodeEditor.tsx b/app/components/CodeEditor/CodeEditor.tsx
index 5e94057..5118db2 100644
--- a/app/components/CodeEditor/CodeEditor.tsx
+++ b/app/components/CodeEditor/CodeEditor.tsx
@@ -3,13 +3,13 @@
 import styles from "./CodeEditor.module.css";
 import ctx from "classnames";
 import { GeistMono } from "geist/font/mono";
-import Editor, { useMonaco } from "@monaco-editor/react";
+import Editor from "@monaco-editor/react";
 import { Flex, useColorMode } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import MyBtn from "../MyBtn";
 import { CodeFile, OutputResult } from "@/lib/types";
 import { OutputReducerAction } from "@/lib/reducers";
-import { validateCode } from "@/lib/client-functions";
+import { tryFormattingCode, validateCode } from "@/lib/client-functions";
 import FiChevronRight from "@/app/styles/icons/HiChevronRightGreen";
 import { useRouter } from "next/navigation";
 import { useUserSolutionStore, useEditorStore } from "@/lib/stores";
@@ -39,6 +39,7 @@ export default function CodeEditor({
   const router = useRouter();
   const editorStore = useEditorStore();
   const userSolutionStore = useUserSolutionStore();
+  const editorRef = useRef<any>(null);
 
   useEffect(() => {
     if (monaco) {
@@ -55,12 +56,12 @@ export default function CodeEditor({
   }, [monaco, colorMode]);
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      // event.preventDefault();
       if (event.key == "Enter" && event.shiftKey) {
         sendGAEvent("event", "buttonClicked", {
           value: "Validate (through shortcut)",
         });
-        event.preventDefault(); // Prevent default behavior
+        event.preventDefault();
+        tryFormattingCode(editorRef, setCodeString);
         validateCode(
           codeString,
           codeFile,
@@ -112,9 +113,16 @@ export default function CodeEditor({
           value={codeString}
           height={"100%"}
           onChange={(codeString) => setCodeString(codeString ?? "")}
-          options={{ minimap: { enabled: false }, fontSize: 14 }}
+          options={{
+            minimap: { enabled: false },
+
+            fontSize: 14,
+            formatOnPaste: true,
+            formatOnType: true,
+          }}
           onMount={(editor, monaco) => {
             setMonaco(monaco);
+            editorRef.current = editor;
             editorStore.setEditor(editor);
             editorStore.setMonaco(monaco);
           }}
@@ -123,15 +131,16 @@ export default function CodeEditor({
       <div className={styles.buttonsWrapper}>
         <Flex dir="row" gap={"8px"} alignItems={"end"}>
           <MyBtn
-            onClick={async () =>
+            onClick={async () => {
+              tryFormattingCode(editorRef, setCodeString);
               validateCode(
                 codeString,
                 codeFile,
                 dispatchOutput,
                 stepIndex,
                 chapterIndex,
-              )
-            }
+              );
+            }}
             variant={
               outputResult.validityStatus === "valid" ? "success" : "default"
             }
diff --git a/lib/client-functions.ts b/lib/client-functions.ts
index ddc6cfa..cdb97b9 100644
--- a/lib/client-functions.ts
+++ b/lib/client-functions.ts
@@ -168,3 +168,18 @@ export function hasNestedProperty(obj: any, path: string) {
   // If we've made it through all the keys, the property exists
   return true;
 }
+export async function tryFormattingCode(
+  editorRef: any,
+  setCodeString: (code: string) => void,
+) {
+  try {
+    if (!editorRef.current) return;
+    const currentCode = editorRef.current.getValue();
+    JSON.parse(currentCode);
+    await editorRef.current.getAction("editor.action.formatDocument").run();
+    setCodeString(editorRef.current.getValue());
+  } catch (e) {
+    // If invalid JSON, do nothing
+    return;
+  }
+}

From 7dad17d0c980da0710fa1ea588edce60abc1518a Mon Sep 17 00:00:00 2001
From: Aditya <147301021+adityajha2005@users.noreply.github.com>
Date: Fri, 21 Feb 2025 21:32:12 +0530
Subject: [PATCH 2/2] Updated Twitter text to X

---
 app/components/CommunityLinks/CommunityLinks.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/CommunityLinks/CommunityLinks.tsx b/app/components/CommunityLinks/CommunityLinks.tsx
index 8ea3441..ed5ce4d 100644
--- a/app/components/CommunityLinks/CommunityLinks.tsx
+++ b/app/components/CommunityLinks/CommunityLinks.tsx
@@ -9,7 +9,7 @@ export default function CompanyLogos() {
     return [
       { title: "Github", link: "https://github.com/json-schema-org" },
       { title: "Slack", link: "https://json-schema.org/slack" },
-      { title: "Twitter", link: "https://x.com/jsonschema" },
+      { title: "X", link: "https://x.com/jsonschema" },
       {
         title: "Youtube",
         link: "https://www.youtube.com/@JSONSchemaOrgOfficial",