implement format on save

src/state/sharedVariantEditor.slice.ts

@@ -2,6 +2,12 @@ import { type RouterOutputs } from "~/utils/api";
 import { type SliceCreator } from "./store";
 import loader from "@monaco-editor/loader";
 import openAITypes from "~/codegen/openai.types.ts.txt";
+import prettier from "prettier/standalone";
+import parserTypescript from "prettier/plugins/typescript";
+
+// @ts-expect-error for some reason missing from types
+import parserEstree from "prettier/plugins/estree";
+import { type languages } from "monaco-editor/esm/vs/editor/editor.api";
 
 export type SharedVariantEditorSlice = {
   monaco: null | ReturnType<typeof loader.__getMonacoInstance>;
@@ -11,6 +17,26 @@ export type SharedVariantEditorSlice = {
   setScenarios: (scenarios: RouterOutputs["scenarios"]["list"]) => void;
 };
 
+const customFormatter: languages.DocumentFormattingEditProvider = {
+  provideDocumentFormattingEdits: async (model) => {
+    const val = model.getValue();
+    console.log("going to format!", val);
+    const text = await prettier.format(val, {
+      parser: "typescript",
+      plugins: [parserTypescript, parserEstree],
+      // We're showing these in pretty narrow panes so let's keep the print width low
+      printWidth: 60,
+    });
+
+    return [
+      {
+        range: model.getFullModelRange(),
+        text,
+      },
+    ];
+  },
+};
+
 export const createVariantEditorSlice: SliceCreator<SharedVariantEditorSlice> = (set, get) => ({
   monaco: loader.__getMonacoInstance(),
   loadMonaco: async () => {
@@ -40,6 +66,8 @@ export const createVariantEditorSlice: SliceCreator<SharedVariantEditorSlice> =
       monaco.Uri.parse("file:///openai.types.ts"),
     );
 
+    monaco.languages.registerDocumentFormattingEditProvider("typescript", customFormatter);
+
     set((state) => {
       state.sharedVariantEditor.monaco = monaco;
     });