From 3d423c32992d078267a49970515e80d196a50cc5 Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Thu, 25 May 2023 14:11:41 +0800
Subject: [PATCH] fix: dispose on editor `props.onInit` (#2521)

---
 apps/web/src/adapters/affine/index.tsx        |  3 ++-
 .../components/block-suite-editor/index.tsx   | 25 +++++++++++--------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/web/src/adapters/affine/index.tsx b/apps/web/src/adapters/affine/index.tsx
index 699404abdc..49795e1954 100644
--- a/apps/web/src/adapters/affine/index.tsx
+++ b/apps/web/src/adapters/affine/index.tsx
@@ -311,7 +311,7 @@ export const AffinePlugin: WorkspaceAdapter<WorkspaceFlavour.AFFINE> = {
         </Suspense>
       );
     },
-    PageDetail: ({ currentWorkspace, currentPageId }) => {
+    PageDetail: ({ currentWorkspace, currentPageId, onLoadEditor }) => {
       const page = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
       if (!page) {
         throw new PageNotFoundError(
@@ -325,6 +325,7 @@ export const AffinePlugin: WorkspaceAdapter<WorkspaceFlavour.AFFINE> = {
             pageId={currentPageId}
             workspace={currentWorkspace}
             onInit={initPage}
+            onLoad={onLoadEditor}
           />
         </>
       );
diff --git a/packages/component/src/components/block-suite-editor/index.tsx b/packages/component/src/components/block-suite-editor/index.tsx
index 184ea1d758..a9744cb7a4 100644
--- a/packages/component/src/components/block-suite-editor/index.tsx
+++ b/packages/component/src/components/block-suite-editor/index.tsx
@@ -43,10 +43,10 @@ const ImagePreviewModal = lazy(() =>
 );
 
 const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
+  const { onLoad, page, mode, style, onInit } = props;
   const JotaiEditorContainer = useAtomValue(
     editorContainerModuleAtom
   ) as typeof EditorContainer;
-  const page = props.page;
   assertExists(page, 'page should not be null');
   const editorRef = useRef<EditorContainer | null>(null);
   const blockHubRef = useRef<BlockHub | null>(null);
@@ -57,19 +57,24 @@ const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
   }
   const editor = editorRef.current;
   assertExists(editorRef, 'editorRef.current should not be null');
-  if (editor.mode !== props.mode) {
-    editor.mode = props.mode;
+  if (editor.mode !== mode) {
+    editor.mode = mode;
   }
 
   useEffect(() => {
-    if (editor.page !== props.page) {
-      editor.page = props.page;
+    if (editor.page !== page) {
+      editor.page = page;
       if (page.root === null) {
-        props.onInit(page, editor);
+        onInit(page, editor);
       }
-      return props.onLoad?.(page, editor);
     }
-  }, [props.page, props.onInit, props.onLoad, editor, props, page]);
+  }, [onInit, editor, props, page]);
+
+  useEffect(() => {
+    if (editor.page && onLoad) {
+      return onLoad(page, editor);
+    }
+  }, [editor, editor.page, page, onLoad]);
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -108,9 +113,9 @@ const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
   const className = `editor-wrapper ${editor.mode}-mode`;
   return (
     <div
-      data-testid={`editor-${props.page.id}`}
+      data-testid={`editor-${page.id}`}
       className={className}
-      style={props.style}
+      style={style}
       ref={ref}
     />
   );