changes

src/editor/Editor.tsx

@@ -10,10 +10,19 @@ interface EditorProps {
   onReady: (editor: TiptapEditor | null) => void;
 }
 
+interface ChapterPosition {
+  from: number;
+  to: number;
+  scroll: number;
+}
+
 export function Editor({ chapterId, content, onChange, onReady }: EditorProps) {
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
 
+  const positions = useRef(new Map<string, ChapterPosition>());
+  const openChapter = useRef(chapterId);
+
   const editor = useEditor({
     extensions: editorExtensions,
     content,
@@ -27,7 +36,31 @@ export function Editor({ chapterId, content, onChange, onReady }: EditorProps) {
   }, [editor, onReady]);
 
   useEffect(() => {
-    if (editor) editor.commands.setContent(content, { emitUpdate: false });
+    if (!editor) return;
+    const scroller = editor.view.dom.closest(".editor-pane") as HTMLElement | null;
+
+    const previous = openChapter.current;
+    if (previous !== chapterId) {
+      const { from, to } = editor.state.selection;
+      positions.current.set(previous, { from, to, scroll: scroller?.scrollTop ?? 0 });
+    }
+    openChapter.current = chapterId;
+
+    editor.commands.setContent(content, { emitUpdate: false });
+
+    const saved = positions.current.get(chapterId);
+    const size = editor.state.doc.content.size;
+    editor.commands.setTextSelection(
+      saved ? { from: Math.min(saved.from, size), to: Math.min(saved.to, size) } : 0
+    );
+
+    if (scroller) {
+      const top = saved?.scroll ?? 0;
+      scroller.scrollTop = top;
+      requestAnimationFrame(() => {
+        scroller.scrollTop = top;
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chapterId, editor]);