refactor: block-hub in tool wrapper (#3073)

apps/web/src/components/page-detail-editor.tsx

@@ -4,7 +4,7 @@ import {
   DEFAULT_HELLO_WORLD_PAGE_ID,
   PageNotFoundError,
 } from '@affine/env/constant';
-import { rootCurrentEditorAtom } from '@affine/workspace/atom';
+import { rootBlockHubAtom } from '@affine/workspace/atom';
 import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
@@ -22,13 +22,7 @@ import clsx from 'clsx';
 import { useAtomValue, useSetAtom } from 'jotai';
 import Head from 'next/head';
 import type { FC, ReactElement } from 'react';
-import React, {
-  memo,
-  startTransition,
-  Suspense,
-  useCallback,
-  useMemo,
-} from 'react';
+import React, { memo, Suspense, useCallback, useMemo } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 
 import { pageSettingFamily } from '../atoms';
@@ -73,7 +67,7 @@ const EditorWrapper = memo(function EditorWrapper({
     pageSetting?.mode ??
     (DEFAULT_HELLO_WORLD_PAGE_ID === pageId ? 'edgeless' : 'page');
 
-  const setEditor = useSetAtom(rootCurrentEditorAtom);
+  const setBlockHub = useSetAtom(rootBlockHubAtom);
   const [appSettings] = useAppSetting();
 
   assertExists(meta);
@@ -88,18 +82,13 @@ const EditorWrapper = memo(function EditorWrapper({
       page={page}
       onInit={useCallback(
         (page: Page, editor: Readonly<EditorContainer>) => {
-          startTransition(() => {
-            setEditor(editor);
-          });
           onInit(page, editor);
         },
-        [onInit, setEditor]
+        [onInit]
       )}
+      setBlockHub={setBlockHub}
       onLoad={useCallback(
         (page: Page, editor: EditorContainer) => {
-          startTransition(() => {
-            setEditor(editor);
-          });
           page.workspace.setPageMeta(page.id, {
             updatedDate: Date.now(),
           });
@@ -119,7 +108,7 @@ const EditorWrapper = memo(function EditorWrapper({
             dispose();
           };
         },
-        [plugins, onLoad, setEditor]
+        [plugins, onLoad]
       )}
     />
   );

apps/web/src/layouts/workspace-layout.tsx

@@ -1,6 +1,7 @@
 import { Content, displayFlex } from '@affine/component';
 import { AffineWatermark } from '@affine/component/affine-watermark';
 import { appSidebarResizingAtom } from '@affine/component/app-sidebar';
+import { BlockHubWrapper } from '@affine/component/block-hub';
 import { NotificationCenter } from '@affine/component/notification-center';
 import type { DraggableTitleCellData } from '@affine/component/page-list';
 import { StyledTitleLink } from '@affine/component/page-list';
@@ -13,6 +14,7 @@ import { initEmptyPage, initPageWithPreloading } from '@affine/env/blocksuite';
 import { DEFAULT_HELLO_WORLD_PAGE_ID, isDesktop } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import {
+  rootBlockHubAtom,
   rootCurrentPageIdAtom,
   rootCurrentWorkspaceIdAtom,
   rootWorkspacesMetadataAtom,
@@ -432,10 +434,7 @@ export const WorkspaceLayoutInner: FC<PropsWithChildren> = ({ children }) => {
           <MainContainer>
             {children}
             <ToolContainer>
-              {/* fixme(himself65): remove this */}
-              <div id="toolWrapper" style={{ marginBottom: '12px' }}>
-                {/* Slot for block hub */}
-              </div>
+              <BlockHubWrapper blockHubAtom={rootBlockHubAtom} />
               {!isPublicWorkspace && (
                 <HelpIsland
                   showList={router.query.pageId ? undefined : showList}

apps/web/src/pages/_debug/init-page.dev.tsx

@@ -1,4 +1,6 @@
+import { BlockHubWrapper } from '@affine/component/block-hub';
 import { MainContainer } from '@affine/component/workspace';
+import { rootBlockHubAtom } from '@affine/workspace/atom';
 import { useRouter } from 'next/router';
 import { lazy, Suspense } from 'react';
 
@@ -23,7 +25,7 @@ const InitPagePage: NextPageWithLayout = () => {
         <Suspense>
           <Editor />
         </Suspense>
-        <div id="toolWrapper" />
+        <BlockHubWrapper blockHubAtom={rootBlockHubAtom} />
       </MainContainer>
     </AppContainer>
   );