fix scroll

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

@@ -1,6 +1,6 @@
 import "@/features/editor/styles/index.css";
 import "./history-diff.module.css";
-import { useEffect, useImperativeHandle, forwardRef, useRef } from "react";
+import { useEffect } from "react";
 import { EditorContent, useEditor } from "@tiptap/react";
 import { mainExtensions } from "@/features/editor/extensions/extensions";
 import { Title } from "@mantine/core";
@@ -12,10 +12,6 @@ import { ChangeSet, simplifyChanges } from "prosemirror-changeset";
 
 export type DiffCounts = { added: number; deleted: number; total: number };
 
-export type HistoryEditorHandle = {
-  scrollToChange: (index: number) => void;
-};
-
 export interface HistoryEditorProps {
   title: string;
   content: any;
@@ -24,31 +20,19 @@ export interface HistoryEditorProps {
   onDiffCalculated?: (counts: DiffCounts) => void;
 }
 
-export const HistoryEditor = forwardRef<HistoryEditorHandle, HistoryEditorProps>(
+export function HistoryEditor({
-  function HistoryEditor(
+  title,
-    { title, content, previousContent, highlightChanges = true, onDiffCalculated },
+  content,
-    ref,
+  previousContent,
-  ) {
+  highlightChanges = true,
-    const editor = useEditor({
+  onDiffCalculated,
-      extensions: mainExtensions,
+}: HistoryEditorProps) {
-      editable: false,
+  const editor = useEditor({
-    });
+    extensions: mainExtensions,
-    const containerRef = useRef<HTMLDivElement>(null);
+    editable: false,
-    const changeIndexRef = useRef<number[]>([]);
+  });
 
-    useImperativeHandle(ref, () => ({
+  useEffect(() => {
-      scrollToChange: (index: number) => {
-        if (!containerRef.current || index < 1) return;
-        const element = containerRef.current.querySelector(
-          `[data-diff-index="${index}"]`,
-        );
-        if (element) {
-          element.scrollIntoView({ behavior: "smooth", block: "center" });
-        }
-      },
-    }));
-
-    useEffect(() => {
     if (!editor || !content) return;
 
     let decorationSet = DecorationSet.empty;
@@ -175,11 +159,6 @@ export const HistoryEditor = forwardRef<HistoryEditorHandle, HistoryEditorProps>
           }
         }
 
-        changeIndexRef.current = Array.from(
-          { length: changeIndex },
-          (_, i) => i + 1,
-        );
-
         decorationSet = DecorationSet.create(docNew, decorations);
       } catch (e) {
         console.error("History diff failed:", e);
@@ -201,16 +180,15 @@ export const HistoryEditor = forwardRef<HistoryEditorHandle, HistoryEditorProps>
     });
   }, [title, content, editor, previousContent, highlightChanges]);
 
-    return (
+  return (
-      <div ref={containerRef}>
+    <div>
-        <Title order={1}>{title}</Title>
+      <Title order={1}>{title}</Title>
-        {editor && (
+      {editor && (
-          <EditorContent
+        <EditorContent
-            editor={editor}
+          editor={editor}
-            className={historyClasses.historyEditor}
+          className={historyClasses.historyEditor}
-          />
+        />
-        )}
+      )}
-      </div>
+    </div>
-    );
+  );
-  },
+}
-);

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

@@ -7,10 +7,7 @@ import {
   Switch,
   Text,
 } from "@mantine/core";
-import {
+import { DiffCounts } from "@/features/page-history/components/history-editor";
-  DiffCounts,
-  HistoryEditorHandle,
-} 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";
@@ -34,7 +31,7 @@ export default function HistoryModalBody({ pageId }: Props) {
   const [highlightChanges, setHighlightChanges] = useState(true);
   const [diffCounts, setDiffCounts] = useState<DiffCounts | null>(null);
   const [currentChangeIndex, setCurrentChangeIndex] = useState(0);
-  const historyEditorRef = useRef<HistoryEditorHandle>(null);
+  const scrollViewportRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setActiveHistoryId("");
@@ -45,12 +42,24 @@ export default function HistoryModalBody({ pageId }: Props) {
     setCurrentChangeIndex(0);
   }, [activeHistoryId]);
 
+  const scrollToChangeIndex = (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" });
+    }
+  };
+
   const handlePrevChange = () => {
     if (!diffCounts || diffCounts.total === 0) return;
     const newIndex =
       currentChangeIndex <= 1 ? diffCounts.total : currentChangeIndex - 1;
     setCurrentChangeIndex(newIndex);
-    historyEditorRef.current?.scrollToChange(newIndex);
+    scrollToChangeIndex(newIndex);
   };
 
   const handleNextChange = () => {
@@ -58,7 +67,7 @@ export default function HistoryModalBody({ pageId }: Props) {
     const newIndex =
       currentChangeIndex >= diffCounts.total ? 1 : currentChangeIndex + 1;
     setCurrentChangeIndex(newIndex);
-    historyEditorRef.current?.scrollToChange(newIndex);
+    scrollToChangeIndex(newIndex);
   };
 
   return (
@@ -70,11 +79,10 @@ export default function HistoryModalBody({ pageId }: Props) {
       </nav>
 
       <div style={{ position: "relative", flex: 1 }}>
-        <ScrollArea h={650} w="100%" scrollbarSize={5}>
+        <ScrollArea h={650} w="100%" scrollbarSize={5} viewportRef={scrollViewportRef}>
           <div className={classes.sidebarRightSection}>
             {activeHistoryId && (
               <HistoryView
-                ref={historyEditorRef}
                 historyId={activeHistoryId}
                 prevHistoryId={activeHistoryPrevId}
                 highlightChanges={highlightChanges}

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

@@ -2,10 +2,8 @@ import { usePageHistoryQuery } from "@/features/page-history/queries/page-histor
 import {
   DiffCounts,
   HistoryEditor,
-  HistoryEditorHandle,
 } from "@/features/page-history/components/history-editor";
 import { useTranslation } from "react-i18next";
-import { forwardRef } from "react";
 
 interface HistoryProps {
   historyId: string;
@@ -14,11 +12,12 @@ interface HistoryProps {
   onDiffCalculated?: (counts: DiffCounts) => void;
 }
 
-const HistoryView = forwardRef<HistoryEditorHandle, HistoryProps>(
+function HistoryView({
-  function HistoryView(
+  historyId,
-    { historyId, prevHistoryId, highlightChanges, onDiffCalculated },
+  prevHistoryId,
-    ref,
+  highlightChanges,
-  ) {
+  onDiffCalculated,
+}: HistoryProps) {
   const { t } = useTranslation();
   const {
     data,
@@ -39,21 +38,19 @@ const HistoryView = forwardRef<HistoryEditorHandle, HistoryProps>(
     return <div>{t("Error fetching page data.")}</div>;
   }
 
-    return (
+  return (
-      data && (
+    data && (
-        <div>
+      <div>
-          <HistoryEditor
+        <HistoryEditor
-            ref={ref}
+          content={data.content}
-            content={data.content}
+          title={data.title}
-            title={data.title}
+          previousContent={!isErrorPrev ? prevData?.content : undefined}
-            previousContent={!isErrorPrev ? prevData?.content : undefined}
+          highlightChanges={highlightChanges}
-            highlightChanges={highlightChanges}
+          onDiffCalculated={onDiffCalculated}
-            onDiffCalculated={onDiffCalculated}
+        />
-          />
+      </div>
-        </div>
+    )
-      )
+  );
-    );
+}
-  },
-);
 
 export default HistoryView;