benjivers/notes Public Public: anyone can read this; nobody can change it.

// The vault, made an editor. The page arrives whole from the server; this

// adds what only a browser can: saving as you type, the reading view kept

// in step with the words, [[link]] completion, the quick switcher (⌘K),

// the keys, and the panels on a phone. Without it every page still reads

// and the editor still saves with its button.

import { render } from "./md.js";

const $ = (sel, root = document) => root.querySelector(sel);

const $$ = (sel, root = document) => [...root.querySelectorAll(sel)];

const mod = (e) => e.metaKey || e.ctrlKey;

const narrow = () => matchMedia("(max-width: 900px)").matches;

const store = {

  get(k) {

    try {

      return localStorage.getItem(k);

    } catch {

      return null;

    }

  },

  set(k, v) {

    try {

      localStorage.setItem(k, v);

    } catch {}

  },

};

/** The vault's titles, as the page last heard them. */

function vault() {

  try {

    return JSON.parse($("#vault")?.textContent ?? "[]");

  } catch {

    return [];

  }

}

const resolver = () => {

  const map = new Map(vault().map((n) => [n.title.toLowerCase(), n]));

  return (title) => {

    const n = map.get(title.trim().toLowerCase());

    return n ? `/n/${n.id}` : null;

  };

};

async function createNote(title) {

  const r = await fetch("/api/notes", {

    method: "POST",

    headers: { "content-type": "application/json" },

    body: JSON.stringify(title ? { title } : {}),

  });

  if (r.ok) {

    const note = await r.json();

    await go(`/n/${note.id}`);

  } else if (title) location.href = `/open?title=${encodeURIComponent(title)}`;

}

// ── Theme ─────────────────────────────────────────────────────────────

document.addEventListener("click", (e) => {

  if (!e.target.closest?.('[data-action="theme"]')) return;

  const root = document.documentElement;

  const dark = root.dataset.theme

    ? root.dataset.theme === "dark"

    : matchMedia("(prefers-color-scheme: dark)").matches;

  root.dataset.theme = dark ? "light" : "dark";

  store.set("theme", root.dataset.theme);

  document.dispatchEvent(new CustomEvent("theme"));

});

// ── Panels, on a narrow screen ────────────────────────────────────────

const shell = $(".shell");

function panel(which) {

  if (!shell) return;

  const open = shell.dataset.open === which ? "" : which;

  shell.dataset.open = open;

  $(".scrim").hidden = open === "";

}

document.addEventListener("click", (e) => {

  const a = e.target.closest?.("[data-action]")?.dataset.action;

  if (a === "toggle-left") panel("left");

  if (a === "toggle-right") panel("right");

  if (a === "close-panels") panel(shell?.dataset.open ?? "");

});

// ── Small things every page does ─────────────────────────────────────

for (const tz of $$('input[name="tz"]')) tz.value = String(new Date().getTimezoneOffset());

document.addEventListener("submit", (e) => {

  const message = e.target.dataset?.confirm;

  if (message && !confirm(message)) e.preventDefault();

});

// The sidebar's box filters the list as you type; Enter searches the words.

function filterFiles() {

  const box = $("[data-filter]");

  const q = (box?.value ?? "").trim().toLowerCase();

  const words = q.split(/\s+/).filter((w) => w && !w.startsWith("#"));

  for (const a of $$(".file")) {

    const show = words.every((w) => a.dataset.title.includes(w));

    a.parentElement.hidden = !show;

  }

}

$("[data-filter]")?.addEventListener("input", filterFiles);

document.addEventListener("live:swapped", () => {

  filterFiles();

  for (const tz of $$('input[name="tz"]')) tz.value = String(new Date().getTimezoneOffset());

});

// Links to notes not written yet make the note, then open it.

document.addEventListener("click", (e) => {

  const a = e.target.closest?.("a.unresolved");

  if (!a || mod(e) || e.button !== 0) return;

  e.preventDefault();

  createNote(a.dataset.title);

});

// ── The quick switcher ────────────────────────────────────────────────

const palette = $("#palette");

const pinput = $("#palette-input");

const plist = $("#palette-list");

let pitems = [];

let psel = 0;

/** A fuzzy score: every letter in order, more for runs and word starts. Null when it does not match. */

function score(title, q) {

  if (q === "") return 0;

  const t = title.toLowerCase();

  if (t === q) return 1000;

  if (t.startsWith(q)) return 500 - t.length;

  const at = t.indexOf(q);

  if (at >= 0) return 300 - at;

  let s = 0;

  let j = 0;

  let run = 0;

  for (let i = 0; i < t.length && j < q.length; i++) {

    if (t[i] === q[j]) {

      run++;

      s += run * 2 + (i === 0 || /[\s\-_/]/.test(t[i - 1]) ? 6 : 0);

      j++;

    } else run = 0;

  }

  return j === q.length ? s : null;

}

function drawPalette() {

  const q = pinput.value.trim();

  const ql = q.toLowerCase();

  const notes = vault()

    .map((n) => ({ n, s: score(n.title, ql) }))

    .filter((x) => x.s !== null)

    .sort((a, b) => b.s - a.s || b.n.updated_at.localeCompare(a.n.updated_at))

    .slice(0, 12);

  pitems = notes.map(({ n }) => ({ kind: "open", title: n.title, id: n.id }));

  if (q !== "" && !vault().some((n) => n.title.toLowerCase() === ql)) pitems.push({ kind: "create", title: q });

  psel = Math.min(psel, Math.max(0, pitems.length - 1));

  plist.innerHTML = "";

  pitems.forEach((item, i) => {

    const li = document.createElement("li");

    li.setAttribute("role", "option");

    li.id = `p-${i}`;

    li.className = `palette-item${item.kind === "create" ? " is-create" : ""}`;

    li.setAttribute("aria-selected", String(i === psel));

    li.textContent = item.kind === "create" ? `Create “${item.title}”` : item.title;

    li.addEventListener("mousedown", (e) => {

      e.preventDefault();

      psel = i;

      choose(false);

    });

    plist.append(li);

  });

  if (pitems.length === 0) {

    const li = document.createElement("li");

    li.className = "palette-empty muted";

    li.textContent = "Type a title to create your first note";

    plist.append(li);

  }

  pinput.setAttribute("aria-activedescendant", pitems.length ? `p-${psel}` : "");

  $(`#p-${psel}`)?.scrollIntoView({ block: "nearest" });

}

function openPalette() {

  if (!palette) return;

  palette.hidden = false;

  pinput.value = "";

  psel = 0;

  drawPalette();

  pinput.focus();

}

function closePalette() {

  if (!palette || palette.hidden) return;

  palette.hidden = true;

  editorEl?.querySelector("#source")?.focus({ preventScroll: true });

}

function choose(create) {

  const q = pinput.value.trim();

  const item = create ? { kind: "create", title: q } : pitems[psel];

  if (!item || !item.title) return;

  closePalette();

  if (item.kind === "open") go(`/n/${item.id}`);

  else createNote(item.title);

}

pinput?.addEventListener("input", () => {

  psel = 0;

  drawPalette();

});

pinput?.addEventListener("keydown", (e) => {

  if (e.key === "ArrowDown" || (e.ctrlKey && e.key === "n")) {

    e.preventDefault();

    psel = (psel + 1) % Math.max(1, pitems.length);

    drawPalette();

  } else if (e.key === "ArrowUp" || (e.ctrlKey && e.key === "p")) {

    e.preventDefault();

    psel = (psel - 1 + pitems.length) % Math.max(1, pitems.length);

    drawPalette();

  } else if (e.key === "Enter") {

    e.preventDefault();

    choose(e.shiftKey);

  } else if (e.key === "Escape") {

    e.preventDefault();

    closePalette();

  }

});

palette?.addEventListener("mousedown", (e) => {

  if (e.target === palette) closePalette();

});

$(".find .hint")?.addEventListener("click", openPalette);

// ── Keys, everywhere ──────────────────────────────────────────────────

document.addEventListener("keydown", (e) => {

  if (mod(e) && !e.shiftKey && (e.key === "k" || e.key === "o")) {

    e.preventDefault();

    palette?.hidden === false ? closePalette() : openPalette();

  } else if (mod(e) && e.shiftKey && e.key.toLowerCase() === "d") {

    e.preventDefault();

    $('form[action="/daily"]')?.requestSubmit();

  } else if (mod(e) && !e.shiftKey && e.key === "g") {

    e.preventDefault();

    go("/graph");

  } else if (e.altKey && e.code === "KeyN") {

    e.preventDefault();

    createNote();

  } else if (e.key === "Escape" && shell?.dataset.open) panel(shell.dataset.open);

});

// ── The editor ────────────────────────────────────────────────────────

const editorEl = $("#editor");

let dirty = false;

let flush = async () => {};

/** Leave the page — once whatever is unsaved is saved. */

async function go(href) {

  if (dirty) await flush();

  location.href = href;

}

document.addEventListener("click", (e) => {

  const a = e.target.closest?.("a[href]");

  if (!a || !dirty || mod(e) || a.target === "_blank" || a.classList.contains("unresolved")) return;

  const url = new URL(a.href, location.href);

  if (url.origin !== location.origin || (url.pathname === location.pathname && url.hash)) return;

  e.preventDefault();

  go(a.href);

});

if (editorEl) editor(editorEl);

function editor(form) {

  const id = form.dataset.id;

  const source = $("#source", form);

  const titleEl = $("#title", form);

  const preview = $("#preview", form);

  const panes = $("#panes", form);

  const status = $("#status");

  let saved = { title: titleEl.value, body: source.value, updated: form.dataset.updated };

  let timer;

  let saving = null;

  let frame = 0;

  // Views: edit, split (side by side, on a wide screen), read. ⌘E flips

  // between reading and the last way you were writing.

  const empty = source.value.trim() === "";

  let writing = store.get("mode-writing") ?? "split";

  function mode(m, remember = true) {

    if (m !== "read") writing = m;

    panes.dataset.mode = m;

    for (const b of $$(".segmented [data-mode]")) b.setAttribute("aria-pressed", String(b.dataset.mode === m || (m === "split" && narrow() && b.dataset.mode === "edit")));

    if (remember) {

      store.set("mode", m);

      if (m !== "read") store.set("mode-writing", m);

    }

    if (m !== "read") draw();

  }

  mode(empty ? (writing === "read" ? "edit" : writing) : (store.get("mode") ?? "split"), false);

  for (const b of $$(".segmented [data-mode]")) b.addEventListener("click", () => mode(b.dataset.mode));

  preview.addEventListener("dblclick", (e) => {

    if (panes.dataset.mode !== "read" || e.target.closest("a, button")) return;

    mode(writing);

    source.focus();

  });

  document.addEventListener("keydown", (e) => {

    if (mod(e) && !e.shiftKey && e.key === "e") {

      e.preventDefault();

      if (panes.dataset.mode === "read") {

        mode(writing);

        source.focus();

      } else mode("read");

    }

    if (mod(e) && e.key === "s") {

      e.preventDefault();

      save();

    }

  });

  // The reading view follows the words, a frame at a time.

  function draw() {

    cancelAnimationFrame(frame);

    frame = requestAnimationFrame(() => {

      preview.innerHTML = render(source.value, { resolve: resolver() }) || '<p class="muted">Nothing here yet.</p>';

    });

  }

  // Saving: a moment after you stop, and before you leave.

  function say(text, kind = "") {

    if (!status) return;

    status.textContent = text;

    status.dataset.kind = kind;

  }

  function changed() {

    dirty = titleEl.value !== saved.title || source.value !== saved.body;

    say(dirty ? "Editing…" : "Saved");

    clearTimeout(timer);

    if (dirty) timer = setTimeout(save, 600);

  }

  async function save() {

    clearTimeout(timer);

    if (saving) await saving;

    const body = {};

    const t = titleEl.value.trim();

    if (t !== saved.title && t !== "") body.title = t;

    if (source.value !== saved.body) body.body = source.value;

    if (Object.keys(body).length === 0) {

      dirty = titleEl.value.trim() !== saved.title && titleEl.value.trim() !== "";

      return;

    }

    say("Saving…");

    saving = (async () => {

      try {

        const r = await fetch(`/api/notes/${id}`, {

          method: "PATCH",

          headers: { "content-type": "application/json" },

          body: JSON.stringify(body),

        });

        const answer = await r.json().catch(() => ({}));

        if (r.ok) {

          saved = { title: answer.title, body: answer.body, updated: answer.updated_at };

          dirty = titleEl.value.trim() !== saved.title || source.value !== saved.body;

          if (body.title !== undefined) renamed(answer);

          say(dirty ? "Editing…" : answer.relinked ? `Saved · updated links in ${answer.relinked} ${answer.relinked === 1 ? "note" : "notes"}` : "Saved");

          if (dirty) timer = setTimeout(save, 600);

        } else if (r.status === 422 && body.title !== undefined) {

          say(answer.message ?? "That title can't be used.", "error");

          // Keep the words: save them under the old title.

          if (body.body !== undefined) {

            titleEl.value = saved.title;

            saving = null;

            return save();

          }

        } else {

          say(answer.message ?? `Not saved (${r.status}) — retrying`, "error");

          timer = setTimeout(save, 3000);

        }

      } catch {

        say("Offline — will retry", "error");

        timer = setTimeout(save, 3000);

      } finally {

        saving = null;

      }

    })();

    return saving;

  }

  flush = save;

  function renamed(note) {

    const here = $(".crumb-here");

    if (here) here.textContent = note.title;

    document.title = document.title.replace(/^.*? · /, `${note.title} · `);

  }

  titleEl.addEventListener("input", changed);

  titleEl.addEventListener("keydown", (e) => {

    if (e.key === "Enter" || e.key === "ArrowDown") {

      e.preventDefault();

      source.focus();

      source.setSelectionRange(0, 0);

    }

  });

  titleEl.addEventListener("blur", () => {

    if (titleEl.value.trim() === "") titleEl.value = saved.title;

  });

  form.addEventListener("submit", (e) => {

    e.preventDefault();

    save();

  });

  addEventListener("beforeunload", (e) => {

    if (!dirty) return;

    // Best effort on the way out; the prompt covers what keepalive cannot carry.

    const body = JSON.stringify({ body: source.value, ...(titleEl.value.trim() !== saved.title && titleEl.value.trim() ? { title: titleEl.value.trim() } : {}) });

    if (body.length < 60_000)

      fetch(`/api/notes/${id}`, { method: "PATCH", headers: { "content-type": "application/json" }, body, keepalive: true });

    else e.preventDefault();

  });

  // Someone (another tab, a script, Claude over MCP) changed this note:

  // take their words if you have none of your own in flight.

  document.addEventListener("live:note.changed", async (e) => {

    if (String(e.detail.id) !== id || e.detail.updated_at === saved.updated || dirty || saving) return;

    const r = await fetch(`/api/notes/${id}`);

    if (!r.ok) return;

    const note = await r.json();

    if (dirty || note.updated_at === saved.updated) return;

    const at = source.selectionStart;

    saved = { title: note.title, body: note.body, updated: note.updated_at };

    source.value = note.body;

    titleEl.value = note.title;

    renamed(note);

    source.setSelectionRange(at, at);

    draw();

    say("Updated elsewhere");

  });

  document.addEventListener("live:note.removed", (e) => {

    if (String(e.detail.id) === id) {

      dirty = false;

      location.href = "/";

    }

  });

  document.addEventListener("live:swapped", () => draw());

  // Typing: the words, the view, the save, and [[ completion.

  source.addEventListener("input", (e) => {

    if (e.inputType === "insertText" && e.data === "[") pairBrackets();

    changed();

    draw();

    suggest();

  });

  source.addEventListener("keydown", keys);

  source.addEventListener("blur", () => setTimeout(hideSuggest, 120));

  source.addEventListener("click", hideSuggest);

  // The split view scrolls together.

  source.addEventListener("scroll", () => {

    if (panes.dataset.mode !== "split" || narrow()) return;

    const ratio = source.scrollTop / Math.max(1, source.scrollHeight - source.clientHeight);

    preview.scrollTop = ratio * (preview.scrollHeight - preview.clientHeight);

  });

  // A task's box, ticked in the reading view, ticks it in the words.

  preview.addEventListener("click", (e) => {

    const box = e.target.closest("button.check");

    if (!box) return;

    const n = $$("button.check", preview).indexOf(box);

    const lines = source.value.split("\n");

    let seen = -1;

    let fence = false;

    for (let i = 0; i < lines.length; i++) {

      if (/^(```|~~~)/.test(lines[i])) fence = !fence;

      if (fence) continue;

      const m = /^((?:\s*>)*\s*(?:[-*+]|\d+[.)])\s+\[)([ xX])(\]\s)/.exec(lines[i]);

      if (m && ++seen === n) {

        lines[i] = m[1] + (m[2] === " " ? "x" : " ") + m[3] + lines[i].slice(m[0].length);

        source.value = lines.join("\n");

        changed();

        draw();

        return;

      }

    }

  });

  /** Put text in as if typed, so ⌘Z undoes it. */

  function type(text, start = source.selectionStart, end = source.selectionEnd) {

    source.setSelectionRange(start, end);

    if (!document.execCommand?.("insertText", false, text)) {

      source.setRangeText(text, start, end, "end");

      source.dispatchEvent(new Event("input"));

    }

  }

  function pairBrackets() {

    const at = source.selectionStart;

    const v = source.value;

    if (v.slice(at - 2, at) === "[[" && v.slice(at, at + 2) !== "]]") {

      source.setRangeText("]]", at, at, "start");

    }

  }

  function wrap(mark) {

    const { selectionStart: a, selectionEnd: b, value } = source;

    const inner = value.slice(a, b);

    type(`${mark}${inner}${mark}`, a, b);

    source.setSelectionRange(a + mark.length, b + mark.length);

  }

  function keys(e) {

    if (suggestKeys(e)) return;

    const { selectionStart: a, selectionEnd: b, value } = source;

    const lineStart = value.lastIndexOf("\n", a - 1) + 1;

    const line = value.slice(lineStart, value.indexOf("\n", a) < 0 ? value.length : value.indexOf("\n", a));

    if (mod(e) && e.key === "b") {

      e.preventDefault();

      wrap("**");

    } else if (mod(e) && e.key === "i") {

      e.preventDefault();

      wrap("*");

    } else if (mod(e) && e.shiftKey && e.key.toLowerCase() === "h") {

      e.preventDefault();

      wrap("==");

    } else if (mod(e) && e.key === "Enter") {

      // ⌘↵ cycles a line: plain → task → done → plain.

      e.preventDefault();

      const m = /^(\s*)(?:([-*+]|\d+[.)])\s+)?(?:\[([ xX])\]\s+)?/.exec(line);

      const rest = line.slice(m[0].length);

      const next = m[3] === undefined ? `${m[1]}- [ ] ${rest}` : m[3] === " " ? `${m[1]}${m[2] ?? "-"} [x] ${rest}` : `${m[1]}${m[2] ?? "-"} ${rest}`;

      type(next, lineStart, lineStart + line.length);

    } else if (e.key === "Enter" && !e.shiftKey && a === b) {

      const m = /^(\s*(?:>\s*)*)([-*+]|(\d+)([.)]))\s+(\[[ xX]\]\s+)?(.*)$/.exec(line);

      if (!m || a - lineStart < m[0].length - m[6].length) return;

      e.preventDefault();

      if (m[6].trim() === "" && a === lineStart + line.length) {

        type("", lineStart, lineStart + line.length); // An empty item ends the list.

        return;

      }

      const marker = m[3] !== undefined ? `${Number(m[3]) + 1}${m[4]}` : m[2];

      type(`\n${m[1]}${marker} ${m[5] ? "[ ] " : ""}`);

    } else if (e.key === "Tab" && !mod(e)) {

      e.preventDefault();

      const listy = /^\s*([-*+]|\d+[.)])\s/.test(line);

      if (e.shiftKey) {

        const cut = line.match(/^( {1,2}|\t)/)?.[0].length ?? 0;

        if (cut) {

          type(line.slice(cut), lineStart, lineStart + line.length);

          source.setSelectionRange(Math.max(lineStart, a - cut), Math.max(lineStart, b - cut));

        }

      } else if (listy) {

        type(`  ${line}`, lineStart, lineStart + line.length);

        source.setSelectionRange(a + 2, b + 2);

      } else type("  ");

    } else if (e.key === "Escape") source.blur();

  }

  // [[ completion: the titles that fit what you have typed so far.

  const box = $("#suggest");

  let items = [];

  let sel = 0;

  function query() {

    const at = source.selectionStart;

    const m = /\[\[([^\[\]\n|#]*)$/.exec(source.value.slice(Math.max(0, at - 200), at));

    return m ? { q: m[1], from: at - m[1].length } : null;

  }

  function suggest() {

    const found = query();

    if (!found) return hideSuggest();

    const q = found.q.toLowerCase();

    const mine = saved.title.toLowerCase();

    items = vault()

      .filter((n) => n.title.toLowerCase() !== mine)

      .map((n) => ({ title: n.title, s: score(n.title, q) }))

      .filter((x) => x.s !== null)

      .sort((x, y) => y.s - x.s)

      .slice(0, 8)

      .map((x) => x.title);

    if (found.q.trim() !== "" && !items.some((t) => t.toLowerCase() === q)) items.push(found.q.trim());

    if (items.length === 0) return hideSuggest();

    sel = Math.min(sel, items.length - 1);

    box.innerHTML = "";

    const known = new Set(vault().map((n) => n.title.toLowerCase()));

    items.forEach((t, i) => {

      const li = document.createElement("li");

      li.setAttribute("role", "option");

      li.className = "suggest-item";

      li.setAttribute("aria-selected", String(i === sel));

      li.textContent = known.has(t.toLowerCase()) ? t : `${t} — new`;

      li.addEventListener("mousedown", (ev) => {

        ev.preventDefault();

        sel = i;

        accept();

      });

      box.append(li);

    });

    const { x, y } = caret();

    box.hidden = false;

    const w = box.offsetWidth;

    box.style.left = `${Math.max(8, Math.min(x, innerWidth - w - 8))}px`;

    box.style.top = `${y + 4}px`;

  }

  function hideSuggest() {

    if (box) box.hidden = true;

    sel = 0;

  }

  function accept() {

    const found = query();

    const title = items[sel];

    if (!found || title === undefined) return;

    const at = source.selectionStart;

    const closes = source.value.slice(at, at + 2) === "]]";

    type(`${title}${closes ? "" : "]]"}`, found.from, at);

    const end = found.from + title.length + 2;

    source.setSelectionRange(end, end);

    hideSuggest();

    changed();

    draw();

  }

  function suggestKeys(e) {

    if (!box || box.hidden) return false;

    if (e.key === "ArrowDown" || e.key === "ArrowUp") {

      e.preventDefault();

      sel = (sel + (e.key === "ArrowDown" ? 1 : items.length - 1)) % items.length;

      suggest();

      return true;

    }

    if (e.key === "Enter" || e.key === "Tab") {

      e.preventDefault();

      accept();

      return true;

    }

    if (e.key === "Escape") {

      e.preventDefault();

      hideSuggest();

      return true;

    }

    return false;

  }

  /** Where the caret is on screen: a hidden copy of the textarea, measured. */

  function caret() {

    const style = getComputedStyle(source);

    const mirror = document.createElement("div");

    for (const p of ["boxSizing", "width", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "borderTopWidth", "borderLeftWidth", "fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "tabSize", "wordSpacing"])

      mirror.style[p] = style[p];

    Object.assign(mirror.style, { position: "absolute", visibility: "hidden", whiteSpace: "pre-wrap", overflowWrap: "break-word", top: "0", left: "-9999px" });

    mirror.textContent = source.value.slice(0, source.selectionStart);

    const mark = document.createElement("span");

    mark.textContent = "​";

    mirror.append(mark);

    document.body.append(mirror);

    const r = source.getBoundingClientRect();

    const x = r.left + mark.offsetLeft - source.scrollLeft;

    const y = r.top + mark.offsetTop - source.scrollTop + parseFloat(style.lineHeight || "24");

    mirror.remove();

    return { x, y };

  }

  if (empty && document.activeElement === document.body) {

    if (/^Untitled( \d+)?$/.test(titleEl.value)) {

      titleEl.focus();

      titleEl.select();

    } else source.focus();

  }

}