From a4d08133549feef31cfb033bc6decfc59d468688 Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Wed, 15 Feb 2023 21:33:30 -0600
Subject: [PATCH] fix(editor): multiple block hub when switching pages (#1042)

---
 .../pages/workspace/[workspaceId]/[pageId].tsx    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx b/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
index 7c04823a6..4cfe46f25 100644
--- a/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx
@@ -11,6 +11,7 @@ import Head from 'next/head';
 import { useTranslation } from '@affine/i18n';
 import { useGlobalState } from '@/store/app';
 import exampleMarkdown from '@/templates/Welcome-to-AFFiNE-Alpha-Downhills.md';
+import { assertEquals } from '@blocksuite/store';
 
 const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
   ssr: false,
@@ -20,7 +21,14 @@ const BlockHubAppender = () => {
   const setBlockHub = useGlobalState(store => store.setBlockHub);
   const editor = useGlobalState(store => store.editor);
   useEffect(() => {
+    // todo(himself65): refactor with `useRef`
+    const abortController = new AbortController();
     let blockHubElement: HTMLElement | null = null;
+    abortController.signal.addEventListener('abort', () => {
+      blockHubElement?.remove();
+      const toolWrapper = document.querySelector('#toolWrapper');
+      assertEquals(toolWrapper?.childNodes.length, 0);
+    });
 
     editor?.createBlockHub().then(blockHub => {
       const toolWrapper = document.querySelector('#toolWrapper');
@@ -28,12 +36,15 @@ const BlockHubAppender = () => {
         // In an invitation page there is no toolWrapper, which contains helper icon and blockHub icon
         return;
       }
+      if (abortController.signal.aborted) {
+        return;
+      }
       blockHubElement = blockHub;
       setBlockHub(blockHub);
       toolWrapper.appendChild(blockHub);
     });
     return () => {
-      blockHubElement?.remove();
+      abortController.abort();
     };
   }, [editor, setBlockHub]);
   return null;
@@ -73,7 +84,7 @@ const Page: NextPageWithLayout = () => {
                 : undefined
             }
           />
-          <BlockHubAppender />
+          <BlockHubAppender key={currentWorkspace.id + currentPage.id} />
         </>
       )}
     </>