Fixes #576 supporting markdown in headers and refactoring some stuff

web/cm_plugins/top_bottom_panels.ts

@@ -42,26 +42,26 @@ class IFrameWidget extends WidgetType {
 export function postScriptPrefacePlugin(editor: Client) {
   return decoratorStateField((state: EditorState) => {
     const widgets: any[] = [];
-    if (editor.ui.viewState.panels.preface.html) {
+    if (editor.ui.viewState.panels.top.html) {
       widgets.push(
         Decoration.widget({
           widget: new IFrameWidget(
             editor,
-            editor.ui.viewState.panels.preface,
-            "sb-preface-iframe",
+            editor.ui.viewState.panels.top,
+            "sb-top-iframe",
           ),
           side: -1,
           block: true,
         }).range(0),
       );
     }
-    if (editor.ui.viewState.panels.ps.html) {
+    if (editor.ui.viewState.panels.bottom.html) {
       widgets.push(
         Decoration.widget({
           widget: new IFrameWidget(
             editor,
-            editor.ui.viewState.panels.ps,
-            "sb-ps-iframe",
+            editor.ui.viewState.panels.bottom,
+            "sb-bottom-iframe",
           ),
           side: 1,
           block: true,

web/editor_state.ts

@@ -40,7 +40,7 @@ import {
   pasteLinkExtension,
 } from "./cm_plugins/editor_paste.ts";
 import { TextChange } from "$sb/lib/change.ts";
-import { postScriptPrefacePlugin } from "./cm_plugins/preface_ps.ts";
+import { postScriptPrefacePlugin } from "./cm_plugins/top_bottom_panels.ts";
 import { languageFor } from "../common/languages.ts";
 import { plugLinter } from "./cm_plugins/lint.ts";
 

web/styles/main.scss

@@ -147,14 +147,14 @@ body {
   flex: 1;
 }
 
-.sb-ps-iframe {
+.sb-bottom-iframe {
   width: 100%;
   margin-top: 10px;
   border: 1px solid var(--editor-directive-background-color);
   border-radius: 5px;
 }
 
-.sb-preface-iframe {
+.sb-top-iframe {
   width: 100%;
   margin-top: 10px;
   border: 1px solid var(--editor-directive-background-color);

web/types.ts

@@ -90,8 +90,8 @@ export const initialViewState: AppViewState = {
     rhs: {},
     bhs: {},
     modal: {},
-    ps: {},
-    preface: {},
+    top: {},
+    bottom: {},
   },
   allPages: [],
   commands: new Map(),