@pramen/cms-editor 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pramen/cms-editor",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Visual block/page editor for @pramen/cms — a standalone React SPA that talks to the CMS handlers over HTTP.",
   "license": "MIT",
   "repository": {

package/src/components.tsx

@@ -164,7 +164,6 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
   const [ct, setCt] = useState<ContentType | null>(null);
   const [assembled, setAssembled] = useState<AssembledPage | null>(null);
   const [err, setErr] = useState("");
-  const [msg, setMsg] = useState("");
 
   const btBySlug = useMemo(() => new Map(blockTypes.map((b) => [b.slug, b])), [blockTypes]);
 
@@ -180,12 +179,16 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
   useEffect(() => { reload(); }, [reload]);
 
   const regions: RegionDefinition[] = ct?.regions ?? [];
-  const flash = (m: string) => { setMsg(m); setTimeout(() => setMsg(""), 1800); };
+
+  const patchRegion = (region: string, fn: (list: RenderedBlock[]) => RenderedBlock[]) =>
+    setAssembled((prev) => (prev ? { ...prev, regions: { ...prev.regions, [region]: fn(prev.regions[region] ?? []) } } : prev));
 
   const addBlock = async (region: string, slug: string) => {
+    // Optimistic: show a placeholder immediately (no wait for the round trip), then
+    // reconcile with the persisted row addBlock echoes — or roll it back on failure.
+    const tempId = `tmp:${crypto.randomUUID()}`;
+    patchRegion(region, (list) => [...list, { id: tempId, block_id: tempId, block_type: slug, title: null, fields: {}, is_shared: false, pending: true }]);
     try {
-      // addBlock echoes the created block + placement, so append it locally instead of a
-      // full getContentType+getPage reload — one round trip instead of three.
       const { block, placement } = await api.call<{
         block: { id: string; title?: string | null; fields?: Record<string, unknown> | null };
         placement: { id: string; isShared?: boolean | number };
@@ -198,9 +201,9 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
         fields: block.fields ?? {},
         is_shared: Boolean(placement.isShared),
       };
-      setAssembled((prev) => (prev ? { ...prev, regions: { ...prev.regions, [region]: [...(prev.regions[region] ?? []), rb] } } : prev));
-      flash("block added");
+      patchRegion(region, (list) => list.map((b) => (b.id === tempId ? rb : b)));
     } catch (e) {
+      patchRegion(region, (list) => list.filter((b) => b.id !== tempId));
       setErr(errMsg(e));
     }
   };
@@ -268,7 +271,6 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
 
       <div className="overflow-auto py-1.5">
         {err ? <Banner>{err}</Banner> : null}
-        {msg ? <Banner ok>{msg}</Banner> : null}
         {regions.map((r) => {
           const blocks = assembled?.regions[r.name] ?? [];
           const allowed = r.allowedTypes && r.allowedTypes.length ? r.allowedTypes : blockTypes.map((b) => b.slug);
@@ -320,9 +322,9 @@ export function PageEditor({ api, page, blockTypes, tab, onTab, onBack, onChange
 }
 
 // A single block, edited inline: the block IS its editor. Fields render in place (rich text
-// as the WYSIWYG, media as a thumbnail picker), and edits autosave — debounced while typing,
-// flushed on blur and on unmount — so there's no separate "save block" step and no full page
-// reload that would drop the caret. Collapse folds it to a one-line plain-text preview.
+// as the WYSIWYG, media as a thumbnail picker). Edits are held locally and committed only on
+// an explicit Save — the header + footer show an "unsaved" state until you do, and nothing is
+// written until you click Save. Collapse folds it to a one-line plain-text preview.
 function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, onPatch, onError, dragging, isOver, onDragStartBlock, onDragOverBlock, onDropBlock, onDragEndBlock }: {
   api: Api;
   block: RenderedBlock;
@@ -343,45 +345,47 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
   const [fields, setFields] = useState<Record<string, unknown> | null>(null);
   const [collapsed, setCollapsed] = useState(false);
   const [saveState, setSaveState] = useState<"idle" | "saving" | "saved">("idle");
-  const pending = useRef<Record<string, unknown> | null>(null);
-  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const saved = useRef<string>(""); // JSON of the last-persisted fields — the dirty baseline
   const cardRef = useRef<HTMLDivElement>(null);
   const blockId = block.block_id;
   const placementId = block.id;
 
   // Load RAW fields (media as ids, richtext as HTML) so the value round-trips on save.
+  // A pending optimistic block has no persisted row yet — start empty and skip the fetch
+  // (its temp id would 404); when it reconciles to real ids the card remounts and fetches.
   useEffect(() => {
+    if (block.pending) { setFields({}); saved.current = "{}"; return; }
     let alive = true;
-    api.call<{ fields?: Record<string, unknown> }>("getBlock", { blockId }).then((b) => { if (alive) setFields(b?.fields ?? {}); }).catch((e) => onError(errMsg(e)));
+    api.call<{ fields?: Record<string, unknown> }>("getBlock", { blockId }).then((b) => {
+      if (!alive) return;
+      const f = b?.fields ?? {};
+      setFields(f);
+      saved.current = JSON.stringify(f);
+    }).catch((e) => onError(errMsg(e)));
     return () => { alive = false; };
-  }, [api, blockId, onError]);
+  }, [api, blockId, onError, block.pending]);
+
+  const dirty = fields != null && JSON.stringify(fields) !== saved.current;
 
-  const flush = useCallback(async () => {
-    if (timer.current) { clearTimeout(timer.current); timer.current = undefined; }
-    const next = pending.current;
-    if (!next) return;
-    pending.current = null;
+  // Explicit save — the ONLY thing that writes. No autosave, no save-on-blur, no save-on-unmount.
+  const save = useCallback(async () => {
+    if (block.pending || fields == null) return;
+    const snapshot = JSON.stringify(fields);
+    if (snapshot === saved.current) return;
     setSaveState("saving");
     try {
-      await api.call("updateBlock", { blockId, fields: next });
-      onPatch(placementId, next);
+      await api.call("updateBlock", { blockId, fields });
+      saved.current = snapshot;
+      onPatch(placementId, fields);
       setSaveState("saved");
-      setTimeout(() => setSaveState((s) => (s === "saved" ? "idle" : s)), 1200);
+      setTimeout(() => setSaveState((s) => (s === "saved" ? "idle" : s)), 1500);
     } catch (e) {
       onError(errMsg(e));
       setSaveState("idle");
     }
-  }, [api, blockId, placementId, onPatch, onError]);
+  }, [api, blockId, placementId, fields, onPatch, onError, block.pending]);
 
-  // Flush a pending edit if the card unmounts (nav away, reorder remount) before the debounce.
-  useEffect(() => () => { if (pending.current) void flush(); }, [flush]);
-
-  const change = (next: Record<string, unknown>) => {
-    setFields(next);
-    pending.current = next;
-    if (timer.current) clearTimeout(timer.current);
-    timer.current = setTimeout(() => void flush(), 700);
-  };
+  const change = (next: Record<string, unknown>) => setFields(next);
 
   const schema: FieldDefinition[] = blockType?.fieldsSchema ?? [];
   const name = blockType?.name ?? block.block_type;
@@ -392,7 +396,7 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
     // image is set to the whole card so you drag a preview of the block, not just the grip.
     <div
       ref={cardRef}
-      className={`mb-2.5 rounded-panel border bg-surface-card transition-colors ${isOver ? "border-brand-green" : "border-border"} ${dragging ? "opacity-40" : ""}`}
+      className={`mb-2.5 rounded-panel border bg-surface-card transition-colors ${isOver ? "border-brand-green" : "border-border"} ${dragging ? "opacity-40" : ""} ${block.pending ? "pointer-events-none opacity-60" : ""}`}
       onDragOver={(e) => { e.preventDefault(); onDragOverBlock(); }}
       onDrop={(e) => { e.preventDefault(); onDropBlock(); }}
     >
@@ -412,7 +416,7 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
         <button type="button" className="w-4 shrink-0 text-fg-subtle hover:text-fg" title={collapsed ? "Expand" : "Collapse"} onClick={() => setCollapsed((c) => !c)}>{collapsed ? "▸" : "▾"}</button>
         <span className="font-medium text-fg">{name}</span>
         {block.is_shared ? <span className="text-[11px] text-accent-strong">shared</span> : null}
-        <span className="text-[11px] text-fg-subtle">{saveState === "saving" ? "saving…" : saveState === "saved" ? "saved ✓" : ""}</span>
+        <span className={`text-[11px] ${dirty && saveState !== "saving" ? "text-accent-strong" : "text-fg-subtle"}`}>{saveState === "saving" ? "saving…" : saveState === "saved" ? "saved ✓" : dirty ? "● unsaved" : ""}</span>
         <span className="flex-1" />
         <Button variant="ghost" size="sm" isDisabled={isFirst} onPress={() => onMove(-1)}>↑</Button>
         <Button variant="ghost" size="sm" isDisabled={isLast} onPress={() => onMove(1)}>↓</Button>
@@ -423,15 +427,25 @@ function BlockCard({ api, block, blockType, isFirst, isLast, onMove, onRemove, o
           {fields == null ? "…" : blockPreview(fields) || <span className="italic">empty</span>}
         </div>
       ) : (
-        // onBlur bubbles from the inner inputs — leaving the block flushes any pending edit
-        // immediately (flush() no-ops when nothing is pending, so tabbing between fields is free).
-        <div className="border-t border-border px-3.5 py-3.5" onBlur={() => void flush()}>
+        <div className="border-t border-border px-3.5 py-3.5">
           {fields == null ? (
             <p className="text-sm text-fg-subtle">loading…</p>
           ) : schema.length === 0 ? (
             <p className="text-sm text-fg-subtle">This block has no editable fields.</p>
           ) : (
-            <FieldForm schema={schema} value={fields} onChange={change} api={api} />
+            <>
+              <FieldForm schema={schema} value={fields} onChange={change} api={api} />
+              <div className="mt-3.5 flex items-center gap-2 border-t border-border pt-3">
+                <Button size="sm" onPress={() => void save()} isDisabled={!dirty || saveState === "saving" || block.pending}>
+                  {saveState === "saving" ? "Saving…" : "Save"}
+                </Button>
+                {dirty ? (
+                  <span className="text-[11px] text-accent-strong">Unsaved changes</span>
+                ) : saveState === "saved" ? (
+                  <span className="text-[11px] text-fg-subtle">Saved ✓</span>
+                ) : null}
+              </div>
+            </>
           )}
         </div>
       )}

package/src/types.ts

@@ -95,6 +95,7 @@ export interface RenderedBlock {
   title: string | null;
   fields: Record<string, unknown>;
   is_shared: boolean;
+  pending?: boolean; // optimistic placeholder — not yet persisted (temp ids, no getBlock)
 }
 
 export interface AssembledPage {