A better editor:

* should work full offline again
* prettier integration with format

packages/studio/package.json

@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@devbookhq/splitter": "^1.4.0",
-    "@monaco-editor/react": "^4.4.6",
+    "@monaco-editor/react": "^4.6.0",
     "@react-three/drei": "9.92.7",
     "@react-three/fiber": "8.13.6",
     "axios": "^0.24.0",
@@ -43,6 +43,7 @@
     "mobx": "^6.10.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.1.8",
+    "monaco-editor": "^0.51.0",
     "parse-css-color": "^0.2.1",
     "polished": "^4.1.3",
     "react": "^18.2.0",

packages/studio/src/workbench/EditorPane.jsx

@@ -7,6 +7,7 @@ import replicadTypes from "../../node_modules/replicad/dist/replicad.d.ts?raw";
 
 import Splitter, { GutterTheme, SplitDirection } from "@devbookhq/splitter";
 
+import "./loadMonaco";
 import useEditorStore from "../visualiser/editor/useEditorStore";
 import downloadCode from "../utils/downloadCode";
 import { HeaderButton } from "./panes";

packages/studio/src/workbench/loadMonaco.js

@@ -0,0 +1,57 @@
+import { loader } from "@monaco-editor/react";
+
+import * as monaco from "monaco-editor";
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+
+import prettier from "prettier/esm/standalone";
+import prettierPluginBabel from "prettier/esm/parser-babel";
+import prettierEspree from "prettier/esm/parser-espree";
+
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === "json") {
+      return new jsonWorker();
+    }
+    if (label === "css" || label === "scss" || label === "less") {
+      return new cssWorker();
+    }
+    if (label === "html" || label === "handlebars" || label === "razor") {
+      return new htmlWorker();
+    }
+    if (label === "typescript" || label === "javascript") {
+      return new tsWorker();
+    }
+    return new editorWorker();
+  },
+};
+
+const formatWithPrettier = (value) => {
+  console.log("yeah", prettier);
+  try {
+    return prettier.format(value, {
+      parser: "babel",
+      plugins: [prettierPluginBabel, prettierEspree],
+    });
+  } catch (e) {
+    console.error(e);
+    return value;
+  }
+};
+
+monaco.languages.registerDocumentFormattingEditProvider("javascript", {
+  provideDocumentFormattingEdits: (model) => {
+    console.log("mmm");
+    return [
+      {
+        range: model.getFullModelRange(),
+        text: formatWithPrettier(model.getValue()),
+      },
+    ];
+  },
+});
+
+loader.config({ monaco });