@panphora/clayjs 1.16.0 → 1.18.0

package/src/page/features/emoji.js

@@ -0,0 +1,187 @@
+// Emoji: the Emoji action opens a picker of a small bundled glyph list and choosing one
+// writes that glyph into the document as ordinary Unicode text. The glyph is the whole
+// record — no mark, no node, no attribute and no format floor — so a reader shows it with
+// nothing of this loaded, and a variation selector, a skin tone, a flag's regional pair, a
+// keycap or a joined family goes in as the one grapheme a person sees, never split. The
+// list is fetched the first time the picker opens and kept; a fetch that failed is not
+// kept, so the next opening asks again.
+import { state } from "../../vendor/prosemirror.vendor.js";
+import { asStep } from "../blocksel.js";
+import { composing } from "../markdown.js";
+import { createMentionPicker } from "../mention-picker.js";
+
+// One glyph, as a person sees it: counting code points or UTF-16 units would call a
+// joined family seven things and a keycap several, and cut one in half.
+export function graphemes(text) {
+  const value = String(text ?? "");
+  const segmenter = typeof Intl !== "undefined" && typeof Intl.Segmenter === "function" ? new Intl.Segmenter("en", { granularity: "grapheme" }) : null;
+  return segmenter ? [...segmenter.segment(value)].map((part) => part.segment) : [...value];
+}
+
+export const isEmojiText = (value) => graphemes(value).length === 1 && !/^\s*$/.test(String(value ?? ""));
+
+// The data module's groups, flattened into the rows a picker lists: the glyph first, so the
+// row reads as the emoji and its name, and the searchable words after it.
+export function emojiEntries(groups) {
+  const list = [];
+  for (const [group, rows] of Object.entries(groups ?? {})) {
+    for (const row of Array.isArray(rows) ? rows : []) {
+      const [char, name, keywords = ""] = row ?? [];
+      if (typeof char !== "string" || typeof name !== "string") continue;
+      list.push({ id: `${group}:${name}`, char, name: `${char} ${name}`, keywords: `${name} ${keywords}` });
+    }
+  }
+  return list;
+}
+
+export const filterEmoji = (list, query) => {
+  const q = String(query ?? "").trim().toLowerCase();
+  if (!q) return list;
+  return list.filter((entry) => entry.char === q || entry.keywords.toLowerCase().includes(q));
+};
+
+// The list as one fetch for the life of a session: the first opening loads it, the next
+// openings reuse it, and a fetch that failed leaves nothing cached so it is asked for again.
+export function emojiLibrary(load = () => import("../emoji-data.js")) {
+  let pending = null;
+  return () => {
+    pending ??= Promise.resolve()
+      .then(() => load())
+      .then((mod) => emojiEntries(mod.EMOJI))
+      .catch((error) => { pending = null; throw error; });
+    return pending;
+  };
+}
+
+export function createFeature({ view = null, load = () => import("../emoji-data.js") } = {}) {
+  if (!view) return { run: () => ({ ok: false, code: "not-editing" }), dispose() {} };
+  const doc = view.dom.ownerDocument;
+  const library = emojiLibrary(load);
+  let session = null;
+
+  // The text the command belongs to, read from the document again at the commit: the picker
+  // holds no focus and writes nothing, so a caret that moved, a selection that is no longer
+  // the one the command was asked for or a place that takes no text all mean the bookmark no
+  // longer holds, and the command refuses rather than writing the glyph somewhere else.
+  function bookmark(s) {
+    const st = view.state;
+    const sel = st.selection;
+    if (sel.from !== s.from || sel.to !== s.to) return null;
+    if (s.from < 0 || s.to > st.doc.content.size) return null;
+    const $from = st.doc.resolve(s.from);
+    const $to = st.doc.resolve(s.to);
+    if (!$from.parent.isTextblock || $from.parent !== $to.parent) return null;
+    return { from: s.from, to: s.to };
+  }
+
+  // Where the list hangs, in the page's own placement variables. A view that cannot measure
+  // the caret (one outside a laid-out document) still gets its list, just not positioned.
+  function place(s) {
+    try {
+      const box = view.dom.parentElement?.getBoundingClientRect?.() ?? { left: 0, top: 0 };
+      const at = view.coordsAtPos(s.from);
+      return { x: Math.max(8, at.left - box.left), y: at.bottom + 6 - box.top };
+    } catch {
+      return null;
+    }
+  }
+
+  function anchor(s) {
+    const id = s.picker.activeId();
+    if (id) view.dom.setAttribute("aria-activedescendant", id);
+    else if (view.dom.getAttribute("aria-activedescendant")?.startsWith(s.picker.el.id)) view.dom.removeAttribute("aria-activedescendant");
+  }
+
+  function close() {
+    const s = session;
+    if (!s) return;
+    session = null;
+    for (const [target, type, fn, options] of s.listen) target.removeEventListener(type, fn, options);
+    if (view.dom.getAttribute("aria-activedescendant")?.startsWith(`${s.picker.el.id}-`)) view.dom.removeAttribute("aria-activedescendant");
+    s.picker.destroy();
+  }
+
+  // The one place a glyph reaches the document: the selection's text is replaced by it in a
+  // single transaction, with no mark and nothing else added.
+  function insertEmoji(at, char) {
+    const tr = view.state.tr.insertText(char, at.from, at.to);
+    tr.setSelection(state.TextSelection.create(tr.doc, at.from + char.length));
+    view.dispatch(asStep(tr));
+    view.focus();
+    return { ok: true, emoji: char };
+  }
+
+  function choose(index) {
+    const s = session;
+    if (!s) return { ok: false, code: "not-editing" };
+    const entry = s.picker.personAt(index);
+    const at = bookmark(s);
+    if (!entry || at === null || !isEmojiText(entry.char)) {
+      close();
+      if (!entry) return { ok: false, code: "no-emoji" };
+      if (at === null) return { ok: false, code: "stale-target" };
+      return { ok: false, code: "invalid-emoji" };
+    }
+    close();
+    return insertEmoji(at, entry.char);
+  }
+
+  function key(event) {
+    const s = session;
+    if (!s || composing(event, view)) return;
+    const stop = () => { event.preventDefault(); event.stopPropagation(); };
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      stop();
+      s.picker.move(event.key === "ArrowDown" ? 1 : -1);
+      anchor(s);
+    } else if (event.key === "Enter") {
+      stop();
+      choose(s.picker.index());
+    } else if (event.key === "Escape" || event.key === "Tab") {
+      stop();
+      close();
+    }
+  }
+
+  async function open(args = {}) {
+    close();
+    const s = { from: view.state.selection.from, to: view.state.selection.to, picker: null, listen: [] };
+    s.picker = createMentionPicker({ document: doc, label: "Insert an emoji", empty: "No emoji found", onPick: (index) => choose(index) });
+    session = s;
+    const listen = (target, type, fn, options) => {
+      target.addEventListener(type, fn, options);
+      s.listen.push([target, type, fn, options]);
+    };
+    listen(doc, "keydown", (event) => key(event), true);
+    // Typing closes the list: the caret has moved on, and the command that opened it has
+    // nothing to write where it no longer holds.
+    listen(view.dom, "input", () => close());
+    listen(doc, "mousedown", (event) => { if (!s.picker.el.contains(event.target)) close(); }, true);
+    (view.dom.parentElement ?? doc.body).appendChild(s.picker.el);
+
+    let list;
+    try {
+      list = await library();
+    } catch (error) {
+      close();
+      return { ok: false, code: "unavailable", error };
+    }
+    if (session !== s) return { ok: false, code: "not-editing" };
+    if (bookmark(s) === null) {
+      close();
+      return { ok: false, code: "stale-target" };
+    }
+    s.picker.show(filterEmoji(list, args?.query), place(s));
+    anchor(s);
+    return { ok: true, picker: true };
+  }
+
+  return {
+    // The Emoji action: the picker at the caret, offering the bundled list. It writes
+    // nothing until one is chosen.
+    async run(args) {
+      return open(args);
+    },
+    dispose() { close(); },
+  };
+}

package/src/page/features/export-html.js

@@ -0,0 +1,189 @@
+// The self-contained reading copy, as a command. One snapshot of the live model is
+// taken and rendered through the projection, then each image and attachment the
+// snapshot names is read once and written inside the file. Nothing downloads until
+// the person has seen the captured title, the time it was taken and every resource
+// the copy could not carry: a file that is missing something is never offered, and
+// one that is offered has no address in it that would be fetched again.
+import { project } from "../projection.js";
+import { blockMap } from "../model.js";
+import { PageExportError, renderExportHtml } from "../export-html.js";
+import { inlineExportResources } from "../export-assets.js";
+import { downloadHtml, documentName } from "../../core/download.js";
+import { mountEditorUI } from "../../ui/editor-ui.js";
+
+const MAX_NAME = 80;
+const UNSAFE_NAME = /[\u0000-\u001f\u007f<>:"/\\|?*]+/g;
+
+// The captured title as a file name: one line, no path of its own, and the page's own
+// name when a title has nothing a file name can keep.
+function fileName(title) {
+  const base = String(title ?? "").replace(UNSAFE_NAME, " ").replace(/\s+/g, " ").replace(/^\.+/, "").trim().slice(0, MAX_NAME).trim();
+  if (base) return `${base}.html`;
+  try { return `${documentName()}.html`; } catch { return "page.html"; }
+}
+
+// The panel sits in its own shadow root beside the editor, so the page's CSS cannot restyle
+// it. The page's --page-* tokens still reach it, and it keeps the editor's font and colour.
+const PANEL_CSS = `
+:host{font:inherit !important;color:inherit !important}
+.page-export-panel{max-width:46ch;margin:8px 0;padding:10px 12px;border:1px solid var(--page-pop-line);border-radius:8px;background:var(--page-pop-bg);color:var(--page-pop-ink);box-shadow:var(--page-pop-shadow);font-size:.88em}
+.page-export-title{margin:0 0 2px;font-weight:600}
+.page-export-when{margin:0 0 6px;color:var(--page-ink-soft)}
+.page-export-losses{margin:6px 0;padding-left:1.1em}
+.page-export-losses li{margin:2px 0}
+.page-export-acts{display:flex;gap:6px;margin-top:8px}
+.page-export-btn{border:0;padding:4px 8px;border-radius:6px;background:none;color:inherit;font:inherit;cursor:pointer}
+.page-export-btn:hover{background:var(--page-pop-hover)}
+.page-export-panel[data-state="loss"] .page-export-title{color:var(--page-danger, #9E3B2F)}
+`;
+
+export function createFeature({ view = null, download = downloadHtml, fetch: fetchImpl = null, now = () => new Date() } = {}) {
+  if (!view) return { run: () => ({ ok: false, code: "not-editing" }), dispose() {} };
+  const doc = view.dom.ownerDocument;
+  let session = null;
+  let disposed = false;
+
+  const listen = (s, target, type, fn) => {
+    target.addEventListener(type, fn);
+    s.listen.push([target, type, fn]);
+  };
+
+  const button = (act, label) => {
+    const b = doc.createElement("button");
+    b.type = "button";
+    b.className = "page-export-btn";
+    b.dataset.act = act;
+    b.textContent = label;
+    return b;
+  };
+
+  function close() {
+    const s = session;
+    if (!s) return;
+    session = null;
+    for (const [target, type, fn] of s.listen) target.removeEventListener(type, fn);
+    s.abort?.abort();
+    s.ui?.remove();
+  }
+
+  // One panel for the whole session: what was captured, what could not be carried, and
+  // the one action that does anything — a download, and only when nothing is missing.
+  function draw(s) {
+    const box = s.panel ?? (s.panel = doc.createElement("aside"));
+    box.className = "page-export-panel";
+    box.dataset.state = s.ready ? "ready" : "loss";
+    box.setAttribute("contenteditable", "false");
+    box.setAttribute("role", "dialog");
+    box.setAttribute("aria-modal", "false");
+    box.setAttribute("aria-labelledby", "page-export-title");
+    box.dataset.at = s.at.toISOString();
+    box.setAttribute("tabindex", "-1");
+    box.textContent = "";
+    const title = doc.createElement("p");
+    title.className = "page-export-title";
+    title.id = "page-export-title";
+    const heading = s.ready ? "Reading copy" : "This page cannot be a reading copy yet";
+    title.textContent = s.title ? `${heading}: ${s.title}` : heading;
+    const when = doc.createElement("p");
+    when.className = "page-export-when";
+    const said = `${s.at.toLocaleString()} · ${s.embedded} ${s.embedded === 1 ? "resource" : "resources"} inside the file`;
+    when.textContent = said;
+    box.append(title, when);
+    if (s.losses.length) {
+      const list = doc.createElement("ul");
+      list.className = "page-export-losses";
+      for (const entry of s.losses) {
+        const item = doc.createElement("li");
+        item.textContent = entry.message;
+        list.append(item);
+      }
+      box.append(list);
+    }
+    const acts = doc.createElement("div");
+    acts.className = "page-export-acts";
+    if (s.ready) acts.append(button("download", "Download"), button("close", "Close"));
+    else acts.append(button("retry", "Try again"), button("close", "Close"));
+    box.append(acts);
+    const first = acts.firstChild;
+    if (!s.ui) s.ui = mountEditorUI({ name: "page-export", content: box, css: [PANEL_CSS], parent: view.dom.parentElement ?? doc.body });
+    // The panel is what a person lands on: the download when there is one to take,
+    // and the list of what stopped it when there is not.
+    (s.ready ? first : box).focus?.();
+  }
+
+  function decide(s) {
+    listen(s, s.panel, "click", (event) => {
+      const b = event.target.closest?.("[data-act]");
+      if (!b) return;
+      event.preventDefault();
+      if (b.dataset.act === "close") close();
+      else if (b.dataset.act === "download") save(s);
+      else if (b.dataset.act === "retry") run().catch((error) => console.error("clayjs: the reading copy could not be made", error));
+    });
+    listen(s, doc, "keydown", (event) => {
+      if (event.key !== "Escape" || session !== s) return;
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+    }, true);
+  }
+
+  // The one place a reading copy becomes a file. The download is handed the bytes that
+  // were shown, never a second render, so what a person saw is what they get.
+  function save(s) {
+    if (!s.ready || disposed) return { ok: false, code: "not-editing" };
+    const saved = download({ html: s.ready.html, name: s.ready.name });
+    close();
+    return { ok: saved === true, downloaded: saved === true };
+  }
+
+  async function run() {
+    if (disposed || view.isDestroyed) return { ok: false, code: "not-editing" };
+    close();
+    const s = { at: now(), title: "", panel: null, listen: [], abort: new AbortController(), losses: [], embedded: 0, ready: null };
+    // The model is read once, before anything is awaited: a peer's edit while the
+    // resources arrive cannot change the file being made.
+    const blocks = blockMap(view.state.doc);
+    const model = project(blocks);
+    const base = doc.baseURI;
+    let rendered;
+    try {
+      rendered = renderExportHtml(model, {
+        fallbackOf: (id) => (typeof blocks[id]?.artifact?.fallbackHtml === "string" ? blocks[id].artifact.fallbackHtml : ""),
+        doc,
+      });
+    } catch (error) {
+      if (!(error instanceof PageExportError)) throw error;
+      s.title = null;
+      s.losses = [{ code: error.code, message: error.message }];
+      session = s;
+      draw(s);
+      decide(s);
+      return { ok: false, code: error.code, message: error.message };
+    }
+    s.title = rendered.title || "Untitled";
+    session = s;
+    const transport = fetchImpl ?? globalThis.fetch;
+    const result = await inlineExportResources(rendered.html, { resources: rendered.resources, base, fetch: transport, signal: s.abort.signal });
+    if (disposed || view.isDestroyed || session !== s) return { ok: false, code: "not-editing" };
+    s.embedded = result.embedded;
+    s.losses = result.losses.slice();
+    for (const entry of result.remote ?? []) {
+      s.losses.push({ code: "remote-reference", message: `The ${entry.tag} in the reading copy still points at ${String(entry.value).slice(0, 120)}` });
+    }
+    if (!s.losses.length) s.ready = { html: result.html, name: fileName(s.title) };
+    draw(s);
+    decide(s);
+    return s.ready
+      ? { ok: true, title: s.title, name: s.ready.name, embedded: s.embedded }
+      : { ok: false, code: "resource-losses", losses: s.losses };
+  }
+
+  return {
+    run,
+    dispose() {
+      disposed = true;
+      close();
+    },
+  };
+}

package/src/page/features/export-markdown.js

@@ -0,0 +1,169 @@
+// Markdown export: the Download Markdown action. It snapshots the live record once, so a
+// peer's edit while the report is open cannot change the file, and it shows what the
+// format could not carry before anything downloads: each block written as semantic HTML
+// and each construct whose meaning goes away, named per block. No parser is fetched to
+// export. The file goes through the page copy's own download helper, nothing here writes,
+// enters history or marks the page saved, and an active composition is waited out rather
+// than forced.
+import { blockMap } from "../model.js";
+import { downloadHtml, documentName } from "../../core/download.js";
+import { exportMarkdown, markdownFileName } from "../export-markdown.js";
+
+export function createFeature({ view = null, download = downloadHtml } = {}) {
+  if (!view) return { run: () => Promise.resolve({ ok: false, code: "not-editing" }), dispose() {} };
+  const doc = view.dom.ownerDocument;
+  let session = null;
+  let disposed = false;
+
+  function close() {
+    const s = session;
+    if (!s) return false;
+    session = null;
+    for (const [target, type, fn, options] of s.listen) target.removeEventListener(type, fn, options);
+    s.panel.remove();
+    return true;
+  }
+
+  function cancel() {
+    if (!close()) return { ok: false, code: "cancelled" };
+    view.focus?.();
+    return { ok: true, cancelled: true };
+  }
+
+  // The report: how much was written, every construct kept as HTML and every loss, then
+  // Download and Cancel. It uses the editor's own menu markup, so it needs no stylesheet
+  // of its own.
+  function draw(s) {
+    const parts = [];
+    const line = (className, text) => {
+      const el = doc.createElement("div");
+      el.className = className;
+      el.textContent = text;
+      return el;
+    };
+    parts.push(line("page-menu-title", "Export as Markdown"));
+    const counts = [`${s.report.blocks} block${s.report.blocks === 1 ? "" : "s"}`];
+    if (s.report.extensions.length) counts.push(`${s.report.extensions.length} kept as HTML`);
+    if (s.report.losses.length) counts.push(`${s.report.losses.length} lost`);
+    parts.push(line("page-menu-title page-export-summary", counts.join(" \u00b7 ")));
+    const section = (className, label, list) => {
+      if (!list.length) return;
+      const box = doc.createElement("div");
+      box.className = className;
+      box.append(line("page-menu-title", label));
+      for (const one of list) {
+        const row = line("page-export-row", one.name);
+        row.dataset.block = one.block ?? "";
+        row.dataset.type = one.type ?? "";
+        box.append(row);
+      }
+      parts.push(box);
+    };
+    section("page-export-extensions", "Kept as HTML", s.report.extensions);
+    section("page-export-losses", "Not kept in Markdown", s.report.losses);
+    if (!s.report.extensions.length && !s.report.losses.length) parts.push(line("page-export-row", "Everything here is written as Markdown."));
+    if (s.notice) {
+      const failed = doc.createElement("p");
+      failed.className = "page-export-error";
+      failed.setAttribute("role", "alert");
+      failed.textContent = s.notice;
+      parts.push(failed);
+    }
+    const button = (what, label) => {
+      const el = doc.createElement("button");
+      el.type = "button";
+      el.className = "page-menu-item";
+      el.dataset.export = what;
+      el.textContent = label;
+      el.addEventListener("mousedown", (event) => event.preventDefault());
+      el.addEventListener("click", () => (what === "download" ? save() : cancel()));
+      return el;
+    };
+    parts.push(button("download", `Download ${s.name}`), button("cancel", "Cancel"));
+    s.panel.replaceChildren(...parts);
+  }
+
+  function save() {
+    const s = session;
+    if (!s) return { ok: false, code: "no-export" };
+    if (download({ html: s.report.text, name: s.name, type: "text/markdown" })) {
+      close();
+      view.focus?.();
+      return { ok: true, downloaded: true };
+    }
+    s.notice = "That download could not be made.";
+    draw(s);
+    return { ok: false, code: "download-failed" };
+  }
+
+  function key(event) {
+    const s = session;
+    if (!s || event.isComposing || event.keyCode === 229) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      cancel();
+    } else if (event.key === "Enter" && !event.target?.closest?.("[data-export]")) {
+      event.preventDefault();
+      event.stopPropagation();
+      save();
+    }
+  }
+
+  function open(report, name) {
+    const panel = doc.createElement("div");
+    panel.className = "page-menu page-export-preview";
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-label", "Export Markdown");
+    const s = { report, name, panel, notice: null, listen: [] };
+    session = s;
+    const listen = (target, type, fn, options) => {
+      target.addEventListener(type, fn, options);
+      s.listen.push([target, type, fn, options]);
+    };
+    listen(doc, "keydown", (event) => key(event), true);
+    listen(doc, "mousedown", (event) => { if (!s.panel.contains(event.target)) cancel(); }, true);
+    (view.dom.parentElement ?? doc.body).appendChild(panel);
+    draw(s);
+    panel.querySelector('[data-export="download"]')?.focus?.();
+    return { ok: true, preview: true };
+  }
+
+  // A composition is never forced: the export waits for the person to finish it, because
+  // the record it reads is the one the composition is still writing into.
+  function composed() {
+    if (!view.composing) return Promise.resolve();
+    return new Promise((resolve) => {
+      const done = () => {
+        view.dom.removeEventListener("compositionend", done);
+        resolve();
+      };
+      view.dom.addEventListener("compositionend", done);
+    });
+  }
+
+  async function run() {
+    if (disposed || view.isDestroyed) return { ok: false, code: "not-editing" };
+    close();
+    await composed();
+    if (disposed || view.isDestroyed) return { ok: false, code: "not-editing" };
+    const snapshot = blockMap(view.state.doc);
+    let report;
+    try {
+      report = exportMarkdown(snapshot);
+    } catch (error) {
+      return { ok: false, code: "export-failed", error };
+    }
+    return open(report, markdownFileName(documentName()));
+  }
+
+  return {
+    async run(args) {
+      return run(args);
+    },
+    dispose() {
+      disposed = true;
+      close();
+    },
+  };
+}