@canvas-digital/blog-sdk 2.0.0

package/dist/components/admin/editor/PostEditor.js

@@ -0,0 +1,404 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState, useTransition } from "react";
+import { useAdminMock } from "../mock/store";
+import { formatDateTime } from "../lib/format";
+import { slugify } from "../mock/fixtures";
+import { analyseReadability, analyseSeo, summariseTone, toneLabel, } from "../../../lib/seo-analysis";
+import { YoastSeoMetabox } from "./YoastSeoMetabox";
+import { RichTextEditor } from "./RichTextEditor";
+import { MediaPicker } from "../MediaPicker";
+const ScoreDot = ({ tone }) => (_jsx("span", { className: `seo-dot seo-dot-${tone}`, "aria-hidden": "true" }));
+export function PostEditor({ postId, onDone, }) {
+    const store = useAdminMock();
+    const existing = postId ? store.getPost(postId) : undefined;
+    const brandId = existing?.brandId ?? store.activeBrandId ?? store.brands[0]?.id ?? "";
+    const categories = store.terms("categories", brandId);
+    const tags = store.terms("tags", brandId);
+    const authors = store.terms("authors", brandId);
+    const profile = store.profile;
+    const [title, setTitle] = useState(existing?.title ?? "");
+    const [slug, setSlug] = useState(existing?.slug ?? "");
+    const [excerpt, setExcerpt] = useState(existing?.excerpt ?? "");
+    const [contentHtml, setContentHtml] = useState(existing?.contentHtml ?? "<p><br></p>");
+    const [contentText, setContentText] = useState(() => (existing?.contentHtml ?? "").replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim());
+    const [wordCount, setWordCount] = useState(0);
+    const [status, setStatus] = useState(existing?.status ?? "draft");
+    const [reviewState, setReviewState] = useState(existing?.reviewState ?? "writing");
+    const [categoryIds, setCategoryIds] = useState(existing?.categoryIds ?? []);
+    const [tagIds, setTagIds] = useState(existing?.tagIds ?? []);
+    const [authorIds, setAuthorIds] = useState(existing?.authorIds?.length
+        ? existing.authorIds
+        : authors.find((a) => a.name === profile.name)
+            ? [authors.find((a) => a.name === profile.name).id]
+            : authors[0]
+                ? [authors[0].id]
+                : []);
+    const [visibility, setVisibility] = useState(existing?.visibility ?? "public");
+    const [template, setTemplate] = useState(existing?.template ?? "default");
+    const [authorBox, setAuthorBox] = useState(existing?.authorBox ?? "default");
+    const [allowComments, setAllowComments] = useState(existing?.allowComments ?? true);
+    const [showToc, setShowToc] = useState(existing?.showInTableOfContents ?? true);
+    const [postFormat, setPostFormat] = useState(existing?.postFormat ?? "standard");
+    const [scheduledFor, setScheduledFor] = useState(existing?.scheduledFor ?? null);
+    const [publishedAt, setPublishedAt] = useState(existing?.publishedAt ?? null);
+    const [scheduleWhen, setScheduleWhen] = useState("");
+    const [featuredImage, setFeaturedImage] = useState(() => {
+        if (!existing?.featuredImageId)
+            return null;
+        const hit = store.listMedia(brandId || null, "", 1, 200).items.find((m) => m.id === existing.featuredImageId);
+        return hit ? { id: hit.id, url: hit.url, alt: hit.alt } : null;
+    });
+    const [seo, setSeo] = useState({
+        metaTitle: existing?.seo.metaTitle ?? "",
+        metaDescription: existing?.seo.metaDescription ?? "",
+        focusKeyphrase: existing?.seo.focusKeyphrase ?? "",
+        breadcrumbTitle: "",
+        canonicalOverride: "",
+        noindex: existing?.seo.noindex ?? false,
+        nofollow: false,
+        ogImage: null,
+        ogTitle: "",
+        ogDescription: "",
+        schemaType: "BlogPosting",
+    });
+    const [fieldErrors, setFieldErrors] = useState({});
+    const [error, setError] = useState(null);
+    const [flash, setFlash] = useState(null);
+    const [pending, start] = useTransition();
+    const [slugEditing, setSlugEditing] = useState(false);
+    const [showStatus, setShowStatus] = useState(false);
+    const [showVisibility, setShowVisibility] = useState(false);
+    const [showSchedule, setShowSchedule] = useState(false);
+    const [categoryTab, setCategoryTab] = useState("all");
+    const [newCategory, setNewCategory] = useState("");
+    const [tagDraft, setTagDraft] = useState("");
+    const [newTags, setNewTags] = useState([]);
+    const [featuredDrag, setFeaturedDrag] = useState(false);
+    const [featuredBusy, setFeaturedBusy] = useState(false);
+    const [featuredAltBusy, setFeaturedAltBusy] = useState(false);
+    const [featuredAltSaved, setFeaturedAltSaved] = useState(false);
+    const [pickerFor, setPickerFor] = useState(null);
+    const featuredFileRef = useRef(null);
+    const brand = store.brands.find((b) => b.id === brandId);
+    const categoryName = categories.find((c) => categoryIds.includes(c.id))?.name;
+    const isLive = status === "published";
+    const postIdCurrent = existing?.id;
+    const seoInput = useMemo(() => ({
+        title,
+        slug,
+        excerpt,
+        metaTitle: seo.metaTitle,
+        metaDescription: seo.metaDescription,
+        focusKeyphrase: seo.focusKeyphrase,
+        contentText,
+        contentHtml,
+        hasFeaturedImage: Boolean(featuredImage),
+        featuredAlt: featuredImage?.alt ?? "",
+    }), [title, slug, excerpt, seo, contentText, contentHtml, featuredImage]);
+    const seoChecks = useMemo(() => analyseSeo(seoInput), [seoInput]);
+    const readChecks = useMemo(() => analyseReadability(seoInput), [seoInput]);
+    const seoTone = summariseTone(seoChecks);
+    const readTone = summariseTone(readChecks);
+    const onSeoChange = (key, value) => {
+        setSeo((current) => ({ ...current, [key]: value }));
+    };
+    const onContentChange = useCallback((_doc, stats) => {
+        setContentHtml(stats.html);
+        setWordCount(stats.words);
+        setContentText(stats.html.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim());
+    }, []);
+    const onPickImage = useCallback(async () => {
+        return new Promise((resolve) => {
+            const input = document.createElement("input");
+            input.type = "file";
+            input.accept = "image/*";
+            input.onchange = () => {
+                void (async () => {
+                    const file = input.files?.[0];
+                    if (!file) {
+                        resolve(null);
+                        return;
+                    }
+                    const uploaded = await store.uploadMedia([file], brandId || null);
+                    if (!uploaded.ok || !uploaded.images[0]) {
+                        resolve({ id: `local-${Date.now()}`, url: URL.createObjectURL(file), alt: file.name });
+                        return;
+                    }
+                    const asset = uploaded.images[0];
+                    resolve({ id: asset.id, url: asset.url, alt: asset.alt || file.name });
+                })();
+            };
+            input.click();
+        });
+    }, [brandId, store]);
+    const searchTargets = useCallback(async (query) => {
+        const q = query.trim().toLowerCase();
+        const posts = store
+            .filterPosts({ brandId: brandId || null, state: "all", query: q || undefined })
+            .slice(0, 8)
+            .map((p) => ({
+            id: p.id,
+            label: p.title,
+            collection: "posts",
+            path: `/blog/${p.slug}`,
+        }));
+        const cats = categories
+            .filter((c) => !q || c.name.toLowerCase().includes(q))
+            .slice(0, 6)
+            .map((c) => ({
+            id: c.id,
+            label: c.name,
+            collection: "categories",
+            path: `/blog/category/${c.slug}`,
+        }));
+        return [...posts, ...cats];
+    }, [store, categories, brandId]);
+    const persist = (intent) => {
+        setError(null);
+        setFlash(null);
+        let nextStatus = status;
+        let nextScheduled = scheduledFor;
+        let nextPublished = publishedAt;
+        let nextReview = reviewState;
+        if (intent === "publish") {
+            nextStatus = "published";
+            nextReview = "approved";
+            nextScheduled = null;
+            nextPublished = publishedAt ?? new Date().toISOString();
+        }
+        else if (intent === "draft" || intent === "unpublish") {
+            nextStatus = "draft";
+            if (intent === "unpublish")
+                nextScheduled = null;
+        }
+        else if (intent === "schedule") {
+            if (!scheduleWhen) {
+                setError("Pick a date and time to schedule.");
+                return;
+            }
+            nextStatus = "draft";
+            nextScheduled = new Date(scheduleWhen).toISOString();
+            setShowSchedule(false);
+        }
+        else if (intent === "unschedule") {
+            nextScheduled = null;
+            setShowSchedule(false);
+        }
+        start(() => {
+            void (async () => {
+                const createdTagIds = [];
+                for (const name of newTags) {
+                    const term = await Promise.resolve(store.saveTerm({ collection: "tags", brandId, name }));
+                    if (term.ok && term.id)
+                        createdTagIds.push(term.id);
+                }
+                const mergedTagIds = [...tagIds, ...createdTagIds];
+                const res = await Promise.resolve(store.savePost({
+                    id: existing?.id,
+                    title,
+                    slug: slug || slugify(title),
+                    brandId,
+                    excerpt,
+                    contentHtml,
+                    status: nextStatus,
+                    reviewState: nextReview,
+                    categoryIds,
+                    tagIds: mergedTagIds,
+                    authorIds,
+                    scheduledFor: nextScheduled,
+                    publishedAt: nextPublished,
+                    featuredImageId: featuredImage?.id ?? null,
+                    allowComments,
+                    visibility,
+                    template,
+                    authorBox,
+                    showInTableOfContents: showToc,
+                    postFormat,
+                    seo: {
+                        metaTitle: seo.metaTitle,
+                        metaDescription: seo.metaDescription,
+                        focusKeyphrase: seo.focusKeyphrase,
+                        noindex: seo.noindex,
+                    },
+                }));
+                if (!res.ok) {
+                    setError(res.error ?? "Save failed");
+                    return;
+                }
+                if (createdTagIds.length) {
+                    setTagIds(mergedTagIds);
+                    setNewTags([]);
+                }
+                setStatus(nextStatus);
+                setReviewState(nextReview);
+                setScheduledFor(nextScheduled);
+                setPublishedAt(nextPublished);
+                setFlash(intent === "publish"
+                    ? "Published."
+                    : intent === "schedule"
+                        ? "Scheduled."
+                        : intent === "unpublish"
+                            ? "Unpublished."
+                            : "Saved.");
+            })();
+        });
+    };
+    const addCategory = () => {
+        const name = newCategory.trim();
+        if (!name || !brandId)
+            return;
+        void Promise.resolve(store.saveTerm({ collection: "categories", brandId, name })).then((res) => {
+            if (!res.ok) {
+                setError(res.error ?? "Could not add category");
+                return;
+            }
+            const created = store.terms("categories", brandId).find((c) => c.name === name || c.id === res.id);
+            if (created)
+                setCategoryIds((ids) => [...ids, created.id]);
+            setNewCategory("");
+        });
+    };
+    const addTagFromDraft = () => {
+        const name = tagDraft.trim().replace(/,$/, "");
+        if (!name)
+            return;
+        const existingTag = tags.find((t) => t.name.toLowerCase() === name.toLowerCase());
+        if (existingTag) {
+            if (!tagIds.includes(existingTag.id))
+                setTagIds((ids) => [...ids, existingTag.id]);
+        }
+        else if (!newTags.includes(name)) {
+            setNewTags((list) => [...list, name]);
+        }
+        setTagDraft("");
+    };
+    const uploadFeatured = async (files) => {
+        setFeaturedBusy(true);
+        setError(null);
+        const res = await store.uploadMedia(files, brandId || null);
+        setFeaturedBusy(false);
+        if (!res.ok || !res.images[0]) {
+            setError(res.error ?? "Upload failed");
+            return;
+        }
+        const img = res.images[0];
+        setFeaturedImage({ id: img.id, url: img.url, alt: img.alt });
+    };
+    const choosePicked = (item) => {
+        if (pickerFor === "og") {
+            setSeo((current) => ({
+                ...current,
+                ogImage: { id: item.id, url: item.url, alt: item.alt },
+            }));
+        }
+        else {
+            setFeaturedImage({ id: item.id, url: item.url, alt: item.alt });
+            setFeaturedAltSaved(false);
+        }
+        setPickerFor(null);
+    };
+    const saveFeaturedAlt = () => {
+        if (!featuredImage)
+            return;
+        setFeaturedAltBusy(true);
+        void Promise.resolve(store.updateMedia(featuredImage.id, {
+            alt: featuredImage.alt,
+            caption: "",
+            credit: "",
+        })).then((res) => {
+            setFeaturedAltBusy(false);
+            if (!res.ok) {
+                setError(res.error ?? "Could not save alt text");
+                return;
+            }
+            setFeaturedAltSaved(true);
+        });
+    };
+    const moveToTrash = () => {
+        if (!postIdCurrent)
+            return;
+        if (!confirm("Move this post to Trash?"))
+            return;
+        store.bulkPostAction([postIdCurrent], "trash");
+        onDone();
+    };
+    const copyToDraft = () => {
+        if (!postIdCurrent)
+            return;
+        store.duplicatePost(postIdCurrent);
+        setFlash("Copied to a new draft.");
+    };
+    const publishWhenLabel = scheduledFor && !isLive
+        ? formatDateTime(scheduledFor)
+        : publishedAt
+            ? formatDateTime(publishedAt)
+            : "Immediately";
+    const permalink = `/blog/${slug || slugify(title) || "…"}`;
+    const categoryOptions = categoryTab === "popular" ? categories.slice(0, 8) : categories;
+    return (_jsxs("div", { className: "ed-layout", children: [_jsxs("div", { className: "ed-main", children: [error ? (_jsx("p", { className: "form-error ed-error", role: "alert", children: error })) : null, flash ? (_jsx("p", { className: "form-ok", role: "status", children: flash })) : null, _jsx("div", { className: "ed-title-wrap", children: _jsx("input", { className: "fld ed-title", value: title, onChange: (e) => {
+                                setTitle(e.target.value);
+                                if (!existing && !slugEditing)
+                                    setSlug(slugify(e.target.value));
+                            }, placeholder: "Add title", "aria-label": "Post title" }) }), _jsxs("div", { className: "ed-permalink", children: [_jsx("span", { className: "lbl", children: "Permalink:" }), slugEditing ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "mono", children: "/blog/" }), _jsx("input", { className: "fld mono", style: { maxWidth: 220 }, value: slug, onChange: (e) => setSlug(e.target.value), onBlur: () => {
+                                            setSlug(slugify(slug || title));
+                                            setSlugEditing(false);
+                                        } })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "mono ed-permalink-value", children: permalink }), _jsx("button", { type: "button", className: "btn btn-tiny", onClick: () => setSlugEditing(true), children: "Edit" })] })), _jsxs("span", { className: "ed-bar-meta", style: { marginLeft: "auto" }, children: [wordCount, " words"] })] }), _jsx(RichTextEditor, { initialHtml: existing?.contentHtml ?? contentHtml, onChange: onContentChange, onPickImage: onPickImage, searchTargets: searchTargets }), _jsxs("div", { className: "box", children: [_jsxs("div", { className: "box-head", children: [_jsx("h3", { children: "Excerpt" }), _jsxs("span", { className: "box-hint", children: [excerpt.length, "/300"] })] }), _jsx("div", { className: "box-body", children: _jsx("textarea", { className: "fld", rows: 3, maxLength: 300, value: excerpt, placeholder: "One or two sentences. Used on index pages and as the meta description fallback.", onChange: (e) => setExcerpt(e.target.value) }) })] }), _jsx(YoastSeoMetabox, { title: title, slug: slug, excerpt: excerpt, visibility: visibility, featuredImage: featuredImage, seo: seo, seoInput: seoInput, siteName: brand?.name ?? "My Site", categoryName: categoryName, contentText: contentText, contentHtml: contentHtml, publishedAt: publishedAt, scheduledFor: scheduledFor, fieldErrors: fieldErrors, onSeoChange: onSeoChange, onSlugChange: setSlug, onSlugBlur: () => setSlug(slugify(slug || title)), onPickOgImage: () => setPickerFor("og"), onClearFieldError: (field) => setFieldErrors((current) => {
+                            const next = { ...current };
+                            delete next[field];
+                            return next;
+                        }), onSetFieldError: (field, message) => setFieldErrors((current) => ({ ...current, [field]: message })) })] }), _jsxs("aside", { className: "ed-side", "aria-label": "Post settings", children: [_jsxs("div", { className: "box box-publish", children: [_jsx("div", { className: "box-head", children: _jsx("h3", { children: "Publish" }) }), _jsxs("div", { className: "box-body stack", children: [_jsxs("div", { className: "btn-row", children: [_jsx("button", { type: "button", className: "btn", disabled: pending, onClick: () => persist(isLive ? "publish" : "draft"), children: pending ? "Saving…" : isLive ? "Update" : "Save Draft" }), _jsx("button", { type: "button", className: "btn", disabled: pending, title: "Preview", children: "Preview" })] }), _jsxs("div", { className: "facts wp-facts", children: [_jsxs("div", { className: "fact-row", children: [_jsx("span", { className: "fact-lbl", children: "Status:" }), _jsxs("span", { className: "fact-val", children: [isLive ? "Published" : "Draft", " ", _jsx("button", { type: "button", className: "linkish", onClick: () => setShowStatus((v) => !v), children: "Edit" })] })] }), showStatus ? (_jsx("div", { className: "fact-edit", children: _jsxs("select", { className: "fld fld-sm", value: isLive ? "published" : "draft", onChange: (e) => {
+                                                        if (e.target.value === "published")
+                                                            persist("publish");
+                                                        else if (isLive)
+                                                            persist("unpublish");
+                                                    }, children: [_jsx("option", { value: "draft", children: "Draft" }), _jsx("option", { value: "published", children: "Published" })] }) })) : null, _jsxs("div", { className: "fact-row", children: [_jsx("span", { className: "fact-lbl", children: "Visibility:" }), _jsxs("span", { className: "fact-val", children: [visibility === "private" ? "Private" : "Public", " ", _jsx("button", { type: "button", className: "linkish", onClick: () => setShowVisibility((v) => !v), children: "Edit" })] })] }), showVisibility ? (_jsx("div", { className: "fact-edit", children: _jsxs("select", { className: "fld fld-sm", value: visibility, onChange: (e) => setVisibility(e.target.value), children: [_jsx("option", { value: "public", children: "Public" }), _jsx("option", { value: "private", children: "Private" })] }) })) : null, _jsxs("div", { className: "fact-row", children: [_jsx("span", { className: "fact-lbl", children: scheduledFor && !isLive ? "Schedule:" : "Publish:" }), _jsxs("span", { className: "fact-val", children: [publishWhenLabel, " ", _jsx("button", { type: "button", className: "linkish", onClick: () => setShowSchedule((v) => !v), children: "Edit" })] })] })] }), showSchedule ? (_jsxs("div", { className: "stack", children: [_jsx("input", { type: "datetime-local", className: "fld", value: scheduleWhen, onChange: (e) => setScheduleWhen(e.target.value), "aria-label": "Publish date and time" }), _jsxs("div", { className: "btn-row", children: [_jsx("button", { type: "button", className: "btn btn-primary btn-tiny", disabled: pending, onClick: () => persist("schedule"), children: "OK" }), _jsx("button", { type: "button", className: "btn btn-tiny", onClick: () => setShowSchedule(false), children: "Cancel" }), scheduledFor ? (_jsx("button", { type: "button", className: "btn btn-tiny", disabled: pending, onClick: () => persist("unschedule"), children: "Clear" })) : null] })] })) : null, _jsxs("div", { className: "seo-summary publish-seo-summary wp-publish-scores", children: [_jsxs("div", { className: "fact-row", children: [_jsx("span", { className: "fact-lbl", children: "SEO analysis:" }), _jsxs("span", { className: "fact-val", children: [_jsx(ScoreDot, { tone: seoTone }), " ", toneLabel(seoTone)] })] }), _jsxs("div", { className: "fact-row", children: [_jsx("span", { className: "fact-lbl", children: "Readability:" }), _jsxs("span", { className: "fact-val", children: [_jsx(ScoreDot, { tone: readTone }), " ", toneLabel(readTone)] })] })] }), _jsxs("div", { className: "publish-foot", children: [_jsxs("div", { className: "publish-foot-left", children: [postIdCurrent ? (_jsx("button", { type: "button", className: "linkish", disabled: pending, onClick: copyToDraft, children: "Copy to a new draft" })) : null, postIdCurrent ? (_jsx("button", { type: "button", className: "btn-danger-link", disabled: pending, onClick: moveToTrash, children: "Move to Trash" })) : null] }), !isLive ? (_jsx("button", { type: "button", className: "btn btn-primary", disabled: pending, onClick: () => persist("publish"), children: pending ? "Publishing…" : "Publish" })) : null] })] })] }), _jsxs("div", { className: "box", children: [_jsx("div", { className: "box-head", children: _jsx("h3", { children: "Format" }) }), _jsx("div", { className: "box-body", children: _jsx("div", { className: "pick-list pick-list-auto", children: [
+                                        ["standard", "Standard"],
+                                        ["video", "Video"],
+                                        ["audio", "Audio"],
+                                        ["quote", "Quote"],
+                                        ["gallery", "Gallery"],
+                                        ["image", "Image"],
+                                        ["link", "Link"],
+                                    ].map(([value, label]) => (_jsxs("label", { className: "pick-row", children: [_jsx("input", { type: "radio", name: "postFormat", checked: postFormat === value, onChange: () => setPostFormat(value) }), label] }, value))) }) })] }), _jsxs("div", { className: "box", children: [_jsx("div", { className: "box-head", children: _jsx("h3", { children: "Categories" }) }), _jsxs("div", { className: "box-body stack", children: [_jsxs("div", { className: "yoast-preview-modes wp-cat-tabs", role: "tablist", "aria-label": "Category list", children: [_jsx("button", { type: "button", role: "tab", className: `yoast-preview-mode${categoryTab === "all" ? " is-active" : ""}`, "aria-selected": categoryTab === "all", onClick: () => setCategoryTab("all"), children: "All Categories" }), _jsx("button", { type: "button", role: "tab", className: `yoast-preview-mode${categoryTab === "popular" ? " is-active" : ""}`, "aria-selected": categoryTab === "popular", onClick: () => setCategoryTab("popular"), children: "Most Used" })] }), _jsx("div", { className: "pick-list", children: categoryOptions.length === 0 ? (_jsx("p", { className: "note", children: "No categories in this brand yet." })) : (categoryOptions.map((c) => (_jsxs("label", { className: "pick-row", children: [_jsx("input", { type: "checkbox", checked: categoryIds.includes(c.id), onChange: () => setCategoryIds((ids) => ids.includes(c.id) ? ids.filter((x) => x !== c.id) : [...ids, c.id]) }), c.name] }, c.id)))) }), categoryIds.length > 1 ? (_jsxs("p", { className: "note", children: [categoryIds.length, " selected \u00B7 first selected is used for breadcrumbs."] })) : null, _jsx("button", { type: "button", className: "yoast-link-btn", onClick: () => document.getElementById("new-category-input")?.focus(), children: "+ Add New Category" }), _jsxs("div", { className: "btn-row", children: [_jsx("input", { id: "new-category-input", className: "fld", placeholder: "New category", value: newCategory, onChange: (e) => setNewCategory(e.target.value), onKeyDown: (e) => {
+                                                    if (e.key === "Enter") {
+                                                        e.preventDefault();
+                                                        addCategory();
+                                                    }
+                                                } }), _jsx("button", { type: "button", className: "btn", onClick: addCategory, disabled: !newCategory.trim(), children: "Add" })] })] })] }), _jsxs("div", { className: "box", children: [_jsx("div", { className: "box-head", children: _jsx("h3", { children: "Tags" }) }), _jsxs("div", { className: "box-body stack", children: [_jsxs("div", { className: "tokens", children: [tagIds.map((id) => {
+                                                const tag = tags.find((t) => t.id === id);
+                                                return (_jsxs("span", { className: "token", children: [tag?.name ?? "tag", _jsx("button", { type: "button", "aria-label": `Remove ${tag?.name ?? "tag"}`, onClick: () => setTagIds((list) => list.filter((t) => t !== id)), children: "\u2715" })] }, id));
+                                            }), newTags.map((name) => (_jsxs("span", { className: "token token-new", children: [name, _jsx("button", { type: "button", "aria-label": `Remove ${name}`, onClick: () => setNewTags((list) => list.filter((t) => t !== name)), children: "\u2715" })] }, name)))] }), _jsxs("div", { className: "btn-row", children: [_jsx("input", { className: "fld", placeholder: "Add a tag and press Enter", value: tagDraft, list: "tag-suggestions", onChange: (e) => setTagDraft(e.target.value), onKeyDown: (e) => {
+                                                    if (e.key === "Enter" || e.key === ",") {
+                                                        e.preventDefault();
+                                                        addTagFromDraft();
+                                                    }
+                                                } }), _jsx("datalist", { id: "tag-suggestions", children: tags.map((t) => (_jsx("option", { value: t.name }, t.id))) }), _jsx("button", { type: "button", className: "btn", onClick: addTagFromDraft, disabled: !tagDraft.trim(), children: "Add" })] }), tags.filter((t) => !tagIds.includes(t.id)).length ? (_jsxs("div", { className: "tag-most-used", children: [_jsx("p", { className: "note", children: "Most used" }), _jsx("div", { className: "tag-cloud", children: tags
+                                                    .filter((t) => !tagIds.includes(t.id))
+                                                    .slice(0, 12)
+                                                    .map((t) => (_jsx("button", { type: "button", className: "tag-cloud-item", onClick: () => setTagIds((ids) => [...ids, t.id]), children: t.name }, t.id))) })] })) : null, _jsx("p", { className: "note", children: "New tags are created when the post is saved." })] })] }), _jsxs("div", { className: "box", children: [_jsxs("div", { className: "box-head", children: [_jsx("h3", { children: "Featured image" }), _jsx("span", { className: "box-hint", children: "optional" })] }), _jsxs("div", { className: `box-body drop-target${featuredDrag ? " is-dragging" : ""}`, onDragOver: (e) => {
+                                    e.preventDefault();
+                                    setFeaturedDrag(true);
+                                }, onDragLeave: () => setFeaturedDrag(false), onDrop: (e) => {
+                                    e.preventDefault();
+                                    setFeaturedDrag(false);
+                                    if (e.dataTransfer.files?.length)
+                                        void uploadFeatured(e.dataTransfer.files);
+                                }, children: [_jsx("input", { ref: featuredFileRef, type: "file", accept: "image/jpeg,image/png,image/webp,image/avif,image/gif", hidden: true, onChange: (e) => {
+                                            if (e.target.files?.length)
+                                                void uploadFeatured(e.target.files);
+                                            e.target.value = "";
+                                        } }), featuredImage ? (_jsxs("div", { className: "stack", children: [_jsx("img", { className: "feat", src: featuredImage.url, alt: featuredImage.alt || "" }), _jsxs("label", { className: "fld-row feat-alt", children: [_jsxs("span", { className: "fld-lbl", children: ["Alt text ", _jsx("em", { className: "fld-em", children: "recommended for accessibility" })] }), _jsx("textarea", { className: "fld", rows: 2, value: featuredImage.alt, placeholder: "Describe the image for screen readers and SEO\u2026", onChange: (e) => {
+                                                            setFeaturedImage((img) => (img ? { ...img, alt: e.target.value } : img));
+                                                            setFeaturedAltSaved(false);
+                                                        }, onBlur: () => {
+                                                            if (featuredImage)
+                                                                saveFeaturedAlt();
+                                                        }, "aria-describedby": "feat-alt-hint" }), _jsx("span", { id: "feat-alt-hint", className: "note feat-alt-foot", children: featuredAltBusy
+                                                            ? "Saving alt text…"
+                                                            : featuredAltSaved
+                                                                ? "Alt text saved to the media library."
+                                                                : "Saved on the image itself — used on the public post and in SEO." })] }), _jsxs("div", { className: "btn-row", children: [_jsx("button", { type: "button", className: "btn btn-tiny", disabled: featuredAltBusy, onClick: () => saveFeaturedAlt(), children: featuredAltBusy ? "Saving…" : "Save alt text" }), _jsx("button", { type: "button", className: "btn btn-tiny", onClick: () => setPickerFor("featured"), children: "Replace image" }), _jsx("button", { type: "button", className: "btn btn-tiny", disabled: featuredBusy, onClick: () => featuredFileRef.current?.click(), children: featuredBusy ? "Uploading…" : "Upload" }), _jsx("button", { type: "button", className: "btn btn-tiny", onClick: () => {
+                                                            setFeaturedImage(null);
+                                                            setFeaturedAltSaved(false);
+                                                        }, children: "Remove featured image" })] })] })) : (_jsxs("div", { className: "stack", children: [_jsx("button", { type: "button", className: "btn btn-block", onClick: () => setPickerFor("featured"), children: "Set featured image" }), _jsxs("button", { type: "button", className: "dropzone-cta", disabled: featuredBusy, onClick: () => featuredFileRef.current?.click(), children: [_jsx("span", { className: "dropzone-icon", "aria-hidden": "true", children: "\u2B06" }), _jsx("span", { children: featuredBusy ? "Uploading…" : "Or drop an image here to upload" }), _jsx("span", { className: "note", children: "JPEG, PNG, WebP or AVIF \u00B7 up to 12 MB \u00B7 add alt text after upload" })] })] }))] })] }), _jsxs("div", { className: "box", children: [_jsx("div", { className: "box-head", children: _jsx("h3", { children: "Post Attributes" }) }), _jsx("div", { className: "box-body stack", children: _jsxs("label", { className: "fld-row", children: [_jsx("span", { className: "fld-lbl", children: "Template" }), _jsx("select", { className: "fld", value: template, onChange: (e) => setTemplate(e.target.value), children: _jsx("option", { value: "default", children: "Default template" }) })] }) })] }), _jsxs("div", { className: "box", children: [_jsx("div", { className: "box-head", children: _jsx("h3", { children: "Authors" }) }), _jsxs("div", { className: "box-body stack", children: [_jsx("div", { className: "pick-list", children: authors.length === 0 ? (_jsxs("p", { className: "note", children: ["No authors for ", brand?.name ?? "this brand", " yet \u2014 create them on the Authors screen."] })) : (authors.map((a) => (_jsxs("label", { className: "pick-row", children: [_jsx("input", { type: "checkbox", checked: authorIds.includes(a.id), onChange: (e) => setAuthorIds((ids) => e.target.checked ? [...ids, a.id] : ids.filter((x) => x !== a.id)) }), _jsxs("span", { children: [a.name, a.name === profile.name ? _jsx("span", { className: "box-hint", children: " \u00B7 you" }) : null] })] }, a.id)))) }), _jsx("p", { className: "note", children: "You are selected by default. Add or remove others anytime." }), _jsxs("label", { className: "fld-row", children: [_jsx("span", { className: "fld-lbl", children: "Author Box" }), _jsx("select", { className: "fld", value: authorBox, onChange: (e) => setAuthorBox(e.target.value), children: _jsx("option", { value: "default", children: "Default Author Box" }) })] })] })] }), _jsxs("div", { className: "box", children: [_jsx("div", { className: "box-head", children: _jsx("h3", { children: "Discussion" }) }), _jsxs("div", { className: "box-body stack", children: [_jsxs("label", { className: "pick-row", children: [_jsx("input", { type: "checkbox", checked: allowComments, onChange: (e) => setAllowComments(e.target.checked) }), _jsx("span", { children: "Allow comments on this post" })] }), _jsx("p", { className: "note", children: "When checked, readers can leave comments on the published article. Uncheck to close the discussion without deleting existing comments." })] })] }), _jsxs("div", { className: "box", children: [_jsx("div", { className: "box-head", children: _jsx("h3", { children: "Table of Contents" }) }), _jsxs("div", { className: "box-body stack", children: [_jsxs("label", { className: "pick-row", children: [_jsx("input", { type: "checkbox", checked: showToc, onChange: (e) => setShowToc(e.target.checked) }), _jsx("span", { children: "Show Table of Contents on this post" })] }), _jsx("p", { className: "note", children: "When checked, the published article shows a right-side Table of Contents listing other published posts from this brand. Leave unchecked to hide the card." })] })] })] }), _jsx(MediaPicker, { open: pickerFor !== null, brandId: brandId || null, onClose: () => setPickerFor(null), onSelect: choosePicked, title: pickerFor === "og" ? "Social share image" : "Featured image" })] }));
+}

package/dist/components/admin/editor/RichTextEditor.d.ts

@@ -0,0 +1,42 @@
+import { type LexDoc } from '../../../lib/lexical-doc';
+export type LinkTargetHit = {
+    id: string;
+    label: string;
+    collection: 'posts' | 'categories';
+    path: string;
+};
+/**
+ * The writing surface.
+ *
+ * It is a contenteditable region driven by `document.execCommand`. That API is
+ * formally deprecated and universally implemented, and the alternative — a full
+ * editor framework — would be a large dependency for what this needs to do. The
+ * deprecation is survivable precisely because the DOM is not the source of
+ * truth: on every change the tree is converted to Lexical JSON (lexical-dom.ts)
+ * and that is what gets saved. If execCommand is ever replaced, only this file
+ * changes; the stored documents do not.
+ *
+ * Two things are deliberate:
+ *
+ *   - pasted HTML is rebuilt node by node against an allowlist before it enters
+ *     the document, so a copied page cannot smuggle in an event handler;
+ *   - internal links carry the target's id in data attributes, never a URL, so
+ *     the link survives the target being renamed.
+ */
+export type PickedImage = {
+    id: string;
+    url: string;
+    alt: string;
+};
+type Props = {
+    initialHtml: string;
+    onChange: (doc: LexDoc, stats: {
+        words: number;
+        html: string;
+    }) => void;
+    onPickImage: () => Promise<PickedImage | null>;
+    searchTargets: (query: string) => Promise<LinkTargetHit[]>;
+};
+export declare const RichTextEditor: ({ initialHtml, onChange, onPickImage, searchTargets }: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=RichTextEditor.d.ts.map

package/dist/components/admin/editor/RichTextEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.d.ts","sourceRoot":"","sources":["../../../../app/components/admin/editor/RichTextEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,KAAK,MAAM,EAAE,MAAM,0BAA0B,CAAA;AAEhE,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,OAAO,GAAG,YAAY,CAAA;IAClC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,WAAW,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AAElE,KAAK,KAAK,GAAG;IACX,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACvE,WAAW,EAAE,MAAM,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAC9C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,EAAE,CAAC,CAAA;CAC3D,CAAA;AAqFD,eAAO,MAAM,cAAc,GAAI,uDAAuD,KAAK,gCA4oB1F,CAAA"}