Added support for overriding CSS styles with STYLES page

web/cm_plugins/inline_image.ts

@@ -67,6 +67,7 @@ export function inlineImagesPlugin(space: Space) {
         widgets.push(
           Decoration.widget({
             widget: new InlineImageWidget(url, title, space),
+            block: true,
           }).range(node.to),
         );
       },

web/cm_plugins/link.ts

@@ -1,4 +1,3 @@
-import { ClickEvent } from "../../plug-api/app_event.ts";
 import { Decoration, syntaxTree } from "../deps.ts";
 import { Editor } from "../editor.tsx";
 import {
@@ -6,7 +5,6 @@ import {
   invisibleDecoration,
   isCursorInRange,
 } from "./util.ts";
-import { LinkWidget } from "./util.ts";
 
 export function linkPlugin(editor: Editor) {
   return decoratorStateField((state) => {

web/components/top_bar.tsx

@@ -40,7 +40,6 @@ export function TopBar({
   lhs?: ComponentChildren;
   rhs?: ComponentChildren;
 }) {
-  // const [theme, setTheme] = useState<string>(localStorage.theme ?? "light");
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Another one of my less proud moments:
@@ -48,6 +47,11 @@ export function TopBar({
   // it this way. If you have a better way to do this, please let me know!
   useEffect(() => {
     function resizeHandler() {
+      const editorWidth = parseInt(
+        getComputedStyle(document.getElementById("sb-root")!).getPropertyValue(
+          "--editor-width",
+        ),
+      );
       const currentPageElement = document.getElementById("sb-current-page");
       if (currentPageElement) {
         // Temporarily make it very narrow to give the parent space
@@ -56,7 +60,7 @@ export function TopBar({
 
         // Then calculate a new width
         currentPageElement.style.width = `${
-          Math.min(650, innerDiv.clientWidth - 150)
+          Math.min(editorWidth - 150, innerDiv.clientWidth - 150)
         }px`;
       }
     }

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!;

web/index.html

@@ -33,6 +33,9 @@
       width: 100%;
       overflow: hidden;
     }
+  </style>
+  <style id="custom-styles">
+
   </style>
   <link rel="stylesheet" href="/main.css" />
   <script type="module" src="/client.js"></script>

web/styles/editor.scss

@@ -4,13 +4,12 @@
 
 #sb-main .cm-editor {
   font-size: 18px;
-  --max-width: 800px;
   height: 100%;
 
   .cm-content {
     margin-left: auto;
     margin-right: auto;
-    max-width: var(--max-width);
+    max-width: var(--#{"editor-width"});
     padding: 5px 20px;
   }
 

web/styles/main.scss

@@ -49,7 +49,8 @@
     max-width: 100%;
 
     .inner {
-      max-width: 800px;
+      // Hack to not have SCSS precompile this value but use proper CSS variables
+      max-width: var(--#{"editor-width"});
       margin: auto;
       font-size: 28px;
       padding: 10px 0;

web/styles/theme.scss

@@ -5,6 +5,7 @@
 
   --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --editor-font: "iA-Mono", "Menlo";
+  --editor-width: 800px;
   font-family: var(--ui-font);
 }
 

web/types.ts

@@ -8,13 +8,10 @@ export type Notification = {
   date: Date;
 };
 
-type EditorMode = "ro" | "rw";
-
 export type PanelMode = number;
 
 export type BuiltinSettings = {
   indexPage: string;
-  fontFamily?: string;
 };
 
 export type PanelConfig = {