// EditMode.jsx — storefront inline WYSIWYG edit mode.
//
// Entered by opening the storefront with ?edit=1 (the admin has a link for it).
// When on, the admin can edit text, prices, and images directly on the page;
// every change saves live to the admin API. Browser-cached basic-auth (from
// having signed into /admin) authorises those calls — no passcode needed.
//
// This module exposes, on window:
// EditCtx — React context: { edit, saveSku, saveSetting, saveSeries,
// saveLook, upload, status }. Components read `edit` to decide
// whether to render editable affordances.
// EditableText — inline-editable text (single or multiline) when edit is on,
// plain text otherwise.
// EditableImage — click/drop-to-replace overlay for a photo (edit only).
// EditBar — floating status/exit bar.
// sbAdmin — fetch helpers for the admin API (patch/put/post/upload).
// SB_EDIT — boolean, true when ?edit=1 is present.
window.SB_EDIT = (() => {
try { return new URLSearchParams(window.location.search).get("edit") === "1"; }
catch { return false; }
})();
window.EditCtx = React.createContext({ edit: false });
// ── Admin API helpers (same-origin; cached basic-auth is sent automatically) ──
async function adminReq(method, path, body) {
const opts = { method, credentials: "same-origin", headers: {} };
if (body !== undefined) {
opts.headers["Content-Type"] = "application/json";
opts.body = JSON.stringify(body);
}
const res = await fetch(path, opts);
const text = await res.text();
let data; try { data = text ? JSON.parse(text) : {}; } catch { data = { error: text }; }
if (!res.ok) throw Object.assign(new Error(data.error || res.statusText), { status: res.status });
return data;
}
window.sbAdmin = {
get: (p) => adminReq("GET", p),
patch: (p, b) => adminReq("PATCH", p, b),
put: (p, b) => adminReq("PUT", p, b),
post: (p, b) => adminReq("POST", p, b),
del: (p) => adminReq("DELETE", p),
upload: async (file) => {
const fd = new FormData();
fd.append("file", file);
const res = await fetch("/api/admin/upload", { method: "POST", credentials: "same-origin", body: fd });
const data = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(data.error || res.statusText);
return data; // { path, size }
},
};
// ── Inline-editable text ──────────────────────────────────────────────
// Uncontrolled contentEditable: we seed the DOM text via a ref (so the caret
// never jumps mid-type) and read it back on blur. The parent only re-renders
// after blur → save, so editing is smooth.
function EditableText({ value, onSave, multiline, className, style, placeholder, tag }) {
const ctx = React.useContext(window.EditCtx);
const ref = React.useRef(null);
const Tag = tag || "span";
const editing = ctx && ctx.edit;
React.useEffect(() => {
if (editing && ref.current && document.activeElement !== ref.current) {
ref.current.textContent = value == null ? "" : String(value);
}
}, [value, editing]);
if (!editing) return {value};
const commit = () => {
const next = (ref.current.textContent || "").trim();
if (next !== (value == null ? "" : String(value)).trim()) onSave(next);
};
return (
e.stopPropagation()}
onMouseDown={(e) => e.stopPropagation()}
onBlur={commit}
onKeyDown={(e) => {
if (e.key === "Enter" && !multiline) { e.preventDefault(); e.currentTarget.blur(); }
if (e.key === "Escape") { e.currentTarget.textContent = value == null ? "" : String(value); e.currentTarget.blur(); }
}}
/>
);
}
window.EditableText = EditableText;
// ── Click / drop-to-replace photo overlay ─────────────────────────────
// Renders nothing unless edit is on. When on, it's an absolutely-positioned
// layer that fills its (position:relative) parent — drop a file or click to
// upload, then onPick(path) is called with the new image path.
// Rendered as a small corner chip (not a full-cover layer) so any editable text
// sitting on top of the image — e.g. the cover letter — stays clickable. The
// chip is both the click target and a drop target.
function EditableImage({ onPick, title }) {
const ctx = React.useContext(window.EditCtx);
const [over, setOver] = React.useState(false);
const inputRef = React.useRef(null);
if (!ctx || !ctx.edit) return null;
const handle = (files) => { const f = files && files[0]; if (f) ctx.upload(f, onPick); };
return (