@codepress/blog 0.2.1 → 0.3.0

package/dist/editor/index.js

@@ -1,15 +1,24 @@
 import {
   createDraftClient
-} from "../chunks/chunk-3WRTL63O.js";
+} from "../chunks/chunk-WEBQTRDI.js";
 import {
   BLOG_TOOLBAR_BOTTOM_VAR,
   DEFAULT_APP_URL,
   DEFAULT_COLUMN,
   DEFAULT_HEADER_SELECTOR,
   DEFAULT_TIMINGS,
+  EDITOR_SCOPE_CLASS,
   designTargetOf,
-  designUrl
-} from "../chunks/chunk-UA243KAQ.js";
+  designUrl,
+  parsePostSource
+} from "../chunks/chunk-BPAM7T27.js";
+import "../chunks/chunk-HWR3R5MU.js";
+import {
+  renderPostBody
+} from "../chunks/chunk-AJVVTSKZ.js";
+import "../chunks/chunk-EICE5ONB.js";
+import "../chunks/chunk-TYX2HJZC.js";
+import "../chunks/chunk-AEQDRBA3.js";
 import {
   SLUG_PATTERN
 } from "../chunks/chunk-XLJBCIXI.js";
@@ -23,7 +32,7 @@ import {
   useState
 } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var BlogEditor = lazy(() => import("../chunks/BlogEditor-EDAPNNP5.js"));
+var BlogEditor = lazy(() => import("../chunks/BlogEditor-IYNL6C7G.js"));
 function appPageUrl(appUrl, organizationSlug, site, slug, tab) {
   if (!organizationSlug) return `${appUrl}/dashboard`;
   const query = new URLSearchParams({ site, post: slug });
@@ -36,6 +45,7 @@ function BlogEditorMount({
   apiBase,
   auth,
   isNew = false,
+  startEditing = false,
   header,
   column = DEFAULT_COLUMN,
   appUrl = DEFAULT_APP_URL,
@@ -53,7 +63,7 @@ function BlogEditorMount({
   );
   const [capabilities, setCapabilities] = useState(null);
   const [checked, setChecked] = useState(false);
-  const [editing, setEditing] = useState(isNew);
+  const [editing, setEditing] = useState(isNew || startEditing);
   const [ask, setAsk] = useState("closed");
   useEffect(() => {
     let cancelled = false;
@@ -91,7 +101,7 @@ function BlogEditorMount({
         "button",
         {
           type: "button",
-          className: "fixed right-6 bottom-6 z-40 rounded-full bg-[#111110] px-5 py-2.5 text-sm font-medium text-white shadow-lg",
+          className: `${EDITOR_SCOPE_CLASS} fixed right-6 bottom-6 z-40 rounded-full bg-[#111110] px-5 py-2.5 text-sm font-medium text-white shadow-lg`,
           "data-testid": "blog-edit-button",
           onClick: () => changeEditing(true),
           children: "Edit"
@@ -107,7 +117,7 @@ function BlogEditorMount({
         fallback: /* @__PURE__ */ jsx(
           "p",
           {
-            className: `${column} pt-10 pb-20 sm:pt-14`,
+            className: `${EDITOR_SCOPE_CLASS} ${column} pt-10 pb-20 sm:pt-14`,
             "data-testid": "blog-editor-loading",
             children: "Loading the editor\u2026"
           }
@@ -159,6 +169,7 @@ function NewPostForm({ onStart, prefix = "/blog/" }) {
   return /* @__PURE__ */ jsxs2(
     "form",
     {
+      className: EDITOR_SCOPE_CLASS,
       "data-testid": "blog-new-form",
       onSubmit: (event) => {
         event.preventDefault();
@@ -198,14 +209,600 @@ function NewPostForm({ onStart, prefix = "/blog/" }) {
     }
   );
 }
+
+// src/editor/host.tsx
+import {
+  useCallback,
+  useEffect as useEffect2,
+  useMemo as useMemo2,
+  useRef,
+  useState as useState3
+} from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var EDIT_PARAM = "cp-edit";
+var CALLBACK_SEGMENT = "__cp/callback";
+var CONSENT_PATH = "/blog-edit/consent";
+var navigation = {
+  assign: (url) => window.location.assign(url),
+  replace: (url) => window.location.replace(url)
+};
+var EXPIRY_SKEW_MS = 3e4;
+var tokenKey = (site) => `codepress-blog:token:${site}`;
+var handoffKey = (site) => `codepress-blog:handoff:${site}`;
+function storage() {
+  try {
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+function readJson(key) {
+  try {
+    const raw = storage()?.getItem(key);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function writeJson(key, value) {
+  try {
+    storage()?.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+function remove(key) {
+  try {
+    storage()?.removeItem(key);
+  } catch {
+  }
+}
+function readSiteToken(site, now = Date.now()) {
+  const stored = readJson(tokenKey(site));
+  if (!stored || typeof stored.token !== "string" || typeof stored.expiresAt !== "number") {
+    return null;
+  }
+  if (stored.expiresAt - EXPIRY_SKEW_MS <= now) {
+    remove(tokenKey(site));
+    return null;
+  }
+  return stored;
+}
+function clearSiteToken(site) {
+  remove(tokenKey(site));
+}
+function base64Url(bytes) {
+  let binary = "";
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function createVerifier() {
+  return base64Url(crypto.getRandomValues(new Uint8Array(32)));
+}
+async function challengeFor(verifier) {
+  const digest = await crypto.subtle.digest(
+    "SHA-256",
+    new TextEncoder().encode(verifier)
+  );
+  return base64Url(new Uint8Array(digest));
+}
+function normalizedBasePath(basePath) {
+  return `/${basePath.replace(/^\/+|\/+$/g, "")}`;
+}
+function callbackPath(basePath) {
+  return `${normalizedBasePath(basePath)}/${CALLBACK_SEGMENT}`;
+}
+function safeReturnPath(basePath, value) {
+  const base = normalizedBasePath(basePath);
+  if (!value || !value.startsWith("/") || value.startsWith("//")) return base;
+  try {
+    const url = new URL(value, "https://host.invalid");
+    if (url.origin !== "https://host.invalid") return base;
+    if (url.pathname !== base && !url.pathname.startsWith(`${base}/`)) {
+      return base;
+    }
+    return `${url.pathname}${url.search}${url.hash}`;
+  } catch {
+    return base;
+  }
+}
+function withoutEditParam(path) {
+  const url = new URL(path, "https://host.invalid");
+  url.searchParams.delete(EDIT_PARAM);
+  return `${url.pathname}${url.search}${url.hash}`;
+}
+function consentUrl({
+  appUrl,
+  site,
+  origin,
+  basePath,
+  challenge
+}) {
+  const query = new URLSearchParams({
+    site,
+    origin,
+    return: `${origin}${callbackPath(basePath)}`,
+    challenge
+  });
+  return `${appUrl.replace(/\/+$/, "")}${CONSENT_PATH}?${query.toString()}`;
+}
+async function startHandoff(config, returnTo) {
+  const verifier = createVerifier();
+  writeJson(handoffKey(config.site), {
+    verifier,
+    returnTo: safeReturnPath(config.basePath, returnTo)
+  });
+  navigation.assign(
+    consentUrl({
+      appUrl: config.appUrl ?? DEFAULT_APP_URL,
+      site: config.site,
+      origin: window.location.origin,
+      basePath: config.basePath,
+      challenge: await challengeFor(verifier)
+    })
+  );
+}
+function siteAuth(site) {
+  return { getToken: async () => readSiteToken(site)?.token ?? null };
+}
+function leavingLinkOf(event) {
+  if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+    return null;
+  }
+  const target = event.target;
+  const anchor = target instanceof Element ? target.closest("a[href]") : null;
+  if (!anchor || anchor.hasAttribute("download")) return null;
+  if (anchor.closest('[contenteditable="true"]')) return null;
+  if (anchor.target && anchor.target !== "_self") return null;
+  const url = new URL(anchor.href, window.location.href);
+  if (url.origin !== window.location.origin) return null;
+  if (url.pathname === window.location.pathname && url.search === window.location.search) {
+    return null;
+  }
+  return url.href;
+}
+function historyNavigation() {
+  const api = window.navigation;
+  return api && typeof api.traverseTo === "function" ? api : null;
+}
+function useLeaveThroughEditor(active, controller) {
+  useEffect2(() => {
+    if (!active) return;
+    let leaving = false;
+    let settling = false;
+    let destination = null;
+    const hold = (go) => {
+      const editor = controller.current;
+      if (leaving || !editor) return false;
+      destination = go;
+      if (settling) return true;
+      settling = true;
+      void editor.leave(() => {
+        leaving = true;
+        const next = destination;
+        destination = null;
+        next?.();
+      }).finally(() => {
+        settling = false;
+      });
+      return true;
+    };
+    const onClick = (event) => {
+      const href = leavingLinkOf(event);
+      if (!href) return;
+      if (hold(() => navigation.assign(href))) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    };
+    const history = historyNavigation();
+    const onNavigate = (event) => {
+      const traverse = event;
+      if (traverse.navigationType !== "traverse" || !event.cancelable) return;
+      const key = traverse.destination.key;
+      const replay = () => {
+        const result = history?.traverseTo(key);
+        result?.committed.catch(() => {
+        });
+        result?.finished.catch(() => {
+        });
+      };
+      if (hold(replay)) event.preventDefault();
+    };
+    document.addEventListener("click", onClick, true);
+    history?.addEventListener("navigate", onNavigate);
+    return () => {
+      document.removeEventListener("click", onClick, true);
+      history?.removeEventListener("navigate", onNavigate);
+    };
+  }, [active, controller]);
+}
+var PILL = "fixed right-6 bottom-6 z-40 rounded-full bg-[#111110] px-5 py-2.5 text-sm font-medium text-white shadow-lg";
+var PUBLISHED_STYLE = {
+  maxWidth: "var(--cp-blog-page-width, 720px)",
+  margin: "0 auto",
+  padding: "var(--cp-blog-page-padding, 3rem 1.25rem 5rem)",
+  color: "var(--cp-blog-text)",
+  fontFamily: "var(--cp-blog-font)"
+};
+function PublishedPost({
+  source,
+  revalidate,
+  href
+}) {
+  const parsed = parsePostSource(source);
+  const body = parsed.metaText ? source.replace(parsed.metaText, "") : source;
+  const title = typeof parsed.meta.title === "string" ? parsed.meta.title : void 0;
+  const wait = revalidate ? `within about ${revalidate} second${revalidate === 1 ? "" : "s"}` : "shortly";
+  return /* @__PURE__ */ jsxs3(
+    "main",
+    {
+      className: "cp-blog-post",
+      style: PUBLISHED_STYLE,
+      "data-testid": "blog-host-published",
+      children: [
+        /* @__PURE__ */ jsxs3(
+          "p",
+          {
+            role: "status",
+            className: `${EDITOR_SCOPE_CLASS} rounded-md border border-[#D9D5CC] bg-[#F7F5F0] px-4 py-3 text-sm text-[#111110]`,
+            "data-testid": "blog-host-published-note",
+            children: [
+              "Published. This is the post as CodePress now serves it; the public page catches up ",
+              wait,
+              ".",
+              " ",
+              /* @__PURE__ */ jsx3("a", { className: "underline", href, children: "Reload the page" })
+            ]
+          }
+        ),
+        title ? /* @__PURE__ */ jsx3("header", { children: /* @__PURE__ */ jsx3("h1", { children: title }) }) : null,
+        /* @__PURE__ */ jsx3("article", { className: "cp-blog-prose", children: renderPostBody(body) })
+      ]
+    }
+  );
+}
+function setEditParam(on) {
+  const url = new URL(window.location.href);
+  if (on) url.searchParams.set(EDIT_PARAM, "");
+  else url.searchParams.delete(EDIT_PARAM);
+  window.history.replaceState(
+    window.history.state,
+    "",
+    url.href.replace(`${EDIT_PARAM}=`, EDIT_PARAM).replace(/[?&]$/, "")
+  );
+}
+function HostEditing({
+  site,
+  apiBase,
+  basePath,
+  appUrl = DEFAULT_APP_URL,
+  revalidate,
+  timings,
+  slug,
+  children
+}) {
+  const [phase, setPhase] = useState3({ kind: "reading" });
+  const [expired, setExpired] = useState3(false);
+  const controller = useRef(null);
+  const auth = useMemo2(() => siteAuth(site), [site]);
+  const client = useMemo2(
+    () => createDraftClient({ apiBase, auth }),
+    [apiBase, auth]
+  );
+  const config = useMemo2(
+    () => ({ site, basePath, appUrl }),
+    [site, basePath, appUrl]
+  );
+  const editing = phase.kind === "editing" || phase.kind === "new-editing" || phase.kind === "new-form";
+  const openEditor = useCallback(
+    (capabilities) => {
+      if (!capabilities?.can_edit) {
+        clearSiteToken(site);
+        setPhase({ kind: "denied" });
+        return;
+      }
+      setPhase(slug ? { kind: "editing" } : { kind: "new-form" });
+    },
+    [site, slug]
+  );
+  useEffect2(() => {
+    let cancelled = false;
+    const wantsEdit = new URLSearchParams(window.location.search).has(
+      EDIT_PARAM
+    );
+    void client.getCapabilities(site).then((capabilities) => {
+      if (cancelled) return;
+      if (!capabilities?.host_editing_enabled) {
+        setPhase({ kind: "off" });
+        return;
+      }
+      if (!wantsEdit) {
+        setPhase({ kind: "idle", canEdit: capabilities.can_edit });
+        return;
+      }
+      if (!readSiteToken(site)) {
+        void startHandoff(config, window.location.pathname + `?${EDIT_PARAM}`);
+        return;
+      }
+      openEditor(capabilities);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [client, config, openEditor, site]);
+  useEffect2(() => {
+    if (!editing) return;
+    const stored = readSiteToken(site);
+    if (!stored) {
+      setExpired(true);
+      return;
+    }
+    setExpired(false);
+    const timer = setTimeout(
+      () => setExpired(true),
+      stored.expiresAt - EXPIRY_SKEW_MS - Date.now()
+    );
+    return () => clearTimeout(timer);
+  }, [editing, site]);
+  useLeaveThroughEditor(editing, controller);
+  const startEditing = async () => {
+    if (readSiteToken(site)) {
+      setEditParam(true);
+      openEditor(await client.getCapabilities(site));
+      return;
+    }
+    await startHandoff(config, window.location.pathname + `?${EDIT_PARAM}`);
+  };
+  const stopEditing = () => {
+    setEditParam(false);
+    setPhase({ kind: "idle", canEdit: true });
+  };
+  const showPublished = async (published) => {
+    const result = await client.getDraft(site, published);
+    if ("error" in result) {
+      navigation.assign(
+        `${normalizedBasePath(basePath)}/${encodeURIComponent(published)}`
+      );
+      return;
+    }
+    setEditParam(false);
+    setPhase({ kind: "published", slug: published, source: result.draft.html });
+  };
+  const reader = /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        display: editing || phase.kind === "published" ? "none" : "contents"
+      },
+      children
+    }
+  );
+  if (phase.kind === "reading" || phase.kind === "off") return reader;
+  if (phase.kind === "published") {
+    return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      reader,
+      /* @__PURE__ */ jsx3(
+        PublishedPost,
+        {
+          source: phase.source,
+          revalidate,
+          href: `${normalizedBasePath(basePath)}/${encodeURIComponent(phase.slug)}`
+        }
+      )
+    ] });
+  }
+  const expiredBanner = editing && expired ? /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      role: "alert",
+      className: `${EDITOR_SCOPE_CLASS} fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-full bg-[#111110] px-5 py-2.5 text-sm text-white shadow-lg`,
+      "data-testid": "blog-host-expired",
+      children: [
+        "Your editing session has ended.",
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: "font-medium underline",
+            onClick: () => {
+              const leave = () => void startHandoff(
+                config,
+                window.location.pathname + `?${EDIT_PARAM}`
+              );
+              if (controller.current) void controller.current.leave(leave);
+              else leave();
+            },
+            children: "Sign in again"
+          }
+        )
+      ]
+    }
+  ) : null;
+  const column = "mx-auto w-full max-w-[720px] px-5 sm:px-8";
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    reader,
+    phase.kind === "idle" ? /* @__PURE__ */ jsx3(
+      "a",
+      {
+        href: `?${EDIT_PARAM}`,
+        className: `${EDITOR_SCOPE_CLASS} ${PILL}`,
+        "data-testid": slug ? "blog-host-edit" : "blog-host-new-post",
+        onClick: (event) => {
+          event.preventDefault();
+          void startEditing();
+        },
+        children: slug ? "Edit" : "New post"
+      }
+    ) : null,
+    phase.kind === "denied" ? /* @__PURE__ */ jsx3(
+      "p",
+      {
+        role: "alert",
+        className: `${EDITOR_SCOPE_CLASS} ${PILL}`,
+        "data-testid": "blog-host-denied",
+        children: "This CodePress account cannot edit this blog."
+      }
+    ) : null,
+    phase.kind === "editing" && slug ? /* @__PURE__ */ jsx3(
+      BlogEditorMount,
+      {
+        site,
+        slug,
+        apiBase,
+        auth,
+        startEditing: true,
+        appUrl,
+        timings,
+        controller,
+        onEditingChange: (open) => {
+          if (!open) stopEditing();
+        },
+        onPublished: (published) => void showPublished(published)
+      }
+    ) : null,
+    phase.kind === "new-form" ? /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `${EDITOR_SCOPE_CLASS} ${column} pt-10 pb-20 sm:pt-14`,
+        "data-testid": "blog-host-new",
+        children: /* @__PURE__ */ jsx3(
+          NewPostForm,
+          {
+            prefix: `${normalizedBasePath(basePath)}/`,
+            onStart: (newSlug) => setPhase({ kind: "new-editing", slug: newSlug })
+          }
+        )
+      }
+    ) : null,
+    phase.kind === "new-editing" ? /* @__PURE__ */ jsx3(
+      BlogEditorMount,
+      {
+        site,
+        slug: phase.slug,
+        apiBase,
+        auth,
+        isNew: true,
+        appUrl,
+        timings,
+        controller,
+        onLeave: stopEditing,
+        onPublished: (published) => void showPublished(published)
+      }
+    ) : null,
+    expiredBanner
+  ] });
+}
+function HostEditorCallback({
+  site,
+  apiBase,
+  basePath
+}) {
+  const [state, setState] = useState3("pending");
+  const [back, setBack] = useState3(normalizedBasePath(basePath));
+  const started = useRef(false);
+  useEffect2(() => {
+    if (started.current) return;
+    started.current = true;
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get("code");
+    const denied = params.has("error");
+    window.history.replaceState(null, "", window.location.pathname);
+    const root = apiBase.replace(/\/+$/, "");
+    const client = createDraftClient({
+      apiBase,
+      auth: { getToken: async () => null }
+    });
+    void (async () => {
+      const handoff = readJson(handoffKey(site));
+      remove(handoffKey(site));
+      const returnTo = safeReturnPath(basePath, handoff?.returnTo);
+      const withoutEditing = withoutEditParam(returnTo);
+      setBack(withoutEditing);
+      if (denied) {
+        navigation.replace(withoutEditing);
+        return;
+      }
+      const capabilities = await client.getCapabilities(site);
+      if (!capabilities) {
+        setState("failed");
+        return;
+      }
+      if (!capabilities.host_editing_enabled) {
+        if (handoff) navigation.replace(withoutEditing);
+        else setState("off");
+        return;
+      }
+      if (!code || !handoff?.verifier) {
+        setState("failed");
+        return;
+      }
+      try {
+        const response = await fetch(
+          `${root}/content-sites/editor-handoff/exchange`,
+          {
+            method: "POST",
+            headers: {
+              Accept: "application/json",
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({ code, verifier: handoff.verifier })
+          }
+        );
+        if (!response.ok) {
+          setState("failed");
+          return;
+        }
+        const body = await response.json();
+        if (body.site !== site || typeof body.token !== "string") {
+          setState("failed");
+          return;
+        }
+        writeJson(tokenKey(site), {
+          token: body.token,
+          expiresAt: Date.now() + body.expires_in * 1e3
+        });
+        navigation.replace(returnTo);
+      } catch {
+        setState("failed");
+      }
+    })();
+  }, [apiBase, basePath, site]);
+  if (state !== "failed") return null;
+  return /* @__PURE__ */ jsxs3(
+    "main",
+    {
+      className: `${EDITOR_SCOPE_CLASS} mx-auto w-full max-w-[720px] px-5 pt-10 pb-20 text-[#111110]`,
+      "data-testid": "blog-host-callback-failed",
+      children: [
+        /* @__PURE__ */ jsx3("h1", { className: "text-2xl font-medium", children: "Could not start editing" }),
+        /* @__PURE__ */ jsx3("p", { className: "mt-3 text-sm text-[#6B6760]", children: "The sign-in link expired or was already used, or CodePress could not be reached. Go back and press Edit to try again." }),
+        /* @__PURE__ */ jsx3("a", { className: "mt-4 inline-block text-sm underline", href: back, children: "Back to the blog" })
+      ]
+    }
+  );
+}
 export {
   BLOG_TOOLBAR_BOTTOM_VAR,
   BlogEditorMount,
+  CALLBACK_SEGMENT,
+  CONSENT_PATH,
   DEFAULT_HEADER_SELECTOR,
   DEFAULT_TIMINGS,
+  EDITOR_SCOPE_CLASS,
+  EDIT_PARAM,
+  HostEditing,
+  HostEditorCallback,
   NewPostForm,
   appPageUrl,
+  callbackPath,
+  challengeFor,
+  clearSiteToken,
+  consentUrl,
   createDraftClient,
+  createVerifier,
   designUrl,
-  isValidNewSlug
+  isValidNewSlug,
+  readSiteToken,
+  safeReturnPath,
+  startHandoff
 };