atom

apps/client/src/features/page-history/atoms/history-atoms.ts

@@ -3,3 +3,7 @@ import { atom } from "jotai";
 export const historyAtoms = atom<boolean>(false);
 export const activeHistoryIdAtom = atom<string>("");
 export const activeHistoryPrevIdAtom = atom<string>("");
+export const highlightChangesAtom = atom<boolean>(true);
+
+export type DiffCounts = { added: number; deleted: number; total: number };
+export const diffCountsAtom = atom<DiffCounts | null>(null);

apps/client/src/features/page-history/components/history-editor.tsx

@@ -9,24 +9,26 @@ import historyClasses from "./history.module.css";
 import { recreateTransform } from "@docmost/editor-ext";
 import { DOMSerializer, Node } from "@tiptap/pm/model";
 import { ChangeSet, simplifyChanges } from "prosemirror-changeset";
-
+import { useAtom } from "jotai";
-export type DiffCounts = { added: number; deleted: number; total: number };
+import {
+  diffCountsAtom,
+  highlightChangesAtom,
+} from "@/features/page-history/atoms/history-atoms";
 
 export interface HistoryEditorProps {
   title: string;
   content: any;
   previousContent?: any;
-  highlightChanges?: boolean;
-  onDiffCalculated?: (counts: DiffCounts) => void;
 }
 
 export function HistoryEditor({
   title,
   content,
   previousContent,
-  highlightChanges = true,
-  onDiffCalculated,
 }: HistoryEditorProps) {
+  const [highlightChanges] = useAtom(highlightChangesAtom);
+  const [, setDiffCounts] = useAtom(diffCountsAtom);
+
   const editor = useEditor({
     extensions: mainExtensions,
     editable: false,
@@ -169,7 +171,8 @@ export function HistoryEditor({
     }
 
     const total = addedCount + deletedCount;
-    onDiffCalculated?.({ added: addedCount, deleted: deletedCount, total });
+    // @ts-ignore
+    setDiffCounts({ added: addedCount, deleted: deletedCount, total });
 
     editor.setOptions({
       editorProps: {
@@ -178,7 +181,14 @@ export function HistoryEditor({
           highlightChanges ? decorationSet : DecorationSet.empty,
       },
     });
-  }, [title, content, editor, previousContent, highlightChanges]);
+  }, [
+    title,
+    content,
+    editor,
+    previousContent,
+    highlightChanges,
+    setDiffCounts,
+  ]);
 
   return (
     <div>

apps/client/src/features/page-history/components/history-modal-body.tsx

@@ -7,13 +7,14 @@ import {
   Switch,
   Text,
 } from "@mantine/core";
-import { DiffCounts } from "@/features/page-history/components/history-editor";
 import HistoryList from "@/features/page-history/components/history-list";
 import classes from "./history.module.css";
-import { useAtom } from "jotai";
+import { useAtom, useSetAtom } from "jotai";
 import {
   activeHistoryIdAtom,
   activeHistoryPrevIdAtom,
+  diffCountsAtom,
+  highlightChangesAtom,
 } from "@/features/page-history/atoms/history-atoms";
 import HistoryView from "@/features/page-history/components/history-view";
 import { useEffect, useRef, useState } from "react";
@@ -28,14 +29,17 @@ export default function HistoryModalBody({ pageId }: Props) {
   const [activeHistoryPrevId, setActiveHistoryPrevId] = useAtom(
     activeHistoryPrevIdAtom,
   );
-  const [highlightChanges, setHighlightChanges] = useState(true);
+  const [highlightChanges, setHighlightChanges] = useAtom(highlightChangesAtom);
-  const [diffCounts, setDiffCounts] = useState<DiffCounts | null>(null);
+  const [diffCounts] = useAtom(diffCountsAtom);
+  const setDiffCounts = useSetAtom(diffCountsAtom);
+
   const [currentChangeIndex, setCurrentChangeIndex] = useState(0);
   const scrollViewportRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setActiveHistoryId("");
     setActiveHistoryPrevId("");
+    setDiffCounts(null);
   }, [pageId]);
 
   useEffect(() => {
@@ -49,7 +53,8 @@ export default function HistoryModalBody({ pageId }: Props) {
     if (element instanceof HTMLElement) {
       const elementTop = element.offsetTop;
       const viewportHeight = viewport.clientHeight;
-      const scrollTarget = elementTop - viewportHeight / 2 + element.offsetHeight / 2;
+      const scrollTarget =
+        elementTop - viewportHeight / 2 + element.offsetHeight / 2;
       viewport.scrollTo({ top: scrollTarget, behavior: "smooth" });
     }
   };
@@ -79,16 +84,14 @@ export default function HistoryModalBody({ pageId }: Props) {
       </nav>
 
       <div style={{ position: "relative", flex: 1 }}>
-        <ScrollArea h={650} w="100%" scrollbarSize={5} viewportRef={scrollViewportRef}>
+        <ScrollArea
+          h={650}
+          w="100%"
+          scrollbarSize={5}
+          viewportRef={scrollViewportRef}
+        >
           <div className={classes.sidebarRightSection}>
-            {activeHistoryId && (
+            {activeHistoryId && <HistoryView />}
-              <HistoryView
-                historyId={activeHistoryId}
-                prevHistoryId={activeHistoryPrevId}
-                highlightChanges={highlightChanges}
-                onDiffCalculated={setDiffCounts}
-              />
-            )}
           </div>
         </ScrollArea>
 

apps/client/src/features/page-history/components/history-view.tsx

@@ -1,24 +1,17 @@
 import { usePageHistoryQuery } from "@/features/page-history/queries/page-history-query";
-import {
+import { HistoryEditor } from "@/features/page-history/components/history-editor";
-  DiffCounts,
-  HistoryEditor,
-} from "@/features/page-history/components/history-editor";
 import { useTranslation } from "react-i18next";
+import { useAtomValue } from "jotai";
+import {
+  activeHistoryIdAtom,
+  activeHistoryPrevIdAtom,
+} from "@/features/page-history/atoms/history-atoms";
 
-interface HistoryProps {
+function HistoryView() {
-  historyId: string;
-  prevHistoryId?: string;
-  highlightChanges?: boolean;
-  onDiffCalculated?: (counts: DiffCounts) => void;
-}
-
-function HistoryView({
-  historyId,
-  prevHistoryId,
-  highlightChanges,
-  onDiffCalculated,
-}: HistoryProps) {
   const { t } = useTranslation();
+  const historyId = useAtomValue(activeHistoryIdAtom);
+  const prevHistoryId = useAtomValue(activeHistoryPrevIdAtom);
+
   const {
     data,
     isLoading: isLoadingCurrent,
@@ -28,7 +21,7 @@ function HistoryView({
     data: prevData,
     isLoading: isLoadingPrev,
     isError: isErrorPrev,
-  } = usePageHistoryQuery(prevHistoryId ?? "");
+  } = usePageHistoryQuery(prevHistoryId);
 
   if (isLoadingCurrent || isLoadingPrev) {
     return <></>;
@@ -39,17 +32,13 @@ function HistoryView({
   }
 
   return (
-    data && (
+    <div>
-      <div>
+      <HistoryEditor
-        <HistoryEditor
+        content={data.content}
-          content={data.content}
+        title={data.title}
-          title={data.title}
+        previousContent={!isErrorPrev ? prevData?.content : undefined}
-          previousContent={!isErrorPrev ? prevData?.content : undefined}
+      />
-          highlightChanges={highlightChanges}
+    </div>
-          onDiffCalculated={onDiffCalculated}
-        />
-      </div>
-    )
   );
 }