From 55732bdfc25933bab26220ccd82fe5e172d9e673 Mon Sep 17 00:00:00 2001
From: grm <grm@eyesin.space>
Date: Tue, 15 Sep 2026 22:26:13 +0300
Subject: Give the editor a Markdown toolbar and preview, restyle the dashboard

The post/page/announcement editor was a bare textarea, so bloggers had to
know the Markdown syntax by heart. It now has a toolbar (bold, italic,
strike, heading cycle, quote, code, lists, rule, link box, insert file),
Ctrl+B/I/K, list continuation on Enter and a Write/Preview toggle that
renders the text through the same goldmark + bluemonday pipeline a save
uses (POST /b/{sub}/preview; nothing is stored). Every edit goes through
execCommand("insertText") so browser undo keeps working. The toolbar
stays hidden without JavaScript, leaving the old form untouched.

The dashboard moves from the "paper & ink" look to a lean one: neutral
surfaces, 1px borders, one blue accent, system sans, with custom
properties and flexbox/grid now allowed there (blog.css is unchanged).
Class names were kept so the templates barely change; a global [hidden]
rule keeps flex containers from overriding the hidden attribute.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A
---
 internal/web/templates/partials/editor.html | 177 ++++++++++++++++++++++++++--
 1 file changed, 167 insertions(+), 10 deletions(-)

(limited to 'internal/web/templates/partials/editor.html')

diff --git a/internal/web/templates/partials/editor.html b/internal/web/templates/partials/editor.html
index 4371624..33b2a1c 100644
--- a/internal/web/templates/partials/editor.html
+++ b/internal/web/templates/partials/editor.html
@@ -1,4 +1,36 @@
-{{define "editor"}}<textarea name="{{.name}}" id="ed-{{.name}}" rows="{{.rows}}"{{if .tall}} class="editor"{{end}}>{{.value}}</textarea>
+{{define "editor"}}<div class="editor" id="ed-{{.name}}-wrap">
+<div class="ed-toolbar" id="ed-{{.name}}-bar" hidden>
+  <span class="ed-group">
+    <button type="button" data-cmd="bold" title="{{t "Bold"}} (Ctrl+B)"><svg viewBox="0 0 16 16"><path d="M4 2h5a3.5 3.5 0 0 1 2.4 6 3.75 3.75 0 0 1-2.2 6.8H4zM6 4v3.5h3a1.75 1.75 0 0 0 0-3.5zm0 5.5V13h3.2a1.75 1.75 0 0 0 0-3.5z"/></svg></button>
+    <button type="button" data-cmd="italic" title="{{t "Italic"}} (Ctrl+I)"><svg viewBox="0 0 16 16"><path d="M6.5 2h6v2h-2l-2.5 8h2v2h-6v-2h2l2.5-8h-2z"/></svg></button>
+    <button type="button" data-cmd="strike" title="{{t "Strikethrough"}}"><svg viewBox="0 0 16 16"><path d="M2 7.5h12V9H2z"/><path d="M8 2c2.3 0 3.8 1 4.1 2.8l-1.9.3C10 4.2 9.2 3.7 8 3.7c-1.3 0-2 .5-2 1.3 0 .5.3.9 1.2 1.2H4.3C4 5.8 4 5.3 4 5c0-1.8 1.6-3 4-3zm3.9 8.4c0 1.9-1.6 3.1-4 3.1-2.5 0-4.1-1.2-4.4-3.2l1.9-.3c.2 1.1 1.1 1.7 2.5 1.7 1.3 0 2-.5 2-1.3 0-.2 0-.4-.1-.5h2c.1.2.1.4.1.5z"/></svg></button>
+  </span>
+  <span class="ed-group">
+    <button type="button" data-cmd="heading" title="{{t "Heading"}}"><svg viewBox="0 0 16 16"><path d="M3 2h2v5h6V2h2v12h-2V9H5v5H3z"/></svg></button>
+    <button type="button" data-cmd="quote" title="{{t "Quote"}}"><svg viewBox="0 0 16 16"><path d="M3 4h4v4H5v1.5c0 .6.4 1 1 1h1V12H6a3 3 0 0 1-3-3zm6 0h4v4h-2v1.5c0 .6.4 1 1 1h1V12h-1a3 3 0 0 1-3-3z"/></svg></button>
+    <button type="button" data-cmd="code" title="{{t "Code"}}"><svg viewBox="0 0 16 16"><path d="M5.5 3.5 1 8l4.5 4.5 1.4-1.4L3.8 8l3.1-3.1zm5 0L9.1 4.9 12.2 8l-3.1 3.1 1.4 1.4L15 8z"/></svg></button>
+  </span>
+  <span class="ed-group">
+    <button type="button" data-cmd="ul" title="{{t "Bulleted list"}}"><svg viewBox="0 0 16 16"><path d="M2 3h2v2H2zm4 0h8v2H6zM2 7h2v2H2zm4 0h8v2H6zm-4 4h2v2H2zm4 0h8v2H6z"/></svg></button>
+    <button type="button" data-cmd="ol" title="{{t "Numbered list"}}"><svg viewBox="0 0 16 16"><path d="M2.2 2h1.3v3.5H2.4v-2.3l-.7.4V2.5zM6 3h8v2H6zm-4.1 4.2c0-.8.6-1.3 1.5-1.3s1.4.5 1.4 1.2c0 .5-.3.9-.8 1.3l-.7.6h1.6v1H1.9v-.8L3.3 8c.3-.3.4-.5.4-.7 0-.3-.2-.4-.4-.4-.3 0-.5.2-.5.5zM6 7h8v2H6zm-4.2 4.1c0-.7.6-1.1 1.5-1.1.8 0 1.4.4 1.4 1 0 .4-.3.7-.7.8.5.1.8.5.8.9 0 .7-.6 1.2-1.5 1.2-.9 0-1.5-.4-1.6-1.1h1c0 .2.2.4.5.4s.5-.1.5-.4-.2-.4-.6-.4h-.3v-.8h.3c.3 0 .5-.1.5-.4 0-.2-.2-.3-.4-.3s-.4.1-.4.3zM6 11h8v2H6z"/></svg></button>
+    <button type="button" data-cmd="hr" title="{{t "Horizontal rule"}}"><svg viewBox="0 0 16 16"><path d="M2 7h12v2H2z"/></svg></button>
+  </span>
+  <span class="ed-group">
+    <button type="button" data-cmd="link" title="{{t "Link"}} (Ctrl+K)"><svg viewBox="0 0 16 16"><path d="M6.4 9.6a3.5 3.5 0 0 0 4.9 0l2-2a3.5 3.5 0 0 0-4.9-5l-1 1 1.1 1.1 1-1a2 2 0 0 1 2.8 2.9l-2 2a2 2 0 0 1-2.9 0zm3.2-3.2a3.5 3.5 0 0 0-4.9 0l-2 2a3.5 3.5 0 0 0 4.9 5l1-1-1.1-1.1-1 1a2 2 0 0 1-2.8-2.9l2-2a2 2 0 0 1 2.9 0z"/></svg></button>
+    <button type="button" data-cmd="file" title="{{t "Insert file"}}"><svg viewBox="0 0 16 16"><path d="M10.5 1.5a3.5 3.5 0 0 1 2.5 6l-5.6 5.6a2.25 2.25 0 0 1-3.2-3.2L9.6 4.6 10.7 5.7l-5.4 5.3a.75.75 0 0 0 1.1 1.1L12 6.4a2 2 0 0 0-2.9-2.8L3.6 9.1 2.5 8l5.5-5.5a3.5 3.5 0 0 1 2.5-1z"/></svg></button>
+  </span>
+  <span class="ed-modes">
+    <button type="button" data-mode="write" aria-pressed="true">{{t "Write"}}</button><button type="button" data-mode="preview" aria-pressed="false">{{t "Preview"}}</button>
+  </span>
+</div>
+<div class="ed-linkbox" id="ed-{{.name}}-link" hidden>
+  <input type="url" placeholder="https://…" aria-label="URL" data-link="url">
+  <input type="text" placeholder="{{t "link text"}}" aria-label="{{t "link text"}}" data-link="text">
+  <button type="button" class="small" data-link="ok">{{t "Insert link"}}</button>
+  <button type="button" class="small secondary" data-link="cancel">{{t "Cancel"}}</button>
+</div>
+<textarea name="{{.name}}" id="ed-{{.name}}" rows="{{.rows}}"{{if .tall}} class="tall"{{end}}>{{.value}}</textarea>
+<div class="ed-preview" id="ed-{{.name}}-preview" hidden></div>
 <div class="editor-tools">
   <label class="upload">{{t "Insert file"}} <input type="file" name="inline_file" id="ed-{{.name}}-file"></label>
   <span class="upload-status" id="ed-{{.name}}-status"></span>
@@ -6,17 +38,142 @@
   <noscript><span class="muted small">{{t "The file is added at the end of the text when you save."}}</span></noscript>
 </div>
 {{template "mdhelp"}}
+</div>
 <script>
 (function () {
-  var ta = document.getElementById("ed-{{.name}}"), inp = document.getElementById("ed-{{.name}}-file"), st = document.getElementById("ed-{{.name}}-status");
-  if (!window.fetch || !window.FormData || !ta || !inp) return; // old browser: the file is uploaded on save instead
-  function insert(text) {
-    var s = ta.selectionStart, e = ta.selectionEnd, pre = ta.value.slice(0, s), post = ta.value.slice(e);
-    var chunk = (pre && !/\n$/.test(pre) ? "\n" : "") + text + "\n";
-    ta.value = pre + chunk + post;
-    ta.selectionStart = ta.selectionEnd = (pre + chunk).length;
-    ta.focus();
+  var id = "ed-{{.name}}", ta = document.getElementById(id), inp = document.getElementById(id + "-file"), st = document.getElementById(id + "-status"),
+      wrap = document.getElementById(id + "-wrap"), bar = document.getElementById(id + "-bar"), lk = document.getElementById(id + "-link"), pv = document.getElementById(id + "-preview");
+  if (!window.fetch || !window.FormData || !ta || !inp) return; // old browser: plain textarea, the file is uploaded on save
+  bar.hidden = false;
+  wrap.className = "editor js";
+
+  // ---- text primitives: everything goes through replace() so Ctrl+Z works
+  function setSel(s, e) { ta.focus(); ta.setSelectionRange(s, e); }
+  function replace(s, e, text) {
+    setSel(s, e);
+    var ok = false;
+    try { ok = document.execCommand(text ? "insertText" : "delete", false, text); } catch (err) {}
+    if (!ok || ta.value.slice(s, s + text.length) !== text) ta.value = ta.value.slice(0, s) + text + ta.value.slice(e);
+  }
+  function insertLine(text) { // a block on its own line, after the caret
+    var s = ta.selectionStart, pre = ta.value.slice(0, s), chunk = (pre && !/\n$/.test(pre) ? "\n" : "") + text + "\n";
+    replace(s, ta.selectionEnd, chunk);
+    setSel(s + chunk.length, s + chunk.length);
+  }
+  function wrapSel(before, after, ph) { // wrap the selection, or unwrap it when it already is
+    var s = ta.selectionStart, e = ta.selectionEnd, v = ta.value, sel = v.slice(s, e), bl = before.length, al = after.length;
+    if (sel.length >= bl + al && sel.slice(0, bl) === before && sel.slice(-al) === after) {
+      replace(s, e, sel.slice(bl, sel.length - al)); setSel(s, e - bl - al); return;
+    }
+    if (v.slice(s - bl, s) === before && v.slice(e, e + al) === after) {
+      replace(s - bl, e + al, sel); setSel(s - bl, e - bl); return;
+    }
+    var inner = sel || ph;
+    replace(s, e, before + inner + after);
+    setSel(s + bl, s + bl + inner.length);
+  }
+  function block() { // the whole lines the selection touches
+    var v = ta.value, s = ta.selectionStart, e = ta.selectionEnd, ls = v.lastIndexOf("\n", s - 1) + 1, le = v.indexOf("\n", e > s ? e - 1 : e);
+    if (le < 0) le = v.length;
+    return { s: ls, e: le, text: v.slice(ls, le) };
+  }
+  function prefixLines(strip, own, mark) { // toggle a line marker: off when every line has this one, else replace whatever strip matches
+    var b = block(), ls = b.text.split("\n"), on = ls.every(function (l) { return own.test(l); });
+    var out = ls.map(function (l, i) { l = l.replace(strip, ""); return on ? l : (typeof mark === "function" ? mark(i) : mark) + l; }).join("\n");
+    replace(b.s, b.e, out); setSel(b.s, b.s + out.length);
+  }
+  var listRe = /^[-*+] (\[[ x]\] )?|^\d+\. /;
+  var cmds = {
+    bold: function () { wrapSel("**", "**", {{t "bold"}}); },
+    italic: function () { wrapSel("_", "_", {{t "italic"}}); },
+    strike: function () { wrapSel("~~", "~~", {{t "text"}}); },
+    code: function () {
+      if (ta.value.slice(ta.selectionStart, ta.selectionEnd).indexOf("\n") >= 0) { var b = block(); replace(b.s, b.e, "```\n" + b.text + "\n```"); setSel(b.s + 4, b.s + 4 + b.text.length); }
+      else wrapSel("`", "`", {{t "code"}});
+    },
+    heading: function () { // cycles ## → ### → plain
+      var b = block(), m = /^(#{1,6}) /.exec(b.text), next = !m ? "## " : m[1].length === 2 ? "### " : "";
+      var out = next + b.text.replace(/^#{1,6} /, "");
+      replace(b.s, b.e, out); setSel(b.s + next.length, b.s + out.length);
+    },
+    quote: function () { prefixLines(/^> /, /^> /, "> "); },
+    ul: function () { prefixLines(listRe, /^[-*+] /, "- "); },
+    ol: function () { prefixLines(listRe, /^\d+\. /, function (i) { return (i + 1) + ". "; }); },
+    hr: function () { insertLine("\n---\n"); },
+    link: openLink,
+    file: function () { inp.click(); }
+  };
+  bar.addEventListener("click", function (ev) {
+    var b = ev.target.closest("button");
+    if (!b) return;
+    if (b.getAttribute("data-mode")) setMode(b.getAttribute("data-mode") === "preview");
+    else if (cmds[b.getAttribute("data-cmd")]) cmds[b.getAttribute("data-cmd")]();
+  });
+
+  // ---- link box: replaces window.prompt, keeps the selection it was opened on
+  var linkSel = null, lkURL = lk.querySelector("[data-link=url]"), lkText = lk.querySelector("[data-link=text]");
+  function openLink() {
+    linkSel = [ta.selectionStart, ta.selectionEnd];
+    lkText.value = ta.value.slice(linkSel[0], linkSel[1]);
+    lkURL.value = "";
+    lk.hidden = false;
+    lkURL.focus();
+  }
+  function closeLink(insert) {
+    lk.hidden = true;
+    if (!insert || !linkSel) { setSel(linkSel ? linkSel[0] : 0, linkSel ? linkSel[1] : 0); return; }
+    var url = lkURL.value.trim(), text = lkText.value.trim() || url, md = "[" + text + "](" + url + ")";
+    replace(linkSel[0], linkSel[1], md);
+    setSel(linkSel[0] + md.length, linkSel[0] + md.length);
+    linkSel = null;
+  }
+  lk.addEventListener("click", function (ev) {
+    var b = ev.target.closest("button");
+    if (b) closeLink(b.getAttribute("data-link") === "ok" && lkURL.value.trim() !== "");
+  });
+  lk.addEventListener("keydown", function (ev) {
+    if (ev.key === "Enter") { ev.preventDefault(); if (lkURL.value.trim()) closeLink(true); }
+    else if (ev.key === "Escape") { ev.preventDefault(); closeLink(false); }
+  });
+
+  // ---- shortcuts and list continuation
+  ta.addEventListener("keydown", function (ev) {
+    if ((ev.ctrlKey || ev.metaKey) && !ev.altKey) {
+      var k = { b: "bold", i: "italic", k: "link" }[ev.key.toLowerCase()];
+      if (k) { ev.preventDefault(); cmds[k](); }
+      return;
+    }
+    if (ev.key !== "Enter" || ev.shiftKey || ta.selectionStart !== ta.selectionEnd) return;
+    var s = ta.selectionStart, v = ta.value, ls = v.lastIndexOf("\n", s - 1) + 1, m = /^(\s*)([-*+] (?:\[[ x]\] )?|(\d+)\. )(.*)$/.exec(v.slice(ls, s));
+    if (!m) return;
+    ev.preventDefault();
+    if (!m[4]) { replace(ls, s, ""); return; } // Enter on an empty item ends the list
+    var mark = m[3] ? (parseInt(m[3], 10) + 1) + ". " : m[2].replace("[x]", "[ ]");
+    replace(s, s, "\n" + m[1] + mark);
+  });
+
+  // ---- preview: the server renders exactly what a save would
+  var modes = bar.querySelectorAll("[data-mode]");
+  function setMode(preview) {
+    wrap.className = "editor js" + (preview ? " previewing" : "");
+    for (var i = 0; i < modes.length; i++) modes[i].setAttribute("aria-pressed", String((modes[i].getAttribute("data-mode") === "preview") === preview));
+    lk.hidden = true;
+    if (!preview) { pv.hidden = true; ta.hidden = false; ta.focus(); return; }
+    pv.style.minHeight = ta.offsetHeight + "px";
+    pv.innerHTML = "";
+    pv.hidden = false; ta.hidden = true;
+    st.textContent = {{t "Rendering…"}};
+    var fd = new FormData();
+    fd.append("_csrf", {{.csrf}});
+    fd.append("body", ta.value);
+    fetch({{.preview}}, { method: "POST", body: fd, credentials: "same-origin", headers: { Accept: "application/json" } })
+      .then(function (r) { return r.json().then(function (j) { if (!r.ok || j.error) throw new Error(j.error || r.statusText); return j; }); })
+      .then(function (j) { pv.innerHTML = j.html || "<p class=\"muted\">" + {{t "Nothing to show yet."}} + "</p>"; st.textContent = ""; })
+      .catch(function (err) { st.textContent = {{t "Could not render:"}} + " " + err.message; setMode(false); });
   }
+  pv.addEventListener("keydown", function (ev) { if (ev.key === "Escape") setMode(false); });
+
+  // ---- uploads: button, paste and drop all land at the caret
   function upload(file) {
     st.textContent = {{t "Uploading"}} + " " + file.name + "…";
     var fd = new FormData();
@@ -24,7 +181,7 @@
     fd.append("file", file);
     return fetch({{.upload}}, { method: "POST", body: fd, credentials: "same-origin", headers: { Accept: "application/json" } })
       .then(function (r) { return r.json().then(function (j) { if (!r.ok || j.error) throw new Error(j.error || {{t "upload failed"}}); return j; }); })
-      .then(function (j) { insert(j.markdown); st.textContent = {{t "Inserted"}} + " " + j.filename + "."; inp.value = ""; })
+      .then(function (j) { insertLine(j.markdown); st.textContent = {{t "Inserted"}} + " " + j.filename + "."; inp.value = ""; })
       .catch(function (err) { st.textContent = {{t "Could not upload:"}} + " " + err.message; });
   }
   function uploadAll(files) { // one after the other, so each lands where the caret is
-- 
cgit v1.2.3