cleanup diff count

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

@@ -1,20 +1,22 @@
 import "@/features/editor/styles/index.css";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { mainExtensions } from "@/features/editor/extensions/extensions";
-import { Badge, Divider, Group, Text, Title } from "@mantine/core";
+import { Title } from "@mantine/core";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import classes from "./history-diff.module.css";
 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";
 
+export type DiffCounts = { added: number; deleted: number };
+
 export interface HistoryEditorProps {
   title: string;
   content: any;
   previousContent?: any;
   highlightChanges?: boolean;
+  onDiffCalculated?: (counts: DiffCounts) => void;
 }
 
 export function HistoryEditor({
@@ -22,20 +24,13 @@ export function HistoryEditor({
   content,
   previousContent,
   highlightChanges = true,
+  onDiffCalculated,
 }: HistoryEditorProps) {
   const editor = useEditor({
     extensions: mainExtensions,
     editable: false,
   });
 
-  const [diffCounts, setDiffCounts] = useState<{
-    added: number;
-    deleted: number;
-  }>({
-    added: 0,
-    deleted: 0,
-  });
-
   useEffect(() => {
     if (!editor || !content) return;
 
@@ -164,7 +159,7 @@ export function HistoryEditor({
       editor.commands.setContent(content);
     }
 
-    setDiffCounts({ added: addedCount, deleted: deletedCount });
+    onDiffCalculated?.({ added: addedCount, deleted: deletedCount });
 
     editor.setOptions({
       editorProps: {
@@ -176,38 +171,14 @@ export function HistoryEditor({
   }, [title, content, editor, previousContent, highlightChanges]);
 
   return (
-    <>
+    <div>
-      <div>
+      <Title order={1}>{title}</Title>
-        <Title order={1}>{title}</Title>
+      {editor && (
-
+        <EditorContent
-        {previousContent && (
+          editor={editor}
-          <>
+          className={historyClasses.historyEditor}
-            <Divider my="md" />
+        />
-            <div className={classes.diffSummary}>
+      )}
-              <Group gap="xs" wrap="wrap">
+    </div>
-                <Text fw={600}>Changes</Text>
-                <Badge variant="light" color="green">
-                  +{diffCounts.added} added
-                </Badge>
-                <Badge variant="light" color="red">
-                  -{diffCounts.deleted} deleted
-                </Badge>
-                <Text size="sm" c="dimmed">
-                  (added = green, deleted = red/strikethrough)
-                </Text>
-              </Group>
-            </div>
-            <Divider my="md" />
-          </>
-        )}
-
-        {editor && (
-          <EditorContent
-            editor={editor}
-            className={historyClasses.historyEditor}
-          />
-        )}
-      </div>
-    </>
   );
 }

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

@@ -1,4 +1,5 @@
-import { Paper, ScrollArea, Switch } from "@mantine/core";
+import { Badge, Group, Paper, ScrollArea, Switch } 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";
@@ -19,6 +20,7 @@ export default function HistoryModalBody({ pageId }: Props) {
     activeHistoryPrevIdAtom,
   );
   const [highlightChanges, setHighlightChanges] = useState(true);
+  const [diffCounts, setDiffCounts] = useState<DiffCounts | null>(null);
 
   useEffect(() => {
     setActiveHistoryId("");
@@ -41,6 +43,7 @@ export default function HistoryModalBody({ pageId }: Props) {
                 historyId={activeHistoryId}
                 prevHistoryId={activeHistoryPrevId}
                 highlightChanges={highlightChanges}
+                onDiffCalculated={setDiffCounts}
               />
             )}
           </div>
@@ -59,11 +62,23 @@ export default function HistoryModalBody({ pageId }: Props) {
               transform: "translateX(-50%)",
             }}
           >
-            <Switch
+            <Group gap="md">
-              label="Highlight changes"
+              {diffCounts && (
-              checked={highlightChanges}
+                <Group gap="xs">
-              onChange={(e) => setHighlightChanges(e.currentTarget.checked)}
+                  <Badge variant="light" color="green" size="sm">
-            />
+                    +{diffCounts.added}
+                  </Badge>
+                  <Badge variant="light" color="red" size="sm">
+                    -{diffCounts.deleted}
+                  </Badge>
+                </Group>
+              )}
+              <Switch
+                label="Highlight changes"
+                checked={highlightChanges}
+                onChange={(e) => setHighlightChanges(e.currentTarget.checked)}
+              />
+            </Group>
           </Paper>
         )}
       </div>

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

@@ -1,14 +1,23 @@
 import { usePageHistoryQuery } from "@/features/page-history/queries/page-history-query";
-import { HistoryEditor } from "@/features/page-history/components/history-editor";
+import {
+  DiffCounts,
+  HistoryEditor,
+} from "@/features/page-history/components/history-editor";
 import { useTranslation } from "react-i18next";
 
 interface HistoryProps {
   historyId: string;
   prevHistoryId?: string;
   highlightChanges?: boolean;
+  onDiffCalculated?: (counts: DiffCounts) => void;
 }
 
-function HistoryView({ historyId, prevHistoryId, highlightChanges }: HistoryProps) {
+function HistoryView({
+  historyId,
+  prevHistoryId,
+  highlightChanges,
+  onDiffCalculated,
+}: HistoryProps) {
   const { t } = useTranslation();
   const {
     data,
@@ -37,6 +46,7 @@ function HistoryView({ historyId, prevHistoryId, highlightChanges }: HistoryProp
           title={data.title}
           previousContent={!isErrorPrev ? prevData?.content : undefined}
           highlightChanges={highlightChanges}
+          onDiffCalculated={onDiffCalculated}
         />
       </div>
     )