fix: block hub might not work (#3199)

packages/component/src/components/block-hub/index.tsx

@@ -2,7 +2,7 @@ import type { BlockHub } from '@blocksuite/blocks';
 import type { Atom } from 'jotai';
 import { useAtomValue } from 'jotai';
 import type { HTMLAttributes, ReactElement } from 'react';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 export interface BlockHubProps extends HTMLAttributes<HTMLDivElement> {
   blockHubAtom: Atom<Readonly<BlockHub> | null>;
@@ -11,15 +11,17 @@ export interface BlockHubProps extends HTMLAttributes<HTMLDivElement> {
 export const BlockHubWrapper = (props: BlockHubProps): ReactElement => {
   const blockHub = useAtomValue(props.blockHubAtom);
   const ref = useRef<HTMLDivElement>(null);
-  if (ref.current) {
+  useEffect(() => {
-    const div = ref.current;
+    console.log('ref.current', blockHub, ref);
-    if (!blockHub) {
+    if (ref.current) {
-      if (div.hasChildNodes()) {
+      const div = ref.current;
-        div.removeChild(div.firstChild as ChildNode);
+      if (blockHub) {
+        if (div.hasChildNodes()) {
+          div.removeChild(div.firstChild as ChildNode);
+        }
+        div.appendChild(blockHub);
       }
-    } else {
-      div.appendChild(blockHub);
     }
-  }
+  }, [blockHub]);
   return <div ref={ref} data-testid="block-hub" />;
 };

tests/libs/editor.ts

@@ -0,0 +1,12 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export async function checkBlockHub(page: Page) {
+  const box = await page.locator('affine-block-hub').boundingBox();
+  if (!box) throw new Error('block-hub not found');
+  await page.getByTestId('block-hub').click();
+  await page.waitForTimeout(500);
+  const box2 = await page.locator('affine-block-hub').boundingBox();
+  if (!box2) throw new Error('block-hub not found');
+  expect(box2.height).toBeGreaterThan(box.height);
+}

tests/parallels/blocksuite/block-hub.spec.ts

@@ -0,0 +1,14 @@
+import { test } from '@affine-test/kit/playwright';
+
+import { checkBlockHub } from '../../libs/editor';
+import { openHomePage } from '../../libs/load-page';
+import { newPage, waitEditorLoad } from '../../libs/page-logic';
+
+test('block-hub should work', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await checkBlockHub(page);
+  await newPage(page);
+  await page.waitForTimeout(500);
+  await checkBlockHub(page);
+});