feat(formatter): Use prettier as default formater

package.json

@@ -26,6 +26,7 @@
 		"astro": "3.5.2",
 		"lodash.debounce": "4.0.8",
 		"p5": "1.8.0",
+		"prettier": "3.1.0",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"typescript": "5.2.2"

src/components/Sandbox.tsx

@@ -2,6 +2,9 @@ import debounce from "lodash.debounce";
 import React from "react";
 import "./sandox.css";
 
+import * as prettier from "prettier/standalone";
+import parserBabel from "prettier/plugins/babel";
+import * as prettierPluginEstree from "prettier/plugins/estree";
 import Editor from "@monaco-editor/react";
 //@ts-ignore
 import globals from "@types/p5/global.d.ts?raw";
@@ -61,6 +64,21 @@ export default function Sandbox({ disableStorage, initialCode }: SandboxProps) {
 	};
 
 	const handleEditorWillMount = (monaco) => {
+		monaco.languages.registerDocumentFormattingEditProvider("javascript", {
+			provideDocumentFormattingEdits: async (model) => {
+				const text = await prettier.format(model.getValue(), {
+					parser: "babel",
+					plugins: [parserBabel, prettierPluginEstree],
+				});
+				return [
+					{
+						range: model.getFullModelRange(),
+						text,
+					},
+				];
+			},
+		});
+
 		monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
 			...monaco.languages.typescript.javascriptDefaults.getDiagnosticsOptions(),
 			noSemanticValidation: true,
@@ -120,20 +138,23 @@ export default function Sandbox({ disableStorage, initialCode }: SandboxProps) {
 					theme="vs"
 					options={{
 						lineNumbers: "on",
-
+						formatOnPaste: true,
 						wordWrap: "wordWrapColumn",
 						wordWrapColumn: 80,
 						roundedSelection: false,
 						scrollBeyondLastLine: false,
 						automaticLayout: true,
-						cursorStyle: "block",
+						cursorStyle: "line",
+						fontLigatures: true,
 						cursorBlinking: "blink",
 						minimap: {
 							enabled: true,
 						},
 						fontFamily: "IBM Plex Mono, monospace",
 						fontSize: 18,
 						tabSize: 2,
+						insertSpaces: false,
+						rulers: [80],
 						accessibilitySupport: "on",
 					}}
 					defaultValue={code}