@panphora/clayjs 1.16.0 → 1.18.0

package/src/page/import-markdown.js

@@ -0,0 +1,262 @@
+// Markdown import: the tokens marked's lexer returns become the page's flat block
+// records (model.js), so a file arrives without marked rendering anything. Raw HTML
+// stays inert: a block of it is a preserved block, cleaned of scripts, event handlers
+// and script URLs, and inline markup is literal text. A construct the schema cannot
+// express is kept as a literal code block and named in `unsupported`; a link or
+// image address the editor refuses is left out and named in `refused`, its text
+// kept. Nothing is dropped, and a limit refuses with a code rather than mutating.
+import { schema } from "./schema.js";
+import { markKey, runsOf } from "./inline.js";
+import { keysBetween, newId } from "./model.js";
+import { fragmentCleaner } from "./projection.js";
+import { safeHref, safeSrc } from "./address.js";
+
+// HTML in a file someone sent is kept for its formatting, never for what it can load or
+// run: anything that embeds or fetches another document goes, and so does every address
+// that runs script, whichever attribute holds it.
+const EMBEDS = "iframe, frame, frameset, object, embed, applet, meta, base, link, form, style, animate, set, animateMotion, animateTransform, portal";
+const LOADERS = /^(srcdoc|data|formaction|codebase|archive|ping|background|poster|lowsrc|dynsrc)$/i;
+const SCRIPTED = /^\s*(javascript|vbscript|data):/i;
+function cleanImported(html) {
+  const t = document.createElement("template");
+  t.innerHTML = html;
+  for (const el of t.content.querySelectorAll(EMBEDS)) el.remove();
+  for (const el of t.content.querySelectorAll("*")) {
+    for (const { name, value } of [...el.attributes]) {
+      if (LOADERS.test(name) || SCRIPTED.test(value.replace(/[\u0000-\u0020]/g, ""))) el.removeAttribute(name);
+    }
+  }
+  return t.innerHTML;
+}
+
+export const MAX_BYTES = 2 * 1024 * 1024;
+export const MAX_DEPTH = 32;
+export const MAX_BLOCKS = 10000;
+
+export class MarkdownImportError extends Error {
+  constructor(code, message) {
+    super(message);
+    this.name = "MarkdownImportError";
+    this.code = code;
+  }
+}
+
+const ATOM = "\uFFFC";
+const BREAK = { type: "hard_break" };
+const BLOCK = new Set(["paragraph", "heading", "list", "blockquote", "code", "table", "hr", "html", "def", "space"]);
+const encoder = new TextEncoder();
+const M = schema.marks;
+
+const sorted = (marks) => marks.slice().sort((a, b) => a.type.rank - b.type.rank);
+
+function added(marks, name, attrs) {
+  if (marks.some((mark) => mark.type === M[name])) return marks;
+  return sorted([...marks, M[name].create(attrs)]);
+}
+
+// One text block's inline content as the record keeps it: c, and m as runs (one
+// key per UTF-16 unit, packed), exactly as flatten and runsOf write it; `parts`
+// splits around an image, which the schema only carries as a block of its own.
+function inlineOf(tokens, { images = true, refused = [], unsupported = [] } = {}) {
+  const parts = [];
+  let c = "";
+  let m = [];
+  const flush = () => {
+    if (c) parts.push({ c, m });
+    c = "";
+    m = [];
+  };
+  const text = (value, marks) => {
+    const str = String(value ?? "");
+    if (!str) return;
+    const key = markKey(sorted(marks));
+    c += str;
+    for (let i = 0; i < str.length; i++) m.push(key);
+  };
+  const atom = (json) => { c += ATOM; m.push("@" + JSON.stringify(json)); };
+  const walk = (list, marks) => {
+    for (const token of list ?? []) {
+      const type = token?.type;
+      if (typeof type !== "string") throw new MarkdownImportError("malformed-input", "A Markdown token has no type.");
+      switch (type) {
+        case "text":
+          if (Array.isArray(token.tokens)) walk(token.tokens.filter((child) => typeof child?.type === "string" && !BLOCK.has(child.type)), marks);
+          else text(token.text, marks);
+          break;
+        case "escape": text(token.text, marks); break;
+        case "strong": walk(token.tokens, added(marks, "strong")); break;
+        case "em": walk(token.tokens, added(marks, "em")); break;
+        case "del":
+        case "strike": walk(token.tokens, added(marks, "strike")); break;
+        case "codespan": text(token.text, added(marks, "code")); break;
+        case "br": atom(BREAK); break;
+        case "link": {
+          const href = safeHref(token.href);
+          if (href) walk(token.tokens, added(marks, "link", { href }));
+          else {
+            refused.push({ type: "link", href: String(token.href ?? "") });
+            walk(token.tokens, marks);
+          }
+          break;
+        }
+        case "image": {
+          const image = { src: String(token.href ?? ""), alt: String(token.text ?? ""), title: token.title ?? "" };
+          if (!images) { text(image.alt, marks); break; }
+          flush();
+          parts.push({ image });
+          break;
+        }
+        // Raw HTML is inert: its text stays text, never a node or a mark.
+        case "html": text(token.text ?? token.raw, marks); break;
+        case "checkbox": break;
+        default:
+          unsupported.push({ type, text: String(token.raw ?? token.text ?? "") });
+          text(token.raw ?? token.text, marks);
+          break;
+      }
+    }
+  };
+  walk(tokens, []);
+  flush();
+  return { parts };
+}
+
+export function importMarkdownTokens(tokens) {
+  if (!Array.isArray(tokens)) throw new MarkdownImportError("malformed-input", "Markdown import needs the lexer's token list.");
+  let size = 0;
+  for (const token of tokens) {
+    if (!token || typeof token !== "object" || typeof token.type !== "string") throw new MarkdownImportError("malformed-input", "A Markdown token has no type.");
+    size += encoder.encode(String(token.raw ?? "")).length;
+  }
+  if (size > MAX_BYTES) throw new MarkdownImportError("input-too-large", `Markdown import is limited to ${MAX_BYTES} bytes; this file is ${size}.`);
+
+  const blocks = [];
+  const unsupported = [];
+  const refused = [];
+  const used = new Set();
+  const fresh = (prefix) => {
+    let id = newId(prefix);
+    while (used.has(id)) id = newId(prefix);
+    used.add(id);
+    return id;
+  };
+  const push = (value) => {
+    if (blocks.length + 1 > MAX_BLOCKS) throw new MarkdownImportError("too-many-blocks", `Markdown import is limited to ${MAX_BLOCKS} blocks.`);
+    blocks.push(value);
+  };
+  const deeper = (ctx) => {
+    const depth = ctx.depth + 1;
+    if (depth > MAX_DEPTH) throw new MarkdownImportError("nesting-too-deep", `Markdown import is limited to ${MAX_DEPTH} levels of nesting.`);
+    return depth;
+  };
+  const block = (t, attrs, { c, m }) => {
+    const value = { t, ...attrs, c };
+    if (m.some(Boolean)) value.m = runsOf(m);
+    return value;
+  };
+  const imageOf = (image) => {
+    const src = safeSrc(image.src);
+    if (src) return { t: "image", src, ...(image.alt ? { alt: image.alt } : {}), ...(image.title ? { caption: image.title } : {}) };
+    refused.push({ type: "image", href: image.src });
+    return image.alt ? block("paragraph", {}, { c: image.alt, m: [] }) : null;
+  };
+  const textBlocks = (t, attrs, inline) => {
+    for (const part of inline.parts) {
+      if (!part.image) { push(block(t, attrs, part)); continue; }
+      const value = imageOf(part.image);
+      if (value) push(value);
+    }
+  };
+  const paragraph = (inline, ctx) => textBlocks(ctx.quote ? "quote" : "paragraph", {}, inline);
+  const inline = (tokens, options = {}) => inlineOf(tokens, { refused, unsupported, ...options });
+  const literal = (token) => {
+    const raw = String(token.raw ?? token.text ?? "");
+    unsupported.push({ type: token.type, text: raw });
+    push({ t: "code_block", lang: "markdown", c: raw });
+  };
+
+  const walk = (list, ctx) => {
+    for (const token of list ?? []) {
+      const type = token?.type;
+      if (typeof type !== "string") throw new MarkdownImportError("malformed-input", "A Markdown token has no type.");
+      switch (type) {
+        case "space": break;
+        case "heading": {
+          const level = Math.min(6, Math.max(1, Number.parseInt(token.depth, 10) || 1));
+          textBlocks("heading", level === 2 ? {} : { level }, inline(token.tokens, { images: false }));
+          break;
+        }
+        case "paragraph":
+        case "text": paragraph(inline(token.tokens ?? [token]), ctx); break;
+        case "hr": push({ t: "divider" }); break;
+        case "code": push({ t: "code_block", ...(token.lang ? { lang: String(token.lang) } : {}), c: String(token.text ?? "") }); break;
+        case "html": {
+          const raw = String(token.text ?? token.raw ?? "");
+          unsupported.push({ type: "HTML block cleaned", text: raw });
+          push({ t: "preserved", html: cleanImported(fragmentCleaner(document).fallback(raw)) });
+          break;
+        }
+        case "blockquote": {
+          const depth = deeper(ctx);
+          walk(token.tokens, { ...ctx, depth, quote: true });
+          break;
+        }
+        case "list": {
+          const depth = deeper(ctx);
+          const level = ctx.indent ?? 0;
+          const kind = token.ordered ? "ordered" : "bullet";
+          for (const item of token.items ?? []) {
+            let own = { c: "", m: [] };
+            const rest = [];
+            for (const child of item?.tokens ?? []) {
+              const childType = child?.type;
+              if (childType === "checkbox" || childType === "space") continue;
+              if (childType === "text" || childType === "paragraph") {
+                if (own.c) own = { c: own.c + ATOM, m: [...own.m, "@" + JSON.stringify(BREAK)] };
+                const tokens = childType === "paragraph" ? child.tokens ?? [] : [child];
+                for (const part of inline(tokens, { images: false }).parts) {
+                  own = { c: own.c + part.c, m: [...own.m, ...part.m] };
+                }
+                rest.push(...(child.tokens ?? []).filter((nested) => typeof nested?.type === "string" && BLOCK.has(nested.type) && nested.type !== "space"));
+              } else rest.push(child);
+            }
+            const itemKind = item?.task ? "check" : kind;
+            const attrs = {
+              ...(itemKind === "bullet" ? {} : { kind: itemKind }),
+              ...(level ? { indent: level } : {}),
+              ...(item?.task && item.checked ? { checked: true } : {}),
+            };
+            push(block("list_item", attrs, own));
+            if (rest.length) walk(rest, { ...ctx, depth, indent: level + 1, quote: false });
+          }
+          break;
+        }
+        case "table": {
+          const header = token.header ?? [];
+          if (!header.length) { literal(token); break; }
+          const cell = (tokens) => inline(tokens, { images: false }).parts[0] ?? { c: "", m: [] };
+          const colIds = header.map(() => fresh("c"));
+          const colPos = keysBetween(null, null, header.length);
+          const cols = Object.fromEntries(colIds.map((id, i) => [id, { pos: colPos[i], name: cell(header[i]?.tokens).c }]));
+          // The header line is the column names, drawn as <thead>; the body holds the data rows.
+          const rows = token.rows?.length ? token.rows : [[]];
+          const rowPos = keysBetween(null, null, rows.length);
+          const values = rows.map((row) => Object.fromEntries(colIds.map((id, i) => {
+            const part = cell(row?.[i]?.tokens);
+            return [id, part.m.some(Boolean) ? { c: part.c, m: runsOf(part.m) } : part.c];
+          })));
+          push({ t: "table", cols, rows: Object.fromEntries(values.map((cells, i) => [fresh("r"), { pos: rowPos[i], cells }])) });
+          break;
+        }
+        default: literal(token); break;
+      }
+    }
+  };
+
+  walk(tokens, { depth: 0, indent: 0, quote: false });
+
+  const positions = keysBetween(null, null, blocks.length);
+  const out = {};
+  blocks.forEach((value, i) => { out[fresh("b")] = { ...value, pos: positions[i] }; });
+  return { blocks: out, unsupported, refused };
+}

package/src/page/inline.js

@@ -14,28 +14,41 @@
 // encodeForMerge (replay.js) gives each one a code of its own.
 // A mark this schema has no type for keeps its token or named descriptor
 // instead of throwing (format-codec.js): the unit's key is written back exactly
-// as it was read.
+// as it was read. A mark of this schema with no compact code of its own is
+// written as a named descriptor too, x[name, attrs], so a new mark never takes a
+// letter an older writer already reads.
 import { model } from "../vendor/prosemirror.vendor.js";
 import { descriptors, entriesOf, isOpaque, keyOf, opaqueMark } from "./format-codec.js";
+import { nativeAttrs } from "./format-native.js";
 
 export const ATOM = "";
 export const CODES = { strong: "b", em: "i", strike: "s", code: "c", link: "a" };
+const NATIVE = new Set(["underline", "text_color", "highlight"]);
 const NAMES = Object.fromEntries(Object.entries(CODES).map(([name, code]) => [code, name]));
 
 export function markKey(marks) {
   let key = "";
+  const named = [];
   for (const mark of marks) {
     if (isOpaque(mark)) {
       key += keyOf(mark.attrs.entries);
       continue;
     }
     const code = CODES[mark.type.name];
-    if (!code) throw new TypeError(`page: the mark ${mark.type.name} has no key code`);
+    if (!code) {
+      // A mark with no compact letter travels as a named descriptor, after the codes
+      // and in the codec's order: one of the four formats only with attrs it writes,
+      // any other (a mention, a date) with its own attrs.
+      const native = nativeAttrs(mark.type.name, mark.attrs);
+      if (!native && NATIVE.has(mark.type.name)) throw new TypeError(`page: the mark ${mark.type.name} has no key code`);
+      named.push({ name: mark.type.name, attrs: native ?? mark.attrs });
+      continue;
+    }
     key += code;
     const names = Object.keys(mark.type.attrs);
     if (names.length) key += JSON.stringify(names.map((name) => mark.attrs[name]));
   }
-  return key;
+  return named.length ? key + keyOf(named) : key;
 }
 
 const parsed = new WeakMap();
@@ -49,15 +62,26 @@ export function marksOf(schema, key) {
   marks = [];
   const opaque = [];
   for (const desc of descriptors(key)) {
-    const name = desc.code === undefined ? null : NAMES[desc.code];
+    // A named descriptor this schema does have a type for is that mark, not an opaque
+    // entry: one of the four formats only with attrs it writes, any other mark only
+    // with attributes its type declares. Anything else stays opaque, so nothing is lost.
+    if (desc.code === undefined) {
+      const native = nativeAttrs(desc.name, desc.attrs);
+      const type = schema.marks[desc.name];
+      if (native) marks = type.create(native).addToSet(marks);
+      else if (type && !NATIVE.has(desc.name) && Object.keys(desc.attrs ?? {}).every((field) => Object.hasOwn(type.attrs, field))) marks = type.create(desc.attrs).addToSet(marks);
+      else opaque.push(desc);
+      continue;
+    }
+    const name = NAMES[desc.code];
     if (!name) {
       opaque.push(desc);
       continue;
     }
-    const type = schema.marks[name];
-    if (!type) throw new TypeError(`page: unknown mark code ${desc.code} in ${key}`);
-    const attrs = desc.attrs ? Object.fromEntries(Object.keys(type.attrs).map((field, j) => [field, desc.attrs[j]])) : null;
-    marks = type.create(attrs).addToSet(marks);
+    const coded = schema.marks[name];
+    if (!coded) throw new TypeError(`page: unknown mark code ${desc.code} in ${key}`);
+    const attrs = desc.attrs ? Object.fromEntries(Object.keys(coded.attrs).map((field, j) => [field, desc.attrs[j]])) : null;
+    marks = coded.create(attrs).addToSet(marks);
   }
   if (opaque.length) marks = opaqueMark(entriesOf(opaque)).addToSet(marks);
   cache.set(key, marks);

package/src/page/items.js

@@ -12,7 +12,9 @@ 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";
+import { chartTables } from "./chart-tables.js";
+import { viewFeatures } from "./view-hooks.js";
+import { runFormatted } from "./format-command.js";
 
 const { TextSelection } = state;
 const N = schema.nodes;
@@ -26,21 +28,34 @@ export const BLOCK_TYPES = [
   { 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: "toggle-h1", label: "Toggle heading 1", description: "Collapsible heading", icon: "H1", type: "toggle", attrs: { open: true, level: 1 }, aliases: ["toggle heading"] },
+  { key: "toggle-h2", label: "Toggle heading 2", description: "Collapsible heading", icon: "H2", type: "toggle", attrs: { open: true, level: 2 }, aliases: ["toggle heading"] },
+  { key: "toggle-h3", label: "Toggle heading 3", description: "Collapsible heading", icon: "H3", type: "toggle", attrs: { open: true, level: 3 }, aliases: ["toggle heading"] },
   { key: "callout", label: "Callout", description: "Make a note stand out", icon: "!", type: "callout", aliases: ["note", "aside", "info"] },
+  { key: "quote", label: "Quote", description: "Set text apart as a quotation", icon: "\u201c", type: "quote", hint: "\"", aliases: ["blockquote", "quotation", "cite"] },
   { 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: "toc", label: "Table of contents", description: "Links to this page's headings", icon: "≡", aliases: ["toc", "contents", "outline", "index"], insert: "toc" },
   { 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" },
+  { key: "mention", label: "Mention", description: "Name someone on the page", icon: "@", aliases: ["person", "people", "assign"], command: "mentions" },
+  { key: "date", label: "Date", description: "Today, tomorrow or a calendar day", icon: "▧", aliases: ["calendar", "today", "tomorrow", "due"], command: "dates" },
+  { key: "emoji", label: "Emoji", description: "Insert one glyph", icon: "☺", aliases: ["smiley", "glyph", "symbol"], command: "emoji" },
+  { key: "import-markdown", label: "Import Markdown…", description: "Turn a Markdown file into blocks", icon: "M↓", aliases: ["md", "markdown", "import"], command: "importMarkdown" },
 ];
 
 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" };
 
+// The chart module and its view part load together, before the block draws: a
+// document that never takes a chart never fetches either.
+export const loadChartPart = (view) => (viewFeatures.get(view)?.ensure("chart") ?? Promise.resolve()).catch(() => {}).then(() => (view.isDestroyed ? null : import("./chart.js")));
+
 export const MENU_ITEMS = [...BLOCK_TYPES, ...INSERT_ITEMS];
 
 export const insertItemsFor = (st, items = MENU_ITEMS) => (chartTables(st.doc).length ? [...items, CHART_ITEM] : items);
@@ -49,7 +64,8 @@ export const insertItemsFor = (st, items = MENU_ITEMS) => (chartTables(st.doc).l
 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];
+    || (t === "heading" || t === "toggle" ? (b.attrs.level ?? null) === (node.attrs.level ?? null)
+      : t === "list_item" ? b.attrs.kind === node.attrs.kind : true))) ?? BLOCK_TYPES[0];
 }
 
 const startOf = (doc, index) => {
@@ -93,6 +109,40 @@ export function turnInto(st, index, item) {
   return canTurnInto(node, item) ? retype(st.tr, index, item) : REFUSED;
 }
 
+// A toggle heading writes a `level` only a newer page format reads, so its first
+// write asks the format gate.
+export const isToggleHeading = (item) => item.type === "toggle" && item.attrs?.level != null;
+
+const indexOfId = (doc, id) => {
+  let found = -1;
+  doc.forEach((n, _, i) => { if (n.attrs.id === id) found = i; });
+  return found;
+};
+const stale = { ok: false, code: "stale-target" };
+
+// Turn every block named by `ids` into `item`. A block type from a later format,
+// a quote or a toggle heading, asks the format gate first; after it answers the
+// blocks are found again by id: one a peer moved away refuses instead of handing
+// the type to whatever took its place.
+export function turnBlocks(view, item, ids) {
+  const at = () => ids.map((id) => indexOfId(view.state.doc, id));
+  const write = () => {
+    const found = at();
+    if (found.includes(-1)) return stale;
+    if (found.some((i) => !canTurnInto(view.state.doc.child(i), item))) return REFUSED;
+    const tr = view.state.tr;
+    for (const i of found) retype(tr, i, item);
+    view.dispatch(asStep(tr).scrollIntoView());
+    view.focus();
+    return { ok: true };
+  };
+  if (isToggleHeading(item)) return runFormatted(view, write);
+  // A block type from a later format, like the turn into a quote, asks the gate
+  // before it writes, and a refusal is a notice rather than a change.
+  if (item.type === "quote") return import("./format-native-commands.js").then((menu) => (view.isDestroyed ? false : menu.gateTurn(view, write)));
+  return write();
+}
+
 // 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) {
@@ -138,6 +188,35 @@ export function insertDivider(st, index, tr = st.tr) {
   return tr.setSelection(TextSelection.create(tr.doc, to + 2));
 }
 
+// The empty paragraph at `index` becomes a table of contents that keeps its id, pos and
+// parent, followed by a new empty paragraph holding the caret.
+export function replaceWithToc(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.toc.create({ id, pos, parent, maxLevel: 3 }),
+    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 table of contents 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 insertToc(st, index, tr = st.tr) {
+  const node = tr.doc.child(index);
+  if (node.type === N.paragraph && node.content.size === 0) return replaceWithToc(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.toc.create({ id: newId(), pos, parent, maxLevel: 3 }),
+    N.paragraph.create({ id: newId(), pos: keyAfter(pos, next), parent }),
+  ]);
+  return tr.setSelection(TextSelection.create(tr.doc, to + 2));
+}
+
 // The skipped letters between a query and a candidate it can be read out of,
 // or Infinity when it cannot. Only queries of 2 to 32 letters count, so a single
 // letter never drags in half the menu.
@@ -174,16 +253,8 @@ export function rankItems(items, query) {
   return items.map((it, order) => ({ it, order, rank: rank(it) })).filter((x) => x.rank).sort((a, b) => a.rank[0] - b.rank[0] || a.rank[1] - b.rank[1] || 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) {
+function writeItem(view, item, index, remove) {
   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, null, index);
-  if (item.insert === "board") return insertBoardNode(st, view.dispatch, makeBoard(), remove, index);
-  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);
@@ -198,3 +269,62 @@ export function runItem(view, item, index, remove = null) {
   view.focus();
   return true;
 }
+
+// A table of contents is a block only a newer page format reads, so its first write asks
+// the format gate; the block the pick was made on is found again after it answers, so one
+// a peer moved away refuses instead of handing the toc its place.
+export function runTocItem(view, index, remove = null) {
+  const st = view.state;
+  const id = st.doc.maybeChild(index)?.attrs.id ?? null;
+  const del = remove && { ...remove, text: st.doc.textBetween(remove.from, remove.to) };
+  return runFormatted(view, () => {
+    const now = view.state;
+    const at = id === null ? -1 : indexOfId(now.doc, id);
+    if (at < 0 || (del && now.doc.textBetween(del.from, del.to) !== del.text)) return stale;
+    let tr = del ? now.tr.delete(del.from, del.to) : now.tr;
+    tr = insertToc(now, indexOfId(tr.doc, id), tr);
+    view.dispatch(asStep(tr).scrollIntoView());
+    view.focus();
+    return { ok: true };
+  });
+}
+
+// The menus ask for an optional command through the editor's own entry point, at the moment
+// somebody picks the row: importing it here keeps this module plain data, which the block
+// menus, the Markdown rules and the editor all share, while the command still loads only on
+// first use. `id` is the row it has in COMMAND_FEATURES.
+export const runMenuCommand = (view, id, args) => import("./editor.js").then(({ runPageCommand }) => (view.isDestroyed ? { ok: false, code: "not-editing" } : runPageCommand(view, id, args)));
+
+// A row whose work is an optional command: the typed query goes with the pick, and the
+// command is asked for by its id.
+function runCommandItem(view, id, remove) {
+  if (remove) view.dispatch(view.state.tr.delete(remove.from, remove.to));
+  return runMenuCommand(view, id, {});
+}
+
+// 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. A block
+// type from a later format asks the format gate before it writes anything, and
+// a toggle heading or a quote is found again after it answers: the block and the
+// typed query that moved or changed refuse as a stale target.
+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, null, index);
+  if (item.insert === "board") return insertBoardNode(st, view.dispatch, makeBoard(), remove, index);
+  if (item.insert === "chart") return loadChartPart(view).then((part) => (part && !view.isDestroyed ? part.chartFromSlash(view, index, remove) : false));
+  if (item.insert === "toc") return runTocItem(view, index, remove);
+  if (item.command) return runCommandItem(view, item.command, remove);
+  if (!isToggleHeading(item) && item.type !== "quote") return writeItem(view, item, index, remove);
+  const id = st.doc.maybeChild(index)?.attrs.id ?? null;
+  const del = remove && { ...remove, text: st.doc.textBetween(remove.from, remove.to) };
+  return runFormatted(view, () => {
+    const now = view.state;
+    const at = id === null ? -1 : indexOfId(now.doc, id);
+    // The typed query is found again too: a line that changed underneath refuses.
+    if (at < 0 || (del && now.doc.textBetween(del.from, del.to) !== del.text)) return stale;
+    return writeItem(view, item, at, del);
+  });
+}

package/src/page/markdown.js

@@ -124,7 +124,35 @@ export const MARKDOWN_RULES = [
   ...INLINE_RULES,
 ];
 
-export const markdownPlugin = () => inputrules.inputRules({ rules: MARKDOWN_RULES });
+// The shortest shortcut that quotes a line: `" ` typed at the start of a
+// paragraph. It writes a floor-1 block, so it asks the format gate first and
+// converts only when the gate answered applied; the transaction it dispatches is
+// the input-rule one, recorded on this plugin so Backspace puts the literal `" `
+// back and undo keeps the conversion whole. The typed space is never swallowed:
+// when the format cannot be written the space is inserted as itself, and a line
+// that changed while the gate waited takes no write at all.
+function quoteShortcut(plugin, view, from, to, text) {
+  if (text !== " " || from !== to) return false;
+  const st = view.state;
+  const $from = st.doc.resolve(from);
+  const node = $from.parent;
+  if ($from.depth !== 1 || node.type !== N.paragraph || $from.parentOffset !== 1 || node.textContent !== '"') return false;
+  if (!view.editable || typeof view.runFormatCommand !== "function") return false;
+  const plain = () => {
+    if (view.isDestroyed || view.state.doc !== st.doc) return;
+    view.dispatch(view.state.tr.insertText(" ", from, to));
+  };
+  const at = $from.before(1);
+  import("./format-native-commands.js").then(({ quoteFromSpace }) => quoteFromSpace(plugin, view, { at, from, to }, plain), plain);
+  return true;
+}
+
+export const markdownPlugin = () => {
+  const plugin = inputrules.inputRules({ rules: MARKDOWN_RULES });
+  const rules = plugin.props.handleTextInput;
+  plugin.props.handleTextInput = (view, from, to, text) => quoteShortcut(plugin, view, from, to, text) || rules(view, from, to, text);
+  return plugin;
+};
 
 // "| Name | Owner |" then Enter at the end of a paragraph: the paragraph becomes
 // a table with those column names and one empty row, the caret in its first cell.
@@ -150,7 +178,7 @@ export function backspaceToParagraph(st, dispatch) {
   const { $from, empty } = st.selection;
   if (!empty || $from.depth !== 1 || $from.parentOffset !== 0) return false;
   const n = $from.parent;
-  if (!(n.type === N.heading || n.type === N.callout || (n.type === N.code_block && n.content.size === 0))) return false;
+  if (!(n.type === N.heading || n.type === N.callout || n.type === N.quote || (n.type === N.code_block && n.content.size === 0))) return false;
   if (dispatch) dispatch(asStep(st.tr.setNodeMarkup($from.before(), N.paragraph, { id: n.attrs.id, pos: n.attrs.pos, parent: n.attrs.parent })));
   return true;
 }