live preview

static/app.js

@@ -496,6 +496,9 @@ function renderEditor(body, owner) {
     sep(), toolbarBtn("—", "horizontalRule"),
   ]);
   const editorArea = el("div", { class: "editor" });
+  const previewArea = el("div", { class: "preview" });
+  const split = el("div", { class: "editor-split" }, [editorArea, previewArea]);
+  const previewBtn = el("button", { class: "btn ghost preview-toggle active", text: "Preview", title: "Toggle live preview", onclick: () => { split.classList.toggle("preview-hidden"); previewBtn.classList.toggle("active"); } });
   const status = el("div", { class: "status", text: "" });
   const hint = el("div", { class: "editor-hint" }, [
     el("p", { html: 'Tags: type <code>#tag</code> anywhere in your note to add a tag.' }),
@@ -508,9 +511,9 @@ function renderEditor(body, owner) {
   const attach = el("button", { class: "btn", text: "Attach", onclick: () => fileInput.click() });
 
   const wrap = el("div", { class: "editor-wrap" }, [
-    el("div", { class: "editor-topbar" }, [back, spaceSel, el("div", { class: "spacer" }), attach, hist, del, commonLabel, save]),
+    el("div", { class: "editor-topbar" }, [back, spaceSel, el("div", { class: "spacer" }), attach, hist, del, commonLabel, previewBtn, save]),
     toolbar,
-    editorArea,
+    split,
     hint,
     status,
   ]);
@@ -523,6 +526,18 @@ function renderEditor(body, owner) {
     content: marked.parse(body),
     autofocus: true,
   });
+
+  function updatePreview() {
+    const md = turndownService.turndown(state.editor.getHTML());
+    previewArea.innerHTML = marked.parse(md);
+  }
+  state.editor.on("update", updatePreview);
+  updatePreview();
+
+  previewArea.addEventListener("click", (e) => {
+    const a = e.target.closest("a");
+    if (a) e.preventDefault();
+  });
 }
 
 function sep() { return el("span", { class: "sep" }); }