@prenta/admin 2.0.3 → 2.2.0

package/src/hooks/use-editor-history.ts

@@ -0,0 +1,102 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  createEditorHistory,
+  isNativeEditingTarget,
+  pushEditorHistory,
+  redoEditorHistory,
+  undoEditorHistory,
+} from '../lib/editor-history.js'
+
+function cloneSnapshot<T>(value: T): T {
+  return JSON.parse(JSON.stringify(value)) as T
+}
+
+/**
+ * Snapshot stack for the section editor. `note` records the document from
+ * before a change and is safe to call inside a state updater (it only writes
+ * a ref). The stack commits after that render. Rapid notes with the same key
+ * collapse into one step.
+ */
+export function useEditorHistory<T>(current: T | null, resetKey: string | null) {
+  const historyRef = useRef(createEditorHistory<T>())
+  const pendingRef = useRef<Array<{ snapshot: T; key: string; coalesce: boolean }>>([])
+  const [, setRevision] = useState(0)
+
+  const note = useCallback((snapshot: T, key: string, coalesce = false) => {
+    pendingRef.current.push({ snapshot: cloneSnapshot(snapshot), key, coalesce })
+  }, [])
+
+  useEffect(() => {
+    historyRef.current = createEditorHistory()
+    pendingRef.current = []
+    setRevision((n) => n + 1)
+  }, [resetKey])
+
+  useEffect(() => {
+    if (pendingRef.current.length === 0) return
+    const now = Date.now()
+    let next = historyRef.current
+    for (const item of pendingRef.current) {
+      next = pushEditorHistory(next, item.snapshot, {
+        key: item.key,
+        now,
+        coalesce: item.coalesce,
+      })
+    }
+    pendingRef.current = []
+    historyRef.current = next
+    setRevision((n) => n + 1)
+  }, [current])
+
+  const undo = useCallback((): T | null => {
+    if (current == null) return null
+    const result = undoEditorHistory(historyRef.current, cloneSnapshot(current))
+    if (!result) return null
+    historyRef.current = result.history
+    setRevision((n) => n + 1)
+    return result.value
+  }, [current])
+
+  const redo = useCallback((): T | null => {
+    if (current == null) return null
+    const result = redoEditorHistory(historyRef.current, cloneSnapshot(current))
+    if (!result) return null
+    historyRef.current = result.history
+    setRevision((n) => n + 1)
+    return result.value
+  }, [current])
+
+  return {
+    note,
+    undo,
+    redo,
+    canUndo: historyRef.current.past.length > 0,
+    canRedo: historyRef.current.future.length > 0,
+  }
+}
+
+export function useSectionEditorShortcuts(input: {
+  enabled: boolean
+  onUndo: () => void
+  onRedo: () => void
+}) {
+  const { enabled, onUndo, onRedo } = input
+  useEffect(() => {
+    if (!enabled) return
+    function onKey(event: KeyboardEvent) {
+      if (isNativeEditingTarget(event.target)) return
+      if (!(event.metaKey || event.ctrlKey) || event.altKey) return
+      const key = event.key.toLowerCase()
+      const redoKey = key === 'y' || (key === 'z' && event.shiftKey)
+      const undoKey = key === 'z' && !event.shiftKey
+      if (!undoKey && !redoKey) return
+      event.preventDefault()
+      if (redoKey) onRedo()
+      else onUndo()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [enabled, onUndo, onRedo])
+}

package/src/lib/admin-shortcuts.ts

@@ -0,0 +1,10 @@
+/** Shown in the keyboard-shortcuts dialog (⌘ /). */
+export const ADMIN_KEYBOARD_SHORTCUTS: ReadonlyArray<{ keys: string; label: string }> = [
+  { keys: '⌘ K', label: 'Open search' },
+  { keys: '⌘ S', label: 'Save document' },
+  { keys: '⌘ Z', label: 'Undo in the section editor' },
+  { keys: '⌘ ⇧ Z', label: 'Redo in the section editor' },
+  { keys: '⌘ Y', label: 'Redo in the section editor' },
+  { keys: '⌘ /', label: 'Toggle this help' },
+  { keys: 'Esc', label: 'Close panel / modal' },
+]

package/src/lib/editor-history.ts

@@ -0,0 +1,83 @@
+/** How long edits with the same key collapse into one undo step. */
+const EDITOR_HISTORY_COALESCE_MS = 800
+
+/** Cap so a long editing session cannot grow the stack without bound. */
+const EDITOR_HISTORY_LIMIT = 50
+
+interface EditorHistory<T> {
+  past: T[]
+  future: T[]
+  lastKey: string | null
+  lastAt: number
+}
+
+export function createEditorHistory<T>(): EditorHistory<T> {
+  return { past: [], future: [], lastKey: null, lastAt: 0 }
+}
+
+export function pushEditorHistory<T>(
+  history: EditorHistory<T>,
+  snapshot: T,
+  options: { key: string; now: number; coalesce?: boolean },
+): EditorHistory<T> {
+  const coalesce = options.coalesce === true
+  if (
+    coalesce &&
+    history.lastKey === options.key &&
+    history.past.length > 0 &&
+    options.now - history.lastAt < EDITOR_HISTORY_COALESCE_MS
+  ) {
+    return { ...history, lastAt: options.now }
+  }
+
+  const past = [...history.past, snapshot]
+  return {
+    past:
+      past.length > EDITOR_HISTORY_LIMIT ? past.slice(past.length - EDITOR_HISTORY_LIMIT) : past,
+    future: [],
+    lastKey: options.key,
+    lastAt: options.now,
+  }
+}
+
+export function undoEditorHistory<T>(
+  history: EditorHistory<T>,
+  current: T,
+): { history: EditorHistory<T>; value: T } | null {
+  if (history.past.length === 0) return null
+  const value = history.past[history.past.length - 1] as T
+  return {
+    value,
+    history: {
+      past: history.past.slice(0, -1),
+      future: [...history.future, current],
+      lastKey: null,
+      lastAt: 0,
+    },
+  }
+}
+
+export function redoEditorHistory<T>(
+  history: EditorHistory<T>,
+  current: T,
+): { history: EditorHistory<T>; value: T } | null {
+  if (history.future.length === 0) return null
+  const value = history.future[history.future.length - 1] as T
+  return {
+    value,
+    history: {
+      past: [...history.past, current],
+      future: history.future.slice(0, -1),
+      lastKey: null,
+      lastAt: 0,
+    },
+  }
+}
+
+/** Text fields and rich text keep their own undo. The page stack must not steal it. */
+export function isNativeEditingTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  if (target.isContentEditable) return true
+  const tag = target.tagName
+  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT'
+}

package/src/views/page-editor/EditorTopBar.tsx

@@ -9,9 +9,11 @@ import {
   ExternalLink,
   History,
   Loader2,
+  Redo2,
   Settings2,
   Share2,
   TriangleAlert,
+  Undo2,
 } from 'lucide-react'
 import { EditorSeoScoreBadge } from '../../components/seo/EditorSeoScoreBadge.js'
 import { BreakpointPicker } from '../../components/BreakpointPicker.js'
@@ -99,6 +101,13 @@ interface EditorTopBarProps {
   /** Band for `seoScore`; omit to derive from the content-analysis scale. */
   seoScoreBand?: 'good' | 'fair' | 'poor'
   onSaveDraft: () => void
+  /** Section-editor undo. Omitted outside the page and post editors. */
+  onUndo?: () => void
+  onRedo?: () => void
+  canUndo?: boolean
+  canRedo?: boolean
+  /** Locale switcher for this document. Hidden by the caller when unused. */
+  localeControl?: ReactNode
   onSubmitForReview: () => void
   onApprove: () => void
   onRequestChanges: (note: string) => void
@@ -149,6 +158,11 @@ export function EditorTopBar({
   seoScore,
   seoScoreBand,
   onSaveDraft,
+  onUndo,
+  onRedo,
+  canUndo = false,
+  canRedo = false,
+  localeControl,
   onSubmitForReview,
   onApprove,
   onRequestChanges,
@@ -290,6 +304,31 @@ export function EditorTopBar({
           </span>
         )}
         <SaveStatus state={saveState} dirty={dirty} />
+        {onUndo && onRedo && (
+          <span className="ml-1 inline-flex shrink-0 items-center">
+            <button
+              type="button"
+              onClick={onUndo}
+              disabled={!canUndo}
+              aria-label="Undo"
+              title="Undo the last edit (Ctrl+Z or ⌘Z). Text fields keep their own undo."
+              className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              <Undo2 className="h-4 w-4" aria-hidden />
+            </button>
+            <button
+              type="button"
+              onClick={onRedo}
+              disabled={!canRedo}
+              aria-label="Redo"
+              title="Redo (Ctrl+Shift+Z, Ctrl+Y, or ⌘⇧Z)."
+              className="prenta-touch-target text-muted-foreground hover:text-foreground hover:bg-accent rounded-lg p-2 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              <Redo2 className="h-4 w-4" aria-hidden />
+            </button>
+          </span>
+        )}
+        {localeControl ? <span className="ml-1 inline-flex shrink-0">{localeControl}</span> : null}
       </div>
 
       {/* Right controls */}

package/src/views/page-editor/PageSectionEditor.tsx

@@ -9,9 +9,11 @@ import { SchedulePublishDialog } from '../../components/SchedulePublishDialog.js
 import { SeoEditorPane } from '../../components/seo/SeoEditorPane.js'
 import { EditorRail, RailHeader } from '../../components/EditorRail.js'
 import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/EditorRailTabs.js'
+import { DocumentLocaleSwitcher } from '../../components/DocumentLocaleSwitcher.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistoryPanel } from './VersionHistoryPanel.js'
 import { useDebouncedAutosave } from './autosave.js'
+import { useEditorHistory, useSectionEditorShortcuts } from '../../hooks/use-editor-history.js'
 import { ReviewBar } from './ReviewBar.js'
 import {
   fetchPageVersions,
@@ -215,11 +217,14 @@ export function PageSectionEditor({
    * so a save moves the baseline exactly as a publish does. Missing one would
    * leave the guard comparing against content that is no longer on the site.
    */
+  const savedJson = useRef('')
   const acceptPage = useCallback((p: EditorPage) => {
+    savedJson.current = JSON.stringify(p)
     setPage(p)
     setBaseline(snapshotBaseline(p.sections, p.status))
     setPublishedPath(p.status === 'PUBLISHED' ? p.path : null)
   }, [])
+  const { note, undo, redo, canUndo, canRedo } = useEditorHistory(page, documentId ?? null)
   const [dirty, setDirty] = useState(false)
   const [saveState, setSaveState] = useState<SaveState>('idle')
   const [publishing, setPublishing] = useState(false)
@@ -486,23 +491,35 @@ export function PageSectionEditor({
 
   // ─── Section mutations ───────────────────────────────────────────────
   const mutateSections = useCallback(
-    (fn: (sections: EditorPage['sections']) => EditorPage['sections']) => {
-      setPage((prev) => (prev ? { ...prev, sections: fn(prev.sections) } : prev))
+    (
+      fn: (sections: EditorPage['sections']) => EditorPage['sections'],
+      key: string,
+      coalesce = false,
+    ) => {
+      setPage((prev) => {
+        if (!prev) return prev
+        note(prev, key, coalesce)
+        return { ...prev, sections: fn(prev.sections) }
+      })
       setDirty(true)
       setSaveState('idle')
     },
-    [],
+    [note],
   )
 
   const handleToggleVisibility = useCallback(
-    (id: string) => mutateSections((s) => toggleSectionVisibility(s, id)),
+    (id: string) => mutateSections((s) => toggleSectionVisibility(s, id), `visibility:${id}`),
     [mutateSections],
   )
 
   const handleContentChange = useCallback(
     (patch: Record<string, unknown>) => {
       if (!selectedId) return
-      mutateSections((s) => updateSectionContent(s, selectedId, patch))
+      mutateSections(
+        (s) => updateSectionContent(s, selectedId, patch),
+        `content:${selectedId}`,
+        true,
+      )
     },
     [selectedId, mutateSections],
   )
@@ -517,18 +534,41 @@ export function PageSectionEditor({
   const handleMetaChange = useCallback(
     (patch: { name?: string; internalLabel?: string }) => {
       if (!selectedId) return
-      mutateSections((s) => updateSectionMeta(s, selectedId, patch))
+      mutateSections((s) => updateSectionMeta(s, selectedId, patch), `meta:${selectedId}`, true)
     },
     [selectedId, mutateSections],
   )
 
-  // ─── Page-level settings ─────────────────────────────────────────────
-  const handlePageSettings = useCallback((patch: Partial<EditorPage>) => {
-    setPage((prev) => (prev ? { ...prev, ...patch } : prev))
-    setDirty(true)
+  const restoreEdit = useCallback((next: EditorPage | null) => {
+    if (!next) return
+    setPage(next)
+    setDirty(JSON.stringify(next) !== savedJson.current)
     setSaveState('idle')
   }, [])
 
+  const handleUndo = useCallback(() => restoreEdit(undo()), [restoreEdit, undo])
+  const handleRedo = useCallback(() => restoreEdit(redo()), [restoreEdit, redo])
+
+  useSectionEditorShortcuts({
+    enabled: effectiveCanEdit,
+    onUndo: handleUndo,
+    onRedo: handleRedo,
+  })
+
+  // ─── Page-level settings ─────────────────────────────────────────────
+  const handlePageSettings = useCallback(
+    (patch: Partial<EditorPage>) => {
+      setPage((prev) => {
+        if (!prev) return prev
+        note(prev, 'page', true)
+        return { ...prev, ...patch }
+      })
+      setDirty(true)
+      setSaveState('idle')
+    },
+    [note],
+  )
+
   // ─── Save / publish ──────────────────────────────────────────────────
   /**
    * Persist robots directives. They live on the SEO record, not the document
@@ -950,6 +990,21 @@ export function PageSectionEditor({
             typeof audit?.seo.score === 'number' ? scoreBand(audit.seo.score) : undefined
           }
           onSaveDraft={handleSaveDraft}
+          onUndo={effectiveCanEdit ? handleUndo : undefined}
+          onRedo={effectiveCanEdit ? handleRedo : undefined}
+          canUndo={canUndo}
+          canRedo={canRedo}
+          localeControl={
+            page.id ? (
+              <DocumentLocaleSwitcher
+                collection={PAGES_COLLECTION}
+                documentId={page.id}
+                canCreate={effectiveCanEdit}
+                editorPath={(id) => `/pages/${id}/edit`}
+                onNavigate={guardedNavigate}
+              />
+            ) : null
+          }
           onSubmitForReview={handleSubmitForReview}
           onApprove={handleApprove}
           onRequestChanges={handleRequestChanges}

package/src/views/post-editor/PostSectionEditor.tsx

@@ -9,9 +9,11 @@ import { SchedulePublishDialog } from '../../components/SchedulePublishDialog.js
 import { EditorRail, RailHeader } from '../../components/EditorRail.js'
 import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/EditorRailTabs.js'
 import { SeoEditorPane } from '../../components/seo/SeoEditorPane.js'
+import { DocumentLocaleSwitcher } from '../../components/DocumentLocaleSwitcher.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistoryPanel } from '../page-editor/VersionHistoryPanel.js'
 import { useDebouncedAutosave } from '../page-editor/autosave.js'
+import { useEditorHistory, useSectionEditorShortcuts } from '../../hooks/use-editor-history.js'
 import { ReviewBar } from '../page-editor/ReviewBar.js'
 import {
   fetchPageVersions,
@@ -182,10 +184,13 @@ export function PostSectionEditor({
    * as a publish does; missing one would leave the guard comparing against
    * content no longer on the site.
    */
+  const savedJson = useRef('')
   const acceptPost = useCallback((p: EditorPost) => {
+    savedJson.current = JSON.stringify(p)
     setPost(p)
     setBaseline(snapshotBaseline(p.sections, p.status))
   }, [])
+  const { note, undo, redo, canUndo, canRedo } = useEditorHistory(post, documentId ?? null)
 
   const { canEdit } = useMemo(() => deriveCan(session), [session])
   const sessionRole = String(session?.user?.role ?? '')
@@ -393,23 +398,35 @@ export function PostSectionEditor({
 
   // ─── Section mutations ───────────────────────────────────────────────
   const mutateSections = useCallback(
-    (fn: (sections: EditorPost['sections']) => EditorPost['sections']) => {
-      setPost((prev) => (prev ? { ...prev, sections: fn(prev.sections) } : prev))
+    (
+      fn: (sections: EditorPost['sections']) => EditorPost['sections'],
+      key: string,
+      coalesce = false,
+    ) => {
+      setPost((prev) => {
+        if (!prev) return prev
+        note(prev, key, coalesce)
+        return { ...prev, sections: fn(prev.sections) }
+      })
       setDirty(true)
       setSaveState('idle')
     },
-    [],
+    [note],
   )
 
   const handleToggleVisibility = useCallback(
-    (id: string) => mutateSections((s) => toggleSectionVisibility(s, id)),
+    (id: string) => mutateSections((s) => toggleSectionVisibility(s, id), `visibility:${id}`),
     [mutateSections],
   )
 
   const handleContentChange = useCallback(
     (patch: Record<string, unknown>) => {
       if (!selectedId) return
-      mutateSections((s) => updateSectionContent(s, selectedId, patch))
+      mutateSections(
+        (s) => updateSectionContent(s, selectedId, patch),
+        `content:${selectedId}`,
+        true,
+      )
     },
     [selectedId, mutateSections],
   )
@@ -419,22 +436,46 @@ export function PostSectionEditor({
   const handleMetaChange = useCallback(
     (patch: { name?: string; internalLabel?: string }) => {
       if (!selectedId) return
-      mutateSections((s) => updateSectionMeta(s, selectedId, patch))
+      mutateSections((s) => updateSectionMeta(s, selectedId, patch), `meta:${selectedId}`, true)
     },
     [selectedId, mutateSections],
   )
 
-  const handleFields = useCallback((patch: Partial<EditorPost>) => {
-    setPost((prev) => (prev ? { ...prev, ...patch } : prev))
-    setDirty(true)
+  const restoreEdit = useCallback((next: EditorPost | null) => {
+    if (!next) return
+    setPost(next)
+    setDirty(JSON.stringify(next) !== savedJson.current)
     setSaveState('idle')
   }, [])
 
-  const handlePostBodyChange = useCallback((body: string) => {
-    setPost((prev) => (prev ? { ...prev, body } : prev))
-    setDirty(true)
-    setSaveState('idle')
-  }, [])
+  const handleUndo = useCallback(() => restoreEdit(undo()), [restoreEdit, undo])
+  const handleRedo = useCallback(() => restoreEdit(redo()), [restoreEdit, redo])
+
+  const handleFields = useCallback(
+    (patch: Partial<EditorPost>) => {
+      setPost((prev) => {
+        if (!prev) return prev
+        note(prev, 'fields', true)
+        return { ...prev, ...patch }
+      })
+      setDirty(true)
+      setSaveState('idle')
+    },
+    [note],
+  )
+
+  const handlePostBodyChange = useCallback(
+    (body: string) => {
+      setPost((prev) => {
+        if (!prev) return prev
+        note(prev, 'body', true)
+        return { ...prev, body }
+      })
+      setDirty(true)
+      setSaveState('idle')
+    },
+    [note],
+  )
 
   // ─── Save / publish ──────────────────────────────────────────────────
   const latestPost = useRef(post)
@@ -568,6 +609,12 @@ export function PostSectionEditor({
   const effectiveCanEdit = canEdit && !reviewing
   const canRestoreVersion = canEdit
 
+  useSectionEditorShortcuts({
+    enabled: effectiveCanEdit,
+    onUndo: handleUndo,
+    onRedo: handleRedo,
+  })
+
   useDebouncedAutosave({
     dirty,
     enabled: Boolean(documentId) && effectiveCanEdit && !publishing,
@@ -814,6 +861,21 @@ export function PostSectionEditor({
             typeof audit?.seo.score === 'number' ? scoreBand(audit.seo.score) : undefined
           }
           onSaveDraft={handleSaveDraft}
+          onUndo={effectiveCanEdit ? handleUndo : undefined}
+          onRedo={effectiveCanEdit ? handleRedo : undefined}
+          canUndo={canUndo}
+          canRedo={canRedo}
+          localeControl={
+            post.id ? (
+              <DocumentLocaleSwitcher
+                collection={postType}
+                documentId={post.id}
+                canCreate={effectiveCanEdit}
+                editorPath={(id) => `/posts/${postType}/${id}/edit`}
+                onNavigate={guardedNavigate}
+              />
+            ) : null
+          }
           onSubmitForReview={handleSubmitForReview}
           onApprove={handleApprove}
           onRequestChanges={handleRequestChanges}