@panphora/clayjs 1.16.0 → 1.17.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/mentions.js

@@ -0,0 +1,188 @@
+// Person mentions: @ opens a picker of people, and choosing one writes that person's name
+// into the document as ordinary text with the `mention` mark over it. The label is the name
+// the command saw, so a later rename never rewrites somebody's prose, and the id is the
+// people registry's reference: nothing here notifies anyone, looks up an account or speaks
+// to the network. Loaded the first time somebody types @, 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, filterPeople, peopleFrom } from "../mention-picker.js";
+import { runFormatted } from "../format-command.js";
+
+// clay.people's own id grammar (plugins/people.js): a mention keeps an id the registry made.
+const ID = /^[A-Za-z0-9_-]{8,64}$/;
+const TRIGGER = "@";
+const QUERY_MAX = 100;
+
+export function createFeature({ view = null } = {}) {
+  if (!view) return { run: () => ({ ok: false, code: "not-editing" }), dispose() {} };
+  const doc = view.dom.ownerDocument;
+  const registry = () => globalThis.clay?.people ?? null;
+  let session = null;
+
+  // The query the picker belongs to, read from the document again on every keystroke and
+  // again at the commit: a deleted @, a caret that left the block or a peer that replaced
+  // the text means the bookmark no longer holds, and the command refuses rather than
+  // handing the person whoever took that place.
+  function bookmark(s) {
+    const st = view.state;
+    if (!st.selection.empty) return null;
+    const head = st.selection.head;
+    if (head <= s.from || head - s.from > QUERY_MAX + 1 || head > 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 (head > $from.end() || head < $from.start()) return null;
+    // The @ has to start a word: the beginning of a block, or after a space.
+    if ($from.parentOffset && !/\s/.test(st.doc.textBetween(s.from - 1, s.from, "", "\n"))) return null;
+    if (st.doc.textBetween(s.from, s.from + 1) !== TRIGGER) return null;
+    return { head, query: st.doc.textBetween(s.from + 1, head) };
+  }
+
+  // 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 draw(s) {
+    s.picker.show(filterPeople(peopleFrom(s.saved, s.allowed), s.query), place(s));
+    anchor(s);
+  }
+
+  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();
+  }
+
+  function refresh() {
+    const s = session;
+    if (!s || view.composing) return;
+    const at = bookmark(s);
+    if (!at) return close();
+    s.query = at.query;
+    draw(s);
+  }
+
+  async function choose(index) {
+    const s = session;
+    if (!s) return { ok: false, code: "not-editing" };
+    const person = s.picker.personAt(index);
+    const at = bookmark(s);
+    const usable = person && at && at.query === s.query && ID.test(String(person.id ?? "")) && String(person.name ?? "").trim();
+    if (!usable) {
+      close();
+      return { ok: false, code: person ? "stale-target" : "no-person" };
+    }
+    const label = String(person.name).trim();
+    close();
+    // The gate awaits, so the bookmark is read again here: a caret that moved, a query that
+    // changed or a block that went away means the target no longer holds and nothing is
+    // written.
+    return runFormatted(view, () => {
+      const now = bookmark(s);
+      if (!now || now.query !== s.query) return { ok: false, code: "stale-target" };
+      // One transaction: the revalidated query becomes the name and its mark, then one
+      // unmarked space so typing at the edge of a mention stays plain text.
+      const tr = view.state.tr.insertText(label, s.from, now.head);
+      tr.addMark(s.from, s.from + label.length, schema.marks.mention.create({ id: person.id }));
+      tr.insertText(" ", s.from + label.length);
+      tr.setSelection(state.TextSelection.create(tr.doc, s.from + label.length + 1));
+      view.dispatch(asStep(tr));
+      view.focus();
+      return { ok: true, id: person.id, label };
+    });
+  }
+
+  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();
+    }
+  }
+
+  // The host's list arrives after the picker is already up: the people the document names
+  // show first, and a failed or missing list leaves exactly those. Neither presence nor an
+  // account lookup is a source of candidates.
+  function roster(s) {
+    const available = registry()?.available;
+    if (!available) return;
+    Promise.resolve().then(() => available()).then((allowed) => {
+      if (session !== s) return;
+      s.allowed = Array.isArray(allowed) ? allowed : null;
+      draw(s);
+    }).catch(() => {});
+  }
+
+  function open(from) {
+    close();
+    const picker = createMentionPicker({ document: doc, onPick: (index) => choose(index) });
+    const s = { from, picker, query: "", allowed: null, saved: [], listen: [] };
+    try { s.saved = registry()?.list?.() ?? []; } catch { s.saved = []; }
+    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(view.dom, "input", () => refresh());
+    listen(view.dom, "keyup", () => refresh());
+    listen(view.dom, "compositionend", () => refresh());
+    listen(doc, "mousedown", (event) => { if (!s.picker.el.contains(event.target)) close(); }, true);
+    (view.dom.parentElement ?? doc.body).appendChild(picker.el);
+    const at = bookmark(s);
+    if (!at) {
+      close();
+      return { ok: false, code: "stale-target" };
+    }
+    s.query = at.query;
+    draw(s);
+    roster(s);
+    return { ok: true, picker: true };
+  }
+
+  return {
+    // {from} is the @ the person typed; without one this is the Mention action, which types
+    // that @ at the caret and opens the same picker on it.
+    async run(args = {}) {
+      let from = Number.isInteger(args?.from) ? args.from : null;
+      if (from === null) {
+        const st = view.state;
+        const $from = st.selection.$from;
+        if (!st.selection.empty || !$from.parent.isTextblock || $from.parent.type.spec.code) return { ok: false, code: "stale-target" };
+        from = st.selection.from;
+        const tr = view.state.tr.insertText(TRIGGER);
+        tr.setSelection(state.TextSelection.create(tr.doc, from + 1));
+        view.dispatch(tr);
+      }
+      return open(from);
+    },
+    dispose() { close(); },
+  };
+}

package/src/page/features/registry.js

@@ -6,6 +6,7 @@
 export const FEATURES = {
   table: { types: ["table"], views: ["table", "table_cell"], module: "page/features/table.js", load: () => import("./table.js") },
   board: { types: ["board"], module: "page/features/board.js", load: () => import("./board.js") },
+  chart: { types: ["chart"], views: ["chart"], module: "page/features/chart.js", load: () => import("./chart.js") },
   code: { types: ["code_block"], module: "page/features/code.js", load: () => import("./code.js") },
   media: { types: ["image", "file"], module: "page/features/media.js", load: () => import("./media.js") },
   tool: { types: ["tool"], module: "page/features/tool.js", boot: ["page/tools.js", "page/tool-data.js"], load: () => import("./tool.js") },
@@ -20,4 +21,8 @@ export const featureForType = (type) => Object.keys(FEATURES).find((id) => FEATU
 // and the offline manifest carries them, and `module` is the part on the wire (the load
 // meter counts it). A row lands with the step that gives it a module: a literal import of
 // a file this tree does not have yet would stop the chunk build.
-export const COMMAND_FEATURES = {};
+export const COMMAND_FEATURES = {
+  mentions: { module: "page/features/mentions.js", load: () => import("./mentions.js") },
+  dates: { module: "page/features/dates.js", load: () => import("./dates.js") },
+  emoji: { module: "page/features/emoji.js", load: () => import("./emoji.js") },
+};

package/src/page/features/table.js

@@ -4,7 +4,7 @@ import { DEFAULT_WIDTH, MAX_WIDTH, MIN_WIDTH, addColumn, addRow, deleteColumn, d
 import { COLUMN_KINDS } from "../rich/csv.js";
 import { KIND_ICONS, KIND_LABELS, columnKinds } from "../table-kinds.js";
 import { openPageMenu } from "../chrome.js";
-import { insertChartAfterTable } from "../chart.js";
+import { loadChartPart } from "../items.js";
 import { selectLine } from "../table-select.js";
 import { TABLE_CSS } from "../table-style.js";
 import { cellViews } from "../table-views.js";
@@ -252,7 +252,7 @@ export class TableView {
             { label: "Fit to content", icon: "↔", run: () => this.fit(colId) },
             ...(col.width ? [{ label: "Reset width", icon: "×", run: () => this.command(setColumnWidth(colId, null)) }] : []),
           ]) },
-          { label: "Chart this table", icon: "📊", run: () => insertChartAfterTable(this.view, this.getPos()) },
+          { label: "Chart this table", icon: "📊", run: () => { const at = this.getPos(); return loadChartPart(this.view).then(({ insertChartAfterTable }) => insertChartAfterTable(this.view, at)); } },
           { label: "Insert column left", icon: "+", run: run(addColumn(false)) },
           { label: "Insert column right", icon: "+", run: run(addColumn(true)) },
           ...(index > 0 ? [{ label: "Move left", icon: "←", run: run(moveColumn(-1)) }] : []),

package/src/page/format-command.js

@@ -0,0 +1,9 @@
+// A command that writes a newer page format asks the format gate first. The answer is
+// the command's own result when the gate let it apply, or the gate's refusal, so the
+// caller writes nothing on a refusal.
+export async function runFormatted(view, apply) {
+  if (typeof view.runFormatCommand !== "function") return { ok: false, code: "page-format-unsupported" };
+  const answer = await view.runFormatCommand(apply);
+  if (answer?.status === "applied") return answer.result;
+  return { ok: false, code: answer?.code ?? answer?.status ?? "page-format-refused", retry: answer?.retry === true };
+}

package/src/page/format-host.js

@@ -0,0 +1,54 @@
+// The production host adapter behind the format gate: the floor the document is
+// already at, the host's own admission answer, and the one explicit save that
+// raises it.
+//
+// The host is the authority, so `capabilities()` answers nothing here: the editors
+// admitted to the document are checked under its admission/write lock when the save
+// carrying the marker arrives, which is the check no registration can race. A save
+// refused there reports `page-format-upgrade-required` like any other refusal, and
+// this tab stays at the floor it already knew.
+//
+// Nothing is noted before the host answers: `notePageFormatFloor` runs when the gate
+// accepts the activation, so a refusal leaves every later save at floor 0.
+
+import { PAGE_FORMAT, PAGE_FORMAT_META, PAGE_FORMAT_UPGRADE, knownPageFormatFloor, pageFormatFloor } from "./format-level.js";
+import { hostPageFormat } from "../core/host-meta.js";
+
+const FAILED = "page-format-activation-failed";
+
+// The document's own marker, as it was served. A tab that joined a document already
+// at floor 1 must not ask to activate it again.
+function servedFloor() {
+  const tag = document.querySelector(`meta[name="${PAGE_FORMAT_META}"]`);
+  return tag ? pageFormatFloor(tag.outerHTML) : 0;
+}
+
+// The editor's own explicit save, fetched when a floor is really raised: a tab that
+// never uses a newer format never downloads the lane to raise one.
+const savePage = async (options) => (await import("../core/save.js")).savePageForce(() => {}, options);
+
+export function createFormatHost({
+  save = savePage,
+  supported = () => hostPageFormat().then((floor) => floor === PAGE_FORMAT),
+} = {}) {
+  return {
+    read() {
+      return { floor: Math.max(knownPageFormatFloor(), servedFloor()), revision: null };
+    },
+    capabilities() {
+      return [];
+    },
+    supported,
+    async activate({ floor = PAGE_FORMAT } = {}) {
+      let result;
+      try {
+        result = await save({ pageFormatFloor: floor });
+      } catch (error) {
+        return { accepted: false, code: error?.code ?? FAILED };
+      }
+      if (result?.ok) return { accepted: true, revision: null, receipt: result.receipt ?? result.etag ?? null };
+      if (result?.code === PAGE_FORMAT_UPGRADE) return { accepted: false, code: PAGE_FORMAT_UPGRADE };
+      return { accepted: false, code: result?.code ?? FAILED };
+    },
+  };
+}

package/src/page/format-native-commands.js

@@ -0,0 +1,142 @@
+// The commands behind the four formats this release adds — underline, text color,
+// highlight and the quote block — and the rows the More menu offers them by.
+//
+// Nothing here is on the ready path. Every caller loads this module the first
+// time one of the commands runs, so reading and drawing an existing document
+// never fetches a transaction, a palette or a refusal notice.
+//
+// Every command that writes one of them goes through runFormat, which is the
+// editor's own format gate: nothing is applied and no descriptor is written
+// unless the gate answered "applied".
+import { history } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+import { PALETTE, markable } from "./format-native.js";
+import { announce } from "./announce.js";
+import { openPageMenu } from "./chrome.js";
+
+// blocks.js's STEP, read here rather than imported from it: this module is part
+// of the projection's graph, and blocks.js reads the projection's constants as it
+// loads. A command of ours is one undo item by itself, like every other command.
+const STEP = "page-step";
+const asStep = (tr) => history.closeHistory(tr).setMeta(STEP, true);
+
+const holds = (mark, attrs) => !!mark && Object.keys(mark.type.attrs).every((name) => mark.attrs[name] === attrs[name]);
+
+function toggle(view, type, attrs) {
+  const st = view.state;
+  const { from, to, empty, $from } = st.selection;
+  const tr = st.tr;
+  if (empty) {
+    if (holds(type.isInSet(st.storedMarks || $from.marks()), attrs)) tr.removeStoredMark(type);
+    else tr.addStoredMark(type.create(attrs));
+  } else {
+    let all = true;
+    st.doc.nodesBetween(from, to, (node) => {
+      if (all && node.isText && !holds(type.isInSet(node.marks), attrs)) all = false;
+    });
+    if (all) tr.removeMark(from, to, type);
+    else tr.addMark(from, to, type.create(attrs));
+  }
+  view.dispatch(asStep(tr));
+  return true;
+}
+
+function remove(view, type) {
+  const st = view.state;
+  const tr = st.tr;
+  if (st.selection.empty) tr.removeStoredMark(type);
+  else tr.removeMark(st.selection.from, st.selection.to, type);
+  view.dispatch(asStep(tr));
+  return true;
+}
+
+// The gate, in one place: an editor mounted without one cannot write a floor-1
+// format, and a refusal leaves the content exactly as it was.
+export function runFormat(view, apply) {
+  const run = view.runFormatCommand;
+  if (typeof run !== "function") return Promise.resolve({ status: "unsupported-host", code: "page-format-unsupported", retry: false });
+  return run(apply);
+}
+
+// A mark command: toggle it on the selection, or with reset take it off. A
+// selection the mark cannot reach is refused before the gate is asked, so a code
+// block never raises the document's floor.
+export function formatMark(view, name, attrs = {}, { reset = false } = {}) {
+  const type = schema.marks[name];
+  if (!type) return Promise.resolve({ status: "refused", code: "unsupported-format" });
+  if (!view.editable) return Promise.resolve({ status: "refused", code: "not-editable" });
+  if (!markable(view.state, type)) return Promise.resolve({ status: "refused", code: "mark-not-allowed" });
+  return runFormat(view, () => (reset ? remove(view, type) : toggle(view, type, attrs)));
+}
+
+// The four formats pasted in from elsewhere are floor-1 content too: the slice is
+// inserted only once the gate answered applied. A refusal keeps the text and
+// writes no descriptor; a selection that moved while the answer came back takes
+// neither.
+export function pasteFormats(view, slice, from, to) {
+  const place = () => {
+    if (view.isDestroyed) return false;
+    const st = view.state;
+    if (st.selection.from !== from || st.selection.to !== to) return false;
+    view.dispatch(st.tr.replaceSelection(slice).scrollIntoView());
+    return true;
+  };
+  const plain = () => {
+    const text = slice.content.textBetween(0, slice.content.size, "\n", " ");
+    if (!view.isDestroyed && text) view.dispatch(view.state.tr.insertText(text, from, to));
+    return false;
+  };
+  runFormat(view, place).then((result) => {
+    if (result?.status === "applied") return;
+    if (!view.isDestroyed) announce(view, result?.message ?? "That format isn\u2019t available here.");
+    plain();
+  }, plain);
+}
+
+// The typed `" ` shortcut: the paragraph the reader is typing in became a quote,
+// and the space that typed it goes with it. A refusal puts the space back as
+// itself, so the typed character is never swallowed.
+export function quoteFromSpace(plugin, view, { at, from, to }, plain) {
+  const convert = () => {
+    if (view.isDestroyed) return false;
+    const now = view.state;
+    const current = now.doc.nodeAt(at);
+    if (!current || current.type !== schema.nodes.paragraph || current.textContent !== '"') return plain();
+    const tr = now.tr.delete(at + 1, at + 2).setNodeMarkup(at, schema.nodes.quote, current.attrs);
+    view.dispatch(asStep(tr.setMeta(plugin, { transform: tr, from, to, text: " " })));
+    return true;
+  };
+  view.runFormatCommand(convert).then((result) => { if (result?.status !== "applied") plain(); }, plain);
+}
+
+// The More menu's rows: the underline command, the palette of a color mark and
+// the notice a refusal raises. The palette is fixed: nine keys and the way back
+// to none, and no arbitrary color picker is offered.
+const CANNOT_MARK = "This text can\u2019t take that format.";
+const refusalText = (result) => (result.status === "upgrade-required" ? result.message : result.code === "mark-not-allowed" ? CANNOT_MARK : "That format isn\u2019t available here.");
+
+const notice = (view, result) => {
+  if (result?.status !== "applied" && !view.isDestroyed) announce(view, refusalText(result ?? {}));
+};
+
+export const runNative = (view, name, attrs = {}, options = undefined) => {
+  formatMark(view, name, attrs, options).then((result) => notice(view, result));
+};
+
+// A block command from a later format, like the turn into a quote: the write asks
+// the gate first, and a refusal is a notice rather than a change.
+export const gateTurn = (view, turn) => {
+  runFormat(view, turn).then((result) => notice(view, result));
+};
+
+// The palette of one color mark, as its own short menu: the nine fixed keys and
+// the way back to none.
+export function nativeMenu(view, name, anchor) {
+  if (name === "underline") return runNative(view, name);
+  const colorLabel = name === "text_color" ? "Text" : "Highlight";
+  const noneLabel = name === "text_color" ? "Automatic" : "No highlight";
+  return openPageMenu(view, anchor, [
+    ...PALETTE.map((color) => ({ key: `${name}_${color}`, label: `${colorLabel}: ${color[0].toUpperCase()}${color.slice(1)}`, icon: "\u25CF", run: (v) => runNative(v, name, { color }) })),
+    { key: `${name}_none`, label: noneLabel, icon: "\u00d7", run: (v) => runNative(v, name, {}, { reset: true }) },
+  ]);
+}

package/src/page/format-native.js

@@ -0,0 +1,42 @@
+// The four formats this release adds: underline, text color, highlight and the
+// quote block.
+//
+// Each is written as the named descriptor an older runtime already keeps as an
+// opaque mark, `x["text_color",{"color":"red"}]`, so R reads back exactly what F
+// wrote. The palette is fixed and its keys are the only colors a descriptor may
+// name: one naming any other color stays opaque rather than being read as a
+// style, and no command accepts arbitrary CSS.
+//
+// This half is the reading one: what the schema, inline.js and the projection need
+// to read a descriptor back and draw it. The commands that write one are in
+// format-native-commands.js, which a page loads the first time one runs.
+export const NATIVE_NAMES = new Set(["underline", "text_color", "highlight"]);
+
+export const PALETTE = ["gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"];
+const COLORS = new Set(PALETTE);
+
+// The descriptor attrs of a native mark, or null when this name and these attrs
+// are not one of the formats this runtime writes.
+export function nativeAttrs(name, attrs) {
+  const plain = attrs !== null && typeof attrs === "object" && !Array.isArray(attrs);
+  if (name === "underline") return plain && Object.keys(attrs).length === 0 ? {} : null;
+  if (name === "text_color" || name === "highlight") {
+    const keys = plain ? Object.keys(attrs) : [];
+    return keys.length === 1 && keys[0] === "color" && COLORS.has(attrs.color) ? { color: attrs.color } : null;
+  }
+  return null;
+}
+
+// Whether this selection holds text the mark may be added to: a code block takes
+// no marks, and a block selection is not text at all. It stays here, beside the
+// reading half, because the keyboard decides whether Mod-u is its own before any
+// command is loaded.
+export function markable(st, type) {
+  const { $from, $to, empty } = st.selection;
+  if (empty) return $from.parent.type.allowsMarkType(type);
+  let ok = false;
+  st.doc.nodesBetween($from.pos, $to.pos, (node, _at, parent) => {
+    if (!ok && node.isText && parent?.type.allowsMarkType(type)) ok = true;
+  });
+  return ok;
+}