@panphora/clayjs 1.25.0 → 1.26.0

package/src/plugins/quickcrop.js

@@ -13,6 +13,9 @@ import { bevelDialog, dismissOf, keepFocusIn } from "../ui/bevel-dialog.js";
 import { bevelButton } from "../ui/bevel-controls.js";
 import { installSkin } from "../ui/vendor-skin.js";
 import { CSS as SKIN, ROOTS as SKIN_ROOTS } from "../ui/skins/quickcrop.js";
+import { resolveTheme } from "../ui/theme.js";
+import { themed, partRules, markParts } from "../ui/theme-parts.js";
+import { style } from "../lib/hostile-css.js";
 
 const WIDTH = 844;
 
@@ -24,80 +27,136 @@ function isThemodal(m) {
     typeof m.onYes === "function" && "html" in m;
 }
 
-export const bevelCropAdapter = {
-  // The stage has to fit inside the panel: the overlay's 16px side inset, the panel's
-  // 1px border and the body's 22px padding a side; below it the header, the footer and
-  // the overlay's top inset. Widths come from clientWidth, which leaves out a classic
-  // scrollbar as the overlay does.
-  fit() {
-    const width = document.documentElement.clientWidth;
-    return {
-      width: Math.max(120, Math.min(WIDTH, width - 32) - 2 - 44),
-      height: Math.max(120, window.innerHeight - Math.min(96, window.innerHeight * 0.1) - 200),
-    };
-  },
-  open({ content, confirmLabel, onConfirm, onCancel }) {
-    const { root, overlay, panel, heading, body, footer, close } = bevelDialog({
-      zIndex: "2147483001", width: `${WIDTH}px`, closable: true, titled: true,
-    });
-    heading.textContent = "Crop image";
-    panel.setAttribute("aria-label", "Crop image");
-    body.append(content);
-    const confirm = bevelButton(confirmLabel, { variant: "primary", onClick: () => onConfirm() });
-    footer.append(confirm);
-
-    close.addEventListener("click", () => onCancel());
-    panel.addEventListener("submit", (event) => event.preventDefault());
-    let pressedOnBackdrop = false;
-    overlay.addEventListener("mousedown", (event) => { pressedOnBackdrop = event.target === overlay; });
-    overlay.addEventListener("click", (event) => {
-      if (pressedOnBackdrop && event.target === overlay) onCancel();
-      pressedOnBackdrop = false;
-    });
-    // Capture, and stopped there, so a dialog underneath (a CMS confirm through
-    // clay.modal) does not take the same key as its own: Escape cancels this crop,
-    // Tab stays inside it.
-    const onKey = (event) => {
-      if (event.key === "Tab") {
+const TITLE = "Crop image";
+
+// The frame for one crop, in the theme captured for that crop. Measuring and opening
+// build the same frame, so the stage is sized for the padding, borders, heading and
+// button the person will actually see.
+function cropFrame(theme, confirmLabel, onConfirm = null) {
+  const frame = bevelDialog({ zIndex: "2147483001", width: `${WIDTH}px`, closable: true, titled: true, theme, surface: "crop" });
+  frame.heading.textContent = TITLE;
+  frame.panel.setAttribute("aria-label", TITLE);
+  const confirm = bevelButton(confirmLabel, {
+    variant: "primary", onClick: onConfirm, theme,
+    parts: ["dialog.button", "crop.button"], labelParts: ["dialog.buttonLabel", "crop.buttonLabel"],
+  });
+  frame.footer.append(confirm);
+  return { ...frame, confirm };
+}
+
+// The stage is quickcrop's; its parts take only a page's explicit crop.* declarations,
+// so dimming and crop lines keep their contrast unless the page asks otherwise.
+function themeStage(stage, theme) {
+  if (!themed(theme)) return;
+  const paint = (el, names) => {
+    if (!el) return;
+    markParts(el, theme, names);
+    style(el, partRules(theme, names, {}));
+  };
+  paint(stage, ["crop.stage"]);
+  paint(stage.querySelector(":scope > img"), ["crop.image"]);
+  paint(stage.querySelector(".qc-dim"), ["crop.dim"]);
+  paint(stage.querySelector(".qc-box"), ["crop.selection"]);
+  for (const corner of ["nw", "ne", "sw", "se"]) paint(stage.querySelector(`.qc-handle.qc-${corner}`), ["crop.handle", `crop.handle.${corner}`]);
+}
+
+// A themed frame is measured: a hidden copy is mounted for one layout read and removed,
+// without touching focus or the scroll lock. The room left for the stage is the body's
+// inner width, and the overlay's inner height less the empty panel. The exact Bevel
+// frame keeps its fixed allowances.
+function measure(theme, confirmLabel) {
+  const { root, overlay, panel, body } = cropFrame(theme, confirmLabel);
+  root.setAttribute("aria-hidden", "true");
+  style(root, ["visibility:hidden", "pointer-events:none"]);
+  document.body.append(root);
+  try {
+    const px = (value) => parseFloat(value) || 0;
+    const o = getComputedStyle(overlay), b = getComputedStyle(body);
+    const width = body.clientWidth - px(b.paddingLeft) - px(b.paddingRight);
+    const height = overlay.clientHeight - px(o.paddingTop) - px(o.paddingBottom) - panel.offsetHeight;
+    return { width: Math.max(1, Math.floor(width)), height: Math.max(1, Math.floor(height)) };
+  } finally {
+    root.remove();
+  }
+}
+
+export function createCropAdapter({ theme = null, confirmLabel = "Crop" } = {}) {
+  return {
+    // Unthemed, the stage fits inside the panel by fixed allowances: the overlay's 16px
+    // side inset, the panel's 1px border and the body's 22px padding a side; below it the
+    // header, the footer and the overlay's top inset. Widths come from clientWidth, which
+    // leaves out a classic scrollbar as the overlay does.
+    fit() {
+      if (themed(theme)) return measure(theme, confirmLabel);
+      const width = document.documentElement.clientWidth;
+      return {
+        width: Math.max(120, Math.min(WIDTH, width - 32) - 2 - 44),
+        height: Math.max(120, window.innerHeight - Math.min(96, window.innerHeight * 0.1) - 200),
+      };
+    },
+    open({ content, confirmLabel: label, onConfirm, onCancel }) {
+      const { root, overlay, panel, body, close, confirm } = cropFrame(theme, label, () => onConfirm());
+      themeStage(content, theme);
+      body.append(content);
+
+      close.addEventListener("click", () => onCancel());
+      panel.addEventListener("submit", (event) => event.preventDefault());
+      let pressedOnBackdrop = false;
+      overlay.addEventListener("mousedown", (event) => { pressedOnBackdrop = event.target === overlay; });
+      overlay.addEventListener("click", (event) => {
+        if (pressedOnBackdrop && event.target === overlay) onCancel();
+        pressedOnBackdrop = false;
+      });
+      // Capture, and stopped there, so a dialog underneath (a CMS confirm through
+      // clay.modal) does not take the same key as its own: Escape cancels this crop,
+      // Tab stays inside it.
+      const onKey = (event) => {
+        if (event.key === "Tab") {
+          event.stopPropagation();
+          keepFocusIn(panel, event);
+          return;
+        }
+        if (event.key !== "Escape") return;
         event.stopPropagation();
-        keepFocusIn(panel, event);
-        return;
-      }
-      if (event.key !== "Escape") return;
-      event.stopPropagation();
-      onCancel();
-    };
-    document.addEventListener("keydown", onKey, true);
-
-    // The page does not scroll behind the crop, as it did not under themodal. The
-    // previous value comes back, so a modal underneath keeps its own lock.
-    const overflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-
-    let done = false;
-    const finish = () => {
-      if (done) return;
-      done = true;
-      document.removeEventListener("keydown", onKey, true);
-      document.body.style.overflow = overflow;
-      root.remove();
-    };
-    // A modal opened on top supersedes this crop the way it supersedes itself: the
-    // crop is cancelled, so its promise settles and the next crop can open.
-    dismissOf.set(root, () => { finish(); onCancel(); });
-
-    root.setAttribute("aria-hidden", "false");
-    document.body.append(root);
-    confirm.focus();
-
-    return { close: finish };
-  },
-};
+        onCancel();
+      };
+      document.addEventListener("keydown", onKey, true);
+
+      // The page does not scroll behind the crop, as it did not under themodal. The
+      // previous value comes back, so a modal underneath keeps its own lock.
+      const overflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+
+      let done = false;
+      const finish = () => {
+        if (done) return;
+        done = true;
+        document.removeEventListener("keydown", onKey, true);
+        document.body.style.overflow = overflow;
+        root.remove();
+      };
+      // A modal opened on top supersedes this crop the way it supersedes itself: the
+      // crop is cancelled, so its promise settles and the next crop can open.
+      dismissOf.set(root, () => { finish(); onCancel(); });
+
+      root.setAttribute("aria-hidden", "false");
+      document.body.append(root);
+      confirm.focus();
+
+      return { close: finish };
+    },
+  };
+}
+
+// The exact Bevel frame, for callers that want ClayJS's crop without the page's theme.
+export const bevelCropAdapter = createCropAdapter();
 
 export function quickcrop(file, options = {}) {
   const modal = options.modal ?? "auto";
   const framed = modal === "auto" || isThemodal(modal);
-  return vendorQuickcrop(file, framed ? { ...options, modal: bevelCropAdapter } : options);
+  if (!framed) return vendorQuickcrop(file, options);
+  const adapter = createCropAdapter({ theme: resolveTheme(), confirmLabel: options.labels?.confirm ?? "Crop" });
+  return vendorQuickcrop(file, { ...options, modal: adapter });
 }
 
 export default quickcrop;

package/src/plugins/richclay.js

@@ -5,9 +5,145 @@ import { installSkin } from "../ui/vendor-skin.js";
 import { CSS, ROOTS } from "../ui/skins/richclay.js";
 import { RichClay } from "../vendor/richclay.vendor.js";
 import { startsAtImport } from "../core/is-edit-mode.js";
+import { stripEphemeral } from "../lib/ephemeral.js";
+import { loadedEngine, mergeEngine } from "../sync/merge-engine.js";
 
 installSkin("richclay", CSS, { roots: ROOTS });
 
+// A field the author kept out of page undo: its own literal no-undo (not the one RichClay
+// adds while it runs), a clay="no-undo" token on it, or an ancestor region with no-undo.
+const authoredNoUndo = (node) => {
+  if (node.hasAttribute("no-undo") && !node.hasAttribute("data-richclay-runtime-no-undo")) return true;
+  if ((node.getAttribute("clay") || "").split(/\s+/).includes("no-undo")) return true;
+  const parent = node.parentElement;
+  return !!parent && window.clay?.region?.resolveRegionPolicy?.(parent)?.undoable === false;
+};
+// The editor tidies a field's source whitespace the first time it is typed in. Whitespace
+// that sits beside a block, or at the start or end of one, shows nothing, so it never
+// counts as a change: a person's first letter is one step, and the tidy is not a step of
+// its own or part of another field's.
+const BLOCK = /^(P|DIV|UL|OL|LI|H[1-6]|BLOCKQUOTE|TABLE|THEAD|TBODY|TR|TD|TH|FIGURE|FIGCAPTION|HR|SECTION|ARTICLE|ASIDE|HEADER|FOOTER|DL|DT|DD)$/;
+const isBlock = (node) => node?.nodeType === 1 && BLOCK.test(node.nodeName);
+const dropLayoutWhitespace = (root) => {
+  const walker = root.ownerDocument.createTreeWalker(root, 4);
+  const blank = [];
+  for (let text = walker.nextNode(); text; text = walker.nextNode()) {
+    if (/\S/.test(text.data) || text.parentElement?.closest("pre")) continue;
+    const parent = text.parentNode;
+    const edge = !text.previousSibling || !text.nextSibling;
+    if ((edge && (parent === root || isBlock(parent))) || isBlock(text.previousSibling) || isBlock(text.nextSibling)) blank.push(text);
+  }
+  blank.forEach((text) => text.remove());
+};
+// Ephemeral attributes (selection marks and the like) never save, so they come off a
+// copy before the comparison, as they do for every other node undo certifies.
+const savedForm = (node) => {
+  const copy = node.cloneNode(true);
+  stripEphemeral(copy);
+  dropLayoutWhitespace(copy);
+  return RichClay.savedContent(copy);
+};
+
+// Parts of a field that history does not own (editor chrome, a widget the author marked
+// no-undo) never count as a change: the sample holds a placeholder for each, and a replay
+// puts back what each one holds now.
+const UNOWNED = '[editor-ui], [clay~="editor-ui"], [no-undo]:not([data-richclay-runtime-no-undo]), [clay~="no-undo"]';
+const outermost = (root) => [...root.querySelectorAll(UNOWNED)].filter((el) => {
+  for (let at = el.parentElement; at && at !== root; at = at.parentElement) if (at.matches(UNOWNED)) return false;
+  return true;
+});
+const historyForm = (node) => {
+  const copy = node.cloneNode(true);
+  outermost(copy).forEach((el) => el.replaceWith(copy.ownerDocument.createElement("clay-kept")));
+  return savedForm(copy);
+};
+const withUnowned = (element, html) => {
+  if (!html.includes("<clay-kept")) return html;
+  const template = element.ownerDocument.createElement("template");
+  template.innerHTML = html;
+  const live = outermost(element);
+  [...template.content.querySelectorAll("clay-kept")].forEach((slot, at) => {
+    if (live[at]) slot.replaceWith(live[at].cloneNode(true));
+    else slot.remove();
+  });
+  return template.innerHTML;
+};
+
+// Undo certifies a rich field by the content it would save, so editor runtime state
+// never refuses a step and a real text change always does. A field the author marked
+// no-undo keeps its protection.
+const richForm = (node) => (!node.matches?.(RichClay.selector) || authoredNoUndo(node) ? undefined : savedForm(node));
+
+// The field's own typing is a step of the page history: the engine reads the content the
+// field would save and, on a replay, hands it back through the host write. The editor's own
+// history is off while the page owns it, so a field's Cmd+Z and its toolbar reach the same
+// stack as everything else.
+// The engine rebaselines the field right after the write, so the write must land before
+// it returns. A loaded merge engine morphs at once. The first undo asks for it, so a boot
+// pays nothing; until it lands a plain innerHTML write is exact for saved content (checked
+// in Chrome), except in a field holding editor chrome, which only the morph keeps.
+const writeInner = (root, html) => { root.innerHTML = html; };
+const morphNow = (field) => {
+  const engine = loadedEngine();
+  if (engine) return engine.morph;
+  mergeEngine().catch(() => {});
+  return field.querySelector('[editor-ui], [clay~="editor-ui"]') ? undefined : writeInner;
+};
+
+// Rich fields belong to the page history only when the page records typing: in commands
+// mode the page's history holds commands alone, and a field's own history is left to the
+// editor, which is then the only history that has the typing.
+const pageOwnsTyping = () => window.clay?.undo?.pageHistory === true && window.clay.undo.recordingMode !== "commands";
+
+const tracked = new Map();
+
+const track = (field) => {
+  const undo = window.clay?.undo;
+  if (!pageOwnsTyping() || authoredNoUndo(field)) return;
+  tracked.set(field, undo.trackContent(field, { read: historyForm, write: (element, html) => { RichClay.setSavedContent(element, withUnowned(element, html), { morph: morphNow(element) }); } }));
+  if (!loadedEngine() && field.querySelector('[editor-ui], [clay~="editor-ui"]') && typeof undo.hold === "function") {
+    const release = undo.hold();
+    mergeEngine().catch(() => {}).finally(release);
+  }
+};
+
+const untrackAll = () => {
+  for (const dispose of tracked.values()) dispose();
+  tracked.clear();
+};
+
+document.addEventListener("richclay:mount", (event) => track(event.target));
+
+// The rich form is handed to the page's undo when its session starts, rather than through
+// a shared module, so a page without undo loads nothing for it. Each undo engine is asked
+// once.
+let formedFor = null;
+const followHistory = () => {
+  const undo = window.clay?.undo;
+  if (undo?.addDurableForm && formedFor !== undo) {
+    undo.addDurableForm(richForm);
+    formedFor = undo;
+  }
+  RichClay.hostHistory = pageOwnsTyping();
+  RichClay.keepsOwnHistory = authoredNoUndo;
+  if (!RichClay.hostHistory) untrackAll();
+  else document.querySelectorAll("[data-richclay-active]").forEach(track);
+};
+
+document.addEventListener("clay:undo-session", followHistory);
+document.addEventListener("clay:undo-recording", followHistory);
+// A boot starts the undo session while its own module is still being imported, so the
+// session event can land before the loader has put `clay.undo` on the page: once every
+// plugin is attached the same answer is asked for again.
+document.addEventListener("clay:ready", followHistory);
+
+document.addEventListener("richclay:history-exhausted", (event) => {
+  const undo = window.clay?.undo;
+  if (!undo || window.clay.modeLifecycle?.canWrite?.() === false) return;
+  if (event.detail?.direction === "redo") undo.redo();
+  else undo.undo();
+});
+
 let session = null;
 
 const fault = (message, code) => Object.assign(new Error(`clay:richclay: ${message}`), { code });

package/src/plugins/sortable.js

@@ -217,15 +217,31 @@ function makeSortable(sortableElem, Sortable, record = loose) {
   // Add onsorting callback if attribute exists (fires during drag)
   const onsortingCode = sortableElem.getAttribute('onsorting');
   if (onsortingCode) {
-    options.onMove = function(evt) {
-      if (!record.admitted) return;
-      try {
-        const asyncFn = new Function(`return (async function(evt) { ${onsortingCode} })`)();
-        asyncFn.call(sortableElem, evt);
-      } catch (error) {
-        console.error('Error in onsorting execution:', error);
-      }
-    };
+    // Sortable reads onMove's return value (false cancels the move, 1 or -1 picks a
+    // side), so the handler runs synchronously and its value goes back. A handler that
+    // awaits cannot answer in time; it still runs, as an async function, and Sortable
+    // gets no answer from it.
+    // Code that awaits compiles as async: a plain function would read `await (x)` as a
+    // call to a function named await and throw on every move.
+    let onsorting = null;
+    try {
+      onsorting = /\bawait\b/.test(onsortingCode)
+        ? new Function(`return (async function(evt) { ${onsortingCode} })`)()
+        : new Function('evt', onsortingCode);
+    } catch (error) {
+      console.error('Error in onsorting compilation:', error);
+    }
+    if (onsorting) {
+      options.onMove = function(evt) {
+        if (!record.admitted) return;
+        try {
+          const answer = onsorting.call(sortableElem, evt);
+          return answer instanceof Promise ? undefined : answer;
+        } catch (error) {
+          console.error('Error in onsorting execution:', error);
+        }
+      };
+    }
   }
 
   // After a drop, run any author onsorted code, then notify reactive libraries.