@prenta/admin 1.17.18 → 2.0.0

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { AlertTriangle, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
@@ -11,6 +11,7 @@ import { EditorRail, RailHeader } from '../../components/EditorRail.js'
 import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/EditorRailTabs.js'
 import { ErrorBoundary } from '../../components/ErrorBoundary.js'
 import { VersionHistoryPanel } from './VersionHistoryPanel.js'
+import { useDebouncedAutosave } from './autosave.js'
 import { ReviewBar } from './ReviewBar.js'
 import {
   fetchPageVersions,
@@ -558,25 +559,38 @@ export function PageSectionEditor({
     [directives, reloadAudit],
   )
 
+  const latestPage = useRef(page)
+  latestPage.current = page
+
   const handleSaveDraft = useCallback(
-    async (options?: { navigate?: boolean }): Promise<EditorPage | false> => {
+    async (options?: { navigate?: boolean; silent?: boolean }): Promise<EditorPage | false> => {
       if (!page) return false
       const result = validatePage(page, false)
       if (result.errors.length > 0) {
-        setValidation(result)
-        toast.error(result.errors[0]!)
-        setSettingsOpen(true)
+        if (!options?.silent) {
+          setValidation(result)
+          toast.error(result.errors[0]!)
+          setSettingsOpen(true)
+        }
         return false
       }
+      const snapshot = page
       setSaveState('saving')
       try {
-        const saved = await savePageDraft(page)
+        const saved = await savePageDraft(snapshot)
+        // A keystroke landed while this request was in flight. Drop the
+        // response so it cannot replace the newer draft. The next quiet
+        // period saves that draft. This is not a concurrent-editor warning.
+        if (latestPage.current !== snapshot) {
+          setSaveState('idle')
+          return false
+        }
         if (saved.id) await saveDirectives(saved.id)
         acceptPage(saved)
         setDirty(false)
         setSaveState('saved')
         setValidation(null)
-        toast.success('Draft saved')
+        if (!options?.silent) toast.success('Draft saved')
         if ((options?.navigate ?? true) && !documentId && saved.id) {
           onNavigate(`/pages/${saved.id}/edit`)
         }
@@ -590,6 +604,13 @@ export function PageSectionEditor({
     [page, documentId, onNavigate, saveDirectives, acceptPage],
   )
 
+  useDebouncedAutosave({
+    dirty,
+    enabled: Boolean(documentId) && effectiveCanEdit && !publishing,
+    revision: page,
+    save: () => handleSaveDraft({ navigate: false, silent: true }),
+  })
+
   const runWorkflow = useCallback(
     async (stage: WorkflowStage, note?: string, toastOk?: string) => {
       if (!page) return

package/src/views/page-editor/autosave.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react'
+
+/** Quiet period after the last edit before a draft is written. */
+export const AUTOSAVE_DELAY_MS = 800
+
+/**
+ * Schedule `save` after `delayMs` of no changes. `revision` is the draft
+ * itself (or any value that changes with it) so typing resets the timer.
+ * A clean document, or one autosave is not allowed to touch, does not save.
+ * This does not detect a concurrent edit by someone else (#554).
+ */
+export function useDebouncedAutosave(options: {
+  dirty: boolean
+  enabled: boolean
+  revision: unknown
+  delayMs?: number
+  save: () => void | Promise<unknown>
+}): void {
+  const saveRef = useRef(options.save)
+  saveRef.current = options.save
+  const { dirty, enabled, revision, delayMs = AUTOSAVE_DELAY_MS } = options
+
+  useEffect(() => {
+    if (!dirty || !enabled) return
+    const timer = setTimeout(() => {
+      void saveRef.current()
+    }, delayMs)
+    return () => clearTimeout(timer)
+  }, [dirty, enabled, revision, delayMs])
+}

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { AlertTriangle, Loader2, Lock } from 'lucide-react'
 import { toast } from 'sonner'
 import { ConfirmDialog } from '../../components/ui/ConfirmDialog.js'
@@ -11,6 +11,7 @@ import { EditorRailTabs, type RailTab, type RailTabId } from '../../components/E
 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 { ReviewBar } from '../page-editor/ReviewBar.js'
 import {
   fetchPageVersions,
@@ -436,24 +437,34 @@ export function PostSectionEditor({
   }, [])
 
   // ─── Save / publish ──────────────────────────────────────────────────
+  const latestPost = useRef(post)
+  latestPost.current = post
+
   const handleSaveDraft = useCallback(
-    async (options?: { navigate?: boolean }): Promise<EditorPost | false> => {
+    async (options?: { navigate?: boolean; silent?: boolean }): Promise<EditorPost | false> => {
       if (!post) return false
       const result = validatePost(post, false)
       if (result.errors.length > 0) {
-        setValidation(result)
-        toast.error(result.errors[0]!)
-        setFieldsOpen(true)
+        if (!options?.silent) {
+          setValidation(result)
+          toast.error(result.errors[0]!)
+          setFieldsOpen(true)
+        }
         return false
       }
+      const snapshot = post
       setSaveState('saving')
       try {
-        const saved = await savePostDraft(post)
+        const saved = await savePostDraft(snapshot)
+        if (latestPost.current !== snapshot) {
+          setSaveState('idle')
+          return false
+        }
         acceptPost(saved)
         setDirty(false)
         setSaveState('saved')
         setValidation(null)
-        toast.success('Draft saved')
+        if (!options?.silent) toast.success('Draft saved')
         if ((options?.navigate ?? true) && !documentId && saved.id) {
           onNavigate(`/posts/${postType}/${saved.id}/edit`)
         }
@@ -557,6 +568,13 @@ export function PostSectionEditor({
   const effectiveCanEdit = canEdit && !reviewing
   const canRestoreVersion = canEdit
 
+  useDebouncedAutosave({
+    dirty,
+    enabled: Boolean(documentId) && effectiveCanEdit && !publishing,
+    revision: post,
+    save: () => handleSaveDraft({ navigate: false, silent: true }),
+  })
+
   const runWorkflow = useCallback(
     async (stage: WorkflowStage, note?: string, toastOk?: string) => {
       if (!post) return