Reapplied all the things

webapp/editor.tsx

@@ -1,10 +1,10 @@
-import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
-import { indentWithTab, standardKeymap } from "@codemirror/commands";
-import { history, historyKeymap } from "@codemirror/history";
-import { bracketMatching } from "@codemirror/matchbrackets";
-import { searchKeymap } from "@codemirror/search";
-import { EditorSelection, EditorState } from "@codemirror/state";
+import {autocompletion, completionKeymap} from "@codemirror/autocomplete";
+import {closeBrackets, closeBracketsKeymap} from "@codemirror/closebrackets";
+import {indentWithTab, standardKeymap} from "@codemirror/commands";
+import {history, historyKeymap} from "@codemirror/history";
+import {bracketMatching} from "@codemirror/matchbrackets";
+import {searchKeymap} from "@codemirror/search";
+import {EditorSelection, EditorState} from "@codemirror/state";
 import {
   drawSelection,
   dropCursor,
@@ -15,36 +15,38 @@ import {
   ViewPlugin,
   ViewUpdate,
 } from "@codemirror/view";
-import React, { useEffect, useReducer } from "react";
+import React, {useEffect, useReducer} from "react";
 import ReactDOM from "react-dom";
-import { createSandbox as createIFrameSandbox } from "../plugos/environments/iframe_sandbox";
-import { AppEvent, AppEventDispatcher, ClickEvent } from "./app_event";
+import {createSandbox as createIFrameSandbox} from "../plugos/environments/iframe_sandbox";
+import {AppEvent, AppEventDispatcher, ClickEvent} from "./app_event";
 import * as commands from "./commands";
-import { CommandPalette } from "./components/command_palette";
-import { PageNavigator } from "./components/page_navigator";
-import { TopBar } from "./components/top_bar";
-import { lineWrapper } from "./line_wrapper";
-import { markdown } from "./markdown";
-import { PathPageNavigator } from "./navigator";
+import {CommandPalette} from "./components/command_palette";
+import {PageNavigator} from "./components/page_navigator";
+import {TopBar} from "./components/top_bar";
+import {lineWrapper} from "./line_wrapper";
+import {markdown} from "./markdown";
+import {PathPageNavigator} from "./navigator";
 import customMarkDown from "./parser";
 import reducer from "./reducer";
-import { smartQuoteKeymap } from "./smart_quotes";
-import { Space } from "./space";
+import {smartQuoteKeymap} from "./smart_quotes";
+import {Space} from "./space";
 import customMarkdownStyle from "./style";
-import editorSyscalls from "./syscalls/editor";
-import indexerSyscalls from "./syscalls/indexer";
-import spaceSyscalls from "./syscalls/space";
-import { Action, AppViewState, initialViewState } from "./types";
-import { SilverBulletHooks } from "../common/manifest";
-import { safeRun, throttle } from "./util";
-import { System } from "../plugos/system";
-import { EventHook } from "../plugos/hooks/event";
-import { systemSyscalls } from "./syscalls/system";
-import { Panel } from "./components/panel";
-import { CommandHook } from "./hooks/command";
-import { SlashCommandHook } from "./hooks/slash_command";
-import { CompleterHook } from "./hooks/completer";
-import { pasteLinkExtension } from "./editor_paste";
+import {editorSyscalls} from "./syscalls/editor";
+import {indexerSyscalls} from "./syscalls/indexer";
+import {spaceSyscalls} from "./syscalls/space";
+import {Action, AppViewState, initialViewState} from "./types";
+import {SilverBulletHooks} from "../common/manifest";
+import {safeRun, throttle} from "./util";
+import {System} from "../plugos/system";
+import {EventHook} from "../plugos/hooks/event";
+import {systemSyscalls} from "./syscalls/system";
+import {Panel} from "./components/panel";
+import {CommandHook} from "./hooks/command";
+import {SlashCommandHook} from "./hooks/slash_command";
+import {CompleterHook} from "./hooks/completer";
+import {pasteLinkExtension} from "./editor_paste";
+import {markdownSyscalls} from "../common/syscalls/markdown";
+
 
 class PageState {
   scrollTop: number;
@@ -112,6 +114,7 @@ export class Editor implements AppEventDispatcher {
     this.system.registerSyscalls("space", [], spaceSyscalls(this));
     this.system.registerSyscalls("index", [], indexerSyscalls(this.space));
     this.system.registerSyscalls("system", [], systemSyscalls(this.space));
+    this.system.registerSyscalls("markdown", [], markdownSyscalls());
   }
 
   async init() {

webapp/styles/main.scss

@@ -37,7 +37,7 @@ body {
 
 #top {
   height: 55px;
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   right: 0;
@@ -83,7 +83,7 @@ body {
 #editor {
   position: absolute;
   top: 55px;
-  bottom: 0;
+  bottom: 50px;
   left: 0;
   right: 0;
   overflow-y: hidden;

webapp/syscalls/editor.ts

@@ -1,7 +1,7 @@
-import { Editor } from "../editor";
-import { syntaxTree } from "@codemirror/language";
-import { Transaction } from "@codemirror/state";
-import { SysCallMapping } from "../../plugos/system";
+import {Editor} from "../editor";
+import {syntaxTree} from "@codemirror/language";
+import {Transaction} from "@codemirror/state";
+import {SysCallMapping} from "../../plugos/system";
 
 type SyntaxNode = {
   name: string;
@@ -26,79 +26,118 @@ function ensureAnchor(expr: any, start: boolean) {
   );
 }
 
-export default (editor: Editor): SysCallMapping => ({
-  getCurrentPage: (): string => {
-    return editor.currentPage!;
-  },
-  getText: () => {
-    return editor.editorView?.state.sliceDoc();
-  },
-  getCursor: (): number => {
-    return editor.editorView!.state.selection.main.from;
-  },
-  save: async () => {
-    return editor.save(true);
-  },
-  navigate: async (ctx, name: string, pos: number) => {
-    await editor.navigate(name, pos);
-  },
-  reloadPage: async (ctx) => {
-    await editor.reloadPage();
-  },
-  openUrl: async (ctx, url: string) => {
-    window.open(url, "_blank")!.focus();
-  },
-  flashNotification: (ctx, message: string) => {
-    editor.flashNotification(message);
-  },
-  showRhs: (ctx, html: string) => {
-    editor.viewDispatch({
-      type: "show-rhs",
-      html: html,
-    });
-  },
-  insertAtPos: (ctx, text: string, pos: number) => {
-    editor.editorView!.dispatch({
-      changes: {
-        insert: text,
-        from: pos,
-      },
-    });
-  },
-  replaceRange: (ctx, from: number, to: number, text: string) => {
-    editor.editorView!.dispatch({
-      changes: {
-        insert: text,
-        from: from,
-        to: to,
-      },
-    });
-  },
-  moveCursor: (ctx, pos: number) => {
-    editor.editorView!.dispatch({
-      selection: {
-        anchor: pos,
-      },
-    });
-  },
-  insertAtCursor: (ctx, text: string) => {
-    let editorView = editor.editorView!;
-    let from = editorView.state.selection.main.from;
-    editorView.dispatch({
-      changes: {
-        insert: text,
-        from: from,
-      },
-      selection: {
-        anchor: from + text.length,
-      },
-    });
-  },
-  getSyntaxNodeUnderCursor: (): SyntaxNode | undefined => {
-    const editorState = editor.editorView!.state;
-    let selection = editorState.selection.main;
-    if (selection.empty) {
-      let node = syntaxTree(editorState).resolveInner(selection.from);
+export function editorSyscalls(editor: Editor): SysCallMapping {
+  return {
+    getCurrentPage: (): string => {
+      return editor.currentPage!;
+    },
+    getText: () => {
+      return editor.editorView?.state.sliceDoc();
+    },
+    getCursor: (): number => {
+      return editor.editorView!.state.selection.main.from;
+    },
+    save: async () => {
+      return editor.save(true);
+    },
+    navigate: async (ctx, name: string, pos: number) => {
+      await editor.navigate(name, pos);
+    },
+    reloadPage: async (ctx) => {
+      await editor.reloadPage();
+    },
+    openUrl: async (ctx, url: string) => {
+      window.open(url, "_blank")!.focus();
+    },
+    flashNotification: (ctx, message: string) => {
+      editor.flashNotification(message);
+    },
+    showRhs: (ctx, html: string) => {
+      editor.viewDispatch({
+        type: "show-rhs",
+        html: html,
+      });
+    },
+    insertAtPos: (ctx, text: string, pos: number) => {
+      editor.editorView!.dispatch({
+        changes: {
+          insert: text,
+          from: pos,
+        },
+      });
+    },
+    replaceRange: (ctx, from: number, to: number, text: string) => {
+      editor.editorView!.dispatch({
+        changes: {
+          insert: text,
+          from: from,
+          to: to,
+        },
+      });
+    },
+    moveCursor: (ctx, pos: number) => {
+      editor.editorView!.dispatch({
+        selection: {
+          anchor: pos,
+        },
+      });
+    },
+    insertAtCursor: (ctx, text: string) => {
+      let editorView = editor.editorView!;
+      let from = editorView.state.selection.main.from;
+      editorView.dispatch({
+        changes: {
+          insert: text,
+          from: from,
+        },
+        selection: {
+          anchor: from + text.length,
+        },
+      });
+    },
+    getSyntaxNodeUnderCursor: (): SyntaxNode | undefined => {
+      const editorState = editor.editorView!.state;
+      let selection = editorState.selection.main;
+      if (selection.empty) {
+        let node = syntaxTree(editorState).resolveInner(selection.from);
+        if (node) {
+          return {
+            name: node.name,
+            text: editorState.sliceDoc(node.from, node.to),
+            from: node.from,
+            to: node.to,
+          };
+        }
+      }
+    },
+    getLineUnderCursor: (): string => {
+      const editorState = editor.editorView!.state;
+      let selection = editorState.selection.main;
+      let line = editorState.doc.lineAt(selection.from);
+      return editorState.sliceDoc(line.from, line.to);
+    },
+    matchBefore: (
+      ctx,
+      regexp: string
+    ): { from: number; to: number; text: string } | null => {
+      const editorState = editor.editorView!.state;
+      let selection = editorState.selection.main;
+      let from = selection.from;
+      if (selection.empty) {
+        let line = editorState.doc.lineAt(from);
+        let start = Math.max(line.from, from - 250);
+        let str = line.text.slice(start - line.from, from - line.from);
+        let found = str.search(ensureAnchor(new RegExp(regexp), false));
+        // console.log("Line", line, start, str, new RegExp(regexp), found);
+        return found < 0
+          ? null
+          : { from: start + found, to: from, text: str.slice(found) };
+      }
+      return null;
+    },
+    getSyntaxNodeAtPos: (ctx, pos: number): SyntaxNode | undefined => {
+      const editorState = editor.editorView!.state;
+      let node = syntaxTree(editorState).resolveInner(pos);
       if (node) {
         return {
           name: node.name,
@@ -107,49 +146,12 @@ export default (editor: Editor): SysCallMapping => ({
           to: node.to,
         };
       }
-    }
-  },
-  getLineUnderCursor: (): string => {
-    const editorState = editor.editorView!.state;
-    let selection = editorState.selection.main;
-    let line = editorState.doc.lineAt(selection.from);
-    return editorState.sliceDoc(line.from, line.to);
-  },
-  matchBefore: (
-    ctx,
-    regexp: string
-  ): { from: number; to: number; text: string } | null => {
-    const editorState = editor.editorView!.state;
-    let selection = editorState.selection.main;
-    let from = selection.from;
-    if (selection.empty) {
-      let line = editorState.doc.lineAt(from);
-      let start = Math.max(line.from, from - 250);
-      let str = line.text.slice(start - line.from, from - line.from);
-      let found = str.search(ensureAnchor(new RegExp(regexp), false));
-      // console.log("Line", line, start, str, new RegExp(regexp), found);
-      return found < 0
-        ? null
-        : { from: start + found, to: from, text: str.slice(found) };
-    }
-    return null;
-  },
-  getSyntaxNodeAtPos: (ctx, pos: number): SyntaxNode | undefined => {
-    const editorState = editor.editorView!.state;
-    let node = syntaxTree(editorState).resolveInner(pos);
-    if (node) {
-      return {
-        name: node.name,
-        text: editorState.sliceDoc(node.from, node.to),
-        from: node.from,
-        to: node.to,
-      };
-    }
-  },
-  dispatch: (ctx, change: Transaction) => {
-    editor.editorView!.dispatch(change);
-  },
-  prompt: (ctx, message: string, defaultValue = ""): string | null => {
-    return prompt(message, defaultValue);
-  },
-});
+    },
+    dispatch: (ctx, change: Transaction) => {
+      editor.editorView!.dispatch(change);
+    },
+    prompt: (ctx, message: string, defaultValue = ""): string | null => {
+      return prompt(message, defaultValue);
+    },
+  };
+}

webapp/syscalls/indexer.ts

@@ -1,8 +1,8 @@
-import { Space } from "../space";
-import { SysCallMapping } from "../../plugos/system";
-import { transportSyscalls } from "../../plugos/syscalls/transport";
+import {Space} from "../space";
+import {SysCallMapping} from "../../plugos/system";
+import {transportSyscalls} from "../../plugos/syscalls/transport";
 
-export default function indexerSyscalls(space: Space): SysCallMapping {
+export function indexerSyscalls(space: Space): SysCallMapping {
   return transportSyscalls(
     [
       "scanPrefixForPage",

webapp/syscalls/space.ts

@@ -1,28 +1,30 @@
-import { Editor } from "../editor";
-import { SysCallMapping } from "../../plugos/system";
-import { PageMeta } from "../../common/types";
+import {Editor} from "../editor";
+import {SysCallMapping} from "../../plugos/system";
+import {PageMeta} from "../../common/types";
 
-export default (editor: Editor): SysCallMapping => ({
-  listPages: async (): Promise<PageMeta[]> => {
-    return [...(await editor.space.listPages())];
-  },
-  readPage: async (
-    ctx,
-    name: string
-  ): Promise<{ text: string; meta: PageMeta }> => {
-    return await editor.space.readPage(name);
-  },
-  writePage: async (ctx, name: string, text: string): Promise<PageMeta> => {
-    return await editor.space.writePage(name, text);
-  },
-  deletePage: async (ctx, name: string) => {
-    // If we're deleting the current page, navigate to the start page
-    if (editor.currentPage === name) {
-      await editor.navigate("start");
-    }
-    // Remove page from open pages in editor
-    editor.openPages.delete(name);
-    console.log("Deleting page");
-    await editor.space.deletePage(name);
-  },
-});
+export function spaceSyscalls(editor: Editor): SysCallMapping {
+  return {
+    listPages: async (): Promise<PageMeta[]> => {
+      return [...(await editor.space.listPages())];
+    },
+    readPage: async (
+      ctx,
+      name: string
+    ): Promise<{ text: string; meta: PageMeta }> => {
+      return await editor.space.readPage(name);
+    },
+    writePage: async (ctx, name: string, text: string): Promise<PageMeta> => {
+      return await editor.space.writePage(name, text);
+    },
+    deletePage: async (ctx, name: string) => {
+      // If we're deleting the current page, navigate to the start page
+      if (editor.currentPage === name) {
+        await editor.navigate("start");
+      }
+      // Remove page from open pages in editor
+      editor.openPages.delete(name);
+      console.log("Deleting page");
+      await editor.space.deletePage(name);
+    },
+  };
+}