WEB-109 Replace sentinel-based history hack with history.state.idx reference, fix regression on history state replacement on save, simplify API

Author: wlenig

src/app/editor/[id]/[slug]/SaveButton.tsx

@@ -4,7 +4,6 @@ import { createUsePuck } from "@puckeditor/core";
 import { useTransition } from "react";
 import { toast } from "sonner";
 import { useDocumentContext } from "./document-context";
-import { useUnsavedChangesContext } from "./unsaved-changes-context";
 import { saveVersionAction } from "../../../../lib/documents/actions";
 import { getEditorUrl, getPreviewUrl } from "../../../../lib/editor-url";
 import { runAction } from "../../runAction";
@@ -15,7 +14,6 @@ const usePuck = createUsePuck();
 export function SaveButton() {
   const data = usePuck((s) => s.appState.data);
   const { documentId, documentName, isArchived, isDirty, addVersion } = useDocumentContext();
-  const { clearUnsavedChangesGuard } = useUnsavedChangesContext();
   const { alert } = useDialogs();
 
   const [isSaving, startTransition] = useTransition();
@@ -29,9 +27,8 @@ export function SaveButton() {
         return;
       }
 
-      await clearUnsavedChangesGuard();
       addVersion(result.data.version);
-      window.history.replaceState(null, "", getEditorUrl(documentId, documentName, result.data.version.id));
+      window.history.replaceState(window.history.state, "", getEditorUrl(documentId, documentName, result.data.version.id));
 
       const previewUrl = getPreviewUrl(documentId, documentName, result.data.version.id);
       toast.success("Saved", {

src/app/editor/[id]/[slug]/client.tsx

@@ -36,7 +36,7 @@ export function Client({
   const [versionId, setVersionId] = useState(initialVersionId);
   const [publishedVersionId, setPublishedVersionId] = useState(initialPublishedVersionId);
   const [isDirty, setIsDirty] = useState(false);
-  const { confirmDiscardChanges, clearUnsavedChangesGuard } = useUnsavedChangesGuard(isDirty);
+  const { confirmDiscardChanges } = useUnsavedChangesGuard(isDirty);
 
   const addVersion = useCallback((version: Version) => {
     setVersions(prev => [version, ...prev]);
@@ -49,7 +49,7 @@ export function Client({
       <DocumentContext.Provider
         value={{ documentId, documentName, versionId, publishedVersionId, versions, isArchived, isDirty, addVersion, setPublishedVersionId }}
       >
-        <UnsavedChangesContext.Provider value={{ confirmDiscardChanges, clearUnsavedChangesGuard }}>
+        <UnsavedChangesContext.Provider value={{ confirmDiscardChanges }}>
           <Puck
             config={config}
             data={data}

src/app/editor/[id]/[slug]/unsaved-changes-context.tsx

@@ -4,12 +4,10 @@ import { createContext, useContext } from "react";
 
 type UnsavedChangesContextType = {
   confirmDiscardChanges: () => Promise<boolean>;
-  clearUnsavedChangesGuard: () => Promise<void>;
 };
 
 const UnsavedChangesContext = createContext<UnsavedChangesContextType>({
   confirmDiscardChanges: async () => true,
-  clearUnsavedChangesGuard: async () => {},
 });
 
 export function useUnsavedChangesContext() {

src/app/editor/[id]/[slug]/useUnsavedChangesGuard.ts

@@ -5,25 +5,15 @@ import { useDialogs } from "@/components/ui/dialog-provider";
 
 const LEAVE_MESSAGE = "You have unsaved changes. Leave this page without saving?";
 
+function getCurrentHistoryIndex() {
+  const historyState = window.history.state as { idx?: number } | null;
+  return typeof historyState?.idx === "number" ? historyState.idx : null;
+}
+
 export function useUnsavedChangesGuard(isDirty: boolean) {
   const { confirm } = useDialogs();
-  const isHistoryGuardActiveRef = useRef(false);
-  const skipNextPopStateRef = useRef(false);
-  const pendingNavigationRef = useRef<(() => void) | null>(null);
-
-  const clearUnsavedChangesGuard = useCallback(() => {
-    if (!isHistoryGuardActiveRef.current) {
-      return Promise.resolve();
-    }
-
-    isHistoryGuardActiveRef.current = false;
-
-    return new Promise<void>((resolve) => {
-      pendingNavigationRef.current = resolve;
-      skipNextPopStateRef.current = true;
-      window.history.back();
-    });
-  }, []);
+  const historyIndexRef = useRef<number | null>(null);
+  const isRevertingNavigationRef = useRef(false);
 
   const confirmDiscardChanges = useCallback(async () => {
     if (!isDirty) {
@@ -40,63 +30,59 @@ export function useUnsavedChangesGuard(isDirty: boolean) {
       return false;
     }
 
-    await clearUnsavedChangesGuard();
     return true;
-  }, [clearUnsavedChangesGuard, confirm, isDirty]);
+  }, [confirm, isDirty]);
 
   useEffect(() => {
     if (!isDirty) {
       return;
     }
 
+    historyIndexRef.current = getCurrentHistoryIndex();
+    isRevertingNavigationRef.current = false;
+
     const handleBeforeUnload = (event: BeforeUnloadEvent) => {
       event.preventDefault();
       // Needed for Chrome version <=119 to show the confirmation dialog
       event.returnValue = true;
     };
 
     const handlePopState = () => {
-      if (skipNextPopStateRef.current) {
-        skipNextPopStateRef.current = false;
-        pendingNavigationRef.current?.();
-        pendingNavigationRef.current = null;
-        return;
+      const nextHistoryIndex = getCurrentHistoryIndex();
+
+      if (!isRevertingNavigationRef.current) {
+        const shouldLeave = window.confirm(LEAVE_MESSAGE);
+
+        if (!shouldLeave) {
+          if (
+            historyIndexRef.current !== null &&
+            nextHistoryIndex !== null &&
+            historyIndexRef.current !== nextHistoryIndex
+          ) {
+            isRevertingNavigationRef.current = true;
+            window.history.go(historyIndexRef.current > nextHistoryIndex ? 1 : -1);
+            return;
+          }
+
+          console.warn("Unable to determine history direction for unsaved-changes guard");
+        }
       }
 
-      if (!isHistoryGuardActiveRef.current) {
-        return;
-      }
-
-      const shouldLeave = window.confirm(LEAVE_MESSAGE);
-
-      if (!shouldLeave) {
-        window.history.pushState(window.history.state, "", window.location.href);
-        isHistoryGuardActiveRef.current = true;
-        return;
-      }
-
-      isHistoryGuardActiveRef.current = false;
-      skipNextPopStateRef.current = true;
-      window.history.back();
+      isRevertingNavigationRef.current = false;
+      historyIndexRef.current = nextHistoryIndex;
     };
 
-    if (!isHistoryGuardActiveRef.current) {
-      window.history.pushState(window.history.state, "", window.location.href);
-      isHistoryGuardActiveRef.current = true;
-    }
-
     window.addEventListener("beforeunload", handleBeforeUnload);
     window.addEventListener("popstate", handlePopState);
 
     return () => {
-      isHistoryGuardActiveRef.current = false;
+      isRevertingNavigationRef.current = false;
       window.removeEventListener("beforeunload", handleBeforeUnload);
       window.removeEventListener("popstate", handlePopState);
     };
   }, [isDirty]);
 
   return {
-    clearUnsavedChangesGuard,
     confirmDiscardChanges,
   };
 }