chore: bump bs with new extension api (#8042)

2026-02-12 04:18:54 +00:00 · 2024-09-02 10:32:22 +00:00
parent 61e37d8873
commit 56f4634c1f
90 changed files with 1300 additions and 988 deletions
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -81,12 +81,12 @@
    "zod": "^3.22.4"
  },
  "devDependencies": {
-    "@blocksuite/block-std": "0.17.0-canary-202408191538-1511d04",
-    "@blocksuite/blocks": "0.17.0-canary-202408191538-1511d04",
-    "@blocksuite/global": "0.17.0-canary-202408191538-1511d04",
+    "@blocksuite/block-std": "0.0.0-canary-20240902070217",
+    "@blocksuite/blocks": "0.0.0-canary-20240902070217",
+    "@blocksuite/global": "0.0.0-canary-20240902070217",
    "@blocksuite/icons": "2.1.66",
-    "@blocksuite/presets": "0.17.0-canary-202408191538-1511d04",
-    "@blocksuite/store": "0.17.0-canary-202408191538-1511d04",
+    "@blocksuite/presets": "0.0.0-canary-20240902070217",
+    "@blocksuite/store": "0.0.0-canary-20240902070217",
    "@chromatic-com/storybook": "^1",
    "@storybook/addon-actions": "^8.2.9",
    "@storybook/addon-essentials": "^8.2.9",
--- a/packages/frontend/core/package.json
+++ b/packages/frontend/core/package.json
@@ -15,13 +15,13 @@
    "@affine/graphql": "workspace:*",
    "@affine/i18n": "workspace:*",
    "@affine/templates": "workspace:*",
-    "@blocksuite/block-std": "0.17.0-canary-202408191538-1511d04",
-    "@blocksuite/blocks": "0.17.0-canary-202408191538-1511d04",
-    "@blocksuite/global": "0.17.0-canary-202408191538-1511d04",
+    "@blocksuite/block-std": "0.0.0-canary-20240902070217",
+    "@blocksuite/blocks": "0.0.0-canary-20240902070217",
+    "@blocksuite/global": "0.0.0-canary-20240902070217",
    "@blocksuite/icons": "2.1.66",
-    "@blocksuite/inline": "0.17.0-canary-202408191538-1511d04",
-    "@blocksuite/presets": "0.17.0-canary-202408191538-1511d04",
-    "@blocksuite/store": "0.17.0-canary-202408191538-1511d04",
+    "@blocksuite/inline": "0.0.0-canary-20240902070217",
+    "@blocksuite/presets": "0.0.0-canary-20240902070217",
+    "@blocksuite/store": "0.0.0-canary-20240902070217",
    "@dnd-kit/core": "^6.1.0",
    "@dnd-kit/modifiers": "^7.0.0",
    "@dnd-kit/sortable": "^8.0.0",
--- a/packages/frontend/core/src/blocksuite/presets/ai/_common/chat-actions-handle.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/_common/chat-actions-handle.ts
@@ -4,11 +4,12 @@ import type {
  EditorHost,
  TextSelection,
 } from '@blocksuite/block-std';
-import type {
-  DocMode,
-  EdgelessRootService,
-  ImageSelection,
-  PageRootService,
+import {
+  type DocMode,
+  DocModeProvider,
+  type EdgelessRootService,
+  type ImageSelection,
+  type PageRootService,
 } from '@blocksuite/blocks';
 import { BlocksUtils, NoteDisplayMode } from '@blocksuite/blocks';
 import {
@@ -176,8 +177,7 @@ function addAIChatBlock(
 }

 export function promptDocTitle(host: EditorHost, autofill?: string) {
-  const notification =
-    host.std.spec.getService('affine:page').notificationService;
+  const notification = host.std.getService('affine:page').notificationService;
  if (!notification) return Promise.resolve(undefined);

  return notification.prompt({
@@ -297,11 +297,12 @@ const SAVE_CHAT_TO_BLOCK_ACTION: ChatAction = {
      return false;
    }

-    const rootService = host.spec.getService('affine:page');
-    const surfaceService = host.spec.getService('affine:surface');
+    const rootService = host.std.getService('affine:page');
+    const surfaceService = host.std.getService('affine:surface');
    if (!rootService || !surfaceService) return false;

-    const { docModeService, notificationService } = rootService;
+    const { notificationService } = rootService;
+    const docModeService = host.std.get(DocModeProvider);
    const { layer } = surfaceService;
    const curMode = docModeService.getMode();
    const viewportCenter = getViewportCenter(
@@ -312,7 +313,7 @@ const SAVE_CHAT_TO_BLOCK_ACTION: ChatAction = {
    // If current mode is not edgeless, switch to edgeless mode first
    if (curMode !== 'edgeless') {
      // Set mode to edgeless
-      docModeService.setMode('edgeless');
+      docModeService.setMode('edgeless' as DocMode);
      // Notify user to switch to edgeless mode
      notificationService?.notify({
        title: 'Save chat to a block',
@@ -382,7 +383,7 @@ const ADD_TO_EDGELESS_AS_NOTE = {
  handler: async (host: EditorHost, content: string) => {
    reportResponse('result:add-note');
    const { doc } = host;
-    const service = host.spec.getService<EdgelessRootService>('affine:page');
+    const service = host.std.getService<EdgelessRootService>('affine:page');
    const elements = service.selection.selectedElements;

    const props: { displayMode: NoteDisplayMode; xywh?: SerializedXYWH } = {
@@ -423,8 +424,8 @@ const CREATE_AS_DOC = {
    newDoc.addBlock('affine:surface', {}, rootId);
    const noteId = newDoc.addBlock('affine:note', {}, rootId);

-    host.spec.getService('affine:page').slots.docLinkClicked.emit({
-      docId: newDoc.id,
+    host.std.getService('affine:page').slots.docLinkClicked.emit({
+      pageId: newDoc.id,
    });
    let complete = false;
    (function addContent() {
@@ -460,8 +461,9 @@ const CREATE_AS_LINKED_DOC = {
      return false;
    }

-    const service = host.spec.getService<EdgelessRootService>('affine:page');
-    const mode = service.docModeService.getMode();
+    const service = host.std.getService<EdgelessRootService>('affine:page');
+    const docModeService = host.std.get(DocModeProvider);
+    const mode = docModeService.getMode();
    if (mode !== 'edgeless') {
      return false;
    }
--- a/packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-panel.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/_common/components/ask-ai-panel.ts
@@ -1,6 +1,7 @@
 import { type EditorHost, WithDisposable } from '@blocksuite/block-std';
 import {
  type AIItemGroupConfig,
+  DocMode,
  EdgelessRootService,
  scrollbarStyle,
 } from '@blocksuite/blocks';
@@ -63,7 +64,7 @@ export class AskAIPanel extends WithDisposable(LitElement) {
          item.showWhen
            ? item.showWhen(
                this.host.command.chain(),
-                this._edgeless ? 'edgeless' : 'page',
+                this._edgeless ? DocMode.Edgeless : DocMode.Page,
                this.host
              )
            : true
--- a/packages/frontend/core/src/blocksuite/presets/ai/_common/components/chat-action-list.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/_common/components/chat-action-list.ts
@@ -60,7 +60,7 @@ export class ChatActionList extends LitElement {
  }

  private get _rootService() {
-    return this.host.spec.getService('affine:page');
+    return this.host.std.getService('affine:page');
  }

  private get _currentTextSelection(): TextSelection | undefined {
--- a/packages/frontend/core/src/blocksuite/presets/ai/_common/components/copy-more.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/_common/components/copy-more.ts
@@ -73,7 +73,7 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
  `;

  private get _rootService() {
-    return this.host.spec.getService('affine:page');
+    return this.host.std.getService('affine:page');
  }

  private get _selectionValue() {
--- a/packages/frontend/core/src/blocksuite/presets/ai/_common/selection-utils.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/_common/selection-utils.ts
@@ -12,7 +12,7 @@ import { Slice } from '@blocksuite/store';
 import { getMarkdownFromSlice } from './markdown-utils';

 export const getRootService = (host: EditorHost) => {
-  return host.std.spec.getService('affine:page');
+  return host.std.getService('affine:page');
 };

 export function getEdgelessRootFromEditor(editor: EditorHost) {
@@ -24,7 +24,7 @@ export function getEdgelessRootFromEditor(editor: EditorHost) {
  return edgelessRoot;
 }
 export function getEdgelessService(editor: EditorHost) {
-  const rootService = editor.std.spec.getService('affine:page');
+  const rootService = editor.std.getService('affine:page');
  if (rootService instanceof EdgelessRootService) {
    return rootService;
  }
--- a/packages/frontend/core/src/blocksuite/presets/ai/actions/edgeless-response.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/actions/edgeless-response.ts
@@ -507,7 +507,7 @@ export const responses: {
    const contents = data.contents as unknown[];
    if (!contents) return;
    const images = data.images as { url: string; id: string }[][];
-    const service = host.spec.getService<EdgelessRootService>('affine:page');
+    const service = host.std.getService<EdgelessRootService>('affine:page');

    (async function () {
      for (let i = 0; i < contents.length - 1; i++) {
--- a/packages/frontend/core/src/blocksuite/presets/ai/ai-spec.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/ai-spec.ts
@@ -1,4 +1,8 @@
-import type { BlockSpec } from '@blocksuite/block-std';
+import {
+  BlockServiceWatcher,
+  type ExtensionType,
+  WidgetViewMapIdentifier,
+} from '@blocksuite/block-std';
 import {
  AFFINE_AI_PANEL_WIDGET,
  AFFINE_EDGELESS_COPILOT_WIDGET,
@@ -11,8 +15,10 @@ import {
  EdgelessCopilotWidget,
  EdgelessElementToolbarWidget,
  EdgelessRootBlockSpec,
+  edgelessRootWigetViewMap,
  ImageBlockSpec,
  PageRootBlockSpec,
+  pageRootWidgetViewMap,
  ParagraphBlockService,
  ParagraphBlockSpec,
 } from '@blocksuite/blocks';
@@ -30,56 +36,52 @@ import { setupImageToolbarEntry } from './entries/image-toolbar/setup-image-tool
 import { setupSlashMenuEntry } from './entries/slash-menu/setup-slash-menu';
 import { setupSpaceEntry } from './entries/space/setup-space';

-export const AIPageRootBlockSpec: BlockSpec = {
+class AIPageRootWatcher extends BlockServiceWatcher {
+  static override readonly flavour = 'affine:page';
+
+  override mounted() {
+    super.mounted();
+    this.blockService.specSlots.widgetConnected.on(view => {
+      if (view.component instanceof AffineAIPanelWidget) {
+        view.component.style.width = '630px';
+        view.component.config = buildAIPanelConfig(view.component);
+        setupSpaceEntry(view.component);
+      }
+
+      if (view.component instanceof AffineFormatBarWidget) {
+        setupFormatBarEntry(view.component);
+      }
+
+      if (view.component instanceof AffineSlashMenuWidget) {
+        setupSlashMenuEntry(view.component);
+      }
+    });
+  }
+}
+
+export const AIPageRootBlockSpec: ExtensionType[] = [
  ...PageRootBlockSpec,
-  view: {
-    ...PageRootBlockSpec.view,
-    widgets: {
-      ...PageRootBlockSpec.view.widgets,
-      [AFFINE_AI_PANEL_WIDGET]: literal`${unsafeStatic(
-        AFFINE_AI_PANEL_WIDGET
-      )}`,
+  AIPageRootWatcher,
+  {
+    setup: di => {
+      di.override(WidgetViewMapIdentifier('affine:page'), () => {
+        return {
+          ...pageRootWidgetViewMap,
+          [AFFINE_AI_PANEL_WIDGET]: literal`${unsafeStatic(
+            AFFINE_AI_PANEL_WIDGET
+          )}`,
+        };
+      });
    },
  },
-  setup: (slots, disposableGroup) => {
-    PageRootBlockSpec.setup?.(slots, disposableGroup);
-    disposableGroup.add(
-      slots.widgetConnected.on(view => {
-        if (view.component instanceof AffineAIPanelWidget) {
-          view.component.style.width = '630px';
-          view.component.config = buildAIPanelConfig(view.component);
-          setupSpaceEntry(view.component);
-        }
+];

-        if (view.component instanceof AffineFormatBarWidget) {
-          setupFormatBarEntry(view.component);
-        }
+class AIEdgelessRootWatcher extends BlockServiceWatcher {
+  static override readonly flavour = 'affine:page';

-        if (view.component instanceof AffineSlashMenuWidget) {
-          setupSlashMenuEntry(view.component);
-        }
-      })
-    );
-  },
-};
-
-export const AIEdgelessRootBlockSpec: BlockSpec = {
-  ...EdgelessRootBlockSpec,
-  view: {
-    ...EdgelessRootBlockSpec.view,
-    widgets: {
-      ...EdgelessRootBlockSpec.view.widgets,
-      [AFFINE_EDGELESS_COPILOT_WIDGET]: literal`${unsafeStatic(
-        AFFINE_EDGELESS_COPILOT_WIDGET
-      )}`,
-      [AFFINE_AI_PANEL_WIDGET]: literal`${unsafeStatic(
-        AFFINE_AI_PANEL_WIDGET
-      )}`,
-    },
-  },
-  setup(slots, disposableGroup) {
-    EdgelessRootBlockSpec.setup?.(slots, disposableGroup);
-    slots.widgetConnected.on(view => {
+  override mounted() {
+    super.mounted();
+    this.blockService.specSlots.widgetConnected.on(view => {
      if (view.component instanceof AffineAIPanelWidget) {
        view.component.style.width = '430px';
        view.component.config = buildAIPanelConfig(view.component);
@@ -102,55 +104,93 @@ export const AIEdgelessRootBlockSpec: BlockSpec = {
        setupSlashMenuEntry(view.component);
      }
    });
-  },
-};
+  }
+}

-export const AIParagraphBlockSpec: BlockSpec = {
-  ...ParagraphBlockSpec,
-  setup(slots, disposableGroup) {
-    ParagraphBlockSpec.setup?.(slots, disposableGroup);
-    slots.mounted.on(({ service }) => {
-      assertInstanceOf(service, ParagraphBlockService);
-      service.placeholderGenerator = model => {
-        if (model.type === 'text') {
-          return "Type '/' for commands, 'space' for AI";
-        }
-
-        const placeholders = {
-          h1: 'Heading 1',
-          h2: 'Heading 2',
-          h3: 'Heading 3',
-          h4: 'Heading 4',
-          h5: 'Heading 5',
-          h6: 'Heading 6',
-          quote: '',
+export const AIEdgelessRootBlockSpec: ExtensionType[] = [
+  ...EdgelessRootBlockSpec,
+  AIEdgelessRootWatcher,
+  {
+    setup: di => {
+      di.override(WidgetViewMapIdentifier('affine:page'), () => {
+        return {
+          ...edgelessRootWigetViewMap,
+          [AFFINE_EDGELESS_COPILOT_WIDGET]: literal`${unsafeStatic(
+            AFFINE_EDGELESS_COPILOT_WIDGET
+          )}`,
+          [AFFINE_AI_PANEL_WIDGET]: literal`${unsafeStatic(
+            AFFINE_AI_PANEL_WIDGET
+          )}`,
        };
-        return placeholders[model.type];
-      };
-    });
+      });
+    },
  },
-};
+];

-export const AICodeBlockSpec: BlockSpec = {
-  ...CodeBlockSpec,
-  setup(slots, disposableGroup) {
-    CodeBlockSpec.setup?.(slots, disposableGroup);
-    slots.widgetConnected.on(view => {
+class AIParagraphBlockWatcher extends BlockServiceWatcher {
+  static override readonly flavour = 'affine:paragraph';
+
+  override mounted() {
+    super.mounted();
+    const service = this.blockService;
+    assertInstanceOf(service, ParagraphBlockService);
+    service.placeholderGenerator = model => {
+      if (model.type === 'text') {
+        return "Type '/' for commands, 'space' for AI";
+      }
+
+      const placeholders = {
+        h1: 'Heading 1',
+        h2: 'Heading 2',
+        h3: 'Heading 3',
+        h4: 'Heading 4',
+        h5: 'Heading 5',
+        h6: 'Heading 6',
+        quote: '',
+      };
+      return placeholders[model.type];
+    };
+  }
+}
+
+export const AIParagraphBlockSpec: ExtensionType[] = [
+  ...ParagraphBlockSpec,
+  AIParagraphBlockWatcher,
+];
+
+class AICodeBlockWatcher extends BlockServiceWatcher {
+  static override readonly flavour = 'affine:code';
+
+  override mounted() {
+    super.mounted();
+    const service = this.blockService;
+    service.specSlots.widgetConnected.on(view => {
      if (view.component instanceof AffineCodeToolbarWidget) {
        setupCodeToolbarEntry(view.component);
      }
    });
-  },
-};
+  }
+}

-export const AIImageBlockSpec: BlockSpec = {
-  ...ImageBlockSpec,
-  setup(slots, disposableGroup) {
-    ImageBlockSpec.setup?.(slots, disposableGroup);
-    slots.widgetConnected.on(view => {
+export const AICodeBlockSpec: ExtensionType[] = [
+  ...CodeBlockSpec,
+  AICodeBlockWatcher,
+];
+
+class AIImageBlockWatcher extends BlockServiceWatcher {
+  static override readonly flavour = 'affine:image';
+
+  override mounted() {
+    super.mounted();
+    this.blockService.specSlots.widgetConnected.on(view => {
      if (view.component instanceof AffineImageToolbarWidget) {
        setupImageToolbarEntry(view.component);
      }
    });
-  },
-};
+  }
+}
+
+export const AIImageBlockSpec: ExtensionType[] = [
+  ...ImageBlockSpec,
+  AIImageBlockWatcher,
+];
--- a/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-messages.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/chat-panel-messages.ts
@@ -17,6 +17,7 @@ import type { BaseSelection, EditorHost } from '@blocksuite/block-std';
 import { ShadowlessElement, WithDisposable } from '@blocksuite/block-std';
 import {
  type AIError,
+  DocModeProvider,
  isInsidePageEditor,
  PaymentRequiredError,
  UnauthorizedError,
@@ -161,7 +162,7 @@ export class ChatPanelMessages extends WithDisposable(ShadowlessElement) {
          this._selectionValue = this.host.selection.value;
        })
      );
-      const { docModeService } = this.host.spec.getService('affine:page');
+      const docModeService = this.host.std.get(DocModeProvider);
      disposables.add(docModeService.onModeChange(() => this.requestUpdate()));
    }
  }
--- a/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/chat-panel/index.ts
@@ -160,7 +160,7 @@ export class ChatPanel extends WithDisposable(ShadowlessElement) {

  private readonly _cleanupHistories = async () => {
    const notification =
-      this.host.std.spec.getService('affine:page').notificationService;
+      this.host.std.getService('affine:page').notificationService;
    if (!notification) return;

    if (
--- a/packages/frontend/core/src/blocksuite/presets/ai/entries/code-toolbar/setup-code-toolbar.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/entries/code-toolbar/setup-code-toolbar.ts
@@ -1,9 +1,6 @@
 import '../../_common/components/ask-ai-button';

-import type {
-  AffineCodeToolbarWidget,
-  CodeBlockComponent,
-} from '@blocksuite/blocks';
+import type { AffineCodeToolbarWidget } from '@blocksuite/blocks';
 import { html } from 'lit';

 const AICodeItemGroups = buildAICodeItemGroups();
@@ -14,42 +11,34 @@ const buttonOptions: AskAIButtonOptions = {

 import type { AskAIButtonOptions } from '../../_common/components/ask-ai-button';
 import { buildAICodeItemGroups } from '../../_common/config';
-import { AIStarIcon } from '../../_common/icons';

 export function setupCodeToolbarEntry(codeToolbar: AffineCodeToolbarWidget) {
-  const onAskAIClick = () => {
-    const { host } = codeToolbar;
-    const { selection } = host;
-    const codeBlock = codeToolbar.block;
-    selection.setGroup('note', [
-      selection.create('block', { blockId: codeBlock.blockId }),
-    ]);
-  };
-  codeToolbar.setupDefaultConfig();
-  codeToolbar.addItems(
-    [
-      {
-        type: 'custom',
-        name: 'Ask AI',
-        tooltip: 'Ask AI',
-        icon: AIStarIcon,
-        showWhen: CodeBlockComponent => !CodeBlockComponent.doc.readonly,
-        render(codeBlock: CodeBlockComponent, onClick?: () => void) {
-          return html`<ask-ai-button
-            class="code-toolbar-button ask-ai"
-            .host=${codeBlock.host}
-            .actionGroups=${AICodeItemGroups}
-            .toggleType=${'click'}
-            .options=${buttonOptions}
-            @click=${(e: MouseEvent) => {
-              e.stopPropagation();
-              onAskAIClick();
-              onClick?.();
-            }}
-          ></ask-ai-button>`;
-        },
+  codeToolbar.addPrimaryItems([
+    {
+      type: 'ask-ai',
+      when: ({ doc }) => !doc.readonly,
+      generate: ({ host, blockComponent }) => {
+        return {
+          action: () => {
+            const { selection } = host;
+            selection.setGroup('note', [
+              selection.create('block', { blockId: blockComponent.blockId }),
+            ]);
+          },
+          render: item =>
+            html`<ask-ai-button
+              class="code-toolbar-button ask-ai"
+              .host=${host}
+              .actionGroups=${AICodeItemGroups}
+              .toggleType=${'click'}
+              .options=${buttonOptions}
+              @click=${(e: MouseEvent) => {
+                e.stopPropagation();
+                item.action();
+              }}
+            ></ask-ai-button>`,
+        };
      },
-    ],
-    0
-  );
+    },
+  ]);
 }
--- a/packages/frontend/core/src/blocksuite/presets/ai/entries/edgeless/index.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/entries/edgeless/index.ts
@@ -1,5 +1,6 @@
 import type {
  AIItemGroupConfig,
+  DocMode,
  EdgelessCopilotWidget,
  EdgelessElementToolbarWidget,
  EdgelessRootBlockComponent,
@@ -27,7 +28,7 @@ export function setupEdgelessElementToolbarEntry(
      const chain = edgeless.service.std.command.chain();
      const filteredGroups = edgelessActionGroups.reduce((pre, group) => {
        const filtered = group.items.filter(item =>
-          item.showWhen?.(chain, 'edgeless', edgeless.host)
+          item.showWhen?.(chain, 'edgeless' as DocMode, edgeless.host)
        );

        if (filtered.length > 0) pre.push({ ...group, items: filtered });
--- a/packages/frontend/core/src/blocksuite/presets/ai/entries/image-toolbar/setup-image-toolbar.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/entries/image-toolbar/setup-image-toolbar.ts
@@ -1,9 +1,6 @@
 import '../../_common/components/ask-ai-button';

-import type {
-  AffineImageToolbarWidget,
-  ImageBlockComponent,
-} from '@blocksuite/blocks';
+import type { AffineImageToolbarWidget } from '@blocksuite/blocks';
 import { html } from 'lit';

 import type { AskAIButtonOptions } from '../../_common/components/ask-ai-button';
@@ -17,34 +14,33 @@ const buttonOptions: AskAIButtonOptions = {
 };

 export function setupImageToolbarEntry(imageToolbar: AffineImageToolbarWidget) {
-  const onAskAIClick = () => {
-    const { host } = imageToolbar;
-    const { selection } = host;
-    const imageBlock = imageToolbar.block;
-    selection.setGroup('note', [
-      selection.create('image', { blockId: imageBlock.blockId }),
-    ]);
-  };
-  imageToolbar.buildDefaultConfig();
-  imageToolbar.addConfigItems(
+  imageToolbar.addPrimaryItems(
    [
      {
-        type: 'custom',
-        render(imageBlock: ImageBlockComponent, onClick?: () => void) {
-          return html`<ask-ai-button
-            class="image-toolbar-button ask-ai"
-            .host=${imageBlock.host}
-            .actionGroups=${AIImageItemGroups}
-            .toggleType=${'click'}
-            .options=${buttonOptions}
-            @click=${(e: MouseEvent) => {
-              e.stopPropagation();
-              onAskAIClick();
-              onClick?.();
-            }}
-          ></ask-ai-button>`;
+        type: 'ask-ai',
+        when: ({ doc }) => !doc.readonly,
+        generate: ({ host, blockComponent }) => {
+          return {
+            action: () => {
+              const { selection } = host;
+              selection.setGroup('note', [
+                selection.create('image', { blockId: blockComponent.blockId }),
+              ]);
+            },
+            render: item =>
+              html`<ask-ai-button
+                class="image-toolbar-button ask-ai"
+                .host=${host}
+                .actionGroups=${AIImageItemGroups}
+                .toggleType=${'click'}
+                .options=${buttonOptions}
+                @click=${(e: MouseEvent) => {
+                  e.stopPropagation();
+                  item.action();
+                }}
+              ></ask-ai-button>`,
+          };
        },
-        showWhen: imageBlockComponent => !imageBlockComponent.doc.readonly,
      },
    ],
    0
--- a/packages/frontend/core/src/blocksuite/presets/ai/entries/slash-menu/setup-slash-menu.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/entries/slash-menu/setup-slash-menu.ts
@@ -1,10 +1,11 @@
-import type {
-  AffineAIPanelWidget,
-  AffineSlashMenuActionItem,
-  AffineSlashMenuContext,
-  AffineSlashMenuItem,
-  AffineSlashSubMenu,
-  AIItemConfig,
+import {
+  type AffineAIPanelWidget,
+  type AffineSlashMenuActionItem,
+  type AffineSlashMenuContext,
+  type AffineSlashMenuItem,
+  type AffineSlashSubMenu,
+  type AIItemConfig,
+  DocModeProvider,
 } from '@blocksuite/blocks';
 import {
  AFFINE_AI_PANEL_WIDGET,
@@ -38,9 +39,8 @@ export function setupSlashMenuEntry(slashMenu: AffineSlashMenuWidget) {
      if (affineAIPanelWidget === null) return false;

      const chain = rootComponent.host.command.chain();
-      const editorMode = rootComponent.service.docModeService.getMode(
-        rootComponent.doc.id
-      );
+      const docModeService = rootComponent.std.get(DocModeProvider);
+      const editorMode = docModeService.getMode(rootComponent.doc.id);

      return item?.showWhen?.(chain, editorMode, rootComponent.host) ?? true;
    };
--- a/packages/frontend/core/src/blocksuite/presets/ai/messages/slides-renderer.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/messages/slides-renderer.ts
@@ -1,4 +1,4 @@
-import type { EditorHost } from '@blocksuite/block-std';
+import { BlockStdScope, type EditorHost } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/block-std';
 import {
  type AffineAIPanelWidgetConfig,
@@ -207,7 +207,10 @@ export class AISlidesRenderer extends WithDisposable(LitElement) {
          class="edgeless-container affine-edgeless-viewport"
          ${ref(this._editorContainer)}
        >
-          ${this.host.renderSpecPortal(this._doc, EdgelessEditorBlockSpecs)}
+          ${new BlockStdScope({
+            doc: this._doc,
+            extensions: EdgelessEditorBlockSpecs,
+          }).render()}
        </div>
        <div class="mask"></div>
      </div>`;
--- a/packages/frontend/core/src/blocksuite/presets/ai/messages/text.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/messages/text.ts
@@ -1,7 +1,11 @@
-import { type EditorHost, WithDisposable } from '@blocksuite/block-std';
-import type {
-  AffineAIPanelState,
-  AffineAIPanelWidgetConfig,
+import {
+  BlockStdScope,
+  type EditorHost,
+  WithDisposable,
+} from '@blocksuite/block-std';
+import {
+  type AffineAIPanelState,
+  type AffineAIPanelWidgetConfig,
 } from '@blocksuite/blocks';
 import {
  CodeBlockComponent,
@@ -271,7 +275,10 @@ export class AIAnswerText extends WithDisposable(LitElement) {
        ${keyed(
          this._doc,
          html`<div class="ai-answer-text-editor affine-page-viewport">
-            ${this.host.renderSpecPortal(this._doc, CustomPageEditorBlockSpecs)}
+            ${new BlockStdScope({
+              doc: this._doc,
+              extensions: CustomPageEditorBlockSpecs,
+            }).render()}
          </div>`
        )}
      </div>
--- a/packages/frontend/core/src/blocksuite/presets/ai/peek-view/chat-block-peek-view.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/peek-view/chat-block-peek-view.ts
@@ -8,6 +8,7 @@ import {
  type AIError,
  CanvasElementType,
  ConnectorMode,
+  DocModeProvider,
  type EdgelessRootService,
 } from '@blocksuite/blocks';
 import {
@@ -37,11 +38,11 @@ export class AIChatBlockPeekView extends LitElement {
  static override styles = PeekViewStyles;

  private get _rootService() {
-    return this.host.spec.getService('affine:page');
+    return this.host.std.getService('affine:page');
  }

  private get _modeService() {
-    return this._rootService.docModeService;
+    return this.host.std.get(DocModeProvider);
  }

  private get parentSessionId() {
--- a/packages/frontend/core/src/blocksuite/presets/ai/slides/index.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/slides/index.ts
@@ -12,7 +12,7 @@ import {
 } from './template';

 export const PPTBuilder = (host: EditorHost) => {
-  const service = host.spec.getService<EdgelessRootService>('affine:page');
+  const service = host.std.getService<EdgelessRootService>('affine:page');
  const docs: PPTDoc[] = [];
  const contents: unknown[] = [];
  const allImages: TemplateImage[][] = [];
--- a/packages/frontend/core/src/blocksuite/presets/ai/utils/custom-specs.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/utils/custom-specs.ts
@@ -1,3 +1,10 @@
+import {
+  BlockFlavourIdentifier,
+  BlockServiceIdentifier,
+  BlockViewIdentifier,
+  type ExtensionType,
+  StdIdentifier,
+} from '@blocksuite/block-std';
 import { PageEditorBlockSpecs, PageRootService } from '@blocksuite/blocks';
 import { literal } from 'lit/static-html.js';

@@ -8,15 +15,19 @@ class CustomPageRootService extends PageRootService {
  override loadFonts() {}
 }

-export const CustomPageEditorBlockSpecs = PageEditorBlockSpecs.map(spec => {
-  if (spec.schema.model.flavour === 'affine:page') {
-    return {
-      ...spec,
-      service: CustomPageRootService,
-      view: {
-        component: literal`affine-page-root`,
-      },
-    };
-  }
-  return spec;
-});
+export const CustomPageEditorBlockSpecs: ExtensionType[] = [
+  ...PageEditorBlockSpecs,
+  {
+    setup: di => {
+      di.override(
+        BlockServiceIdentifier('affine:page'),
+        CustomPageRootService,
+        [StdIdentifier, BlockFlavourIdentifier('affine:page')]
+      );
+      di.override(
+        BlockViewIdentifier('affine:page'),
+        () => literal`affine-page-root`
+      );
+    },
+  },
+];
--- a/packages/frontend/core/src/blocksuite/presets/ai/utils/edgeless.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/utils/edgeless.ts
@@ -40,7 +40,7 @@ export function isMindmapChild(ele: BlockSuite.EdgelessModel) {
 }

 export function getService(host: EditorHost) {
-  const edgelessService = host.spec.getService(
+  const edgelessService = host.std.getService(
    'affine:page'
  ) as EdgelessRootService;

--- a/packages/frontend/core/src/blocksuite/presets/ai/utils/selection-utils.ts
+++ b/packages/frontend/core/src/blocksuite/presets/ai/utils/selection-utils.ts
@@ -18,7 +18,7 @@ import { getEdgelessCopilotWidget, getService } from './edgeless';
 import { getContentFromSlice } from './markdown-utils';

 export const getRootService = (host: EditorHost) => {
-  return host.std.spec.getService('affine:page');
+  return host.std.getService('affine:page');
 };

 export function getEdgelessRootFromEditor(editor: EditorHost) {
@@ -30,7 +30,7 @@ export function getEdgelessRootFromEditor(editor: EditorHost) {
  return edgelessRoot;
 }
 export function getEdgelessService(editor: EditorHost) {
-  const rootService = editor.std.spec.getService('affine:page');
+  const rootService = editor.std.getService('affine:page');
  if (rootService instanceof EdgelessRootService) {
    return rootService;
  }
--- a/packages/frontend/core/src/bootstrap/first-app-data.ts
+++ b/packages/frontend/core/src/bootstrap/first-app-data.ts
@@ -2,7 +2,7 @@ import { DebugLogger } from '@affine/debug';
 import { DEFAULT_WORKSPACE_NAME } from '@affine/env/constant';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import onboardingUrl from '@affine/templates/onboarding.zip';
-import { ZipTransformer } from '@blocksuite/blocks';
+import { DocMode, ZipTransformer } from '@blocksuite/blocks';
 import type { WorkspacesService } from '@toeverything/infra';
 import { DocsService, initEmptyPage } from '@toeverything/infra';

@@ -31,7 +31,7 @@ export async function buildShowcaseWorkspace(
  );

  if (defaultDoc) {
-    defaultDoc.setPrimaryMode('edgeless');
+    defaultDoc.setPrimaryMode(DocMode.Edgeless);
  }

  dispose();
--- a/packages/frontend/core/src/commands/affine-creation.tsx
+++ b/packages/frontend/core/src/commands/affine-creation.tsx
@@ -1,4 +1,5 @@
 import type { useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/blocks';
 import { ImportIcon, PlusIcon } from '@blocksuite/icons/rc';

 import type { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
@@ -31,7 +32,7 @@ export function registerAffineCreationCommands({
      run() {
        track.$.cmdk.creation.createDoc({ mode: 'page' });

-        pageHelper.createPage('page');
+        pageHelper.createPage('page' as DocMode);
      },
    })
  );
--- a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
+++ b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
@@ -9,16 +9,12 @@ import { EditorService } from '@affine/core/modules/editor';
 import { WorkspacePermissionService } from '@affine/core/modules/permissions';
 import { WorkspaceQuotaService } from '@affine/core/modules/quota';
 import { i18nTime, Trans, useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/blocks';
 import { CloseIcon, ToggleCollapseIcon } from '@blocksuite/icons/rc';
 import type { Doc as BlockSuiteDoc, DocCollection } from '@blocksuite/store';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import type { DialogContentProps } from '@radix-ui/react-dialog';
-import {
-  type DocMode,
-  useLiveData,
-  useService,
-  WorkspaceService,
-} from '@toeverything/infra';
+import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import { atom, useAtom, useSetAtom } from 'jotai';
 import type { PropsWithChildren } from 'react';
 import {
--- a/packages/frontend/core/src/components/affine/reference-link/index.tsx
+++ b/packages/frontend/core/src/components/affine/reference-link/index.tsx
@@ -6,23 +6,27 @@ import {
 } from '@affine/core/modules/peek-view';
 import { WorkbenchLink } from '@affine/core/modules/workbench';
 import { useI18n } from '@affine/i18n';
+import type { BlockStdScope } from '@blocksuite/block-std';
+import { DocMode } from '@blocksuite/blocks';
 import {
+  BlockLinkIcon,
  DeleteIcon,
  LinkedEdgelessIcon,
  LinkedPageIcon,
  TodayIcon,
 } from '@blocksuite/icons/rc';
 import type { DocCollection } from '@blocksuite/store';
+import { useService } from '@toeverything/infra';
 import {
-  type DocMode,
-  DocsService,
-  LiveData,
-  useLiveData,
-  useService,
-} from '@toeverything/infra';
-import { type PropsWithChildren, useCallback, useRef } from 'react';
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';

 import * as styles from './styles.css';
+import { scrollAnchoring } from './utils';

 export interface PageReferenceRendererOptions {
  docMode: DocMode | null;
@@ -31,6 +35,9 @@ export interface PageReferenceRendererOptions {
  pageMetaHelper: ReturnType<typeof useDocMetaHelper>;
  journalHelper: ReturnType<typeof useJournalHelper>;
  t: ReturnType<typeof useI18n>;
+  // linking doc with block or element
+  blockIds?: string[];
+  elementIds?: string[];
 }
 // use a function to be rendered in the lit renderer
 export function pageReferenceRenderer({
@@ -39,30 +46,37 @@ export function pageReferenceRenderer({
  pageMetaHelper,
  journalHelper,
  t,
+  blockIds,
+  elementIds,
 }: PageReferenceRendererOptions) {
  const { isPageJournal, getLocalizedJournalDateString } = journalHelper;
  const referencedPage = pageMetaHelper.getDocMeta(pageId);
  let title =
    referencedPage?.title ?? t['com.affine.editor.reference-not-found']();

-  let icon = !referencedPage ? (
-    <DeleteIcon className={styles.pageReferenceIcon} />
-  ) : docMode === 'page' || docMode === null ? (
-    <LinkedPageIcon className={styles.pageReferenceIcon} />
-  ) : (
-    <LinkedEdgelessIcon className={styles.pageReferenceIcon} />
-  );
+  let Icon = DeleteIcon;
+
+  if (referencedPage) {
+    if (docMode === DocMode.Edgeless) {
+      Icon = LinkedEdgelessIcon;
+    } else {
+      Icon = LinkedPageIcon;
+    }
+    if (blockIds?.length || elementIds?.length) {
+      Icon = BlockLinkIcon;
+    }
+  }

  const isJournal = isPageJournal(pageId);
  const localizedJournalDate = getLocalizedJournalDateString(pageId);
  if (isJournal && localizedJournalDate) {
    title = localizedJournalDate;
-    icon = <TodayIcon className={styles.pageReferenceIcon} />;
+    Icon = TodayIcon;
  }

  return (
    <>
-      {icon}
+      <Icon className={styles.pageReferenceIcon} />
      <span className="affine-reference-title">
        {title ? title : t['Untitled']()}
      </span>
@@ -74,32 +88,42 @@ export function AffinePageReference({
  pageId,
  docCollection,
  wrapper: Wrapper,
+  mode = DocMode.Page,
+  params = {},
+  isSameDoc = false,
+  std,
 }: {
  docCollection: DocCollection;
  pageId: string;
  wrapper?: React.ComponentType<PropsWithChildren>;
+  mode?: DocMode;
+  params?: {
+    mode?: DocMode;
+    blockIds?: string[];
+    elementIds?: string[];
+  };
+  isSameDoc?: boolean;
+  std?: BlockStdScope;
 }) {
  const pageMetaHelper = useDocMetaHelper(docCollection);
  const journalHelper = useJournalHelper(docCollection);
  const t = useI18n();
+  const [anchor, setAnchor] = useState<{
+    mode: DocMode;
+    id: string;
+  } | null>(null);
+
+  const { mode: linkedWithMode, blockIds, elementIds } = params;

-  const docsService = useService(DocsService);
-  const docPrimaryMode = useLiveData(
-    LiveData.computed(get => {
-      const primaryMode$ = get(docsService.list.doc$(pageId))?.primaryMode$;
-      if (!primaryMode$) {
-        return null;
-      }
-      return get(primaryMode$);
-    })
-  );
  const el = pageReferenceRenderer({
-    docMode: docPrimaryMode,
+    docMode: linkedWithMode ?? mode,
    pageId,
    pageMetaHelper,
    journalHelper,
    docCollection,
    t,
+    blockIds,
+    elementIds,
  });

  const ref = useRef<HTMLAnchorElement>(null);
@@ -107,6 +131,18 @@ export function AffinePageReference({
  const peekView = useService(PeekViewService).peekView;
  const isInPeekView = useInsidePeekView();

+  useEffect(() => {
+    if (isSameDoc) {
+      if (mode === DocMode.Edgeless && elementIds?.length) {
+        setAnchor({ mode, id: elementIds[0] });
+      } else if (blockIds?.length) {
+        setAnchor({ mode, id: blockIds[0] });
+      }
+    } else {
+      setAnchor(null);
+    }
+  }, [std, isSameDoc, mode, blockIds, elementIds]);
+
  const onClick = useCallback(
    (e: React.MouseEvent) => {
      if (e.shiftKey && ref.current) {
@@ -114,18 +150,39 @@ export function AffinePageReference({
        e.stopPropagation();
        peekView.open(ref.current).catch(console.error);
      }
-      if (isInPeekView) {
+
+      if (std && anchor) {
+        e.preventDefault();
+        e.stopPropagation();
+        const { mode, id } = anchor;
+        scrollAnchoring(std, mode, id);
+      } else if (isInPeekView) {
        peekView.close();
      }
+
      return;
    },
-    [isInPeekView, peekView]
+    [isInPeekView, peekView, anchor, std]
  );

+  // A block/element reference link
+  const search = new URLSearchParams();
+  if (linkedWithMode) {
+    search.set('mode', linkedWithMode);
+  }
+  if (blockIds?.length) {
+    search.set('blockIds', blockIds.join(','));
+  }
+  if (elementIds?.length) {
+    search.set('elementIds', elementIds.join(','));
+  }
+
+  const query = search.size > 0 ? `?${search.toString()}` : '';
+
  return (
    <WorkbenchLink
      ref={ref}
-      to={`/${pageId}`}
+      to={`/${pageId}${query}`}
      onClick={onClick}
      className={styles.pageReferenceLink}
    >
--- a/packages/frontend/core/src/components/affine/reference-link/utils.ts
+++ b/packages/frontend/core/src/components/affine/reference-link/utils.ts
@@ -0,0 +1,108 @@
+import type { BlockStdScope } from '@blocksuite/block-std';
+import {
+  DocMode,
+  type EdgelessRootService,
+  type PageRootService,
+} from '@blocksuite/blocks';
+import { Bound, deserializeXYWH } from '@blocksuite/global/utils';
+
+function scrollAnchoringInEdgelessMode(
+  service: EdgelessRootService,
+  id: string
+) {
+  requestAnimationFrame(() => {
+    let isNotInNote = true;
+    let bounds: Bound | null = null;
+
+    const blockComponent = service.std.view.getBlock(id);
+
+    const parentComponent = blockComponent?.parentComponent;
+    if (parentComponent && parentComponent.flavour === 'affine:note') {
+      isNotInNote = false;
+
+      const selection = parentComponent.std.selection;
+      if (!selection) return;
+
+      selection.set([
+        selection.create('block', {
+          blockId: id,
+        }),
+      ]);
+
+      const { left: x, width: w } = parentComponent.getBoundingClientRect();
+      const { top: y, height: h } = blockComponent.getBoundingClientRect();
+      const coord = service.viewport.toModelCoordFromClientCoord([x, y]);
+      bounds = new Bound(
+        coord[0],
+        coord[1],
+        w / service.viewport.zoom,
+        h / service.viewport.zoom
+      );
+    } else {
+      const model = service.getElementById(id);
+      if (!model) return;
+
+      bounds = Bound.fromXYWH(deserializeXYWH(model.xywh));
+    }
+
+    if (!bounds) return;
+
+    if (isNotInNote) {
+      service.selection.set({
+        elements: [id],
+        editing: false,
+      });
+    }
+
+    const { zoom, centerX, centerY } = service.getFitToScreenData(
+      [20, 20, 20, 20],
+      [bounds]
+    );
+
+    service.viewport.setViewport(zoom, [centerX, centerY]);
+
+    // const surfaceComponent = service.std.view.getBlock(service.surface.id);
+    // if (!surfaceComponent) return;
+    // (surfaceComponent as SurfaceBlockComponent).refresh();
+
+    // TODO(@fundon): toolbar should be hidden
+  });
+}
+
+function scrollAnchoringInPageMode(service: PageRootService, id: string) {
+  const blockComponent = service.std.view.getBlock(id);
+  if (!blockComponent || !blockComponent.path.length) return;
+
+  blockComponent.scrollIntoView({
+    behavior: 'instant',
+    block: 'center',
+  });
+
+  const selection = service.std.selection;
+  if (!selection) return;
+
+  selection.set([
+    selection.create('block', {
+      blockId: id,
+    }),
+  ]);
+
+  // TODO(@fundon): toolbar should be hidden
+}
+
+// TODO(@fundon): it should be a command
+export function scrollAnchoring(std: BlockStdScope, mode: DocMode, id: string) {
+  if (mode === DocMode.Edgeless) {
+    const service = std.getService<EdgelessRootService>('affine:page');
+    if (!service) return;
+
+    scrollAnchoringInEdgelessMode(service, id);
+
+    return;
+  }
+
+  const service = std.getService<PageRootService>('affine:page');
+  if (!service) return;
+
+  scrollAnchoringInPageMode(service, id);
+}
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx
+++ b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx
@@ -23,8 +23,9 @@ import {
  SystemFontFamilyService,
 } from '@affine/core/modules/system-font-family';
 import { useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/blocks';
 import { DoneIcon, SearchIcon } from '@blocksuite/icons/rc';
-import { type DocMode, useLiveData, useServices } from '@toeverything/infra';
+import { useLiveData, useServices } from '@toeverything/infra';
 import clsx from 'clsx';
 import {
  type ChangeEvent,
--- a/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
+++ b/packages/frontend/core/src/components/affine/share-page-modal/share-menu/share-page.tsx
@@ -12,6 +12,7 @@ import { ShareInfoService } from '@affine/core/modules/share-doc';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { PublicPageMode } from '@affine/graphql';
 import { useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/blocks';
 import {
  BlockIcon,
  CollaborationIcon,
@@ -158,10 +159,10 @@ export const AFFiNESharePage = (props: ShareMenuProps) => {
  });

  const onCopyPageLink = useCallback(() => {
-    onClickCopyLink('page');
+    onClickCopyLink('page' as DocMode);
  }, [onClickCopyLink]);
  const onCopyEdgelessLink = useCallback(() => {
-    onClickCopyLink('edgeless');
+    onClickCopyLink('edgeless' as DocMode);
  }, [onClickCopyLink]);
  const onCopyBlockLink = useCallback(() => {
    // TODO(@JimmFly): handle frame
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor-container.tsx
@@ -1,15 +1,13 @@
-import type { BlockComponent } from '@blocksuite/block-std';
+import type { ReferenceInfo } from '@blocksuite/affine-model';
+import { DocMode } from '@blocksuite/blocks';
 import type {
  AffineEditorContainer,
  EdgelessEditor,
  PageEditor,
 } from '@blocksuite/presets';
-import type { Doc } from '@blocksuite/store';
-import { Slot } from '@blocksuite/store';
-import { type DocMode } from '@toeverything/infra';
+import { type Doc, Slot } from '@blocksuite/store';
 import clsx from 'clsx';
 import type React from 'react';
-import type { RefObject } from 'react';
 import {
  forwardRef,
  useEffect,
@@ -19,6 +17,7 @@ import {
  useState,
 } from 'react';

+import { scrollAnchoring } from '../../affine/reference-link/utils';
 import { BlocksuiteDocEditor, BlocksuiteEdgelessEditor } from './lit-adaper';
 import * as styles from './styles.css';

@@ -43,7 +42,8 @@ interface BlocksuiteEditorContainerProps {
  shared?: boolean;
  className?: string;
  style?: React.CSSProperties;
-  defaultSelectedBlockId?: string;
+  blockIds?: string[];
+  elementIds?: string[];
 }

 // mimic the interface of the webcomponent and expose slots & host
@@ -53,68 +53,36 @@ type BlocksuiteEditorContainerRef = Pick<
 > &
  HTMLDivElement;

-function findBlockElementById(container: HTMLElement, blockId: string) {
-  const element = container.querySelector(
-    `[data-block-id="${blockId}"]`
-  ) as BlockComponent | null;
-  return element;
-}
-
-// a workaround for returning the webcomponent for the given block id
-// by iterating over the children of the rendered dom tree
-const useBlockElementById = (
-  containerRef: RefObject<HTMLElement | null>,
-  blockId: string | undefined,
-  timeout = 1000
-) => {
-  const [blockElement, setBlockElement] = useState<BlockComponent | null>(null);
-  useEffect(() => {
-    if (!blockId) {
-      return;
-    }
-    let canceled = false;
-    const start = Date.now();
-    function run() {
-      if (canceled || !containerRef.current || !blockId) {
-        return;
-      }
-      const element = findBlockElementById(containerRef.current, blockId);
-      if (element) {
-        setBlockElement(element);
-      } else if (Date.now() - start < timeout) {
-        setTimeout(run, 100);
-      }
-    }
-    run();
-    return () => {
-      canceled = true;
-    };
-  }, [blockId, containerRef, timeout]);
-  return blockElement;
-};
-
 export const BlocksuiteEditorContainer = forwardRef<
  AffineEditorContainer,
  BlocksuiteEditorContainerProps
 >(function AffineEditorContainer(
-  { page, mode, className, style, defaultSelectedBlockId, shared },
+  { page, mode, className, style, shared, blockIds, elementIds },
  ref
 ) {
  const scrolledRef = useRef(false);
-  const hashChangedRef = useRef(false);
  const rootRef = useRef<HTMLDivElement>(null);
  const docRef = useRef<PageEditor>(null);
  const edgelessRef = useRef<EdgelessEditor>(null);
+  const [anchor, setAnchor] = useState<string | null>(null);

  const slots: BlocksuiteEditorContainerRef['slots'] = useMemo(() => {
    return {
-      docLinkClicked: new Slot(),
+      docLinkClicked: new Slot<ReferenceInfo>(),
      editorModeSwitched: new Slot(),
      docUpdated: new Slot(),
      tagClicked: new Slot(),
    };
  }, []);

+  useEffect(() => {
+    if (mode === DocMode.Edgeless && elementIds?.length) {
+      setAnchor(elementIds[0]);
+    } else if (blockIds?.length) {
+      setAnchor(blockIds[0]);
+    }
+  }, [blockIds, elementIds, mode]);
+
  // forward the slot to the webcomponent
  useLayoutEffect(() => {
    requestAnimationFrame(() => {
@@ -209,36 +177,22 @@ export const BlocksuiteEditorContainer = forwardRef<
    }
  }, [affineEditorContainerProxy, ref]);

-  const blockElement = useBlockElementById(rootRef, defaultSelectedBlockId);
+  // `scrolledRef` should be updated if blockElement is changed
+  useEffect(() => {
+    scrolledRef.current = false;
+  }, [anchor]);

  useEffect(() => {
+    if (!anchor) return;
+
    let canceled = false;
-    const handleScrollToBlock = (blockElement: BlockComponent) => {
-      if (!mode || !blockElement) {
-        return;
-      }
-      blockElement.scrollIntoView({
-        behavior: 'instant',
-        block: 'center',
-      });
-      const selectManager = affineEditorContainerProxy.host?.selection;
-      if (!blockElement.path.length || !selectManager) {
-        return;
-      }
-      const newSelection = selectManager.create('block', {
-        blockId: blockElement.blockId,
-      });
-      selectManager.set([newSelection]);
-    };
    affineEditorContainerProxy.updateComplete
      .then(() => {
-        if (
-          blockElement &&
-          !scrolledRef.current &&
-          !canceled &&
-          !hashChangedRef.current
-        ) {
-          handleScrollToBlock(blockElement);
+        if (!scrolledRef.current && !canceled) {
+          const std = affineEditorContainerProxy.host?.std;
+          if (std) {
+            scrollAnchoring(std, mode, anchor);
+          }
          scrolledRef.current = true;
        }
      })
@@ -246,7 +200,7 @@ export const BlocksuiteEditorContainer = forwardRef<
    return () => {
      canceled = true;
    };
-  }, [blockElement, affineEditorContainerProxy, mode]);
+  }, [anchor, affineEditorContainerProxy, mode]);

  return (
    <div
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx
@@ -1,4 +1,5 @@
 import { EditorLoading } from '@affine/component/page-detail-skeleton';
+import type { DocMode } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Doc } from '@blocksuite/store';
@@ -22,13 +23,14 @@ export type ErrorBoundaryProps = {

 export type EditorProps = {
  page: Doc;
-  mode: 'page' | 'edgeless';
+  mode: DocMode;
  shared?: boolean;
-  defaultSelectedBlockId?: string;
  // on Editor instance instantiated
  onLoadEditor?: (editor: AffineEditorContainer) => () => void;
  style?: CSSProperties;
  className?: string;
+  blockIds?: string[];
+  elementIds?: string[];
 };

 function usePageRoot(page: Doc) {
@@ -59,10 +61,11 @@ const BlockSuiteEditorImpl = forwardRef<AffineEditorContainer, EditorProps>(
      mode,
      page,
      className,
-      defaultSelectedBlockId,
      onLoadEditor,
      shared,
      style,
+      blockIds,
+      elementIds,
    },
    ref
  ) {
@@ -113,7 +116,8 @@ const BlockSuiteEditorImpl = forwardRef<AffineEditorContainer, EditorProps>(
        ref={onRefChange}
        className={className}
        style={style}
-        defaultSelectedBlockId={defaultSelectedBlockId}
+        blockIds={blockIds}
+        elementIds={elementIds}
      />
    );
  }
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
@@ -7,7 +7,7 @@ import { useJournalInfoHelper } from '@affine/core/hooks/use-journal';
 import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { PeekViewService } from '@affine/core/modules/peek-view';
 import { WorkbenchService } from '@affine/core/modules/workbench';
-import type { DocMode } from '@blocksuite/blocks';
+import { DocMode } from '@blocksuite/blocks';
 import { DocTitle, EdgelessEditor, PageEditor } from '@blocksuite/presets';
 import type { Doc } from '@blocksuite/store';
 import {
@@ -73,13 +73,26 @@ const usePatchSpecs = (page: Doc, shared: boolean, mode: DocMode) => {
  const framework = useFramework();
  const referenceRenderer: ReferenceReactRenderer = useMemo(() => {
    return function customReference(reference) {
-      const pageId = reference.delta.attributes?.reference?.pageId;
+      const data = reference.delta.attributes?.reference;
+      if (!data) return <span />;
+
+      const pageId = data.pageId;
      if (!pageId) return <span />;
+
+      const isSameDoc = pageId === page.id;
+
      return (
-        <AffinePageReference docCollection={page.collection} pageId={pageId} />
+        <AffinePageReference
+          docCollection={page.collection}
+          pageId={pageId}
+          mode={mode}
+          params={data.params}
+          std={reference.std}
+          isSameDoc={isSameDoc}
+        />
      );
    };
-  }, [page.collection]);
+  }, [mode, page.collection, page.id]);

  const specs = useMemo(() => {
    return mode === 'edgeless'
@@ -89,20 +102,19 @@ const usePatchSpecs = (page: Doc, shared: boolean, mode: DocMode) => {

  const confirmModal = useConfirmModal();
  const patchedSpecs = useMemo(() => {
-    let patched = patchReferenceRenderer(specs, reactToLit, referenceRenderer);
-    patched = patchNotificationService(
-      patchReferenceRenderer(patched, reactToLit, referenceRenderer),
-      confirmModal
+    let patched = specs.concat(
+      patchReferenceRenderer(reactToLit, referenceRenderer)
    );
-    patched = patchPeekViewService(patched, peekViewService);
-    patched = patchEdgelessClipboard(patched);
+    patched = patched.concat(patchNotificationService(confirmModal));
+    patched = patched.concat(patchPeekViewService(peekViewService));
+    patched = patched.concat(patchEdgelessClipboard());
    if (!page.readonly) {
-      patched = patchQuickSearchService(patched, framework);
+      patched = patched.concat(patchQuickSearchService(framework));
    }
    if (shared) {
-      patched = patchForSharedPage(patched);
+      patched = patched.concat(patchForSharedPage());
    }
-    patched = patchDocModeService(patched, docService, docsService);
+    patched = patched.concat(patchDocModeService(docService, docsService));
    return patched;
  }, [
    confirmModal,
@@ -179,7 +191,7 @@ export const BlocksuiteDocEditor = forwardRef<
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  const [specs, portals] = usePatchSpecs(page, !!shared, 'page');
+  const [specs, portals] = usePatchSpecs(page, !!shared, DocMode.Page);

  const settings = useLiveData(editorSettingService.editorSetting.settings$);

@@ -219,7 +231,7 @@ export const BlocksuiteEdgelessEditor = forwardRef<
  EdgelessEditor,
  BlocksuiteEditorProps
 >(function BlocksuiteEdgelessEditor({ page, shared }, ref) {
-  const [specs, portals] = usePatchSpecs(page, !!shared, 'edgeless');
+  const [specs, portals] = usePatchSpecs(page, !!shared, DocMode.Edgeless);
  const editorRef = useRef<EdgelessEditor | null>(null);

  const onDocRef = useCallback(
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/common.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/common.ts
@@ -3,7 +3,7 @@ import {
  AIImageBlockSpec,
  AIParagraphBlockSpec,
 } from '@affine/core/blocksuite/presets/ai';
-import type { BlockSpec } from '@blocksuite/block-std';
+import type { ExtensionType } from '@blocksuite/block-std';
 import {
  BookmarkBlockSpec,
  DatabaseBlockSpec,
@@ -17,15 +17,12 @@ import {
  EmbedSyncedDocBlockSpec,
  EmbedYoutubeBlockSpec,
  ListBlockSpec,
-  NoteBlockSpec,
 } from '@blocksuite/blocks';
-import { AIChatBlockSpec, EdgelessAIChatBlockSpec } from '@blocksuite/presets';

 import { CustomAttachmentBlockSpec } from './custom/attachment-block';

-export const CommonBlockSpecs: BlockSpec[] = [
+export const CommonBlockSpecs: ExtensionType[] = [
  ListBlockSpec,
-  NoteBlockSpec,
  DatabaseBlockSpec,
  DataViewBlockSpec,
  DividerBlockSpec,
@@ -42,6 +39,4 @@ export const CommonBlockSpecs: BlockSpec[] = [
  AICodeBlockSpec,
  AIImageBlockSpec,
  AIParagraphBlockSpec,
-  AIChatBlockSpec,
-  EdgelessAIChatBlockSpec,
-];
+].flat();
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/attachment-block.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/attachment-block.ts
@@ -1,4 +1,9 @@
-import type { BlockSpec } from '@blocksuite/block-std';
+import {
+  BlockFlavourIdentifier,
+  BlockServiceIdentifier,
+  type ExtensionType,
+  StdIdentifier,
+} from '@blocksuite/block-std';
 import {
  AttachmentBlockService,
  AttachmentBlockSpec,
@@ -14,7 +19,15 @@ class CustomAttachmentBlockService extends AttachmentBlockService {
  }
 }

-export const CustomAttachmentBlockSpec: BlockSpec = {
+export const CustomAttachmentBlockSpec: ExtensionType[] = [
  ...AttachmentBlockSpec,
-  service: CustomAttachmentBlockService,
-};
+  {
+    setup: di => {
+      di.override(
+        BlockServiceIdentifier('affine:attachment'),
+        CustomAttachmentBlockService,
+        [StdIdentifier, BlockFlavourIdentifier('affine:attachment')]
+      );
+    },
+  },
+];
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts
@@ -3,12 +3,14 @@ import {
  AIPageRootBlockSpec,
 } from '@affine/core/blocksuite/presets/ai';
 import { mixpanel } from '@affine/core/mixpanel';
-import type {
-  EdgelessRootBlockSpecType,
-  PageRootBlockSpecType,
-  RootService,
-  TelemetryEventMap,
-} from '@blocksuite/blocks';
+import {
+  BlockFlavourIdentifier,
+  BlockServiceIdentifier,
+  ConfigExtension,
+  type ExtensionType,
+  StdIdentifier,
+} from '@blocksuite/block-std';
+import type { RootService, TelemetryEventMap } from '@blocksuite/blocks';
 import {
  AffineCanvasTextFonts,
  EdgelessRootService,
@@ -31,6 +33,7 @@ function customLoadFonts(service: RootService): void {
  }
 }

+// TODO: make load fonts and telemetry service as BS extension
 function withAffineRootService(Service: typeof PageRootService) {
  return class extends Service {
    override loadFonts(): void {
@@ -50,24 +53,40 @@ function withAffineRootService(Service: typeof PageRootService) {

 export function createPageRootBlockSpec(
  framework: FrameworkProvider
-): PageRootBlockSpecType {
-  return {
+): ExtensionType[] {
+  return [
    ...AIPageRootBlockSpec,
-    service: withAffineRootService(PageRootService),
-    config: {
-      linkedWidget: createLinkedWidgetConfig(framework),
+    {
+      setup: di => {
+        di.override(
+          BlockServiceIdentifier('affine:page'),
+          withAffineRootService(PageRootService),
+          [StdIdentifier, BlockFlavourIdentifier('affine:page')]
+        );
+      },
    },
-  };
+    ConfigExtension('affine:page', {
+      linkedWidget: createLinkedWidgetConfig(framework),
+    }),
+  ];
 }

 export function createEdgelessRootBlockSpec(
  framework: FrameworkProvider
-): EdgelessRootBlockSpecType {
-  return {
+): ExtensionType[] {
+  return [
    ...AIEdgelessRootBlockSpec,
-    service: withAffineRootService(EdgelessRootService as never),
-    config: {
-      linkedWidget: createLinkedWidgetConfig(framework),
+    {
+      setup: di => {
+        di.override(
+          BlockServiceIdentifier('affine:page'),
+          withAffineRootService(EdgelessRootService as never),
+          [StdIdentifier, BlockFlavourIdentifier('affine:page')]
+        );
+      },
    },
-  };
+    ConfigExtension('affine:page', {
+      linkedWidget: createLinkedWidgetConfig(framework),
+    }),
+  ];
 }
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx
@@ -20,20 +20,31 @@ import {
  RecentDocsQuickSearchSession,
 } from '@affine/core/modules/quicksearch';
 import { DebugLogger } from '@affine/debug';
-import type { BlockSpec, WidgetComponent } from '@blocksuite/block-std';
 import {
-  type AffineReference,
+  type BlockService,
+  BlockViewIdentifier,
+  type ExtensionType,
+  type WidgetComponent,
+} from '@blocksuite/block-std';
+import { BlockServiceWatcher } from '@blocksuite/block-std';
+import type {
+  AffineReference,
+  DatabaseBlockService,
+  ListBlockService,
+  ParagraphBlockService,
+  RootService,
+} from '@blocksuite/blocks';
+import {
  AffineSlashMenuWidget,
+  DocMode,
+  DocModeProvider,
  EdgelessRootBlockComponent,
  EmbedLinkedDocBlockComponent,
-  type ParagraphBlockService,
-  type RootService,
 } from '@blocksuite/blocks';
 import { LinkIcon } from '@blocksuite/icons/rc';
 import { AIChatBlockSchema } from '@blocksuite/presets';
 import type { BlockSnapshot } from '@blocksuite/store';
 import {
-  type DocMode,
  type DocService,
  DocsService,
  type FrameworkProvider,
@@ -48,84 +59,62 @@ export type ReferenceReactRenderer = (

 const logger = new DebugLogger('affine::spec-patchers');

-function patchSpecService<Spec extends BlockSpec>(
-  spec: Spec,
-  onMounted: (
-    service: Spec extends BlockSpec<any, infer BlockService>
-      ? BlockService
-      : never
-  ) => (() => void) | void,
+function patchSpecService<Service extends BlockService = BlockService>(
+  flavour: string,
+  onMounted: (service: Service) => (() => void) | void,
  onWidgetConnected?: (component: WidgetComponent) => void
 ) {
-  const oldSetup = spec.setup;
-  spec.setup = (slots, disposableGroup) => {
-    oldSetup?.(slots, disposableGroup);
-    disposableGroup.add(
-      slots.mounted.on(({ service }) => {
-        const disposable = onMounted(service as any);
-        if (disposable) {
-          disposableGroup.add(disposable);
-        }
-      })
-    );
+  class TempServiceWatcher extends BlockServiceWatcher {
+    static override readonly flavour = flavour;
+    override mounted() {
+      super.mounted();
+      const disposable = onMounted(this.blockService as any);
+      const disposableGroup = this.blockService.disposables;
+      if (disposable) {
+        disposableGroup.add(disposable);
+      }

-    onWidgetConnected &&
-      disposableGroup.add(
-        slots.widgetConnected.on(({ component }) => {
-          onWidgetConnected(component);
-        })
-      );
-  };
-  return spec;
+      if (onWidgetConnected) {
+        disposableGroup.add(
+          this.blockService.specSlots.widgetConnected.on(({ component }) => {
+            onWidgetConnected(component);
+          })
+        );
+      }
+    }
+  }
+  return TempServiceWatcher;
 }

 /**
 * Patch the block specs with custom renderers.
 */
 export function patchReferenceRenderer(
-  specs: BlockSpec[],
  reactToLit: (element: ElementOrFactory) => TemplateResult,
  reactRenderer: ReferenceReactRenderer
-) {
+): ExtensionType[] {
  const litRenderer = (reference: AffineReference) => {
    const node = reactRenderer(reference);
    return reactToLit(node);
  };

-  return specs.map(spec => {
-    if (
-      ['affine:paragraph', 'affine:list', 'affine:database'].includes(
-        spec.schema.model.flavour
-      )
-    ) {
-      spec = patchSpecService(
-        spec as BlockSpec<string, ParagraphBlockService>,
-        service => {
-          service.referenceNodeConfig.setCustomContent(litRenderer);
-          return () => {
-            service.referenceNodeConfig.setCustomContent(null);
-          };
-        }
-      );
-    }
-
-    return spec;
+  return ['affine:paragraph', 'affine:list', 'affine:database'].map(flavour => {
+    return patchSpecService<
+      ParagraphBlockService | ListBlockService | DatabaseBlockService
+    >(flavour, service => {
+      service.referenceNodeConfig.setCustomContent(litRenderer);
+      return () => {
+        service.referenceNodeConfig.setCustomContent(null);
+      };
+    });
  });
 }

-export function patchNotificationService(
-  specs: BlockSpec[],
-  { closeConfirmModal, openConfirmModal }: ReturnType<typeof useConfirmModal>
-) {
-  const rootSpec = specs.find(
-    spec => spec.schema.model.flavour === 'affine:page'
-  ) as BlockSpec<string, RootService>;
-
-  if (!rootSpec) {
-    return specs;
-  }
-
-  patchSpecService(rootSpec, service => {
+export function patchNotificationService({
+  closeConfirmModal,
+  openConfirmModal,
+}: ReturnType<typeof useConfirmModal>) {
+  return patchSpecService<RootService>('affine:page', service => {
    service.notificationService = {
      confirm: async ({ title, message, confirmText, cancelText, abort }) => {
        return new Promise<boolean>(resolve => {
@@ -234,22 +223,10 @@ export function patchNotificationService(
      },
    };
  });
-  return specs;
 }

-export function patchPeekViewService(
-  specs: BlockSpec[],
-  service: PeekViewService
-) {
-  const rootSpec = specs.find(
-    spec => spec.schema.model.flavour === 'affine:page'
-  ) as BlockSpec<string, RootService>;
-
-  if (!rootSpec) {
-    return specs;
-  }
-
-  patchSpecService(rootSpec, pageService => {
+export function patchPeekViewService(service: PeekViewService) {
+  return patchSpecService<RootService>('affine:page', pageService => {
    pageService.peekViewService = {
      peek: (target: ActivePeekView['target'], template?: TemplateResult) => {
        logger.debug('center peek', target, template);
@@ -257,75 +234,55 @@ export function patchPeekViewService(
      },
    };
  });
-
-  return specs;
 }

 export function patchDocModeService(
-  specs: BlockSpec[],
  docService: DocService,
  docsService: DocsService
-) {
-  const rootSpec = specs.find(
-    spec => spec.schema.model.flavour === 'affine:page'
-  ) as BlockSpec<string, RootService>;
-
-  if (!rootSpec) {
-    return specs;
+): ExtensionType {
+  const DEFAULT_MODE = 'page';
+  class AffineDocModeService implements DocModeProvider {
+    setMode = (mode: DocMode, id?: string) => {
+      if (id) {
+        docsService.list.setPrimaryMode(id, mode);
+      } else {
+        docService.doc.setPrimaryMode(mode);
+      }
+    };
+    getMode = (id?: string) => {
+      const mode = id
+        ? docsService.list.getPrimaryMode(id)
+        : docService.doc.getPrimaryMode();
+      return (mode || DEFAULT_MODE) as DocMode;
+    };
+    toggleMode = (id?: string) => {
+      const mode = id
+        ? docsService.list.togglePrimaryMode(id)
+        : docService.doc.togglePrimaryMode();
+      return (mode || DEFAULT_MODE) as DocMode;
+    };
+    onModeChange = (handler: (mode: DocMode) => void, id?: string) => {
+      // eslint-disable-next-line rxjs/finnish
+      const mode$ = id
+        ? docsService.list.primaryMode$(id)
+        : docService.doc.primaryMode$;
+      const sub = mode$.subscribe(m => handler((m || DEFAULT_MODE) as DocMode));
+      return {
+        dispose: sub.unsubscribe,
+      };
+    };
  }

-  patchSpecService(rootSpec, pageService => {
-    const DEFAULT_MODE = 'page';
-    pageService.docModeService = {
-      setMode: (mode: DocMode, id?: string) => {
-        if (id) {
-          docsService.list.setPrimaryMode(id, mode);
-        } else {
-          docService.doc.setPrimaryMode(mode);
-        }
-      },
-      getMode: (id?: string) => {
-        const mode = id
-          ? docsService.list.getPrimaryMode(id)
-          : docService.doc.getPrimaryMode();
-        return mode || DEFAULT_MODE;
-      },
-      toggleMode: (id?: string) => {
-        const mode = id
-          ? docsService.list.togglePrimaryMode(id)
-          : docService.doc.togglePrimaryMode();
-        return mode || DEFAULT_MODE;
-      },
-      onModeChange: (handler: (mode: DocMode) => void, id?: string) => {
-        // eslint-disable-next-line rxjs/finnish
-        const mode$ = id
-          ? docsService.list.primaryMode$(id)
-          : docService.doc.primaryMode$;
-        const sub = mode$.subscribe(m => handler(m || DEFAULT_MODE));
-        return {
-          dispose: sub.unsubscribe,
-        };
-      },
-    };
-  });
+  const docModeExtension: ExtensionType = {
+    setup: di => [di.override(DocModeProvider, AffineDocModeService)],
+  };

-  return specs;
+  return docModeExtension;
 }

-export function patchQuickSearchService(
-  specs: BlockSpec[],
-  framework: FrameworkProvider
-) {
-  const rootSpec = specs.find(
-    spec => spec.schema.model.flavour === 'affine:page'
-  ) as BlockSpec<string, RootService>;
-
-  if (!rootSpec) {
-    return specs;
-  }
-
-  patchSpecService(
-    rootSpec,
+export function patchQuickSearchService(framework: FrameworkProvider) {
+  return patchSpecService<RootService>(
+    'affine:page',
    pageService => {
      pageService.quickSearchService = {
        async searchDoc(options) {
@@ -409,8 +366,8 @@ export function patchQuickSearchService(
                    const docsService = framework.get(DocsService);
                    const mode =
                      result.id === 'creation:create-edgeless'
-                        ? 'edgeless'
-                        : 'page';
+                        ? DocMode.Edgeless
+                        : DocMode.Page;
                    const newDoc = docsService.createDoc({
                      primaryMode: mode,
                      title: result.payload.title,
@@ -490,63 +447,56 @@ export function patchQuickSearchService(
      }
    }
  );
-
-  return specs;
 }

-export function patchEdgelessClipboard(specs: BlockSpec[]) {
-  const rootSpec = specs.find(
-    spec => spec.schema.model.flavour === 'affine:page'
-  ) as BlockSpec<string, RootService>;
+export function patchEdgelessClipboard() {
+  class EdgelessClipboardWatcher extends BlockServiceWatcher {
+    static override readonly flavour = 'affine:page';

-  if (!rootSpec) {
-    return specs;
-  }
-
-  const oldSetup = rootSpec.setup;
-  rootSpec.setup = (slots, disposableGroup) => {
-    oldSetup?.(slots, disposableGroup);
-    disposableGroup.add(
-      slots.viewConnected.on(view => {
-        const component = view.component;
-        if (component instanceof EdgelessRootBlockComponent) {
-          const AIChatBlockFlavour = AIChatBlockSchema.model.flavour;
-          const createFunc = (blocks: BlockSnapshot[]) => {
-            const blockIds = blocks.map(({ props }) => {
-              const {
-                xywh,
-                scale,
-                messages,
-                sessionId,
-                rootDocId,
-                rootWorkspaceId,
-              } = props;
-              const blockId = component.service.addBlock(
-                AIChatBlockFlavour,
-                {
+    override mounted() {
+      super.mounted();
+      this.blockService.disposables.add(
+        this.blockService.specSlots.viewConnected.on(view => {
+          const { component } = view;
+          if (component instanceof EdgelessRootBlockComponent) {
+            const AIChatBlockFlavour = AIChatBlockSchema.model.flavour;
+            const createFunc = (blocks: BlockSnapshot[]) => {
+              const blockIds = blocks.map(({ props }) => {
+                const {
                  xywh,
                  scale,
                  messages,
                  sessionId,
                  rootDocId,
                  rootWorkspaceId,
-                },
-                component.surface.model.id
-              );
-              return blockId;
-            });
-            return blockIds;
-          };
-          component.clipboardController.registerBlock(
-            AIChatBlockFlavour,
-            createFunc
-          );
-        }
-      })
-    );
-  };
+                } = props;
+                const blockId = component.service.addBlock(
+                  AIChatBlockFlavour,
+                  {
+                    xywh,
+                    scale,
+                    messages,
+                    sessionId,
+                    rootDocId,
+                    rootWorkspaceId,
+                  },
+                  component.surface.model.id
+                );
+                return blockId;
+              });
+              return blockIds;
+            };
+            component.clipboardController.registerBlock(
+              AIChatBlockFlavour,
+              createFunc
+            );
+          }
+        })
+      );
+    }
+  }

-  return specs;
+  return EdgelessClipboardWatcher;
 }

@customElement('affine-linked-doc-ref-block')
@@ -557,22 +507,18 @@ export class LinkedDocBlockComponent extends EmbedLinkedDocBlockComponent {
  }
 }

-export function patchForSharedPage(specs: BlockSpec[]) {
-  return specs.map(spec => {
-    const linkedDocNames = [
-      'affine:embed-linked-doc',
-      'affine:embed-synced-doc',
-    ];
-
-    if (linkedDocNames.includes(spec.schema.model.flavour)) {
-      spec = {
-        ...spec,
-        view: {
-          component: literal`affine-linked-doc-ref-block`,
-          widgets: {},
-        },
-      };
-    }
-    return spec;
-  });
+export function patchForSharedPage() {
+  const extension: ExtensionType = {
+    setup: di => {
+      di.override(
+        BlockViewIdentifier('affine:embed-linked-doc'),
+        () => literal`affine-linked-doc-ref-block`
+      );
+      di.override(
+        BlockViewIdentifier('affine:embed-synced-doc'),
+        () => literal`affine-linked-doc-ref-block`
+      );
+    },
+  };
+  return extension;
 }
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/edgeless.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/edgeless.ts
@@ -1,4 +1,4 @@
-import type { BlockSpec } from '@blocksuite/block-std';
+import type { ExtensionType } from '@blocksuite/block-std';
 import {
  EdgelessNoteBlockSpec,
  EdgelessSurfaceBlockSpec,
@@ -6,6 +6,7 @@ import {
  EdgelessTextBlockSpec,
  FrameBlockSpec,
 } from '@blocksuite/blocks';
+import { EdgelessAIChatBlockSpec } from '@blocksuite/presets';
 import type { FrameworkProvider } from '@toeverything/infra';

 import { CommonBlockSpecs } from './common';
@@ -13,7 +14,7 @@ import { createEdgelessRootBlockSpec } from './custom/root-block';

 export function createEdgelessModeSpecs(
  framework: FrameworkProvider
-): BlockSpec[] {
+): ExtensionType[] {
  return [
    ...CommonBlockSpecs,
    EdgelessSurfaceBlockSpec,
@@ -21,7 +22,8 @@ export function createEdgelessModeSpecs(
    FrameBlockSpec,
    EdgelessTextBlockSpec,
    EdgelessNoteBlockSpec,
+    EdgelessAIChatBlockSpec,
    // special
    createEdgelessRootBlockSpec(framework),
-  ];
+  ].flat();
 }
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/page.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/page.ts
@@ -1,19 +1,25 @@
-import type { BlockSpec } from '@blocksuite/block-std';
+import type { ExtensionType } from '@blocksuite/block-std';
 import {
+  NoteBlockSpec,
  PageSurfaceBlockSpec,
  PageSurfaceRefBlockSpec,
 } from '@blocksuite/blocks';
+import { AIChatBlockSpec } from '@blocksuite/presets';
 import { type FrameworkProvider } from '@toeverything/infra';

 import { CommonBlockSpecs } from './common';
 import { createPageRootBlockSpec } from './custom/root-block';

-export function createPageModeSpecs(framework: FrameworkProvider): BlockSpec[] {
+export function createPageModeSpecs(
+  framework: FrameworkProvider
+): ExtensionType[] {
  return [
    ...CommonBlockSpecs,
    PageSurfaceBlockSpec,
    PageSurfaceRefBlockSpec,
+    NoteBlockSpec,
+    AIChatBlockSpec,
    // special
    createPageRootBlockSpec(framework),
-  ];
+  ].flat();
 }
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/preview.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/preview.ts
@@ -1,10 +1,10 @@
-import type { BlockSpec } from '@blocksuite/block-std';
+import type { ExtensionType } from '@blocksuite/block-std';
 import { SpecProvider } from '@blocksuite/blocks';
-import { AIChatBlockSpec, EdgelessAIChatBlockSpec } from '@blocksuite/presets';
+import { EdgelessAIChatBlockSpec } from '@blocksuite/presets';

-const CustomSpecs: BlockSpec[] = [AIChatBlockSpec, EdgelessAIChatBlockSpec];
+const CustomSpecs: ExtensionType[] = [EdgelessAIChatBlockSpec].flat();

-function patchPreviewSpec(id: string, specs: BlockSpec[]) {
+function patchPreviewSpec(id: string, specs: ExtensionType[]) {
  const specProvider = SpecProvider.getInstance();
  specProvider.extendSpec(id, specs);
 }
--- a/packages/frontend/core/src/components/blocksuite/block-suite-header/present/use-present.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-header/present/use-present.ts
@@ -14,7 +14,7 @@ export const usePresent = () => {

      // TODO(@catsjuice): use surfaceService subAtom
      const enterOrLeavePresentationMode = () => {
-        const edgelessRootService = editorHost.spec.getService(
+        const edgelessRootService = editorHost.std.getService(
          'affine:page'
        ) as EdgelessRootService;

--- a/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-mode-switch/index.tsx
@@ -3,8 +3,9 @@ import { registerAffineCommand } from '@affine/core/commands';
 import { track } from '@affine/core/mixpanel';
 import { EditorService } from '@affine/core/modules/editor';
 import { useI18n } from '@affine/i18n';
+import { DocMode } from '@blocksuite/blocks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons/rc';
-import { type DocMode, useLiveData, useService } from '@toeverything/infra';
+import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useEffect, useMemo } from 'react';

 import { switchItem } from './style.css';
@@ -38,16 +39,16 @@ export const EditorModeSwitch = () => {

  const togglePage = useCallback(() => {
    if (currentMode === 'page' || isSharedMode || trash) return;
-    editor.setMode('page');
-    editor.doc.setPrimaryMode('page');
+    editor.setMode(DocMode.Page);
+    editor.doc.setPrimaryMode(DocMode.Page);
    toast(t['com.affine.toastMessage.pageMode']());
    track.$.header.actions.switchPageMode({ mode: 'page' });
  }, [currentMode, editor, isSharedMode, t, trash]);

  const toggleEdgeless = useCallback(() => {
    if (currentMode === 'edgeless' || isSharedMode || trash) return;
-    editor.setMode('edgeless');
-    editor.doc.setPrimaryMode('edgeless');
+    editor.setMode(DocMode.Edgeless);
+    editor.doc.setPrimaryMode(DocMode.Edgeless);
    toast(t['com.affine.toastMessage.edgelessMode']());
    track.$.header.actions.switchPageMode({ mode: 'edgeless' });
  }, [currentMode, editor, isSharedMode, t, trash]);
@@ -78,7 +79,10 @@ export const EditorModeSwitch = () => {
        binding: 'Alt+KeyS',
        capture: true,
      },
-      run: () => onModeChange(currentMode === 'edgeless' ? 'page' : 'edgeless'),
+      run: () =>
+        onModeChange(
+          currentMode === 'edgeless' ? DocMode.Page : DocMode.Edgeless
+        ),
    });
  }, [currentMode, isSharedMode, onModeChange, t, trash]);

@@ -93,8 +97,8 @@ export const EditorModeSwitch = () => {
        <PureEditorModeSwitch
          mode={currentMode}
          setMode={onModeChange}
-          hidePage={shouldHide('page')}
-          hideEdgeless={shouldHide('edgeless')}
+          hidePage={shouldHide(DocMode.Page)}
+          hideEdgeless={shouldHide(DocMode.Edgeless)}
        />
      </div>
    </Tooltip>
--- a/packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-page-list/utils.tsx
@@ -2,8 +2,8 @@ import { toast } from '@affine/component';
 import { useDocCollectionHelper } from '@affine/core/hooks/use-block-suite-workspace-helper';
 import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { WorkbenchService } from '@affine/core/modules/workbench';
+import type { DocMode } from '@blocksuite/blocks';
 import {
-  type DocMode,
  DocsService,
  initEmptyPage,
  useLiveData,
@@ -29,7 +29,7 @@ export const usePageHelper = (docCollection: DocCollection) => {
      const page = createDoc();
      initEmptyPage(page);
      const primaryMode = mode || settings.newDocDefaultMode;
-      docRecordList.doc$(page.id).value?.setPrimaryMode(primaryMode);
+      docRecordList.doc$(page.id).value?.setPrimaryMode(primaryMode as DocMode);
      if (open !== false)
        workbench.openDoc(page.id, {
          at: open === 'new-tab' ? 'new-tab' : 'active',
@@ -41,7 +41,7 @@ export const usePageHelper = (docCollection: DocCollection) => {

  const createEdgelessAndOpen = useCallback(
    (open?: boolean | 'new-tab') => {
-      return createPageAndOpen('edgeless', open);
+      return createPageAndOpen('edgeless' as DocMode, open);
    },
    [createPageAndOpen]
  );
--- a/packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx
+++ b/packages/frontend/core/src/components/cloud/share-header-right-item/index.tsx
@@ -1,5 +1,6 @@
 import { AuthService } from '@affine/core/modules/cloud';
-import { type DocMode, useLiveData, useService } from '@toeverything/infra';
+import type { DocMode } from '@blocksuite/blocks';
+import { useLiveData, useService } from '@toeverything/infra';

 import { PresentButton } from './present';
 import { SignIn } from './sign-in';
--- a/packages/frontend/core/src/components/page-detail-editor.tsx
+++ b/packages/frontend/core/src/components/page-detail-editor.tsx
@@ -1,15 +1,20 @@
 import './page-detail-editor.css';

 import { useDocCollectionPage } from '@affine/core/hooks/use-block-suite-workspace-page';
+import { ViewService } from '@affine/core/modules/workbench/services/view';
+import type { DocMode } from '@blocksuite/blocks';
 import { DisposableGroup } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Doc as BlockSuiteDoc, DocCollection } from '@blocksuite/store';
-import { type DocMode, useLiveData, useService } from '@toeverything/infra';
+import {
+  useLiveData,
+  useService,
+  useServiceOptional,
+} from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import clsx from 'clsx';
 import type { CSSProperties } from 'react';
 import { memo, Suspense, useCallback, useMemo } from 'react';
-import { useLocation } from 'react-router-dom';

 import { EditorService } from '../modules/editor';
 import {
@@ -37,14 +42,27 @@ export interface PageDetailEditorProps {
  onLoad?: OnLoadEditor;
 }

-function useRouterHash() {
-  return useLocation().hash.substring(1);
-}
-
 const PageDetailEditorMain = memo(function PageDetailEditorMain({
  page,
  onLoad,
 }: PageDetailEditorProps & { page: BlockSuiteDoc }) {
+  const viewService = useServiceOptional(ViewService);
+  const params = useLiveData(
+    viewService?.view.queryString$<{
+      mode?: string;
+      blockIds?: string[];
+      elementIds?: string[];
+    }>({
+      // Cannot handle single id situation correctly: `blockIds=xxx`
+      arrayFormat: 'none',
+      types: {
+        mode: 'string',
+        blockIds: value => (value.length ? value.split(',') : []),
+        elementIds: value => (value.length ? value.split(',') : []),
+      },
+    })
+  );
+
  const editor = useService(EditorService).editor;
  const mode = useLiveData(editor.mode$);

@@ -66,8 +84,6 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
      : fontStyle.value;
  }, [settings.customFontFamily, settings.fontFamily]);

-  const blockId = useRouterHash();
-
  const onLoadEditor = useCallback(
    (editor: AffineEditorContainer) => {
      // debug current detail editor
@@ -106,7 +122,8 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
      mode={mode}
      page={page}
      shared={isSharedMode}
-      defaultSelectedBlockId={blockId}
+      blockIds={params?.blockIds}
+      elementIds={params?.elementIds}
      onLoadEditor={onLoadEditor}
    />
  );
--- a/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx
+++ b/packages/frontend/core/src/components/page-list/docs/page-list-header.tsx
@@ -13,6 +13,7 @@ import { TagService } from '@affine/core/modules/tag';
 import { isNewTabTrigger } from '@affine/core/utils';
 import type { Collection } from '@affine/env/filter';
 import { useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/blocks';
 import {
  ArrowDownSmallIcon,
  SearchIcon,
@@ -79,7 +80,7 @@ export const PageListHeader = () => {
          createEdgeless(isNewTabTrigger(e) ? 'new-tab' : true)
        }
        onCreatePage={e =>
-          createPage('page', isNewTabTrigger(e) ? 'new-tab' : true)
+          createPage('page' as DocMode, isNewTabTrigger(e) ? 'new-tab' : true)
        }
        onCreateDoc={e =>
          createPage(undefined, isNewTabTrigger(e) ? 'new-tab' : true)
@@ -144,7 +145,10 @@ export const CollectionPageListHeader = ({
    [openConfirmModal, t, createAndAddDocument]
  );

-  const createPageModeDoc = useCallback(() => createPage('page'), [createPage]);
+  const createPageModeDoc = useCallback(
+    () => createPage('page' as DocMode),
+    [createPage]
+  );

  const onCreateEdgeless = useCallback(
    () => onConfirmAddDocument(createEdgeless),
--- a/packages/frontend/core/src/components/root-app-sidebar/index.tsx
+++ b/packages/frontend/core/src/components/root-app-sidebar/index.tsx
@@ -13,6 +13,7 @@ import { CMDKQuickSearchService } from '@affine/core/modules/quicksearch/service
 import { isNewTabTrigger } from '@affine/core/utils';
 import { events } from '@affine/electron-api';
 import { useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/blocks';
 import {
  AllDocsIcon,
  GithubIcon,
@@ -110,7 +111,7 @@ export const RootAppSidebar = (): ReactElement => {
  const onClickNewPage = useAsyncCallback(
    async (e?: MouseEvent) => {
      const page = pageHelper.createPage(
-        settings.newDocDefaultMode,
+        settings.newDocDefaultMode as DocMode,
        isNewTabTrigger(e) ? 'new-tab' : true
      );
      page.load();
--- a/packages/frontend/core/src/hooks/affine/use-block-suite-meta-helper.ts
+++ b/packages/frontend/core/src/hooks/affine/use-block-suite-meta-helper.ts
@@ -2,6 +2,7 @@ import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { useDocMetaHelper } from '@affine/core/hooks/use-block-suite-page-meta';
 import { useDocCollectionHelper } from '@affine/core/hooks/use-block-suite-workspace-helper';
 import { CollectionService } from '@affine/core/modules/collection';
+import type { DocMode } from '@blocksuite/blocks';
 import { DocsService, useService } from '@toeverything/infra';
 import { useCallback } from 'react';
 import { applyUpdate, encodeStateAsUpdate } from 'yjs';
@@ -102,7 +103,7 @@ export function useBlockSuiteMetaHelper(docCollection: DocCollection) {

      pageRecordList
        .doc$(newPage.id)
-        .value?.setPrimaryMode(currentPagePrimaryMode || 'page');
+        .value?.setPrimaryMode(currentPagePrimaryMode || ('page' as DocMode));
      setDocTitle(newPage.id, newPageTitle);
      openPageAfterDuplication && openPage(docCollection.id, newPage.id);
    },
--- a/packages/frontend/core/src/hooks/affine/use-export-page.ts
+++ b/packages/frontend/core/src/hooks/affine/use-export-page.ts
@@ -36,7 +36,7 @@ async function exportHandler({
  const editorRoot = document.querySelector('editor-host');
  let pageService: PageRootService | null = null;
  if (editorRoot) {
-    pageService = editorRoot.spec.getService<PageRootService>('affine:page');
+    pageService = editorRoot.std.getService<PageRootService>('affine:page');
  }
  track.$.sharePanel.$.export({
    type,
--- a/packages/frontend/core/src/hooks/affine/use-is-shared-page.tsx
+++ b/packages/frontend/core/src/hooks/affine/use-is-shared-page.tsx
@@ -7,8 +7,9 @@ import {
  revokePublicPageMutation,
 } from '@affine/graphql';
 import { type I18nKeys, useI18n } from '@affine/i18n';
+import { DocMode } from '@blocksuite/blocks';
 import { SingleSelectSelectSolidIcon } from '@blocksuite/icons/rc';
-import type { DocMode, Workspace } from '@toeverything/infra';
+import { type Workspace } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import { useCallback, useMemo } from 'react';

@@ -85,7 +86,9 @@ export function useIsSharedPage(
    const isPageShared = !!publicPage;

    const currentShareMode: DocMode =
-      publicPage?.mode === PublicPageMode.Edgeless ? 'edgeless' : 'page';
+      publicPage?.mode === PublicPageMode.Edgeless
+        ? DocMode.Edgeless
+        : DocMode.Page;

    return [isPageShared, currentShareMode];
  }, [data?.workspace.publicPages, pageId]);
@@ -210,7 +213,8 @@ export function usePublicPages(workspace: Workspace) {
    () =>
      maybeData?.workspace.publicPages.map(i => ({
        id: i.id,
-        mode: i.mode === PublicPageMode.Edgeless ? 'edgeless' : 'page',
+        mode:
+          i.mode === PublicPageMode.Edgeless ? DocMode.Edgeless : DocMode.Page,
      })) ?? [],
    [maybeData?.workspace.publicPages]
  );
--- a/packages/frontend/core/src/hooks/affine/use-share-url.ts
+++ b/packages/frontend/core/src/hooks/affine/use-share-url.ts
@@ -3,7 +3,7 @@ import { track } from '@affine/core/mixpanel';
 import { getAffineCloudBaseUrl } from '@affine/core/modules/cloud/services/fetch';
 import { useI18n } from '@affine/i18n';
 import type { BaseSelection } from '@blocksuite/block-std';
-import { type DocMode } from '@toeverything/infra';
+import type { DocMode } from '@blocksuite/blocks';
 import { useCallback } from 'react';

 import { useActiveBlocksuiteEditor } from '../use-block-suite-editor';
@@ -34,19 +34,18 @@ const generateUrl = ({

  try {
    const url = new URL(`${baseUrl}/workspace/${workspaceId}/${pageId}`);
+    const search = url.searchParams;
    if (shareMode) {
-      url.searchParams.append('mode', shareMode);
+      search.append('mode', shareMode);
    }
-    // TODO(@JimmFly): use query string to handle blockIds
    if (blockIds && blockIds.length > 0) {
-      // hash is used to store blockIds
-      url.hash = blockIds.join(',');
+      search.append('blockIds', blockIds.join(','));
    }
    if (elementIds && elementIds.length > 0) {
-      url.searchParams.append('element', elementIds.join(','));
+      search.append('elementIds', elementIds.join(','));
    }
    if (xywh) {
-      url.searchParams.append('xywh', xywh);
+      search.append('xywh', xywh);
    }
    return url.toString();
  } catch {
--- a/packages/frontend/core/src/hooks/use-navigate-helper.ts
+++ b/packages/frontend/core/src/hooks/use-navigate-helper.ts
@@ -1,4 +1,5 @@
 import type { WorkspaceSubPath } from '@affine/core/shared';
+import type { DocMode } from '@blocksuite/blocks';
 import { createContext, useCallback, useContext, useMemo } from 'react';
 import type { NavigateFunction, NavigateOptions } from 'react-router-dom';

@@ -40,10 +41,17 @@ export function useNavigateHelper() {
    (
      workspaceId: string,
      pageId: string,
-      blockId: string,
+      mode?: DocMode,
+      blockIds?: string[],
+      elementIds?: string[],
      logic: RouteLogic = RouteLogic.PUSH
    ) => {
-      return navigate(`/workspace/${workspaceId}/${pageId}#${blockId}`, {
+      const search = new URLSearchParams();
+      if (mode) search.append('mode', mode);
+      if (blockIds?.length) search.append('blockIds', blockIds.join(','));
+      if (elementIds?.length) search.append('elementIds', elementIds.join(','));
+      const query = search.size > 0 ? `?${search.toString()}` : '';
+      return navigate(`/workspace/${workspaceId}/${pageId}${query}`, {
        replace: logic === RouteLogic.REPLACE,
      });
    },
--- a/packages/frontend/core/src/layouts/workspace-layout.tsx
+++ b/packages/frontend/core/src/layouts/workspace-layout.tsx
@@ -4,9 +4,8 @@ import {
  resolveGlobalLoadingEventAtom,
 } from '@affine/component/global-loading';
 import { useI18n } from '@affine/i18n';
-import { ZipTransformer } from '@blocksuite/blocks';
+import { type DocMode, ZipTransformer } from '@blocksuite/blocks';
 import {
-  type DocMode,
  DocsService,
  effect,
  fromPromise,
--- a/packages/frontend/core/src/modules/editor/entities/editor.ts
+++ b/packages/frontend/core/src/modules/editor/entities/editor.ts
@@ -1,4 +1,4 @@
-import type { DocMode } from '@blocksuite/blocks';
+import { DocMode } from '@blocksuite/blocks';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { DocService, WorkspaceService } from '@toeverything/infra';
 import { Entity, LiveData } from '@toeverything/infra';
@@ -18,7 +18,9 @@ export class Editor extends Entity<{ defaultMode: DocMode }> {
  readonly editorContainer$ = new LiveData<AffineEditorContainer | null>(null);

  toggleMode() {
-    this.mode$.next(this.mode$.value === 'edgeless' ? 'page' : 'edgeless');
+    this.mode$.next(
+      this.mode$.value === 'edgeless' ? DocMode.Page : DocMode.Edgeless
+    );
  }

  setMode(mode: DocMode) {
--- a/packages/frontend/core/src/modules/navigation/tests/utils.spec.ts
+++ b/packages/frontend/core/src/modules/navigation/tests/utils.spec.ts
@@ -25,19 +25,19 @@ afterEach(() => {
 const testCases: [string, ReturnType<typeof resolveLinkToDoc>][] = [
  ['http://example.com/', null],
  [
-    '/workspace/48__RTCSwASvWZxyAk3Jw/-Uge-K6SYcAbcNYfQ5U-j#xxxx',
+    '/workspace/48__RTCSwASvWZxyAk3Jw/-Uge-K6SYcAbcNYfQ5U-j?blockIds=xxxx',
    {
      workspaceId: '48__RTCSwASvWZxyAk3Jw',
      docId: '-Uge-K6SYcAbcNYfQ5U-j',
-      blockId: 'xxxx',
+      blockIds: ['xxxx'],
    },
  ],
  [
-    'http://affine.pro/workspace/48__RTCSwASvWZxyAk3Jw/-Uge-K6SYcAbcNYfQ5U-j#xxxx',
+    'http://affine.pro/workspace/48__RTCSwASvWZxyAk3Jw/-Uge-K6SYcAbcNYfQ5U-j?blockIds=xxxx',
    {
      workspaceId: '48__RTCSwASvWZxyAk3Jw',
      docId: '-Uge-K6SYcAbcNYfQ5U-j',
-      blockId: 'xxxx',
+      blockIds: ['xxxx'],
    },
  ],
  ['http://affine.pro/workspace/48__RTCSwASvWZxyAk3Jw/all', null],
@@ -45,19 +45,19 @@ const testCases: [string, ReturnType<typeof resolveLinkToDoc>][] = [
  ['http://affine.pro/workspace/48__RTCSwASvWZxyAk3Jw/tag', null],
  ['http://affine.pro/workspace/48__RTCSwASvWZxyAk3Jw/trash', null],
  [
-    'file//./workspace/48__RTCSwASvWZxyAk3Jw/-Uge-K6SYcAbcNYfQ5U-j#xxxx',
+    'file//./workspace/48__RTCSwASvWZxyAk3Jw/-Uge-K6SYcAbcNYfQ5U-j?blockIds=xxxx',
    {
      workspaceId: '48__RTCSwASvWZxyAk3Jw',
      docId: '-Uge-K6SYcAbcNYfQ5U-j',
-      blockId: 'xxxx',
+      blockIds: ['xxxx'],
    },
  ],
  [
-    'http//localhost:8000/workspace/48__RTCSwASvWZxyAk3Jw/-Uge-K6SYcAbcNYfQ5U-j#xxxx',
+    'http//localhost:8000/workspace/48__RTCSwASvWZxyAk3Jw/-Uge-K6SYcAbcNYfQ5U-j?blockIds=xxxx',
    {
      workspaceId: '48__RTCSwASvWZxyAk3Jw',
      docId: '-Uge-K6SYcAbcNYfQ5U-j',
-      blockId: 'xxxx',
+      blockIds: ['xxxx'],
    },
  ],
 ];
--- a/packages/frontend/core/src/modules/navigation/utils.ts
+++ b/packages/frontend/core/src/modules/navigation/utils.ts
@@ -1,3 +1,6 @@
+import type { DocMode } from '@blocksuite/blocks';
+import queryString from 'query-string';
+
 function maybeAffineOrigin(origin: string) {
  return (
    origin.startsWith('file://') ||
@@ -73,9 +76,23 @@ const isRouteModulePath = (
 export const resolveLinkToDoc = (href: string) => {
  const meta = resolveRouteLinkMeta(href);
  if (!meta || meta.moduleName !== 'doc') return null;
+
+  const params: {
+    mode?: DocMode;
+    blockIds?: string[];
+    elementIds?: string[];
+  } = queryString.parse(meta.location.search, {
+    arrayFormat: 'none',
+    types: {
+      mode: value => (value === 'edgeless' ? 'edgeless' : 'page') as DocMode,
+      blockIds: value => value.split(','),
+      elementIds: value => value.split(','),
+    },
+  });
+
  return {
    workspaceId: meta.workspaceId,
    docId: meta.docId,
-    blockId: meta.blockId,
+    ...params,
  };
 };
--- a/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts
+++ b/packages/frontend/core/src/modules/peek-view/entities/peek-view.ts
@@ -1,6 +1,7 @@
 import type { BlockComponent, EditorHost } from '@blocksuite/block-std';
 import {
  AffineReference,
+  type DocMode,
  type EmbedLinkedDocModel,
  type EmbedSyncedDocModel,
  type ImageBlockModel,
@@ -9,7 +10,7 @@ import {
 } from '@blocksuite/blocks';
 import type { AIChatBlockModel } from '@blocksuite/presets';
 import type { BlockModel } from '@blocksuite/store';
-import { type DocMode, Entity, LiveData } from '@toeverything/infra';
+import { Entity, LiveData } from '@toeverything/infra';
 import type { TemplateResult } from 'lit';
 import { firstValueFrom, map, race } from 'rxjs';

@@ -21,20 +22,21 @@ export type PeekViewTarget =
  | BlockComponent
  | AffineReference
  | HTMLAnchorElement
-  | { docId: string; blockId?: string };
+  | { docId: string; blockIds?: string[] };

 export interface DocPeekViewInfo {
  type: 'doc';
  docId: string;
-  blockId?: string;
  mode?: DocMode;
+  blockIds?: string[];
+  elementIds?: string[];
  xywh?: `[${number},${number},${number},${number}]`;
 }

 export type ImagePeekViewInfo = {
  type: 'image';
  docId: string;
-  blockId: string;
+  blockIds: [string];
 };

 export type AIChatBlockPeekViewInfo = {
@@ -58,15 +60,16 @@ export type ActivePeekView = {
    | AIChatBlockPeekViewInfo;
 };

-const EMBED_DOC_FLAVOURS = [
-  'affine:embed-linked-doc',
-  'affine:embed-synced-doc',
-];
-
-const isEmbedDocModel = (
+const isEmbedLinkedDocModel = (
  blockModel: BlockModel
-): blockModel is EmbedSyncedDocModel | EmbedLinkedDocModel => {
-  return EMBED_DOC_FLAVOURS.includes(blockModel.flavour);
+): blockModel is EmbedLinkedDocModel => {
+  return blockModel.flavour === 'affine:embed-linked-doc';
+};
+
+const isEmbedSyncedDocModel = (
+  blockModel: BlockModel
+): blockModel is EmbedSyncedDocModel => {
+  return blockModel.flavour === 'affine:embed-synced-doc';
 };

 const isImageBlockModel = (
@@ -99,15 +102,26 @@ function resolvePeekInfoFromPeekTarget(
  }

  if (peekTarget instanceof AffineReference) {
-    if (peekTarget.refMeta) {
-      return {
+    const referenceInfo = peekTarget.referenceInfo;
+    if (referenceInfo) {
+      const { pageId: docId } = referenceInfo;
+      const info: DocPeekViewInfo = {
        type: 'doc',
-        docId: peekTarget.refMeta.id,
+        docId,
      };
+      Object.assign(info, referenceInfo.params);
+      return info;
    }
  } else if ('model' in peekTarget) {
    const blockModel = peekTarget.model;
-    if (isEmbedDocModel(blockModel)) {
+    if (isEmbedLinkedDocModel(blockModel)) {
+      const info: DocPeekViewInfo = {
+        type: 'doc',
+        docId: blockModel.pageId,
+      };
+      Object.assign(info, blockModel.params);
+      return info;
+    } else if (isEmbedSyncedDocModel(blockModel)) {
      return {
        type: 'doc',
        docId: blockModel.pageId,
@@ -121,7 +135,7 @@ function resolvePeekInfoFromPeekTarget(
        return {
          type: 'doc',
          docId,
-          mode: 'edgeless',
+          mode: 'edgeless' as DocMode,
          xywh: refModel.xywh,
        };
      }
@@ -129,7 +143,7 @@ function resolvePeekInfoFromPeekTarget(
      return {
        type: 'image',
        docId: blockModel.doc.id,
-        blockId: blockModel.id,
+        blockIds: [blockModel.id],
      };
    } else if (isAIChatBlockModel(blockModel)) {
      return {
@@ -142,17 +156,28 @@ function resolvePeekInfoFromPeekTarget(
  } else if (peekTarget instanceof HTMLAnchorElement) {
    const maybeDoc = resolveLinkToDoc(peekTarget.href);
    if (maybeDoc) {
-      return {
+      const info: DocPeekViewInfo = {
        type: 'doc',
        docId: maybeDoc.docId,
-        blockId: maybeDoc.blockId,
      };
+
+      if (maybeDoc.mode) {
+        info.mode = maybeDoc.mode;
+      }
+      if (maybeDoc.blockIds?.length) {
+        info.blockIds = maybeDoc.blockIds;
+      }
+      if (maybeDoc.elementIds?.length) {
+        info.elementIds = maybeDoc.elementIds;
+      }
+
+      return info;
    }
  } else if ('docId' in peekTarget) {
    return {
      type: 'doc',
      docId: peekTarget.docId,
-      blockId: peekTarget.blockId,
+      blockIds: peekTarget.blockIds,
    };
  }
  return;
--- a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
@@ -7,10 +7,9 @@ import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { PageNotFound } from '@affine/core/pages/404';
 import { DebugLogger } from '@affine/debug';
-import { type EdgelessRootService } from '@blocksuite/blocks';
+import { DocMode, type EdgelessRootService } from '@blocksuite/blocks';
 import { Bound, DisposableGroup } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
-import type { DocMode } from '@toeverything/infra';
 import { DocsService, FrameworkScope, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useCallback, useEffect, useState } from 'react';
@@ -32,7 +31,7 @@ function fitViewport(
    }

    const rootService =
-      editor.host.std.spec.getService<EdgelessRootService>('affine:page');
+      editor.host.std.getService<EdgelessRootService>('affine:page');
    rootService.viewport.onResize();

    if (xywh) {
@@ -60,12 +59,14 @@ function fitViewport(

 export function DocPeekPreview({
  docId,
-  blockId,
+  blockIds,
+  elementIds,
  mode,
  xywh,
 }: {
  docId: string;
-  blockId?: string;
+  blockIds?: string[];
+  elementIds?: string[];
  mode?: DocMode;
  xywh?: `[${number},${number},${number},${number}]`;
 }) {
@@ -97,7 +98,7 @@ export function DocPeekPreview({
  useEffect(() => {
    if (!mode || !resolvedMode) {
      setResolvedMode(
-        docs.list.doc$(docId).value?.primaryMode$.value || 'page'
+        docs.list.doc$(docId).value?.primaryMode$.value || DocMode.Page
      );
    }
  }, [docId, docs.list, resolvedMode, mode]);
@@ -125,12 +126,17 @@ export function DocPeekPreview({
            return;
          }

-          const rootService =
-            editorElement.host.std.spec.getService('affine:page');
+          const rootService = editorElement.host.std.getService('affine:page');
          // doc change event inside peek view should be handled by peek view
          disposableGroup.add(
-            rootService.slots.docLinkClicked.on(({ docId, blockId }) => {
-              peekView.open({ docId, blockId }).catch(console.error);
+            rootService.slots.docLinkClicked.on(options => {
+              peekView
+                .open({
+                  type: 'doc',
+                  docId: options.pageId,
+                  ...options.params,
+                })
+                .catch(console.error);
            })
          );
          // TODO(@Peng): no tag peek view yet
@@ -175,7 +181,8 @@ export function DocPeekPreview({
              ref={onRef}
              className={styles.editor}
              mode={resolvedMode}
-              defaultSelectedBlockId={blockId}
+              blockIds={blockIds}
+              elementIds={elementIds}
              page={doc.blockSuiteDoc}
            />
          </FrameworkScope>
--- a/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/peek-view-controls.tsx
@@ -1,12 +1,13 @@
 import { IconButton } from '@affine/component';
 import { useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/blocks';
 import {
  CloseIcon,
  ExpandFullIcon,
  OpenInNewIcon,
  SplitViewIcon,
 } from '@blocksuite/icons/rc';
-import { type DocMode, useService } from '@toeverything/infra';
+import { useService } from '@toeverything/infra';
 import { clsx } from 'clsx';
 import {
  type HTMLAttributes,
--- a/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx
@@ -27,13 +27,16 @@ function renderPeekView({ info }: ActivePeekView) {
        mode={info.mode}
        xywh={info.xywh}
        docId={info.docId}
-        blockId={info.blockId}
+        blockIds={info.blockIds}
+        elementIds={info.elementIds}
      />
    );
  }

  if (info.type === 'image') {
-    return <ImagePreviewPeekView docId={info.docId} blockId={info.blockId} />;
+    return (
+      <ImagePreviewPeekView docId={info.docId} blockId={info.blockIds[0]} />
+    );
  }

  if (info.type === 'ai-chat-block') {
--- a/packages/frontend/core/src/modules/peek-view/view/utils.ts
+++ b/packages/frontend/core/src/modules/peek-view/view/utils.ts
@@ -1,4 +1,5 @@
-import type { Doc, DocMode } from '@toeverything/infra';
+import type { DocMode } from '@blocksuite/blocks';
+import type { Doc } from '@toeverything/infra';
 import {
  DocsService,
  useLiveData,
--- a/packages/frontend/core/src/modules/quicksearch/impls/commands.ts
+++ b/packages/frontend/core/src/modules/quicksearch/impls/commands.ts
@@ -4,7 +4,8 @@ import {
  type CommandCategory,
  PreconditionStrategy,
 } from '@affine/core/commands';
-import type { DocMode, GlobalContextService } from '@toeverything/infra';
+import type { DocMode } from '@blocksuite/blocks';
+import type { GlobalContextService } from '@toeverything/infra';
 import { Entity, LiveData } from '@toeverything/infra';
 import Fuse from 'fuse.js';

--- a/packages/frontend/core/src/modules/quicksearch/impls/creation.ts
+++ b/packages/frontend/core/src/modules/quicksearch/impls/creation.ts
@@ -1,5 +1,6 @@
+import type { DocMode } from '@blocksuite/blocks';
 import { EdgelessIcon, PageIcon } from '@blocksuite/icons/rc';
-import { type DocMode, Entity, LiveData } from '@toeverything/infra';
+import { Entity, LiveData } from '@toeverything/infra';

 import type { QuickSearchSession } from '../providers/quick-search-provider';
 import type { QuickSearchGroup } from '../types/group';
--- a/packages/frontend/core/src/modules/quicksearch/impls/docs.ts
+++ b/packages/frontend/core/src/modules/quicksearch/impls/docs.ts
@@ -66,7 +66,7 @@ export class DocsQuickSearchSession
                {
                  docId: resolvedDoc.docId,
                  score: 100,
-                  blockId: resolvedDoc.blockId,
+                  blockId: resolvedDoc.blockIds?.[0],
                  blockContent: '',
                },
                ...docs,
--- a/packages/frontend/core/src/modules/quicksearch/services/cmdk.ts
+++ b/packages/frontend/core/src/modules/quicksearch/services/cmdk.ts
@@ -1,4 +1,5 @@
 import { track } from '@affine/core/mixpanel';
+import { DocMode } from '@blocksuite/blocks';
 import type { DocsService } from '@toeverything/infra';
 import { Service } from '@toeverything/infra';

@@ -67,13 +68,13 @@ export class CMDKQuickSearchService extends Service {
          } else if (result.source === 'creation') {
            if (result.id === 'creation:create-page') {
              const newDoc = this.docsService.createDoc({
-                primaryMode: 'page',
+                primaryMode: DocMode.Page,
                title: result.payload.title,
              });
              this.workbenchService.workbench.openDoc(newDoc.id);
            } else if (result.id === 'creation:create-edgeless') {
              const newDoc = this.docsService.createDoc({
-                primaryMode: 'edgeless',
+                primaryMode: DocMode.Edgeless,
                title: result.payload.title,
              });
              this.workbenchService.workbench.openDoc(newDoc.id);
--- a/packages/frontend/core/src/modules/share-doc/entities/share-reader.ts
+++ b/packages/frontend/core/src/modules/share-doc/entities/share-reader.ts
@@ -1,6 +1,6 @@
 import { UserFriendlyError } from '@affine/graphql';
+import type { DocMode } from '@blocksuite/blocks';
 import {
-  type DocMode,
  effect,
  Entity,
  fromPromise,
--- a/packages/frontend/core/src/modules/share-doc/stores/share-reader.ts
+++ b/packages/frontend/core/src/modules/share-doc/stores/share-reader.ts
@@ -1,5 +1,6 @@
 import { ErrorNames, UserFriendlyError } from '@affine/graphql';
-import { type DocMode, Store } from '@toeverything/infra';
+import type { DocMode } from '@blocksuite/blocks';
+import { Store } from '@toeverything/infra';

 import { type FetchService, isBackendError } from '../../cloud';

--- a/packages/frontend/core/src/modules/workbench/entities/view.ts
+++ b/packages/frontend/core/src/modules/workbench/entities/view.ts
@@ -1,6 +1,7 @@
 import { Entity, LiveData } from '@toeverything/infra';
 import type { Location, To } from 'history';
 import { isEqual } from 'lodash-es';
+import type { ParseOptions } from 'query-string';
 import queryString from 'query-string';
 import { Observable } from 'rxjs';

@@ -79,15 +80,14 @@ export class View extends Entity<{

  icon$ = new LiveData(this.props.icon ?? 'allDocs');

-  queryString$<T extends Record<string, unknown>>({
-    parseNumbers = true,
-  }: { parseNumbers?: boolean } = {}) {
+  queryString$<T extends Record<string, unknown>>(
+    options: ParseOptions = {
+      parseNumbers: true,
+      parseBooleans: true,
+    }
+  ) {
    return this.location$.map(
-      location =>
-        queryString.parse(location.search, {
-          parseBooleans: true,
-          parseNumbers: parseNumbers,
-        }) as Partial<T>
+      location => queryString.parse(location.search, options) as Partial<T>
    );
  }

--- a/packages/frontend/core/src/modules/workbench/entities/workbench.ts
+++ b/packages/frontend/core/src/modules/workbench/entities/workbench.ts
@@ -128,9 +128,15 @@ export class Workbench extends Entity {
    const docId = typeof id === 'string' ? id : id.docId;
    const blockId = typeof id === 'string' ? undefined : id.blockId;
    const mode = typeof id === 'string' ? undefined : id.mode;
-    const hash = blockId ? `#${blockId}` : '';
-    const query = mode ? `?mode=${mode}` : '';
-    this.open(`/${docId}${query}${hash}`, options);
+    let query = '';
+    if (mode || blockId) {
+      const search = new URLSearchParams();
+      if (mode) search.set('mode', mode);
+      if (blockId) search.set('blockIds', blockId);
+      query = `?${search.toString()}`;
+    }
+
+    this.open(`/${docId}${query}`, options);
  }

  openCollections(options?: WorkbenchOpenOptions) {
--- a/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx
+++ b/packages/frontend/core/src/pages/workspace/all-page/all-page-header.tsx
@@ -10,6 +10,7 @@ import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
 import { track } from '@affine/core/mixpanel';
 import { isNewTabTrigger } from '@affine/core/utils';
 import type { Filter } from '@affine/env/filter';
+import { DocMode } from '@blocksuite/blocks';
 import { PlusIcon } from '@blocksuite/icons/rc';
 import { useServices, WorkspaceService } from '@toeverything/infra';
 import clsx from 'clsx';
@@ -67,7 +68,7 @@ export const AllPageHeader = ({
              createEdgeless(isNewTabTrigger(e) ? 'new-tab' : true)
            }
            onCreatePage={e =>
-              createPage('page', isNewTabTrigger(e) ? 'new-tab' : true)
+              createPage(DocMode.Page, isNewTabTrigger(e) ? 'new-tab' : true)
            }
            onCreateDoc={e =>
              createPage(undefined, isNewTabTrigger(e) ? 'new-tab' : true)
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page-wrapper.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page-wrapper.tsx
@@ -63,7 +63,9 @@ const useLoadDoc = (pageId: string) => {
    }
    const editor = doc.scope
      .get(EditorsService)
-      .createEditor(initialQueryStringMode || doc.getPrimaryMode() || 'page');
+      .createEditor(
+        initialQueryStringMode || doc.getPrimaryMode() || ('page' as DocMode)
+      );
    setEditor(editor);
    return () => {
      editor.dispose();
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
@@ -210,14 +210,23 @@ const DetailPageImpl = memo(function DetailPageImpl() {

      // provide page mode and updated date to blocksuite
      const pageService =
-        editorHost?.std.spec.getService<PageRootService>('affine:page');
+        editorHost?.std.getService<PageRootService>('affine:page');
      const disposable = new DisposableGroup();
      if (pageService) {
        disposable.add(
-          pageService.slots.docLinkClicked.on(({ docId, blockId }) => {
-            return blockId
-              ? jumpToPageBlock(docCollection.id, docId, blockId)
-              : openPage(docCollection.id, docId);
+          pageService.slots.docLinkClicked.on(({ pageId, params }) => {
+            if (params) {
+              const { mode, blockIds, elementIds } = params;
+              return jumpToPageBlock(
+                docCollection.id,
+                pageId,
+                mode,
+                blockIds,
+                elementIds
+              );
+            }
+
+            return openPage(docCollection.id, pageId);
          })
        );
        disposable.add(
--- a/packages/frontend/core/src/pages/workspace/detail-page/tabs/chat.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/tabs/chat.tsx
@@ -1,4 +1,5 @@
 import { ChatPanel } from '@affine/core/blocksuite/presets/ai';
+import { DocModeProvider } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import { forwardRef, useCallback, useEffect, useRef } from 'react';
@@ -42,14 +43,16 @@ export const EditorChatPanel = forwardRef(function EditorChatPanel(

  useEffect(() => {
    if (!editor) return;
-    const pageService = editor.host?.spec.getService('affine:page');
+    const pageService = editor.host?.std.getService('affine:page');
    if (!pageService) return;
+    const docModeService = editor.host?.std.get(DocModeProvider);
+    if (!docModeService) return;

    const disposable = [
      pageService.slots.docLinkClicked.on(() => {
        (chatPanelRef.current as ChatPanel).doc = editor.doc;
      }),
-      pageService.docModeService.onModeChange(() => {
+      docModeService.onModeChange(() => {
        if (!editor.host) return;
        (chatPanelRef.current as ChatPanel).host = editor.host;
      }),
--- a/packages/frontend/core/src/pages/workspace/share/share-header.tsx
+++ b/packages/frontend/core/src/pages/workspace/share/share-header.tsx
@@ -2,8 +2,8 @@ import { BlocksuiteHeaderTitle } from '@affine/core/components/blocksuite/block-
 import { EditorModeSwitch } from '@affine/core/components/blocksuite/block-suite-mode-switch';
 import ShareHeaderRightItem from '@affine/core/components/cloud/share-header-right-item';
 import { AuthModal } from '@affine/core/providers/modal-provider';
+import type { DocMode } from '@blocksuite/blocks';
 import type { DocCollection } from '@blocksuite/store';
-import type { DocMode } from '@toeverything/infra';

 import * as styles from './share-header.css';

--- a/packages/frontend/core/src/pages/workspace/share/share-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/share/share-page.tsx
@@ -12,11 +12,12 @@ import { ShareReaderService } from '@affine/core/modules/share-doc';
 import { CloudBlobStorage } from '@affine/core/modules/workspace-engine';
 import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useI18n } from '@affine/i18n';
+import type { DocMode } from '@blocksuite/blocks';
 import { noop } from '@blocksuite/global/utils';
 import { Logo1Icon } from '@blocksuite/icons/rc';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Doc as BlockSuiteDoc } from '@blocksuite/store';
-import type { Doc, DocMode, Workspace } from '@toeverything/infra';
+import type { Doc, Workspace } from '@toeverything/infra';
 import {
  DocsService,
  EmptyBlobStorage,
@@ -96,7 +97,7 @@ const SharePageInner = ({
  docId,
  workspaceBinary,
  docBinary,
-  publishMode = 'page',
+  publishMode = 'page' as DocMode,
 }: {
  workspaceId: string;
  docId: string;
--- a/packages/frontend/electron/package.json
+++ b/packages/frontend/electron/package.json
@@ -29,10 +29,10 @@
    "@affine/env": "workspace:*",
    "@affine/i18n": "workspace:*",
    "@affine/native": "workspace:*",
-    "@blocksuite/block-std": "0.17.0-canary-202408191538-1511d04",
-    "@blocksuite/blocks": "0.17.0-canary-202408191538-1511d04",
-    "@blocksuite/presets": "0.17.0-canary-202408191538-1511d04",
-    "@blocksuite/store": "0.17.0-canary-202408191538-1511d04",
+    "@blocksuite/block-std": "0.0.0-canary-20240902070217",
+    "@blocksuite/blocks": "0.0.0-canary-20240902070217",
+    "@blocksuite/presets": "0.0.0-canary-20240902070217",
+    "@blocksuite/store": "0.0.0-canary-20240902070217",
    "@electron-forge/cli": "^7.3.0",
    "@electron-forge/core": "^7.3.0",
    "@electron-forge/core-utils": "^7.3.0",
--- a/packages/frontend/mobile/src/pages/workspace/detail/mobile-detail-page.tsx
+++ b/packages/frontend/mobile/src/pages/workspace/detail/mobile-detail-page.tsx
@@ -130,14 +130,23 @@ const DetailPageImpl = () => {

      // provide page mode and updated date to blocksuite
      const pageService =
-        editorHost?.std.spec.getService<PageRootService>('affine:page');
+        editorHost?.std.getService<PageRootService>('affine:page');
      const disposable = new DisposableGroup();
      if (pageService) {
        disposable.add(
-          pageService.slots.docLinkClicked.on(({ docId, blockId }) => {
-            return blockId
-              ? jumpToPageBlock(docCollection.id, docId, blockId)
-              : openPage(docCollection.id, docId);
+          pageService.slots.docLinkClicked.on(({ pageId, params }) => {
+            if (params) {
+              const { mode, blockIds, elementIds } = params;
+              return jumpToPageBlock(
+                docCollection.id,
+                pageId,
+                mode,
+                blockIds,
+                elementIds
+              );
+            }
+
+            return openPage(docCollection.id, pageId);
          })
        );
        disposable.add(