@charlescms/astro 0.1.0

package/src/asset-images.js

@@ -0,0 +1,130 @@
+// Makes Astro-optimized images (astro:assets) editable.
+//
+// astro:assets runs <Image src={…}>/<Picture> through Astro's image pipeline, so
+// the rendered <img> points at /_image?href=… (dev) or /_astro/name.HASH.ext
+// (prod) — never the literal source path the rest of the editor rewrites. The src
+// is also usually an expression ({data.thumbnail}, an imported constant), so there
+// is no string attribute to repoint at a fresh upload. The universal, Astro-native
+// fix is therefore to replace the SOURCE asset in place: overwrite
+// src/assets/…/team1.jpg and let Astro re-optimize on the next build — exactly how
+// a developer would swap the picture. No per-site rules, works for every Astro site.
+//
+// Binding a rendered <img> back to its source file:
+//   • dev:  the source path is inside the /_image?href= URL — decode it.
+//   • prod: the optimized filename keeps the original basename (team1.HASH.webp),
+//           so it resolves through a build-time index of image basenames -> repo
+//           paths. Ambiguous basenames are omitted from the index, so a wrong file
+//           is never overwritten.
+
+const IMAGE_EXT_RE = /\.(?:png|jpe?g|gif|webp|avif|svg)$/i;
+
+// The source asset (repo-relative path) a rendered <img> was optimized from, or
+// null when it isn't an astro:assets image we can resolve. Pure, so it is unit
+// tested directly.
+export function sourceAssetForImg(img, assetIndex = {}) {
+  const raw = img.getAttribute("src") || firstSrcsetUrl(img) || "";
+  if (!raw) return null;
+
+  // dev: /_image?href=<encoded source>&w=…&f=webp
+  if (raw.includes("/_image")) {
+    try {
+      const base = globalThis.location?.origin || "http://localhost";
+      const href = new URL(raw, base).searchParams.get("href");
+      if (href) {
+        const decoded = decodeURIComponent(href).split("?")[0];
+        const match = decoded.match(/(?:^|\/)(src\/.+?\.(?:png|jpe?g|gif|webp|avif|svg))$/i);
+        if (match) return match[1];
+      }
+    } catch {
+      // fall through to the production form
+    }
+  }
+
+  // prod: /_astro/<name>.<hash>.<ext> — recover the original basename, look it up.
+  const astro = raw.match(/\/_astro\/(.+)\.[A-Za-z0-9_-]{6,}\.[a-z0-9]+(?:[?#].*)?$/i);
+  if (astro) {
+    const name = astro[1];
+    return assetIndex[name.toLowerCase()] || assetIndex[name.split(".")[0].toLowerCase()] || null;
+  }
+  return null;
+}
+
+function firstSrcsetUrl(img) {
+  // <Picture> renders <picture><source srcset/><img/></picture>; the <img> is the
+  // fallback. Prefer its src, but fall back to the first srcset candidate.
+  const srcset = img.getAttribute("srcset") || img.closest("picture")?.querySelector("source[srcset]")?.getAttribute("srcset");
+  if (!srcset) return null;
+  return srcset.split(",")[0].trim().split(/\s+/)[0] || null;
+}
+
+export function createAssetImages({ state, sourceMapData, fileToBase64, setToolbarStatus, registerAssetPreview }) {
+  const assetIndex = sourceMapData?.assetIndex || {};
+  // repoPath -> blob: URL, so a replaced image keeps showing across re-binds and
+  // Astro navigation until the rebuilt, optimized asset is served.
+  const previews = new Map();
+
+  function bindAssetImages() {
+    for (const img of document.querySelectorAll("img")) {
+      if (img.closest("[data-charlescms-ui]")) continue;
+      if (img.dataset.charlescmsEditable === "true" && !img.dataset.charlescmsAsset) continue;
+      const repoPath = sourceAssetForImg(img, assetIndex);
+      if (!repoPath) continue;
+      if (previews.has(repoPath)) showPreview(img, previews.get(repoPath));
+      if (img.dataset.charlescmsAsset === repoPath) continue;
+      img.dataset.charlescmsEditable = "true";
+      img.dataset.charlescmsAsset = repoPath;
+      img.charlescmsEdit = { open: () => pickAndReplace(img, repoPath), label: "⤢ Replace image" };
+    }
+  }
+
+  function pickAndReplace(img, repoPath) {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.dataset.charlescmsUi = "true";
+    input.style.display = "none";
+    document.body.append(input);
+    input.addEventListener("change", async () => {
+      const file = input.files?.[0];
+      input.remove();
+      if (!file) return;
+      const blobUrl = URL.createObjectURL(file);
+      previews.set(repoPath, blobUrl);
+      // Apply the preview to every <img> sharing this source asset, so repeated
+      // uses of the same picture all update together.
+      for (const other of document.querySelectorAll("img")) {
+        if (other.closest("[data-charlescms-ui]")) continue;
+        if (sourceAssetForImg(other, assetIndex) === repoPath) showPreview(other, blobUrl);
+      }
+      if (state.previewOnly || !state.connector) {
+        setToolbarStatus("Preview only — image not saved in this demo.");
+        return;
+      }
+      try {
+        setToolbarStatus(`Replacing ${repoPath}…`);
+        // GitHub needs the current blob SHA to overwrite an existing file.
+        const existing = await state.connector.getFile(repoPath).catch(() => null);
+        await state.connector.putBase64(repoPath, await fileToBase64(file), {
+          sha: existing?.sha,
+          message: `Replace image: ${repoPath}`
+        });
+        registerAssetPreview?.(repoPath, file);
+        setToolbarStatus(`Replaced ${repoPath}. Redeploy to serve the re-optimized image.`);
+      } catch (error) {
+        setToolbarStatus(error?.message || "Image replace failed.");
+      }
+    }, { once: true });
+    input.click();
+  }
+
+  return { bindAssetImages };
+}
+
+// Force a local preview to win over Astro's optimized output: the responsive
+// <source>/srcset candidates would otherwise override a plain src.
+function showPreview(img, blobUrl) {
+  if (img.getAttribute("src") === blobUrl) return;
+  img.removeAttribute("srcset");
+  img.closest("picture")?.querySelectorAll("source[srcset]").forEach((source) => source.removeAttribute("srcset"));
+  img.src = blobUrl;
+}

package/src/astro-frontmatter.js

@@ -0,0 +1,17 @@
+// Returns the raw Astro frontmatter body and its source offsets.
+//
+// Keeping this tiny parser shared prevents data analysis and template analysis
+// from disagreeing about where frontmatter ends, including CRLF files.
+export function getFrontmatter(source) {
+  if (!source.startsWith("---")) return null;
+  const end = source.indexOf("\n---", 3);
+  if (end === -1) return null;
+  const delimiterStart = end + 1;
+  const delimiterEnd = delimiterStart + 3;
+  const lineEnd = source.slice(delimiterEnd).match(/^(?:\r\n|\n|\r)/)?.[0].length || 0;
+  return {
+    value: source.slice(3, end),
+    offset: 3,
+    bodyOffset: delimiterEnd + lineEnd
+  };
+}

package/src/boot.js

@@ -0,0 +1,35 @@
+const adminPath = window.__CHARLESCMS_PATH__ || "/cms";
+const editPaths = Array.isArray(window.__CHARLESCMS_EDIT_PATHS__) ? window.__CHARLESCMS_EDIT_PATHS__ : [];
+const previewOnly = Boolean(window.__CHARLESCMS_PREVIEW_ONLY__);
+
+// When editablePaths is configured, the editor only activates on those route
+// prefixes. This keeps non-content pages (e.g. a marketing landing page) free of
+// the editor even while logged in. Empty list = editable everywhere (default).
+function isEditableHere() {
+  if (editPaths.length === 0) return true;
+  const here = location.pathname.replace(/\/+$/, "") || "/";
+  return editPaths.some((raw) => {
+    const path = String(raw).replace(/\/+$/, "") || "/";
+    return here === path || here.startsWith(`${path}/`);
+  });
+}
+
+// The admin route check must be SEGMENT-exact: "/cms-playground" starts with
+// "/cms" as a string but is a regular page, not the admin screen. A plain
+// startsWith silently disabled the editor on every page whose name shares the
+// admin prefix.
+function isAdminRoute() {
+  const here = location.pathname.replace(/\/+$/, "") || "/";
+  const admin = adminPath.replace(/\/+$/, "") || "/";
+  return here === admin || here.startsWith(`${admin}/`);
+}
+
+export function bootCharlesCMS() {
+  if (!isAdminRoute() && isEditableHere()) {
+    window.__CHARLESCMS_PREVIEW_ONLY__ = previewOnly;
+    // Keep this a STATIC specifier: Vite only rewrites bare-specifier dynamic
+    // imports when the string is literal. A template (e.g. a ?v= cache-bust)
+    // leaves the bare specifier unresolved and the browser throws.
+    import("@charlescms/astro/src/client.js");
+  }
+}

package/src/client.js

@@ -0,0 +1,347 @@
+import sourceMapData from "virtual:charlescms-source-map";
+import sectionTemplatesData from "virtual:charlescms-section-templates";
+import { createAssetImages } from "./asset-images.js";
+import { createConnectorClient } from "./connector-client.js";
+import { createContentBridge } from "./content-bridge.js";
+import { createContentPanel } from "./content-panel.js";
+import { createEditAffordance } from "./edit-affordance.js";
+import { createElementEditor } from "./element-editor.js";
+import { EDITOR_CSS } from "./editor-styles.js";
+import { createPanelManager } from "./panel-manager.js";
+import {
+  createPublishing,
+  downloadRepoPath,
+  fileToBase64,
+  safeMediaFileName,
+  showPanelError
+} from "./publishing.js";
+import { routeFromAstroFile, routeFromMarkdownFile } from "./routes.js";
+import { createRichTextEditor } from "./rich-text-editor.js";
+import { createRuntimeController } from "./runtime-controller.js";
+import { createSectionEditor } from "./section-editor.js";
+import { createSourceMapRuntime } from "./source-map-runtime.js";
+import { createToolbar } from "./toolbar.js";
+import { createVersionsPanel } from "./versions-panel.js";
+import { createStagedPanel } from "./staged-panel.js";
+
+// Browser entry point and dependency-composition root.
+//
+// Feature behavior lives in focused modules below. This file intentionally keeps
+// only shared state, module wiring, session helpers, and the direct Tiptap
+// dynamic imports required by Vite for vendored `file:` installations.
+const adminPath = window.__CHARLESCMS_PATH__ || "/cms";
+const configKey = "charlescms_connector";
+const state = {
+  authenticated: false,
+  previewOnly: Boolean(window.__CHARLESCMS_PREVIEW_ONLY__),
+  active: null,
+  edits: [],
+  allSourceMap: [],
+  sourceMap: [],
+  sourceMapById: new Map(),
+  connector: null,
+  pending: new Map(),
+  toolbar: null,
+  toolbarObserver: null,
+  sectionControls: [],
+  busy: false,
+  initializedPath: ""
+};
+
+const { closeEditor, mountPanel } = createPanelManager({ state });
+const {
+  stageEdit,
+  discardPending,
+  publishPending,
+  restorePending,
+  uploadActiveMedia,
+  replaceDownloadFile,
+  removeActiveMedia,
+  branchHint
+} = createPublishing({
+  state,
+  applyValue: (...args) => applyValue(...args),
+  applyBridgedValues: (...args) => applyBridgedValues(...args),
+  closeEditor,
+  renderPendingTray: (...args) => renderPendingTray(...args),
+  setToolbarStatus: (...args) => setToolbarStatus(...args),
+  setBusy: (...args) => setBusy(...args),
+  waitForLivePage
+});
+const {
+  isFrontmatterEntry,
+  isMarkdownBodyEntry,
+  frontmatterGroups,
+  dataModules,
+  currentPageHasFrontmatter,
+  applyBridgedValues,
+  openPageSettings,
+  openDataModulePanel,
+  openFrontmatterPanel
+} = createContentPanel({
+  state,
+  routeFromMarkdownFile,
+  closeEditor,
+  mountPanel,
+  stageEdit,
+  downloadRepoPath,
+  fileToBase64,
+  setToolbarStatus: (...args) => setToolbarStatus(...args),
+  escapeHtml,
+  escapeAttribute
+});
+const { openRichTextInline } = createRichTextEditor({
+  state,
+  loadTiptap,
+  stageEdit: (...args) => stageEdit(...args),
+  setToolbarStatus: (...args) => setToolbarStatus(...args),
+  escapeHtml,
+  escapeAttribute
+});
+const {
+  installSectionControls,
+  openSectionBuilder
+} = createSectionEditor({
+  state,
+  sectionTemplatesData,
+  closeEditor,
+  mountPanel,
+  stageEdit: (...args) => stageEdit(...args),
+  renderPendingTray: (...args) => renderPendingTray(...args),
+  setToolbarStatus: (...args) => setToolbarStatus(...args),
+  openRichTextInline: (...args) => openRichTextInline(...args),
+  fileToBase64,
+  safeMediaFileName,
+  isVisible,
+  escapeHtml
+});
+const {
+  loadSourceMap,
+  applySourceMapIds,
+  scanEditableElements: scanSourceMapElements
+} = createSourceMapRuntime({
+  state,
+  sourceMapData,
+  routeFromAstroFile,
+  routeFromMarkdownFile,
+  isFrontmatterEntry,
+  isMarkdownBodyEntry,
+  isVisible
+});
+const { installEditAffordance } = createEditAffordance({ state, isVisible });
+const {
+  describeElement,
+  openEditor,
+  applyValue
+} = createElementEditor({
+  state,
+  closeEditor,
+  mountPanel,
+  stageEdit: (...args) => stageEdit(...args),
+  openRichTextInline: (...args) => openRichTextInline(...args),
+  openSectionBuilder: (...args) => openSectionBuilder(...args),
+  uploadActiveMedia: (...args) => uploadActiveMedia(...args),
+  replaceDownloadFile: (...args) => replaceDownloadFile(...args),
+  removeActiveMedia: (...args) => removeActiveMedia(...args),
+  downloadRepoPath,
+  escapeHtml,
+  escapeAttribute
+});
+const { openVersionsPanel } = createVersionsPanel({
+  state,
+  closeEditor,
+  mountPanel,
+  setBusy: (...args) => setBusy(...args),
+  setToolbarStatus: (...args) => setToolbarStatus(...args),
+  waitForLivePage,
+  showPanelError,
+  branchHint,
+  escapeHtml,
+  escapeAttribute
+});
+const { openStagedPanel } = createStagedPanel({
+  state,
+  closeEditor,
+  mountPanel,
+  discardPending,
+  publishPending,
+  escapeHtml,
+  escapeAttribute
+});
+const {
+  installToolbar,
+  renderPendingTray,
+  setBusy,
+  setToolbarStatus
+} = createToolbar({
+  state,
+  currentPageHasFrontmatter,
+  openPageSettings,
+  openVersionsPanel,
+  openStagedPanel,
+  publishPending,
+  discardPending,
+  logout,
+  scanEditableElements
+});
+const { bindAssetImages } = createAssetImages({
+  state,
+  sourceMapData,
+  fileToBase64,
+  setToolbarStatus: (...args) => setToolbarStatus(...args)
+});
+const {
+  start,
+  attachLinkEditAction
+} = createRuntimeController({
+  state,
+  readConnectorConfig,
+  createConnectorClient,
+  closeEditor,
+  loadSourceMap,
+  applySourceMapIds,
+  restorePending,
+  applyValue: (...args) => applyValue(...args),
+  applyBridgedValues: (...args) => applyBridgedValues(...args),
+  addStyles,
+  installEditAffordance,
+  installToolbar,
+  installSectionControls,
+  scanEditableElements,
+  openEditor,
+  installContentBridge: (...args) => installContentBridge(...args),
+  bindAssetImages,
+  downloadRepoPath,
+  isVisible
+});
+const { installContentBridge } = createContentBridge({
+  dataModules,
+  frontmatterGroups,
+  openDataModulePanel,
+  openFrontmatterPanel,
+  attachLinkEditChip: attachLinkEditAction,
+  isVisible
+});
+
+start();
+document.addEventListener("astro:page-load", start);
+
+function scanEditableElements() {
+  return scanSourceMapElements(describeElement);
+}
+
+// Polls the deployed page until it is reachable AND (if markers are given) the new
+// build is actually serving them — i.e. the rebuild that follows a commit is live.
+// Returns true when live, false on timeout, so callers can lock/unlock the editor.
+async function waitForLivePage(markers = []) {
+  const deadline = Date.now() + 120000;
+  const normalize = (value) => String(value || "").replace(/\s+/g, " ").trim();
+  const wanted = (Array.isArray(markers) ? markers : [markers]).map(normalize).filter((m) => m.length >= 4);
+  while (Date.now() < deadline) {
+    const url = new URL(location.href);
+    url.searchParams.set("_charlescms", String(Date.now()));
+    const response = await fetch(url, { cache: "no-store" }).catch(() => null);
+    if (response?.ok) {
+      if (!wanted.length) return true;
+      const html = (await response.text().catch(() => "")) || "";
+      // Compare against the page's PLAIN text, not raw HTML: the change lives
+      // between tags and with different whitespace in the markup, so a raw
+      // substring match would miss it and wait out the whole timeout.
+      let plain = html;
+      try { plain = new DOMParser().parseFromString(html, "text/html").body?.textContent || html; } catch {}
+      plain = normalize(plain);
+      if (wanted.some((marker) => plain.includes(marker))) return true;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 2500));
+  }
+  return false;
+}
+
+function readConnectorConfig() {
+  const preset = (typeof window !== "undefined" && window.__CHARLESCMS_CONNECTION__) || {};
+  let saved = null;
+  try {
+    saved = JSON.parse(sessionStorage.getItem(configKey) || "null");
+  } catch {
+    saved = null;
+  }
+  if (!saved?.connector || !saved?.repo) {
+    try {
+      const legacy = JSON.parse(localStorage.getItem(configKey) || "null");
+      if (legacy?.connector && legacy?.repo) {
+        sessionStorage.setItem(configKey, JSON.stringify(legacy));
+        const { editorKey, ...prefill } = legacy;
+        localStorage.setItem(`${configKey}_last`, JSON.stringify(prefill));
+        localStorage.removeItem(configKey);
+        saved = legacy;
+      }
+    } catch {}
+  }
+  // A connection the editor saved in this browser wins; otherwise fall back to
+  // the owner's baked-in preset so editors are connected without any form.
+  if (saved?.connector && saved?.repo) return saved;
+  if (preset.connector && preset.repo) return preset;
+  return null;
+}
+
+// Keep these imports directly in client.js. Vite can otherwise stall while
+// optimizing file-installed packages that dynamically import through a helper.
+async function loadTiptap() {
+  const [
+    { Editor },
+    { default: Document },
+    { default: Text },
+    { default: Bold },
+    { default: Italic },
+    { default: Code },
+    { default: HardBreak },
+    { default: Link }
+  ] = await Promise.all([
+    import("@tiptap/core"),
+    import("@tiptap/extension-document"),
+    import("@tiptap/extension-text"),
+    import("@tiptap/extension-bold"),
+    import("@tiptap/extension-italic"),
+    import("@tiptap/extension-code"),
+    import("@tiptap/extension-hard-break"),
+    import("@tiptap/extension-link")
+  ]);
+  return { Editor, Document, Text, Bold, Italic, Code, HardBreak, Link };
+}
+
+function isVisible(element) {
+  const rect = element.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  return rect.width > 0 && rect.height > 0 && style.visibility !== "hidden" && style.display !== "none";
+}
+
+function addStyles() {
+  const style = document.createElement("style");
+  style.dataset.charlescmsUi = "true";
+  style.textContent = EDITOR_CSS;
+  document.head.append(style);
+}
+
+async function logout() {
+  // Remember the last connection (connector/repo/branch aren't secrets) so the
+  // connect form comes back prefilled — disconnecting shouldn't mean retyping.
+  // The editor password IS a secret: drop it so it never lands in the prefill.
+  try {
+    const current = sessionStorage.getItem(configKey);
+    if (current) {
+      const { editorKey, ...prefill } = JSON.parse(current) || {};
+      localStorage.setItem(`${configKey}_last`, JSON.stringify(prefill));
+    }
+  } catch {}
+  sessionStorage.removeItem(configKey);
+  localStorage.removeItem(configKey);
+  location.href = adminPath;
+}
+
+function escapeHtml(value) {
+  return String(value).replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" })[char]);
+}
+
+function escapeAttribute(value) {
+  return escapeHtml(value);
+}