feat: page history diff (#1891)

* Show actual history changes * V2 - WIP * feat: page history diff * fix: exclude content from history listing --------- Co-authored-by: Jason Norwood-Young <jason@10layer.com>
2026-08-30 02:25:01 +08:00 · 2026-02-03 11:55:20 -08:00
parent f32bb298e0
commit 5506eb194b
34 changed files with 1434 additions and 154 deletions
@@ -0,0 +1,3 @@
+export { useDiffNavigation } from "./use-diff-navigation";
+export { useHistoryRestore } from "./use-history-restore";
+export { useHistoryReset } from "./use-history-reset";
@@ -0,0 +1,58 @@
+import { useAtomValue } from "jotai";
+import { RefObject, useCallback, useEffect, useState } from "react";
+import { diffCountsAtom } from "@/features/page-history/atoms/history-atoms";
+
+/**
+ * Manages navigation between diff changes in the history view.
+ * Provides prev/next handlers and auto-scrolls to the current change.
+ */
+export function useDiffNavigation(
+  scrollViewportRef: RefObject<HTMLDivElement>,
+) {
+  const diffCounts = useAtomValue(diffCountsAtom);
+  const [currentChangeIndex, setCurrentChangeIndex] = useState(0);
+
+  const scrollToChangeIndex = useCallback(
+    (index: number) => {
+      const viewport = scrollViewportRef.current;
+      if (!viewport || index < 1) return;
+
+      const element = viewport.querySelector(`[data-diff-index="${index}"]`);
+      if (element instanceof HTMLElement) {
+        const elementTop = element.offsetTop;
+        const viewportHeight = viewport.clientHeight;
+        const scrollTarget =
+          elementTop - viewportHeight / 2 + element.offsetHeight / 2;
+        viewport.scrollTo({ top: scrollTarget, behavior: "smooth" });
+      }
+    },
+    [scrollViewportRef],
+  );
+
+  useEffect(() => {
+    if (diffCounts && diffCounts.total > 0) {
+      setCurrentChangeIndex(1);
+      requestAnimationFrame(() => scrollToChangeIndex(1));
+    } else {
+      setCurrentChangeIndex(0);
+    }
+  }, [diffCounts, scrollToChangeIndex]);
+
+  const handlePrevChange = useCallback(() => {
+    if (!diffCounts || diffCounts.total === 0) return;
+    const newIndex =
+      currentChangeIndex <= 1 ? diffCounts.total : currentChangeIndex - 1;
+    setCurrentChangeIndex(newIndex);
+    scrollToChangeIndex(newIndex);
+  }, [diffCounts, currentChangeIndex, scrollToChangeIndex]);
+
+  const handleNextChange = useCallback(() => {
+    if (!diffCounts || diffCounts.total === 0) return;
+    const newIndex =
+      currentChangeIndex >= diffCounts.total ? 1 : currentChangeIndex + 1;
+    setCurrentChangeIndex(newIndex);
+    scrollToChangeIndex(newIndex);
+  }, [diffCounts, currentChangeIndex, scrollToChangeIndex]);
+
+  return { currentChangeIndex, handlePrevChange, handleNextChange };
+}
@@ -0,0 +1,24 @@
+import { useAtom } from "jotai";
+import { useEffect } from "react";
+import {
+  activeHistoryIdAtom,
+  activeHistoryPrevIdAtom,
+  diffCountsAtom,
+} from "@/features/page-history/atoms/history-atoms";
+
+/**
+ * Resets history state when pageId changes.
+ * Clears active selection and diff counts.
+ */
+export function useHistoryReset(pageId: string) {
+  const [, setActiveHistoryId] = useAtom(activeHistoryIdAtom);
+  const [, setActiveHistoryPrevId] = useAtom(activeHistoryPrevIdAtom);
+  const [, setDiffCounts] = useAtom(diffCountsAtom);
+
+  useEffect(() => {
+    setActiveHistoryId("");
+    setActiveHistoryPrevId("");
+    // @ts-ignore
+    setDiffCounts(null);
+  }, [pageId, setActiveHistoryId, setActiveHistoryPrevId, setDiffCounts]);
+}
@@ -0,0 +1,78 @@
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Text } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import { notifications } from "@mantine/notifications";
+import { useParams } from "react-router-dom";
+import {
+  activeHistoryIdAtom,
+  historyAtoms,
+} from "@/features/page-history/atoms/history-atoms";
+import { usePageHistoryQuery } from "@/features/page-history/queries/page-history-query";
+import {
+  pageEditorAtom,
+  titleEditorAtom,
+} from "@/features/editor/atoms/editor-atoms";
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability";
+import { useSpaceQuery } from "@/features/space/queries/space-query";
+import {
+  SpaceCaslAction,
+  SpaceCaslSubject,
+} from "@/features/space/permissions/permissions.type";
+
+export function useHistoryRestore() {
+  const { t } = useTranslation();
+
+  const activeHistoryId = useAtomValue(activeHistoryIdAtom);
+  const { data: activeHistoryData } = usePageHistoryQuery(activeHistoryId);
+
+  const mainEditor = useAtomValue(pageEditorAtom);
+  const mainEditorTitle = useAtomValue(titleEditorAtom);
+  const setHistoryModalOpen = useSetAtom(historyAtoms);
+
+  const { spaceSlug } = useParams();
+  const { data: space } = useSpaceQuery(spaceSlug);
+  const spaceAbility = useSpaceAbility(space?.membership?.permissions);
+
+  const canRestore = spaceAbility.can(
+    SpaceCaslAction.Manage,
+    SpaceCaslSubject.Page,
+  );
+
+  const handleRestore = useCallback(() => {
+    if (!activeHistoryData) return;
+
+    mainEditorTitle
+      .chain()
+      .clearContent()
+      .setContent(activeHistoryData.title, { emitUpdate: true })
+      .run();
+
+    mainEditor
+      .chain()
+      .clearContent()
+      .setContent(activeHistoryData.content)
+      .run();
+
+    setHistoryModalOpen(false);
+    notifications.show({ message: t("Successfully restored") });
+  }, [activeHistoryData, mainEditor, mainEditorTitle, setHistoryModalOpen, t]);
+
+  const confirmRestore = useCallback(() => {
+    modals.openConfirmModal({
+      title: t("Please confirm your action"),
+      children: (
+        <Text size="sm">
+          {t(
+            "Are you sure you want to restore this version? Any changes not versioned will be lost.",
+          )}
+        </Text>
+      ),
+      labels: { confirm: t("Confirm"), cancel: t("Cancel") },
+      onConfirm: handleRestore,
+    });
+  }, [t, handleRestore]);
+
+  return { canRestore, confirmRestore };
+}