@panphora/clayjs 1.17.0 → 1.18.1

package/src/page/items.js

@@ -14,6 +14,7 @@ import { pickCsv } from "./csv-import.js";
 import { makeBoard, insertBoardNode } from "./board.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;
@@ -27,6 +28,9 @@ 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"] },
@@ -34,18 +38,23 @@ export const BLOCK_TYPES = [
 
 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(() => import("./chart.js"));
+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];
 
@@ -55,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) => {
@@ -99,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) {
@@ -144,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.
@@ -180,22 +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. A block
-// type from a later format asks the format gate before it writes anything.
-export function runItem(view, item, index, remove = null) {
-  if (item.type !== "quote") return insertItem(view, item, index, remove);
-  return import("./format-native-commands.js").then(({ runFormat }) => runFormat(view, () => insertItem(view, item, index, remove)));
-}
-
-function insertItem(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 loadChartPart(view).then(({ chartFromSlash }) => chartFromSlash(view, index, remove));
   let tr = st.tr;
   if (remove) tr.delete(remove.from, remove.to);
   const node = tr.doc.child(index);
@@ -210,3 +269,62 @@ function insertItem(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

@@ -129,7 +129,8 @@ export const MARKDOWN_RULES = [
 // 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.
+// 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;
@@ -137,7 +138,10 @@ function quoteShortcut(plugin, view, from, to, text) {
   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.dispatch(st.tr.insertText(" ", from, to)); };
+  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;

package/src/page/media.js

@@ -3,25 +3,31 @@
 // Nothing reaches the record until the host has answered with a URL; then one
 // transaction inserts the block at the bookmark. A cancelled or failed upload
 // leaves no trace in the record.
-import { state, view as pmView } from "../vendor/prosemirror.vendor.js";
+//
+// The paste, the drop, the picker and the upload itself are here, so a file lands
+// where it was dropped without waiting for anything. What an upload can then offer
+// (retry, embedding, the alt text and width the chrome sets) is in the media view
+// part, which loads with the first paste, drop, insert or upload.
+import { state } from "../vendor/prosemirror.vendor.js";
 import { schema } from "./schema.js";
 import { outline } from "./blocks.js";
 import { newId } from "./model.js";
 import { asStep } from "./blocksel.js";
 import { announce } from "./announce.js";
 import { safeFileHref } from "./address.js";
-import { mediaViews } from "./media-views.js";
 
 const { Plugin, PluginKey } = state;
-const { Decoration, DecorationSet } = pmView;
 const N = schema.nodes;
 
 export const mediaKey = new PluginKey("page-media");
 export const EMBED_MAX = 1.5 * 1024 * 1024;
-export const RETRY = new Set(["timeout", "network", "error", "bad-response"]);
-const runtime = new WeakMap();
+export const mediaRuntime = new WeakMap();
 
-const boundary = (doc, pos) => {
+// The view part hands its upload actions back here when it installs, so the
+// bookmark's own buttons reach them without this module importing it.
+export const mediaParts = new WeakMap();
+
+export const boundary = (doc, pos) => {
   const $p = doc.resolve(Math.max(0, Math.min(pos, doc.content.size)));
   return $p.depth === 0 ? $p.pos : $p.after(1);
 };
@@ -109,31 +115,30 @@ export function insertFiles(view, files, place = hostPlace(view.state, view.stat
   return true;
 }
 
-const live = (view, id) => mediaKey.getState(view.state).items.find((x) => x.id === id);
-const update = (view, id, patch) => view.dispatch(view.state.tr.setMeta(mediaKey, { update: { id, ...patch } }));
-const readDataUrl = (file) => new Promise((ok, no) => { const r = new FileReader(); r.onload = () => ok(r.result); r.onerror = () => no(r.error); r.readAsDataURL(file); });
-const attrsFor = (it, src) => (it.kind === "image" ? { src, alt: "", caption: "" } : { src, name: it.name, size: it.file.size ?? null, mime: it.file.type || null });
+export const live = (view, id) => mediaKey.getState(view.state).items.find((x) => x.id === id);
+export const update = (view, id, patch) => view.dispatch(view.state.tr.setMeta(mediaKey, { update: { id, ...patch } }));
+export const attrsFor = (it, src) => (it.kind === "image" ? { src, alt: "", caption: "" } : { src, name: it.name, size: it.file.size ?? null, mime: it.file.type || null });
 
-function settle(it, view, tr) {
+export function settle(it, view, tr) {
   if (it.preview) URL.revokeObjectURL?.(it.preview);
   if (tr) view.dispatch(tr);
 }
 
-async function run(view, it) {
-  const rt = runtime.get(view);
+export async function run(view, it) {
+  const rt = mediaRuntime.get(view);
   const abort = new AbortController();
   rt.aborts.set(it.id, abort);
   let last = -5;
   const onProgress = ({ percent }) => {
     if (percent - last < 5 && percent !== 100) return;
     last = percent;
-    if (runtime.has(view) && live(view, it.id)) update(view, it.id, { percent });
+    if (mediaRuntime.has(view) && live(view, it.id)) update(view, it.id, { percent });
   };
   let res;
   try { res = await rt.upload(it.file, { onProgress, signal: abort.signal }); }
   catch { res = { code: "network", msg: "Upload failed" }; }
   rt.aborts.delete(it.id);
-  if (!runtime.has(view) || !live(view, it.id)) return;
+  if (!mediaRuntime.has(view) || !live(view, it.id)) return;
   if (res?.ok) {
     const src = safeFileHref(res.uploads?.[0]?.url);
     if (src) {
@@ -159,46 +164,19 @@ async function run(view, it) {
   announce(view, `${it.name}: ${message}`);
 }
 
-export async function embedUpload(view, id) {
-  const it = live(view, id);
-  if (!it || it.state !== "embed-choice") return;
-  const src = await readDataUrl(it.file);
-  if (!runtime.has(view) || !live(view, id)) return;
-  settle(it, view, placeTr(view.state, id, attrsFor(it, src)));
-  announce(view, "Saved inside the document");
-}
-
-export function retryUpload(view, id) {
-  const it = live(view, id);
-  if (!it) return;
-  update(view, id, { state: "uploading", percent: 0, code: null, message: null });
-  run(view, live(view, id));
-}
-
-export function cancelUpload(view, id) {
-  const rt = runtime.get(view);
-  const abort = rt?.aborts.get(id);
-  const it = live(view, id);
-  if (it) settle(it, view, removeTr(view.state, id));
-  rt?.aborts.delete(id);
-  abort?.abort();
-}
-
 const htmlHasText = (html) => html.replace(/<(meta|style|img)\b[^>]*>/gi, "").replace(/<[^>]+>/g, "").trim() !== "";
 
 export function mediaPlugin({ upload, features = null }) {
-  let editorView = null;
   // Only the bookmark widget waits for the view part: the upload and its block
   // are core, and the block draws through the schema until the part arrives.
   const showBookmark = (view) => {
-    if (!features || features.has("media") || !runtime.has(view)) return;
+    if (!features || features.has("media") || !mediaRuntime.has(view)) return;
     features.ensure("media").catch(() => {});
   };
   return new Plugin({
     key: mediaKey,
     state: mediaState,
     view(view) {
-      editorView = view;
       const doc = view.dom.ownerDocument;
       const input = doc.createElement("input");
       input.type = "file";
@@ -206,7 +184,7 @@ export function mediaPlugin({ upload, features = null }) {
       input.hidden = true;
       input.className = "page-file-input";
       view.dom.parentElement.append(input);
-      runtime.set(view, { upload, aborts: new Map(), input });
+      mediaRuntime.set(view, { upload, aborts: new Map(), input });
       input.addEventListener("change", () => {
         const files = [...(input.files ?? [])];
         const picker = mediaKey.getState(view.state).picker;
@@ -230,18 +208,18 @@ export function mediaPlugin({ upload, features = null }) {
         const b = e.target.closest?.(".page-upload-btn");
         if (!b) return;
         e.preventDefault();
+        const part = mediaParts.get(view);
         const id = b.dataset.upload;
-        if (b.dataset.act === "retry") retryUpload(view, id);
-        else if (b.dataset.act === "embed") embedUpload(view, id);
-        else cancelUpload(view, id);
+        if (b.dataset.act === "retry") part?.retryUpload(view, id);
+        else if (b.dataset.act === "embed") part?.embedUpload(view, id);
+        else part?.cancelUpload(view, id);
       };
       view.dom.addEventListener("click", onClick);
       return {
         destroy() {
           view.dom.removeEventListener("click", onClick);
-          if (editorView === view) editorView = null;
-          const rt = runtime.get(view);
-          runtime.delete(view);
+          const rt = mediaRuntime.get(view);
+          mediaRuntime.delete(view);
           for (const it of mediaKey.getState(view.state).items) if (it.preview) URL.revokeObjectURL?.(it.preview);
           for (const a of rt.aborts.values()) a.abort();
           input.remove();
@@ -249,14 +227,6 @@ export function mediaPlugin({ upload, features = null }) {
       };
     },
     props: {
-      decorations(st) {
-        const { items } = mediaKey.getState(st);
-        const render = editorView ? mediaViews.get(editorView) : null;
-        if (!items.length || !render) return null;
-        return DecorationSet.create(st.doc, items.map((it) => Decoration.widget(boundary(st.doc, it.pos), (view) => render(view.dom.ownerDocument, it), {
-          side: -1000 + it.order, key: `${it.id}:${it.state}:${it.percent}`, stopEvent: () => true, ignoreSelection: true,
-        })));
-      },
       handlePaste(view, event) {
         const data = event.clipboardData;
         const files = [...(data?.files ?? [])];
@@ -287,72 +257,18 @@ export function mediaPlugin({ upload, features = null }) {
   });
 }
 
-export function pickFiles(view, accept, place = hostPlace(view.state, view.state.selection.$head.index(0)), remove = null) {
-  const rt = runtime.get(view);
-  if (!rt) return false;
-  const picker = { place, remove: remove && { ...remove, text: view.state.doc.textBetween(remove.from, remove.to) } };
-  view.dispatch(view.state.tr.setMeta(mediaKey, { picker }));
-  rt.input.accept = accept;
-  rt.input.click();
-  return true;
-}
-
 const indexOfId = (doc, id) => {
   let found = -1;
   doc.forEach((n, _, i) => { if (n.attrs.id === id) found = i; });
   return found;
 };
 
-export function setImageAttrs(view, id, patch) {
-  const st = view.state;
-  const index = indexOfId(st.doc, id);
-  if (index < 0) return false;
-  let at = 0;
-  for (let i = 0; i < index; i++) at += st.doc.child(i).nodeSize;
-  const node = st.doc.child(index);
-  view.dispatch(asStep(st.tr.setNodeMarkup(at, null, { ...node.attrs, ...patch })));
-  return true;
-}
-
-export function openAltEditor(view, id) {
-  const index = indexOfId(view.state.doc, id);
-  if (index < 0) return false;
-  const shell = view.dom.parentElement;
-  const doc = shell.ownerDocument;
-  let at = 0;
-  for (let i = 0; i < index; i++) at += view.state.doc.child(i).nodeSize;
-  const box = doc.createElement("div");
-  box.className = "page-link";
-  box.dataset.mode = "alt";
-  const input = doc.createElement("input");
-  input.className = "page-link-input";
-  input.type = "text";
-  input.value = view.state.doc.child(index).attrs.alt || "";
-  input.placeholder = "Describe the image";
-  input.setAttribute("aria-label", "Alt text");
-  box.append(input);
-  const rect = view.nodeDOM(at)?.getBoundingClientRect?.();
-  const shellBox = shell.getBoundingClientRect();
-  if (rect) {
-    box.style.setProperty("--page-pop-x", `${rect.left - shellBox.left}px`);
-    box.style.setProperty("--page-pop-y", `${rect.bottom - shellBox.top + 6}px`);
-  }
-  shell.append(box);
-  let done = false;
-  const close = (commit, refocus = true) => {
-    if (done) return;
-    done = true;
-    const value = input.value.trim();
-    box.remove();
-    const i = indexOfId(view.state.doc, id);
-    if (commit && i >= 0 && value !== view.state.doc.child(i).attrs.alt) setImageAttrs(view, id, { alt: value });
-    if (refocus) view.focus();
-  };
-  input.addEventListener("keydown", (e) => {
-    if (e.key === "Enter") { e.preventDefault(); close(true); }
-    else if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); close(false); }
-  });
-  input.addEventListener("blur", () => close(true, false));
-  input.focus();
+export function pickFiles(view, accept, place = hostPlace(view.state, view.state.selection.$head.index(0)), remove = null) {
+  const rt = mediaRuntime.get(view);
+  if (!rt) return false;
+  const picker = { place, remove: remove && { ...remove, text: view.state.doc.textBetween(remove.from, remove.to) } };
+  view.dispatch(view.state.tr.setMeta(mediaKey, { picker }));
+  rt.input.accept = accept;
+  rt.input.click();
   return true;
 }

package/src/page/placeholder.js

@@ -5,6 +5,7 @@ const { Decoration, DecorationSet } = pmView;
 
 export const PLACEHOLDER_TEXT = "Type / for blocks";
 export const TITLE_PLACEHOLDER = "Untitled";
+export const CHECK_PLACEHOLDER = "To do";
 
 function titlePlaceholder(doc) {
   let done = false;
@@ -18,11 +19,23 @@ function titlePlaceholder(doc) {
   return decoration;
 }
 
+// An empty check item keeps its tags, so the line it leaves is the whole click area;
+// the words say where to click.
+function checkPlaceholders(doc) {
+  const decorations = [];
+  doc.forEach((node, offset) => {
+    if (node.type !== schema.nodes.list_item || node.attrs.kind !== "check") return;
+    if (node.content.size || node.attrs.checked) return;
+    decorations.push(Decoration.node(offset, offset + node.nodeSize, { class: "page-check-placeholder", "data-placeholder": CHECK_PLACEHOLDER }));
+  });
+  return decorations;
+}
+
 export function placeholderPlugin(text = PLACEHOLDER_TEXT) {
   return new state.Plugin({
     props: {
       decorations(st) {
-        const decorations = [];
+        const decorations = checkPlaceholders(st.doc);
         const title = titlePlaceholder(st.doc);
         if (title) decorations.push(title);
         const { selection } = st;