@panphora/clayjs 1.15.1 → 1.16.0

package/src/page/items.js

@@ -5,6 +5,7 @@
 import { state } from "../vendor/prosemirror.vendor.js";
 import { schema } from "./schema.js";
 import { isKey, keyBetween, newId } from "./model.js";
+import { isOpaque, opaqueMark } from "./format-codec.js";
 import { outline, subtreeRange } from "./blocks.js";
 import { asStep } from "./blocksel.js";
 import { pickFiles, hostPlace } from "./media.js";
@@ -67,8 +68,29 @@ export function retype(tr, index, item) {
   return tr.setBlockType(at + 1, at + node.nodeSize - 1, N[item.type], { ...keep, ...(item.attrs || {}) });
 }
 
+// A command this runtime cannot carry out on the content it was given: the
+// document and the clipboard keep what they hold.
+export const REFUSED = Object.freeze({ status: "refused", code: "unsupported-format" });
+
+const opaqueType = opaqueMark([]).type;
+const holdsOpaque = (node) => {
+  let found = false;
+  node.forEach((child) => { if (!found && child.marks.some(isOpaque)) found = true; });
+  return found;
+};
+
+// A block that is not a textblock cannot be turned into anything, and one this
+// runtime cannot rewrite, or whose opaque marks the target type would erase, is
+// refused rather than converted into something that lost them.
+export function canTurnInto(node, item) {
+  if (!node.isTextblock || node.type === N.opaque_block) return false;
+  return !holdsOpaque(node) || N[item.type].allowsMarkType(opaqueType);
+}
+
 export function turnInto(st, index, item) {
-  return st.doc.child(index).isTextblock ? retype(st.tr, index, item) : null;
+  const node = st.doc.child(index);
+  if (!node.isTextblock) return null;
+  return canTurnInto(node, item) ? retype(st.tr, index, item) : REFUSED;
 }
 
 // A new empty paragraph after the block at `index` and its subtree, at the
@@ -116,22 +138,40 @@ export function insertDivider(st, index, tr = st.tr) {
   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.
+function subsequenceCost(query, candidate) {
+  if (query.length < 2 || query.length > 32) return Infinity;
+  let at = -1;
+  let cost = 0;
+  for (const ch of query) {
+    const next = candidate.indexOf(ch, at + 1);
+    if (next < 0) return Infinity;
+    cost += next - at - 1;
+    at = next;
+  }
+  return cost;
+}
+
 // Exact name or alias first, then label prefix, word or alias prefix,
-// substring; equal ranks keep menu order. No fuzzy matching.
+// substring, description word, and last a fuzzy subsequence of the label, key
+// or aliases. Equal tiers keep the lower cost, then menu order.
 export function rankItems(items, query) {
   const q = query.trim().toLowerCase();
   if (!q) return items;
   const rank = (it) => {
     const label = it.label.toLowerCase();
     const names = [it.key, ...(it.aliases || []), ...(it.hint ? [it.hint] : [])].map((s) => s.toLowerCase());
-    if (label === q || names.includes(q)) return 0;
-    if (label.startsWith(q)) return 1;
-    if ([...label.split(/\s+/), ...names].some((s) => s.startsWith(q))) return 2;
-    if ([label, ...names].some((s) => s.includes(q))) return 3;
-    if (q.length >= 3 && it.description && it.description.toLowerCase().split(/[^a-z0-9]+/).some((w) => w.startsWith(q))) return 4;
-    return Infinity;
+    if (label === q || names.includes(q)) return [0, 0];
+    if (label.startsWith(q)) return [1, 0];
+    if ([...label.split(/\s+/), ...names].some((s) => s.startsWith(q))) return [2, 0];
+    if ([label, ...names].some((s) => s.includes(q))) return [3, 0];
+    if (q.length >= 3 && it.description && it.description.toLowerCase().split(/[^a-z0-9]+/).some((w) => w.startsWith(q))) return [4, 0];
+    const cost = Math.min(...[label, it.key, ...(it.aliases || [])].map((s) => subsequenceCost(q, s.toLowerCase())));
+    return cost === Infinity ? null : [5, cost];
   };
-  return items.map((it, order) => ({ it, order, rank: rank(it) })).filter((x) => x.rank !== Infinity).sort((a, b) => a.rank - b.rank || a.order - b.order).map((x) => x.it);
+  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
@@ -141,12 +181,13 @@ 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);
-  if (item.insert === "board") return insertBoardNode(st, view.dispatch, makeBoard(), 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);
+  if (node.isTextblock && node.content.size === 0 && !canTurnInto(node, item)) return REFUSED;
   if (item.insert === "divider") tr = insertDivider(st, index, tr);
   else if (node.isTextblock && node.content.size === 0) tr = retype(tr, index, item);
   else {

package/src/page/link.js

@@ -79,6 +79,7 @@ class LinkPopover {
     this.edit.addEventListener("click", () => this.openEdit());
     this.remove.addEventListener("click", () => this.apply(""));
     this.input.addEventListener("keydown", (e) => {
+      if (e.isComposing || e.keyCode === 229) return;
       if (e.key === "Enter") { e.preventDefault(); this.apply(this.input.value); }
       else if (e.key === "Escape") { e.preventDefault(); this.close(); }
     });

package/src/page/markdown.js

@@ -8,6 +8,7 @@ import { retype, replaceWithDivider } from "./items.js";
 import { asStep } from "./blocksel.js";
 import { insertTableNode } from "./table.js";
 import { tableFromGrid } from "./table-paste.js";
+import { safeHref } from "./address.js";
 
 const { InputRule } = inputrules;
 const N = schema.nodes;
@@ -29,6 +30,87 @@ const dividerRule = new InputRule(/^---$/, (st, match, start, end) => {
   return asStep(replaceWithDivider(st.tr, $s.index(0)));
 });
 
+// Inline shortcuts typed around text: **bold** and __bold__ to strong, *italic*
+// and _italic_ to em, `code`, ~~strike~~, and [label](address) to a link. The
+// delimiters are deleted and the mark is added over the body, which stays where
+// it is, so the marks it already carries survive. Backspace right after puts the
+// delimiter characters back through the input rule's own undo.
+const OPENS = "\\s\\(\\[\\{'\u2018\u201C\u0022";
+const OPENS_ONE = new RegExp(`[${OPENS}]`);
+const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const bodyRe = (exclude) => `([^\\s${exclude}](?:[\\s\\S]*?[^\\s${exclude}])?)`;
+
+export const composing = (event, view) => !!event?.isComposing || event?.keyCode === 229 || !!view?.composing;
+
+const trailingBackslashes = (text) => {
+  let n = 0;
+  for (let i = text.length - 1; i >= 0 && text[i] === "\\"; i--) n++;
+  return n;
+};
+
+// An opening delimiter needs the start of a textblock or whitespace and opening
+// punctuation before it, and neither delimiter may be escaped.
+const opensAt = (st, at) => {
+  const $at = st.doc.resolve(at);
+  if (!$at.parent.inlineContent) return false;
+  if (trailingBackslashes($at.parent.textBetween(0, $at.parentOffset, null, "\uFFFC")) % 2) return false;
+  return $at.parentOffset === 0 || OPENS_ONE.test($at.parent.textBetween($at.parentOffset - 1, $at.parentOffset));
+};
+
+const inline = (st, match, start, end, markOf) => {
+  const mark = markOf(match);
+  if (!mark || !st.selection.empty) return null;
+  if (start < 0 || start > end || end > st.doc.content.size) return null;
+  const $start = st.doc.resolve(start), $end = st.doc.resolve(end);
+  if (!$start.sameParent($end) || !$start.parent.inlineContent) return null;
+  const [all, prefix, body, close] = match;
+  if (inlineCode(st, start, end)) return null;
+  const open = all.slice(prefix.length, all.length - body.length - close.length);
+  const from = start + prefix.length;
+  if (!opensAt(st, from)) return null;
+  if (trailingBackslashes(all.slice(0, all.length - close.length)) % 2) return null;
+  const pending = all.length - (end - start);
+  if (pending < 0) return null;
+  const tr = st.tr;
+  if (pending) tr.insertText(all.slice(-pending), end, end);
+  const bodyStart = from + open.length;
+  const bodyEnd = bodyStart + body.length;
+  tr.delete(bodyEnd, start + all.length);
+  tr.delete(from, bodyStart);
+  tr.addMark(from, from + body.length, mark);
+  tr.removeStoredMark(mark.type);
+  return asStep(tr);
+};
+
+const inlineRule = (re, markOf) => new InputRule(
+  re,
+  (st, match, start, end) => inline(st, match, start, end, markOf),
+  { inCodeMark: false },
+);
+
+const markRule = (open, close, type) => inlineRule(
+  new RegExp(`(^|[${OPENS}])${escapeRe(open)}${bodyRe(escapeRe(close))}(${escapeRe(close)})$`),
+  () => type.create(),
+);
+
+const linkRule = inlineRule(
+  new RegExp(`(^|[${OPENS}])\\[${bodyRe("\\[\\]")}(\\]\\([^()\\s]*\\))$`),
+  (match) => {
+    const href = safeHref(match[3].slice(2, -1));
+    return href ? schema.marks.link.create({ href }) : null;
+  },
+);
+
+const INLINE_RULES = [
+  markRule("**", "**", schema.marks.strong),
+  markRule("__", "__", schema.marks.strong),
+  markRule("*", "*", schema.marks.em),
+  markRule("_", "_", schema.marks.em),
+  markRule("`", "`", schema.marks.code),
+  markRule("~~", "~~", schema.marks.strike),
+  linkRule,
+];
+
 const LISTS = ["paragraph", "list_item"];
 
 export const MARKDOWN_RULES = [
@@ -39,6 +121,7 @@ export const MARKDOWN_RULES = [
   blockRule(/^>\s$/, { type: "toggle", attrs: { open: true } }),
   blockRule(/^```$/, { type: "code_block" }, ["paragraph"], true),
   dividerRule,
+  ...INLINE_RULES,
 ];
 
 export const markdownPlugin = () => inputrules.inputRules({ rules: MARKDOWN_RULES });
@@ -59,7 +142,9 @@ export function tableFromMarkdownRow(st, dispatch) {
   return insertTableNode(st, dispatch, table, { from: $from.start(), to: $from.end() });
 }
 
-export const markdownKeys = () => keymap.keymap({ Enter: tableFromMarkdownRow });
+export const markdownKeys = () => keymap.keymap({
+  Enter: (st, dispatch, view) => !composing(null, view) && tableFromMarkdownRow(st, dispatch),
+});
 
 export function backspaceToParagraph(st, dispatch) {
   const { $from, empty } = st.selection;

package/src/page/media-views.js

@@ -0,0 +1,3 @@
+// The bookmark renderer a media plugin can reach, filled by the media view part
+// when it loads, per editor. An upload still tracks and settles with no renderer.
+export const mediaViews = new WeakMap();

package/src/page/media.js

@@ -9,7 +9,8 @@ import { outline } from "./blocks.js";
 import { newId } from "./model.js";
 import { asStep } from "./blocksel.js";
 import { announce } from "./announce.js";
-import { safeHref, safeFileHref } from "./address.js";
+import { safeFileHref } from "./address.js";
+import { mediaViews } from "./media-views.js";
 
 const { Plugin, PluginKey } = state;
 const { Decoration, DecorationSet } = pmView;
@@ -17,7 +18,7 @@ const N = schema.nodes;
 
 export const mediaKey = new PluginKey("page-media");
 export const EMBED_MAX = 1.5 * 1024 * 1024;
-const RETRY = new Set(["timeout", "network", "error", "bad-response"]);
+export const RETRY = new Set(["timeout", "network", "error", "bad-response"]);
 const runtime = new WeakMap();
 
 const boundary = (doc, pos) => {
@@ -183,65 +184,21 @@ export function cancelUpload(view, id) {
   abort?.abort();
 }
 
-function button(doc, act, label, id) {
-  const b = doc.createElement("button");
-  b.type = "button";
-  b.className = "page-upload-btn";
-  b.dataset.act = act;
-  b.dataset.upload = id;
-  b.textContent = label;
-  return b;
-}
-
-function bookmarkDOM(doc, it) {
-  const box = doc.createElement("div");
-  box.className = "page-upload";
-  box.dataset.state = it.state;
-  box.dataset.kind = it.kind;
-  box.contentEditable = "false";
-  box.setAttribute("role", it.state === "uploading" ? "status" : "alert");
-  if (it.preview) {
-    const img = doc.createElement("img");
-    img.className = "page-upload-preview";
-    img.src = it.preview;
-    img.alt = "";
-    box.append(img);
-  }
-  const name = doc.createElement("span");
-  name.className = "page-upload-name";
-  name.textContent = it.name;
-  box.append(name);
-  if (it.state === "uploading") {
-    const bar = doc.createElement("span");
-    bar.className = "page-upload-bar";
-    bar.setAttribute("role", "progressbar");
-    bar.setAttribute("aria-label", `Uploading ${it.name}`);
-    bar.setAttribute("aria-valuemin", "0");
-    bar.setAttribute("aria-valuemax", "100");
-    bar.setAttribute("aria-valuenow", String(it.percent));
-    const fill = doc.createElement("span");
-    fill.style.width = `${it.percent}%`;
-    bar.append(fill);
-    box.append(bar, button(doc, "cancel", "Cancel", it.id));
-    return box;
-  }
-  const msg = doc.createElement("span");
-  msg.className = "page-upload-msg";
-  msg.textContent = it.message;
-  box.append(msg);
-  if (it.state === "embed-choice") box.append(button(doc, "embed", "Keep this image inside the document", it.id));
-  if (RETRY.has(it.code)) box.append(button(doc, "retry", "Retry", it.id));
-  box.append(button(doc, "remove", "Remove", it.id));
-  return box;
-}
-
 const htmlHasText = (html) => html.replace(/<(meta|style|img)\b[^>]*>/gi, "").replace(/<[^>]+>/g, "").trim() !== "";
 
-export function mediaPlugin({ upload }) {
+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;
+    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";
@@ -251,13 +208,18 @@ export function mediaPlugin({ upload }) {
       view.dom.parentElement.append(input);
       runtime.set(view, { upload, aborts: new Map(), input });
       input.addEventListener("change", () => {
+        const files = [...(input.files ?? [])];
         const picker = mediaKey.getState(view.state).picker;
         view.dispatch(view.state.tr.setMeta(mediaKey, { picker: null }));
-        if (input.files?.length && picker) {
+        if (files.length && picker) {
+          const { remove } = picker;
+          if (remove && view.state.doc.textBetween(remove.from, remove.to) === remove.text) {
+            view.dispatch(asStep(view.state.tr.delete(remove.from, remove.to)));
+          }
           const index = indexOfId(view.state.doc, picker.place.hostId);
           if (!picker.place.hostId || index >= 0) {
-            if (picker.remove) view.dispatch(asStep(view.state.tr.delete(picker.remove.from, picker.remove.to)));
-            insertFiles(view, input.files, index >= 0 ? hostPlace(view.state, index) : picker.place);
+            insertFiles(view, files, index >= 0 ? hostPlace(view.state, index) : picker.place);
+            showBookmark(view);
           }
         }
         input.value = "";
@@ -277,6 +239,7 @@ export function mediaPlugin({ upload }) {
       return {
         destroy() {
           view.dom.removeEventListener("click", onClick);
+          if (editorView === view) editorView = null;
           const rt = runtime.get(view);
           runtime.delete(view);
           for (const it of mediaKey.getState(view.state).items) if (it.preview) URL.revokeObjectURL?.(it.preview);
@@ -288,8 +251,9 @@ export function mediaPlugin({ upload }) {
     props: {
       decorations(st) {
         const { items } = mediaKey.getState(st);
-        if (!items.length) return null;
-        return DecorationSet.create(st.doc, items.map((it) => Decoration.widget(boundary(st.doc, it.pos), (view) => bookmarkDOM(view.dom.ownerDocument, it), {
+        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,
         })));
       },
@@ -298,7 +262,11 @@ export function mediaPlugin({ upload }) {
         const files = [...(data?.files ?? [])];
         if (!files.length || view.state.selection.$from.parent.type.spec.code) return false;
         if (htmlHasText(data.getData("text/html") || "")) return false;
-        return insertFiles(view, files);
+        const place = hostPlace(view.state, view.state.selection.$head.index(0));
+        event.preventDefault();
+        insertFiles(view, files, place);
+        showBookmark(view);
+        return true;
       },
       handleDrop(view, event, _slice, moved) {
         const files = [...(event.dataTransfer?.files ?? [])];
@@ -310,7 +278,10 @@ export function mediaPlugin({ upload }) {
         const r = view.nodeDOM(ents[i].at)?.getBoundingClientRect?.();
         const before = r && event.clientY < r.top + r.height / 2;
         event.preventDefault();
-        return insertFiles(view, files, { at: before ? ents[i].at : ents[ents[i].subEnd].end, parent: ents[i].node.attrs.parent ?? null, replaceId: null });
+        const place = { at: before ? ents[i].at : ents[ents[i].subEnd].end, parent: ents[i].node.attrs.parent ?? null, replaceId: null };
+        insertFiles(view, files, place);
+        showBookmark(view);
+        return true;
       },
     },
   });
@@ -326,189 +297,6 @@ export function pickFiles(view, accept, place = hostPlace(view.state, view.state
   return true;
 }
 
-const MIN_WIDTH = 48;
-
-const ALIGNS = [
-  ["left", "Align left", '<path d="M2.5 3.5h11M2.5 6.5h6M2.5 9.5h11M2.5 12.5h6"/>'],
-  ["center", "Centre", '<path d="M2.5 3.5h11M5 6.5h6M2.5 9.5h11M5 12.5h6"/>'],
-  ["right", "Align right", '<path d="M2.5 3.5h11M7.5 6.5h6M2.5 9.5h11M7.5 12.5h6"/>'],
-];
-
-export class ImageView {
-  constructor(node, view, getPos) {
-    this.node = node;
-    this.view = view;
-    this.getPos = getPos;
-    const doc = view.dom.ownerDocument;
-    this.dom = doc.createElement("figure");
-    this.dom.className = "page-image";
-    this.dom.addEventListener("dragstart", (event) => { event.preventDefault(); event.stopPropagation(); });
-    this.dom.draggable = false;
-    this.frame = doc.createElement("div");
-    this.frame.className = "page-image-frame";
-    this.img = doc.createElement("img");
-    this.img.draggable = false;
-    this.img.addEventListener("error", () => this.dom.toggleAttribute("data-broken", true));
-    this.img.addEventListener("load", () => this.dom.removeAttribute("data-broken"));
-    this.handle = doc.createElement("span");
-    this.handle.className = "page-image-handle";
-    this.handle.setAttribute("aria-hidden", "true");
-    this.handle.addEventListener("pointerdown", (e) => this.resize(e));
-    this.alignBar = doc.createElement("div");
-    this.alignBar.className = "page-image-align";
-    this.alignBar.setAttribute("role", "toolbar");
-    this.alignBar.setAttribute("aria-label", "Image alignment");
-    for (const [value, label, path] of ALIGNS) {
-      const b = doc.createElement("button");
-      b.type = "button";
-      b.dataset.align = value;
-      b.setAttribute("aria-label", label);
-      b.title = label;
-      b.innerHTML = `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">${path}</svg>`;
-      this.alignBar.append(b);
-    }
-    this.alignBar.addEventListener("mousedown", (e) => e.preventDefault());
-    this.alignBar.addEventListener("click", (e) => {
-      const b = e.target.closest("[data-align]");
-      if (b) this.setAlign(b.dataset.align === "center" ? null : b.dataset.align);
-    });
-    this.frame.append(this.img, this.handle, this.alignBar);
-    this.caption = doc.createElement("figcaption");
-    this.caption.className = "page-image-caption";
-    this.caption.contentEditable = "plaintext-only";
-    this.caption.setAttribute("aria-label", "Caption");
-    this.caption.dataset.placeholder = "Add a caption";
-    this.caption.addEventListener("keydown", (e) => {
-      if (e.isComposing || this.view.composing) return;
-      if (e.key === "Enter") { e.preventDefault(); this.commitCaption(); this.view.focus(); }
-      if (e.key === "Escape") { e.preventDefault(); this.caption.textContent = this.node.attrs.caption; this.view.focus(); }
-    });
-    this.caption.addEventListener("blur", () => this.commitCaption());
-    this.caption.addEventListener("input", () => this.caption.toggleAttribute("data-empty", !this.caption.textContent));
-    this.dom.append(this.frame, this.caption);
-    this.render(node);
-  }
-
-  render(node) {
-    this.node = node;
-    this.dom.dataset.id = node.attrs.id ?? "";
-    if (this.img.getAttribute("src") !== node.attrs.src) this.img.src = node.attrs.src;
-    this.img.alt = node.attrs.alt || "";
-    this.frame.style.width = node.attrs.width ? `${node.attrs.width}px` : "";
-    if (node.attrs.align) this.dom.dataset.align = node.attrs.align;
-    else delete this.dom.dataset.align;
-    for (const b of this.alignBar.children) b.setAttribute("aria-pressed", String((node.attrs.align ?? "center") === b.dataset.align));
-    if (this.dom.ownerDocument.activeElement !== this.caption) this.caption.textContent = node.attrs.caption || "";
-    this.caption.toggleAttribute("data-empty", !node.attrs.caption);
-  }
-
-  update(node) {
-    if (node.type !== this.node.type) return false;
-    this.render(node);
-    return true;
-  }
-
-  setAlign(align) {
-    const pos = this.getPos();
-    if (pos == null || align === (this.node.attrs.align ?? null)) return;
-    this.view.dispatch(asStep(this.view.state.tr.setNodeMarkup(pos, null, { ...this.node.attrs, align })));
-  }
-
-  commitCaption() {
-    const text = this.caption.textContent.replace(/\s+/g, " ").trim();
-    const pos = this.getPos();
-    if (pos == null || text === (this.node.attrs.caption || "")) return;
-    this.view.dispatch(asStep(this.view.state.tr.setNodeMarkup(pos, null, { ...this.node.attrs, caption: text })));
-  }
-
-  resize(event) {
-    event.preventDefault();
-    event.stopPropagation();
-    const col = this.view.dom.getBoundingClientRect().width;
-    const start = this.frame.getBoundingClientRect().width;
-    const rtl = this.dom.ownerDocument.defaultView.getComputedStyle(this.dom).direction === "rtl";
-    const x0 = event.clientX;
-    const target = event.currentTarget;
-    target.setPointerCapture?.(event.pointerId);
-    let width = this.node.attrs.width;
-    const move = (e) => {
-      const dx = (e.clientX - x0) * (rtl ? -1 : 1);
-      width = Math.max(MIN_WIDTH, Math.min(Math.floor(col) || MIN_WIDTH, Math.round(start + dx)));
-      this.frame.style.width = `${width}px`;
-    };
-    const done = (commit) => {
-      target.removeEventListener("pointermove", move);
-      target.removeEventListener("pointerup", up);
-      target.removeEventListener("pointercancel", cancel);
-      const pos = this.getPos();
-      if (commit && pos != null && width !== this.node.attrs.width) this.view.dispatch(asStep(this.view.state.tr.setNodeMarkup(pos, null, { ...this.node.attrs, width })));
-      else this.frame.style.width = this.node.attrs.width ? `${this.node.attrs.width}px` : "";
-    };
-    const up = () => done(true);
-    const cancel = () => done(false);
-    target.addEventListener("pointermove", move);
-    target.addEventListener("pointerup", up);
-    target.addEventListener("pointercancel", cancel);
-  }
-
-  selectNode() { this.dom.classList.add("is-selected"); }
-  deselectNode() { this.dom.classList.remove("is-selected"); }
-  stopEvent(event) { return this.caption.contains(event.target) || this.alignBar.contains(event.target) || event.target.classList?.contains("page-image-handle"); }
-  ignoreMutation() { return true; }
-}
-
-const sizeLabel = (bytes) => {
-  if (bytes == null) return "";
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-};
-
-export class FileView {
-  constructor(node, view) {
-    this.node = node;
-    const doc = view.dom.ownerDocument;
-    this.dom = doc.createElement("div");
-    this.dom.className = "page-file";
-    this.dom.addEventListener("dragstart", (event) => { event.preventDefault(); event.stopPropagation(); });
-    this.link = doc.createElement("a");
-    this.link.className = "page-file-link";
-    this.link.target = "_blank";
-    this.link.rel = "noopener noreferrer";
-    this.icon = doc.createElement("span");
-    this.icon.className = "page-file-icon";
-    this.icon.textContent = "⎘";
-    this.name = doc.createElement("span");
-    this.name.className = "page-file-name";
-    this.meta = doc.createElement("span");
-    this.meta.className = "page-file-meta";
-    this.link.append(this.icon, this.name, this.meta);
-    this.dom.append(this.link);
-    this.render(node);
-  }
-
-  render(node) {
-    this.node = node;
-    this.dom.dataset.id = node.attrs.id ?? "";
-    const href = safeHref(node.attrs.src);
-    if (href) this.link.setAttribute("href", href);
-    else this.link.removeAttribute("href");
-    this.name.textContent = node.attrs.name || "file";
-    this.meta.textContent = sizeLabel(node.attrs.size);
-  }
-
-  update(node) {
-    if (node.type !== this.node.type) return false;
-    this.render(node);
-    return true;
-  }
-
-  selectNode() { this.dom.classList.add("is-selected"); }
-  deselectNode() { this.dom.classList.remove("is-selected"); }
-  stopEvent(event) { return this.link.contains(event.target); }
-  ignoreMutation() { return true; }
-}
-
 const indexOfId = (doc, id) => {
   let found = -1;
   doc.forEach((n, _, i) => { if (n.attrs.id === id) found = i; });

package/src/page/outline-cache.js

@@ -0,0 +1,11 @@
+// One outline per document: a ProseMirror document never changes, so its outline is
+// built on first ask and reused by every pointer frame, menu and drag until the next edit.
+import { outline } from "./blocks.js";
+
+const outlines = new WeakMap();
+
+export function outlineOf(doc) {
+  let ents = outlines.get(doc);
+  if (!ents) outlines.set(doc, ents = outline(doc));
+  return ents;
+}

package/src/page/placeholder.js

@@ -4,19 +4,39 @@ import { schema } from "./schema.js";
 const { Decoration, DecorationSet } = pmView;
 
 export const PLACEHOLDER_TEXT = "Type / for blocks";
+export const TITLE_PLACEHOLDER = "Untitled";
+
+function titlePlaceholder(doc) {
+  let done = false;
+  let decoration = null;
+  doc.forEach((node, offset) => {
+    if (done) return;
+    if (node.type !== schema.nodes.heading || node.attrs.level !== 1 || (node.attrs.parent ?? null) !== null) return;
+    done = true;
+    if (!node.content.size) decoration = Decoration.node(offset, offset + node.nodeSize, { class: "page-title-placeholder", "data-placeholder": TITLE_PLACEHOLDER });
+  });
+  return decoration;
+}
 
 export function placeholderPlugin(text = PLACEHOLDER_TEXT) {
   return new state.Plugin({
     props: {
       decorations(st) {
+        const decorations = [];
+        const title = titlePlaceholder(st.doc);
+        if (title) decorations.push(title);
         const { selection } = st;
-        if (!selection.empty) return null;
-        const $from = selection.$from;
-        if ($from.depth !== 1) return null;
-        const node = $from.parent;
-        if (node.type !== schema.nodes.paragraph || node.content.size) return null;
-        const pos = $from.before(1);
-        return DecorationSet.create(st.doc, [Decoration.node(pos, pos + node.nodeSize, { class: "page-placeholder", "data-placeholder": text })]);
+        if (selection.empty) {
+          const $from = selection.$from;
+          if ($from.depth === 1) {
+            const node = $from.parent;
+            if (node.type === schema.nodes.paragraph && !node.content.size) {
+              const pos = $from.before(1);
+              decorations.push(Decoration.node(pos, pos + node.nodeSize, { class: "page-placeholder", "data-placeholder": text }));
+            }
+          }
+        }
+        return decorations.length ? DecorationSet.create(st.doc, decorations) : null;
       },
     },
   });