@charlescms/astro 0.1.0

package/src/section-editor.js

@@ -0,0 +1,437 @@
+import { registerMediaPreview, applyMediaPreviews } from "./media-preview.js";
+
+// Owns section insertion, preview placement, and deletion.
+//
+// Sections are TEMPLATE-ONLY by design: the developer ships ready-made,
+// site-styled snippets (src/charlescms/templates/), the editor picks one and it
+// is staged as a draft on the page. There is no free-form block builder — after
+// publishing, the new section is ordinary page content, and its text and images
+// are edited right on the page like everything else. One editing model, and
+// editors can never produce markup the developer didn't design.
+//
+// Section edits are staged against verified container anchors. The browser
+// preview is deliberately separate from the source operation: publishing still
+// uses the build-time entry and the server re-sanitizes the submitted HTML.
+export function createSectionEditor({
+  state,
+  sectionTemplatesData,
+  closeEditor,
+  mountPanel,
+  stageEdit,
+  renderPendingTray,
+  setToolbarStatus,
+  openRichTextInline,
+  fileToBase64,
+  safeMediaFileName,
+  isVisible,
+  escapeHtml
+}) {
+  function installSectionControls() {
+    const entries = state.sourceMap
+      .filter((entry) => entry.kind === "section-container")
+      .sort((a, b) => (a.anchors?.[0]?.outerStart || 0) - (b.anchors?.[0]?.outerStart || 0));
+    const containers = [...document.querySelectorAll("[data-charlescms-sections]")]
+      .filter((element) => !element.closest("[data-charlescms-ui]"))
+      .filter(isVisible);
+    if (entries.length !== containers.length) return;
+
+    entries.forEach((entry, index) => {
+      const container = containers[index];
+      const children = [...container.children].filter((child) => !child.closest("[data-charlescms-ui]"));
+      if (!entry.anchors?.length || children.length !== entry.anchors.length) return;
+      createGapControl(entry, container, children, 0, "before");
+      children.forEach((_, childIndex) => createGapControl(entry, container, children, childIndex, "after"));
+    });
+  }
+
+  function createGapControl(entry, container, children, childIndex, position) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.dataset.charlescmsUi = "true";
+    button.className = "charlescms-section-gap";
+    button.innerHTML = '<span aria-hidden="true">+</span><span>Add section here</span>';
+    button.setAttribute("aria-label", "Add a section at this position");
+    document.body.append(button);
+
+    const control = {
+      button,
+      entry,
+      container,
+      anchor: entry.anchors[childIndex],
+      anchorElement: children[childIndex],
+      nextElement: position === "after" ? children[childIndex + 1] || null : children[0],
+      position
+    };
+    state.sectionControls.push(control);
+    const update = () => positionGap(control);
+    button.addEventListener("click", () => openSectionPicker(control));
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    requestAnimationFrame(update);
+  }
+
+  function positionGap(control) {
+    const { button, container, anchorElement, nextElement, position } = control;
+    // While an insert is staged, all gap controls disappear: only one insert can
+    // be staged at a time, and a control hovering over the staged preview (whose
+    // height the original geometry never accounted for) only confuses.
+    const hasPendingInsert = [...state.pending.values()].some((pendingEdit) => pendingEdit.action === "insert");
+    if (hasPendingInsert || !isVisible(container) || !isVisible(anchorElement)) {
+      button.hidden = true;
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const anchorRect = anchorElement.getBoundingClientRect();
+    const nextRect = nextElement?.getBoundingClientRect();
+    const toolbarTop = state.toolbar?.getBoundingClientRect().top || window.innerHeight;
+    const y = position === "before"
+      ? anchorRect.top
+      : nextRect ? (anchorRect.bottom + nextRect.top) / 2 : anchorRect.bottom;
+    if (y < 8 || y > toolbarTop - 8 || containerRect.right < 0 || containerRect.left > window.innerWidth) {
+      button.hidden = true;
+      return;
+    }
+    button.hidden = false;
+    button.style.left = `${Math.max(12, containerRect.left)}px`;
+    button.style.top = `${y}px`;
+    button.style.width = `${Math.max(180, Math.min(containerRect.width, window.innerWidth - 24))}px`;
+  }
+
+  function openSectionPicker(control) {
+    closeEditor();
+    // A second unbuilt insertion would not have a verified source anchor yet.
+    // Requiring publish/discard keeps every pending insert deterministic.
+    if ([...state.pending.values()].some((pending) => pending.action === "insert")) {
+      setToolbarStatus("Publish or discard the staged section before adding another.");
+      return;
+    }
+    const templates = Object.values(sectionTemplatesData || {});
+    const dialog = document.createElement("div");
+    dialog.dataset.charlescmsUi = "true";
+    dialog.className = "charlescms-panel charlescms-section-picker";
+    dialog.innerHTML = `
+      <div class="charlescms-panel-header">
+        <div>
+          <div class="charlescms-kicker">Add section</div>
+          <div class="charlescms-title">Choose a section</div>
+        </div>
+        <button class="charlescms-icon-button" data-close aria-label="Close">×</button>
+      </div>
+      <p class="charlescms-panel-copy">Sections are designed to match this site. After publishing, edit their text and images right on the page.</p>
+      <div class="charlescms-template-grid">
+        ${templates.map((template) => `
+          <button type="button" class="charlescms-template-card" data-template="${escapeAttribute(template.id)}">
+            <span class="charlescms-template-preview">${template.html}</span>
+            <strong>${escapeHtml(template.label)}</strong>
+          </button>
+        `).join("")}
+      </div>
+      ${templates.length ? "" : `<p class="charlescms-content-empty">No section templates yet. A developer adds them as small HTML files in <code>src/charlescms/templates/</code>.</p>`}
+    `;
+    mountPanel(dialog, { item: { element: control.anchorElement } });
+    dialog.querySelector("[data-close]").addEventListener("click", closeEditor);
+    for (const button of dialog.querySelectorAll("[data-template]")) {
+      button.addEventListener("click", () => {
+        const template = sectionTemplatesData[button.dataset.template];
+        if (template) stageSectionInsert(control, template.html, template.label);
+      });
+    }
+  }
+
+  // For an EXISTING published section (a data-charlescms-block in the source):
+  // its inner text and images are ordinary on-page content with their own
+  // editors, so this panel only owns what the page can't — removing the whole
+  // section. (Kept under the openSectionBuilder name: it is the injected entry
+  // point the element editor routes type:"section" clicks to.)
+  function openSectionBuilder({ item = null } = {}) {
+    if (!item) return;
+    closeEditor();
+    const dialog = document.createElement("div");
+    dialog.dataset.charlescmsUi = "true";
+    dialog.className = "charlescms-panel";
+    dialog.innerHTML = `
+      <div class="charlescms-panel-header">
+        <div>
+          <div class="charlescms-kicker">Section</div>
+          <div class="charlescms-title">${escapeHtml(item.label || "Section")}</div>
+        </div>
+        <button class="charlescms-icon-button" data-close aria-label="Close">×</button>
+      </div>
+      <p class="charlescms-panel-copy">The text and images in this section are edited directly on the page — just click them. Removing deletes the whole section from the page.</p>
+      <div class="charlescms-actions">
+        <button type="button" class="charlescms-danger-button" data-delete-section>Remove section</button>
+        <button type="button" data-close>Close</button>
+      </div>
+    `;
+    mountPanel(dialog, { item });
+    for (const close of dialog.querySelectorAll("[data-close]")) close.addEventListener("click", closeEditor);
+    dialog.querySelector("[data-delete-section]").addEventListener("click", () => stageSectionDelete(item));
+  }
+
+  // The staged draft: explain its lifecycle and offer the one action the page
+  // can't — un-staging it. Editing its words/images happens after publish, on
+  // the page, like all other content.
+  function openDraftPanel(pending) {
+    closeEditor();
+    const dialog = document.createElement("div");
+    dialog.dataset.charlescmsUi = "true";
+    dialog.className = "charlescms-panel";
+    dialog.innerHTML = `
+      <div class="charlescms-panel-header">
+        <div>
+          <div class="charlescms-kicker">New section — not published yet</div>
+          <div class="charlescms-title">${escapeHtml(pending.label || "New section")}</div>
+        </div>
+        <button class="charlescms-icon-button" data-close aria-label="Close">×</button>
+      </div>
+      <p class="charlescms-panel-copy">Click any text or image in this draft to edit it — just like the rest of the page. Publish to add the section to the site.</p>
+      <div class="charlescms-actions">
+        <button type="button" class="charlescms-danger-button" data-remove-draft>Remove section</button>
+        <button type="button" data-close>Close</button>
+      </div>
+    `;
+    mountPanel(dialog, { item: { element: pending.preview } });
+    for (const close of dialog.querySelectorAll("[data-close]")) close.addEventListener("click", closeEditor);
+    dialog.querySelector("[data-remove-draft]").addEventListener("click", () => removePendingInsert(pending));
+  }
+
+  // Removing a staged insert fully un-stages it — page and pending tray return
+  // to exactly the state before "Add section".
+  function removePendingInsert(pending) {
+    state.pending.delete(pending.key);
+    pending.preview.remove();
+    closeEditor();
+    renderPendingTray();
+    repositionSectionGaps();
+    setToolbarStatus("New section removed.");
+  }
+
+  function repositionSectionGaps() {
+    for (const sectionControl of state.sectionControls) positionGap(sectionControl);
+  }
+
+  function stageSectionInsert(control, html, label) {
+    const preview = document.createElement("div");
+    preview.dataset.charlescmsPreviewBlock = "true";
+    preview.className = control.entry.sectionClass || "";
+    preview.innerHTML = sanitizeSectionPreview(html);
+    applyAstroScope(preview, control.anchorElement);
+    if (control.position === "before") control.anchorElement.before(preview);
+    else control.anchorElement.after(preview);
+
+    const pendingKey = `${control.entry.id}:insert`;
+    const item = { id: control.entry.id, element: null, fields: ["body"], type: "section", value: {}, label };
+    stageEdit(item, html, {
+      pendingKey,
+      id: control.entry.id,
+      type: "section",
+      action: "insert",
+      anchorId: control.anchor.anchorId,
+      position: control.position,
+      route: location.pathname,
+      value: html,
+      label,
+      original: "",
+      preview: { kind: "remove", element: preview }
+    });
+    // The draft stays a first-class citizen until publish: its texts and images
+    // edit exactly like the rest of the page, and clicking its frame opens the
+    // draft panel (explanation + remove).
+    const pending = { key: pendingKey, preview, control, label };
+    preview.dataset.charlescmsEditable = "true";
+    preview.charlescmsEdit = { open: () => openDraftPanel(pending), label: "✎ New section" };
+    enableDraftEditing(pending);
+    closeEditor();
+    repositionSectionGaps();
+    preview.scrollIntoView({ block: "center", behavior: "smooth" });
+    // No status override here: the pending tray already announces
+    // "1 change staged." — one consistent signal for every kind of edit.
+    renderPendingTray();
+  }
+
+  // Make the DRAFT's contents behave like any other page content: headings and
+  // paragraphs open the same inline rich-text editor, images open a replace
+  // panel. The difference is invisible to the editor: instead of staging a
+  // source edit, saves are absorbed into the pending insert's HTML (the draft's
+  // single source of truth) via syncDraft.
+  function enableDraftEditing(pending) {
+    const texts = pending.preview.querySelectorAll("h2, h3, h4, p, li, blockquote, figcaption");
+    texts.forEach((element, index) => {
+      element.dataset.charlescmsEditable = "true";
+      element.charlescmsEdit = {
+        label: "✎ Edit text",
+        open: () => openRichTextInline({
+          id: `${pending.key}:draft:${index}`,
+          element,
+          fields: ["text"],
+          type: "richtext",
+          value: { text: element.innerHTML },
+          label: pending.label,
+          draftSave: (html) => {
+            element.innerHTML = html;
+            syncDraft(pending);
+            renderPendingTray();
+          }
+        })
+      };
+    });
+    for (const image of pending.preview.querySelectorAll("img")) {
+      image.dataset.charlescmsEditable = "true";
+      image.charlescmsEdit = { label: "⤢ Replace image", open: () => openDraftImagePanel(image, pending) };
+    }
+  }
+
+  // Re-serialize the draft DOM back into the pending insert. Editor-only
+  // attributes (bindings, Astro style scopes, contenteditable leftovers) AND
+  // editor-only classes (charlescms-editing, charlescms-pm, …) are stripped so the
+  // published source stays clean static markup. Leaving the editing class behind
+  // also made the element read as "already editing" and silently uneditable.
+  function syncDraft(pending) {
+    const clone = pending.preview.cloneNode(true);
+    for (const node of [clone, ...clone.querySelectorAll("*")]) {
+      // A previewed image shows a blob URL; restore the committed path before
+      // serializing so the source never gets a blob: URL.
+      const mediaPath = node.getAttribute?.("data-charlescms-media-path");
+      if (mediaPath) node.setAttribute("src", mediaPath);
+      for (const attribute of [...node.attributes]) {
+        if (/^data-(?:charlescms|astro)-/.test(attribute.name) || attribute.name === "contenteditable" || attribute.name === "spellcheck") {
+          node.removeAttribute(attribute.name);
+        }
+      }
+      if (node.classList?.length) {
+        for (const cls of [...node.classList]) {
+          if (cls.startsWith("charlescms-")) node.classList.remove(cls);
+        }
+        if (!node.classList.length) node.removeAttribute("class");
+      }
+    }
+    const html = clone.innerHTML.trim();
+    const staged = state.pending.get(pending.key);
+    if (staged) staged.value = html;
+  }
+
+  function openDraftImagePanel(image, pending) {
+    closeEditor();
+    const dialog = document.createElement("div");
+    dialog.dataset.charlescmsUi = "true";
+    dialog.className = "charlescms-panel";
+    dialog.innerHTML = `
+      <div class="charlescms-panel-header">
+        <div>
+          <div class="charlescms-kicker">New section — image</div>
+          <div class="charlescms-title">Replace image</div>
+        </div>
+        <button class="charlescms-icon-button" data-close aria-label="Close">×</button>
+      </div>
+      <label>Alt text
+        <input data-draft-alt value="${escapeAttribute(image.getAttribute("alt") || "")}">
+      </label>
+      <label>Upload replacement
+        <input type="file" accept="image/*" data-draft-upload>
+      </label>
+      <div class="charlescms-actions"><button type="button" data-close>Cancel</button><button type="button" data-draft-save>Save</button></div>
+    `;
+    mountPanel(dialog, { item: { element: image } });
+    for (const close of dialog.querySelectorAll("[data-close]")) close.addEventListener("click", closeEditor);
+    dialog.querySelector("[data-draft-upload]").addEventListener("change", async (event) => {
+      const file = event.target.files?.[0];
+      if (!file || !state.connector) return;
+      event.target.disabled = true;
+      try {
+        const name = `${Date.now()}-${safeMediaFileName(file.name || "section-image.bin")}`;
+        // The upload commits immediately (like every media upload); the dev
+        // server mirrors it locally so the draft preview shows it right away.
+        await state.connector.putBase64(`public/uploads/${name}`, await fileToBase64(file), { message: `Upload media: public/uploads/${name}` });
+        image.src = `/uploads/${name}`;
+        registerMediaPreview(`/uploads/${name}`, file);
+        applyMediaPreviews(pending.preview);
+        syncDraft(pending);
+        renderPendingTray();
+      } catch (error) {
+        setToolbarStatus(error.message || "Upload failed.");
+      } finally {
+        event.target.disabled = false;
+      }
+    });
+    dialog.querySelector("[data-draft-save]").addEventListener("click", () => {
+      image.setAttribute("alt", dialog.querySelector("[data-draft-alt]").value);
+      syncDraft(pending);
+      renderPendingTray();
+      closeEditor();
+    });
+  }
+
+  function stageSectionDelete(item) {
+    if (!item || !window.confirm("Delete this CMS section from the page preview?")) return;
+    state.pending.set(`${item.id}:delete`, {
+      id: item.id,
+      type: "section",
+      action: "delete",
+      route: location.pathname,
+      value: {},
+      label: item.label,
+      original: item.value.body,
+      item,
+      originalValue: cloneValue(item.value),
+      preview: { kind: "hide", element: item.element }
+    });
+    item.element.hidden = true;
+    closeEditor();
+    renderPendingTray();
+    setToolbarStatus(`${state.pending.size} change${state.pending.size === 1 ? "" : "s"} staged.`);
+  }
+
+  return { installSectionControls, openSectionBuilder };
+}
+
+// Inserted previews must inherit Astro's scoped-style attributes from their
+// sibling, or scoped CSS wouldn't apply and the draft would look unstyled.
+function applyAstroScope(element, reference) {
+  const scopeAttributes = [...(reference?.attributes || [])]
+    .map((attribute) => attribute.name)
+    .filter((name) => name.startsWith("data-astro-cid-"));
+  for (const node of [element, ...element.querySelectorAll("*")]) {
+    for (const name of scopeAttributes) node.setAttribute(name, "");
+  }
+}
+
+function sanitizeSectionPreview(html) {
+  const template = document.createElement("template");
+  template.innerHTML = String(html || "");
+  const allowed = new Set(["h2", "h3", "h4", "p", "ul", "ol", "li", "blockquote", "figure", "figcaption", "img", "a", "hr", "strong", "em", "code", "br"]);
+  for (const node of [...template.content.querySelectorAll("*")]) {
+    const tag = node.tagName.toLowerCase();
+    if (!allowed.has(tag)) {
+      node.replaceWith(...node.childNodes);
+      continue;
+    }
+    for (const attribute of [...node.attributes]) {
+      const safe = attribute.name === "class"
+        || attribute.name === "title"
+        || (tag === "a" && attribute.name === "href" && isSafeClientUrl(attribute.value))
+        || (tag === "img" && ["src", "alt"].includes(attribute.name) && (attribute.name !== "src" || isSafeClientUrl(attribute.value)));
+      if (!safe) node.removeAttribute(attribute.name);
+    }
+  }
+  return template.innerHTML;
+}
+
+function isSafeClientUrl(value) {
+  const stripped = Array.from(String(value ?? "")).filter((character) => character.charCodeAt(0) > 0x20).join("");
+  const scheme = stripped.match(/^([a-zA-Z][a-zA-Z0-9+.-]*):/);
+  return !scheme || ["http:", "https:", "mailto:", "tel:"].includes(`${scheme[1].toLowerCase()}:`);
+}
+
+function cloneValue(value) {
+  return JSON.parse(JSON.stringify(value || {}));
+}
+
+function escapeAttribute(value) {
+  return String(value).replace(/[&<>"']/g, (character) => ({
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;"
+  })[character]);
+}