@prenta/admin 2.0.3 → 2.1.0

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,11 @@ 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
   onSubmitForReview: () => void
   onApprove: () => void
   onRequestChanges: (note: string) => void
@@ -149,6 +156,10 @@ export function EditorTopBar({
   seoScore,
   seoScoreBand,
   onSaveDraft,
+  onUndo,
+  onRedo,
+  canUndo = false,
+  canRedo = false,
   onSubmitForReview,
   onApprove,
   onRequestChanges,
@@ -290,6 +301,30 @@ 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>
+        )}
       </div>
 
       {/* Right controls */}

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

@@ -12,6 +12,7 @@ import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/E
 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 +216,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 +490,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 +533,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 +989,10 @@ 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}
           onSubmitForReview={handleSubmitForReview}
           onApprove={handleApprove}
           onRequestChanges={handleRequestChanges}

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

@@ -12,6 +12,7 @@ import { SeoEditorPane } from '../../components/seo/SeoEditorPane.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 +183,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 +397,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 +435,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 +608,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 +860,10 @@ 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}
           onSubmitForReview={handleSubmitForReview}
           onApprove={handleApprove}
           onRequestChanges={handleRequestChanges}