@charlescms/astro 0.1.0

package/src/connector-client.js

@@ -0,0 +1,185 @@
+import { createEditedSource, UnsafeSourceEditError } from "./source-edit.js";
+
+// Browser-side API for the publishing Worker.
+//
+// It validates connection settings, converts staged operations into complete
+// verified file updates, and keeps repository path/branch handling out of the UI.
+export class ConnectorError extends Error {
+  constructor(message, status = 0) {
+    super(message);
+    this.name = "ConnectorError";
+    this.status = status;
+  }
+}
+
+export function createConnectorClient(config) {
+  const connector = normalizeConnectorUrl(config?.connector);
+  if (!connector) throw new ConnectorError("A CharlesCMS connector URL is required.");
+  if (!config?.repo || !config.repo.includes("/")) {
+    throw new ConnectorError("Repository must be in owner/name form.");
+  }
+  const repo = config.repo;
+  let branch = config.branch || "main";
+  const sourceRoot = String(config.sourceRoot || "").replace(/^\/+|\/+$/g, "");
+  const editorKey = String(config.editorKey || "").trim();
+  const liveConfig = { connector, repo, branch, sourceRoot };
+  let branchHealed = false;
+
+  const toRepoPath = (path) => {
+    if (!sourceRoot || !path) return path;
+    return path === sourceRoot || path.startsWith(`${sourceRoot}/`) ? path : `${sourceRoot}/${path.replace(/^\/+/, "")}`;
+  };
+
+  const once = (path, body) => fetch(`${connector}/api/${path}`, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+      ...(editorKey ? { "x-charlescms-auth": editorKey } : {})
+    },
+    body: JSON.stringify({ repo, branch, ...body })
+  });
+
+  // The #1 cause of "nothing works" is a configured branch that doesn't exist
+  // (e.g. "main" saved against a "master" repo) — every read/write 404s. Heal it
+  // once: ask the connector for the repo's real default branch, adopt it, persist
+  // it for next time, and retry the request. After that the right branch sticks.
+  const call = async (path, body = {}) => {
+    let response = await once(path, body);
+    if (response.status === 404 && path !== "verify" && !branchHealed) {
+      branchHealed = true;
+      const fixed = await defaultBranch();
+      if (fixed && fixed !== branch) {
+        branch = fixed;
+        liveConfig.branch = fixed;
+        persistBranch(fixed);
+        const retryBody = { ...body };
+        if (retryBody.ref) retryBody.ref = fixed;
+        response = await once(path, retryBody);
+      }
+    }
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) {
+      if (response.status === 401) {
+        throw new ConnectorError(data.error || "Incorrect or missing editor password.", 401);
+      }
+      throw new ConnectorError(data.error || `Connector request failed (${response.status}).`, response.status);
+    }
+    return data;
+  };
+
+  const defaultBranch = async () => {
+    try {
+      const response = await once("verify", {});
+      const data = await response.json().catch(() => ({}));
+      return response.ok && typeof data.defaultBranch === "string" ? data.defaultBranch : "";
+    } catch {
+      return "";
+    }
+  };
+
+  const persistBranch = (value) => {
+    try {
+      const key = "charlescms_connector";
+      const saved = JSON.parse(globalThis.sessionStorage?.getItem(key) || "{}");
+      if (saved?.connector) {
+        saved.branch = value;
+        globalThis.sessionStorage.setItem(key, JSON.stringify(saved));
+      }
+    } catch {}
+  };
+
+  const getFile = async (path, ref = branch) => {
+    path = toRepoPath(path);
+    assertSafeRepoPath(path);
+    return call("file", { path, ref });
+  };
+
+  const putFile = async (path, source, { sha, message } = {}) => {
+    path = toRepoPath(path);
+    assertSafeRepoPath(path);
+    return call("write", { path, source, sha, message: message || `Update content: ${path}` });
+  };
+
+  const putBase64 = async (path, base64, { sha, message } = {}) => {
+    path = toRepoPath(path);
+    assertSafeRepoPath(path);
+    const clean = String(base64).replace(/\s/g, "");
+    const result = await call("upload", { path, base64: clean, sha, message: message || `Upload media: ${path}` });
+    // Dev nicety: the commit above is the source of truth, but the dev server
+    // serves public/ from the local disk, where the new file doesn't exist yet —
+    // the preview would 404 until the next pull. Mirror the bytes locally via a
+    // dev-only endpoint. Gated to dev so a deployed site never calls it (which
+    // logged a noisy 405 in the browser console).
+    if (import.meta.env?.DEV && path.startsWith("public/uploads/")) {
+      fetch("/_charlescms/mirror-upload", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ path, base64: clean })
+      }).catch(() => {});
+    }
+    return result;
+  };
+
+  const applyEdit = async (entry, edit) => {
+    const file = toRepoPath(entry.file);
+    assertSafeRepoPath(file);
+    for (let attempt = 0; attempt < 2; attempt++) {
+      const current = await getFile(file);
+      if (!current) throw new ConnectorError(`Source file not found: ${file}`, 404);
+      const next = createEditedSource(current.source, { ...entry, file }, edit);
+      if (next === current.source) {
+        return { id: edit.id, file, commit: null, unchanged: true };
+      }
+      try {
+        const commit = await putFile(file, next, { sha: current.sha, message: edit.message });
+        mirrorSourceToDisk(entry.file, next);
+        return { id: edit.id, file, commit };
+      } catch (error) {
+        if (error instanceof ConnectorError && error.status === 409 && attempt === 0) continue;
+        throw error;
+      }
+    }
+    throw new ConnectorError("Connector write kept conflicting; try again.", 409);
+  };
+
+  const listCommits = async (limit = 20) => {
+    const data = await call("commits", { limit });
+    return Array.isArray(data.commits) ? data.commits : [];
+  };
+
+  const revertCommit = async (sha) => call("revert", { sha });
+
+  const verifyAccess = async () => call("verify");
+
+  return { getFile, putFile, putBase64, applyEdit, listCommits, revertCommit, verifyAccess, config: liveConfig };
+}
+
+// Dev nicety (mirrors putBase64's upload mirror): the commit above is the source
+// of truth, but the dev server reads source from the LOCAL disk. Without this the
+// local file — and the source map built from it — stays frozen at the last build
+// while GitHub moves ahead each publish, so the next edit to the same file fails
+// byte-verification ("source changed since the CMS build"): the CMS never notices
+// it already published. Write the published bytes locally; the dev watcher then
+// refreshes the source map. On a deployed site the endpoint is absent and this
+// fails silently. `path` is the project-relative source path (no sourceRoot).
+function mirrorSourceToDisk(path, source) {
+  if (!path || !import.meta.env?.DEV) return;
+  // The reload that follows mirroring is the editor's post-publish dev sync; the
+  // few tests that keep editing within one session disable both with this flag.
+  if (typeof window !== "undefined" && window.__CHARLESCMS_NO_RELOAD__) return;
+  fetch("/_charlescms/mirror-source", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ path, source })
+  }).catch(() => {});
+}
+
+function normalizeConnectorUrl(value) {
+  return String(value || "").trim().replace(/\/+$/, "");
+}
+
+function assertSafeRepoPath(path) {
+  if (!path || path.startsWith("/") || path.split(/[\\/]/).includes("..")) {
+    throw new UnsafeSourceEditError("Source path points outside the repository.");
+  }
+}

package/src/content-bridge.js

@@ -0,0 +1,162 @@
+// Connect dynamically rendered data/frontmatter values to their deterministic
+// Content-panel editors. Matching is only a navigation aid: source writes still
+// use exact source-map operations and never depend on these DOM guesses.
+export function createContentBridge({
+  dataModules,
+  frontmatterGroups,
+  openDataModulePanel,
+  openFrontmatterPanel,
+  attachLinkEditChip,
+  isVisible
+}) {
+  function installContentBridge() {
+    for (const [file, entries] of dataModules()) {
+      for (const entry of entries) {
+        for (const operation of entry.operations) {
+          for (const element of findBridgeTargets(operation.oldValue)) {
+            bindBridge(element, file, entries, entry.id, groupKeyForName(operation.name), operation.name);
+          }
+        }
+        for (const media of entry.media || []) {
+          const image = findBridgeImage(media.path);
+          if (image) bindBridge(image, file, entries, entry.id, groupKeyForName(media.name), media.name);
+        }
+      }
+    }
+
+    // A value can be part of a larger line, such as a name in a copyright.
+    // Prefer longer candidates so the most specific value claims the element.
+    const candidates = [];
+    for (const [file, entries] of dataModules()) {
+      for (const entry of entries) {
+        for (const operation of entry.operations) {
+          const value = String(operation.oldValue || "").trim();
+          if (value.length < 8 || !/[A-Za-z]/.test(value)) continue;
+          candidates.push({ file, entries, entry, operation, value });
+        }
+      }
+    }
+    candidates.sort((a, b) => b.value.length - a.value.length);
+    for (const { file, entries, entry, operation } of candidates) {
+      const element = findBridgeContainer(operation.oldValue.trim());
+      if (element) bindBridge(element, file, entries, entry.id, groupKeyForName(operation.name), operation.name);
+    }
+
+    for (const [file, entries] of frontmatterGroups()) {
+      for (const entry of entries) {
+        for (const operation of entry.operations) {
+          for (const element of findFrontmatterTargets(operation.oldValue)) {
+            bindFrontmatter(element, file, entries, entry.id, operation.name);
+          }
+        }
+      }
+    }
+  }
+
+  function findFrontmatterTargets(value) {
+    const normalize = (input) => String(input || "")
+      .replace(/[\u2018\u2019\u201a\u201b]/g, "'")
+      .replace(/[\u201c\u201d\u201e\u201f]/g, '"')
+      .replace(/[\u2013\u2014]/g, "-")
+      .replace(/\\[ntr]/g, "")
+      .replace(/\s+/g, "")
+      .toLowerCase();
+    const target = normalize(value);
+    if (target.length < 3) return [];
+    return [...document.querySelectorAll("h1,h2,h3,h4,h5,h6,p,span,li,dd,dt,div,label,a")]
+      .filter((element) => !element.dataset.charlescmsId
+        && !element.dataset.charlescmsBridge
+        && !element.closest("[data-charlescms-ui]")
+        && !element.closest("[data-charlescms-preview-block]")
+        && !element.querySelector("[data-charlescms-id]")
+        && normalize(element.textContent) === target
+        && isVisible(element));
+  }
+
+  function bindFrontmatter(element, file, entries, entryId, entryOp) {
+    element.dataset.charlescmsBridge = "true";
+    element.dataset.charlescmsBridgeEntry = entryId;
+    element.dataset.charlescmsBridgeOp = entryOp;
+    const open = () => openFrontmatterPanel(file, entries, "Edit content");
+    if (element.tagName === "A" || element.closest("a[href]")) {
+      attachLinkEditChip(element, open, "✎ Edit content");
+      return;
+    }
+    element.dataset.charlescmsEditable = "true";
+    element.charlescmsEdit = { open, label: "✎ Edit content" };
+  }
+
+  function findBridgeContainer(value) {
+    return [...document.querySelectorAll("p,h1,h2,h3,h4,h5,h6,a,span,li,address,figcaption,blockquote,dd")]
+      .find((element) => !element.dataset.charlescmsId
+        && !element.dataset.charlescmsBridge
+        && !element.closest("[data-charlescms-id]")
+        && !element.closest("[data-charlescms-ui]")
+        && !element.closest("[data-charlescms-preview-block]")
+        && !element.querySelector("[data-charlescms-id]")
+        && element.textContent.includes(value)
+        && element.textContent.trim().length < value.length + 60
+        && isVisible(element));
+  }
+
+  function findBridgeTargets(value) {
+    const text = String(value || "").trim();
+    if (text.length < 2) return [];
+    const directText = (element) => [...element.childNodes]
+      .filter((node) => node.nodeType === 3)
+      .map((node) => node.textContent)
+      .join("")
+      .trim();
+    return [...document.querySelectorAll("h1,h2,h3,h4,h5,h6,p,span,li,dd,dt,strong,em,small,figcaption,blockquote,a,button")]
+      .filter((element) => !element.dataset.charlescmsId
+        && !element.dataset.charlescmsBridge
+        && !element.closest("[data-charlescms-ui]")
+        && !element.closest("[data-charlescms-preview-block]")
+        && [...element.childNodes].some((node) => node.nodeType === 3 && node.textContent.trim())
+        && (
+          directText(element) === text
+          || (element.textContent.trim() === text && !element.querySelector("[data-charlescms-id]"))
+        )
+        && isVisible(element));
+  }
+
+  function findBridgeImage(path) {
+    const clean = String(path || "").split(/[?#]/)[0];
+    if (!clean) return null;
+    const matches = [...document.querySelectorAll("img")]
+      .filter((image) => !image.dataset.charlescmsBridge
+        && !image.dataset.charlescmsId
+        && !image.closest("[data-charlescms-id]")
+        && !image.closest("[data-charlescms-preview-block]")
+        && (image.getAttribute("src") || "").split(/[?#]/)[0] === clean);
+    return matches.find(isVisible) || matches[0] || null;
+  }
+
+  function bindBridge(element, file, entries, entryId, groupKey, operationName) {
+    element.dataset.charlescmsBridge = "true";
+    // Record WHICH source entry this element edits. The Content panel uses this
+    // to list only entries that have no clickable element on the page.
+    element.dataset.charlescmsBridgeEntry = entryId;
+    // The op name lets a panel save push the new value back into this element,
+    // so the page updates the moment Save is pressed (before publish).
+    element.dataset.charlescmsBridgeOp = operationName;
+    const open = () => openDataModulePanel(file, entries, { entryId, groupKey, opName: operationName });
+    if (element.tagName === "A" || element.closest("a[href]")) {
+      attachLinkEditChip(element, open, "✎ Edit content");
+      return;
+    }
+    element.dataset.charlescmsEditable = "true";
+    element.charlescmsEdit = { open, label: "✎ Edit content" };
+  }
+
+  return { installContentBridge };
+}
+
+function groupKeyForName(name) {
+  const item = name.match(/^item(\d+)_/);
+  if (item) return `i${item[1]}`;
+  if (/^item_\d+$/.test(name)) return "links";
+  if (/^prop\d+_/.test(name)) return "page";
+  if (/^field\d+_/.test(name)) return "fields";
+  return "fields";
+}