@panphora/clayjs 1.15.2 → 1.17.0

package/src/page/emoji-data.js

@@ -0,0 +1,162 @@
+// The emoji a picker offers: a small curated set, grouped the way somebody looks for one.
+// Each row is [glyph, name, keywords], and the glyph is the whole record: a variation
+// selector, a skin tone, a flag's regional pair, a keycap or a joined family is written as
+// the one grapheme a person sees, and nothing here is a font, a sprite, an image or a URL.
+// It is fetched by `emoji.js` the first time the picker opens, never by a reader and never
+// with the editor.
+export const EMOJI = {
+  "Smileys": [
+    ["😀", "grinning", "face smile happy"],
+    ["😃", "grinning big eyes", "face smile happy"],
+    ["😄", "grinning smiling eyes", "face laugh happy"],
+    ["😁", "beaming", "face grin happy"],
+    ["😆", "laughing", "face happy haha"],
+    ["😅", "sweat smile", "face relief nervous"],
+    ["😂", "joy", "face tears laugh lol"],
+    ["🙂", "slight smile", "face ok"],
+    ["🙃", "upside down", "face silly"],
+    ["😉", "wink", "face flirt"],
+    ["😊", "blush", "face smile warm"],
+    ["😇", "halo", "face angel innocent"],
+    ["🥰", "smiling hearts", "face love"],
+    ["😍", "heart eyes", "face love crush"],
+    ["🤩", "star struck", "face wow excited"],
+    ["😎", "cool", "face sunglasses"],
+    ["🤔", "thinking", "face hmm question"],
+    ["😐", "neutral", "face flat"],
+    ["😴", "sleeping", "face tired zzz"],
+    ["😢", "crying", "face sad tear"],
+    ["😭", "sobbing", "face sad tears"],
+    ["😡", "angry", "face mad red"],
+    ["😱", "scream", "face fear shock"],
+    ["🤯", "exploding head", "face mind blown"],
+    ["🥳", "party face", "celebration birthday"],
+    ["😷", "mask", "face sick medical"],
+    ["🤒", "thermometer", "face sick ill"],
+  ],
+  "Gestures and people": [
+    ["👋", "wave", "hand hello hi bye"],
+    ["👋🏽", "wave medium skin tone", "hand hello hi"],
+    ["👍", "thumbs up", "yes like approve"],
+    ["👍🏿", "thumbs up dark skin tone", "yes like approve"],
+    ["👎", "thumbs down", "no dislike"],
+    ["👏", "clapping", "hands applause bravo"],
+    ["🙌", "raised hands", "hooray praise"],
+    ["🙏", "folded hands", "please thanks pray"],
+    ["💪", "flexed arm", "strong muscle"],
+    ["🤝", "handshake", "deal agreement"],
+    ["👨‍👩‍👧‍👦", "family", "people children parents"],
+    ["🧑‍💻", "technologist", "person laptop work code"],
+    ["🏃", "runner", "person sport hurry"],
+    ["🧘", "lotus", "person meditation yoga"],
+  ],
+  "Animals and nature": [
+    ["🐶", "dog", "animal pet puppy"],
+    ["🐱", "cat", "animal pet kitten"],
+    ["🐭", "mouse", "animal rodent"],
+    ["🐰", "rabbit", "animal bunny"],
+    ["🦊", "fox", "animal"],
+    ["🐻", "bear", "animal"],
+    ["🐼", "panda", "animal"],
+    ["🐨", "koala", "animal"],
+    ["🐯", "tiger", "animal"],
+    ["🦁", "lion", "animal"],
+    ["🐮", "cow", "animal"],
+    ["🐷", "pig", "animal"],
+    ["🐸", "frog", "animal"],
+    ["🐵", "monkey", "animal"],
+    ["🐔", "chicken", "animal bird"],
+    ["🐧", "penguin", "animal bird"],
+    ["🐦", "bird", "animal"],
+    ["🦄", "unicorn", "animal magic"],
+    ["🐝", "bee", "animal insect honey"],
+    ["🦋", "butterfly", "animal insect"],
+    ["🌸", "cherry blossom", "flower plant spring"],
+    ["🌻", "sunflower", "flower plant summer"],
+    ["🌈", "rainbow", "weather sky"],
+    ["🌲", "evergreen tree", "plant forest"],
+    ["🌵", "cactus", "plant desert"],
+    ["🍁", "maple leaf", "plant autumn"],
+  ],
+  "Food and drink": [
+    ["☕", "coffee", "drink cup hot"],
+    ["🍵", "tea", "drink cup green"],
+    ["🍺", "beer", "drink mug"],
+    ["🍷", "wine", "drink glass"],
+    ["🍎", "apple", "fruit food red"],
+    ["🍌", "banana", "fruit food"],
+    ["🍇", "grapes", "fruit food"],
+    ["🍓", "strawberry", "fruit food"],
+    ["🍑", "peach", "fruit food"],
+    ["🍕", "pizza", "food slice"],
+    ["🍔", "burger", "food"],
+    ["🍟", "fries", "food"],
+    ["🌮", "taco", "food"],
+    ["🍣", "sushi", "food fish"],
+    ["🍜", "noodles", "food ramen"],
+    ["🍰", "cake", "food dessert"],
+    ["🍪", "cookie", "food sweet"],
+    ["🍫", "chocolate", "food sweet"],
+    ["🥑", "avocado", "food fruit"],
+    ["🥕", "carrot", "food vegetable"],
+    ["🍞", "bread", "food loaf"],
+  ],
+  "Travel and places": [
+    ["✈️", "airplane", "travel flight"],
+    ["🚗", "car", "travel drive"],
+    ["🚲", "bicycle", "travel bike"],
+    ["🚂", "train", "travel locomotive"],
+    ["🚀", "rocket", "travel launch space"],
+    ["⛵", "sailboat", "travel boat"],
+    ["🏠", "house", "place home"],
+    ["🏢", "office", "place building work"],
+    ["🗽", "statue of liberty", "place new york"],
+    ["🗼", "tower", "place tokyo"],
+    ["🏔", "mountain", "place snow"],
+    ["🏖", "beach", "place holiday sea"],
+    ["🌍", "globe", "world earth"],
+    ["🗺", "map", "place world"],
+    ["🚦", "traffic light", "place street"],
+  ],
+  "Objects": [
+    ["💡", "bulb", "idea light"],
+    ["🔥", "fire", "hot flame"],
+    ["⭐", "star", "favourite rating"],
+    ["💯", "hundred", "score perfect"],
+    ["✅", "check", "done yes"],
+    ["❌", "cross", "no wrong"],
+    ["⚠️", "warning", "caution alert"],
+    ["📌", "pushpin", "pin note"],
+    ["📎", "paperclip", "attach"],
+    ["📅", "calendar", "date schedule"],
+    ["📈", "chart up", "graph growth"],
+    ["📉", "chart down", "graph loss"],
+    ["💰", "money bag", "cash"],
+    ["🔑", "key", "access"],
+    ["🔒", "lock", "secure private"],
+    ["🔔", "bell", "notify alert"],
+    ["🎉", "party popper", "celebrate"],
+    ["🎁", "gift", "present"],
+    ["🏆", "trophy", "win award"],
+    ["🎯", "target", "goal aim"],
+    ["⏰", "alarm clock", "time"],
+    ["⌛", "hourglass", "time wait"],
+  ],
+  "Symbols": [
+    ["❤️", "red heart", "love"],
+    ["💔", "broken heart", "love sad"],
+    ["✨", "sparkles", "magic new"],
+    ["1️⃣", "keycap one", "number"],
+    ["2️⃣", "keycap two", "number"],
+    ["#️⃣", "keycap hash", "number channel"],
+    ["🇫🇷", "flag france", "country"],
+    ["🇺🇸", "flag united states", "country"],
+    ["🇯🇵", "flag japan", "country"],
+    ["♻️", "recycle", "reuse"],
+    ["➡️", "arrow right", "direction next"],
+    ["⬅️", "arrow left", "direction back"],
+    ["🔁", "repeat", "loop again"],
+    ["🔀", "shuffle", "random"],
+    ["🆗", "ok button", "yes"],
+  ],
+};

package/src/page/feature-loader.js

@@ -0,0 +1,72 @@
+// Optional editor features load the first time a document needs them. One import per
+// feature; a caller's abort stops only its own wait; dispose() makes late results inert.
+export function createFeatureLoader({ load, install, reportError = (error) => console.error("clayjs: an editor feature failed to load", error) }) {
+  const installed = new Map();
+  const pending = new Map();
+  const prepared = new Map();
+  let disposed = false;
+
+  // A preparation fetches the module without installing it, so the boot can overlap
+  // that fetch with the room join. The install that follows consumes this same
+  // import: a feature is fetched once, and a failed fetch is that attempt. The next
+  // ensure after it loads again through the loader's reporting and the feature's
+  // Retry.
+  function prepare(id) {
+    if (disposed) return Promise.reject(new Error(`page: feature loader disposed before ${id}`));
+    let shared = prepared.get(id);
+    if (!shared) {
+      shared = Promise.resolve(load(id));
+      prepared.set(id, shared);
+      // The install reports the failure; this keeps an unconsumed preparation quiet.
+      shared.catch(() => {});
+    }
+    return shared;
+  }
+
+  function loadFor(id) {
+    const fetched = prepared.get(id);
+    if (!fetched) return load(id);
+    prepared.delete(id);
+    return fetched;
+  }
+
+  function ensure(id, { signal } = {}) {
+    if (disposed) return Promise.reject(new Error(`page: feature loader disposed before ${id}`));
+    if (installed.has(id)) return Promise.resolve(installed.get(id));
+    let shared = pending.get(id);
+    if (!shared) {
+      shared = loadFor(id)
+        .then((mod) => (disposed ? null : Promise.resolve(install(id, mod))))
+        .then((feature) => {
+          if (disposed) {
+            feature?.dispose?.();
+            return feature;
+          }
+          installed.set(id, feature);
+          return feature;
+        });
+      shared.catch((error) => { if (!disposed) reportError(error, id); }).finally(() => pending.delete(id));
+      pending.set(id, shared);
+    }
+    if (!signal) return shared;
+    if (signal.aborted) return Promise.reject(signal.reason);
+    return new Promise((resolve, reject) => {
+      const onAbort = () => reject(signal.reason);
+      signal.addEventListener("abort", onAbort, { once: true });
+      shared.then(resolve, reject).finally(() => signal.removeEventListener("abort", onAbort));
+    });
+  }
+
+  return {
+    prepare,
+    ensure,
+    has: (id) => installed.has(id),
+    dispose() {
+      disposed = true;
+      for (const feature of installed.values()) feature?.dispose?.();
+      installed.clear();
+      pending.clear();
+      prepared.clear();
+    },
+  };
+}

package/src/page/features/board.js

@@ -0,0 +1,21 @@
+import { BOARD_CSS } from "../board-style.js";
+import { BoardView } from "../board-view.js";
+import { cardPanel } from "../board-panel.js";
+import { cardPanels } from "../board-views.js";
+import { addViewHook } from "../view-hooks.js";
+
+export function createFeature({ view = null, board = null, undo = null, redo = null } = {}) {
+  const off = view ? addViewHook(view, {
+    update: (editorView) => cardPanels.get(editorView)?.sync(),
+    destroy: (editorView) => {
+      cardPanels.get(editorView)?.hide(false, false);
+      cardPanels.delete(editorView);
+    },
+  }) : () => {};
+  return {
+    id: "board",
+    nodeViews: board ? { board: (node, editorView, getPos) => new BoardView(node, editorView, getPos, { commands: board, undo, redo, panel: cardPanel(editorView) }) } : null,
+    css: board ? BOARD_CSS : null,
+    dispose() { off(); },
+  };
+}

package/src/page/features/chart.js

@@ -0,0 +1,11 @@
+import { ChartView, refreshCharts } from "../chart.js";
+import { addViewHook } from "../view-hooks.js";
+
+export function createFeature({ view = null } = {}) {
+  const off = view ? addViewHook(view, { update: refreshCharts }) : () => {};
+  return {
+    id: "chart",
+    nodeViews: { chart: (node, editorView, getPos) => new ChartView(node, editorView, getPos) },
+    dispose() { off(); },
+  };
+}

package/src/page/features/code.js

@@ -0,0 +1,13 @@
+// Code blocks: their language picker and the syntax colours. Loaded the first
+// time a document has or takes a code block.
+import { CodeBlockView, startHighlighter } from "../highlight.js";
+
+export function createFeature({ view = null, highlight = {} } = {}) {
+  const highlighter = view ? startHighlighter(view, highlight) : null;
+  return {
+    id: "code",
+    nodeViews: { code_block: (node, v, getPos) => new CodeBlockView(node, v, getPos) },
+    css: null,
+    dispose() { highlighter?.destroy(); },
+  };
+}

package/src/page/features/dates.js

@@ -0,0 +1,180 @@
+// Date mentions: the Date action offers Today and Tomorrow, and choosing one writes that
+// calendar day into the document as ordinary ISO text with the `date` mark over it. Both
+// days are resolved once, when the command runs, from the local calendar rather than from a
+// UTC instant, so the text a person reads is the day they picked; nothing here stores a
+// time, a zone, a relative word or a reminder, and nothing speaks to the network. Loaded on
+// the first Date action, and disposed with the exit.
+import { state } from "../../vendor/prosemirror.vendor.js";
+import { schema } from "../schema.js";
+import { asStep } from "../blocksel.js";
+import { composing } from "../markdown.js";
+import { createMentionPicker } from "../mention-picker.js";
+import { runFormatted } from "../format-command.js";
+
+const pad = (n) => String(n).padStart(2, "0");
+
+// A calendar date, as the record stores it: no year padding games, no leap second, no
+// zone. A day that does not exist is not a date, so 2023-02-29 is refused.
+export function isISODate(value) {
+  if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value)) return false;
+  const parsed = new Date(`${value}T12:00:00Z`);
+  return Number.isFinite(parsed.valueOf()) && parsed.toISOString().slice(0, 10) === value;
+}
+
+// Today, from the local calendar: the fields a person reads on their own wall clock, never
+// `toISOString()` of a local time, which is tomorrow or yesterday for part of the day.
+export const localISODate = (now = new Date()) => `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
+
+// A day after (or before) a date, by calendar arithmetic on the date alone: noon UTC keeps
+// a daylight-saving shift from landing on the day before.
+const dayAfter = (date, days) => {
+  const moved = new Date(`${date}T12:00:00Z`);
+  moved.setUTCDate(moved.getUTCDate() + days);
+  return moved.toISOString().slice(0, 10);
+};
+
+// What the picker lists: two days, both resolved here and once, labelled with the text each
+// one writes. Nothing is stored and no day is invented later.
+export const earlyDays = (today) => {
+  const tomorrow = dayAfter(today, 1);
+  return [
+    { id: "today", name: `Today (${today})`, date: today },
+    { id: "tomorrow", name: `Tomorrow (${tomorrow})`, date: tomorrow },
+  ];
+};
+
+export function createFeature({ view = null } = {}) {
+  if (!view) return { run: () => ({ ok: false, code: "not-editing" }), dispose() {} };
+  const doc = view.dom.ownerDocument;
+  let session = null;
+
+  // The caret 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 empty or a block that refuses marks all mean the bookmark no longer holds and the
+  // command refuses rather than writing the date somewhere else.
+  function bookmark(s) {
+    const st = view.state;
+    if (!st.selection.empty || st.selection.from !== s.from) return null;
+    if (s.from < 0 || s.from > st.doc.content.size) return null;
+    const $from = st.doc.resolve(s.from);
+    if (!$from.parent.isTextblock || $from.parent.type.spec.code) return null;
+    if (!$from.parent.type.allowsMarkType(schema.marks.date)) return null;
+    return s.from;
+  }
+
+  // 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 date reaches the document. Document 14 Step 8a wraps this call in the
+  // format gate's `runFormatCommand`; nothing else in this module writes.
+  function insertDateMention(at, date) {
+    const label = String(date);
+    // One transaction: the ISO text and its mark, then one unmarked space so typing at the
+    // edge of a date stays plain text.
+    const tr = view.state.tr.insertText(label, at, at);
+    tr.addMark(at, at + label.length, schema.marks.date.create({ date: label }));
+    tr.insertText(" ", at + label.length);
+    tr.setSelection(state.TextSelection.create(tr.doc, at + label.length + 1));
+    view.dispatch(asStep(tr));
+    view.focus();
+    return { ok: true, date: label };
+  }
+
+  async 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 (at === null || !entry || !isISODate(entry.date)) {
+      close();
+      if (!entry) return { ok: false, code: "no-date" };
+      if (at === null) return { ok: false, code: "stale-target" };
+      return { ok: false, code: "invalid-date" };
+    }
+    close();
+    // The gate awaits, so the caret is read again here: one that moved, a selection that is
+    // no longer a caret or a block that refuses marks means the target no longer holds, and
+    // the date is not written anywhere.
+    return runFormatted(view, () => {
+      const now = bookmark(s);
+      if (now === null) return { ok: false, code: "stale-target" };
+      return insertDateMention(now, entry.date);
+    });
+  }
+
+  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();
+    }
+  }
+
+  function open() {
+    close();
+    // Today is read once, here: a picker left open across midnight still writes the day the
+    // command was asked for, and choosing Tomorrow never reads the clock again.
+    const s = { from: view.state.selection.from, days: earlyDays(localISODate()), picker: null, listen: [] };
+    s.picker = createMentionPicker({ document: doc, label: "Insert a date", empty: "No date to insert", 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);
+    if (bookmark(s) === null) {
+      close();
+      return { ok: false, code: "stale-target" };
+    }
+    s.picker.show(s.days, place(s));
+    anchor(s);
+    return { ok: true, picker: true };
+  }
+
+  return {
+    // The Date action: the picker at the caret, offering the two days resolved now. It
+    // writes nothing until one is chosen.
+    async run() {
+      return open();
+    },
+    dispose() { close(); },
+  };
+}

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(); },
+  };
+}