From 6c943bacd0a57644aad71ae0d2f8e2ccc24ae6cf Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Sat, 9 Apr 2022 14:57:59 +0200
Subject: [PATCH] Markdown plugin improvements

---
 plugs/ghost/ghost.ts         |  9 +++---
 plugs/markdown/markdown.ts   | 54 ++++++++++++++++++++++++++++++------
 webapp/components/panel.html |  1 -
 webapp/components/panel.scss |  4 ---
 4 files changed, 50 insertions(+), 18 deletions(-)
 delete mode 100644 webapp/components/panel.scss

diff --git a/plugs/ghost/ghost.ts b/plugs/ghost/ghost.ts
index 0bd2e49..3a166f5 100644
--- a/plugs/ghost/ghost.ts
+++ b/plugs/ghost/ghost.ts
@@ -3,6 +3,7 @@ import { json } from "plugos-syscall/fetch";
 import YAML from "yaml";
 import { invokeFunction } from "plugos-silverbullet-syscall/system";
 import { getCurrentPage, getText } from "plugos-silverbullet-syscall/editor";
+import { cleanMarkdown } from "../markdown/markdown";
 
 type Post = {
   id: string;
@@ -153,14 +154,14 @@ const publishedPostRegex =
   /<!-- #ghost-id:\s*(\w+)\s*-->\n#\s*([^\n]+)\n([^$]+)$/;
 const newPostRegex = /#\s*([^\n]+)\n([^$]+)$/;
 
-function markdownToPost(text: string): Partial<Post> {
+async function markdownToPost(text: string): Promise<Partial<Post>> {
   let match = publishedPostRegex.exec(text);
   if (match) {
     let [, id, title, content] = match;
     return {
       id,
       title,
-      mobiledoc: markdownToMobileDoc(content),
+      mobiledoc: markdownToMobileDoc(await cleanMarkdown(content)),
     };
   }
   match = newPostRegex.exec(text);
@@ -169,7 +170,7 @@ function markdownToPost(text: string): Partial<Post> {
     return {
       title,
       status: "draft",
-      mobiledoc: markdownToMobileDoc(content),
+      mobiledoc: markdownToMobileDoc(await cleanMarkdown(content)),
     };
   }
   throw Error("Not a valid ghost post");
@@ -207,7 +208,7 @@ export async function publishPost(name: string, text: string) {
   let config = await getConfig();
   let admin = new GhostAdmin(config.url, config.adminKey);
   await admin.init();
-  let post = markdownToPost(text);
+  let post = await markdownToPost(text);
   post.slug = name.substring(config.pagePrefix.length);
   if (post.id) {
     await admin.updatePost(post);
diff --git a/plugs/markdown/markdown.ts b/plugs/markdown/markdown.ts
index 914f118..5650c71 100644
--- a/plugs/markdown/markdown.ts
+++ b/plugs/markdown/markdown.ts
@@ -2,7 +2,40 @@ import MarkdownIt from "markdown-it";
 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";
+import { renderMarkdown, replaceNodesMatching } from "../lib/tree";
+
+const css = `
+<style>
+body {
+  font-family: georgia,times,serif;
+  font-size: 14pt;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+blockquote {
+  border-left: 1px solid #333;
+  margin-left: 2px;
+  padding-left: 10px;
+}
+
+hr {
+    margin: 1em 0 1em 0;
+    text-align: center;
+    border-color: #777;
+    border-width: 0;
+    border-style: dotted;
+}
+
+hr:after {
+    content: "···";
+    letter-spacing: 1em;
+}
+
+</style>
+`;
 
 var taskLists = require("markdown-it-task-lists");
 
@@ -26,14 +59,8 @@ function encodePageUrl(name: string): string {
   return name.replaceAll(" ", "_");
 }
 
-export async function updateMarkdownPreview() {
-  if (!(await clientStore.get("enableMarkdownPreview"))) {
-    return;
-  }
-  let text = await getText();
+export async function cleanMarkdown(text: string) {
   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!;
@@ -48,7 +75,16 @@ export async function updateMarkdownPreview() {
     }
   });
   let html = md.render(renderMarkdown(mdTree));
-  await showRhs(`<html><body>${html}</body></html>`, 2);
+  return html;
+}
+
+export async function updateMarkdownPreview() {
+  if (!(await clientStore.get("enableMarkdownPreview"))) {
+    return;
+  }
+  let text = await getText();
+  let html = await cleanMarkdown(text);
+  await showRhs(`<html><head>${css}</head><body>${html}</body></html>`, 2);
 }
 
 async function hideMarkdownPreview() {
diff --git a/webapp/components/panel.html b/webapp/components/panel.html
index 92e018a..8a583f6 100644
--- a/webapp/components/panel.html
+++ b/webapp/components/panel.html
@@ -2,7 +2,6 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <link href="panel.scss" rel="stylesheet"/>
     <base target="_top">
     <script src="panel_page.ts"/>
 </head>
diff --git a/webapp/components/panel.scss b/webapp/components/panel.scss
deleted file mode 100644
index f93a39e..0000000
--- a/webapp/components/panel.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-body {
-  background: white;
-  font-family: "Menlo";
-}