hecks 3.10.0 → 3.11.0

data/lib/hecks/projections/site/cms_editor/templates/src/ui/body_widget.js.tmpl

@@ -1,282 +0,0 @@
-__BANNER__
-
-// The rich-text widget, run in the browser. It edits the domain's own body tree: the surface holds
-// the HTML `bodyToHtml` writes, and after every change `htmlToBody` reads it back and the result is
-// written into hidden inputs named by dotted path, which is how every other value object and list in
-// the form is posted. No editor format is kept or sent. Pasted or dropped HTML goes through
-// `htmlToBodyWithNotes`, so whatever the body cannot hold is reduced and said so in the notes line.
-import { ALIGNS, MAX_DEPTH, MAX_INDENT, bodyToFields, bodyToHtml, esc, fieldsToInputs, safeHref, spansToHtml } from "./body_model.js";
-import { htmlToBodyWithNotes } from "./body_parse.js";
-
-const KIND_TAGS = { paragraph: "p", heading1: "h1", heading2: "h2", heading3: "h3", heading4: "h4", quote: "blockquote" };
-
-const BLOCK_CHOICES = [
-  ["paragraph", "Paragraph"], ["heading1", "Heading 1"], ["heading2", "Heading 2"], ["heading3", "Heading 3"], ["heading4", "Heading 4"],
-  ["quote", "Quote"], ["bullet_list", "Bulleted list"], ["numbered_list", "Numbered list"],
-];
-
-const BUTTONS = [
-  ["bold", "B", "Bold (Ctrl+B)"], ["italic", "I", "Italic (Ctrl+I)"], ["underline", "U", "Underline (Ctrl+U)"],
-  ["strike", "S", "Strike-through (Ctrl+Shift+X)"], ["code", "</>", "Code (Ctrl+E)"], ["link", "Link", "Link (Ctrl+K)"],
-  ["break", "Line break", "Line break (Shift+Enter)"], ["left", "Left", "Align left"], ["center", "Center", "Align center"],
-  ["right", "Right", "Align right"], ["justify", "Justify", "Justify"], ["outdent", "Outdent", "Outdent"], ["indent", "Indent", "Indent"],
-  ["shallower", "Item up", "Move the list item up a level (Shift+Tab)"], ["deeper", "Item down", "Move the list item down a level (Tab)"],
-  ["itemkind", "Item kind", "Make the list item bulleted or numbered"], ["image", "Image", "Insert an image"], ["divider", "Divider", "Insert a divider"],
-];
-
-const COMMANDS = { bold: "bold", italic: "italic", underline: "underline", strike: "strikeThrough" };
-
-const placeholdered = (html) => html.replace(/<(p|h[1-4]|blockquote|li)((?: [^>]*)?)><\/\1>/g, "<$1$2><br></$1>");
-
-function mount(root) {
-  const surface = root.querySelector("[data-surface]");
-  const fields = root.querySelector("[data-fields]");
-  const notes = root.querySelector("[data-notes]");
-  const name = root.dataset.name;
-  const picker = root.querySelector("[data-block-kind]");
-
-  const say = (messages) => {
-    notes.textContent = messages.length ? `Pasted content was adjusted to fit: ${messages.join("; ")}.` : "";
-  };
-
-  const lock = () => {
-    for (const figure of surface.querySelectorAll("figure")) figure.setAttribute("contenteditable", "false");
-  };
-
-  const sync = () => {
-    const { body } = htmlToBodyWithNotes(surface.innerHTML);
-    fields.innerHTML = fieldsToInputs(bodyToFields(body, name));
-  };
-
-  const blockOf = () => {
-    const sel = window.getSelection();
-    let node = sel && sel.anchorNode;
-    while (node && node.parentNode !== surface) node = node.parentNode;
-    return node && node.nodeType === 1 ? node : null;
-  };
-
-  const itemOf = () => {
-    let node = window.getSelection()?.anchorNode;
-    while (node && node !== surface && node.nodeName !== "LI") node = node.parentNode;
-    return node && node.nodeName === "LI" ? node : null;
-  };
-
-  const caretIn = (element) => {
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    range.collapse(false);
-    const sel = window.getSelection();
-    sel.removeAllRanges();
-    sel.addRange(range);
-  };
-
-  const retag = (element, tag) => {
-    const made = document.createElement(tag);
-    for (const key of ["data-align", "data-indent"]) if (element.hasAttribute(key)) made.setAttribute(key, element.getAttribute(key));
-    made.append(...element.childNodes);
-    element.replaceWith(made);
-    return made;
-  };
-
-  const listFromBlock = (block, tag) => {
-    const list = document.createElement(tag);
-    for (const key of ["data-align", "data-indent"]) if (block.hasAttribute(key)) list.setAttribute(key, block.getAttribute(key));
-    const item = document.createElement("li");
-    item.append(...block.childNodes);
-    list.append(item);
-    block.replaceWith(list);
-    return list;
-  };
-
-  const itemToBlock = (item, tag) => {
-    const list = item.parentNode;
-    const made = document.createElement(tag);
-    made.append(...item.childNodes);
-    const tail = [...list.children].slice([...list.children].indexOf(item) + 1);
-    if (tail.length) {
-      const rest = list.cloneNode(false);
-      rest.append(...tail);
-      list.after(rest);
-    }
-    list.after(made);
-    item.remove();
-    if (!list.firstElementChild) list.remove();
-    return made;
-  };
-
-  const setKind = (choice) => {
-    const block = blockOf();
-    if (!block) return;
-    const listTag = choice === "bullet_list" ? "ul" : choice === "numbered_list" ? "ol" : null;
-    const isList = block.nodeName === "UL" || block.nodeName === "OL";
-    let made;
-    if (listTag) made = isList ? retag(block, listTag) : listFromBlock(block, listTag);
-    else made = isList ? itemToBlock(itemOf() ?? block.firstElementChild, KIND_TAGS[choice]) : retag(block, KIND_TAGS[choice]);
-    if (!listTag && made.nodeName !== KIND_TAGS[choice].toUpperCase()) made = retag(made, KIND_TAGS[choice]);
-    caretIn(made);
-    sync();
-  };
-
-  const bump = (element, attribute, step, low, high) => {
-    const next = Math.min(high, Math.max(low, Number(element.getAttribute(attribute) ?? 0) + step));
-    element.setAttribute(attribute, String(next));
-    sync();
-  };
-
-  const toggleCode = () => {
-    let node = window.getSelection()?.anchorNode;
-    while (node && node !== surface && node.nodeName !== "CODE") node = node.parentNode;
-    if (node && node.nodeName === "CODE") node.replaceWith(...node.childNodes);
-    else if (!window.getSelection().isCollapsed) document.execCommand("insertHTML", false, `<code>${esc(window.getSelection().toString())}</code>`);
-    sync();
-  };
-
-  const link = () => {
-    const given = window.prompt("Link address (a path, http://, https://, mailto: or tel:). Leave empty to remove the link.", "https://");
-    if (given === null) return;
-    const href = safeHref(given.trim());
-    if (given.trim() === "") document.execCommand("unlink");
-    else if (href) document.execCommand("createLink", false, href);
-    else notes.textContent = "That address is not allowed: use a path, http://, https://, mailto: or tel:.";
-    sync();
-  };
-
-  const figureHtml = (media, alt, caption) => bodyToHtml({ blocks: [{ kind: "image", media_ref: media, alt, caption }] });
-
-  // Puts an image block in place of `figure`, or after `anchor` (the block the caret was in), or at the end.
-  const placeImage = (media, alt, caption, figure, anchor) => {
-    const holder = document.createElement("div");
-    holder.innerHTML = figureHtml(media.trim(), alt, caption);
-    const made = holder.firstElementChild;
-    made.setAttribute("contenteditable", "false");
-    if (figure) figure.replaceWith(made);
-    else if (anchor && surface.contains(anchor)) anchor.after(made);
-    else surface.append(made);
-    sync();
-  };
-
-  // Without a picture store the image is named by its media key, typed in.
-  const promptImage = (figure, anchor) => {
-    const media = window.prompt("Media key of the image", figure?.dataset.mediaRef ?? "");
-    if (!media) return;
-    const alt = window.prompt("Alt text", figure?.dataset.alt ?? "") ?? "";
-    const caption = window.prompt("Caption (optional)", figure?.dataset.caption ?? "") ?? "";
-    placeImage(media, alt, caption, figure, anchor);
-  };
-
-  // With one, the picker uploads or chooses a registered picture; its module is loaded only then.
-  const pickImage = async (figure, anchor) => {
-    const { openPicker } = await import("./media_picker.js");
-    openPicker(root, {
-      url: root.dataset.media,
-      current: figure ? { key: figure.dataset.mediaRef ?? "", alt: figure.dataset.alt ?? "", caption: figure.dataset.caption ?? "" } : null,
-      onPick: (key, alt, caption) => placeImage(key, alt, caption, figure, anchor),
-    });
-  };
-
-  const askImage = (figure) => (root.dataset.media ? pickImage(figure, blockOf()) : promptImage(figure, blockOf()));
-
-  const insertDivider = () => {
-    const rule = document.createElement("hr");
-    const block = blockOf();
-    if (block) block.after(rule);
-    else surface.append(rule);
-    sync();
-  };
-
-  const align = (value) => {
-    const block = blockOf();
-    if (!block) return;
-    if (block.getAttribute("data-align") === value) block.removeAttribute("data-align");
-    else block.setAttribute("data-align", value);
-    sync();
-  };
-
-  const itemKind = () => {
-    const item = itemOf();
-    if (!item) return;
-    const own = item.parentNode.nodeName === "OL" ? "numbered_list" : "bullet_list";
-    const other = own === "numbered_list" ? "bullet_list" : "numbered_list";
-    if (item.hasAttribute("data-list-kind")) item.removeAttribute("data-list-kind");
-    else item.setAttribute("data-list-kind", other);
-    sync();
-  };
-
-  const act = (action) => {
-    surface.focus();
-    if (COMMANDS[action]) return document.execCommand(COMMANDS[action]), sync();
-    if (ALIGNS.includes(action)) return align(action);
-    const block = blockOf();
-    const handlers = {
-      code: toggleCode, link, divider: insertDivider, itemkind: itemKind, image: () => askImage(null),
-      break: () => { document.execCommand("insertLineBreak"); sync(); },
-      indent: () => block && bump(block, "data-indent", 1, 0, MAX_INDENT), outdent: () => block && bump(block, "data-indent", -1, 0, MAX_INDENT),
-      deeper: () => itemOf() && bump(itemOf(), "data-depth", 1, 0, MAX_DEPTH), shallower: () => itemOf() && bump(itemOf(), "data-depth", -1, 0, MAX_DEPTH),
-    };
-    return handlers[action]?.();
-  };
-
-  const insertParsed = (html) => {
-    const { body, notes: found } = htmlToBodyWithNotes(html);
-    say(found);
-    const single = body.blocks.length === 1 && body.blocks[0].spans;
-    document.execCommand("insertHTML", false, single ? spansToHtml(body.blocks[0].spans) : placeholdered(bodyToHtml(body)));
-    sync();
-  };
-
-  const fromTransfer = (data) => {
-    const html = data.getData("text/html");
-    if (html) return html;
-    return data.getData("text/plain").split(/\r?\n/).map((line) => `<p>${esc(line)}</p>`).join("");
-  };
-
-  const shortcuts = (event) => {
-    if (event.key === "Tab" && itemOf()) {
-      event.preventDefault();
-      return bump(itemOf(), "data-depth", event.shiftKey ? -1 : 1, 0, MAX_DEPTH);
-    }
-    if (!(event.ctrlKey || event.metaKey) || event.altKey) return;
-    const key = event.key.toLowerCase();
-    const action = event.shiftKey ? { x: "strike" }[key] : { b: "bold", i: "italic", u: "underline", e: "code", k: "link" }[key];
-    if (action) {
-      event.preventDefault();
-      act(action);
-    }
-  };
-
-  root.querySelector("[data-toolbar]").addEventListener("mousedown", (event) => { if (event.target.tagName !== "SELECT") event.preventDefault(); });
-  root.querySelector("[data-toolbar]").addEventListener("click", (event) => { const button = event.target.closest("button[data-action]"); if (button) act(button.dataset.action); });
-  picker.addEventListener("change", () => { surface.focus(); setKind(picker.value); });
-  surface.addEventListener("input", sync);
-  surface.addEventListener("keydown", shortcuts);
-  surface.addEventListener("paste", (event) => { event.preventDefault(); insertParsed(fromTransfer(event.clipboardData)); });
-  surface.addEventListener("drop", (event) => { event.preventDefault(); insertParsed(fromTransfer(event.dataTransfer)); });
-  surface.addEventListener("click", (event) => { const figure = event.target.closest("figure"); if (figure && surface.contains(figure)) askImage(figure); });
-  surface.addEventListener("blur", () => {
-    const { body } = htmlToBodyWithNotes(surface.innerHTML);
-    surface.innerHTML = placeholdered(bodyToHtml(body));
-    lock();
-    sync();
-  });
-  root.closest("form")?.addEventListener("submit", sync);
-
-  surface.setAttribute("contenteditable", "true");
-  document.execCommand("defaultParagraphSeparator", false, "p");
-  document.execCommand("styleWithCSS", false, "false");
-  if (!surface.firstElementChild) surface.innerHTML = "<p><br></p>";
-  surface.innerHTML = placeholdered(surface.innerHTML);
-  lock();
-}
-
-/** Builds the toolbar of a widget the server rendered, and wires it. */
-function toolbar(root) {
-  const bar = root.querySelector("[data-toolbar]");
-  const options = BLOCK_CHOICES.map(([value, label]) => `<option value="${esc(value)}">${esc(label)}</option>`).join("");
-  const buttons = BUTTONS.map(([action, label, title]) => `<button type="button" data-action="${esc(action)}" title="${esc(title)}">${esc(label)}</button>`).join("");
-  bar.innerHTML = `<select data-block-kind aria-label="Block type">${options}</select>${buttons}`;
-}
-
-for (const root of document.querySelectorAll("[data-body-editor]")) {
-  toolbar(root);
-  mount(root);
-}

data/lib/hecks/projections/site/cms_editor/templates/src/ui/media_picker.js.tmpl

@@ -1,109 +0,0 @@
-__BANNER__
-
-// The picture picker the rich-text widget opens for an image block. It lists the pictures the domain
-// has registered (thumbnails come from the storage adapter's own addresses), uploads a new one by
-// button or by dropping a file, and hands the widget a media key, alt text and an optional caption.
-// Alt text is required before anything is inserted; the editor server and the domain refuse a picture
-// without one, and whatever they refuse with is shown here, next to the form. Everything the server
-// sends is put into the page as text, never as markup.
-
-const make = (tag, props = {}, ...children) => {
-  const element = Object.assign(document.createElement(tag), props);
-  element.append(...children);
-  return element;
-};
-
-const field = (label, input) => make("label", {}, label, input);
-
-async function getPictures(url) {
-  const response = await fetch(url, { headers: { Accept: "application/json" } });
-  if (!response.ok) throw new Error((await response.json().catch(() => ({}))).error ?? "The pictures could not be listed.");
-  return (await response.json()).pictures;
-}
-
-async function upload(url, file, alt) {
-  const form = new FormData();
-  form.append("alt", alt);
-  form.append("file", file);
-  const response = await fetch(url, { method: "POST", body: form, headers: { Accept: "application/json" } });
-  const answer = await response.json().catch(() => ({}));
-  if (!response.ok) throw new Error(answer.error ?? "The upload failed.");
-  return answer;
-}
-
-/** One registered picture as a button: its thumbnail, its alt text and a short key. */
-function entry(picture, choose) {
-  const image = make("img", { src: picture.url, alt: "", loading: "lazy", width: 64, height: 64 });
-  const button = make("button", { type: "button", title: picture.alt }, image, make("span", {}, picture.alt || picture.key.slice(0, 12)));
-  button.addEventListener("click", () => choose(picture, button));
-  return make("li", {}, button);
-}
-
-/**
- * Opens the picker inside `root` (the widget's element). `options.url` is the media endpoint,
- * `options.current` the figure being replaced (or null), `options.onPick(key, alt, caption)` is called
- * with the choice.
- */
-export function openPicker(root, options) {
-  root.querySelector("[data-picker]")?.remove();
-  const { url, current, onPick } = options;
-  let chosen = current && current.key ? current.key : null;
-  const list = make("ul", { className: "picker-list" });
-  const status = make("p", { className: "refusal", role: "alert", hidden: true });
-  const file = make("input", { type: "file", accept: "image/jpeg,image/png,image/webp,image/gif,image/avif" });
-  const alt = make("input", { type: "text", required: true, value: current?.alt ?? "" });
-  const caption = make("input", { type: "text", value: current?.caption ?? "" });
-  const drop = make("p", { className: "note" }, "Choose a file or drop one here. JPEG, PNG, WebP, GIF or AVIF.");
-  const insert = make("button", { type: "button" }, "Insert");
-  const cancel = make("button", { type: "button" }, "Cancel");
-  const panel = make("div", { className: "body-picker" }, make("strong", {}, "Insert a picture"), drop, field("Upload a new picture", file), make("p", { className: "note" }, "Or choose a registered picture:"), list, field("Alt text (required)", alt), field("Caption (optional)", caption), status, insert, " ", cancel);
-  panel.setAttribute("data-picker", "");
-
-  const say = (message) => {
-    status.textContent = message ?? "";
-    status.hidden = !message;
-  };
-  const close = () => panel.remove();
-
-  const choose = (picture, button) => {
-    chosen = picture.key;
-    file.value = "";
-    if (!alt.value.trim()) alt.value = picture.alt;
-    for (const other of list.querySelectorAll("button")) other.removeAttribute("aria-pressed");
-    button.setAttribute("aria-pressed", "true");
-    say(null);
-  };
-
-  const submit = async () => {
-    say(null);
-    if (!alt.value.trim()) return say("Alt text is required: describe the picture for someone who cannot see it.");
-    try {
-      const key = file.files[0] ? (await upload(url, file.files[0], alt.value.trim())).key : chosen;
-      if (!key) return say("Choose a registered picture or upload one.");
-      onPick(key, alt.value.trim(), caption.value.trim());
-      close();
-    } catch (err) {
-      say(err.message);
-    }
-  };
-
-  panel.addEventListener("dragover", (event) => event.preventDefault());
-  panel.addEventListener("drop", (event) => {
-    event.preventDefault();
-    if (event.dataTransfer.files.length) file.files = event.dataTransfer.files;
-  });
-  file.addEventListener("change", () => { chosen = null; });
-  panel.addEventListener("keydown", (event) => {
-    if (event.key !== "Enter" || event.target.tagName !== "INPUT" || event.target.type === "file") return;
-    event.preventDefault();
-    submit();
-  });
-  insert.addEventListener("click", submit);
-  cancel.addEventListener("click", close);
-
-  root.querySelector("[data-toolbar]").after(panel);
-  getPictures(url)
-    .then((pictures) => list.append(...pictures.map((picture) => entry(picture, choose))))
-    .catch((err) => say(err.message));
-  alt.focus();
-}