prettier code format in monaco editor done

Author: SoumavaBanerjee

package-lock.json

@@ -9,13 +9,15 @@
     "@testing-library/user-event": "^12.8.3",
     "@types/jest": "^26.0.21",
     "@types/node": "^12.20.6",
+    "@types/prettier": "^2.2.3",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.2",
     "axios": "^0.21.1",
     "esbuild": "^0.9.6",
     "esbuild-wasm": "^0.9.6",
     "localforage": "^1.9.0",
     "monaco-editor": "^0.23.0",
+    "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",

package.json

@@ -1,14 +1,51 @@
-import MonacoEditor from "@monaco-editor/react";
+import MonacoEditor, { Monaco } from "@monaco-editor/react";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
 import { EditorPropsInterface } from "../../interfaces/index";
-import React from "react";
+import React, {useRef} from "react";
+import prettier from "prettier";
+import parser from "prettier/parser-babel";
 
 const Editor: React.FC<EditorPropsInterface> = ({ onChange, initialValue }) => {
-  const onEditorDidMount = (getCurrentValue: any) => {
-    console.log(getCurrentValue);
+
+
+  const monacoEditorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
+
+
+  /**
+   * On change in model, get the value of it's content and
+   * pass it as an argument to onChange to set the input state
+   */
+  const onEditorDidMount = (
+    editor: monaco.editor.IStandaloneCodeEditor,
+    monacoInstance: Monaco
+  ) => {
+    // console.log(editor.getValue());
+    monacoEditorRef.current = editor;
+    editor.onDidChangeModelContent(() => {
+      onChange(editor.getValue());
+    });
   };
 
+  /**
+   * Get unformatted code, format it and set it to model
+   */
+  const onFormatClick = () => {
+    const rawCode = monacoEditorRef!.current!.getModel()!.getValue();
+    const formattedCode = prettier.format(rawCode, {
+      parser: "babel",
+      plugins:[parser],
+      semi: true,
+      singleQuote: true
+    })
+
+    monacoEditorRef.current?.setValue(formattedCode);
+  }
+
+
   return (
-    <MonacoEditor
+    <div>
+      <button onClick={onFormatClick}>Format</button>
+      <MonacoEditor
       onMount={onEditorDidMount}
       value={initialValue}
       height="30vh"
@@ -27,6 +64,8 @@ const Editor: React.FC<EditorPropsInterface> = ({ onChange, initialValue }) => {
         automaticLayout: true,
       }}
     />
+    </div>
+    
   );
 };