@acms-subir/core 0.1.0 → 0.2.0

package/src/components/editor/PostEditor.tsx

@@ -3,6 +3,7 @@ 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 Highlight from '@tiptap/extension-highlight';
 import { TableKit } from '@tiptap/extension-table';
 import { Placeholder, CharacterCount } from '@tiptap/extensions';
 import { actions } from 'astro:actions';
@@ -11,20 +12,26 @@ import { ImageCard, EmbedCard, ButtonCard, Callout, HtmlCard, detectEmbed } from
 import { FileCard, GalleryCard, BookmarkCard } from './extensions/mediaCards';
 import { CodeBlock } from './extensions/codeBlock';
 import { PostListCard } from './extensions/postList';
+import { ToggleCard } from './extensions/toggle';
+import { TocCard } from './extensions/toc';
 import { CalendarCard } from './extensions/calendar';
 import { InfoCards } from './extensions/infoCards';
-import { SlashMenu } from './extensions/slash';
+import { SlashMenu, type SlashSnippet } 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';
+import { mergePageDraft, mergePostDraft } from '../../lib/drafts';
 
 // 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.
+//
+// Live (published/scheduled) documents autosave into a private pending draft;
+// the live version only changes when the user hits Update (applyUpdate).
 
 type SaveState = 'saved' | 'dirty' | 'saving' | 'error';
 
@@ -36,6 +43,9 @@ interface Props {
   unsplashEnabled: boolean;
   previewPath: string;
   sharePath: string;
+  // public URL of the LIVE version — may differ from the staged slug while
+  // edits are pending; falls back to the editor state's URL when omitted
+  livePath?: string;
   // theme-provided template names for this document kind; empty = no picker
   templates?: string[];
 }
@@ -112,9 +122,12 @@ function joinBrokenTableRows(text: string): string {
   return out.join('\n');
 }
 
-export default function PostEditor({ kind = 'post', post, page, initialHTML, unsplashEnabled, previewPath, sharePath, templates = [] }: Props) {
+export default function PostEditor({ kind = 'post', post, page, initialHTML, unsplashEnabled, previewPath, sharePath, livePath: livePathProp, templates = [] }: Props) {
   const doc = (kind === 'page' ? page : post)!;
   const docId = doc.id;
+  // pending = staged edits exist that the live site doesn't show yet
+  const [pending, setPending] = useState(() => Boolean(doc.draft));
+  const [livePath, setLivePath] = useState(livePathProp ?? '');
 
   const [meta, setMetaState] = useState<Meta>(() =>
     kind === 'page'
@@ -154,8 +167,13 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
   const [scheduleDraft, setScheduleDraft] = useState('');
   const [linkEdit, setLinkEdit] = useState(false);
   const [linkDraft, setLinkDraft] = useState('');
+  const [linkResults, setLinkResults] = useState<{ kind: string; title: string; url: string }[]>([]);
+  const [linkSel, setLinkSel] = useState(-1);
   const [shortcutsOpen, setShortcutsOpen] = useState(false);
   const saveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // saved snippets for the "/" menu; a ref so the (non-React) suggestion
+  // plugin always reads the current list
+  const snippetsRef = useRef<SlashSnippet[]>([]);
 
   const setSave = (s: SaveState) => { saveStateRef.current = s; setSaveState(s); };
   const toggleSplit = () => {
@@ -168,11 +186,12 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
-        heading: { levels: [2, 3] },
+        heading: { levels: [1, 2, 3] },
         link: { openOnClick: false },
         codeBlock: false,
       }),
       CodeBlock,
+      Highlight,
       Placeholder.configure({
         // Only the empty document gets the invitation; empty paragraphs in an
         // existing doc get the floating quick-insert menu instead (the two
@@ -189,6 +208,8 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
       Callout,
       HtmlCard,
       PostListCard,
+      ToggleCard,
+      TocCard,
       CalendarCard,
       InfoCards,
       FileCard,
@@ -200,6 +221,11 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
             pickerRangeRef.current = range;
             setPicker('editor');
           },
+          getSnippets: () => snippetsRef.current,
+          deleteSnippet: (id) => {
+            snippetsRef.current = snippetsRef.current.filter((s) => s.id !== id);
+            actions.snippets.delete({ id });
+          },
         },
       }),
     ],
@@ -220,8 +246,8 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
             return true;
           }
         }
-        // plain-text markdown → rich content; headings clamp to the editor's
-        // h2/h3 schema. Rich clipboards keep ProseMirror's own HTML handling,
+        // plain-text markdown → rich content; h4–h6 clamp to h3, the editor's
+        // deepest level. 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
@@ -231,7 +257,6 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
         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;
@@ -271,8 +296,10 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
         setSave('error');
         return;
       }
-      // server normalizes the locale (default stores as '')
-      const p = r.data.page;
+      // server normalizes the locale (default stores as ''); a staged save
+      // returns the live row + pending draft, so sync from the merged view
+      const p = mergePageDraft(r.data.page);
+      setPending(Boolean(r.data.page.draft));
       setMetaState((prev) => {
         const next = { ...prev, slug: p.slug, isHome: p.isHome, locale: p.locale };
         metaRef.current = next;
@@ -303,8 +330,10 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
         setSave('error');
         return;
       }
-      // server may have re-slugified / auto-set publish date
-      const p = r.data.post;
+      // server may have re-slugified / auto-set publish date; a staged save
+      // returns the live row + pending draft, so sync from the merged view
+      const p = mergePostDraft(r.data.post);
+      setPending(Boolean(r.data.post.draft));
       setMetaState((prev) => {
         const next = { ...prev, slug: p.slug, publishedAt: p.publishedAt, collection: p.collection };
         metaRef.current = next;
@@ -330,6 +359,26 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
     queueSave();
   }, [queueSave]);
 
+  // Saved snippets for the "/" menu, loaded once per mount.
+  useEffect(() => {
+    actions.snippets.list({}).then((r) => {
+      if (!r.error) snippetsRef.current = r.data.snippets;
+    });
+  }, []);
+
+  const saveSnippet = useCallback(async () => {
+    const ed = editorRef.current;
+    if (!ed || ed.state.selection.empty) return;
+    const name = window.prompt('Snippet name — it will appear in the “/” menu:');
+    if (!name?.trim()) return;
+    const nodes = ed.state.selection.content().content.toJSON() as unknown[] | null;
+    if (!nodes?.length) return;
+    const r = await actions.snippets.create({ name: name.trim(), contentJson: JSON.stringify(nodes) });
+    if (r.error) return;
+    snippetsRef.current = [...snippetsRef.current, r.data.snippet].sort((a, b) => a.name.localeCompare(b.name));
+    showToast({ text: `Snippet “${r.data.snippet.name}” saved — insert it with /` });
+  }, []);
+
   // Author + tag-registry options for the settings sidebar, loaded on first open.
   const sidebarLoaded = useRef(false);
   useEffect(() => {
@@ -353,6 +402,29 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
     setLinkEdit(true);
   }, []);
 
+  const applyLink = useCallback((raw: string) => {
+    const ed = editorRef.current;
+    if (!ed) return;
+    const url = raw.trim();
+    if (url === '' || url === 'https://') ed.chain().focus().extendMarkRange('link').unsetLink().run();
+    else ed.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+    setLinkEdit(false);
+  }, []);
+
+  // Internal link search: typing a title into the ⌘K box surfaces published
+  // posts/pages to link to; URL-ish input (or the seeded https://) skips it.
+  useEffect(() => {
+    if (!linkEdit) { setLinkResults([]); setLinkSel(-1); return; }
+    const q = linkDraft.trim();
+    if (q.length < 2 || /^(https?:\/\/|\/|#|mailto:|tel:)/i.test(q)) { setLinkResults([]); setLinkSel(-1); return; }
+    const t = setTimeout(() => {
+      actions.linkTargets.search({ query: q }).then((r) => {
+        if (!r.error) { setLinkResults(r.data.targets); setLinkSel(r.data.targets.length ? 0 : -1); }
+      });
+    }, 200);
+    return () => clearTimeout(t);
+  }, [linkDraft, linkEdit]);
+
   // Cmd+S flush, Cmd+K link, Cmd+/ shortcut sheet + unsaved-changes guard
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -389,13 +461,22 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
     return kind === 'post' ? collectionUrl(m.collection, m.slug) : m.isHome ? localeHomeUrl(m.locale) : `/${m.slug}`;
   }
 
+  function showToast(msg: { text: string; href?: string }) {
+    setToast(msg);
+    if (toastTimer.current) clearTimeout(toastTimer.current);
+    toastTimer.current = setTimeout(() => setToast(null), 4500);
+  }
+
   async function transition(patch: Partial<Meta>) {
     setPublishOpen(false);
     const next = { ...metaRef.current, ...patch };
     metaRef.current = next;
     setMetaState(next);
+    // a status change writes the full editor state live (any staged edits are
+    // folded in — the payload IS the staged content) and clears the draft
     await save(patch);
     if (saveStateRef.current === 'error') return;
+    if (patch.status === 'published') setLivePath(publicPath(next));
     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'}` },
@@ -403,20 +484,54 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
       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);
+    if (msg) showToast(msg);
+  }
+
+  // Update button: flush the current edits into the pending draft, then ask
+  // the server to copy the draft onto the live version.
+  async function applyUpdate() {
+    setPublishOpen(false);
+    await save();
+    if (saveStateRef.current === 'error') return;
+    const r = kind === 'page'
+      ? await actions.pages.applyUpdate({ id: docId })
+      : await actions.posts.applyUpdate({ id: docId });
+    if (r.error) {
+      setSave('error');
+      return;
+    }
+    setPending(false);
+    const href = publicPath(metaRef.current);
+    setLivePath(href);
+    setPreviewTick((t) => t + 1);
+    showToast({ text: 'Changes are live', href });
+  }
+
+  async function discardChanges() {
+    if (!window.confirm(`Discard the pending changes and go back to the live ${noun}? This cannot be undone.`)) return;
+    setPublishOpen(false);
+    // cancel any queued autosave so it can't re-stage the edits after the
+    // discard, and clear the dirty flag so the reload isn't blocked
+    if (saveTimer.current) { clearTimeout(saveTimer.current); saveTimer.current = null; }
+    setSave('saved');
+    const r = kind === 'page'
+      ? await actions.pages.discardChanges({ id: docId })
+      : await actions.posts.discardChanges({ id: docId });
+    if (r.error) {
+      setSave('error');
+      return;
     }
+    location.reload(); // rehydrate the editor from the live version
   }
 
   const words = editor?.storage.characterCount?.words() ?? 0;
   const saveLabel =
-    saveState === 'saved' ? 'Saved' :
+    saveState === 'saved' ? (pending ? 'Saved — not live yet' : 'Saved') :
     saveState === 'saving' ? 'Saving…' :
     saveState === 'dirty' ? 'Unsaved changes' : 'Save failed — retrying on next change';
 
   const publishLabel = meta.status === 'published' ? 'Update' : 'Publish';
+  const liveHref = livePath || publicPath(meta);
 
   return (
     <div className={`pe-shell ${sidebarOpen ? 'has-sidebar' : ''} ${split ? 'has-split' : ''}`}>
@@ -431,7 +546,7 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
         <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}
+            {STATUS_LABEL[meta.status]}{pending && <em className="pe-edited-dot"> · edited</em>} — {saveLabel}
           </span>
         </div>
         <div className="pe-topbar-right">
@@ -492,16 +607,29 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                 {meta.status === 'scheduled' && (
                   <>
                     <div className="pe-pop-head">
-                      <b>Scheduled</b>
-                      <span>Goes live {meta.scheduledAt ? new Date(meta.scheduledAt).toLocaleString() : ''}.</span>
+                      <b>Scheduled{pending ? ' · unpublished edits' : ''}</b>
+                      <span>
+                        Goes live {meta.scheduledAt ? new Date(meta.scheduledAt).toLocaleString() : ''}.
+                        {pending && ' Edits are saved privately — press Update to include them.'}
+                      </span>
                     </div>
+                    {pending && (
+                      <button type="button" className="pe-btn primary pe-pop-cta" onClick={applyUpdate}>
+                        Update scheduled version
+                      </button>
+                    )}
                     <button
                       type="button"
-                      className="pe-btn primary pe-pop-cta"
+                      className={`pe-btn ${pending ? '' : 'primary '}pe-pop-cta`}
                       onClick={() => transition({ status: 'published', scheduledAt: null })}
                     >
                       Publish now instead
                     </button>
+                    {pending && (
+                      <button type="button" className="pe-pop-item" onClick={discardChanges}>
+                        <b>Discard pending changes</b><span>Back to the scheduled version</span>
+                      </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>
@@ -510,12 +638,26 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                 {meta.status === 'published' && (
                   <>
                     <div className="pe-pop-head">
-                      <b>Published</b>
-                      <span>Live on the site — edits save and go live automatically.</span>
+                      <b>{pending ? 'Published · unpublished edits' : 'Published'}</b>
+                      <span>
+                        {pending
+                          ? `Changes are saved privately — the live ${noun} hasn't changed yet.`
+                          : 'Live on the site — edits stay private until you press Update.'}
+                      </span>
                     </div>
-                    <a className="pe-btn pe-pop-cta" href={publicPath(meta)} target="_blank" rel="noopener">
-                      View on site ↗
+                    {pending && (
+                      <button type="button" className="pe-btn primary pe-pop-cta" onClick={applyUpdate}>
+                        Update — push changes live
+                      </button>
+                    )}
+                    <a className="pe-btn pe-pop-cta" href={liveHref} target="_blank" rel="noopener">
+                      {pending ? 'View live version ↗' : 'View on site ↗'}
                     </a>
+                    {pending && (
+                      <button type="button" className="pe-pop-item" onClick={discardChanges}>
+                        <b>Discard pending changes</b><span>Back to the live version</span>
+                      </button>
+                    )}
                     <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>
@@ -604,10 +746,22 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                 <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>
+                <button type="button" className={editor.isActive('highlight') ? 'is-active' : ''} title="Highlight (==text==)" onClick={() => editor.chain().focus().toggleHighlight().run()}><mark>H</mark></button>
                 <span className="pe-bubble-sep" />
+                <button type="button" className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''} onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}>H1</button>
                 <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>
+                <button
+                  type="button"
+                  title="Regular text"
+                  onClick={() => {
+                    const c = editor.chain().focus().setParagraph();
+                    (editor.isActive('blockquote') ? c.toggleBlockquote() : c).run();
+                  }}
+                >
+                  ¶
+                </button>
                 <span className="pe-bubble-sep" />
                 <button
                   type="button"
@@ -617,6 +771,10 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                 >
                   Link
                 </button>
+                <span className="pe-bubble-sep" />
+                <button type="button" title="Save selection as a snippet — reusable from the “/” menu" onClick={saveSnippet}>
+                  + Snippet
+                </button>
               </BubbleMenu>
             )}
 
@@ -661,6 +819,7 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                   ['File', () => editor.chain().focus().insertContent({ type: 'fileCard' }).run()],
                   ['Button', () => editor.chain().focus().insertContent({ type: 'buttonCard' }).run()],
                   ['Callout', () => editor.chain().focus().insertContent({ type: 'callout' }).run()],
+                  ['Toggle', () => editor.chain().focus().insertContent({ type: 'toggleCard', content: [{ type: 'paragraph' }] }).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()],
@@ -675,42 +834,55 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
 
             {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 className="pe-linkedit-row">
+                  <input
+                    autoFocus
+                    type="text"
+                    placeholder="Paste a URL, or type to search your content… (empty removes the link)"
+                    value={linkDraft}
+                    onChange={(e) => setLinkDraft(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'ArrowDown' && linkResults.length) { e.preventDefault(); setLinkSel((s) => (s + 1) % linkResults.length); }
+                      if (e.key === 'ArrowUp' && linkResults.length) { e.preventDefault(); setLinkSel((s) => (s - 1 + linkResults.length) % linkResults.length); }
+                      if (e.key === 'Enter') {
+                        e.preventDefault();
+                        applyLink(linkSel >= 0 && linkResults[linkSel] ? linkResults[linkSel].url : linkDraft);
+                      }
+                      if (e.key === 'Escape') { e.preventDefault(); setLinkEdit(false); editor.commands.focus(); }
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className="pe-btn primary sm"
+                    onClick={() => applyLink(linkSel >= 0 && linkResults[linkSel] ? linkResults[linkSel].url : linkDraft)}
+                  >
+                    Apply
+                  </button>
+                  <button type="button" className="pe-btn ghost sm" onClick={() => { setLinkEdit(false); editor.commands.focus(); }}>✕</button>
+                </div>
+                {linkResults.length > 0 && (
+                  <div className="pe-link-results">
+                    {linkResults.map((t, i) => (
+                      <button
+                        key={t.url}
+                        type="button"
+                        className={i === linkSel ? 'is-selected' : ''}
+                        onMouseEnter={() => setLinkSel(i)}
+                        onMouseDown={(e) => { e.preventDefault(); applyLink(t.url); }}
+                      >
+                        <span className="pe-link-title">{t.title}</span>
+                        <span className="pe-link-url">{t.url}</span>
+                        <span className="pe-link-kind">{t.kind}</span>
+                      </button>
+                    ))}
+                  </div>
+                )}
               </div>
             )}
 
             <EditorContent editor={editor} />
             <div className="pe-wordcount">
-              {words.toLocaleString()} words
+              {words.toLocaleString()} words{words > 0 && ` · ${Math.max(1, Math.round(words / 220))} min read`}
               <button type="button" className="pe-shortcuts-btn" title="Keyboard shortcuts (⌘/)" onClick={() => setShortcutsOpen(true)}>⌘/</button>
             </div>
 
@@ -726,7 +898,8 @@ export default function PostEditor({ kind = 'post', post, page, initialHTML, uns
                       ['⌘B / ⌘I', 'Bold / italic'],
                       ['⌘⇧X', 'Strikethrough'],
                       ['⌘E', 'Inline code'],
-                      ['⌘K', 'Add or edit a link'],
+                      ['==text==', 'Highlight'],
+                      ['⌘K', 'Link — paste a URL or search your own content'],
                       ['/', 'Insert a card (image, gallery, embed…)'],
                     ]],
                     ['Markdown as you type', [

package/src/components/editor/extensions/cards.tsx

@@ -2,6 +2,7 @@ import { Node } from '@tiptap/react';
 import { NodeViewWrapper, NodeViewContent, ReactNodeViewRenderer } from '@tiptap/react';
 import type { NodeViewProps } from '@tiptap/react';
 import { useState } from 'react';
+import { cleanEventName } from '../../../lib/analytics';
 
 // Card nodes shared by the post editor. renderHTML emits the public markup
 // (`.pc-*` classes, styled in src/styles/cards.css); parseHTML round-trips it
@@ -292,6 +293,8 @@ export const ButtonCard = Node.create({
       label: { default: '' },
       href: { default: '' },
       align: { default: 'center' },
+      // optional analytics event name → data-umami-event on the public <a>
+      event: { default: '' },
     };
   },
 
@@ -306,6 +309,7 @@ export const ButtonCard = Node.create({
             label: link?.textContent ?? '',
             href: link?.getAttribute('href') ?? '',
             align: e.getAttribute('data-align') ?? 'center',
+            event: link?.getAttribute('data-umami-event') ?? '',
           };
         },
       },
@@ -314,10 +318,15 @@ export const ButtonCard = Node.create({
 
   renderHTML({ node }) {
     const a = node.attrs;
+    const event = cleanEventName(a.event ?? '');
     return [
       'div',
       { class: 'pc-buttoncard', 'data-align': a.align, style: `text-align:${a.align}` },
-      ['a', { class: 'pc-btncard', href: a.href }, a.label || 'Button'],
+      [
+        'a',
+        { class: 'pc-btncard', href: a.href, ...(event ? { 'data-umami-event': event } : {}) },
+        a.label || 'Button',
+      ],
     ];
   },
 
@@ -353,6 +362,13 @@ function ButtonCardView({ node, updateAttributes, deleteNode, selected }: NodeVi
           value={a.href}
           onChange={(e) => updateAttributes({ href: e.target.value })}
         />
+        <input
+          type="text"
+          placeholder="Analytics event (optional)"
+          title="Clicks are counted under this name in Umami (and forwarded to enabled ad pixels)"
+          value={a.event}
+          onChange={(e) => updateAttributes({ event: e.target.value })}
+        />
       </div>
       <div className="pc-buttoncard" style={{ textAlign: a.align as 'center' | 'left' }}>
         <span className="pc-btncard">{a.label || 'Button'}</span>

package/src/components/editor/extensions/codeBlock.tsx

@@ -54,7 +54,7 @@ function CodeBlockView({ node, updateAttributes }: NodeViewProps) {
         ))}
       </select>
       <pre>
-        <NodeViewContent as="code" />
+        <NodeViewContent<'code'> as="code" />
       </pre>
     </NodeViewWrapper>
   );

package/src/components/editor/extensions/infoCards.tsx

@@ -1,6 +1,7 @@
 import { Node } from '@tiptap/core';
 import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
 import type { NodeViewProps } from '@tiptap/react';
+import { cleanEventName } from '../../../lib/analytics';
 
 // Info cards: a *static* grid of title / badge / description / detail-line
 // cards — services, opening hours, team members, feature grids. Unlike the
@@ -25,6 +26,7 @@ export interface InfoItem {
   badgeStyle: 'filled' | 'outline';
   description: string;
   href: string; // empty = plain card; set = whole card is a link
+  event: string; // optional analytics event name (linked cards only)
   lines: InfoLine[];
 }
 
@@ -67,6 +69,7 @@ const sanitizeItem = (raw: unknown): InfoItem | null => {
     badgeStyle: it.badgeStyle === 'outline' ? 'outline' : 'filled',
     description: str(it.description),
     href: str(it.href),
+    event: str(it.event),
     lines,
   };
 };
@@ -90,6 +93,7 @@ const newItem = (): InfoItem => ({
   badgeStyle: 'filled',
   description: '',
   href: '',
+  event: '',
   lines: [
     { icon: 'calendar', text: '' },
     { icon: 'clock', text: '' },
@@ -140,8 +144,9 @@ export const InfoCards = Node.create({
           ]);
         }
         const href = it.href.trim();
+        const event = cleanEventName(it.event ?? '');
         return href
-          ? ['a', { class: 'pc-info-card', href }, ...children]
+          ? ['a', { class: 'pc-info-card', href, ...(event ? { 'data-umami-event': event } : {}) }, ...children]
           : ['article', { class: 'pc-info-card' }, ...children];
       });
     return ['div', { class: 'pc-infocards', 'data-items': JSON.stringify(items) }, ...cards];
@@ -256,6 +261,16 @@ function InfoCardsView({ node, updateAttributes, deleteNode, selected }: NodeVie
                 value={it.href}
                 onChange={(e) => patch(i, { href: e.target.value })}
               />
+              {it.href.trim() !== '' && (
+                <input
+                  type="text"
+                  className="pe-infocard-href"
+                  placeholder="Analytics event (optional)"
+                  title="Clicks are counted under this name in Umami (and forwarded to enabled ad pixels)"
+                  value={it.event}
+                  onChange={(e) => patch(i, { event: e.target.value })}
+                />
+              )}
             </div>
           </div>
         ))}