@panphora/clayjs 1.13.1 → 1.14.0

package/src/page/highlight.js

@@ -0,0 +1,268 @@
+// Syntax colours for code blocks. A code block with a language gets inline
+// decorations from Pierre's highlighter, loaded on first use (src/vendor/pierre/).
+// Only blocks on screen are highlighted, and only after typing pauses. Colours are
+// --page-code-token-* variables, so each page theme sets them.
+import { state, view as pmView } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+import { asStep } from "./blocksel.js";
+
+const { Plugin, PluginKey } = state;
+const { Decoration, DecorationSet } = pmView;
+
+export const LANGS = [
+  ["", "Plain text"],
+  ["javascript", "JavaScript"],
+  ["typescript", "TypeScript"],
+  ["jsx", "JSX"],
+  ["tsx", "TSX"],
+  ["json", "JSON"],
+  ["html", "HTML"],
+  ["css", "CSS"],
+  ["python", "Python"],
+  ["shellscript", "Shell"],
+  ["sql", "SQL"],
+  ["go", "Go"],
+  ["rust", "Rust"],
+  ["java", "Java"],
+  ["c", "C"],
+  ["cpp", "C++"],
+  ["csharp", "C#"],
+  ["ruby", "Ruby"],
+  ["php", "PHP"],
+  ["yaml", "YAML"],
+  ["markdown", "Markdown"],
+  ["diff", "Diff"],
+  ["swift", "Swift"],
+  ["kotlin", "Kotlin"],
+  ["xml", "XML"],
+];
+const IDS = new Set(LANGS.map(([id]) => id));
+const ALIASES = { js: "javascript", mjs: "javascript", ts: "typescript", py: "python", sh: "shellscript", bash: "shellscript", shell: "shellscript", zsh: "shellscript", rb: "ruby", yml: "yaml", md: "markdown", htm: "html", golang: "go", rs: "rust", "c++": "cpp", cs: "csharp", "c#": "csharp", kt: "kotlin" };
+
+export const langOf = (lang) => {
+  const k = String(lang ?? "").trim().toLowerCase();
+  const id = ALIASES[k] ?? k;
+  return IDS.has(id) ? id : "";
+};
+
+// Pierre's scopes, onto the page themes' token colours. A scope it does not list
+// falls back to its parent (keyword.control to keyword), then to the foreground.
+const color = (name) => ({ color: name });
+const THEME = {
+  name: "page",
+  appearance: "light",
+  cssVariables: { prefix: "--page-code-token-" },
+  style: {
+    syntax: {
+      comment: color("comment"),
+      keyword: color("keyword"),
+      operator: color("keyword"),
+      preproc: color("keyword"),
+      "punctuation.special": color("keyword"),
+      string: color("string-expression"),
+      "string.escape": color("constant"),
+      "string.regex": color("constant"),
+      "string.special": color("constant"),
+      number: color("constant"),
+      boolean: color("constant"),
+      constant: color("constant"),
+      type: color("constant"),
+      property: color("constant"),
+      enum: color("constant"),
+      variant: color("constant"),
+      namespace: color("constant"),
+      label: color("constant"),
+      function: color("function"),
+      constructor: color("function"),
+      selector: color("function"),
+      attribute: color("function"),
+      "variable.parameter": color("parameter"),
+      tag: color("string-expression"),
+      link_uri: color("link"),
+      link_text: color("link"),
+      "diff.plus": color("string-expression"),
+      "diff.minus": color("keyword"),
+      title: { font_weight: 700 },
+      emphasis: { font_style: "italic" },
+      "emphasis.strong": { font_weight: 700 },
+    },
+  },
+};
+
+let pierre = null;
+export async function tokenize(code, lang) {
+  pierre ??= import("../vendor/pierre/pierre.vendor.js");
+  const { codeToTokens } = await pierre;
+  return codeToTokens(code, { lang, theme: THEME }).tokens;
+}
+
+const FOREGROUND = "var(--page-code-token-foreground)";
+const styleOf = (t) => {
+  const s = [];
+  if (t.color && t.color !== FOREGROUND) s.push(`color: ${t.color}`);
+  if (t.fontStyle & 1) s.push("font-style: italic");
+  if (t.fontStyle & 2) s.push("font-weight: 600");
+  if (t.fontStyle & 4) s.push("text-decoration: underline");
+  return s.join("; ");
+};
+
+export const highlightKey = new PluginKey("page-highlight");
+
+
+const CACHE_SIZE = 200;
+
+// Each pass rebuilds every code block's colours from a cache of token runs keyed
+// by language and text, so colours follow undo, retyping and deletion without
+// tracking what each edit did to the old decorations. While new text waits for
+// its tokens, the block keeps its old colours, mapped through the edit, so
+// typing never flashes the block uncoloured.
+class Highlighter {
+  constructor(view, run, delay) {
+    this.view = view;
+    this.run = run;
+    this.delay = delay;
+    this.cache = new Map();
+    this.pending = new Set();
+    this.visible = new Set();
+    this.targets = new Map();
+    this.timer = 0;
+    const IO = view.dom.ownerDocument.defaultView.IntersectionObserver;
+    this.io = IO ? new IO((entries) => {
+      for (const e of entries) {
+        const id = e.target.dataset.id;
+        if (this.targets.get(id) === e.target) this.visible[e.isIntersecting ? "add" : "delete"](id);
+      }
+      this.schedule(0);
+    }, { rootMargin: "200px 0px" }) : null;
+    this.schedule(0);
+  }
+
+  update(view, prev) {
+    if (!prev || view.state.doc !== prev.doc) this.schedule(this.delay);
+  }
+
+  schedule(ms) {
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => this.pass(), ms);
+  }
+
+  pass() {
+    const { view } = this;
+    if (view.isDestroyed) return;
+    const decos = [];
+    const seen = new Map();
+    const current = highlightKey.getState(view.state);
+    view.state.doc.forEach((node, pos) => {
+      if (node.type !== schema.nodes.code_block) return;
+      const id = node.attrs.id;
+      const dom = view.nodeDOM(pos);
+      if (dom) seen.set(id, dom);
+      const lang = langOf(node.attrs.lang);
+      if (!lang) return;
+      const text = node.textContent;
+      const key = `${lang}\n${text}`;
+      const tokens = this.cache.get(key);
+      if (tokens) {
+        for (const t of tokens) {
+          const style = styleOf(t);
+          if (style && t.content) decos.push(Decoration.inline(pos + 1 + t.offset, pos + 1 + t.offset + t.content.length, { style }));
+        }
+      } else {
+        decos.push(...current.find(pos, pos + node.nodeSize));
+        if ((this.io && !this.visible.has(id)) || this.pending.has(key)) return;
+        this.pending.add(key);
+        this.run(text, lang).then((lines) => lines.flat(), () => []).then((flat) => {
+          this.pending.delete(key);
+          this.cache.set(key, flat);
+          if (this.cache.size > CACHE_SIZE) this.cache.delete(this.cache.keys().next().value);
+          this.schedule(0);
+        });
+      }
+    });
+    this.track(seen);
+    const sig = (list) => list.map((d) => `${d.from}:${d.to}:${d.type.attrs.style}`).join("|");
+    if (sig(decos) === sig(highlightKey.getState(view.state).find())) return;
+    view.dispatch(view.state.tr.setMeta(highlightKey, decos).setMeta("addToHistory", false));
+  }
+
+  track(seen) {
+    if (!this.io) return;
+    for (const [id, dom] of this.targets) {
+      if (seen.get(id) === dom) continue;
+      this.io.unobserve(dom);
+      this.targets.delete(id);
+      this.visible.delete(id);
+    }
+    for (const [id, dom] of seen) {
+      if (this.targets.get(id) === dom) continue;
+      this.targets.set(id, dom);
+      this.io.observe(dom);
+    }
+  }
+
+  destroy() {
+    clearTimeout(this.timer);
+    this.io?.disconnect();
+  }
+}
+
+export function highlightPlugin({ tokenize: run = tokenize, delay = 300 } = {}) {
+  return new Plugin({
+    key: highlightKey,
+    state: {
+      init: () => DecorationSet.empty,
+      apply(tr, set) {
+        const decos = tr.getMeta(highlightKey);
+        return decos ? DecorationSet.create(tr.doc, decos) : set.map(tr.mapping, tr.doc);
+      },
+    },
+    props: { decorations: (st) => highlightKey.getState(st) },
+    view: (view) => new Highlighter(view, run, delay),
+  });
+}
+
+// A code block with a language picker in its top corner. The picker is not part
+// of the content: ProseMirror ignores its events and mutations.
+export class CodeBlockView {
+  constructor(node, view, getPos) {
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    const doc = view.dom.ownerDocument;
+    this.dom = doc.createElement("pre");
+    this.contentDOM = doc.createElement("code");
+    this.select = doc.createElement("select");
+    this.select.className = "page-code-lang";
+    this.select.contentEditable = "false";
+    this.select.setAttribute("aria-label", "Code language");
+    for (const [id, label] of LANGS) this.select.append(new Option(label, id));
+    this.select.addEventListener("change", () => this.setLang(this.select.value));
+    this.dom.append(this.select, this.contentDOM);
+    this.render(node);
+  }
+
+  render(node) {
+    this.node = node;
+    this.dom.dataset.id = node.attrs.id ?? "";
+    const lang = langOf(node.attrs.lang);
+    if (lang) this.dom.dataset.lang = lang;
+    else delete this.dom.dataset.lang;
+    this.select.value = lang;
+  }
+
+  setLang(lang) {
+    const pos = this.getPos();
+    if (pos == null || lang === langOf(this.node.attrs.lang)) return;
+    this.view.dispatch(asStep(this.view.state.tr.setNodeMarkup(pos, null, { ...this.node.attrs, lang })));
+    this.view.focus();
+  }
+
+  update(node) {
+    if (node.type !== this.node.type) return false;
+    this.render(node);
+    return true;
+  }
+
+  stopEvent(event) { return this.select.contains(event.target); }
+  ignoreMutation(m) { return m.type !== "selection" && this.select.contains(m.target); }
+}

package/src/page/inline.js

@@ -1,5 +1,5 @@
 // A text block's inline content as the live record keeps it: c, its flat text,
-// and m, one mark key per UTF-16 unit of c. The replay (replay.js) merges in
+// and m, one mark key per UTF-16 unit of c (stored as runs, below). The replay (replay.js) merges in
 // this form; the editor gets ProseMirror nodes back from it.
 //
 // A mark key lists a unit's marks in schema order, one code each, a mark with
@@ -87,6 +87,65 @@ export function flatten(content) {
   return { c, m };
 }
 
+// The record keeps m as runs instead, [[count, key], ...] in order, so its
+// size follows the formatting rather than the length of the text: neighbouring
+// runs differ, and the counts add up to the length of c. Memory keeps one key
+// per unit, and so do records written before runs; both open.
+export function runsOf(m) {
+  const out = [];
+  for (const key of m) {
+    const last = out[out.length - 1];
+    if (last && last[1] === key) last[0]++;
+    else out.push([1, key]);
+  }
+  return out;
+}
+
+const isRuns = (m) => Array.isArray(m) && Array.isArray(m[0]);
+
+// One key per unit for `length` units, from runs; per-unit keys come back as
+// they are. null for runs that do not cover exactly `length` units: a write
+// that changed c alone keeps none of its marks, as a per-unit list of the
+// wrong length keeps none in the replay.
+export function unitsOf(m, length) {
+  if (!isRuns(m)) return m;
+  const out = [];
+  for (const run of m) {
+    if (!Array.isArray(run) || !Number.isInteger(run[0]) || run[0] < 1 || typeof run[1] !== "string" || out.length + run[0] > length) return null;
+    for (let i = 0; i < run[0]; i++) out.push(run[1]);
+  }
+  return out.length === length ? out : null;
+}
+
+// A block or a write as the record keeps it: m, and the removed marks of each
+// of its splices, as runs.
+export function packMarks(X) {
+  if (!X || typeof X !== "object") return X;
+  const out = { ...X };
+  if (Array.isArray(X.m) && !isRuns(X.m)) out.m = runsOf(X.m);
+  if (X.w && Array.isArray(X.w.s) && X.w.s.some((sp) => Array.isArray(sp) && Array.isArray(sp[4]) && !isRuns(sp[4]))) {
+    out.w = { ...X.w, s: X.w.s.map((sp) => (Array.isArray(sp) && Array.isArray(sp[4]) && !isRuns(sp[4]) ? [...sp.slice(0, 4), runsOf(sp[4]), ...sp.slice(5)] : sp)) };
+  }
+  return out;
+}
+
+// The same block or write with one key per unit, as memory and replay.js keep
+// it; X itself when it already is. Runs that do not cover the text come back
+// as an empty list: like a per-unit list of the wrong length, it gives no
+// marks, and the writer's repair rewrites the block.
+export function unpackMarks(X) {
+  if (!X || typeof X !== "object") return X;
+  const runs = isRuns(X.m) && typeof X.c === "string";
+  const spliced = X.w && Array.isArray(X.w.s) && X.w.s.some((sp) => Array.isArray(sp) && isRuns(sp[4]));
+  if (!runs && !spliced) return X;
+  const out = { ...X };
+  if (runs) out.m = unitsOf(X.m, X.c.length) ?? [];
+  if (spliced) {
+    out.w = { ...X.w, s: X.w.s.map((sp) => (Array.isArray(sp) && isRuns(sp[4]) ? [...sp.slice(0, 4), unitsOf(sp[4], typeof sp[2] === "string" ? sp[2].length : 0) ?? [], ...sp.slice(5)] : sp)) };
+  }
+  return out;
+}
+
 const isHigh = (u) => u >= 0xd800 && u <= 0xdbff;
 const textKey = (key) => (key && key[0] !== "@" ? key : "");
 

package/src/page/items.js

@@ -0,0 +1,159 @@
+// What the block menu lists and how a pick changes the page: the block types a
+// textblock can be turned into, the things that can be inserted, how a search
+// ranks them, and the transactions behind them. Pure data and transactions: the
+// menu itself lives in chrome.js.
+import { state } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+import { isKey, keyBetween, newId } from "./model.js";
+import { outline, subtreeRange } from "./blocks.js";
+import { asStep } from "./blocksel.js";
+import { pickFiles, hostPlace } from "./media.js";
+import { makeTable, insertTableNode } from "./table.js";
+import { pickCsv } from "./csv-import.js";
+import { makeBoard, insertBoardNode } from "./board.js";
+import { chartFromSlash, chartTables } from "./chart.js";
+
+const { TextSelection } = state;
+const N = schema.nodes;
+
+export const BLOCK_TYPES = [
+  { key: "text", label: "Text", description: "Plain writing", icon: "T", type: "paragraph", aliases: ["p", "paragraph", "plain"] },
+  { key: "h1", label: "Heading 1", description: "Big section heading", icon: "H1", type: "heading", attrs: { level: 1 }, hint: "#", aliases: ["h1", "title"] },
+  { key: "h2", label: "Heading 2", description: "Medium section heading", icon: "H2", type: "heading", attrs: { level: 2 }, hint: "##", aliases: ["h2", "subtitle"] },
+  { key: "h3", label: "Heading 3", description: "Small section heading", icon: "H3", type: "heading", attrs: { level: 3 }, hint: "###", aliases: ["h3"] },
+  { key: "bullet", label: "Bulleted list", description: "A simple list", icon: "•", type: "list_item", attrs: { kind: "bullet" }, hint: "-", aliases: ["ul", "bullet", "list", "unordered"] },
+  { key: "ordered", label: "Numbered list", description: "A list with numbers", icon: "1.", type: "list_item", attrs: { kind: "ordered" }, hint: "1.", aliases: ["ol", "num", "numbered", "ordered"] },
+  { key: "check", label: "Checklist", description: "Tasks to tick off", icon: "☐", type: "list_item", attrs: { kind: "check" }, hint: "[]", aliases: ["todo", "to-do", "task", "check", "checkbox"] },
+  { key: "toggle", label: "Toggle", description: "Hide details under a line", icon: "▸", type: "toggle", attrs: { open: true }, hint: ">", aliases: ["collapse", "details", "fold"] },
+  { key: "callout", label: "Callout", description: "Make a note stand out", icon: "!", type: "callout", aliases: ["note", "aside", "info"] },
+  { key: "code", label: "Code", description: "Code with highlighting", icon: "</>", type: "code_block", hint: "```", aliases: ["pre", "snippet"] },
+];
+
+export const INSERT_ITEMS = [
+  { key: "divider", label: "Divider", description: "A line between sections", icon: "—", hint: "---", aliases: ["hr", "line", "separator", "rule"], insert: "divider" },
+  { key: "image", label: "Image", description: "Upload or paste a picture", icon: "▣", aliases: ["img", "picture", "photo"], insert: "image" },
+  { key: "file", label: "File", description: "Attach any file", icon: "⎘", aliases: ["upload", "attachment", "pdf"], insert: "file" },
+  { key: "table", label: "Table", description: "Rows and columns, paste from a spreadsheet", icon: "▦", aliases: ["grid", "spreadsheet"], insert: "table" },
+  { key: "csv", label: "Import CSV…", description: "Turn a CSV file into a table", icon: "⇧", aliases: ["comma separated", "import"], insert: "csv" },
+  { key: "board", label: "Board", description: "Cards in columns, like a kanban", icon: "▥", aliases: ["kanban", "cards", "columns", "status"], insert: "board" },
+];
+
+export const CHART_ITEM = { key: "chart", label: "Chart", description: "A bar or line chart from a table", icon: "📊", aliases: ["graph", "plot", "bar", "line"], insert: "chart" };
+
+export const MENU_ITEMS = [...BLOCK_TYPES, ...INSERT_ITEMS];
+
+export const insertItemsFor = (st, items = MENU_ITEMS) => (chartTables(st.doc).length ? [...items, CHART_ITEM] : items);
+
+// Which entry of BLOCK_TYPES a block is, for the toolbar's "Text ▾" label.
+export function blockTypeOf(node) {
+  const t = node.type.name;
+  return BLOCK_TYPES.find((b) => b.type === t && (!b.attrs
+    || (t === "heading" ? b.attrs.level === node.attrs.level : t === "list_item" ? b.attrs.kind === node.attrs.kind : true))) ?? BLOCK_TYPES[0];
+}
+
+const startOf = (doc, index) => {
+  let at = 0;
+  for (let i = 0; i < index; i++) at += doc.child(i).nodeSize;
+  return at;
+};
+
+// Retype the top-level textblock at `index` of tr.doc into `item`. It keeps its
+// id, pos and parent; a list item turned into another list kind keeps its indent.
+export function retype(tr, index, item) {
+  const at = startOf(tr.doc, index);
+  const node = tr.doc.child(index);
+  const keep = { id: node.attrs.id, pos: node.attrs.pos, parent: node.attrs.parent };
+  if (node.type === N.list_item && item.type === "list_item") keep.indent = node.attrs.indent;
+  return tr.setBlockType(at + 1, at + node.nodeSize - 1, N[item.type], { ...keep, ...(item.attrs || {}) });
+}
+
+export function turnInto(st, index, item) {
+  return st.doc.child(index).isTextblock ? retype(st.tr, index, item) : null;
+}
+
+// A new empty paragraph after the block at `index` and its subtree, at the
+// block's own level, with the caret in it.
+export function insertAfter(st, index, tr = st.tr) {
+  const ents = outline(tr.doc);
+  const { to } = subtreeRange(ents, index);
+  const node = tr.doc.child(index);
+  tr.insert(to, N.paragraph.create({ parent: node.attrs.parent ?? null }));
+  return tr.setSelection(TextSelection.create(tr.doc, to + 1));
+}
+
+// A key strictly between two neighbours, or null when either is not a usable
+// key (identityPlugin then repairs it).
+const keyAfter = (pos, next) => (isKey(pos) && (next === null || (isKey(next) && pos < next)) ? keyBetween(pos, next) : null);
+
+// The empty paragraph at `index` becomes a divider that keeps its id, pos and
+// parent, followed by a new empty paragraph holding the caret. The new
+// paragraph is given its id and key here, so the identity plugin appends no
+// transaction after this one (which would end undoInputRule for a `---` rule).
+export function replaceWithDivider(tr, index) {
+  const at = startOf(tr.doc, index);
+  const node = tr.doc.child(index);
+  const next = tr.doc.maybeChild(index + 1);
+  const { id, pos, parent } = node.attrs;
+  tr.replaceWith(at, at + node.nodeSize, [
+    N.divider.create({ id, pos, parent }),
+    N.paragraph.create({ id: newId(), pos: keyAfter(pos, next ? next.attrs.pos : null), parent }),
+  ]);
+  return tr.setSelection(TextSelection.create(tr.doc, at + 2));
+}
+
+// Insert a divider for the block at `index`: in place of an empty paragraph,
+// otherwise after the block's whole subtree at the block's own level.
+export function insertDivider(st, index, tr = st.tr) {
+  const node = tr.doc.child(index);
+  if (node.type === N.paragraph && node.content.size === 0) return replaceWithDivider(tr, index);
+  const ents = outline(tr.doc), end = ents[index].subEnd;
+  const to = ents[end].end, next = ents[end + 1]?.node.attrs.pos ?? null;
+  const pos = keyAfter(ents[end].node.attrs.pos, next), parent = node.attrs.parent ?? null;
+  tr.insert(to, [
+    N.divider.create({ id: newId(), pos, parent }),
+    N.paragraph.create({ id: newId(), pos: keyAfter(pos, next), parent }),
+  ]);
+  return tr.setSelection(TextSelection.create(tr.doc, to + 2));
+}
+
+// Exact name or alias first, then label prefix, word or alias prefix,
+// substring; equal ranks keep menu order. No fuzzy matching.
+export function rankItems(items, query) {
+  const q = query.trim().toLowerCase();
+  if (!q) return items;
+  const rank = (it) => {
+    const label = it.label.toLowerCase();
+    const names = [it.key, ...(it.aliases || []), ...(it.hint ? [it.hint] : [])].map((s) => s.toLowerCase());
+    if (label === q || names.includes(q)) return 0;
+    if (label.startsWith(q)) return 1;
+    if ([...label.split(/\s+/), ...names].some((s) => s.startsWith(q))) return 2;
+    if ([label, ...names].some((s) => s.includes(q))) return 3;
+    if (q.length >= 3 && it.description && it.description.toLowerCase().split(/[^a-z0-9]+/).some((w) => w.startsWith(q))) return 4;
+    return Infinity;
+  };
+  return items.map((it, order) => ({ it, order, rank: rank(it) })).filter((x) => x.rank !== Infinity).sort((a, b) => a.rank - b.rank || a.order - b.order).map((x) => x.it);
+}
+
+// What a pick does in the insert menu for the block at `index`. A divider and
+// the file pickers have their own placement; a block type retypes an empty line
+// and otherwise goes into a new block below the line's whole subtree.
+export function runItem(view, item, index, remove = null) {
+  const st = view.state;
+  if (item.insert === "image" || item.insert === "file") return pickFiles(view, item.insert === "image" ? "image/*" : "", hostPlace(st, index), remove);
+  if (item.insert === "csv") return pickCsv(view, remove);
+  if (item.insert === "table") return insertTableNode(st, view.dispatch, makeTable(), remove);
+  if (item.insert === "board") return insertBoardNode(st, view.dispatch, makeBoard(), remove);
+  if (item.insert === "chart") return chartFromSlash(view, index, remove);
+  let tr = st.tr;
+  if (remove) tr.delete(remove.from, remove.to);
+  const node = tr.doc.child(index);
+  if (item.insert === "divider") tr = insertDivider(st, index, tr);
+  else if (node.isTextblock && node.content.size === 0) tr = retype(tr, index, item);
+  else {
+    tr = insertAfter(st, index, tr);
+    tr = retype(tr, tr.doc.resolve(tr.selection.head).index(0), item);
+  }
+  view.dispatch(asStep(tr).scrollIntoView());
+  view.focus();
+  return true;
+}