@panphora/clayjs 1.13.0 → 1.14.0

package/src/page/media.js

@@ -0,0 +1,570 @@
+// Image and file uploads. A file being uploaded is a bookmark in plugin state,
+// drawn as a widget at a block boundary and mapped through every transaction.
+// 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";
+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 { safeHref, safeFileHref } from "./address.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;
+const RETRY = new Set(["timeout", "network", "error", "bad-response"]);
+const runtime = new WeakMap();
+
+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);
+};
+
+export function hostPlace(st, i) {
+  const ents = outline(st.doc);
+  const e = ents[Math.min(i, ents.length - 1)];
+  const empty = e.node.type === N.paragraph && e.node.content.size === 0;
+  return { hostId: e.node.attrs.id, at: empty ? e.at : ents[e.subEnd].end, parent: e.node.attrs.parent ?? null, replaceId: empty ? e.node.attrs.id : null };
+}
+
+const mediaState = {
+  init: () => ({ items: [], placed: {}, picker: null }),
+  apply(tr, value) {
+    let { items, placed, picker } = value;
+    if (tr.docChanged) items = items.map((it) => ({ ...it, pos: boundary(tr.doc, tr.mapping.map(it.pos, -1)) }));
+    if (picker && tr.docChanged) {
+      picker = { ...picker, place: { ...picker.place, at: boundary(tr.doc, tr.mapping.map(picker.place.at, -1)) } };
+      if (picker.remove) {
+        const from = tr.mapping.map(picker.remove.from, 1), to = tr.mapping.map(picker.remove.to, -1);
+        picker = from <= to && tr.doc.textBetween(from, to) === picker.remove.text
+          ? { ...picker, remove: { ...picker.remove, from, to } } : null;
+      }
+    }
+    const m = tr.getMeta(mediaKey);
+    if (m?.picker !== undefined) picker = m.picker;
+    if (m?.add) items = [...items, ...m.add];
+    if (m?.update) items = items.map((it) => (it.id === m.update.id ? { ...it, ...m.update } : it));
+    if (m?.placed) {
+      const { id, at, size, blockId } = m.placed;
+      const done = value.items.find((it) => it.id === id);
+      items = items.filter((it) => it.id !== id).map((it) => (done && it.pos === at && it.group === done.group && it.order > done.order ? { ...it, pos: it.pos + size } : it));
+      if (done) placed = { ...placed, [done.group]: [...(placed[done.group] || []), blockId] };
+    }
+    if (m?.remove) items = items.filter((it) => it.id !== m.remove);
+    for (const g of Object.keys(placed)) if (!items.some((it) => it.group === g)) { placed = { ...placed }; delete placed[g]; }
+    return { items, placed, picker };
+  },
+};
+
+function dropEmptyHost(tr, hostId, placedIds) {
+  if (!hostId) return;
+  let prev = null, hit = null;
+  tr.doc.forEach((n, off) => { if (n.attrs.id === hostId && prev && placedIds.includes(prev.attrs.id)) hit = { n, off }; prev = n; });
+  if (hit && hit.n.type === N.paragraph && hit.n.content.size === 0) tr.delete(hit.off, hit.off + hit.n.nodeSize);
+}
+
+export function placeTr(st, id, attrs) {
+  const { items, placed } = mediaKey.getState(st);
+  const it = items.find((x) => x.id === id);
+  if (!it) return null;
+  const at = boundary(st.doc, it.pos);
+  const blockId = newId();
+  const node = (it.kind === "image" ? N.image : N.file).create({ ...attrs, id: blockId, pos: null, parent: it.parent });
+  const tr = st.tr.insert(at, node);
+  if (!items.some((x) => x.group === it.group && x.id !== id)) dropEmptyHost(tr, it.replaceId, [...(placed[it.group] || []), blockId]);
+  return asStep(tr).setMeta(mediaKey, { placed: { id, at, size: node.nodeSize, blockId } });
+}
+
+export function removeTr(st, id) {
+  const { items, placed } = mediaKey.getState(st);
+  const it = items.find((x) => x.id === id);
+  if (!it) return null;
+  const tr = st.tr;
+  if (!items.some((x) => x.group === it.group && x.id !== id)) dropEmptyHost(tr, it.replaceId, placed[it.group] || []);
+  if (tr.docChanged) asStep(tr);
+  return tr.setMeta(mediaKey, { remove: id });
+}
+
+export function insertFiles(view, files, place = hostPlace(view.state, view.state.selection.$head.index(0))) {
+  files = [...files].filter(Boolean);
+  if (!files.length) return false;
+  const group = newId("g");
+  const add = files.map((file, order) => {
+    const kind = /^image\//.test(file.type || "") ? "image" : "file";
+    return {
+      id: newId("u"), pos: place.at, group, order, file, kind, name: file.name || (kind === "image" ? "image" : "file"),
+      parent: place.parent, replaceId: place.replaceId, state: "uploading", percent: 0,
+      preview: kind === "image" && globalThis.URL?.createObjectURL ? URL.createObjectURL(file) : null,
+    };
+  });
+  view.dispatch(view.state.tr.setMeta(mediaKey, { add }));
+  for (const it of add) run(view, it);
+  announce(view, files.length === 1 ? `Uploading ${add[0].name}` : `Uploading ${files.length} files`);
+  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 });
+
+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);
+  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 });
+  };
+  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 (res?.ok) {
+    const src = safeFileHref(res.uploads?.[0]?.url);
+    if (src) {
+      settle(it, view, placeTr(view.state, it.id, attrsFor(it, src)));
+      announce(view, `${it.name} added`);
+      return;
+    }
+    res = { code: "bad-response", msg: "The upload returned an invalid address" };
+  }
+  if (!res || typeof res !== "object") res = { code: "bad-response", msg: "The upload returned an invalid response" };
+  if (res.code === "aborted") return settle(it, view, removeTr(view.state, it.id));
+  if (res.code === "unsupported") {
+    const canEmbed = /^image\/(png|jpeg|gif|webp)$/i.test(it.file.type) && it.file.size <= EMBED_MAX;
+    const message = canEmbed
+      ? "This host doesn't store files. You can keep this image inside the document, which makes the document larger."
+      : it.kind === "image" && it.file.size > EMBED_MAX ? "This host doesn't store files, and this image is over 1.5 MB, too large to keep inside the document." : "This host doesn't store files.";
+    update(view, it.id, { state: canEmbed ? "embed-choice" : "error", code: res.code, message });
+    announce(view, `${it.name}: ${message}`);
+    return;
+  }
+  const message = res.code === "timeout" ? "The upload timed out. It may have arrived; trying again is safe." : res.msg || "Upload failed";
+  update(view, it.id, { state: "error", code: res.code, message });
+  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();
+}
+
+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 }) {
+  return new Plugin({
+    key: mediaKey,
+    state: mediaState,
+    view(view) {
+      const doc = view.dom.ownerDocument;
+      const input = doc.createElement("input");
+      input.type = "file";
+      input.multiple = true;
+      input.hidden = true;
+      input.className = "page-file-input";
+      view.dom.parentElement.append(input);
+      runtime.set(view, { upload, aborts: new Map(), input });
+      input.addEventListener("change", () => {
+        const picker = mediaKey.getState(view.state).picker;
+        view.dispatch(view.state.tr.setMeta(mediaKey, { picker: null }));
+        if (input.files?.length && picker) {
+          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);
+          }
+        }
+        input.value = "";
+        view.focus();
+      });
+      input.addEventListener("cancel", () => view.dispatch(view.state.tr.setMeta(mediaKey, { picker: null })));
+      const onClick = (e) => {
+        const b = e.target.closest?.(".page-upload-btn");
+        if (!b) return;
+        e.preventDefault();
+        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);
+      };
+      view.dom.addEventListener("click", onClick);
+      return {
+        destroy() {
+          view.dom.removeEventListener("click", onClick);
+          const rt = runtime.get(view);
+          runtime.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();
+        },
+      };
+    },
+    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), {
+          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 ?? [])];
+        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);
+      },
+      handleDrop(view, event, _slice, moved) {
+        const files = [...(event.dataTransfer?.files ?? [])];
+        if (moved || !files.length) return false;
+        const hit = view.posAtCoords({ left: event.clientX, top: event.clientY });
+        if (!hit) return false;
+        const ents = outline(view.state.doc);
+        const i = Math.min(view.state.doc.resolve(hit.pos).index(0), ents.length - 1);
+        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 });
+      },
+    },
+  });
+}
+
+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 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; });
+  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();
+  return true;
+}