@canvas-digital/blog-sdk 2.0.0

package/dist/components/BlogUploader/dashboard/editor/PostEditor.js

@@ -0,0 +1,649 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { toast } from 'react-toastify';
+import { MediaPicker } from '../MediaPicker';
+import { uploadImages } from '../upload';
+import { savePost, trashPosts, duplicatePost } from '../../../app/(dashboard)/_actions/posts';
+import { saveTerm, searchLinkTargets, updateMedia } from '../../../app/(dashboard)/_actions/library';
+import { publishBlockers } from '../../../lib/publishing';
+import { resolveMetaDescription, resolveSeoTitle } from '../../../lib/yoast-snippet';
+import { seoFieldLengthErrors } from '../../../lib/seo-limits';
+import { validateCanonicalOverride } from '../../../lib/canonical';
+import { formatDateTime, formatDate } from '../../../lib/format';
+import { useSeoSummary } from './SeoAnalysisPanel';
+import { YoastSeoMetabox } from './YoastSeoMetabox';
+import { postPath, slugify } from '../../../lib/slug';
+import { FormatContentPanel } from './FormatContentPanel';
+const RichTextEditor = dynamic(() => import('./RichTextEditor').then((mod) => mod.RichTextEditor), {
+    ssr: false,
+    loading: () => (_jsxs("div", { className: "ed", "aria-busy": "true", "aria-label": "Loading editor", children: [_jsxs("div", { className: "ed-mode-tabs", children: [_jsx("span", { className: "ed-mode-skeleton" }), _jsx("span", { className: "ed-mode-skeleton" })] }), _jsx("div", { className: "ed-surface", children: _jsx("div", { className: "ed-input prose ed-skeleton" }) })] })),
+});
+const toLocalInput = (iso) => {
+    const d = iso ? new Date(iso) : new Date(Date.now() + 60 * 60 * 1000);
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+};
+const sinceLabel = (at) => {
+    if (!at)
+        return '';
+    const secs = Math.round((Date.now() - at.getTime()) / 1000);
+    if (secs < 10)
+        return 'just now';
+    if (secs < 60)
+        return `${secs}s ago`;
+    if (secs < 3600)
+        return `${Math.round(secs / 60)}m ago`;
+    return formatDateTime(at);
+};
+const ScoreDot = ({ tone }) => (_jsx("span", { className: `yoast-dot yoast-dot-${tone}`, "aria-hidden": "true" }));
+export const PostEditor = ({ post, options }) => {
+    const router = useRouter();
+    const [form, setForm] = useState(post);
+    const [newTags, setNewTags] = useState([]);
+    const [tagOptions, setTagOptions] = useState(options.tags);
+    const [tagDraft, setTagDraft] = useState('');
+    const [newCategory, setNewCategory] = useState('');
+    const [categoryOptions, setCategoryOptions] = useState(options.categories);
+    const [categoryTab, setCategoryTab] = useState('all');
+    const [authorOptions, setAuthorOptions] = useState(options.authors);
+    const [pickersBusy, setPickersBusy] = useState(false);
+    const [slugEditing, setSlugEditing] = useState(false);
+    const [dirty, setDirty] = useState(false);
+    const [busy, setBusy] = useState(null);
+    const [error, setError] = useState(null);
+    const [fieldErrors, setFieldErrors] = useState({});
+    const [savedAt, setSavedAt] = useState(post.updatedAt ? new Date(post.updatedAt) : null);
+    const [, forceTick] = useState(0);
+    const [scheduleWhen, setScheduleWhen] = useState('');
+    const [showSchedule, setShowSchedule] = useState(Boolean(post.scheduledFor));
+    const [showStatus, setShowStatus] = useState(false);
+    const [showVisibility, setShowVisibility] = useState(false);
+    const [hydrated, setHydrated] = useState(false);
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const [previewLoading, setPreviewLoading] = useState(false);
+    const contentRef = useRef(undefined);
+    const [words, setWords] = useState(0);
+    const [contentText, setContentText] = useState('');
+    const [contentHtml, setContentHtml] = useState(post.contentHtml || '');
+    const [pickerFor, setPickerFor] = useState(null);
+    const [featuredBusy, setFeaturedBusy] = useState(false);
+    const [featuredDrag, setFeaturedDrag] = useState(false);
+    const [featuredAltBusy, setFeaturedAltBusy] = useState(false);
+    const [featuredAltSaved, setFeaturedAltSaved] = useState(false);
+    const featuredFileRef = useRef(null);
+    const featuredAltRef = useRef(null);
+    const inlineResolver = useRef(null);
+    const set = (key, value) => {
+        setForm((f) => ({ ...f, [key]: value }));
+        setDirty(true);
+    };
+    const setSeo = (key, value) => {
+        setForm((f) => ({ ...f, seo: { ...f.seo, [key]: value } }));
+        setDirty(true);
+    };
+    const setFormatMeta = (key, value) => {
+        setForm((f) => ({ ...f, formatMeta: { ...f.formatMeta, [key]: value } }));
+        setDirty(true);
+    };
+    /* The publish checklist is the server's list, not a second opinion. */
+    const blockers = useMemo(() => publishBlockers({
+        postFormat: form.postFormat,
+        featuredImage: form.featuredImage?.id ?? null,
+        category: form.category,
+        authors: form.authors,
+        excerpt: form.excerpt,
+        seo: { metaDescription: form.seo.metaDescription },
+        formatMeta: {
+            videoMediaId: form.formatMeta.videoMedia?.id ?? null,
+            audioMediaId: form.formatMeta.audioMedia?.id ?? null,
+            quoteText: form.formatMeta.quoteText,
+            quoteSource: form.formatMeta.quoteSource,
+            linkUrl: form.formatMeta.linkUrl,
+            linkTitle: form.formatMeta.linkTitle,
+            galleryIds: form.gallery.map((g) => g.id),
+        },
+    }), [form.postFormat, form.featuredImage, form.category, form.authors, form.excerpt, form.seo.metaDescription, form.formatMeta, form.gallery]);
+    const isLive = form.status === 'published';
+    const canPublish = options.canPublish;
+    const onContentChange = useCallback((doc, stats) => {
+        contentRef.current = doc;
+        setWords(stats.words);
+        setContentHtml(stats.html || '');
+        setDirty(true);
+        const parts = [];
+        const walk = (nodes) => {
+            if (!Array.isArray(nodes))
+                return;
+            for (const n of nodes) {
+                if (!n || typeof n !== 'object')
+                    continue;
+                const node = n;
+                if (node.type === 'text' && typeof node.text === 'string')
+                    parts.push(node.text);
+                if (node.children)
+                    walk(node.children);
+            }
+        };
+        walk(doc?.root?.children);
+        setContentText(parts.join(' '));
+    }, []);
+    const save = useCallback(async (intent, opts = {}) => {
+        setBusy(intent);
+        setError(null);
+        setFieldErrors({});
+        const canonicalCheck = validateCanonicalOverride(form.seo.canonicalOverride);
+        if (canonicalCheck !== true) {
+            setBusy(null);
+            setError(canonicalCheck);
+            setFieldErrors({ 'seo.canonicalOverride': canonicalCheck });
+            document.getElementById('seo-canonical')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            return false;
+        }
+        const seoLengthErrors = seoFieldLengthErrors(form.seo);
+        if (seoLengthErrors.length) {
+            setBusy(null);
+            setError(seoLengthErrors[0].message);
+            const next = {};
+            for (const f of seoLengthErrors)
+                next[f.field] = f.message;
+            setFieldErrors(next);
+            document.getElementById('yoast-seo-title')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            return false;
+        }
+        const res = await savePost({
+            id: form.id,
+            tenant: form.tenant,
+            title: form.title,
+            slug: form.slug,
+            excerpt: form.excerpt,
+            content: contentRef.current,
+            featuredImage: form.featuredImage?.id ?? null,
+            category: form.category,
+            tags: form.tags,
+            newTags,
+            authors: form.authors,
+            scheduledFor: intent === 'schedule' ? new Date(scheduleWhen).toISOString() : form.scheduledFor,
+            publishedAt: form.publishedAt,
+            seo: {
+                metaTitle: form.seo.metaTitle,
+                metaDescription: form.seo.metaDescription,
+                focusKeyphrase: form.seo.focusKeyphrase,
+                breadcrumbTitle: form.seo.breadcrumbTitle,
+                canonicalOverride: form.seo.canonicalOverride,
+                noindex: form.seo.noindex || form.visibility === 'private',
+                nofollow: form.seo.nofollow,
+                ogImage: form.seo.ogImage?.id ?? null,
+                ogTitle: form.seo.ogTitle,
+                ogDescription: form.seo.ogDescription,
+                schemaType: form.seo.schemaType,
+            },
+            postFormat: form.postFormat,
+            formatMeta: {
+                videoMediaId: form.formatMeta.videoMedia?.id ?? null,
+                audioMediaId: form.formatMeta.audioMedia?.id ?? null,
+                quoteText: form.formatMeta.quoteText,
+                quoteSource: form.formatMeta.quoteSource,
+                linkUrl: form.formatMeta.linkUrl,
+                linkTitle: form.formatMeta.linkTitle,
+                galleryIds: form.gallery.map((g) => g.id),
+            },
+            template: form.template,
+            visibility: form.visibility,
+            authorBox: form.authorBox,
+            allowComments: form.allowComments,
+            showInTableOfContents: form.showInTableOfContents,
+            intent,
+        });
+        setBusy(null);
+        if (!res.ok) {
+            setError(res.error);
+            if (res.fields?.length) {
+                const next = {};
+                for (const f of res.fields)
+                    if (f.field)
+                        next[f.field] = f.message;
+                setFieldErrors(next);
+                if (next['seo.canonicalOverride']) {
+                    document.getElementById('seo-canonical')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+                else if (next['seo.metaTitle'] || next['seo.metaDescription'] || next['seo.ogTitle'] || next['seo.ogDescription']) {
+                    document.getElementById('yoast-seo-title')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                }
+            }
+            return false;
+        }
+        const saved = res.data;
+        const wasDraft = form.status !== 'published';
+        if (intent === 'publish' && saved.status === 'published' && wasDraft) {
+            const tenantSlug = options.tenants.find((t) => t.id === form.tenant)?.slug;
+            const params = new URLSearchParams({ state: 'live' });
+            if (tenantSlug)
+                params.set('brand', tenantSlug);
+            toast.success('Post published successfully.');
+            router.push(`/admin/posts?${params.toString()}`);
+            return saved;
+        }
+        setNewTags([]);
+        setForm((f) => ({
+            ...f,
+            id: saved.id,
+            slug: saved.slug,
+            status: saved.status,
+            reviewState: saved.reviewState,
+            scheduledFor: saved.scheduledFor,
+            publishedAt: saved.publishedAt,
+            tags: saved.tagIds,
+        }));
+        setSavedAt(new Date());
+        setDirty(false);
+        if (!form.id && saved.id) {
+            // A new post gets its own address as soon as it exists, so a refresh or a
+            // shared link lands on the post rather than on an empty form.
+            window.history.replaceState(null, '', `/admin/posts/${saved.id}`);
+        }
+        if (!opts.silent)
+            router.refresh();
+        return saved;
+    }, [form, newTags, router, scheduleWhen, options.tenants]);
+    const closePreview = useCallback(() => {
+        setPreviewUrl(null);
+        setPreviewLoading(false);
+    }, []);
+    useEffect(() => {
+        if (!previewUrl)
+            return;
+        const html = document.documentElement;
+        const body = document.body;
+        const prevHtmlOverflow = html.style.overflow;
+        const prevBodyOverflow = body.style.overflow;
+        html.style.overflow = 'hidden';
+        body.style.overflow = 'hidden';
+        html.classList.add('ed-preview-open');
+        body.classList.add('ed-preview-open');
+        return () => {
+            html.style.overflow = prevHtmlOverflow;
+            body.style.overflow = prevBodyOverflow;
+            html.classList.remove('ed-preview-open');
+            body.classList.remove('ed-preview-open');
+        };
+    }, [previewUrl]);
+    const openPreview = useCallback(async () => {
+        if (!form.title.trim()) {
+            setError('Add a title before previewing.');
+            document.getElementById('post-title-input')?.focus();
+            return;
+        }
+        const brandSlug = options.tenants.find((t) => t.id === form.tenant)?.slug;
+        if (!brandSlug) {
+            setError('Choose a brand before previewing.');
+            return;
+        }
+        setPreviewLoading(true);
+        setError(null);
+        let slug = form.slug || slugify(form.title);
+        if (!form.id || dirty) {
+            const saved = await save(isLive ? 'publish' : 'save', { silent: true });
+            if (!saved) {
+                setPreviewLoading(false);
+                return;
+            }
+            slug = saved.slug;
+        }
+        // In-page preview of this post only — same admin layout, no new tab.
+        const href = `/api/preview?slug=${encodeURIComponent(slug)}&tenant=${encodeURIComponent(brandSlug)}`;
+        setPreviewUrl(href);
+        setPreviewLoading(false);
+    }, [form.title, form.slug, form.id, form.tenant, dirty, isLive, save, options.tenants]);
+    useEffect(() => {
+        if (!previewUrl)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                closePreview();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [previewUrl, closePreview]);
+    const reloadPickersForBrand = useCallback(async (tenantId) => {
+        if (!tenantId)
+            return;
+        setPickersBusy(true);
+        try {
+            // Fetch via route handler — a Server Action would refresh the RSC tree and
+            // remount this editor (wiping draft state) on every brand change.
+            const res = await fetch(`/api/dashboard/editor-pickers?tenant=${encodeURIComponent(tenantId)}`, { credentials: 'same-origin' });
+            const json = (await res.json());
+            if (!res.ok || !json.ok || !json.data) {
+                setError(json.error || 'Could not load categories for that brand.');
+                return;
+            }
+            const data = json.data;
+            setCategoryOptions(data.categories);
+            setTagOptions(data.tags);
+            setAuthorOptions(data.authors);
+            setForm((f) => {
+                const keptAuthors = f.authors.filter((id) => data.authors.some((a) => a.id === id));
+                const nextAuthors = keptAuthors.length > 0
+                    ? keptAuthors
+                    : data.defaultAuthorId
+                        ? [data.defaultAuthorId]
+                        : [];
+                return {
+                    ...f,
+                    category: f.category.filter((id) => data.categories.some((c) => c.id === id)),
+                    tags: f.tags.filter((id) => data.tags.some((t) => t.id === id)),
+                    authors: nextAuthors,
+                };
+            });
+        }
+        catch {
+            setError('Could not load categories for that brand.');
+        }
+        finally {
+            setPickersBusy(false);
+        }
+    }, []);
+    const onBrandChange = (tenantId) => {
+        if (tenantId === form.tenant)
+            return;
+        setForm((f) => ({ ...f, tenant: tenantId, authors: [], category: [], tags: [] }));
+        setDirty(true);
+        void reloadPickersForBrand(tenantId);
+    };
+    useEffect(() => {
+        if (!form.id || isLive || !dirty || busy)
+            return;
+        const id = setTimeout(() => void save('save', { silent: true }), 25000);
+        return () => clearTimeout(id);
+    }, [form.id, isLive, dirty, busy, save]);
+    /* Local clock and relative labels belong on the client — computing them
+       during SSR uses the server timezone and Date.now(), which mismatch hydrate. */
+    useEffect(() => {
+        setHydrated(true);
+        setScheduleWhen(toLocalInput(post.scheduledFor));
+        // Mount-only: later saves must not wipe a time the editor is still typing.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    /* Keeps the "saved 2m ago" label honest without a re-render storm. */
+    useEffect(() => {
+        const id = setInterval(() => forceTick((n) => n + 1), 30000);
+        return () => clearInterval(id);
+    }, []);
+    useEffect(() => {
+        const onKey = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') {
+                e.preventDefault();
+                // ⌘S on a live post is "update", which republishes — same as the button.
+                void save(isLive ? 'publish' : 'save');
+            }
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [save, isLive]);
+    useEffect(() => {
+        const warn = (e) => {
+            if (!dirty)
+                return;
+            e.preventDefault();
+            e.returnValue = '';
+        };
+        window.addEventListener('beforeunload', warn);
+        return () => window.removeEventListener('beforeunload', warn);
+    }, [dirty]);
+    const pickInlineImage = useCallback(() => {
+        setPickerFor('inline');
+        return new Promise((resolve) => {
+            inlineResolver.current = resolve;
+        });
+    }, []);
+    const closePicker = () => {
+        if (pickerFor === 'inline')
+            inlineResolver.current?.(null);
+        inlineResolver.current = null;
+        setPickerFor(null);
+    };
+    const choosePicked = (item) => {
+        const ref = { id: item.id, url: item.thumbUrl || item.url, alt: item.alt };
+        if (pickerFor === 'featured') {
+            set('featuredImage', ref);
+            setFeaturedAltSaved(false);
+            window.setTimeout(() => featuredAltRef.current?.focus(), 50);
+        }
+        if (pickerFor === 'og')
+            setSeo('ogImage', ref);
+        if (pickerFor === 'gallery') {
+            setForm((f) => ({
+                ...f,
+                gallery: f.gallery.some((g) => g.id === ref.id) ? f.gallery : [...f.gallery, ref],
+            }));
+            setDirty(true);
+        }
+        if (pickerFor === 'inline') {
+            inlineResolver.current?.({ id: item.id, url: item.url || item.thumbUrl, alt: item.alt });
+            inlineResolver.current = null;
+        }
+        setPickerFor(null);
+    };
+    /** Drop or choose a file straight onto the featured-image box — the common
+     *  case is "this picture, this post", not "browse the library". */
+    const uploadFeatured = async (files) => {
+        setError(null);
+        setFeaturedBusy(true);
+        setFeaturedAltSaved(false);
+        const res = await uploadImages(files, form.tenant);
+        setFeaturedBusy(false);
+        if (!res.ok) {
+            setError(res.error);
+            return;
+        }
+        const image = res.images[0];
+        if (!image)
+            return;
+        set('featuredImage', { id: image.id, url: image.thumbnailUrl || image.url, alt: image.alt });
+        // Nudge the writer to confirm / edit alt after upload.
+        window.setTimeout(() => featuredAltRef.current?.focus(), 50);
+    };
+    const setFeaturedAltLocal = (alt) => {
+        setFeaturedAltSaved(false);
+        setForm((f) => f.featuredImage ? { ...f, featuredImage: { ...f.featuredImage, alt } } : f);
+    };
+    const saveFeaturedAlt = async () => {
+        const image = form.featuredImage;
+        if (!image)
+            return;
+        setFeaturedAltBusy(true);
+        setError(null);
+        const res = await updateMedia(image.id, { alt: image.alt });
+        setFeaturedAltBusy(false);
+        if (!res.ok) {
+            setError(res.error);
+            return;
+        }
+        setForm((f) => f.featuredImage ? { ...f, featuredImage: { ...f.featuredImage, alt: res.data.alt } } : f);
+        setFeaturedAltSaved(true);
+    };
+    const addTagFromDraft = () => {
+        const name = tagDraft.trim();
+        if (!name)
+            return;
+        const match = tagOptions.find((t) => t.name.toLowerCase() === name.toLowerCase());
+        if (match) {
+            if (!form.tags.includes(match.id))
+                set('tags', [...form.tags, match.id]);
+        }
+        else if (!newTags.some((t) => t.toLowerCase() === name.toLowerCase())) {
+            setNewTags((list) => [...list, name]);
+            setDirty(true);
+        }
+        setTagDraft('');
+    };
+    const addCategory = async () => {
+        const name = newCategory.trim();
+        if (!name)
+            return;
+        const res = await saveTerm({ collection: 'categories', tenant: form.tenant, name });
+        if (!res.ok) {
+            setError(res.error);
+            return;
+        }
+        setCategoryOptions((list) => [...list, { id: res.data.id, name: res.data.name }]);
+        set('category', form.category.includes(res.data.id) ? form.category : [...form.category, res.data.id]);
+        setNewCategory('');
+    };
+    const toggleCategory = (id) => {
+        set('category', form.category.includes(id) ? form.category.filter((c) => c !== id) : [...form.category, id]);
+    };
+    const moveToTrash = async () => {
+        if (!form.id)
+            return;
+        if (!window.confirm('Move this post to the trash? It stops being published and can be restored.'))
+            return;
+        setBusy('save');
+        const res = await trashPosts([form.id]);
+        setBusy(null);
+        if (!res.ok) {
+            setError(res.error);
+            return;
+        }
+        router.push('/admin/posts?state=trash');
+    };
+    const searchTargets = useCallback((q) => searchLinkTargets(form.tenant, q), [form.tenant]);
+    const activeTenant = options.tenants.find((t) => t.id === form.tenant);
+    const categoryNames = form.category
+        .map((id) => categoryOptions.find((c) => c.id === id)?.name)
+        .filter((n) => Boolean(n));
+    const categoryName = categoryNames[0];
+    const snippetCtx = useMemo(() => ({
+        title: form.title,
+        slug: form.slug || slugify(form.title),
+        excerpt: form.excerpt,
+        siteName: activeTenant?.siteName || activeTenant?.name || '',
+        categoryName,
+        focusKeyphrase: form.seo.focusKeyphrase,
+        contentText,
+        date: form.publishedAt
+            ? formatDate(form.publishedAt)
+            : form.scheduledFor
+                ? formatDate(form.scheduledFor)
+                : '',
+    }), [
+        form.title,
+        form.slug,
+        form.excerpt,
+        form.seo.focusKeyphrase,
+        form.publishedAt,
+        form.scheduledFor,
+        activeTenant,
+        categoryName,
+        contentText,
+    ]);
+    const seoInput = useMemo(() => ({
+        title: form.title,
+        slug: form.slug || slugify(form.title),
+        excerpt: form.excerpt,
+        metaTitle: resolveSeoTitle(form.seo.metaTitle, snippetCtx),
+        metaDescription: resolveMetaDescription(form.seo.metaDescription, snippetCtx),
+        focusKeyphrase: form.seo.focusKeyphrase,
+        contentText,
+        contentHtml: form.contentHtml || contentHtml,
+        hasFeaturedImage: Boolean(form.featuredImage),
+        featuredAlt: form.featuredImage?.alt || '',
+    }), [form, contentText, contentHtml, snippetCtx]);
+    const seoSummary = useSeoSummary(seoInput);
+    const copyToDraft = async () => {
+        if (!form.id)
+            return;
+        setBusy('save');
+        const res = await duplicatePost(form.id);
+        setBusy(null);
+        if (!res.ok) {
+            setError(res.error);
+            return;
+        }
+        router.push(`/admin/posts/${res.data.id}`);
+    };
+    const brandSlug = options.tenants.find((t) => t.id === form.tenant)?.slug;
+    const liveHref = form.slug ? postPath(form.slug, brandSlug) : null;
+    const publishWhenLabel = isLive
+        ? formatDateTime(form.publishedAt)
+        : form.scheduledFor
+            ? formatDateTime(form.scheduledFor)
+            : 'Immediately';
+    return (_jsxs(_Fragment, { children: [_jsx("a", { className: "skip-link", href: "#post-editor-main", children: "Skip to editor" }), _jsxs("div", { className: "ed-wp-header", children: [_jsx(Link, { className: "linkish", href: "/admin/posts", children: "\u2190 Posts" }), _jsx("span", { className: "ed-wp-header-meta", suppressHydrationWarning: true, children: dirty ? (_jsx("span", { className: "is-dirty", children: "Unsaved changes" })) : savedAt ? (_jsxs("span", { children: ["Saved ", hydrated ? sinceLabel(savedAt) : formatDateTime(savedAt)] })) : (_jsx("span", { children: "Not saved yet" })) })] }), error ? (_jsx("p", { className: "form-error ed-error", role: "alert", children: error })) : null, _jsxs("div", { className: "ed-layout", children: [_jsxs("div", { className: "ed-main", id: "post-editor-main", children: [_jsx("label", { className: "ed-title-wrap", htmlFor: "post-title-input", children: _jsx("span", { className: "screen-reader", children: "Add title" }) }), _jsx("input", { id: "post-title-input", className: "ed-title", value: form.title, placeholder: "Add title", "aria-label": "Post title", onChange: (e) => {
+                                    const title = e.target.value;
+                                    setForm((f) => ({
+                                        ...f,
+                                        title,
+                                        // Until the post exists, the slug tracks the title the way a
+                                        // writer expects. Once it is published, changing it is a
+                                        // deliberate act — it writes a 301 — so it stops following.
+                                        slug: !f.id && !slugEditing ? slugify(title) : f.slug,
+                                    }));
+                                    setDirty(true);
+                                } }), _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 fld-inline mono", value: form.slug, onChange: (e) => set('slug', e.target.value), onBlur: () => set('slug', slugify(form.slug)), "aria-label": "URL slug" }), _jsx("button", { className: "btn btn-tiny", onClick: () => setSlugEditing(false), children: "OK" })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "mono ed-permalink-value", children: ["/blog/", form.slug || slugify(form.title) || '…'] }), _jsx("button", { className: "btn btn-tiny", onClick: () => setSlugEditing(true), children: "Edit" }), isLive && liveHref ? (_jsx("a", { className: "btn btn-tiny", href: liveHref, target: "_blank", rel: "noreferrer", children: "View \u2197" })) : null] }))] }), _jsx("div", { className: form.postFormat === 'quote' || form.postFormat === 'link' ? 'ed-compact' : undefined, children: _jsx(RichTextEditor, { initialHtml: post.contentHtml, onChange: onContentChange, onPickImage: pickInlineImage, searchTargets: searchTargets }) }), _jsx(FormatContentPanel, { format: form.postFormat, meta: form.formatMeta, tenant: form.tenant, featuredImage: form.featuredImage, gallery: form.gallery, onMetaChange: setFormatMeta, onFeaturedPick: () => setPickerFor('featured'), onFeaturedClear: () => set('featuredImage', null), onGalleryAdd: () => setPickerFor('gallery'), onGalleryRemove: (id) => set('gallery', form.gallery.filter((g) => g.id !== id)) }), _jsxs("div", { className: "box", children: [_jsxs("div", { className: "box-head", children: [_jsx("h3", { children: "Excerpt" }), _jsxs("span", { className: "box-hint", children: [form.excerpt.length, "/300"] })] }), _jsx("div", { className: "box-body", children: _jsx("textarea", { className: "fld", rows: 3, maxLength: 300, value: form.excerpt, placeholder: "One or two sentences. Used on index pages and as the meta description fallback.", onChange: (e) => set('excerpt', e.target.value) }) })] }), _jsx(YoastSeoMetabox, { title: form.title, slug: form.slug, excerpt: form.excerpt, visibility: form.visibility, featuredImage: form.featuredImage, seo: form.seo, seoInput: seoInput, siteName: activeTenant?.siteName || activeTenant?.name, titleTemplate: activeTenant?.titleTemplate, categoryName: categoryName, contentText: contentText, contentHtml: form.contentHtml || contentHtml, publishedAt: form.publishedAt, scheduledFor: form.scheduledFor, fieldErrors: fieldErrors, onSeoChange: setSeo, onSlugChange: (slug) => set('slug', slug), onSlugBlur: () => set('slug', slugify(form.slug || form.title)), onPickOgImage: () => setPickerFor('og'), onClearFieldError: (field) => setFieldErrors((prev) => {
+                                    if (!prev[field])
+                                        return prev;
+                                    const next = { ...prev };
+                                    delete next[field];
+                                    return next;
+                                }), onSetFieldError: (field, message) => setFieldErrors((prev) => ({ ...prev, [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", { className: "btn", disabled: !!busy, onClick: () => void save(isLive ? 'publish' : 'save'), children: busy === 'save' || (busy === 'publish' && isLive) ? 'Saving…' : isLive ? 'Update' : 'Save Draft' }), _jsx("button", { type: "button", className: "btn", disabled: !!busy || previewLoading, title: "Preview this post in the current page", onClick: () => void openPreview(), children: previewLoading || busy === 'save' || busy === 'publish' ? 'Preparing…' : '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')
+                                                                    void save('publish');
+                                                                else if (isLive)
+                                                                    void save('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: [form.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: form.visibility, onChange: (e) => set('visibility', 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: form.scheduledFor && !isLive ? 'Schedule:' : 'Publish:' }), _jsxs("span", { className: "fact-val", suppressHydrationWarning: true, children: [hydrated ? publishWhenLabel : form.scheduledFor || form.publishedAt ? formatDateTime(form.scheduledFor || form.publishedAt) : 'Immediately', ' ', _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", { className: "btn btn-primary btn-tiny", disabled: !!busy || blockers.length > 0 || !canPublish, onClick: () => void save('schedule'), children: "OK" }), _jsx("button", { className: "btn btn-tiny", onClick: () => setShowSchedule(false), children: "Cancel" }), form.scheduledFor ? (_jsx("button", { className: "btn btn-tiny", disabled: !!busy, onClick: () => void save('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: seoSummary.seoTone }), " ", seoSummary.seoLabel] })] }), _jsxs("div", { className: "fact-row", children: [_jsx("span", { className: "fact-lbl", children: "Readability:" }), _jsxs("span", { className: "fact-val", children: [_jsx(ScoreDot, { tone: seoSummary.readTone }), " ", seoSummary.readLabel] })] })] }), blockers.length ? (_jsxs("p", { className: "note publish-blockers-note", children: ["Before publishing: needs ", blockers.join(', '), "."] })) : null, _jsxs("div", { className: "publish-foot", children: [_jsxs("div", { className: "publish-foot-left", children: [form.id ? (_jsx("button", { type: "button", className: "linkish", disabled: !!busy, onClick: () => void copyToDraft(), children: "Copy to a new draft" })) : null, form.id ? (_jsx("button", { type: "button", className: "btn-danger-link", onClick: () => void moveToTrash(), disabled: !!busy, children: "Move to Trash" })) : null] }), !isLive && canPublish ? (_jsx("button", { className: "btn btn-primary", disabled: !!busy || blockers.length > 0, onClick: () => void save('publish'), children: busy === 'publish' ? '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: form.postFormat === value, onChange: () => set('postFormat', 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: (categoryTab === 'popular' ? categoryOptions.slice(0, 8) : categoryOptions).length === 0 ? (_jsx("p", { className: "note", children: "No categories in this brand yet." })) : ((categoryTab === 'popular' ? categoryOptions.slice(0, 8) : categoryOptions).map((c) => (_jsxs("label", { className: "pick-row", children: [_jsx("input", { type: "checkbox", checked: form.category.includes(c.id), onChange: () => toggleCategory(c.id) }), c.name] }, c.id)))) }), form.category.length > 1 ? (_jsxs("p", { className: "note", children: [form.category.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();
+                                                                void addCategory();
+                                                            }
+                                                        } }), _jsx("button", { className: "btn", onClick: () => void 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: [form.tags.map((id) => {
+                                                        const tag = tagOptions.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: () => set('tags', form.tags.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: tagOptions.map((t) => (_jsx("option", { value: t.name }, t.id))) }), _jsx("button", { className: "btn", onClick: addTagFromDraft, disabled: !tagDraft.trim(), children: "Add" })] }), tagOptions.filter((t) => !form.tags.includes(t.id)).length ? (_jsxs("div", { className: "tag-most-used", children: [_jsx("p", { className: "note", children: "Most used" }), _jsx("div", { className: "tag-cloud", children: tagOptions
+                                                            .filter((t) => !form.tags.includes(t.id))
+                                                            .slice(0, 12)
+                                                            .map((t) => (_jsx("button", { type: "button", className: "tag-cloud-item", onClick: () => set('tags', [...form.tags, 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 = '';
+                                                } }), form.featuredImage ? (_jsxs("div", { className: "stack", children: [_jsx("img", { className: "feat", src: form.featuredImage.url, alt: form.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", { ref: featuredAltRef, className: "fld", rows: 2, value: form.featuredImage.alt, placeholder: "Describe the image for screen readers and SEO\u2026", onChange: (e) => setFeaturedAltLocal(e.target.value), onBlur: () => {
+                                                                    if (form.featuredImage)
+                                                                        void 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: () => void 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: () => {
+                                                                    set('featuredImage', 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: form.template, onChange: (e) => set('template', 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: authorOptions.length === 0 ? (_jsx("p", { className: "note", children: pickersBusy
+                                                        ? 'Loading authors…'
+                                                        : `No authors for ${options.tenants.find((t) => t.id === form.tenant)?.name ?? 'this brand'} yet — create them on the Authors screen for this brand.` })) : (authorOptions.map((a) => (_jsxs("label", { className: "pick-row", children: [_jsx("input", { type: "checkbox", checked: form.authors.includes(a.id), onChange: (e) => set('authors', e.target.checked
+                                                                ? [...form.authors, a.id]
+                                                                : form.authors.filter((x) => x !== a.id)) }), _jsxs("span", { children: [a.name, options.defaultAuthorId === a.id ? (_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: form.authorBox, onChange: (e) => set('authorBox', 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: form.allowComments, onChange: (e) => set('allowComments', 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: form.showInTableOfContents, onChange: (e) => set('showInTableOfContents', 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." })] })] }), options.tenants.length > 1 ? (_jsxs("div", { className: "box", children: [_jsx("div", { className: "box-head", children: _jsx("h3", { children: "Brand" }) }), _jsxs("div", { className: "box-body", children: [_jsx("select", { className: "fld", value: form.tenant, disabled: Boolean(form.id) || pickersBusy, onChange: (e) => onBrandChange(e.target.value), "aria-label": "Brand", children: options.tenants.map((t) => (_jsx("option", { value: t.id, children: t.name }, t.id))) }), form.id ? (_jsx("p", { className: "note", children: "A published URL belongs to its brand, so this is fixed once the post exists." })) : null] })] })) : null] })] }), _jsx(MediaPicker, { open: pickerFor !== null, tenant: form.tenant, onClose: closePicker, onSelect: choosePicked, title: pickerFor === 'featured' ? 'Featured image' : pickerFor === 'og' ? 'Social share image' : pickerFor === 'gallery' ? 'Add to gallery' : 'Insert image' }), previewUrl ? (_jsxs("div", { className: "ed-preview", role: "dialog", "aria-modal": "true", "aria-label": "Post preview", children: [_jsxs("div", { className: "ed-preview-bar", children: [_jsxs("div", { className: "ed-preview-bar-left", children: [_jsx("span", { className: "ed-preview-badge", children: "Preview" }), _jsx("span", { className: "ed-preview-title", children: form.title || 'Untitled' })] }), _jsxs("div", { className: "ed-preview-bar-right", children: [_jsx("button", { type: "button", className: "btn btn-tiny", onClick: () => void openPreview(), children: "Refresh" }), _jsx("button", { type: "button", className: "btn btn-primary btn-tiny", onClick: closePreview, children: "Back to editor" })] })] }), _jsx("iframe", { className: "ed-preview-frame", src: previewUrl, title: "Post preview" }, previewUrl)] })) : null] }));
+};