feat(core): auto select block when jump to block (#4858)

Co-authored-by: Peng Xiao <pengxiao@outlook.com>

tests/affine-local/e2e/quick-search.spec.ts

@@ -372,7 +372,7 @@ test('show not found item', async ({ page }) => {
   await expect(notFoundItem).toHaveText('Search for "test123456"');
 });
 
-test('can use cmdk to search page content and scroll to it', async ({
+test('can use cmdk to search page content and scroll to it, then the block will be selected', async ({
   page,
 }) => {
   await openHomePage(page);
@@ -382,8 +382,8 @@ test('can use cmdk to search page content and scroll to it', async ({
   await getBlockSuiteEditorTitle(page).fill(
     'this is a new page to search for content'
   );
-  for (let i = 0; i < 50; i++) {
-    await page.keyboard.press('Enter');
+  for (let i = 0; i < 30; i++) {
+    await page.keyboard.press('Enter', { delay: 10 });
   }
   await page.keyboard.insertText('123456');
   await clickSideBarAllPageButton(page);
@@ -398,4 +398,6 @@ test('can use cmdk to search page content and scroll to it', async ({
   await waitForScrollToFinish(page);
   const isVisitable = await checkElementIsInView(page, '123456');
   expect(isVisitable).toBe(true);
+  const selectionElement = page.locator('affine-block-selection');
+  await expect(selectionElement).toBeVisible();
 });

tests/storybook/src/stories/image-preview-modal.stories.tsx

@@ -1,13 +1,11 @@
-import { BlockHubWrapper } from '@affine/component/block-hub';
+import { RootBlockHub } from '@affine/component/block-hub';
 import { BlockSuiteEditor } from '@affine/component/block-suite-editor';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { ImagePreviewModal } from '@affine/image-preview-plugin/src/component';
-import { rootBlockHubAtom } from '@affine/workspace/atom';
 import { getOrCreateWorkspace } from '@affine/workspace/manager';
 import type { Meta } from '@storybook/react';
 import { initEmptyPage } from '@toeverything/infra/blocksuite';
-import { useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
 export default {
@@ -54,24 +52,13 @@ export const Default = () => {
           overflow: 'auto',
         }}
       >
-        <BlockSuiteEditor
-          mode="page"
-          page={page}
-          onInit={useCallback(async page => initEmptyPage(page), [])}
-        />
+        <BlockSuiteEditor mode="page" page={page} />
         {createPortal(
           <ImagePreviewModal pageId={page.id} workspace={page.workspace} />,
           document.body
         )}
       </div>
-      <BlockHubWrapper
-        style={{
-          position: 'absolute',
-          right: 12,
-          bottom: 12,
-        }}
-        blockHubAtom={rootBlockHubAtom}
-      />
+      <RootBlockHub />
     </>
   );
 };