From a7cd3ea7e08674d4b4141a95272b67d5884e25aa Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Mon, 4 Apr 2022 15:25:07 +0200
Subject: [PATCH] A whole lot of enhancements

---
 common/tree.ts                             |  6 +-
 plugos-silverbullet-syscall/clientStore.ts | 13 +++++
 plugos-silverbullet-syscall/editor.ts      | 25 ++-------
 plugos/environments/sandbox_worker.ts      | 65 ++++++++++------------
 plugos/syscalls/store.dexie_browser.ts     |  2 +-
 plugs/core/item.ts                         |  6 +-
 plugs/core/markdown.ts                     | 23 --------
 plugs/core/materialized_queries.ts         | 33 ++++++++++-
 plugs/core/navigate.ts                     |  7 +--
 plugs/emoji/emoji.ts                       |  4 +-
 plugs/lib/tree.test.ts                     |  4 +-
 plugs/lib/tree.ts                          | 34 +++++++++--
 plugs/markdown/markdown.plug.yaml          | 14 +++--
 plugs/markdown/markdown.ts                 | 46 ++++++++++++++-
 plugs/tasks/task.ts                        | 15 +++--
 webapp/components/panel.html               | 21 +++++++
 webapp/components/panel.scss               |  4 ++
 webapp/components/panel.tsx                | 28 ++++++++--
 webapp/components/status_bar.tsx           |  6 +-
 webapp/editor.tsx                          | 28 +++++++---
 webapp/navigator.ts                        |  7 ++-
 webapp/styles/constants.scss               |  3 +
 webapp/styles/editor.scss                  |  8 ++-
 webapp/styles/main.scss                    | 48 +++++++++++-----
 webapp/syscalls/clientStore.ts             | 13 +++++
 webapp/syscalls/editor.ts                  | 40 ++-----------
 26 files changed, 322 insertions(+), 181 deletions(-)
 create mode 100644 plugos-silverbullet-syscall/clientStore.ts
 delete mode 100644 plugs/core/markdown.ts
 create mode 100644 webapp/components/panel.html
 create mode 100644 webapp/components/panel.scss
 create mode 100644 webapp/styles/constants.scss
 create mode 100644 webapp/syscalls/clientStore.ts

diff --git a/common/tree.ts b/common/tree.ts
index d1504d15..4724b3b7 100644
--- a/common/tree.ts
+++ b/common/tree.ts
@@ -3,8 +3,8 @@ import wikiMarkdownLang from "../webapp/parser";
 
 export type MarkdownTree = {
   type?: string; // undefined === text node
-  from: number;
-  to: number;
+  from?: number;
+  to?: number;
   text?: string;
   children?: MarkdownTree[];
 };
@@ -39,7 +39,7 @@ function treeToAST(text: string, n: SyntaxNode): MarkdownTree {
         });
       }
       newChildren.push(child);
-      index = child.to;
+      index = child.to!;
     }
     let s = text.substring(index, n.to);
     if (s) {
diff --git a/plugos-silverbullet-syscall/clientStore.ts b/plugos-silverbullet-syscall/clientStore.ts
new file mode 100644
index 00000000..6e4fce9c
--- /dev/null
+++ b/plugos-silverbullet-syscall/clientStore.ts
@@ -0,0 +1,13 @@
+import {syscall} from "./syscall";
+
+export async function set(key: string, value: any): Promise<void> {
+  return syscall("clientStore.set", key, value);
+}
+
+export async function get(key: string): Promise<any> {
+  return syscall("clientStore.get", key);
+}
+
+export async function del(key: string): Promise<void> {
+  return syscall("clientStore.delete", key);
+}
diff --git a/plugos-silverbullet-syscall/editor.ts b/plugos-silverbullet-syscall/editor.ts
index 1f6ca763..98a68244 100644
--- a/plugos-silverbullet-syscall/editor.ts
+++ b/plugos-silverbullet-syscall/editor.ts
@@ -1,4 +1,4 @@
-import { syscall } from "./syscall";
+import {syscall} from "./syscall";
 
 export function getCurrentPage(): Promise<string> {
   return syscall("editor.getCurrentPage");
@@ -36,6 +36,10 @@ export function showRhs(html: string): Promise<void> {
   return syscall("editor.showRhs", html);
 }
 
+export function hideRhs(): Promise<void> {
+  return syscall("editor.hideRhs");
+}
+
 export function insertAtPos(text: string, pos: number): Promise<void> {
   return syscall("editor.insertAtPos", text, pos);
 }
@@ -56,31 +60,12 @@ export function insertAtCursor(text: string): Promise<void> {
   return syscall("editor.insertAtCursor", text);
 }
 
-export type SyntaxNode = {
-  name: string;
-  text: string;
-  from: number;
-  to: number;
-};
-
-export function getSyntaxNodeUnderCursor(): Promise<SyntaxNode> {
-  return syscall("editor.getSyntaxNodeUnderCursor");
-}
-
-export function getLineUnderCursor(): Promise<string> {
-  return syscall("editor.getLineUnderCursor");
-}
-
 export function matchBefore(
   re: string
 ): Promise<{ from: number; to: number; text: string } | null> {
   return syscall("editor.matchBefore", re);
 }
 
-export function getSyntaxNodeAtPos(pos: number): Promise<SyntaxNode> {
-  return syscall("editor.getSyntaxNodeAtPos", pos);
-}
-
 export function dispatch(change: any): Promise<void> {
   return syscall("editor.dispatch", change);
 }
diff --git a/plugos/environments/sandbox_worker.ts b/plugos/environments/sandbox_worker.ts
index 9bdeb0d0..afde0c6a 100644
--- a/plugos/environments/sandbox_worker.ts
+++ b/plugos/environments/sandbox_worker.ts
@@ -1,5 +1,5 @@
-import { safeRun } from "../util";
-import { ControllerMessage, WorkerMessage } from "./worker";
+import {safeRun} from "../util";
+import {ControllerMessage, WorkerMessage} from "./worker";
 
 let loadedFunctions = new Map<string, Function>();
 let pendingRequests = new Map<
@@ -9,10 +9,13 @@ let pendingRequests = new Map<
     reject: (e: any) => void;
   }
 >();
-let postMessage = self.postMessage.bind(self);
 
-if (window.parent !== window) {
-  postMessage = window.parent.postMessage.bind(window.parent);
+function workerPostMessage(msg: ControllerMessage) {
+  if (typeof window !== "undefined" && window.parent !== window) {
+    window.parent.postMessage(msg, "*");
+  } else {
+    self.postMessage(msg);
+  }
 }
 
 declare global {
@@ -25,15 +28,12 @@ self.syscall = async (name: string, ...args: any[]) => {
   return await new Promise((resolve, reject) => {
     syscallReqId++;
     pendingRequests.set(syscallReqId, { resolve, reject });
-    postMessage(
-      {
-        type: "syscall",
-        id: syscallReqId,
-        name,
-        args,
-      },
-      "*"
-    );
+    workerPostMessage({
+      type: "syscall",
+      id: syscallReqId,
+      name,
+      args,
+    });
   });
 };
 
@@ -48,13 +48,10 @@ self.addEventListener("message", (event: { data: WorkerMessage }) => {
       case "load":
         let fn2 = new Function(wrapScript(data.code!));
         loadedFunctions.set(data.name!, fn2());
-        postMessage(
-          {
-            type: "inited",
-            name: data.name,
-          } as ControllerMessage,
-          "*"
-        );
+        workerPostMessage({
+          type: "inited",
+          name: data.name,
+        });
         break;
       case "invoke":
         let fn = loadedFunctions.get(data.name!);
@@ -63,23 +60,17 @@ self.addEventListener("message", (event: { data: WorkerMessage }) => {
         }
         try {
           let result = await Promise.resolve(fn(...(data.args || [])));
-          postMessage(
-            {
-              type: "result",
-              id: data.id,
-              result: result,
-            } as ControllerMessage,
-            "*"
-          );
+          workerPostMessage({
+            type: "result",
+            id: data.id,
+            result: result,
+          } as ControllerMessage);
         } catch (e: any) {
-          postMessage(
-            {
-              type: "result",
-              id: data.id,
-              error: e.message,
-            } as ControllerMessage,
-            "*"
-          );
+          workerPostMessage({
+            type: "result",
+            id: data.id,
+            error: e.message,
+          });
           throw e;
         }
 
diff --git a/plugos/syscalls/store.dexie_browser.ts b/plugos/syscalls/store.dexie_browser.ts
index 466f6e96..9c1467ca 100644
--- a/plugos/syscalls/store.dexie_browser.ts
+++ b/plugos/syscalls/store.dexie_browser.ts
@@ -12,7 +12,7 @@ export function storeSyscalls(
 ): SysCallMapping {
   const db = new Dexie(dbName);
   db.version(1).stores({
-    test: "key",
+    [tableName]: "key",
   });
   const items = db.table(tableName);
 
diff --git a/plugs/core/item.ts b/plugs/core/item.ts
index c0eaa0c4..c47416b8 100644
--- a/plugs/core/item.ts
+++ b/plugs/core/item.ts
@@ -3,7 +3,7 @@ import {whiteOutQueries} from "./materialized_queries";
 
 import {batchSet} from "plugos-silverbullet-syscall/index";
 import {parseMarkdown} from "plugos-silverbullet-syscall/markdown";
-import {collectNodesMatching, MarkdownTree, render} from "../lib/tree";
+import {collectNodesMatching, MarkdownTree, renderMarkdown,} from "../lib/tree";
 
 type Item = {
   item: string;
@@ -27,12 +27,12 @@ export async function indexItems({ name, text }: IndexEvent) {
     let nested: string | undefined;
     for (let child of n.children!.slice(1)) {
       if (child.type === "OrderedList" || child.type === "BulletList") {
-        nested = render(child);
+        nested = renderMarkdown(child);
         break;
       }
       textNodes.push(child);
     }
-    let item = textNodes.map(render).join("").trim();
+    let item = textNodes.map(renderMarkdown).join("").trim();
     let value: Item = {
       item,
     };
diff --git a/plugs/core/markdown.ts b/plugs/core/markdown.ts
deleted file mode 100644
index 804cc798..00000000
--- a/plugs/core/markdown.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import mdParser from "../../webapp/parser";
-import { getText } from "plugos-silverbullet-syscall/editor";
-
-export async function renderMD() {
-  let text = await getText();
-  let tree = mdParser.parser.parse(text);
-  let slicesToRemove: [number, number][] = [];
-
-  tree.iterate({
-    enter(type, from, to): false | void {
-      switch (type.name) {
-        case "Comment":
-          slicesToRemove.push([from, to]);
-          return false;
-      }
-    },
-  });
-  // console.log("output peices", JSON.stringify(tree));
-  slicesToRemove.reverse().forEach(([from, to]) => {
-    text = text.slice(0, from) + text.slice(to);
-  });
-  console.log("Clean md", text);
-}
diff --git a/plugs/core/materialized_queries.ts b/plugs/core/materialized_queries.ts
index d9e7c583..f507c342 100644
--- a/plugs/core/materialized_queries.ts
+++ b/plugs/core/materialized_queries.ts
@@ -1,11 +1,11 @@
 import {flashNotification, getCurrentPage, reloadPage, save,} from "plugos-silverbullet-syscall/editor";
 
-import {readPage, writePage} from "plugos-silverbullet-syscall/space";
+import {listPages, readPage, writePage,} from "plugos-silverbullet-syscall/space";
 import {invokeFunctionOnServer} from "plugos-silverbullet-syscall/system";
 import {scanPrefixGlobal} from "plugos-silverbullet-syscall";
 
 export const queryRegex =
-  /(<!--\s*#query\s+(?<table>\w+)\s*(filter\s+["'“”‘’](?<filter>[^"'“”‘’]+)["'“”‘’])?\s*(group by\s+(?<groupBy>\w+))?\s*-->)(.+?)(<!--\s*#end\s*-->)/gs;
+  /(<!--\s*#query\s+(?<table>\w+)\s*(filter\s+["'“”‘’](?<filter>[^"'“”‘’]+)["'“”‘’])?\s*\s*(order by\s+(?<orderBy>\w+)(?<orderDesc>\s+desc)?)?(group by\s+(?<groupBy>\w+))?\s*(limit\s+(?<limit>\d+))?\s*-->)(.+?)(<!--\s*#end\s*-->)/gs;
 
 export function whiteOutQueries(text: string): string {
   return text.replaceAll(queryRegex, (match) =>
@@ -40,11 +40,38 @@ export async function updateMaterializedQueriesCommand() {
 export async function updateMaterializedQueriesOnPage(pageName: string) {
   let { text } = await readPage(pageName);
   text = await replaceAsync(text, queryRegex, async (match, ...args) => {
-    let { table, filter, groupBy } = args[args.length - 1];
+    let { table, filter, groupBy, limit, orderBy, orderDesc } =
+      args[args.length - 1];
     const startQuery = args[0];
     const endQuery = args[args.length - 4];
     let results = [];
     switch (table) {
+      case "page":
+        let pages = await listPages();
+        if (orderBy) {
+          pages = pages.sort((a: any, b: any) => {
+            console.log(a, orderBy, a[orderBy]);
+            if (a[orderBy] === b[orderBy]) {
+              return 0;
+            }
+            if (a[orderBy] < b[orderBy]) {
+              return !!orderDesc ? 1 : -1;
+            } else {
+              return !!orderDesc ? -1 : 1;
+            }
+          });
+        }
+        let matchCount = 0;
+        for (let pageMeta of pages) {
+          if (!filter || (filter && pageMeta.name.includes(filter))) {
+            matchCount++;
+            results.push(`* [[${pageMeta.name}]]`);
+            if (limit && matchCount === +limit) {
+              break;
+            }
+          }
+        }
+        return `${startQuery}\n${results.join("\n")}\n${endQuery}`;
       case "task":
         for (let {
           key,
diff --git a/plugs/core/navigate.ts b/plugs/core/navigate.ts
index 1cf36351..45859089 100644
--- a/plugs/core/navigate.ts
+++ b/plugs/core/navigate.ts
@@ -3,8 +3,7 @@ import {updateMaterializedQueriesCommand} from "./materialized_queries";
 import {getCursor, getText, navigate as navigateTo, openUrl,} from "plugos-silverbullet-syscall/editor";
 import {taskToggleAtPos} from "../tasks/task";
 import {parseMarkdown} from "plugos-silverbullet-syscall/markdown";
-import {nodeAtPos} from "../lib/tree";
-import type {MarkdownTree} from "../../common/tree";
+import {MarkdownTree, nodeAtPos} from "../lib/tree";
 
 const materializedQueryPrefix = /<!--\s*#query\s+/;
 
@@ -34,14 +33,14 @@ async function actionClickOrActionEnter(mdTree: MarkdownTree | null) {
       await openUrl(mdTree.children![4].children![0].text!);
       break;
     case "TaskMarker":
-      await taskToggleAtPos(mdTree.from + 1);
+      await taskToggleAtPos(mdTree.from! + 1);
       break;
   }
 }
 
 export async function linkNavigate() {
   let mdTree = await parseMarkdown(await getText());
-  let newNode = await nodeAtPos(mdTree, await getCursor());
+  let newNode = nodeAtPos(mdTree, await getCursor());
   await actionClickOrActionEnter(newNode);
 }
 
diff --git a/plugs/emoji/emoji.ts b/plugs/emoji/emoji.ts
index 8b2f2039..660f6daa 100644
--- a/plugs/emoji/emoji.ts
+++ b/plugs/emoji/emoji.ts
@@ -1,11 +1,11 @@
 // @ts-ignore
 import emojis from "./emoji.json";
-import { matchBefore } from "plugos-silverbullet-syscall/editor";
+import {matchBefore} from "plugos-silverbullet-syscall/editor";
 
 const emojiMatcher = /\(([^\)]+)\)\s+(.+)$/;
 
 export async function emojiCompleter() {
-  let prefix = await matchBefore(":[\\w\\s]*");
+  let prefix = await matchBefore(":[\\w]+");
   if (!prefix) {
     return null;
   }
diff --git a/plugs/lib/tree.test.ts b/plugs/lib/tree.test.ts
index ef9da1f4..114ce589 100644
--- a/plugs/lib/tree.test.ts
+++ b/plugs/lib/tree.test.ts
@@ -1,6 +1,6 @@
 import {expect, test} from "@jest/globals";
 import {parse} from "../../common/tree";
-import {addParentPointers, collectNodesMatching, findParentMatching, nodeAtPos, render,} from "./tree";
+import {addParentPointers, collectNodesMatching, findParentMatching, nodeAtPos, renderMarkdown,} from "./tree";
 
 const mdTest1 = `
 # Heading
@@ -45,7 +45,7 @@ test("Run a Node sandbox", async () => {
   expect(allTodos.length).toBe(2);
 
   // Render back into markdown should be equivalent
-  expect(render(mdTree)).toBe(mdTest1);
+  expect(renderMarkdown(mdTree)).toBe(mdTest1);
 
   let mdTree2 = parse(mdTest2);
   console.log(JSON.stringify(mdTree2, null, 2));
diff --git a/plugs/lib/tree.ts b/plugs/lib/tree.ts
index ba2d4470..4680ee89 100644
--- a/plugs/lib/tree.ts
+++ b/plugs/lib/tree.ts
@@ -1,7 +1,7 @@
 export type MarkdownTree = {
   type?: string; // undefined === text node
-  from: number;
-  to: number;
+  from?: number;
+  to?: number;
   text?: string;
   children?: MarkdownTree[];
   parent?: MarkdownTree;
@@ -57,6 +57,30 @@ export function collectNodesMatching(
   return results;
 }
 
+export function replaceNodesMatching(
+  mdTree: MarkdownTree,
+  substituteFn: (mdTree: MarkdownTree) => MarkdownTree | null | undefined
+) {
+  let subst = substituteFn(mdTree);
+  if (subst !== undefined) {
+    if (!mdTree.parent) {
+      throw Error("Need parent pointers for this");
+    }
+    let parentChildren = mdTree.parent.children!;
+    let pos = parentChildren.indexOf(mdTree);
+    if (subst) {
+      parentChildren.splice(pos, 1, subst);
+    } else {
+      // null = delete
+      parentChildren.splice(pos, 1);
+    }
+  } else if (mdTree.children) {
+    for (let child of mdTree.children) {
+      replaceNodesMatching(child, substituteFn);
+    }
+  }
+}
+
 export function findNodeMatching(
   mdTree: MarkdownTree,
   matchFn: (mdTree: MarkdownTree) => boolean
@@ -69,7 +93,7 @@ export function nodeAtPos(
   mdTree: MarkdownTree,
   pos: number
 ): MarkdownTree | null {
-  if (pos < mdTree.from || pos > mdTree.to) {
+  if (pos < mdTree.from! || pos > mdTree.to!) {
     return null;
   }
   if (!mdTree.children) {
@@ -89,13 +113,13 @@ export function nodeAtPos(
 }
 
 // Turn MarkdownTree back into regular markdown text
-export function render(mdTree: MarkdownTree): string {
+export function renderMarkdown(mdTree: MarkdownTree): string {
   let pieces: string[] = [];
   if (mdTree.text !== undefined) {
     return mdTree.text;
   }
   for (let child of mdTree.children!) {
-    pieces.push(render(child));
+    pieces.push(renderMarkdown(child));
   }
   return pieces.join("");
 }
diff --git a/plugs/markdown/markdown.plug.yaml b/plugs/markdown/markdown.plug.yaml
index d3496a37..66f5eb29 100644
--- a/plugs/markdown/markdown.plug.yaml
+++ b/plugs/markdown/markdown.plug.yaml
@@ -1,6 +1,12 @@
 functions:
-  mdTest:
-    path: "./markdown.ts:renderMarkdown"
-    env: client
+  toggle:
+    path: "./markdown.ts:togglePreview"
     command:
-      name: "Markdown: Render"
+      name: "Toggle Markdown Preview"
+  preview:
+    path: "./markdown.ts:updateMarkdownPreview"
+    env: client
+    events:
+      - plug:load
+      - editor:updated
+      - editor:pageSwitched
diff --git a/plugs/markdown/markdown.ts b/plugs/markdown/markdown.ts
index e5b0e7e1..8e42e43b 100644
--- a/plugs/markdown/markdown.ts
+++ b/plugs/markdown/markdown.ts
@@ -1,5 +1,8 @@
 import MarkdownIt from "markdown-it";
-import { getText, showRhs } from "plugos-silverbullet-syscall/editor";
+import {getText, hideRhs, showRhs} from "plugos-silverbullet-syscall/editor";
+import * as clientStore from "plugos-silverbullet-syscall/clientStore";
+import {parseMarkdown} from "plugos-silverbullet-syscall/markdown";
+import {addParentPointers, renderMarkdown, replaceNodesMatching,} from "../lib/tree";
 
 var taskLists = require("markdown-it-task-lists");
 
@@ -9,8 +12,45 @@ const md = new MarkdownIt({
   typographer: true,
 }).use(taskLists);
 
-export async function renderMarkdown() {
+export async function togglePreview() {
+  let currentValue = !!(await clientStore.get("enableMarkdownPreview"));
+  await clientStore.set("enableMarkdownPreview", !currentValue);
+  if (!currentValue) {
+    updateMarkdownPreview();
+  } else {
+    hideMarkdownPreview();
+  }
+}
+
+function encodePageUrl(name: string): string {
+  return name.replaceAll(" ", "_");
+}
+
+export async function updateMarkdownPreview() {
+  if (!(await clientStore.get("enableMarkdownPreview"))) {
+    return;
+  }
   let text = await getText();
-  let html = md.render(text);
+  let mdTree = await parseMarkdown(text);
+  // console.log("The tree", mdTree);
+  addParentPointers(mdTree);
+  replaceNodesMatching(mdTree, (n) => {
+    if (n.type === "WikiLink") {
+      const page = n.children![1].children![0].text!;
+      return {
+        // HACK
+        text: `[${page}](/${encodePageUrl(page)})`,
+      };
+    }
+    // Simply get rid of these
+    if (n.type === "CommentBlock" || n.type === "Comment") {
+      return null;
+    }
+  });
+  let html = md.render(renderMarkdown(mdTree));
   await showRhs(`<html><body>${html}</body></html>`);
 }
+
+async function hideMarkdownPreview() {
+  await hideRhs();
+}
diff --git a/plugs/tasks/task.ts b/plugs/tasks/task.ts
index c76fb00d..9e36c702 100644
--- a/plugs/tasks/task.ts
+++ b/plugs/tasks/task.ts
@@ -5,8 +5,8 @@ import {whiteOutQueries} from "../core/materialized_queries";
 import {batchSet} from "plugos-silverbullet-syscall/index";
 import {readPage, writePage} from "plugos-silverbullet-syscall/space";
 import {parseMarkdown} from "plugos-silverbullet-syscall/markdown";
-import {dispatch, getText,} from "plugos-silverbullet-syscall/editor";
-import {addParentPointers, collectNodesMatching, nodeAtPos, render,} from "../lib/tree";
+import {dispatch, getText} from "plugos-silverbullet-syscall/editor";
+import {addParentPointers, collectNodesMatching, nodeAtPos, renderMarkdown,} from "../lib/tree";
 
 type Task = {
   task: string;
@@ -22,7 +22,7 @@ export async function indexTasks({ name, text }: IndexEvent) {
   let mdTree = await parseMarkdown(text);
   addParentPointers(mdTree);
   collectNodesMatching(mdTree, (n) => n.type === "Task").forEach((n) => {
-    let task = n.children!.slice(1).map(render).join("").trim();
+    let task = n.children!.slice(1).map(renderMarkdown).join("").trim();
     let complete = n.children![0].children![0].text! !== "[ ]";
 
     let value: Task = {
@@ -32,7 +32,7 @@ export async function indexTasks({ name, text }: IndexEvent) {
     let taskIndex = n.parent!.children!.indexOf(n);
     let nestedItems = n.parent!.children!.slice(taskIndex + 1);
     if (nestedItems.length > 0) {
-      value.nested = nestedItems.map(render).join("").trim();
+      value.nested = nestedItems.map(renderMarkdown).join("").trim();
     }
     tasks.push({
       key: `task:${n.from}`,
@@ -93,8 +93,11 @@ export async function taskToggleAtPos(pos: number) {
           return;
         }
         taskMarkerNode.children![0].text = changeTo;
-        console.log("This will be the new marker", render(taskMarkerNode));
-        text = render(referenceMdTree);
+        console.log(
+          "This will be the new marker",
+          renderMarkdown(taskMarkerNode)
+        );
+        text = renderMarkdown(referenceMdTree);
         console.log("Updated reference paged text", text);
         await writePage(page, text);
       }
diff --git a/webapp/components/panel.html b/webapp/components/panel.html
new file mode 100644
index 00000000..4f5632a9
--- /dev/null
+++ b/webapp/components/panel.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link href="panel.scss" rel="stylesheet" />
+    <base target="_top">
+    <script type="module">
+        window.addEventListener("message", (message) => {
+            const data = message.data;
+            switch(data.type) {
+                case "html":
+                    document.body.innerHTML = data.html;
+                    break;
+            }
+        })
+    </script>
+</head>
+<body>
+Send me HTML
+</body>
+</html>
diff --git a/webapp/components/panel.scss b/webapp/components/panel.scss
new file mode 100644
index 00000000..f93a39e6
--- /dev/null
+++ b/webapp/components/panel.scss
@@ -0,0 +1,4 @@
+body {
+  background: white;
+  font-family: "Menlo";
+}
diff --git a/webapp/components/panel.tsx b/webapp/components/panel.tsx
index e34813ae..363916f3 100644
--- a/webapp/components/panel.tsx
+++ b/webapp/components/panel.tsx
@@ -1,12 +1,32 @@
-import { useRef } from "react";
+import {useEffect, useRef} from "react";
+// @ts-ignore
+import iframeHtml from "bundle-text:./panel.html";
+import {Simulate} from "react-dom/test-utils";
 
 export function Panel({ html }: { html: string }) {
   const iFrameRef = useRef<HTMLIFrameElement>(null);
-  // @ts-ignore
-  window.iframeRef = iFrameRef;
+  useEffect(() => {
+    function loadContent() {
+      if (iFrameRef.current?.contentWindow) {
+        iFrameRef.current.contentWindow.postMessage({
+          type: "html",
+          html: html,
+        });
+      }
+    }
+    if (!iFrameRef.current) {
+      return;
+    }
+    let iframe = iFrameRef.current;
+    iframe.onload = loadContent;
+    loadContent();
+    return () => {
+      iframe.onload = null;
+    };
+  }, [html]);
   return (
     <div className="panel">
-      <iframe srcDoc={html} ref={iFrameRef} />
+      <iframe srcDoc={iframeHtml} ref={iFrameRef} />
     </div>
   );
 }
diff --git a/webapp/components/status_bar.tsx b/webapp/components/status_bar.tsx
index 463eb8ff..62246ffc 100644
--- a/webapp/components/status_bar.tsx
+++ b/webapp/components/status_bar.tsx
@@ -1,4 +1,4 @@
-import { EditorView } from "@codemirror/view";
+import {EditorView} from "@codemirror/view";
 import * as util from "../util";
 
 export function StatusBar({ editorView }: { editorView?: EditorView }) {
@@ -11,7 +11,9 @@ export function StatusBar({ editorView }: { editorView?: EditorView }) {
   }
   return (
     <div id="bottom">
-      {wordCount} words | {readingTime} min
+      <div className="inner">
+        {wordCount} words | {readingTime} min
+      </div>
     </div>
   );
 }
diff --git a/webapp/editor.tsx b/webapp/editor.tsx
index 175d0428..fd9e2ff4 100644
--- a/webapp/editor.tsx
+++ b/webapp/editor.tsx
@@ -6,18 +6,18 @@ import {bracketMatching} from "@codemirror/matchbrackets";
 import {searchKeymap} from "@codemirror/search";
 import {EditorSelection, EditorState} from "@codemirror/state";
 import {
-    drawSelection,
-    dropCursor,
-    EditorView,
-    highlightSpecialChars,
-    KeyBinding,
-    keymap,
-    ViewPlugin,
-    ViewUpdate,
+  drawSelection,
+  dropCursor,
+  EditorView,
+  highlightSpecialChars,
+  KeyBinding,
+  keymap,
+  ViewPlugin,
+  ViewUpdate,
 } from "@codemirror/view";
 import React, {useEffect, useReducer} from "react";
 import ReactDOM from "react-dom";
-import {createSandbox as createIFrameSandbox} from "../plugos/environments/iframe_sandbox";
+import {createSandbox as createIFrameSandbox} from "../plugos/environments/webworker_sandbox";
 import {AppEvent, AppEventDispatcher, ClickEvent} from "./app_event";
 import * as commands from "./commands";
 import {CommandPalette} from "./components/command_palette";
@@ -46,6 +46,8 @@ import {SlashCommandHook} from "./hooks/slash_command";
 import {CompleterHook} from "./hooks/completer";
 import {pasteLinkExtension} from "./editor_paste";
 import {markdownSyscalls} from "../common/syscalls/markdown";
+import {clientStoreSyscalls} from "./syscalls/clientStore";
+import {StatusBar} from "./components/status_bar";
 
 class PageState {
   scrollTop: number;
@@ -71,6 +73,9 @@ export class Editor implements AppEventDispatcher {
   pageNavigator: PathPageNavigator;
   eventHook: EventHook;
   saveTimeout: any;
+  debouncedUpdateEvent = throttle(() => {
+    this.eventHook.dispatchEvent("editor:updated");
+  }, 1000);
   private system = new System<SilverBulletHooks>("client");
 
   constructor(space: Space, parent: Element) {
@@ -114,6 +119,7 @@ export class Editor implements AppEventDispatcher {
     this.system.registerSyscalls([], indexerSyscalls(this.space));
     this.system.registerSyscalls([], systemSyscalls(this.space));
     this.system.registerSyscalls([], markdownSyscalls());
+    this.system.registerSyscalls([], clientStoreSyscalls());
   }
 
   get currentPage(): string | undefined {
@@ -357,6 +363,7 @@ export class Editor implements AppEventDispatcher {
             update(update: ViewUpdate): void {
               if (update.docChanged) {
                 editor.viewDispatch({ type: "page-changed" });
+                editor.debouncedUpdateEvent();
                 editor.save();
               }
             }
@@ -438,6 +445,8 @@ export class Editor implements AppEventDispatcher {
       type: "page-loaded",
       name: pageName,
     });
+
+    await this.eventHook.dispatchEvent("editor:pageSwitched");
   }
 
   ViewComponent(): React.ReactElement {
@@ -494,6 +503,7 @@ export class Editor implements AppEventDispatcher {
           }}
         />
         <div id="editor" />
+        <StatusBar editorView={editor.editorView} />
       </div>
     );
   }
diff --git a/webapp/navigator.ts b/webapp/navigator.ts
index 9f85f53e..ccec8c39 100644
--- a/webapp/navigator.ts
+++ b/webapp/navigator.ts
@@ -1,4 +1,4 @@
-import { safeRun } from "./util";
+import {safeRun} from "./util";
 
 function encodePageUrl(name: string): string {
   return name.replaceAll(" ", "_");
@@ -33,7 +33,10 @@ export class PathPageNavigator {
         return;
       }
       safeRun(async () => {
-        await pageLoadCallback(this.getCurrentPage(), event && event.state.pos);
+        await pageLoadCallback(
+          this.getCurrentPage(),
+          event?.state && event.state.pos
+        );
         if (this.navigationResolve) {
           this.navigationResolve();
         }
diff --git a/webapp/styles/constants.scss b/webapp/styles/constants.scss
new file mode 100644
index 00000000..8500fc98
--- /dev/null
+++ b/webapp/styles/constants.scss
@@ -0,0 +1,3 @@
+$max-editor-width: 800px;
+$top-bar-height: 55px;
+$bottom-bar-height: 30px;
diff --git a/webapp/styles/editor.scss b/webapp/styles/editor.scss
index 357f39d2..1f371d9d 100644
--- a/webapp/styles/editor.scss
+++ b/webapp/styles/editor.scss
@@ -1,3 +1,9 @@
+@import "constants.scss";
+
+div.rhs-open #editor .cm-editor .cm-content {
+  max-width: 550px;
+}
+
 .cm-editor {
   width: 100%;
   height: 100%;
@@ -6,7 +12,7 @@
   .cm-content {
     font-family: var(--editor-font);
     margin: auto;
-    max-width: 800px;
+    max-width: $max-editor-width;
   }
 
   .other-cursor {
diff --git a/webapp/styles/main.scss b/webapp/styles/main.scss
index bfa044d3..be5a5d53 100644
--- a/webapp/styles/main.scss
+++ b/webapp/styles/main.scss
@@ -1,5 +1,7 @@
 @use "editor.scss";
 @use "filter_box.scss";
+@import "constants";
+
 
 :root {
   --ident: 18px;
@@ -19,25 +21,24 @@ body {
 
 .panel {
   position: absolute;
-  top: 55px;
-  bottom: 0;
+  top: $top-bar-height + 1px;
+  bottom: $bottom-bar-height;
   right: 0;
-  width: 400px;
+  width: 50%;
   z-index: 20;
-  background: #efefef;
 
   iframe {
     border: 0;
     width: 100%;
     height: 100%;
-    padding: 10px;
-    scroll: auto;
+    padding: 0px;
+    margin: 0;
   }
 }
 
 #top {
-  height: 55px;
-  position: absolute;
+  height: $top-bar-height;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
@@ -47,7 +48,7 @@ body {
 
   .inner {
     padding-top: 12px;
-    max-width: 800px;
+    max-width: $max-editor-width;
     font-size: 28px;
     margin: auto;
 
@@ -82,19 +83,40 @@ body {
 
 #editor {
   position: absolute;
-  top: 55px;
-  bottom: 50px;
+  top: $top-bar-height;
+  bottom: $bottom-bar-height;
   left: 0;
   right: 0;
   overflow-y: hidden;
 }
 
 div.rhs-open #editor {
-  right: 350px;
+  right: 50%;
 }
 
-@media only screen and (max-width: 800px) {
+div.rhs-open #top .inner {
+  max-width: 550px;
+  padding-right: 50%;
+}
+
+@media only screen and (max-width: $max-editor-width) {
   .cm-editor .cm-content {
     margin: 0 10px !important;
   }
 }
+
+#bottom {
+  height: $bottom-bar-height;
+  background-color: #ccc;
+  position: fixed;
+  text-align: right;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgb(213, 213, 213);
+  border-top: rgb(193, 193, 193) 1px solid;
+
+  .inner {
+    padding: 5px;
+  }
+}
diff --git a/webapp/syscalls/clientStore.ts b/webapp/syscalls/clientStore.ts
new file mode 100644
index 00000000..a7fbfc7d
--- /dev/null
+++ b/webapp/syscalls/clientStore.ts
@@ -0,0 +1,13 @@
+import {transportSyscalls} from "../../plugos/syscalls/transport";
+import {SysCallMapping} from "../../plugos/system";
+import {storeSyscalls} from "../../plugos/syscalls/store.dexie_browser";
+
+export function clientStoreSyscalls(): SysCallMapping {
+  const storeCalls = storeSyscalls("local", "localData");
+  return transportSyscalls(
+    ["clientStore.get", "clientStore.set", "clientStore.delete"],
+    (ctx, name, ...args) => {
+      return storeCalls[name.replace("clientStore.", "store.")](ctx, ...args);
+    }
+  );
+}
diff --git a/webapp/syscalls/editor.ts b/webapp/syscalls/editor.ts
index 1c562b6e..623ad3de 100644
--- a/webapp/syscalls/editor.ts
+++ b/webapp/syscalls/editor.ts
@@ -1,5 +1,4 @@
 import {Editor} from "../editor";
-import {syntaxTree} from "@codemirror/language";
 import {Transaction} from "@codemirror/state";
 import {SysCallMapping} from "../../plugos/system";
 
@@ -58,6 +57,11 @@ export function editorSyscalls(editor: Editor): SysCallMapping {
         html: html,
       });
     },
+    "editor.hideRhs": (ctx, html: string) => {
+      editor.viewDispatch({
+        type: "hide-rhs",
+      });
+    },
     "editor.insertAtPos": (ctx, text: string, pos: number) => {
       editor.editorView!.dispatch({
         changes: {
@@ -95,27 +99,7 @@ export function editorSyscalls(editor: Editor): SysCallMapping {
         },
       });
     },
-    "editor.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,
-          };
-        }
-      }
-    },
-    "editor.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);
-    },
+
     "editor.matchBefore": (
       ctx,
       regexp: string
@@ -135,18 +119,6 @@ export function editorSyscalls(editor: Editor): SysCallMapping {
       }
       return null;
     },
-    "editor.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,
-        };
-      }
-    },
     "editor.dispatch": (ctx, change: Transaction) => {
       editor.editorView!.dispatch(change);
     },