@panphora/clayjs 1.16.0 → 1.18.0

package/src/page/format-gate.js

@@ -29,6 +29,9 @@
 // lands between `capabilities()` and `activate()` is refused rather than missed.
 
 import { PAGE_FORMAT, PAGE_FORMAT_EXTENSION, PAGE_FORMAT_UPGRADE, formatCapability, notePageFormatFloor, pageFormatDecision, pageFormatFloor } from "./format-level.js";
+import { registerUnsavedState } from "../lib/unsaved-state.js";
+
+const PENDING_COMMAND = "page-format-command";
 
 const UPGRADE_MESSAGE = "This document uses a newer page format; update the editor in the other tabs to keep writing";
 
@@ -46,6 +49,10 @@ export function createFormatGate({
   let floor = 0;
   let pending = null;
   let lanePending = false;
+  let laneReceipt = null;
+  let laneAsked = false;
+  let laneJoin = Promise.resolve(false);
+  let laneJoining = null;
   let disposed = false;
 
   // The floor this gate knows the document at. A save or a room answer can tell
@@ -54,9 +61,22 @@ export function createFormatGate({
   function note(level) {
     floor = Math.max(floor, formatCapability(level));
     notePageFormatFloor(floor);
+    if (floor >= PAGE_FORMAT) requestLane();
     return floor;
   }
 
+  // A raised floor is one lane switch per tab, however this tab learned of it:
+  // its own accepted save (activateNow joins with that receipt), another tab's
+  // write that came in with the document, or a relay's meta. A switch the lane
+  // has not accepted yet stays pending, and the retry path covers it.
+  function requestLane() {
+    if (laneAsked || disposed) return laneJoin;
+    laneAsked = true;
+    lanePending = true;
+    laneJoin = joinLane(null);
+    return laneJoin;
+  }
+
   async function read() {
     try {
       const answer = await host.read();
@@ -88,7 +108,10 @@ export function createFormatGate({
     if (disposed) return { status: "disposed", retry: false };
     if (!(await supportedHere())) return { status: "unsupported-host", code: "page-format-unsupported", extension: PAGE_FORMAT_EXTENSION };
     await read();
-    if (floor >= PAGE_FORMAT) return { status: "active", floor };
+    if (floor >= PAGE_FORMAT) {
+      await requestLane();
+      return { status: "active", floor };
+    }
     const admitted = await admittance();
     const early = pageFormatDecision({ floor, required: PAGE_FORMAT, capability, admitted });
     if (!early.ok) return upgrade(early.minimum);
@@ -106,28 +129,45 @@ export function createFormatGate({
     if (disposed) {
       // The save was accepted, so the document is at floor 1 either way; this
       // tab is gone and must not act on it.
+      laneAsked = true;
       note(PAGE_FORMAT);
       return { status: "disposed", retry: false };
     }
+    laneAsked = true;
     note(PAGE_FORMAT);
     lanePending = true;
-    await joinLane(answer.receipt ?? null);
-    return { status: "active", floor, receipt: answer.receipt ?? null };
+    laneReceipt = answer.receipt ?? null;
+    await joinLane(laneReceipt);
+    return { status: "active", floor, receipt: laneReceipt };
   }
 
   // Joining the new lane scope happens after the receipt is accepted, and only
   // then: an interrupted switch leaves this tab on floor 0's scope with every
-  // store intact and the switch still pending, never a lane it cannot cover.
+  // store intact and the switch still pending, never a lane it cannot cover. The
+  // receipt is kept, so the retry of a refused switch is covered by the same write.
   async function joinLane(receipt) {
     if (!lane || !lanePending) return false;
+    if (laneJoining) return laneJoining;
+    const covering = receipt ?? laneReceipt;
+    laneJoining = (async () => {
+      try {
+        // The receipt is what says the pending work went with an accepted write.
+        const result = await lane.switchScope(PAGE_FORMAT, { covered: Boolean(covering), receipt: covering });
+        // "already" is the lane answering that this tab is on that scope: the
+        // join held, and there is nothing left pending.
+        if (result && (result.status === "switched" || result.status === "already")) {
+          lanePending = false;
+          laneReceipt = null;
+          return true;
+        }
+      } catch {}
+      return false;
+    })();
     try {
-      const result = await lane.switchTo({ floor: PAGE_FORMAT, receipt });
-      if (result && result.status === "switched") {
-        lanePending = false;
-        return true;
-      }
-    } catch {}
-    return false;
+      return await laneJoining;
+    } finally {
+      laneJoining = null;
+    }
   }
 
   function activate() {
@@ -150,16 +190,25 @@ export function createFormatGate({
     // same attempt, and a retry after a failure starts a new one.
     activate,
     // A new-format command: capture what it applies to, ask the gate, and apply
-    // only when activation succeeded and nothing moved underneath it.
+    // only when activation succeeded and nothing moved underneath it. While it waits on
+    // activation the work is unsaved and belongs to the person who asked for it: the
+    // exit asks the unsaved-state registry, and this command answers to its own name
+    // until it applies or fails, so an exit is refused rather than committing and
+    // disposing the editor underneath it.
     async run(command) {
       const stamp = { revision: revision(), installed: installed() };
-      const result = await activate();
-      if (result.status !== "active") return result;
-      if (disposed) return { status: "disposed", retry: false };
-      if (revision() !== stamp.revision || installed() !== stamp.installed) {
-        return { status: "retry", code: "format-gate-stale", retry: true };
+      const unsaved = registerUnsavedState({ id: PENDING_COMMAND, isPending: () => true });
+      try {
+        const result = await activate();
+        if (result.status !== "active") return result;
+        if (disposed) return { status: "disposed", retry: false };
+        if (revision() !== stamp.revision || installed() !== stamp.installed) {
+          return { status: "retry", code: "format-gate-stale", retry: true };
+        }
+        return { status: "applied", floor, result: await command?.apply?.(stamp) };
+      } finally {
+        unsaved.dispose();
       }
-      return { status: "applied", floor, result: await command?.apply?.(stamp) };
     },
     // Retry what is still pending: a lane switch whose receipt is in hand, or an
     // activation that failed on the wire. Unsaved work is never part of this.
@@ -173,6 +222,7 @@ export function createFormatGate({
     dispose() {
       disposed = true;
       lanePending = false;
+      laneReceipt = null;
       return { status: "disposed" };
     },
   };

package/src/page/format-host.js

@@ -0,0 +1,71 @@
+// The production host adapter behind the format gate: the floor the document is
+// already at, the host's own admission answer, and the one explicit save that
+// raises it.
+//
+// The host is the authority, so `capabilities()` answers nothing here: the editors
+// admitted to the document are checked under its admission/write lock when the save
+// carrying the marker arrives, which is the check no registration can race. A save
+// refused there reports `page-format-upgrade-required` like any other refusal, and
+// this tab stays at the floor it already knew.
+//
+// Nothing is noted before the host answers: `notePageFormatFloor` runs when the gate
+// accepts the activation, so a refusal leaves every later save at floor 0.
+
+import { PAGE_FORMAT, PAGE_FORMAT_META, PAGE_FORMAT_UPGRADE, knownPageFormatFloor, pageFormatFloor } from "./format-level.js";
+import { hostPageFormat } from "../core/host-meta.js";
+
+const FAILED = "page-format-activation-failed";
+
+// The document's own marker, as it was served. A tab that joined a document already
+// at floor 1 must not ask to activate it again.
+function servedFloor() {
+  const tag = document.querySelector(`meta[name="${PAGE_FORMAT_META}"]`);
+  return tag ? pageFormatFloor(tag.outerHTML) : 0;
+}
+
+// The editor's own explicit save, fetched when a floor is really raised: a tab that
+// never uses a newer format never downloads the lane to raise one.
+const savePage = async (options) => (await import("../core/save.js")).savePageForce(() => {}, options);
+
+// A forced save asked for while another is on the wire is skipped rather than queued.
+// The activation is the person's own request, so it waits for the save ahead of it to
+// settle and asks again, instead of answering "try again" for a save it never sent.
+const SKIPPED_ATTEMPTS = 4;
+const SKIPPED_WAIT_MS = 10000;
+const skippedBehindSave = (result) => result?.ok === false && result?.msgType === "skipped" && /in progress/i.test(result?.msg ?? "");
+const saveSettles = async () => {
+  const { isSaveInProgress } = await import("../core/save-core.js");
+  const until = Date.now() + SKIPPED_WAIT_MS;
+  while (isSaveInProgress() && Date.now() < until) await new Promise((r) => setTimeout(r, 50));
+};
+
+export function createFormatHost({
+  save = savePage,
+  settles = saveSettles,
+  supported = () => hostPageFormat().then((floor) => floor === PAGE_FORMAT),
+} = {}) {
+  return {
+    read() {
+      return { floor: Math.max(knownPageFormatFloor(), servedFloor()), revision: null };
+    },
+    capabilities() {
+      return [];
+    },
+    supported,
+    async activate({ floor = PAGE_FORMAT } = {}) {
+      let result;
+      try {
+        result = await save({ pageFormatFloor: floor });
+        for (let attempt = 1; attempt < SKIPPED_ATTEMPTS && skippedBehindSave(result); attempt += 1) {
+          await settles();
+          result = await save({ pageFormatFloor: floor });
+        }
+      } catch (error) {
+        return { accepted: false, code: error?.code ?? FAILED };
+      }
+      if (result?.ok) return { accepted: true, revision: null, receipt: result.receipt ?? result.etag ?? null };
+      if (result?.code === PAGE_FORMAT_UPGRADE) return { accepted: false, code: PAGE_FORMAT_UPGRADE };
+      return { accepted: false, code: result?.code ?? FAILED };
+    },
+  };
+}

package/src/page/format-native-commands.js

@@ -0,0 +1,158 @@
+// The commands behind the four formats this release adds — underline, text color,
+// highlight and the quote block — and the rows the More menu offers them by.
+//
+// Nothing here is on the ready path. Every caller loads this module the first
+// time one of the commands runs, so reading and drawing an existing document
+// never fetches a transaction, a palette or a refusal notice.
+//
+// Every command that writes one of them goes through runFormat, which is the
+// editor's own format gate: nothing is applied and no descriptor is written
+// unless the gate answered "applied".
+import { history } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+import { PALETTE, markable } from "./format-native.js";
+import { announce } from "./announce.js";
+import toast from "../ui/toast-lazy.js";
+import { openPageMenu } from "./chrome.js";
+
+// blocks.js's STEP, read here rather than imported from it: this module is part
+// of the projection's graph, and blocks.js reads the projection's constants as it
+// loads. A command of ours is one undo item by itself, like every other command.
+const STEP = "page-step";
+const asStep = (tr) => history.closeHistory(tr).setMeta(STEP, true);
+
+const holds = (mark, attrs) => !!mark && Object.keys(mark.type.attrs).every((name) => mark.attrs[name] === attrs[name]);
+
+function toggle(view, type, attrs) {
+  const st = view.state;
+  const { from, to, empty, $from } = st.selection;
+  const tr = st.tr;
+  if (empty) {
+    if (holds(type.isInSet(st.storedMarks || $from.marks()), attrs)) tr.removeStoredMark(type);
+    else tr.addStoredMark(type.create(attrs));
+  } else {
+    let all = true;
+    st.doc.nodesBetween(from, to, (node) => {
+      if (all && node.isText && !holds(type.isInSet(node.marks), attrs)) all = false;
+    });
+    if (all) tr.removeMark(from, to, type);
+    else tr.addMark(from, to, type.create(attrs));
+  }
+  view.dispatch(asStep(tr));
+  return true;
+}
+
+function remove(view, type) {
+  const st = view.state;
+  const tr = st.tr;
+  if (st.selection.empty) tr.removeStoredMark(type);
+  else tr.removeMark(st.selection.from, st.selection.to, type);
+  view.dispatch(asStep(tr));
+  return true;
+}
+
+// The gate, in one place: an editor mounted without one cannot write a floor-1
+// format, and a refusal leaves the content exactly as it was.
+export function runFormat(view, apply) {
+  const run = view.runFormatCommand;
+  if (typeof run !== "function") return Promise.resolve({ status: "unsupported-host", code: "page-format-unsupported", retry: false });
+  return run(apply);
+}
+
+// A mark command: toggle it on the selection, or with reset take it off. A
+// selection the mark cannot reach is refused before the gate is asked, so a code
+// block never raises the document's floor.
+export function formatMark(view, name, attrs = {}, { reset = false } = {}) {
+  const type = schema.marks[name];
+  if (!type) return Promise.resolve({ status: "refused", code: "unsupported-format" });
+  if (!view.editable) return Promise.resolve({ status: "refused", code: "not-editable" });
+  if (!markable(view.state, type)) return Promise.resolve({ status: "refused", code: "mark-not-allowed" });
+  return runFormat(view, () => (reset ? remove(view, type) : toggle(view, type, attrs)));
+}
+
+// The four formats pasted in from elsewhere are floor-1 content too: the slice is
+// inserted only once the gate answered applied. A refusal keeps the text and
+// writes no descriptor; a selection that moved while the answer came back takes
+// neither, and neither does a document that changed underneath the paste: the
+// plain fallback would write at a place a peer edit has moved, so the text stays
+// in the clipboard instead.
+export function pasteFormats(view, slice, from, to) {
+  const before = view.state.doc;
+  const place = () => {
+    if (view.isDestroyed) return false;
+    const st = view.state;
+    if (st.selection.from !== from || st.selection.to !== to) return false;
+    view.dispatch(st.tr.replaceSelection(slice).scrollIntoView());
+    return true;
+  };
+  const plain = () => {
+    const text = slice.content.textBetween(0, slice.content.size, "\n", " ");
+    if (!view.isDestroyed && text && view.state.doc === before) view.dispatch(view.state.tr.insertText(text, from, to));
+    return false;
+  };
+  runFormat(view, place).then((result) => {
+    if (result?.status === "applied") return;
+    refuse(view, result?.message ?? "That format isn\u2019t available here.");
+    plain();
+  }, plain);
+}
+
+// The typed `" ` shortcut: the paragraph the reader is typing in became a quote,
+// and the space that typed it goes with it. A refusal puts the space back as
+// itself, so the typed character is never swallowed.
+export function quoteFromSpace(plugin, view, { at, from, to }, plain) {
+  const convert = () => {
+    if (view.isDestroyed) return false;
+    const now = view.state;
+    const current = now.doc.nodeAt(at);
+    if (!current || current.type !== schema.nodes.paragraph || current.textContent !== '"') return plain();
+    const tr = now.tr.delete(at + 1, at + 2).setNodeMarkup(at, schema.nodes.quote, current.attrs);
+    view.dispatch(asStep(tr.setMeta(plugin, { transform: tr, from, to, text: " " })));
+    return true;
+  };
+  view.runFormatCommand(convert).then((result) => {
+    if (result?.status === "applied") return;
+    if (result) refuse(view, refusalText(result));
+    plain();
+  }, plain);
+}
+
+// The More menu's rows: the underline command, the palette of a color mark and
+// the notice a refusal raises. The palette is fixed: nine keys and the way back
+// to none, and no arbitrary color picker is offered.
+const CANNOT_MARK = "This text can\u2019t take that format.";
+const refusalText = (result) => (result.status === "upgrade-required" ? result.message : result.code === "mark-not-allowed" ? CANNOT_MARK : "That format isn\u2019t available here.");
+
+// A refusal is said to a screen reader and shown, since a sighted reader whose
+// click did nothing otherwise has no way to know why.
+export const refuse = (view, text) => {
+  if (view.isDestroyed) return;
+  announce(view, text);
+  toast(text, "error");
+};
+
+const notice = (view, result) => {
+  if (result?.status !== "applied") refuse(view, refusalText(result ?? {}));
+};
+
+export const runNative = (view, name, attrs = {}, options = undefined) => {
+  formatMark(view, name, attrs, options).then((result) => notice(view, result));
+};
+
+// A block command from a later format, like the turn into a quote: the write asks
+// the gate first, and a refusal is a notice rather than a change.
+export const gateTurn = (view, turn) => {
+  runFormat(view, turn).then((result) => notice(view, result));
+};
+
+// The palette of one color mark, as its own short menu: the nine fixed keys and
+// the way back to none.
+export function nativeMenu(view, name, anchor) {
+  if (name === "underline") return runNative(view, name);
+  const colorLabel = name === "text_color" ? "Text" : "Highlight";
+  const noneLabel = name === "text_color" ? "Automatic" : "No highlight";
+  return openPageMenu(view, anchor, [
+    ...PALETTE.map((color) => ({ key: `${name}_${color}`, label: `${colorLabel}: ${color[0].toUpperCase()}${color.slice(1)}`, icon: "\u25CF", run: (v) => runNative(v, name, { color }) })),
+    { key: `${name}_none`, label: noneLabel, icon: "\u00d7", run: (v) => runNative(v, name, {}, { reset: true }) },
+  ]);
+}

package/src/page/format-native.js

@@ -0,0 +1,42 @@
+// The four formats this release adds: underline, text color, highlight and the
+// quote block.
+//
+// Each is written as the named descriptor an older runtime already keeps as an
+// opaque mark, `x["text_color",{"color":"red"}]`, so R reads back exactly what F
+// wrote. The palette is fixed and its keys are the only colors a descriptor may
+// name: one naming any other color stays opaque rather than being read as a
+// style, and no command accepts arbitrary CSS.
+//
+// This half is the reading one: what the schema, inline.js and the projection need
+// to read a descriptor back and draw it. The commands that write one are in
+// format-native-commands.js, which a page loads the first time one runs.
+export const NATIVE_NAMES = new Set(["underline", "text_color", "highlight"]);
+
+export const PALETTE = ["gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"];
+const COLORS = new Set(PALETTE);
+
+// The descriptor attrs of a native mark, or null when this name and these attrs
+// are not one of the formats this runtime writes.
+export function nativeAttrs(name, attrs) {
+  const plain = attrs !== null && typeof attrs === "object" && !Array.isArray(attrs);
+  if (name === "underline") return plain && Object.keys(attrs).length === 0 ? {} : null;
+  if (name === "text_color" || name === "highlight") {
+    const keys = plain ? Object.keys(attrs) : [];
+    return keys.length === 1 && keys[0] === "color" && COLORS.has(attrs.color) ? { color: attrs.color } : null;
+  }
+  return null;
+}
+
+// Whether this selection holds text the mark may be added to: a code block takes
+// no marks, and a block selection is not text at all. It stays here, beside the
+// reading half, because the keyboard decides whether Mod-u is its own before any
+// command is loaded.
+export function markable(st, type) {
+  const { $from, $to, empty } = st.selection;
+  if (empty) return $from.parent.type.allowsMarkType(type);
+  let ok = false;
+  st.doc.nodesBetween($from.pos, $to.pos, (node, _at, parent) => {
+    if (!ok && node.isText && parent?.type.allowsMarkType(type)) ok = true;
+  });
+  return ok;
+}

package/src/page/image-actions.js

@@ -0,0 +1,64 @@
+// The image menu's own actions: the alt text field and the width presets, reached
+// by the chrome's actions menu. Its own module, so a document that never sets
+// either downloads neither.
+import { asStep } from "./blocksel.js";
+
+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;
+}