Added support for overriding CSS styles with STYLES page

web/editor.tsx

@@ -331,13 +331,7 @@ export class Editor {
       }
     });
 
-    // Need to find a nicer way of doing this stuff
-    if (this.builtinSettings.fontFamily) {
-      document.getElementById("sb-root")!.setAttribute(
-        "style",
-        `--editor-font: ${this.builtinSettings.fontFamily};`,
-      );
-    }
+    this.loadCustomStyles().catch(console.error);
 
     await this.dispatchAppEvent("editor:init");
   }
@@ -995,6 +989,21 @@ export class Editor {
     contentDOM.setAttribute("autocapitalize", "on");
   }
 
+  async loadCustomStyles() {
+    try {
+      const { text: stylesText } = await this.space.readPage("STYLES");
+      const cssBlockRegex = /```css([^`]+)```/;
+      const match = cssBlockRegex.exec(stylesText);
+      if (!match) {
+        return;
+      }
+      const css = match[1];
+      document.getElementById("custom-styles")!.innerHTML = css;
+    } catch {
+      // Nuthin'
+    }
+  }
+
   private restoreState(pageName: string): boolean {
     const pageState = this.openPages.get(pageName);
     const editorView = this.editorView!;