@panphora/clayjs 1.16.0 → 1.18.0

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/mention-picker.js

@@ -0,0 +1,99 @@
+// The people picker the @ command draws: one listbox at the caret, outside the saved
+// article and never in it. It is built from the editor's own menu markup, so it needs no
+// stylesheet of its own, and it takes no focus: the caret and the typed query stay in the
+// document, and the active row is announced through the editor's aria-activedescendant as
+// the slash menu does. A name is only ever text.
+export const PICKER = "page-mention-picker";
+export const OPTION = "page-menu-item";
+const EMPTY = "No people to mention";
+
+let count = 0;
+
+// The people a picker may offer: the ones the document already names, with the host's live
+// list laid over them by id, so a renamed person is shown under the name the host answers
+// with. Nothing is invented when the host has no list.
+export function peopleFrom(saved = [], allowed = null) {
+  const byId = new Map();
+  for (const person of saved ?? []) if (person && typeof person.id === "string") byId.set(person.id, person);
+  for (const person of Array.isArray(allowed) ? allowed : []) if (person && typeof person.id === "string") byId.set(person.id, person);
+  return [...byId.values()];
+}
+
+export const filterPeople = (people, query) => {
+  const q = String(query ?? "").trim().toLowerCase();
+  if (!q) return people;
+  return people.filter((person) => String(person.name ?? "").toLowerCase().includes(q));
+};
+
+// The shell takes the words a command shows, so a date command reuses the same listbox:
+// same placement, same rows, same keyboard, and its own name for what it lists.
+export function createMentionPicker({ document: doc = globalThis.document, onPick = () => {}, label = "Mention a person", empty = EMPTY } = {}) {
+  const id = `page-mentions-${++count}`;
+  const el = doc.createElement("div");
+  el.className = `page-menu ${PICKER}`;
+  el.id = id;
+  el.setAttribute("role", "listbox");
+  el.setAttribute("aria-label", label);
+  el.hidden = true;
+  let people = [];
+  let active = 0;
+
+  const draw = () => {
+    if (!people.length) {
+      const none = doc.createElement("div");
+      none.className = "page-menu-title";
+      none.textContent = empty;
+      el.replaceChildren(none);
+      return;
+    }
+    el.replaceChildren(...people.map((person, i) => {
+      const row = doc.createElement("button");
+      row.type = "button";
+      row.className = `${OPTION}${i === active ? " is-active" : ""}`;
+      row.id = `${id}-${i}`;
+      row.dataset.index = String(i);
+      row.setAttribute("role", "option");
+      row.setAttribute("aria-selected", String(i === active));
+      row.textContent = String(person.name ?? "");
+      row.addEventListener("mousedown", (event) => event.preventDefault());
+      row.addEventListener("click", () => onPick(i));
+      return row;
+    }));
+  };
+
+  // The caret the list hangs from, in the page's own placement variables: the same ones
+  // the block menu writes, so the existing menu stylesheet paints and lifts it.
+  const place = (at) => {
+    el.style.setProperty("--page-pop-x", `${at.x}px`);
+    el.style.setProperty("--page-pop-y", `${at.y}px`);
+  };
+
+  return {
+    el,
+    show: (next, at = null) => {
+      people = next;
+      active = 0;
+      draw();
+      if (at) place(at);
+      el.hidden = false;
+    },
+    move: (step) => {
+      if (!people.length) return;
+      active = (active + step + people.length) % people.length;
+      draw();
+    },
+    activeId: () => (people.length ? `${id}-${active}` : null),
+    index: () => active,
+    personAt: (i) => people[i] ?? null,
+    hide: () => {
+      el.hidden = true;
+      people = [];
+      active = 0;
+      el.replaceChildren();
+    },
+    destroy() {
+      this.hide();
+      el.remove();
+    },
+  };
+}

package/src/page/merge.js

@@ -1,6 +1,6 @@
 import { canon, renderModel, parseModel, fragmentCleaner } from "./projection.js";
 
-const TEXT = new Set(["paragraph", "heading", "list_item", "callout", "code_block", "toggle"]);
+const TEXT = new Set(["paragraph", "heading", "list_item", "callout", "quote", "code_block", "toggle"]);
 const same = (a, b) => canon(a) === canon(b);
 
 function inlineOf(item, doc) {

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;