@codepress/blog 0.2.0 → 0.3.0

package/README.md

@@ -14,10 +14,10 @@ npm install
 `/blog/feed.xml` and `/blog/sitemap.xml`, plus `codepress-blog.ts` with the
 config. The pages render inside your root layout and import
 `@codepress/blog/blog.css`. It checks both the `app/` and `pages/` trees
-first and changes nothing if `/blog` is already served. `--force` overwrites the
+first (each where Next.js serves it: a root `app/` hides `src/app/`) and changes nothing if `/blog` is already served. `--force` overwrites the
 files `init` itself writes and keeps other `/blog` routes, but a `/blog` URL
 served from a different file (the other router, a route group,
-`pages/blog.tsx`) still stops it: move or delete that file first. Other options: `--base-path`, `--api-base`, `--revalidate`,
+`pages/blog.tsx`) still stops it: move or delete that file first. Other options: `--base-path`, `--api-base`, `--app-url`, `--revalidate`,
 `--router app|pages`. Pages regenerate every 60 seconds (ISR); if the CodePress
 API is down, the last good page keeps being served. Run `npx @codepress/blog --help`
 for the full list.
@@ -26,6 +26,25 @@ The package is ESM and uses `html-react-parser`, whose dependencies are
 ESM-only. Run Next.js on Node 20.19+ or 22.12+ (these versions can `require()`
 ESM), or add `@codepress/blog` and `html-react-parser` to `transpilePackages`.
 
+## Edit posts on your site
+
+`init` also writes `codepress-blog-editor.tsx`, a `"use client"` file that
+re-exports the editor, and a `/blog/__cp/callback` route, and adds the editor's
+Tiptap peer dependencies. Nothing shows until your CodePress organization turns
+on **Blog host editing** and an admin adds your site's origin
+(`https://your.site`) to the content site's allowed origins.
+
+Then an editor sees **Edit** on each post (and **New post** on the index).
+Edit (or `?cp-edit` on the URL) asks codepress.dev to sign them in and approve
+"Edit <blog> on <your site>?"; CodePress sends them back to the callback with
+a one-time code, which the page trades (with a PKCE verifier it kept) for a
+token that edits this blog's posts only, for 30 minutes, in that tab. The
+editor opens over the post with the same toolbar as codepress.dev/blog, pinned
+below your `[data-blog-header]` element. After Publish it shows the post as
+CodePress now serves it; your page catches up within its ISR window.
+Clicking one of your own links while editing saves first. When the token
+expires, the editor asks for consent again.
+
 ## Entries
 
 - `@codepress/blog` (server-safe, no React)
@@ -57,10 +76,11 @@ ESM), or add `@codepress/blog` and `html-react-parser` to `transpilePackages`.
   `[data-blog-header]`, else the page's first `header`, else the top),
   `column`, `onPublished`, `onLeave`, `slots.askPanel`, `slots.designLink` and
   `actions.askCodePress`. `NewPostForm` starts a post (`new` is reserved).
-  Tiptap `3.24.0` is a peer dependency. The editor is styled with Tailwind
-  utilities: a Tailwind v4 host adds `@source` for this package's
-  `src/editor` in this workspace, or `dist/editor` when it installs the
-  package from npm.
+  Tiptap `3.24.0` is a peer dependency. `HostEditing` and
+  `HostEditorCallback` are the editing on a site's own page described above;
+  import them from a `"use client"` file. The editor is styled with Tailwind
+  utilities: a site without Tailwind v4 imports `@codepress/blog/editor.css`
+  (scoped to the editor, so it cannot restyle the page).
 - `@codepress/blog/editor/client`: `createDraftClient({ apiBase, auth })`, the
   draft API without the editor.
 

package/dist/chunks/{BlogEditor-EDAPNNP5.js → BlogEditor-IYNL6C7G.js}

@@ -1,5 +1,16 @@
-import "./chunk-HWR3R5MU.js";
 import "./chunk-QX6276YA.js";
+import {
+  BLOG_TOOLBAR_BOTTOM_VAR,
+  DEFAULT_COLUMN,
+  EDITOR_SCOPE_CLASS,
+  EditDesignLink,
+  assemblePostFile,
+  canonicalBlock,
+  parsePostSource,
+  resolveTimings,
+  useHeaderOffset
+} from "./chunk-BPAM7T27.js";
+import "./chunk-HWR3R5MU.js";
 import {
   COMPONENT_VIEWS
 } from "./chunk-AJVVTSKZ.js";
@@ -10,13 +21,6 @@ import {
 } from "./chunk-EICE5ONB.js";
 import "./chunk-TYX2HJZC.js";
 import "./chunk-AEQDRBA3.js";
-import {
-  BLOG_TOOLBAR_BOTTOM_VAR,
-  DEFAULT_COLUMN,
-  EditDesignLink,
-  resolveTimings,
-  useHeaderOffset
-} from "./chunk-UA243KAQ.js";
 import {
   BLOCK_ID_ATTRIBUTE,
   CALLOUT_TYPES,
@@ -29,207 +33,6 @@ import {
 import { EditorContent, useEditor } from "@tiptap/react";
 import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 
-// src/editor/document.ts
-import { isTag, isText } from "domhandler";
-import { parseDocument } from "htmlparser2";
-var META_ATTRIBUTE = "data-cp-meta";
-var WHITESPACE = /^\s*$/;
-var ASCII_SPACES = /[ \t\n\f\r]+/g;
-var ASCII_EDGE_START = /^[ \t\n\f\r]+/;
-var ASCII_EDGE_END = /[ \t\n\f\r]+$/;
-var ASCII_BLANK = /^[ \t\n\f\r]*$/;
-function textOf(node) {
-  return "data" in node && typeof node.data === "string" ? node.data : "";
-}
-function parseMeta(script) {
-  try {
-    const value = JSON.parse(script.children.map(textOf).join(""));
-    if (value && typeof value === "object" && !Array.isArray(value)) {
-      return { meta: value };
-    }
-  } catch {
-  }
-  return { meta: {}, problem: "The metadata block is not a JSON object." };
-}
-function parsePostSource(source) {
-  const doc = parseDocument(source, {
-    withStartIndices: true,
-    withEndIndices: true
-  });
-  const result = {
-    prefix: "",
-    metaText: "",
-    meta: {},
-    blocks: [],
-    gaps: [],
-    problems: []
-  };
-  let gap = "";
-  let sawMeta = false;
-  for (const node of doc.children) {
-    const start = node.startIndex ?? 0;
-    const end = (node.endIndex ?? start) + 1;
-    if (isText(node)) {
-      const raw = source.slice(start, end);
-      if (!WHITESPACE.test(raw)) {
-        result.problems.push(
-          `Text outside any block: "${raw.trim().slice(0, 40)}".`
-        );
-      }
-      gap += raw;
-      continue;
-    }
-    if (!isTag(node)) {
-      result.problems.push("The file contains a comment or directive.");
-      gap += source.slice(start, end);
-      continue;
-    }
-    if (!sawMeta) {
-      sawMeta = true;
-      if (node.name === "script" && META_ATTRIBUTE in node.attribs) {
-        result.prefix = gap;
-        result.metaText = source.slice(start, end);
-        const parsed = parseMeta(node);
-        result.meta = parsed.meta;
-        if (parsed.problem) result.problems.push(parsed.problem);
-        gap = "";
-        continue;
-      }
-      result.problems.push("The file has no metadata block.");
-    }
-    result.gaps.push(gap);
-    gap = "";
-    result.blocks.push({
-      id: node.attribs[BLOCK_ID_ATTRIBUTE] ?? null,
-      tag: node.name,
-      text: source.slice(start, end)
-    });
-  }
-  if (!sawMeta) result.problems.push("The file has no metadata block.");
-  result.gaps.push(gap);
-  return result;
-}
-function serializeMeta(meta) {
-  const json = JSON.stringify(meta, null, 2).split("\n").map((line) => `  ${line}`).join("\n");
-  return `<script type="application/json" ${META_ATTRIBUTE}>
-${json}
-</script>`;
-}
-function sameJson(a, b) {
-  return JSON.stringify(canonicalJson(a)) === JSON.stringify(canonicalJson(b));
-}
-function canonicalJson(value) {
-  if (Array.isArray(value)) return value.map(canonicalJson);
-  if (value && typeof value === "object") {
-    return Object.fromEntries(
-      Object.entries(value).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([key, item]) => [key, canonicalJson(item)])
-    );
-  }
-  return value;
-}
-function assemblePostFile(source, meta, blocks) {
-  const keepMeta = source && source.metaText && sameJson(source.meta, meta);
-  const metaText = keepMeta ? source.metaText : serializeMeta(meta);
-  let out = (source?.prefix ?? "") + metaText;
-  let gap = "\n";
-  blocks.forEach((block, position) => {
-    const origin = block.sourceIndex ?? block.replaces ?? null;
-    if (source && origin != null) gap = source.gaps[origin] || "\n";
-    else if (source && position === 0) gap = source.gaps[0] || "\n";
-    const original = block.sourceIndex != null ? source?.blocks[block.sourceIndex] : void 0;
-    out += gap + (original ? original.text : block.html);
-  });
-  const trailing = source ? source.gaps[source.gaps.length - 1] : "\n";
-  return out + (trailing || "\n");
-}
-var BLOCK_TAGS = /* @__PURE__ */ new Set([
-  "p",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "ul",
-  "ol",
-  "li",
-  "blockquote",
-  "pre",
-  "hr",
-  "table",
-  "thead",
-  "tbody",
-  "tr",
-  "th",
-  "td",
-  "figure",
-  "figcaption",
-  "div",
-  "cp-callout",
-  "cp-figure"
-]);
-var VOID_TAGS = /* @__PURE__ */ new Set(["br", "hr", "img"]);
-function collapse(text) {
-  return text.replace(ASCII_SPACES, " ");
-}
-function canonicalAttributes(node) {
-  return Object.entries(node.attribs).filter(([name]) => name !== BLOCK_ID_ATTRIBUTE).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([name, value]) => {
-    if (name === PROPS_ATTRIBUTE) {
-      try {
-        return `${name}=${JSON.stringify(canonicalJson(JSON.parse(value)))}`;
-      } catch {
-      }
-    }
-    return `${name}=${JSON.stringify(value)}`;
-  }).join(" ");
-}
-function canonicalChildren(children, preformatted, trimEdges) {
-  const parts = children.map(
-    (child) => isTag(child) ? { tag: child.name, text: canonicalElement(child, preformatted) } : {
-      tag: null,
-      text: preformatted ? textOf(child) : collapse(textOf(child))
-    }
-  );
-  if (!preformatted && trimEdges) {
-    const first = parts[0];
-    const last = parts[parts.length - 1];
-    if (first && first.tag === null)
-      first.text = first.text.replace(ASCII_EDGE_START, "");
-    if (last && last.tag === null)
-      last.text = last.text.replace(ASCII_EDGE_END, "");
-  }
-  return parts.filter((part, index) => {
-    if (preformatted || part.tag !== null) return true;
-    if (part.text === "") return false;
-    if (!ASCII_BLANK.test(part.text)) return true;
-    const neighbours = [parts[index - 1], parts[index + 1]];
-    return !neighbours.some((n) => n?.tag != null && BLOCK_TAGS.has(n.tag));
-  }).map((part) => part.text).join("");
-}
-var PARAGRAPH_WRAPPED = /* @__PURE__ */ new Set(["li", "blockquote", "cp-callout"]);
-function comparableChildren(node) {
-  if (!PARAGRAPH_WRAPPED.has(node.name)) return node.children;
-  const meaningful = node.children.filter(
-    (child) => !(isText(child) && ASCII_BLANK.test(child.data))
-  );
-  const only = meaningful.length === 1 ? meaningful[0] : void 0;
-  if (only && isTag(only) && only.name === "p" && Object.keys(only.attribs).every((name) => name === BLOCK_ID_ATTRIBUTE)) {
-    return only.children;
-  }
-  return node.children;
-}
-function canonicalElement(node, preformatted) {
-  const attributes = canonicalAttributes(node);
-  const open = `<${node.name}${attributes ? ` ${attributes}` : ""}>`;
-  if (VOID_TAGS.has(node.name)) return open;
-  const inside = preformatted || node.name === "pre";
-  const trimEdges = BLOCK_TAGS.has(node.name);
-  return `${open}${canonicalChildren(comparableChildren(node), inside, trimEdges)}</${node.name}>`;
-}
-function canonicalBlock(html) {
-  return canonicalChildren(parseDocument(html).children, false, true);
-}
-
 // src/editor/extensions.ts
 import { Extension as Extension3 } from "@tiptap/react";
 import { Plugin as Plugin2 } from "@tiptap/pm/state";
@@ -843,6 +646,7 @@ function DropdownMenuContent({
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: twMerge(
+        EDITOR_SCOPE_CLASS,
         "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
         className
       ),
@@ -898,6 +702,7 @@ function TooltipContent({
       "data-slot": "tooltip-content",
       sideOffset,
       className: twMerge(
+        EDITOR_SCOPE_CLASS,
         "bg-white text-black shadow-lg border border-gray-200 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10050] w-fit rounded-md px-3 py-1.5 text-xs",
         className
       ),
@@ -1811,6 +1616,21 @@ function revisionOf(draft) {
     revision: typeof draft.revision === "number" ? draft.revision : null
   };
 }
+var unsavedKey = (site, slug) => `cp-blog-unsaved:${site}/${slug}`;
+function readUnsaved(site, slug) {
+  try {
+    return window.sessionStorage.getItem(unsavedKey(site, slug));
+  } catch {
+    return null;
+  }
+}
+function keepUnsaved(site, slug, text) {
+  try {
+    if (text === null) window.sessionStorage.removeItem(unsavedKey(site, slug));
+    else window.sessionStorage.setItem(unsavedKey(site, slug), text);
+  } catch {
+  }
+}
 var fieldClass = "w-full border-0 bg-transparent p-0 text-[#111110] outline-none placeholder:text-[#B8B4A9] focus:ring-0";
 function listField(value) {
   return Array.isArray(value) ? value.join(", ") : "";
@@ -1886,12 +1706,25 @@ function LoadedEditor({
   const [confirmDiscard, setConfirmDiscard] = useState3(false);
   const [published, setPublished] = useState3(false);
   const [leaveWarning, setLeaveWarning] = useState3(false);
+  const [recovered, setRecovered] = useState3(() => {
+    const text = readUnsaved(site, slug);
+    return text !== null && text !== savedTextRef.current ? text : null;
+  });
+  const recoveredRef = useRef2(recovered);
+  const remember = useCallback(
+    (text) => {
+      if (recoveredRef.current === null) keepUnsaved(site, slug, text);
+    },
+    [site, slug]
+  );
+  const [restoreError, setRestoreError] = useState3(null);
+  const [restoring, setRestoring] = useState3(false);
   const leaveToRef = useRef2(onExit);
   const [formattingOff, setFormattingOff] = useState3(false);
   const [linkOpen, setLinkOpen] = useState3(false);
   const linkShortcutRef = useRef2(() => {
   });
-  const frozen = busy !== null || published;
+  const frozen = busy !== null || published || restoring;
   const extensions = useMemo2(
     () => editorExtensions({
       onSlash: setSlash,
@@ -1947,9 +1780,9 @@ function LoadedEditor({
       setViolations([]);
       setMessage(null);
       const again = compose();
-      setStatus(
-        again && again.text !== savedTextRef.current ? "dirty" : "saved"
-      );
+      const unsaved = again && again.text !== savedTextRef.current ? again.text : null;
+      remember(unsaved);
+      setStatus(unsaved !== null ? "dirty" : "saved");
       return true;
     }
     if (result.kind === "conflict") {
@@ -1965,7 +1798,7 @@ function LoadedEditor({
       setStatus("error");
     }
     return false;
-  }, [client, compose, site, slug]);
+  }, [client, compose, remember, site, slug]);
   const save = useCallback(async () => {
     while (inflightRef.current) await inflightRef.current;
     const run = saveNow();
@@ -1990,14 +1823,16 @@ function LoadedEditor({
     if (composed.text === savedTextRef.current) {
       if (timerRef.current) clearTimeout(timerRef.current);
       timerRef.current = null;
+      remember(null);
       if (!blockedRef.current)
         setStatus(inflightRef.current ? "saving" : "idle");
       return;
     }
+    remember(composed.text);
     if (blockedRef.current) return;
     setStatus((current) => current === "saving" ? current : "dirty");
     schedule();
-  }, [compose, schedule]);
+  }, [compose, remember, schedule]);
   const editor = useEditor({
     immediatelyRender: false,
     extensions,
@@ -2027,12 +1862,26 @@ function LoadedEditor({
       }
     };
   }, [editor]);
+  const saveRef = useRef2(save);
+  useEffect2(() => {
+    saveRef.current = save;
+  });
   useEffect2(
     () => () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
+      if (!timerRef.current) return;
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+      if (!blockedRef.current && !publishingRef.current) {
+        void saveRef.current();
+      }
     },
     []
   );
+  useEffect2(() => {
+    if (readUnsaved(site, slug) === savedTextRef.current) {
+      keepUnsaved(site, slug, null);
+    }
+  }, [site, slug]);
   useEffect2(() => {
     const interval = setInterval(async () => {
       if (inflightRef.current || blockedRef.current || publishingRef.current) {
@@ -2063,6 +1912,20 @@ function LoadedEditor({
     window.addEventListener("beforeunload", warn);
     return () => window.removeEventListener("beforeunload", warn);
   }, [status, published]);
+  useEffect2(() => {
+    const flush = () => {
+      if (blockedRef.current || publishingRef.current) return;
+      const composed = compose();
+      if (!composed || composed.text === savedTextRef.current) return;
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = null;
+      void client.saveDraft(site, slug, composed.text, baseShaRef.current, {
+        keepalive: true
+      });
+    };
+    window.addEventListener("pagehide", flush);
+    return () => window.removeEventListener("pagehide", flush);
+  }, [client, compose, site, slug]);
   const updateMeta = (patch) => {
     const next = { ...metaRef.current, ...patch };
     for (const [key, value] of Object.entries(next)) {
@@ -2081,7 +1944,20 @@ function LoadedEditor({
     void save();
   };
   const takeTheirs = () => {
-    if (conflict) onReload(conflict);
+    if (!conflict) return;
+    keepUnsaved(site, slug, null);
+    onReload(conflict);
+  };
+  const dismissRecovered = () => {
+    recoveredRef.current = null;
+    const composed = compose();
+    keepUnsaved(
+      site,
+      slug,
+      composed && composed.text !== savedTextRef.current ? composed.text : null
+    );
+    setRecovered(null);
+    setRestoreError(null);
   };
   const flushSave = async () => {
     if (timerRef.current) clearTimeout(timerRef.current);
@@ -2089,6 +1965,34 @@ function LoadedEditor({
     return save();
   };
   const freeze = (on) => editorRef.current?.setEditable(!on, false);
+  const restoreRecovered = async () => {
+    if (recovered === null || publishingRef.current) return;
+    setRestoreError(null);
+    setRestoring(true);
+    publishingRef.current = true;
+    freeze(true);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+      await save();
+    }
+    while (inflightRef.current) await inflightRef.current;
+    const request = client.saveDraft(site, slug, recovered, baseShaRef.current);
+    inflightRef.current = request.then((result2) => result2.kind === "saved");
+    const result = await request;
+    inflightRef.current = null;
+    if (result.kind === "saved") {
+      keepUnsaved(site, slug, null);
+      onReload(result.draft);
+      return;
+    }
+    publishingRef.current = false;
+    freeze(false);
+    setRestoring(false);
+    setRestoreError(
+      result.kind === "conflict" ? "This draft was changed since those edits were made, so they were not restored." : result.kind === "rejected" ? result.detail : result.message
+    );
+  };
   const handlePublish = async () => {
     setBusy("publishing");
     setMessage(null);
@@ -2140,6 +2044,7 @@ function LoadedEditor({
     const result = await client.discardDraft(site, slug);
     setBusy(null);
     if (result.kind === "ok" || result.kind === "error" && result.status === 404) {
+      keepUnsaved(site, slug, null);
       setPublished(true);
       onDiscarded();
       return;
@@ -2180,7 +2085,7 @@ function LoadedEditor({
   }, [controller]);
   if (!editor) return null;
   const canSave = status !== "conflict";
-  return /* @__PURE__ */ jsxs7("div", { "data-testid": "blog-editor", children: [
+  return /* @__PURE__ */ jsxs7("div", { "data-testid": "blog-editor", className: EDITOR_SCOPE_CLASS, children: [
     /* @__PURE__ */ jsx7(
       Toolbar,
       {
@@ -2240,7 +2145,12 @@ function LoadedEditor({
                   type: "button",
                   className: "rounded-md border border-[#D9D5CC] px-3 py-1",
                   "data-testid": "blog-leave-anyway",
-                  onClick: () => leaveToRef.current(),
+                  onClick: () => {
+                    if (timerRef.current) clearTimeout(timerRef.current);
+                    timerRef.current = null;
+                    keepUnsaved(site, slug, null);
+                    leaveToRef.current();
+                  },
                   children: "Leave without saving"
                 }
               )
@@ -2248,6 +2158,43 @@ function LoadedEditor({
           ]
         }
       ) : null,
+      recovered !== null ? /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: "mb-4 rounded-lg border border-[#F1D6A3] bg-[#FFF9EC] px-4 py-3 text-sm",
+          role: "alert",
+          "data-testid": "blog-unsaved-banner",
+          children: [
+            /* @__PURE__ */ jsx7("p", { className: "font-medium", children: "This tab has edits to this post that were never saved." }),
+            /* @__PURE__ */ jsx7("p", { className: "mt-1 text-[#4A4740]", children: "Restoring saves them over the draft as it is now." }),
+            restoreError ? /* @__PURE__ */ jsx7("p", { className: "mt-1 text-red-800", children: restoreError }) : null,
+            /* @__PURE__ */ jsxs7("div", { className: "mt-3 flex gap-2", children: [
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded-md bg-[#111110] px-3 py-1 text-white",
+                  "data-testid": "blog-unsaved-restore",
+                  disabled: restoring,
+                  onClick: () => void restoreRecovered(),
+                  children: "Restore them"
+                }
+              ),
+              /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  className: "rounded-md border border-[#D9D5CC] px-3 py-1",
+                  "data-testid": "blog-unsaved-dismiss",
+                  disabled: restoring,
+                  onClick: dismissRecovered,
+                  children: "Discard them"
+                }
+              )
+            ] })
+          ]
+        }
+      ) : null,
       published ? /* @__PURE__ */ jsx7(
         "p",
         {