@acms-subir/core 0.0.1

package/src/components/editor/PostEditor.tsx

@@ -0,0 +1,1011 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEditor, EditorContent } from '@tiptap/react';
+import { BubbleMenu, FloatingMenu } from '@tiptap/react/menus';
+import type { Range } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { TableKit } from '@tiptap/extension-table';
+import { Placeholder, CharacterCount } from '@tiptap/extensions';
+import { actions } from 'astro:actions';
+import type { Page, Post, Status } from '../../lib/schema';
+import { ImageCard, EmbedCard, ButtonCard, Callout, HtmlCard, detectEmbed } from './extensions/cards';
+import { FileCard, GalleryCard, BookmarkCard } from './extensions/mediaCards';
+import { CodeBlock } from './extensions/codeBlock';
+import { PostListCard } from './extensions/postList';
+import { CalendarCard } from './extensions/calendar';
+import { InfoCards } from './extensions/infoCards';
+import { SlashMenu } from './extensions/slash';
+import { TableTyping } from './extensions/tableTyping';
+import { ImagePicker, type PickedImage } from './ImagePicker';
+import { PreviewOverlay } from './PreviewOverlay';
+import { renderMarkdown } from '../../lib/markdown';
+import { CONTENT, collectionUrl } from '../../lib/content';
+import { I18N, localeHomeUrl } from '../../lib/i18n';
+
+// The Ghost-style writing surface, shared by posts AND pages: distraction-free
+// column, cards via "/", autosave, a collapsible settings sidebar, and an
+// optional side-by-side live preview. `kind` switches the save action and
+// which settings fields exist — everything else is identical.
+
+type SaveState = 'saved' | 'dirty' | 'saving' | 'error';
+
+interface Props {
+  kind?: 'post' | 'page';
+  post?: Post;
+  page?: Page;
+  initialHTML: string;
+  unsplashEnabled: boolean;
+  previewPath: string;
+  sharePath: string;
+  // theme-provided template names for this document kind; empty = no picker
+  templates?: string[];
+}
+
+interface Meta {
+  title: string;
+  slug: string;
+  collection: string;
+  tags: string[];
+  excerpt: string;
+  cover: string;
+  coverAlt: string;
+  seoTitle: string;
+  seoDesc: string;
+  status: Status;
+  featured: boolean;
+  template: string;
+  isHome: boolean;
+  // pages only; '' = the site's default locale
+  locale: string;
+  authorId: string | null;
+  authorIds: string[];
+  publishedAt: number | null;
+  scheduledAt: number | null;
+}
+
+interface AuthorOption {
+  id: string;
+  name: string;
+}
+
+const tsToLocal = (ts: number | null) => {
+  if (!ts) return '';
+  const d = new Date(ts);
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+};
+const localToTs = (v: string) => (v ? new Date(v).getTime() : null);
+
+const STATUS_LABEL: Record<Status, string> = {
+  draft: 'Draft', scheduled: 'Scheduled', published: 'Published', archived: 'Archived',
+};
+
+// Pasted plain text that reads as markdown gets converted to rich content.
+// Only structural/inline syntax counts — ordinary prose must pass through.
+function looksLikeMarkdown(text: string): boolean {
+  return (
+    /^#{1,6}\s+\S/m.test(text) ||          // headings
+    /^\s{0,3}(?:[-*+]|\d+\.)\s+\S/m.test(text) || // lists
+    /^\s{0,3}>\s?\S/m.test(text) ||        // blockquotes
+    /^```/m.test(text) ||                  // fenced code
+    /^\s{0,3}(?:-{3,}|\*{3,})\s*$/m.test(text) || // hr
+    /^\s*\|.+\|\s*$/m.test(text) ||               // tables
+    /\*\*[^*\n]+\*\*|__[^_\n]+__/.test(text) ||   // bold
+    /!?\[[^\]\n]+\]\([^)\n]+\)/.test(text)        // links / images
+  );
+}
+
+// Table rows pasted back out of a rendered doc arrive one-per-paragraph with
+// blank lines between them — not a valid markdown table. Rejoin consecutive
+// pipe rows so marked sees a single table block.
+function joinBrokenTableRows(text: string): string {
+  const isRow = (l: string) => /^\s*\|.*\|\s*$/.test(l);
+  const lines = text.split('\n');
+  const out: string[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].trim() === '' && out.length && isRow(out[out.length - 1])) {
+      let j = i;
+      while (j < lines.length && lines[j].trim() === '') j++;
+      if (j < lines.length && isRow(lines[j])) { i = j - 1; continue; }
+    }
+    out.push(lines[i]);
+  }
+  return out.join('\n');
+}
+
+export default function PostEditor({ kind = 'post', post, page, initialHTML, unsplashEnabled, previewPath, sharePath, templates = [] }: Props) {
+  const doc = (kind === 'page' ? page : post)!;
+  const docId = doc.id;
+
+  const [meta, setMetaState] = useState<Meta>(() =>
+    kind === 'page'
+      ? {
+          title: page!.title, slug: page!.slug, collection: 'posts', tags: [], excerpt: '', cover: '', coverAlt: '',
+          seoTitle: page!.seoTitle, seoDesc: page!.seoDesc, status: page!.status,
+          featured: false, isHome: page!.isHome, locale: page!.locale, authorId: null, authorIds: [], template: page!.template, publishedAt: null, scheduledAt: null,
+        }
+      : {
+          title: post!.title, slug: post!.slug, collection: post!.collection, tags: post!.tags, excerpt: post!.excerpt,
+          cover: post!.cover, coverAlt: post!.coverAlt, seoTitle: post!.seoTitle, seoDesc: post!.seoDesc,
+          status: post!.status, featured: post!.featured, isHome: false, locale: '', authorId: post!.authorId,
+          authorIds: post!.authorIds.length ? post!.authorIds : post!.authorId ? [post!.authorId] : [],
+          template: post!.template,
+          publishedAt: post!.publishedAt, scheduledAt: post!.scheduledAt,
+        }
+  );
+  // labels + URL base follow the post's collection (config key on the row)
+  const col = kind === 'page' ? CONTENT.posts : (CONTENT.collections[meta.collection] ?? CONTENT.posts);
+  const listHref = kind === 'page' ? '/admin/pages' : `/admin/c/${meta.collection}`;
+  const noun = kind === 'page' ? 'page' : col.singular.toLowerCase();
+
+  const [authors, setAuthors] = useState<AuthorOption[]>([]);
+  const [tagSuggestions, setTagSuggestions] = useState<string[]>([]);
+  const metaRef = useRef(meta);
+  const [saveState, setSaveState] = useState<SaveState>('saved');
+  const saveStateRef = useRef<SaveState>('saved');
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [publishOpen, setPublishOpen] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const [split, setSplit] = useState(() => {
+    try { return localStorage.getItem('pe-split') === '1'; } catch { return false; }
+  });
+  const [previewTick, setPreviewTick] = useState(0);
+  const [picker, setPicker] = useState<'closed' | 'editor' | 'feature'>('closed');
+  const pickerRangeRef = useRef<Range | null>(null);
+  const [scheduleDraft, setScheduleDraft] = useState('');
+  const [linkEdit, setLinkEdit] = useState(false);
+  const [linkDraft, setLinkDraft] = useState('');
+  const [shortcutsOpen, setShortcutsOpen] = useState(false);
+  const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const setSave = (s: SaveState) => { saveStateRef.current = s; setSaveState(s); };
+  const toggleSplit = () => {
+    setSplit((v) => {
+      try { localStorage.setItem('pe-split', v ? '0' : '1'); } catch { /* private mode */ }
+      return !v;
+    });
+  };
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: { levels: [2, 3] },
+        link: { openOnClick: false },
+        codeBlock: false,
+      }),
+      CodeBlock,
+      Placeholder.configure({
+        // Only the empty document gets the invitation; empty paragraphs in an
+        // existing doc get the floating quick-insert menu instead (the two
+        // rendered on top of each other otherwise).
+        placeholder: ({ editor: ed, node }) =>
+          ed.isEmpty && node.type.name === 'paragraph' ? `Begin writing your ${noun} — type “/” for cards, paste markdown…` : '',
+      }),
+      CharacterCount,
+      TableKit.configure({ table: { resizable: false } }),
+      TableTyping,
+      ImageCard,
+      EmbedCard,
+      ButtonCard,
+      Callout,
+      HtmlCard,
+      PostListCard,
+      CalendarCard,
+      InfoCards,
+      FileCard,
+      BookmarkCard,
+      GalleryCard.configure({ unsplashEnabled }),
+      SlashMenu.configure({
+        context: {
+          openImagePicker: (range) => {
+            pickerRangeRef.current = range;
+            setPicker('editor');
+          },
+        },
+      }),
+    ],
+    content: initialHTML,
+    editorProps: {
+      attributes: { class: 'pe-prose' },
+      handlePaste: (view, event) => {
+        // bare embeddable URL on an empty paragraph → embed card
+        const text = event.clipboardData?.getData('text/plain')?.trim() ?? '';
+        const { $from, empty } = view.state.selection;
+        if (text && empty && $from.parent.type.name === 'paragraph' && $from.parent.content.size === 0 && !text.includes(' ')) {
+          const info = detectEmbed(text);
+          if (info && info.provider !== 'iframe') {
+            editorRef.current
+              ?.chain()
+              .insertContent({ type: 'embedCard', attrs: { url: text, embedSrc: info.embedSrc, provider: info.provider } })
+              .run();
+            return true;
+          }
+        }
+        // plain-text markdown → rich content; headings clamp to the editor's
+        // h2/h3 schema. Rich clipboards keep ProseMirror's own HTML handling,
+        // EXCEPT when the plain text carries a markdown table — copied
+        // markdown source usually has an HTML flavor alongside it (code
+        // editors, chat apps, this editor's own output) that would otherwise
+        // keep the pipe rows literal.
+        const html = event.clipboardData?.getData('text/html') ?? '';
+        const joined = joinBrokenTableRows(text);
+        const hasMarkdownTable = /^\s*\|.+\|\s*\n\s*\|(\s*:?-+:?\s*\|)+\s*$/m.test(joined);
+        if (text && looksLikeMarkdown(text) && (!html || hasMarkdownTable)) {
+          const rich = renderMarkdown(joined)
+            .replace(/<(\/?)h1\b[^>]*>/g, '<$1h2>')
+            .replace(/<(\/?)h[4-6]\b[^>]*>/g, '<$1h3>');
+          editorRef.current?.chain().insertContent(rich).run();
+          return true;
+        }
+        return false;
+      },
+    },
+    onUpdate: () => queueSave(),
+    immediatelyRender: false,
+  });
+  const editorRef = useRef(editor);
+  editorRef.current = editor;
+
+  const save = useCallback(async (overrides: Partial<Meta> = {}) => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    if (saveTimer.current) { clearTimeout(saveTimer.current); saveTimer.current = null; }
+    const m = { ...metaRef.current, ...overrides };
+    setSave('saving');
+    const bodyJson = JSON.stringify(ed.getJSON());
+    const bodyHtml = ed.getHTML();
+    if (kind === 'page') {
+      const r = await actions.pages.save({
+        id: docId,
+        title: m.title,
+        slug: m.slug,
+        bodyJson,
+        bodyHtml,
+        seoTitle: m.seoTitle,
+        seoDesc: m.seoDesc,
+        template: m.template,
+        status: m.status,
+        isHome: m.isHome,
+        locale: m.locale,
+      });
+      if (r.error) {
+        setSave('error');
+        return;
+      }
+      // server normalizes the locale (default stores as '')
+      const p = r.data.page;
+      setMetaState((prev) => {
+        const next = { ...prev, slug: p.slug, isHome: p.isHome, locale: p.locale };
+        metaRef.current = next;
+        return next;
+      });
+    } else {
+      const r = await actions.posts.save({
+        id: docId,
+        title: m.title,
+        slug: m.slug,
+        collection: m.collection,
+        bodyJson,
+        bodyHtml,
+        excerpt: m.excerpt,
+        tags: m.tags,
+        cover: m.cover,
+        coverAlt: m.coverAlt,
+        seoTitle: m.seoTitle,
+        seoDesc: m.seoDesc,
+        status: m.status,
+        featured: m.featured,
+        authorIds: m.authorIds,
+        template: m.template,
+        publishedAt: m.publishedAt,
+        scheduledAt: m.scheduledAt,
+      });
+      if (r.error) {
+        setSave('error');
+        return;
+      }
+      // server may have re-slugified / auto-set publish date
+      const p = r.data.post;
+      setMetaState((prev) => {
+        const next = { ...prev, slug: p.slug, publishedAt: p.publishedAt, collection: p.collection };
+        metaRef.current = next;
+        return next;
+      });
+    }
+    setPreviewTick((t) => t + 1);
+    setSave(saveStateRef.current === 'saving' ? 'saved' : saveStateRef.current);
+  }, [docId, kind]);
+
+  const queueSave = useCallback(() => {
+    setSave('dirty');
+    if (saveTimer.current) clearTimeout(saveTimer.current);
+    saveTimer.current = setTimeout(() => save(), 1200);
+  }, [save]);
+
+  const setMeta = useCallback((patch: Partial<Meta>) => {
+    setMetaState((prev) => {
+      const next = { ...prev, ...patch };
+      metaRef.current = next;
+      return next;
+    });
+    queueSave();
+  }, [queueSave]);
+
+  // Author + tag-registry options for the settings sidebar, loaded on first open.
+  const sidebarLoaded = useRef(false);
+  useEffect(() => {
+    if (kind !== 'post' || !sidebarOpen || sidebarLoaded.current) return;
+    sidebarLoaded.current = true;
+    actions.users.list({}).then((r) => {
+      if (!r.error) setAuthors(r.data.users.map((u) => ({ id: u.id, name: u.name })));
+    });
+    actions.tags.list({}).then((r) => {
+      if (!r.error) setTagSuggestions(r.data.tags.map((t) => t.name));
+    });
+  }, [sidebarOpen, kind]);
+
+  // opens the link editor seeded from the current selection/link
+  const openLinkEdit = useCallback(() => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    const { empty } = ed.state.selection;
+    if (empty && !ed.isActive('link')) return; // nothing to link
+    setLinkDraft((ed.getAttributes('link').href as string | undefined) ?? 'https://');
+    setLinkEdit(true);
+  }, []);
+
+  // Cmd+S flush, Cmd+K link, Cmd+/ shortcut sheet + unsaved-changes guard
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 's') { e.preventDefault(); save(); }
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); openLinkEdit(); }
+      if ((e.metaKey || e.ctrlKey) && e.key === '/') { e.preventDefault(); setShortcutsOpen((v) => !v); }
+    };
+    const onLeave = (e: BeforeUnloadEvent) => {
+      if (saveStateRef.current === 'dirty' || saveStateRef.current === 'saving') e.preventDefault();
+    };
+    window.addEventListener('keydown', onKey);
+    window.addEventListener('beforeunload', onLeave);
+    return () => { window.removeEventListener('keydown', onKey); window.removeEventListener('beforeunload', onLeave); };
+  }, [save, openLinkEdit]);
+
+  function insertPicked(img: PickedImage) {
+    const ed = editorRef.current;
+    if (picker === 'editor' && ed) {
+      const chain = pickerRangeRef.current
+        ? ed.chain().focus().insertContentAt(pickerRangeRef.current.from, { type: 'imageCard', attrs: img })
+        : ed.chain().focus().insertContent({ type: 'imageCard', attrs: img });
+      chain.run();
+      queueSave();
+    } else if (picker === 'feature') {
+      setMeta({ cover: img.src, coverAlt: img.alt });
+    }
+    setPicker('closed');
+  }
+
+  const [toast, setToast] = useState<{ text: string; href?: string } | null>(null);
+  const toastTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  function publicPath(m: Meta) {
+    return kind === 'post' ? collectionUrl(m.collection, m.slug) : m.isHome ? localeHomeUrl(m.locale) : `/${m.slug}`;
+  }
+
+  async function transition(patch: Partial<Meta>) {
+    setPublishOpen(false);
+    const next = { ...metaRef.current, ...patch };
+    metaRef.current = next;
+    setMetaState(next);
+    await save(patch);
+    if (saveStateRef.current === 'error') return;
+    const messages: Partial<Record<Status, { text: string; href?: string }>> = {
+      published: { text: `${kind === 'page' ? 'Page' : (CONTENT.collections[next.collection] ?? CONTENT.posts).singular} published`, href: publicPath(next) },
+      scheduled: { text: `Scheduled for ${next.scheduledAt ? new Date(next.scheduledAt).toLocaleString() : 'later'}` },
+      draft: { text: 'Back to private draft' },
+      archived: { text: 'Archived — hidden from the site' },
+    };
+    const msg = patch.status ? messages[patch.status] : undefined;
+    if (msg) {
+      setToast(msg);
+      if (toastTimer.current) clearTimeout(toastTimer.current);
+      toastTimer.current = setTimeout(() => setToast(null), 4500);
+    }
+  }
+
+  const words = editor?.storage.characterCount?.words() ?? 0;
+  const saveLabel =
+    saveState === 'saved' ? 'Saved' :
+    saveState === 'saving' ? 'Saving…' :
+    saveState === 'dirty' ? 'Unsaved changes' : 'Save failed — retrying on next change';
+
+  const publishLabel = meta.status === 'published' ? 'Update' : 'Publish';
+
+  return (
+    <div className={`pe-shell ${sidebarOpen ? 'has-sidebar' : ''} ${split ? 'has-split' : ''}`}>
+      {toast && (
+        <div className="pe-toast" role="status">
+          <span className="pe-toast-check">✓</span>
+          {toast.text}
+          {toast.href && <a href={toast.href} target="_blank" rel="noopener">View ↗</a>}
+        </div>
+      )}
+      <header className="pe-topbar">
+        <div className="pe-topbar-left">
+          <a className="pe-btn ghost sm" href={listHref}>{kind === 'page' ? '‹ Pages' : '‹ Posts'}</a>
+          <span className={`pe-savestate ${saveState}`}>
+            {STATUS_LABEL[meta.status]} — {saveLabel}
+          </span>
+        </div>
+        <div className="pe-topbar-right">
+          <button
+            type="button"
+            className={`pe-btn ghost sm ${split ? 'is-active' : ''}`}
+            title="Side-by-side preview"
+            onClick={toggleSplit}
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+              <rect x="3" y="4" width="18" height="16" rx="2" /><path d="M12 4v16" />
+            </svg>
+          </button>
+          <button type="button" className="pe-btn ghost sm" onClick={() => setPreviewOpen(true)}>Preview</button>
+          <div className="pe-publish-wrap">
+            <button type="button" className="pe-btn primary sm" onClick={() => setPublishOpen((v) => !v)}>
+              {publishLabel} ▾
+            </button>
+            {publishOpen && (
+              <div className="pe-popover">
+                {meta.status === 'draft' && (
+                  <>
+                    <div className="pe-pop-head">
+                      <b>Ready to publish?</b>
+                      <span>This {noun} is a private draft — publishing makes it visible to everyone.</span>
+                    </div>
+                    <button
+                      type="button"
+                      className="pe-btn primary pe-pop-cta"
+                      onClick={() => transition({ status: 'published', scheduledAt: null })}
+                    >
+                      Publish now
+                    </button>
+                    {kind === 'post' && (
+                      <div className="pe-pop-schedule">
+                        <span className="pe-pop-label">Or schedule for later</span>
+                        <div className="pe-pop-schedrow">
+                          <input
+                            type="datetime-local"
+                            value={scheduleDraft}
+                            min={tsToLocal(Date.now())}
+                            onChange={(e) => setScheduleDraft(e.target.value)}
+                          />
+                          <button
+                            type="button"
+                            className="pe-btn sm"
+                            disabled={!scheduleDraft || (localToTs(scheduleDraft) ?? 0) <= Date.now()}
+                            onClick={() => transition({ status: 'scheduled', scheduledAt: localToTs(scheduleDraft) })}
+                          >
+                            Schedule
+                          </button>
+                        </div>
+                        {!scheduleDraft && <span className="pe-pop-hint">Pick a date and time first</span>}
+                      </div>
+                    )}
+                  </>
+                )}
+                {meta.status === 'scheduled' && (
+                  <>
+                    <div className="pe-pop-head">
+                      <b>Scheduled</b>
+                      <span>Goes live {meta.scheduledAt ? new Date(meta.scheduledAt).toLocaleString() : ''}.</span>
+                    </div>
+                    <button
+                      type="button"
+                      className="pe-btn primary pe-pop-cta"
+                      onClick={() => transition({ status: 'published', scheduledAt: null })}
+                    >
+                      Publish now instead
+                    </button>
+                    <button type="button" className="pe-pop-item" onClick={() => transition({ status: 'draft', scheduledAt: null })}>
+                      <b>Unschedule</b><span>Back to a private draft</span>
+                    </button>
+                  </>
+                )}
+                {meta.status === 'published' && (
+                  <>
+                    <div className="pe-pop-head">
+                      <b>Published</b>
+                      <span>Live on the site — edits save and go live automatically.</span>
+                    </div>
+                    <a className="pe-btn pe-pop-cta" href={publicPath(meta)} target="_blank" rel="noopener">
+                      View on site ↗
+                    </a>
+                    <div className="pe-pop-sep" />
+                    <button type="button" className="pe-pop-item" onClick={() => transition({ status: 'draft' })}>
+                      <b>Unpublish</b><span>Revert to a private draft</span>
+                    </button>
+                    <button type="button" className="pe-pop-item" onClick={() => transition({ status: 'archived' })}>
+                      <b>Archive</b><span>Hide from the site, keep forever</span>
+                    </button>
+                  </>
+                )}
+                {meta.status === 'archived' && (
+                  <>
+                    <div className="pe-pop-head">
+                      <b>Archived</b>
+                      <span>Hidden from the site, kept forever.</span>
+                    </div>
+                    <button
+                      type="button"
+                      className="pe-btn primary pe-pop-cta"
+                      onClick={() => transition({ status: 'published' })}
+                    >
+                      Publish again
+                    </button>
+                    <button type="button" className="pe-pop-item" onClick={() => transition({ status: 'draft' })}>
+                      <b>Restore as draft</b><span>Back into the workflow</span>
+                    </button>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+          <button
+            type="button"
+            className={`pe-btn ghost sm pe-sidebar-toggle ${sidebarOpen ? 'is-active' : ''}`}
+            title={kind === 'page' ? 'Page settings' : `${col.singular} settings`}
+            onClick={() => setSidebarOpen((v) => !v)}
+          >
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
+              <rect x="3" y="4" width="18" height="16" rx="2" /><path d="M15 4v16" />
+            </svg>
+          </button>
+        </div>
+      </header>
+
+      <div className="pe-body">
+        <main className="pe-main">
+          <div className="pe-column">
+            {kind === 'post' && (meta.cover ? (
+              <figure className="pe-feature">
+                <img src={meta.cover} alt={meta.coverAlt} />
+                <div className="pe-feature-tools">
+                  <button type="button" className="pe-btn sm" onClick={() => setPicker('feature')}>Replace</button>
+                  <button type="button" className="pe-btn sm" onClick={() => setMeta({ cover: '', coverAlt: '' })}>Remove</button>
+                </div>
+                <figcaption className="pe-feature-label">Feature image</figcaption>
+              </figure>
+            ) : (
+              <button type="button" className="pe-add-feature" onClick={() => setPicker('feature')}>
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                  <rect x="3" y="5" width="18" height="14" rx="2" />
+                  <circle cx="8.5" cy="10" r="1.5" />
+                  <path d="M21 15.5 16 11l-6.5 6.5M3 17l4-4 3 3" />
+                </svg>
+                <span>Add feature image</span>
+                <em>Shown at the top of the {noun} and in link previews</em>
+              </button>
+            ))}
+
+            <textarea
+              className="pe-title"
+              rows={1}
+              placeholder={kind === 'page' ? 'Page title' : `${col.singular} title`}
+              value={meta.title}
+              onChange={(e) => {
+                e.target.style.height = 'auto';
+                e.target.style.height = `${e.target.scrollHeight}px`;
+                setMeta({ title: e.target.value });
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') { e.preventDefault(); editor?.commands.focus('start'); }
+              }}
+            />
+
+            {editor && (
+              <BubbleMenu editor={editor} className="pe-bubble" options={{ placement: 'top' }}>
+                <button type="button" className={editor.isActive('bold') ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleBold().run()}><b>B</b></button>
+                <button type="button" className={editor.isActive('italic') ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleItalic().run()}><i>I</i></button>
+                <button type="button" className={editor.isActive('strike') ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleStrike().run()}><s>S</s></button>
+                <button type="button" className={editor.isActive('code') ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleCode().run()}>{'<>'}</button>
+                <span className="pe-bubble-sep" />
+                <button type="button" className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}>H2</button>
+                <button type="button" className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}>H3</button>
+                <button type="button" className={editor.isActive('blockquote') ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleBlockquote().run()}>❝</button>
+                <span className="pe-bubble-sep" />
+                <button
+                  type="button"
+                  className={editor.isActive('link') ? 'is-active' : ''}
+                  title="Link (⌘K)"
+                  onClick={openLinkEdit}
+                >
+                  Link
+                </button>
+              </BubbleMenu>
+            )}
+
+            {editor && (
+              <BubbleMenu
+                editor={editor}
+                className="pe-bubble pe-tablebar"
+                options={{ placement: 'bottom' }}
+                shouldShow={({ editor: ed }) => ed.isActive('table')}
+              >
+                <button type="button" title="Add column" onClick={() => editor.chain().focus().addColumnAfter().run()}>+ Col</button>
+                <button type="button" title="Add row" onClick={() => editor.chain().focus().addRowAfter().run()}>+ Row</button>
+                <span className="pe-bubble-sep" />
+                <button type="button" title="Delete column" onClick={() => editor.chain().focus().deleteColumn().run()}>− Col</button>
+                <button type="button" title="Delete row" onClick={() => editor.chain().focus().deleteRow().run()}>− Row</button>
+                <span className="pe-bubble-sep" />
+                <button type="button" title="Toggle header row" onClick={() => editor.chain().focus().toggleHeaderRow().run()}>Header</button>
+                <button type="button" title="Delete table" onClick={() => editor.chain().focus().deleteTable().run()}>✕</button>
+              </BubbleMenu>
+            )}
+
+            {editor && (
+              <FloatingMenu
+                editor={editor}
+                className="pe-floating"
+                options={{ placement: 'left' }}
+                shouldShow={({ editor: ed, view, state }) => {
+                  // empty paragraph in a non-empty doc — the empty doc shows the
+                  // placeholder instead, so the two never overlap
+                  const { $anchor, empty } = state.selection;
+                  return (
+                    view.hasFocus() && empty && !ed.isEmpty && $anchor.depth === 1 &&
+                    $anchor.parent.type.name === 'paragraph' && $anchor.parent.content.size === 0
+                  );
+                }}
+              >
+                {([
+                  ['Image', () => { pickerRangeRef.current = null; setPicker('editor'); }],
+                  ['Gallery', () => editor.chain().focus().insertContent({ type: 'galleryCard' }).run()],
+                  ['Embed', () => editor.chain().focus().insertContent({ type: 'embedCard' }).run()],
+                  ['Bookmark', () => editor.chain().focus().insertContent({ type: 'bookmarkCard' }).run()],
+                  ['File', () => editor.chain().focus().insertContent({ type: 'fileCard' }).run()],
+                  ['Button', () => editor.chain().focus().insertContent({ type: 'buttonCard' }).run()],
+                  ['Callout', () => editor.chain().focus().insertContent({ type: 'callout' }).run()],
+                  ['Calendar', () => editor.chain().focus().insertContent({ type: 'calendarCard' }).run()],
+                  ['Info cards', () => editor.chain().focus().insertContent({ type: 'infoCards' }).run()],
+                  ['Table', () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()],
+                  ['HTML', () => editor.chain().focus().insertContent({ type: 'htmlCard' }).run()],
+                  ['— Divider', () => editor.chain().focus().setHorizontalRule().run()],
+                ] as [string, () => void][]).map(([label, run]) => (
+                  <button key={label} type="button" onMouseDown={(e) => { e.preventDefault(); run(); }}>{label}</button>
+                ))}
+                <span className="pe-floating-hint">or type /</span>
+              </FloatingMenu>
+            )}
+
+            {linkEdit && editor && (
+              <div className="pe-linkedit" role="dialog" aria-label="Edit link">
+                <input
+                  autoFocus
+                  type="url"
+                  placeholder="https://… (empty removes the link)"
+                  value={linkDraft}
+                  onChange={(e) => setLinkDraft(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter') {
+                      e.preventDefault();
+                      const url = linkDraft.trim();
+                      if (url === '' || url === 'https://') editor.chain().focus().extendMarkRange('link').unsetLink().run();
+                      else editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+                      setLinkEdit(false);
+                    }
+                    if (e.key === 'Escape') { e.preventDefault(); setLinkEdit(false); editor.commands.focus(); }
+                  }}
+                />
+                <button
+                  type="button"
+                  className="pe-btn primary sm"
+                  onClick={() => {
+                    const url = linkDraft.trim();
+                    if (url === '' || url === 'https://') editor.chain().focus().extendMarkRange('link').unsetLink().run();
+                    else editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+                    setLinkEdit(false);
+                  }}
+                >
+                  Apply
+                </button>
+                <button type="button" className="pe-btn ghost sm" onClick={() => { setLinkEdit(false); editor.commands.focus(); }}>✕</button>
+              </div>
+            )}
+
+            <EditorContent editor={editor} />
+            <div className="pe-wordcount">
+              {words.toLocaleString()} words
+              <button type="button" className="pe-shortcuts-btn" title="Keyboard shortcuts (⌘/)" onClick={() => setShortcutsOpen(true)}>⌘/</button>
+            </div>
+
+            {shortcutsOpen && (
+              <div className="pe-shortcuts-overlay" onClick={() => setShortcutsOpen(false)}>
+                <div className="pe-shortcuts" role="dialog" aria-label="Keyboard shortcuts" onClick={(e) => e.stopPropagation()}>
+                  <div className="pe-shortcuts-head">
+                    <span>Keyboard shortcuts</span>
+                    <button type="button" className="pe-btn ghost sm" onClick={() => setShortcutsOpen(false)}>✕</button>
+                  </div>
+                  {([
+                    ['Writing', [
+                      ['⌘B / ⌘I', 'Bold / italic'],
+                      ['⌘⇧X', 'Strikethrough'],
+                      ['⌘E', 'Inline code'],
+                      ['⌘K', 'Add or edit a link'],
+                      ['/', 'Insert a card (image, gallery, embed…)'],
+                    ]],
+                    ['Markdown as you type', [
+                      ['# · ## · ###', 'Headings'],
+                      ['- or 1.', 'Bullet / numbered list'],
+                      ['> text', 'Quote'],
+                      ['``` ', 'Code block'],
+                      ['| a | b |', 'Table (press Enter after the divider row)'],
+                      ['Paste markdown', 'Converts to rich content automatically'],
+                    ]],
+                    ['Document', [
+                      ['⌘S', 'Save now'],
+                      ['⌘/', 'This cheat-sheet'],
+                    ]],
+                  ] as [string, [string, string][]][]).map(([group, rows]) => (
+                    <div key={group} className="pe-shortcuts-group">
+                      <div className="pe-shortcuts-title">{group}</div>
+                      {rows.map(([keys, what]) => (
+                        <div key={keys} className="pe-shortcuts-row">
+                          <kbd>{keys}</kbd>
+                          <span>{what}</span>
+                        </div>
+                      ))}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </main>
+
+        {split && (
+          <aside className="pe-splitpane">
+            <div className="pe-split-bar">
+              <span className="pe-split-label">Live preview</span>
+              <div className="pe-split-actions">
+                <button type="button" className="pe-btn ghost sm" title="Refresh" onClick={() => setPreviewTick((t) => t + 1)}>↻</button>
+                <a className="pe-btn ghost sm" href={previewPath} target="_blank" rel="noopener" title="Open in tab">↗</a>
+                <button type="button" className="pe-btn ghost sm" title="Close preview" onClick={toggleSplit}>✕</button>
+              </div>
+            </div>
+            <iframe key={previewTick} src={previewPath} title="Live preview" />
+          </aside>
+        )}
+      </div>
+
+      {sidebarOpen && (
+        <aside className="pe-sidebar">
+          <div className="pe-sidebar-head">
+            <span>{kind === 'page' ? 'Page settings' : `${col.singular} settings`}</span>
+            <button type="button" className="pe-btn ghost sm" onClick={() => setSidebarOpen(false)}>✕</button>
+          </div>
+
+          <label className="pe-field">
+            <span>{kind === 'page' ? 'Page URL' : `${col.singular} URL`}</span>
+            <div className="pe-slug">
+              <span className="pe-slug-prefix">{kind === 'page' ? '/' : `${col.base}/`}</span>
+              <input type="text" value={meta.slug} onChange={(e) => setMeta({ slug: e.target.value })} />
+            </div>
+          </label>
+
+          {kind === 'post' && Object.keys(CONTENT.collections).length > 1 && (
+            <label className="pe-field">
+              <span>Collection</span>
+              <select value={meta.collection} onChange={(e) => setMeta({ collection: e.target.value })}>
+                {Object.entries(CONTENT.collections).map(([k, c]) => (
+                  <option key={k} value={k}>{c.plural}</option>
+                ))}
+              </select>
+              {meta.status === 'published' && (
+                <em className="hint">Moving a published {noun} leaves a redirect at its old URL.</em>
+              )}
+            </label>
+          )}
+
+          {kind === 'page' && I18N.enabled && (
+            <label className="pe-field">
+              <span>Language</span>
+              <select
+                value={meta.locale || I18N.defaultLocale}
+                onChange={(e) => setMeta({ locale: e.target.value })}
+              >
+                {I18N.locales.map((l) => (
+                  <option key={l} value={l}>{l.toUpperCase()}{l === I18N.defaultLocale ? ' — default' : ''}</option>
+                ))}
+              </select>
+            </label>
+          )}
+
+          {kind === 'page' && (
+            <label className="pe-field pe-check">
+              <input
+                type="checkbox"
+                checked={meta.isHome}
+                onChange={(e) => setMeta({ isHome: e.target.checked })}
+              />
+              {I18N.enabled ? (
+                <span>Serve this page at <code>{localeHomeUrl(meta.locale)}</code> ({(meta.locale || I18N.defaultLocale).toUpperCase()} home page)</span>
+              ) : (
+                <span>Serve this page at <code>/</code> (home page)</span>
+              )}
+            </label>
+          )}
+
+          {templates.length > 0 && (
+            <label className="pe-field">
+              <span>Template <em className="pe-check-hint">from the active theme</em></span>
+              <select value={meta.template} onChange={(e) => setMeta({ template: e.target.value })}>
+                <option value="">Default</option>
+                {templates.map((t) => (
+                  <option key={t} value={t}>{t}</option>
+                ))}
+              </select>
+            </label>
+          )}
+
+          {kind === 'post' && (
+            <>
+              <label className="pe-field">
+                <span>Publish date</span>
+                <input
+                  type="datetime-local"
+                  value={tsToLocal(meta.publishedAt)}
+                  onChange={(e) => setMeta({ publishedAt: localToTs(e.target.value) })}
+                />
+              </label>
+
+              <label className="pe-field">
+                <span>Tags</span>
+                <TagInput tags={meta.tags} suggestions={tagSuggestions} onChange={(tags) => setMeta({ tags })} />
+              </label>
+
+              <label className="pe-field pe-check">
+                <input
+                  type="checkbox"
+                  checked={meta.featured}
+                  onChange={(e) => setMeta({ featured: e.target.checked })}
+                />
+                <span>Feature this post <em className="pe-check-hint">highlighted on the homepage and in featured lists</em></span>
+              </label>
+
+              {authors.length > 0 && (
+                <div className="pe-field">
+                  <span>Authors <em className="pe-check-hint">first is the primary byline</em></span>
+                  <div className="pe-authors">
+                    {authors.map((a) => {
+                      const checked = meta.authorIds.includes(a.id);
+                      return (
+                        <label key={a.id} className="pe-check pe-author-check">
+                          <input
+                            type="checkbox"
+                            checked={checked}
+                            onChange={(e) =>
+                              setMeta({
+                                authorIds: e.target.checked
+                                  ? [...meta.authorIds, a.id]
+                                  : meta.authorIds.filter((id) => id !== a.id),
+                              })
+                            }
+                          />
+                          <span>{a.name}{checked && meta.authorIds[0] === a.id && meta.authorIds.length > 1 ? ' · primary' : ''}</span>
+                        </label>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+
+              <label className="pe-field">
+                <span>Excerpt <em>{meta.excerpt.length}/300</em></span>
+                <textarea
+                  rows={3}
+                  maxLength={300}
+                  placeholder="A short teaser shown on the blog index and in link previews"
+                  value={meta.excerpt}
+                  onChange={(e) => setMeta({ excerpt: e.target.value })}
+                />
+              </label>
+
+              <div className="pe-field">
+                <span>Feature image alt</span>
+                <input
+                  type="text"
+                  placeholder="Describe the feature image"
+                  value={meta.coverAlt}
+                  onChange={(e) => setMeta({ coverAlt: e.target.value })}
+                />
+              </div>
+            </>
+          )}
+
+          <details className="pe-seo">
+            <summary>Search engine optimization</summary>
+            <label className="pe-field">
+              <span>Meta title <em>{(meta.seoTitle || meta.title).length}/60</em></span>
+              <input type="text" placeholder={meta.title} value={meta.seoTitle} onChange={(e) => setMeta({ seoTitle: e.target.value })} />
+            </label>
+            <label className="pe-field">
+              <span>Meta description <em>{(meta.seoDesc || meta.excerpt).length}/160</em></span>
+              <textarea rows={3} placeholder={meta.excerpt} value={meta.seoDesc} onChange={(e) => setMeta({ seoDesc: e.target.value })} />
+            </label>
+          </details>
+
+          <div className="pe-danger">
+            <button
+              type="button"
+              className="pe-btn danger sm"
+              onClick={async () => {
+                if (!window.confirm(`Delete this ${noun} permanently? This cannot be undone.`)) return;
+                if (kind === 'page') await actions.pages.delete({ id: docId });
+                else await actions.posts.delete({ id: docId });
+                location.href = listHref;
+              }}
+            >
+              Delete {noun}
+            </button>
+          </div>
+        </aside>
+      )}
+
+      <ImagePicker
+        open={picker !== 'closed'}
+        unsplashEnabled={unsplashEnabled}
+        onClose={() => setPicker('closed')}
+        onSelect={insertPicked}
+      />
+      <PreviewOverlay
+        open={previewOpen}
+        url={previewPath}
+        shareUrl={sharePath}
+        onClose={() => setPreviewOpen(false)}
+      />
+    </div>
+  );
+}
+
+// ---- tag chips ------------------------------------------------------------
+
+function TagInput({ tags, suggestions = [], onChange }: { tags: string[]; suggestions?: string[]; onChange: (tags: string[]) => void }) {
+  const [draft, setDraft] = useState('');
+  const commit = (value?: string) => {
+    const t = (value ?? draft).trim().replace(/,+$/, '');
+    if (t && !tags.some((x) => x.toLowerCase() === t.toLowerCase())) onChange([...tags, t]);
+    setDraft('');
+  };
+  const matches = draft
+    ? suggestions.filter(
+        (s) => s.toLowerCase().includes(draft.toLowerCase()) && !tags.some((t) => t.toLowerCase() === s.toLowerCase())
+      ).slice(0, 6)
+    : [];
+  return (
+    <div className="pe-tags-wrap">
+      <div className="pe-tags">
+        {tags.map((t) => (
+          <span key={t} className="pe-tag">
+            {t}
+            <button type="button" aria-label={`Remove ${t}`} onClick={() => onChange(tags.filter((x) => x !== t))}>✕</button>
+          </span>
+        ))}
+        <input
+          type="text"
+          placeholder={tags.length ? '' : 'Add a tag…'}
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={() => setTimeout(() => commit(), 150)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ',') { e.preventDefault(); commit(matches[0] && matches[0].toLowerCase() === draft.toLowerCase() ? matches[0] : undefined); }
+            if (e.key === 'Backspace' && !draft && tags.length) onChange(tags.slice(0, -1));
+            if (e.key === 'Escape') setDraft('');
+          }}
+        />
+      </div>
+      {matches.length > 0 && (
+        <div className="pe-tag-suggest">
+          {matches.map((s) => (
+            <button key={s} type="button" onMouseDown={(e) => { e.preventDefault(); commit(s); }}>{s}</button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}