Enable writing on the settings page from plugs

packages/plugs/lib/settings_page.ts

@@ -1,4 +1,5 @@
-import { readYamlPage } from "./yaml_page";
+import { flashNotification } from "@silverbulletmd/plugos-silverbullet-syscall/editor";
+import { readYamlPage, writeYamlPage } from "./yaml_page";
 
 /**
  * Convenience function to read a specific set of settings from the `SETTINGS` page as well as default values
@@ -10,13 +11,16 @@ import { readYamlPage } from "./yaml_page";
  * @returns an object with the same shape as `settings` but with non-default values override based on `SETTINGS`
  */
 
+const SETTINGS_PAGE = "SETTINGS";
+const SETTINGS_TEMPLATE = `This page contains settings for configuring SilverBullet and its Plugs:\n\`\`\`yaml\n\`\`\``; // might need \r\n for windows?
+
 export async function readSettings<T extends object>(settings: T): Promise<T> {
   try {
-    let allSettings = (await readYamlPage("SETTINGS", ["yaml"])) || {};
+    let allSettings = (await readYamlPage(SETTINGS_PAGE, ["yaml"])) || {};
     // TODO: I'm sure there's a better way to type this than "any"
     let collectedSettings: any = {};
     for (let [key, defaultVal] of Object.entries(settings)) {
-      if (allSettings[key]) {
+      if (key in allSettings) {
         collectedSettings[key] = allSettings[key];
       } else {
         collectedSettings[key] = defaultVal;
@@ -31,3 +35,24 @@ export async function readSettings<T extends object>(settings: T): Promise<T> {
     throw e;
   }
 }
+
+/**
+ * Convenience function to write a specific set of settings from the `SETTINGS` page.
+ * If the SETTiNGS page doesn't exist it will create it.
+ * @param settings 
+ */
+export async function writeSettings<T extends object>(settings: T) {
+  let readSettings = {};
+  try {
+    readSettings = (await readYamlPage(SETTINGS_PAGE, ["yaml"])) || {};
+  } catch (e: any) {
+    console.log("Couldn't read settings, generating a new settings page");
+    flashNotification("Creating a new SETTINGS page...", "info");
+  }
+  const writeSettings = {...readSettings, ...settings};
+  if(await writeYamlPage(SETTINGS_PAGE, writeSettings, SETTINGS_TEMPLATE)) {
+    flashNotification("SETTINGS page written successfully", "info");
+  } else {
+    flashNotification("SETTINGS page failed to update", "error");
+  }
+}

packages/plugs/lib/yaml_page.ts

@@ -1,6 +1,6 @@
-import { findNodeOfType, traverseTree } from "@silverbulletmd/common/tree";
+import { findNodeOfType, ParseTree, renderToText, replaceNodesMatching, traverseTree } from "@silverbulletmd/common/tree";
 import { parseMarkdown } from "@silverbulletmd/plugos-silverbullet-syscall/markdown";
-import { readPage } from "@silverbulletmd/plugos-silverbullet-syscall/space";
+import { readPage, writePage } from "@silverbulletmd/plugos-silverbullet-syscall/space";
 import YAML from "yaml";
 
 export async function readYamlPage(
@@ -40,3 +40,42 @@ export async function readYamlPage(
 
   return data;
 }
+
+export async function writeYamlPage(
+  pageName: string,
+  properties: any,
+  templateOnEmpty: string,
+): Promise<Boolean> {
+  let text;
+  try {
+    const page = await readPage(pageName);
+    text = page.text;
+  } catch {
+    // page doesn't exist, so let's create one.
+    text = templateOnEmpty;
+  }
+  const tree = await parseMarkdown(text);
+  // if we use any other language than yaml... how to create it?
+  const doc = new YAML.Document();
+  doc.contents = properties;
+  // generate a new node for the properties
+  const newCode = `\`\`\`yaml\n${doc.toString()}\n\`\`\``;
+  const subtree = await parseMarkdown(newCode);
+  // find the original set of properties and replace
+  let replaced = false;
+  replaceNodesMatching(tree, (node: ParseTree) => {
+    if (node.type !== 'FencedCode') {
+      return;
+    }
+    const codeinfoNode = findNodeOfType(node, "CodeInfo");
+    if (!codeinfoNode || codeinfoNode.children![0].text! !== "yaml") {
+      return;
+    }
+    replaced = true;
+    return subtree;
+  });
+  if (replaced) {
+    await writePage(pageName, renderToText(tree));
+  }
+  return replaced;
+}

packages/plugs/markdown/markdown.plug.yaml

@@ -14,3 +14,7 @@ functions:
       - editor:updated
       - editor:pageLoaded
       - editor:pageReloaded
+  switchSide:
+    path: "./preview.ts:switchSide"
+    command:
+      name: "Swith Preview to other Sidebar"

packages/plugs/markdown/markdown.ts

@@ -1,6 +1,8 @@
-import { hideRhs } from "@silverbulletmd/plugos-silverbullet-syscall/editor";
+import { hideRhs, hideLhs } from "@silverbulletmd/plugos-silverbullet-syscall/editor";
 import { invokeFunction } from "@silverbulletmd/plugos-silverbullet-syscall/system";
 import * as clientStore from "@silverbulletmd/plugos-silverbullet-syscall/clientStore";
+import { readSettings, writeSettings } from "@silverbulletmd/plugs/lib/settings_page";;
+
 
 export async function togglePreview() {
   let currentValue = !!(await clientStore.get("enableMarkdownPreview"));
@@ -13,5 +15,7 @@ export async function togglePreview() {
 }
 
 async function hideMarkdownPreview() {
-  await hideRhs();
+  const setting = await readSettings({previewOnRHS: true});
+  const hide = setting.previewOnRHS ? hideRhs : hideLhs;
+  await hide();
 }

packages/plugs/markdown/preview.ts

@@ -1,10 +1,14 @@
 import MarkdownIt from "markdown-it";
 import {
   getText,
+  showLhs,
   showRhs,
+  hideRhs,
+  hideLhs,
 } from "@silverbulletmd/plugos-silverbullet-syscall/editor";
 import * as clientStore from "@silverbulletmd/plugos-silverbullet-syscall/clientStore";
 import { cleanMarkdown } from "./util";
+import { readSettings, writeSettings } from "@silverbulletmd/plugs/lib/settings_page";
 
 const css = `
 <style>
@@ -76,9 +80,27 @@ export async function updateMarkdownPreview() {
   }
   let text = await getText();
   let cleanMd = await cleanMarkdown(text);
-  await showRhs(
+  const setting = await readSettings({previewOnRHS: true});
+  const show = setting.previewOnRHS ? showRhs : showLhs;
+  await show(
     `<html><head>${css}</head><body>${md.render(cleanMd)}</body></html>`,
     undefined,
     2
   );
 }
+
+export async function switchSide() {
+  const {previewOnRHS} = await readSettings({previewOnRHS: true});
+  const isVisible = await clientStore.get("enableMarkdownPreview");
+  if (isVisible) {
+    if (previewOnRHS){
+      hideRhs();
+    } else {
+      hideLhs();
+    }
+  }
+  await writeSettings({previewOnRHS: !previewOnRHS});
+  if (isVisible) {
+    updateMarkdownPreview();
+  }
+}