From eb06bc94aac424a9e976db3182e2348bf1d1a9da Mon Sep 17 00:00:00 2001
From: KushalLukhi <kushallukhi@users.noreply.github.com>
Date: Fri, 20 Mar 2026 06:42:17 +0000
Subject: [PATCH] feat(editor): add prettify action to input editor toolbar

---
 components/EditorPanel.tsx | 27 +++++++++++++++++++++++++++
 components/Monaco.tsx      |  5 ++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/components/EditorPanel.tsx b/components/EditorPanel.tsx
index 8c0ea14e..1eaef8e8 100644
--- a/components/EditorPanel.tsx
+++ b/components/EditorPanel.tsx
@@ -53,6 +53,7 @@ export default function EditorPanel({
   acceptFiles,
   hasClear,
   hasCopy = true,
+  hasPrettier = true,
   topNotifications,
   language,
   defaultValue,
@@ -63,6 +64,7 @@ export default function EditorPanel({
   const [showSettingsDialogue, setSettingsDialog] = useState(false);
   const [value, setValue] = useState(defaultValue);
   const [fetchingUrl, setFetchingUrl] = useState("");
+  const editorRef = useRef<any>(null);
 
   const options = {
     fontSize: 14,
@@ -137,6 +139,17 @@ export default function EditorPanel({
     });
   }, [value]);
 
+  const prettifyValue = useCallback(async () => {
+    if (!editorRef.current) return;
+    const action = editorRef.current.getAction("editor.action.formatDocument");
+    if (!action) {
+      toaster.warning("Formatter not available for this input.", { id });
+      return;
+    }
+
+    await action.run();
+  }, [id]);
+
   const fetchFile = useCallback(
     close => {
       (async () => {
@@ -255,6 +268,17 @@ export default function EditorPanel({
           </a>
         )}
 
+        {hasPrettier && editable && (
+          <Button
+            marginRight={10}
+            iconBefore="clean"
+            onClick={prettifyValue}
+            height={28}
+          >
+            Prettify
+          </Button>
+        )}
+
         {hasCopy && (
           <Button
             appearance="primary"
@@ -287,6 +311,9 @@ export default function EditorPanel({
           language={language}
           value={value}
           options={options}
+          onMount={editor => {
+            editorRef.current = editor;
+          }}
           onChange={value => {
             setValue(value);
             onChange(value);
diff --git a/components/Monaco.tsx b/components/Monaco.tsx
index c7006db5..7f413097 100644
--- a/components/Monaco.tsx
+++ b/components/Monaco.tsx
@@ -15,6 +15,7 @@ interface MonacoProps {
   options?: any;
   defaultValue?: string;
   onChange: (value: string) => void;
+  onMount?: (editor: any) => void;
 }
 
 export const Monaco: React.FC<MonacoProps> = ({
@@ -24,7 +25,8 @@ export const Monaco: React.FC<MonacoProps> = ({
   height,
   width,
   options,
-  onChange
+  onChange,
+  onMount
 }) => {
   return (
     <Editor
@@ -35,6 +37,7 @@ export const Monaco: React.FC<MonacoProps> = ({
       width={width}
       options={options}
       onChange={onChange}
+      onMount={onMount}
       loading={
         <Pane
           display="flex"