Merge pull request #113 from toeverything/fix/scroll

fix: scrollManager can not get scrollcontainer after create new page

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -93,38 +93,29 @@ const EditorContainer = ({
     workspace: string;
 }) => {
     const [lockScroll, setLockScroll] = useState(false);
-    const scrollContainerRef = useRef<HTMLDivElement>();
+    const [scrollContainer, setScrollContainer] = useState<HTMLElement>();
     const editorRef = useRef<BlockEditor>();
+
     const onScroll = (event: UIEvent) => {
         editorRef.current.getHooks().onRootNodeScroll(event);
         editorRef.current.scrollManager.emitScrollEvent(event);
     };
 
-    useEffect(() => {
-        editorRef.current.scrollManager.scrollContainer =
-            scrollContainerRef.current;
-
-        editorRef.current.scrollManager.scrollController = {
-            lockScroll: () => setLockScroll(true),
-            unLockScroll: () => setLockScroll(false),
-        };
-    }, []);
-
     const { setPageClientWidth } = usePageClientWidth();
     useEffect(() => {
-        if (scrollContainerRef.current) {
+        if (scrollContainer) {
             const obv = new ResizeObserver(e => {
                 setPageClientWidth(e[0].contentRect.width);
             });
-            obv.observe(scrollContainerRef.current);
+            obv.observe(scrollContainer);
             return () => obv.disconnect();
         }
-    }, [setPageClientWidth]);
+    }, [setPageClientWidth, scrollContainer]);
 
     return (
         <StyledEditorContainer
             lockScroll={lockScroll}
-            ref={scrollContainerRef}
+            ref={ref => setScrollContainer(ref)}
             onScroll={onScroll}
         >
             {pageId ? (
@@ -132,6 +123,11 @@ const EditorContainer = ({
                     workspace={workspace}
                     rootBlockId={pageId}
                     ref={editorRef}
+                    scrollContainer={scrollContainer}
+                    scrollController={{
+                        lockScroll: () => setLockScroll(true),
+                        unLockScroll: () => setLockScroll(false),
+                    }}
                 />
             ) : (
                 <Box

libs/components/affine-editor/src/Editor.tsx

@@ -18,6 +18,12 @@ interface AffineEditorProps {
     scrollBlank?: boolean;
 
     isWhiteboard?: boolean;
+
+    scrollContainer?: HTMLElement;
+    scrollController?: {
+        lockScroll: () => void;
+        unLockScroll: () => void;
+    };
 }
 
 function _useConstantWithDispose(
@@ -53,13 +59,32 @@ function _useConstantWithDispose(
 }
 
 export const AffineEditor = forwardRef<BlockEditor, AffineEditorProps>(
-    ({ workspace, rootBlockId, scrollBlank = true, isWhiteboard }, ref) => {
+    (
+        {
+            workspace,
+            rootBlockId,
+            scrollBlank = true,
+            isWhiteboard,
+            scrollController,
+            scrollContainer,
+        },
+        ref
+    ) => {
         const editor = _useConstantWithDispose(
             workspace,
             rootBlockId,
             isWhiteboard
         );
 
+        useEffect(() => {
+            if (scrollContainer) {
+                editor.scrollManager.scrollContainer = scrollContainer;
+            }
+            if (scrollController) {
+                editor.scrollManager.scrollController = scrollController;
+            }
+        }, [editor, scrollContainer, scrollController]);
+
         useImperativeHandle(ref, () => editor);
 
         return (