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,29 +20,17 @@ 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,
+  onDiffCalculated,
+}: HistoryEditorProps) {
   const editor = useEditor({
     extensions: mainExtensions,
     editable: false,
   });
-    const containerRef = useRef<HTMLDivElement>(null);
-    const changeIndexRef = useRef<number[]>([]);
-
-    useImperativeHandle(ref, () => ({
-      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;
@@ -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);
@@ -202,7 +181,7 @@ export const HistoryEditor = forwardRef<HistoryEditorHandle, HistoryEditorProps>
   }, [title, content, editor, previousContent, highlightChanges]);
 
   return (
-      <div ref={containerRef}>
+    <div>
       <Title order={1}>{title}</Title>
       {editor && (
         <EditorContent
@@ -212,5 +191,4 @@ export const HistoryEditor = forwardRef<HistoryEditorHandle, HistoryEditorProps>
       )}
     </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,
@@ -43,7 +42,6 @@ const HistoryView = forwardRef<HistoryEditorHandle, HistoryProps>(
     data && (
       <div>
         <HistoryEditor
-            ref={ref}
           content={data.content}
           title={data.title}
           previousContent={!isErrorPrev ? prevData?.content : undefined}
@@ -53,7 +51,6 @@ const HistoryView = forwardRef<HistoryEditorHandle, HistoryProps>(
       </div>
     )
   );
-  },
+}
-);
 
 export default HistoryView;