Merge branch 'canary' into zzj/feat/database-block/upgrade-prompt

close: BS-3433

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced advanced group-by configurations for database blocks with user membership support.
  - Added a React hook for fetching and displaying user information in member-related components.
  - Enabled dynamic user and membership data types in database properties.

- **Improvements**
  - Replaced context-based service access with a dependency injection system for shared services and state.
  - Enhanced type safety and consistency across group-by UI components and data handling.
  - Centralized group data management with a new Group class and refined group trait logic.

- **Bug Fixes**
  - Improved reliability and consistency in retrieving and rendering user and group information.

- **Style**
  - Removed obsolete member selection styles for cleaner UI code.

- **Chores**
  - Registered external group-by configurations via dependency injection.
  - Refactored internal APIs for data sources, views, and group-by matchers to use service-based patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

.docker/selfhost/schema.json

@@ -123,32 +123,6 @@
         }
       }
     },
-    "websocket": {
-      "type": "object",
-      "description": "Configuration for websocket module",
-      "properties": {
-        "transports": {
-          "type": "array",
-          "description": "The enabled transports for accepting websocket traffics.\n@default [\"websocket\",\"polling\"]\n@link https://docs.nestjs.com/websockets/gateways#transports",
-          "items": {
-            "type": "string",
-            "enum": [
-              "websocket",
-              "polling"
-            ]
-          },
-          "default": [
-            "websocket",
-            "polling"
-          ]
-        },
-        "maxHttpBufferSize": {
-          "type": "number",
-          "description": "How many bytes or characters a message can be, before closing the session (to avoid DoS).\n@default 100000000",
-          "default": 100000000
-        }
-      }
-    },
     "auth": {
       "type": "object",
       "description": "Configuration for auth module",
@@ -501,6 +475,32 @@
         }
       }
     },
+    "websocket": {
+      "type": "object",
+      "description": "Configuration for websocket module",
+      "properties": {
+        "transports": {
+          "type": "array",
+          "description": "The enabled transports for accepting websocket traffics.\n@default [\"websocket\",\"polling\"]\n@link https://docs.nestjs.com/websockets/gateways#transports",
+          "items": {
+            "type": "string",
+            "enum": [
+              "websocket",
+              "polling"
+            ]
+          },
+          "default": [
+            "websocket",
+            "polling"
+          ]
+        },
+        "maxHttpBufferSize": {
+          "type": "number",
+          "description": "How many bytes or characters a message can be, before closing the session (to avoid DoS).\n@default 100000000",
+          "default": 100000000
+        }
+      }
+    },
     "server": {
       "type": "object",
       "description": "Configuration for server module",
@@ -634,6 +634,13 @@
             "apiKey": ""
           }
         },
+        "providers.anthropic": {
+          "type": "object",
+          "description": "The config for the anthropic provider.\n@default {\"apiKey\":\"\"}",
+          "default": {
+            "apiKey": ""
+          }
+        },
         "unsplash": {
           "type": "object",
           "description": "The config for the unsplash key.\n@default {\"key\":\"\"}",
@@ -641,6 +648,13 @@
             "key": ""
           }
         },
+        "exa": {
+          "type": "object",
+          "description": "The config for the exa web search key.\n@default {\"key\":\"\"}",
+          "default": {
+            "key": ""
+          }
+        },
         "storage": {
           "type": "object",
           "description": "The config for the storage provider.\n@default {\"provider\":\"fs\",\"bucket\":\"copilot\",\"config\":{\"path\":\"~/.affine/storage\"}}",

.github/workflows/build-images.yml

@@ -136,6 +136,8 @@ jobs:
           extra-flags: workspaces focus @affine/server-native
       - name: Build Rust
         uses: ./.github/actions/build-rust
+        env:
+          AFFINE_PRO_PUBLIC_KEY: ${{ secrets.AFFINE_PRO_PUBLIC_KEY }}
         with:
           target: ${{ matrix.targets.name }}
           package: '@affine/server-native'
@@ -253,6 +255,9 @@ jobs:
       - name: Generate Prisma client
         run: yarn workspace @affine/server prisma generate
 
+      - name: Mv node_modules
+        run: mv ./node_modules ./packages/backend/server
+
       - name: Setup Version
         id: version
         uses: ./.github/actions/setup-version

.github/workflows/build-test.yml

@@ -157,6 +157,7 @@ jobs:
     runs-on: ubuntu-latest
     needs:
       - optimize_ci
+      - build-server-native
     if: needs.optimize_ci.outputs.skip == 'false'
     steps:
       - uses: actions/checkout@v4
@@ -165,13 +166,20 @@ jobs:
         with:
           full-cache: true
 
+      - name: Download server-native.node
+        uses: actions/download-artifact@v4
+        with:
+          name: server-native.node
+          path: ./packages/backend/native
+
       - name: Run Check
         run: |
           yarn affine init
           yarn affine gql build
           yarn affine i18n build
+          yarn affine server genconfig
           git status --porcelain | grep . && {
-            echo "Run 'yarn affine init && yarn affine gql build && yarn affine i18n build' and make sure all changes are submitted"
+            echo "Run 'yarn affine init && yarn affine gql build && yarn affine i18n build && yarn affine server genconfig' and make sure all changes are submitted"
             exit 1
           } || {
             echo "All changes are submitted"

.github/workflows/deploy.yml

@@ -156,7 +156,7 @@ jobs:
           BLOCKSUITE_REPO_PATH: ${{ github.workspace }}/blocksuite
       - name: Post Failed event to a Slack channel
         id: failed-slack
-        uses: slackapi/slack-github-action@v2.0.0
+        uses: slackapi/slack-github-action@v2.1.0
         if: ${{ always() && contains(needs.*.result, 'failure') }}
         with:
           method: chat.postMessage
@@ -171,7 +171,7 @@ jobs:
                   text: "<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|Backend deploy failed `${{ github.event.inputs.flavor }}`>"
       - name: Post Cancel event to a Slack channel
         id: cancel-slack
-        uses: slackapi/slack-github-action@v2.0.0
+        uses: slackapi/slack-github-action@v2.1.0
         if: ${{ always() && contains(needs.*.result, 'cancelled') && !contains(needs.*.result, 'failure') }}
         with:
           token: ${{ secrets.SLACK_BOT_TOKEN }}

blocksuite/affine/all/package.json

@@ -19,6 +19,7 @@
     "@blocksuite/affine-block-divider": "workspace:*",
     "@blocksuite/affine-block-edgeless-text": "workspace:*",
     "@blocksuite/affine-block-embed": "workspace:*",
+    "@blocksuite/affine-block-embed-doc": "workspace:*",
     "@blocksuite/affine-block-frame": "workspace:*",
     "@blocksuite/affine-block-image": "workspace:*",
     "@blocksuite/affine-block-latex": "workspace:*",
@@ -121,6 +122,9 @@
     "./blocks/embed": "./src/blocks/embed/index.ts",
     "./blocks/embed/store": "./src/blocks/embed/store.ts",
     "./blocks/embed/view": "./src/blocks/embed/view.ts",
+    "./blocks/embed-doc": "./src/blocks/embed-doc/index.ts",
+    "./blocks/embed-doc/store": "./src/blocks/embed-doc/store.ts",
+    "./blocks/embed-doc/view": "./src/blocks/embed-doc/view.ts",
     "./blocks/frame": "./src/blocks/frame/index.ts",
     "./blocks/frame/store": "./src/blocks/frame/store.ts",
     "./blocks/frame/view": "./src/blocks/frame/view.ts",
@@ -139,7 +143,9 @@
     "./blocks/paragraph": "./src/blocks/paragraph/index.ts",
     "./blocks/paragraph/store": "./src/blocks/paragraph/store.ts",
     "./blocks/paragraph/view": "./src/blocks/paragraph/view.ts",
-    "./blocks/root": "./src/blocks/root.ts",
+    "./blocks/root": "./src/blocks/root/index.ts",
+    "./blocks/root/store": "./src/blocks/root/store.ts",
+    "./blocks/root/view": "./src/blocks/root/view.ts",
     "./blocks/surface": "./src/blocks/surface/index.ts",
     "./blocks/surface/store": "./src/blocks/surface/store.ts",
     "./blocks/surface/view": "./src/blocks/surface/view.ts",
@@ -192,9 +198,12 @@
     "./widgets/viewport-overlay/view": "./src/widgets/viewport-overlay/view.ts",
     "./widgets/page-dragging-area": "./src/widgets/page-dragging-area/index.ts",
     "./widgets/page-dragging-area/view": "./src/widgets/page-dragging-area/view.ts",
-    "./fragments/doc-title": "./src/fragments/doc-title.ts",
-    "./fragments/frame-panel": "./src/fragments/frame-panel.ts",
-    "./fragments/outline": "./src/fragments/outline.ts",
+    "./fragments/doc-title": "./src/fragments/doc-title/index.ts",
+    "./fragments/doc-title/view": "./src/fragments/doc-title/view.ts",
+    "./fragments/frame-panel": "./src/fragments/frame-panel/index.ts",
+    "./fragments/frame-panel/view": "./src/fragments/frame-panel/view.ts",
+    "./fragments/outline": "./src/fragments/outline/index.ts",
+    "./fragments/outline/view": "./src/fragments/outline/view.ts",
     "./gfx/text": "./src/gfx/text/index.ts",
     "./gfx/text/store": "./src/gfx/text/store.ts",
     "./gfx/text/view": "./src/gfx/text/view.ts",
@@ -249,6 +258,7 @@
     "./components/toolbar": "./src/components/toolbar.ts",
     "./components/view-dropdown-menu": "./src/components/view-dropdown-menu.ts",
     "./components/tooltip-content-with-shortcut": "./src/components/tooltip-content-with-shortcut.ts",
+    "./components/resource": "./src/components/resource.ts",
     "./rich-text": "./src/rich-text/index.ts",
     "./rich-text/effects": "./src/rich-text/effects.ts",
     "./shared/adapters": "./src/shared/adapters.ts",
@@ -264,7 +274,9 @@
     "./model": "./src/model/index.ts",
     "./sync": "./src/sync/index.ts",
     "./extensions/store": "./src/extensions/store.ts",
-    "./extensions/view": "./src/extensions/view.ts"
+    "./extensions/view": "./src/extensions/view.ts",
+    "./foundation/store": "./src/foundation/store.ts",
+    "./foundation/view": "./src/foundation/view.ts"
   },
   "files": [
     "src",
@@ -275,6 +287,6 @@
   "version": "0.21.0",
   "devDependencies": {
     "@vanilla-extract/vite-plugin": "^5.0.0",
-    "vitest": "3.1.1"
+    "vitest": "3.1.3"
   }
 }

blocksuite/affine/all/src/__tests__/adapters/markdown.unit.spec.ts

@@ -2448,6 +2448,121 @@ World!
     });
     expect(target.file).toBe(markdown);
   });
+
+  test('callout', async () => {
+    const blockSnapshot: BlockSnapshot = {
+      type: 'block',
+      id: 'block:vu6SK6WJpW',
+      flavour: 'affine:page',
+      props: {
+        title: {
+          '$blocksuite:internal:text$': true,
+          delta: [],
+        },
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'block:Tk4gSPocAt',
+          flavour: 'affine:surface',
+          props: {
+            elements: {},
+          },
+          children: [],
+        },
+        {
+          type: 'block',
+          id: 'block:WfnS5ZDCJT',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[0,0,800,95]',
+            background: DefaultTheme.noteBackgrounColor,
+            index: 'a0',
+            hidden: false,
+            displayMode: NoteDisplayMode.DocAndEdgeless,
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'block:8hOLxad5Fv',
+              flavour: 'affine:callout',
+              props: {
+                emoji: '💡',
+              },
+              children: [
+                {
+                  type: 'block',
+                  id: 'block:8hOLxad5Fv',
+                  flavour: 'affine:paragraph',
+                  props: {
+                    type: 'text',
+                    text: {
+                      '$blocksuite:internal:text$': true,
+                      delta: [{ insert: 'First callout' }],
+                    },
+                  },
+                  children: [],
+                },
+              ],
+            },
+            {
+              type: 'block',
+              id: 'block:8hOLxadvdv',
+              flavour: 'affine:callout',
+              props: {
+                emoji: '',
+              },
+              children: [
+                {
+                  type: 'block',
+                  id: 'block:8hOLxad5Fv',
+                  flavour: 'affine:paragraph',
+                  props: {
+                    type: 'text',
+                    text: {
+                      '$blocksuite:internal:text$': true,
+                      delta: [{ insert: 'Second callout without emoji' }],
+                    },
+                  },
+                  children: [],
+                },
+              ],
+            },
+            {
+              type: 'block',
+              id: 'block:8hOLxbfdb',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'quote',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [{ insert: 'This is a regular blockquote' }],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    };
+
+    const markdown = `> \\[!💡]
+>
+> First callout
+
+> \\[!]
+>
+> Second callout without emoji
+
+> This is a regular blockquote
+`;
+
+    const mdAdapter = new MarkdownAdapter(createJob(), provider);
+    const target = await mdAdapter.fromBlockSnapshot({
+      snapshot: blockSnapshot,
+    });
+    expect(target.file).toBe(markdown);
+  });
 });
 
 describe('markdown to snapshot', () => {
@@ -3588,7 +3703,7 @@ bbb
       props: {
         xywh: '[0,0,800,95]',
         background: {
-          dark: '#000000',
+          dark: '#252525',
           light: '#ffffff',
         },
         index: 'a0',
@@ -4182,4 +4297,62 @@ hhh
     });
     expect(nanoidReplacement(rawSliceSnapshot!)).toEqual(sliceSnapshot);
   });
+
+  describe('callout', () => {
+    const calloutBlockSnapshot: BlockSnapshot = {
+      type: 'block',
+      id: 'matchesReplaceMap[0]',
+      flavour: 'affine:note',
+      props: {
+        xywh: '[0,0,800,95]',
+        background: DefaultTheme.noteBackgrounColor,
+        index: 'a0',
+        hidden: false,
+        displayMode: NoteDisplayMode.DocAndEdgeless,
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'matchesReplaceMap[1]',
+          flavour: 'affine:callout',
+          props: {
+            emoji: '💬',
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'matchesReplaceMap[2]',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [{ insert: 'This is a callout' }],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    };
+
+    test('callout start with escape character', async () => {
+      const markdown = '> \\[!💬]\n> This is a callout';
+      const mdAdapter = new MarkdownAdapter(createJob(), provider);
+      const rawBlockSnapshot = await mdAdapter.toBlockSnapshot({
+        file: markdown,
+      });
+      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(calloutBlockSnapshot);
+    });
+
+    test('callout start without escape character', async () => {
+      const markdown = '> [!💬]\n> This is a callout';
+      const mdAdapter = new MarkdownAdapter(createJob(), provider);
+      const rawBlockSnapshot = await mdAdapter.toBlockSnapshot({
+        file: markdown,
+      });
+      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(calloutBlockSnapshot);
+    });
+  });
 });

blocksuite/affine/all/src/__tests__/adapters/notion-text.unit.spec.ts

@@ -106,4 +106,65 @@ describe('notion-text to snapshot', () => {
     });
     expect(nanoidReplacement(target!)).toEqual(sliceSnapshot);
   });
+
+  test('notion text with empty styles array', () => {
+    const notionText =
+      '{"blockType":"text","editing":[["a "],["bold text",[["b"]]],[" hello world"]],"selection":{"startIndex":0,"endIndex":23},"action":"copy"}';
+
+    const sliceSnapshot: SliceSnapshot = {
+      type: 'slice',
+      content: [
+        {
+          type: 'block',
+          id: 'matchesReplaceMap[0]',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[0,0,800,95]',
+            background: DefaultTheme.noteBackgrounColor,
+            index: 'a0',
+            hidden: false,
+            displayMode: 'both',
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'matchesReplaceMap[1]',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert: 'a ',
+                    },
+                    {
+                      insert: 'bold text',
+                      attributes: {
+                        bold: true,
+                      },
+                    },
+                    {
+                      insert: ' hello world',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+      workspaceId: '',
+      pageId: '',
+    };
+
+    const ntAdapter = new NotionTextAdapter(createJob(), provider);
+    const target = ntAdapter.toSliceSnapshot({
+      file: notionText,
+      workspaceId: '',
+      pageId: '',
+    });
+    expect(nanoidReplacement(target!)).toEqual(sliceSnapshot);
+  });
 });

blocksuite/affine/all/src/adapters/extension.ts

@@ -1,65 +0,0 @@
-import {
-  HtmlInlineToDeltaAdapterExtensions,
-  InlineDeltaToHtmlAdapterExtensions,
-  InlineDeltaToMarkdownAdapterExtensions,
-  MarkdownInlineToDeltaAdapterExtensions,
-  NotionHtmlInlineToDeltaAdapterExtensions,
-} from '@blocksuite/affine-inline-preset';
-import {
-  AttachmentAdapterFactoryExtension,
-  HtmlAdapterFactoryExtension,
-  ImageAdapterFactoryExtension,
-  MarkdownAdapterFactoryExtension,
-  MixTextAdapterFactoryExtension,
-  NotionHtmlAdapterFactoryExtension,
-  NotionTextAdapterFactoryExtension,
-  PlainTextAdapterFactoryExtension,
-} from '@blocksuite/affine-shared/adapters';
-import type { ExtensionType } from '@blocksuite/store';
-
-import { defaultBlockHtmlAdapterMatchers } from './html/block-matcher';
-import { defaultBlockMarkdownAdapterMatchers } from './markdown/block-matcher';
-import { defaultMarkdownPreprocessors } from './markdown/preprocessor';
-import { defaultBlockNotionHtmlAdapterMatchers } from './notion-html/block-matcher';
-import { defaultBlockPlainTextAdapterMatchers } from './plain-text/block-matcher';
-
-export function getAdapterFactoryExtensions(): ExtensionType[] {
-  return [
-    AttachmentAdapterFactoryExtension,
-    ImageAdapterFactoryExtension,
-    MarkdownAdapterFactoryExtension,
-    PlainTextAdapterFactoryExtension,
-    HtmlAdapterFactoryExtension,
-    NotionTextAdapterFactoryExtension,
-    NotionHtmlAdapterFactoryExtension,
-    MixTextAdapterFactoryExtension,
-  ];
-}
-
-export function getHtmlAdapterExtensions(): ExtensionType[] {
-  return [
-    ...HtmlInlineToDeltaAdapterExtensions,
-    ...defaultBlockHtmlAdapterMatchers,
-    ...InlineDeltaToHtmlAdapterExtensions,
-  ];
-}
-
-export function getMarkdownAdapterExtensions(): ExtensionType[] {
-  return [
-    ...MarkdownInlineToDeltaAdapterExtensions,
-    ...defaultBlockMarkdownAdapterMatchers,
-    ...InlineDeltaToMarkdownAdapterExtensions,
-    ...defaultMarkdownPreprocessors,
-  ];
-}
-
-export function getNotionHtmlAdapterExtensions(): ExtensionType[] {
-  return [
-    ...NotionHtmlInlineToDeltaAdapterExtensions,
-    ...defaultBlockNotionHtmlAdapterMatchers,
-  ];
-}
-
-export function getPlainTextAdapterExtensions(): ExtensionType[] {
-  return [...defaultBlockPlainTextAdapterMatchers];
-}

blocksuite/affine/all/src/adapters/html/block-matcher.ts

@@ -1,37 +0,0 @@
-import { BookmarkBlockHtmlAdapterExtension } from '@blocksuite/affine-block-bookmark';
-import { CodeBlockHtmlAdapterExtension } from '@blocksuite/affine-block-code';
-import { DatabaseBlockHtmlAdapterExtension } from '@blocksuite/affine-block-database';
-import { DividerBlockHtmlAdapterExtension } from '@blocksuite/affine-block-divider';
-import {
-  EmbedFigmaBlockHtmlAdapterExtension,
-  EmbedGithubBlockHtmlAdapterExtension,
-  EmbedIframeBlockHtmlAdapterExtension,
-  EmbedLinkedDocHtmlAdapterExtension,
-  EmbedLoomBlockHtmlAdapterExtension,
-  EmbedSyncedDocBlockHtmlAdapterExtension,
-  EmbedYoutubeBlockHtmlAdapterExtension,
-} from '@blocksuite/affine-block-embed';
-import { ImageBlockHtmlAdapterExtension } from '@blocksuite/affine-block-image';
-import { ListBlockHtmlAdapterExtension } from '@blocksuite/affine-block-list';
-import { ParagraphBlockHtmlAdapterExtension } from '@blocksuite/affine-block-paragraph';
-import { RootBlockHtmlAdapterExtension } from '@blocksuite/affine-block-root';
-import { TableBlockHtmlAdapterExtension } from '@blocksuite/affine-block-table';
-
-export const defaultBlockHtmlAdapterMatchers = [
-  ListBlockHtmlAdapterExtension,
-  ParagraphBlockHtmlAdapterExtension,
-  CodeBlockHtmlAdapterExtension,
-  DividerBlockHtmlAdapterExtension,
-  ImageBlockHtmlAdapterExtension,
-  RootBlockHtmlAdapterExtension,
-  EmbedYoutubeBlockHtmlAdapterExtension,
-  EmbedFigmaBlockHtmlAdapterExtension,
-  EmbedLoomBlockHtmlAdapterExtension,
-  EmbedGithubBlockHtmlAdapterExtension,
-  EmbedIframeBlockHtmlAdapterExtension,
-  BookmarkBlockHtmlAdapterExtension,
-  DatabaseBlockHtmlAdapterExtension,
-  TableBlockHtmlAdapterExtension,
-  EmbedLinkedDocHtmlAdapterExtension,
-  EmbedSyncedDocBlockHtmlAdapterExtension,
-];

blocksuite/affine/all/src/adapters/index.ts

@@ -1,6 +0,0 @@
-export * from './extension.js';
-export * from './html/block-matcher.js';
-export * from './markdown/block-matcher.js';
-export * from './markdown/preprocessor.js';
-export * from './notion-html/block-matcher.js';
-export * from './plain-text/block-matcher.js';

blocksuite/affine/all/src/adapters/markdown/block-matcher.ts

@@ -1,43 +0,0 @@
-import { AttachmentBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-attachment';
-import { BookmarkBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-bookmark';
-import { CodeBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-code';
-import { DatabaseBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-database';
-import { DividerBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-divider';
-import {
-  EmbedFigmaMarkdownAdapterExtension,
-  EmbedGithubMarkdownAdapterExtension,
-  EmbedIframeBlockMarkdownAdapterExtension,
-  EmbedLinkedDocMarkdownAdapterExtension,
-  EmbedLoomMarkdownAdapterExtension,
-  EmbedSyncedDocMarkdownAdapterExtension,
-  EmbedYoutubeMarkdownAdapterExtension,
-} from '@blocksuite/affine-block-embed';
-import { ImageBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-image';
-import { LatexBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-latex';
-import { ListBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-list';
-import { DocNoteBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-note';
-import { ParagraphBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-paragraph';
-import { RootBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-root';
-import { TableBlockMarkdownAdapterExtension } from '@blocksuite/affine-block-table';
-
-export const defaultBlockMarkdownAdapterMatchers = [
-  RootBlockMarkdownAdapterExtension,
-  DocNoteBlockMarkdownAdapterExtension,
-  EmbedFigmaMarkdownAdapterExtension,
-  EmbedGithubMarkdownAdapterExtension,
-  EmbedLinkedDocMarkdownAdapterExtension,
-  EmbedLoomMarkdownAdapterExtension,
-  EmbedSyncedDocMarkdownAdapterExtension,
-  EmbedYoutubeMarkdownAdapterExtension,
-  EmbedIframeBlockMarkdownAdapterExtension,
-  ListBlockMarkdownAdapterExtension,
-  ParagraphBlockMarkdownAdapterExtension,
-  BookmarkBlockMarkdownAdapterExtension,
-  CodeBlockMarkdownAdapterExtension,
-  DatabaseBlockMarkdownAdapterExtension,
-  TableBlockMarkdownAdapterExtension,
-  DividerBlockMarkdownAdapterExtension,
-  ImageBlockMarkdownAdapterExtension,
-  LatexBlockMarkdownAdapterExtension,
-  AttachmentBlockMarkdownAdapterExtension,
-];

blocksuite/affine/all/src/adapters/markdown/preprocessor.ts

@@ -1,9 +0,0 @@
-import { BookmarkBlockMarkdownPreprocessorExtension } from '@blocksuite/affine-block-bookmark';
-import { CodeMarkdownPreprocessorExtension } from '@blocksuite/affine-block-code';
-import { LatexMarkdownPreprocessorExtension } from '@blocksuite/affine-block-latex';
-
-export const defaultMarkdownPreprocessors = [
-  LatexMarkdownPreprocessorExtension,
-  CodeMarkdownPreprocessorExtension,
-  BookmarkBlockMarkdownPreprocessorExtension,
-];

blocksuite/affine/all/src/adapters/notion-html/block-matcher.ts

@@ -1,34 +0,0 @@
-import { AttachmentBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-attachment';
-import { BookmarkBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-bookmark';
-import { CodeBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-code';
-import { DatabaseBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-database';
-import { DividerBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-divider';
-import {
-  EmbedFigmaBlockNotionHtmlAdapterExtension,
-  EmbedGithubBlockNotionHtmlAdapterExtension,
-  EmbedLoomBlockNotionHtmlAdapterExtension,
-  EmbedYoutubeBlockNotionHtmlAdapterExtension,
-} from '@blocksuite/affine-block-embed';
-import { ImageBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-image';
-import { LatexBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-latex';
-import { ListBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-list';
-import { ParagraphBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-paragraph';
-import { RootBlockNotionHtmlAdapterExtension } from '@blocksuite/affine-block-root';
-import type { ExtensionType } from '@blocksuite/store';
-
-export const defaultBlockNotionHtmlAdapterMatchers: ExtensionType[] = [
-  ListBlockNotionHtmlAdapterExtension,
-  ParagraphBlockNotionHtmlAdapterExtension,
-  CodeBlockNotionHtmlAdapterExtension,
-  DividerBlockNotionHtmlAdapterExtension,
-  ImageBlockNotionHtmlAdapterExtension,
-  RootBlockNotionHtmlAdapterExtension,
-  BookmarkBlockNotionHtmlAdapterExtension,
-  DatabaseBlockNotionHtmlAdapterExtension,
-  LatexBlockNotionHtmlAdapterExtension,
-  EmbedYoutubeBlockNotionHtmlAdapterExtension,
-  EmbedFigmaBlockNotionHtmlAdapterExtension,
-  EmbedGithubBlockNotionHtmlAdapterExtension,
-  EmbedLoomBlockNotionHtmlAdapterExtension,
-  AttachmentBlockNotionHtmlAdapterExtension,
-];

blocksuite/affine/all/src/adapters/plain-text/block-matcher.ts

@@ -1,34 +0,0 @@
-import { BookmarkBlockPlainTextAdapterExtension } from '@blocksuite/affine-block-bookmark';
-import { CodeBlockPlainTextAdapterExtension } from '@blocksuite/affine-block-code';
-import { DatabaseBlockPlainTextAdapterExtension } from '@blocksuite/affine-block-database';
-import { DividerBlockPlainTextAdapterExtension } from '@blocksuite/affine-block-divider';
-import {
-  EmbedFigmaBlockPlainTextAdapterExtension,
-  EmbedGithubBlockPlainTextAdapterExtension,
-  EmbedIframeBlockPlainTextAdapterExtension,
-  EmbedLinkedDocBlockPlainTextAdapterExtension,
-  EmbedLoomBlockPlainTextAdapterExtension,
-  EmbedSyncedDocBlockPlainTextAdapterExtension,
-  EmbedYoutubeBlockPlainTextAdapterExtension,
-} from '@blocksuite/affine-block-embed';
-import { LatexBlockPlainTextAdapterExtension } from '@blocksuite/affine-block-latex';
-import { ListBlockPlainTextAdapterExtension } from '@blocksuite/affine-block-list';
-import { ParagraphBlockPlainTextAdapterExtension } from '@blocksuite/affine-block-paragraph';
-import type { ExtensionType } from '@blocksuite/store';
-
-export const defaultBlockPlainTextAdapterMatchers: ExtensionType[] = [
-  ParagraphBlockPlainTextAdapterExtension,
-  ListBlockPlainTextAdapterExtension,
-  DividerBlockPlainTextAdapterExtension,
-  CodeBlockPlainTextAdapterExtension,
-  BookmarkBlockPlainTextAdapterExtension,
-  EmbedFigmaBlockPlainTextAdapterExtension,
-  EmbedGithubBlockPlainTextAdapterExtension,
-  EmbedLoomBlockPlainTextAdapterExtension,
-  EmbedYoutubeBlockPlainTextAdapterExtension,
-  EmbedLinkedDocBlockPlainTextAdapterExtension,
-  EmbedSyncedDocBlockPlainTextAdapterExtension,
-  EmbedIframeBlockPlainTextAdapterExtension,
-  LatexBlockPlainTextAdapterExtension,
-  DatabaseBlockPlainTextAdapterExtension,
-];

blocksuite/affine/all/src/blocks/embed-doc/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-embed-doc';

blocksuite/affine/all/src/blocks/embed-doc/store.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-embed-doc/store';

blocksuite/affine/all/src/blocks/embed-doc/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-embed-doc/view';

blocksuite/affine/all/src/blocks/root/store.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-root/store';

blocksuite/affine/all/src/blocks/root/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-block-root/view';

blocksuite/affine/all/src/components/citation.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-components/citation';

blocksuite/affine/all/src/components/resource.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-components/resource';

blocksuite/affine/all/src/effects.ts

@@ -1,92 +1,24 @@
-import { effects as blockAttachmentEffects } from '@blocksuite/affine-block-attachment/effects';
-import { effects as blockBookmarkEffects } from '@blocksuite/affine-block-bookmark/effects';
-import { effects as blockCalloutEffects } from '@blocksuite/affine-block-callout/effects';
-import { effects as blockCodeEffects } from '@blocksuite/affine-block-code/effects';
-import { effects as blockDataViewEffects } from '@blocksuite/affine-block-data-view/effects';
-import { effects as blockDatabaseEffects } from '@blocksuite/affine-block-database/effects';
-import { effects as blockDividerEffects } from '@blocksuite/affine-block-divider/effects';
-import { effects as blockEdgelessTextEffects } from '@blocksuite/affine-block-edgeless-text/effects';
-import { effects as blockEmbedEffects } from '@blocksuite/affine-block-embed/effects';
-import { effects as blockFrameEffects } from '@blocksuite/affine-block-frame/effects';
-import { effects as blockImageEffects } from '@blocksuite/affine-block-image/effects';
-import { effects as blockLatexEffects } from '@blocksuite/affine-block-latex/effects';
-import { effects as blockListEffects } from '@blocksuite/affine-block-list/effects';
-import { effects as blockNoteEffects } from '@blocksuite/affine-block-note/effects';
-import { effects as blockParagraphEffects } from '@blocksuite/affine-block-paragraph/effects';
-import { effects as blockRootEffects } from '@blocksuite/affine-block-root/effects';
-import { effects as blockSurfaceEffects } from '@blocksuite/affine-block-surface/effects';
-import { effects as blockSurfaceRefEffects } from '@blocksuite/affine-block-surface-ref/effects';
-import { effects as blockTableEffects } from '@blocksuite/affine-block-table/effects';
-import { BlockSelection } from '@blocksuite/affine-components/block-selection';
-import { BlockZeroWidth } from '@blocksuite/affine-components/block-zero-width';
-import { effects as componentCaptionEffects } from '@blocksuite/affine-components/caption';
-import { effects as componentCardStyleDropdownMenuEffects } from '@blocksuite/affine-components/card-style-dropdown-menu';
-import { effects as componentCitationEffects } from '@blocksuite/affine-components/citation';
-import { effects as componentColorPickerEffects } from '@blocksuite/affine-components/color-picker';
-import { effects as componentContextMenuEffects } from '@blocksuite/affine-components/context-menu';
-import { effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker';
-import { effects as componentDropIndicatorEffects } from '@blocksuite/affine-components/drop-indicator';
-import { effects as componentEdgelessLineStylesEffects } from '@blocksuite/affine-components/edgeless-line-styles-panel';
-import { effects as componentEdgelessLineWidthEffects } from '@blocksuite/affine-components/edgeless-line-width-panel';
-import { effects as componentEdgelessShapeColorPickerEffects } from '@blocksuite/affine-components/edgeless-shape-color-picker';
-import { effects as componentEmbedCardModalEffects } from '@blocksuite/affine-components/embed-card-modal';
-import { FilterableListComponent } from '@blocksuite/affine-components/filterable-list';
-import { effects as componentHighlightDropdownMenuEffects } from '@blocksuite/affine-components/highlight-dropdown-menu';
-import { IconButton } from '@blocksuite/affine-components/icon-button';
-import { effects as componentLinkPreviewEffects } from '@blocksuite/affine-components/link-preview';
-import { effects as componentLinkedDocTitleEffects } from '@blocksuite/affine-components/linked-doc-title';
-import { effects as componentOpenDocDropdownMenuEffects } from '@blocksuite/affine-components/open-doc-dropdown-menu';
-import { effects as componentPortalEffects } from '@blocksuite/affine-components/portal';
-import { effects as componentSizeDropdownMenuEffects } from '@blocksuite/affine-components/size-dropdown-menu';
-import { SmoothCorner } from '@blocksuite/affine-components/smooth-corner';
-import { effects as componentToggleButtonEffects } from '@blocksuite/affine-components/toggle-button';
-import { ToggleSwitch } from '@blocksuite/affine-components/toggle-switch';
-import { effects as componentToolbarEffects } from '@blocksuite/affine-components/toolbar';
-import { effects as componentTooltipContentWithShortcutEffects } from '@blocksuite/affine-components/tooltip-content-with-shortcut';
-import { effects as componentViewDropdownMenuEffects } from '@blocksuite/affine-components/view-dropdown-menu';
-import { effects as fragmentDocTitleEffects } from '@blocksuite/affine-fragment-doc-title/effects';
-import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects';
-import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects';
-import { effects as inlineFootnoteEffects } from '@blocksuite/affine-inline-footnote/effects';
-import { effects as inlineLatexEffects } from '@blocksuite/affine-inline-latex/effects';
-import { effects as inlineLinkEffects } from '@blocksuite/affine-inline-link/effects';
-import { effects as inlineMentionEffects } from '@blocksuite/affine-inline-mention';
-import { effects as inlinePresetEffects } from '@blocksuite/affine-inline-preset/effects';
-import { effects as inlineReferenceEffects } from '@blocksuite/affine-inline-reference/effects';
-import { effects as richTextEffects } from '@blocksuite/affine-rich-text/effects';
-import { effects as widgetDragHandleEffects } from '@blocksuite/affine-widget-drag-handle/effects';
-import { effects as widgetEdgelessAutoConnectEffects } from '@blocksuite/affine-widget-edgeless-auto-connect/effects';
-import { effects as widgetFrameTitleEffects } from '@blocksuite/affine-widget-frame-title/effects';
-import { effects as widgetRemoteSelectionEffects } from '@blocksuite/affine-widget-remote-selection/effects';
-import { effects as widgetScrollAnchoringEffects } from '@blocksuite/affine-widget-scroll-anchoring/effects';
-import { effects as widgetSlashMenuEffects } from '@blocksuite/affine-widget-slash-menu/effects';
-import { effects as widgetToolbarEffects } from '@blocksuite/affine-widget-toolbar/effects';
-import { effects as dataViewEffects } from '@blocksuite/data-view/effects';
-import { effects as stdEffects } from '@blocksuite/std/effects';
+import { type effects as blockRootEffects } from '@blocksuite/affine-block-root/effects';
+import { type effects as componentCaptionEffects } from '@blocksuite/affine-components/caption';
+import { type effects as componentColorPickerEffects } from '@blocksuite/affine-components/color-picker';
+import { type effects as componentContextMenuEffects } from '@blocksuite/affine-components/context-menu';
+import { type effects as componentDatePickerEffects } from '@blocksuite/affine-components/date-picker';
+import { type effects as componentDropIndicatorEffects } from '@blocksuite/affine-components/drop-indicator';
+import { type effects as componentEmbedCardModalEffects } from '@blocksuite/affine-components/embed-card-modal';
+import { type effects as componentHighlightDropdownMenuEffects } from '@blocksuite/affine-components/highlight-dropdown-menu';
+import { type effects as componentLinkPreviewEffects } from '@blocksuite/affine-components/link-preview';
+import { type effects as componentLinkedDocTitleEffects } from '@blocksuite/affine-components/linked-doc-title';
+import { type effects as componentPortalEffects } from '@blocksuite/affine-components/portal';
+import { type effects as componentToggleButtonEffects } from '@blocksuite/affine-components/toggle-button';
+import { type effects as componentToolbarEffects } from '@blocksuite/affine-components/toolbar';
+import { type effects as componentViewDropdownMenuEffects } from '@blocksuite/affine-components/view-dropdown-menu';
+import { type effects as richTextEffects } from '@blocksuite/affine-rich-text/effects';
+import { type effects as stdEffects } from '@blocksuite/std/effects';
 
 export declare const _GLOBAL_:
   | typeof stdEffects
-  | typeof dataViewEffects
   | typeof richTextEffects
-  | typeof blockNoteEffects
-  | typeof blockAttachmentEffects
-  | typeof blockBookmarkEffects
-  | typeof blockFrameEffects
-  | typeof blockListEffects
-  | typeof blockParagraphEffects
-  | typeof blockEmbedEffects
-  | typeof blockSurfaceEffects
-  | typeof blockImageEffects
-  | typeof blockDatabaseEffects
-  | typeof blockSurfaceRefEffects
-  | typeof blockLatexEffects
-  | typeof blockEdgelessTextEffects
-  | typeof blockDividerEffects
-  | typeof blockDataViewEffects
-  | typeof blockCodeEffects
-  | typeof blockTableEffects
   | typeof blockRootEffects
-  | typeof blockCalloutEffects
   | typeof componentCaptionEffects
   | typeof componentContextMenuEffects
   | typeof componentDatePickerEffects
@@ -99,89 +31,4 @@ export declare const _GLOBAL_:
   | typeof componentToolbarEffects
   | typeof componentToggleButtonEffects
   | typeof componentColorPickerEffects
-  | typeof componentViewDropdownMenuEffects
-  | typeof widgetScrollAnchoringEffects
-  | typeof widgetFrameTitleEffects
-  | typeof widgetRemoteSelectionEffects
-  | typeof widgetDragHandleEffects
-  | typeof widgetEdgelessAutoConnectEffects
-  | typeof widgetToolbarEffects
-  | typeof widgetSlashMenuEffects
-  | typeof fragmentDocTitleEffects
-  | typeof fragmentFramePanelEffects
-  | typeof fragmentOutlineEffects;
-
-export function effects() {
-  stdEffects();
-
-  dataViewEffects();
-  richTextEffects();
-
-  inlineReferenceEffects();
-  inlinePresetEffects();
-  inlineLinkEffects();
-  inlineFootnoteEffects();
-  inlineLatexEffects();
-  inlineMentionEffects();
-
-  blockNoteEffects();
-  blockAttachmentEffects();
-  blockBookmarkEffects();
-  blockFrameEffects();
-  blockListEffects();
-  blockParagraphEffects();
-  blockEmbedEffects();
-  blockSurfaceEffects();
-  blockImageEffects();
-  blockDatabaseEffects();
-  blockSurfaceRefEffects();
-  blockLatexEffects();
-  blockEdgelessTextEffects();
-  blockDividerEffects();
-  blockDataViewEffects();
-  blockCodeEffects();
-  blockTableEffects();
-  blockRootEffects();
-  blockCalloutEffects();
-
-  componentCaptionEffects();
-  componentContextMenuEffects();
-  componentDatePickerEffects();
-  componentPortalEffects();
-  componentToolbarEffects();
-  componentDropIndicatorEffects();
-  componentToggleButtonEffects();
-  componentColorPickerEffects();
-  componentEmbedCardModalEffects();
-  componentLinkPreviewEffects();
-  componentLinkedDocTitleEffects();
-  componentCitationEffects();
-  componentCardStyleDropdownMenuEffects();
-  componentHighlightDropdownMenuEffects();
-  componentViewDropdownMenuEffects();
-  componentTooltipContentWithShortcutEffects();
-  componentSizeDropdownMenuEffects();
-  componentEdgelessLineWidthEffects();
-  componentEdgelessLineStylesEffects();
-  componentEdgelessShapeColorPickerEffects();
-  componentOpenDocDropdownMenuEffects();
-
-  widgetScrollAnchoringEffects();
-  widgetFrameTitleEffects();
-  widgetRemoteSelectionEffects();
-  widgetDragHandleEffects();
-  widgetEdgelessAutoConnectEffects();
-  widgetSlashMenuEffects();
-  widgetToolbarEffects();
-
-  fragmentDocTitleEffects();
-  fragmentFramePanelEffects();
-  fragmentOutlineEffects();
-
-  customElements.define('icon-button', IconButton);
-  customElements.define('smooth-corner', SmoothCorner);
-  customElements.define('toggle-switch', ToggleSwitch);
-  customElements.define('affine-filterable-list', FilterableListComponent);
-  customElements.define('block-zero-width', BlockZeroWidth);
-  customElements.define('affine-block-selection', BlockSelection);
-}
+  | typeof componentViewDropdownMenuEffects;

blocksuite/affine/all/src/extensions/effects.ts

@@ -1,12 +0,0 @@
-import { effects as blockRootEffects } from '@blocksuite/affine-block-root/effects';
-import { effects as fragmentDocTitleEffects } from '@blocksuite/affine-fragment-doc-title/effects';
-import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects';
-import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects';
-
-export function effects() {
-  blockRootEffects();
-
-  fragmentDocTitleEffects();
-  fragmentFramePanelEffects();
-  fragmentOutlineEffects();
-}

blocksuite/affine/all/src/extensions/migrating-store.ts

@@ -1,48 +0,0 @@
-import {
-  RootBlockHtmlAdapterExtension,
-  RootBlockMarkdownAdapterExtension,
-  RootBlockNotionHtmlAdapterExtension,
-} from '@blocksuite/affine-block-root';
-import {
-  type StoreExtensionContext,
-  StoreExtensionProvider,
-} from '@blocksuite/affine-ext-loader';
-import { RootBlockSchemaExtension } from '@blocksuite/affine-model';
-import type { ExtensionType } from '@blocksuite/store';
-
-const defaultBlockHtmlAdapterMatchers = [RootBlockHtmlAdapterExtension];
-
-const defaultBlockMarkdownAdapterMatchers = [RootBlockMarkdownAdapterExtension];
-
-const defaultBlockNotionHtmlAdapterMatchers: ExtensionType[] = [
-  RootBlockNotionHtmlAdapterExtension,
-];
-
-function getHtmlAdapterExtensions(): ExtensionType[] {
-  return [...defaultBlockHtmlAdapterMatchers];
-}
-
-function getMarkdownAdapterExtensions(): ExtensionType[] {
-  return [...defaultBlockMarkdownAdapterMatchers];
-}
-
-function getNotionHtmlAdapterExtensions(): ExtensionType[] {
-  return [...defaultBlockNotionHtmlAdapterMatchers];
-}
-
-const MigratingStoreExtensions: ExtensionType[] = [
-  RootBlockSchemaExtension,
-
-  getHtmlAdapterExtensions(),
-  getMarkdownAdapterExtensions(),
-  getNotionHtmlAdapterExtensions(),
-].flat();
-
-export class MigratingStoreExtension extends StoreExtensionProvider {
-  override name = 'migrating';
-
-  override setup(context: StoreExtensionContext) {
-    super.setup(context);
-    context.register(MigratingStoreExtensions);
-  }
-}

blocksuite/affine/all/src/extensions/migrating-view.ts

@@ -1,42 +0,0 @@
-import {
-  type ViewExtensionContext,
-  ViewExtensionProvider,
-} from '@blocksuite/affine-ext-loader';
-
-import { effects } from './effects';
-import {
-  MigratingEdgelessEditorBlockSpecs,
-  MigratingPageEditorBlockSpecs,
-  MigratingPreviewEdgelessEditorBlockSpecs,
-  MigratingPreviewPageEditorBlockSpecs,
-} from './migrating';
-
-export class MigratingViewExtension extends ViewExtensionProvider {
-  override name = 'migrating';
-
-  override effect() {
-    super.effect();
-    effects();
-  }
-
-  override setup(context: ViewExtensionContext) {
-    super.setup(context);
-    const scope = context.scope;
-    if (scope === 'preview-page') {
-      context.register(MigratingPreviewPageEditorBlockSpecs);
-      return;
-    }
-    if (scope === 'preview-edgeless') {
-      context.register(MigratingPreviewEdgelessEditorBlockSpecs);
-      return;
-    }
-    if (scope === 'page' || scope === 'mobile-page') {
-      context.register(MigratingPageEditorBlockSpecs);
-      return;
-    }
-    if (scope === 'edgeless' || scope === 'mobile-edgeless') {
-      context.register(MigratingEdgelessEditorBlockSpecs);
-      return;
-    }
-  }
-}

blocksuite/affine/all/src/extensions/migrating.ts

@@ -1,26 +0,0 @@
-import {
-  EdgelessBuiltInSpecs,
-  PageRootBlockSpec,
-  PreviewEdgelessRootBlockSpec,
-  PreviewPageRootBlockSpec,
-  ReadOnlyClipboard,
-} from '@blocksuite/affine-block-root';
-import type { ExtensionType } from '@blocksuite/store';
-
-export const MigratingEdgelessEditorBlockSpecs: ExtensionType[] = [
-  EdgelessBuiltInSpecs,
-].flat();
-
-export const MigratingPageEditorBlockSpecs: ExtensionType[] = [
-  PageRootBlockSpec,
-].flat();
-
-export const MigratingPreviewEdgelessEditorBlockSpecs: ExtensionType[] = [
-  PreviewEdgelessRootBlockSpec,
-  ReadOnlyClipboard,
-].flat();
-
-export const MigratingPreviewPageEditorBlockSpecs: ExtensionType[] = [
-  PreviewPageRootBlockSpec,
-  ReadOnlyClipboard,
-].flat();

blocksuite/affine/all/src/extensions/store.ts

@@ -7,12 +7,14 @@ import { DatabaseStoreExtension } from '@blocksuite/affine-block-database/store'
 import { DividerStoreExtension } from '@blocksuite/affine-block-divider/store';
 import { EdgelessTextStoreExtension } from '@blocksuite/affine-block-edgeless-text/store';
 import { EmbedStoreExtension } from '@blocksuite/affine-block-embed/store';
+import { EmbedDocStoreExtension } from '@blocksuite/affine-block-embed-doc/store';
 import { FrameStoreExtension } from '@blocksuite/affine-block-frame/store';
 import { ImageStoreExtension } from '@blocksuite/affine-block-image/store';
 import { LatexStoreExtension } from '@blocksuite/affine-block-latex/store';
 import { ListStoreExtension } from '@blocksuite/affine-block-list/store';
 import { NoteStoreExtension } from '@blocksuite/affine-block-note/store';
 import { ParagraphStoreExtension } from '@blocksuite/affine-block-paragraph/store';
+import { RootStoreExtension } from '@blocksuite/affine-block-root/store';
 import { SurfaceStoreExtension } from '@blocksuite/affine-block-surface/store';
 import { SurfaceRefStoreExtension } from '@blocksuite/affine-block-surface-ref/store';
 import { TableStoreExtension } from '@blocksuite/affine-block-table/store';
@@ -29,8 +31,6 @@ import { LinkStoreExtension } from '@blocksuite/affine-inline-link/store';
 import { InlinePresetStoreExtension } from '@blocksuite/affine-inline-preset/store';
 import { ReferenceStoreExtension } from '@blocksuite/affine-inline-reference/store';
 
-import { MigratingStoreExtension } from './migrating-store';
-
 export function getInternalStoreExtensions() {
   return [
     FoundationStoreExtension,
@@ -44,6 +44,7 @@ export function getInternalStoreExtensions() {
     DividerStoreExtension,
     EdgelessTextStoreExtension,
     EmbedStoreExtension,
+    EmbedDocStoreExtension,
     FrameStoreExtension,
     ImageStoreExtension,
     LatexStoreExtension,
@@ -53,6 +54,7 @@ export function getInternalStoreExtensions() {
     SurfaceRefStoreExtension,
     TableStoreExtension,
     SurfaceStoreExtension,
+    RootStoreExtension,
 
     FootnoteStoreExtension,
     LinkStoreExtension,
@@ -66,7 +68,5 @@ export function getInternalStoreExtensions() {
     ConnectorStoreExtension,
     GroupStoreExtension,
     TextStoreExtension,
-
-    MigratingStoreExtension,
   ];
 }

blocksuite/affine/all/src/extensions/view.ts

@@ -7,16 +7,21 @@ import { DatabaseViewExtension } from '@blocksuite/affine-block-database/view';
 import { DividerViewExtension } from '@blocksuite/affine-block-divider/view';
 import { EdgelessTextViewExtension } from '@blocksuite/affine-block-edgeless-text/view';
 import { EmbedViewExtension } from '@blocksuite/affine-block-embed/view';
+import { EmbedDocViewExtension } from '@blocksuite/affine-block-embed-doc/view';
 import { FrameViewExtension } from '@blocksuite/affine-block-frame/view';
 import { ImageViewExtension } from '@blocksuite/affine-block-image/view';
 import { LatexViewExtension } from '@blocksuite/affine-block-latex/view';
 import { ListViewExtension } from '@blocksuite/affine-block-list/view';
 import { NoteViewExtension } from '@blocksuite/affine-block-note/view';
 import { ParagraphViewExtension } from '@blocksuite/affine-block-paragraph/view';
+import { RootViewExtension } from '@blocksuite/affine-block-root/view';
 import { SurfaceViewExtension } from '@blocksuite/affine-block-surface/view';
 import { SurfaceRefViewExtension } from '@blocksuite/affine-block-surface-ref/view';
 import { TableViewExtension } from '@blocksuite/affine-block-table/view';
 import { FoundationViewExtension } from '@blocksuite/affine-foundation/view';
+import { DocTitleViewExtension } from '@blocksuite/affine-fragment-doc-title/view';
+import { FramePanelViewExtension } from '@blocksuite/affine-fragment-frame-panel/view';
+import { OutlineViewExtension } from '@blocksuite/affine-fragment-outline/view';
 import { BrushViewExtension } from '@blocksuite/affine-gfx-brush/view';
 import { ConnectorViewExtension } from '@blocksuite/affine-gfx-connector/view';
 import { GroupViewExtension } from '@blocksuite/affine-gfx-group/view';
@@ -47,8 +52,6 @@ import { SlashMenuViewExtension } from '@blocksuite/affine-widget-slash-menu/vie
 import { ToolbarViewExtension } from '@blocksuite/affine-widget-toolbar/view';
 import { ViewportOverlayViewExtension } from '@blocksuite/affine-widget-viewport-overlay/view';
 
-import { MigratingViewExtension } from './migrating-view';
-
 export function getInternalViewExtensions() {
   return [
     FoundationViewExtension,
@@ -75,6 +78,7 @@ export function getInternalViewExtensions() {
     DividerViewExtension,
     EdgelessTextViewExtension,
     EmbedViewExtension,
+    EmbedDocViewExtension,
     FrameViewExtension,
     ImageViewExtension,
     LatexViewExtension,
@@ -84,6 +88,7 @@ export function getInternalViewExtensions() {
     SurfaceRefViewExtension,
     TableViewExtension,
     SurfaceViewExtension,
+    RootViewExtension,
 
     // Inline
     FootnoteViewExtension,
@@ -97,7 +102,6 @@ export function getInternalViewExtensions() {
     DragHandleViewExtension,
     EdgelessAutoConnectViewExtension,
     EdgelessToolbarViewExtension,
-    MigratingViewExtension,
     FrameTitleViewExtension,
     KeyboardToolbarViewExtension,
     LinkedDocViewExtension,
@@ -108,5 +112,10 @@ export function getInternalViewExtensions() {
     ViewportOverlayViewExtension,
     EdgelessZoomToolbarViewExtension,
     PageDraggingAreaViewExtension,
+
+    // Fragment
+    DocTitleViewExtension,
+    FramePanelViewExtension,
+    OutlineViewExtension,
   ];
 }

blocksuite/affine/all/src/foundation/store.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-foundation/store';

blocksuite/affine/all/src/foundation/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-foundation/view';

blocksuite/affine/all/src/fragments/doc-title/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-fragment-doc-title/view';

blocksuite/affine/all/src/fragments/frame-panel/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-fragment-frame-panel/view';

blocksuite/affine/all/src/fragments/outline/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-fragment-outline/view';

blocksuite/affine/all/tsconfig.json

@@ -16,6 +16,7 @@
     { "path": "../blocks/divider" },
     { "path": "../blocks/edgeless-text" },
     { "path": "../blocks/embed" },
+    { "path": "../blocks/embed-doc" },
     { "path": "../blocks/frame" },
     { "path": "../blocks/image" },
     { "path": "../blocks/latex" },

blocksuite/affine/blocks/attachment/package.json

@@ -10,7 +10,6 @@
   "author": "toeverything",
   "license": "MIT",
   "dependencies": {
-    "@blocksuite/affine-block-embed": "workspace:*",
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
@@ -24,7 +23,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "file-type": "^20.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/attachment/src/attachment-block.ts

@@ -1,10 +1,16 @@
-import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
 import {
   CaptionedBlockComponent,
   SelectedStyle,
 } from '@blocksuite/affine-components/caption';
-import { getAttachmentFileIcon } from '@blocksuite/affine-components/icons';
+import {
+  getAttachmentFileIcon,
+  getLoadingIconWith,
+} from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
+import {
+  type ResolvedStateInfo,
+  ResourceController,
+} from '@blocksuite/affine-components/resource';
 import { toast } from '@blocksuite/affine-components/toast';
 import {
   type AttachmentBlockModel,
@@ -22,23 +28,26 @@ import {
   WarningIcon,
 } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
-import { Slice } from '@blocksuite/store';
-import { type BlobState } from '@blocksuite/sync';
-import { effect, signal } from '@preact/signals-core';
+import { nanoid, Slice } from '@blocksuite/store';
+import { computed, signal } from '@preact/signals-core';
 import { html, type TemplateResult } from 'lit';
-import { property } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
+import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 
 import { AttachmentEmbedProvider } from './embed';
 import { styles } from './styles';
 import { downloadAttachmentBlob, refreshData } from './utils';
-type State = 'loading' | 'uploading' | 'warning' | 'oversize' | 'none';
+
+type AttachmentResolvedStateInfo = ResolvedStateInfo & {
+  kind?: TemplateResult;
+};
+
 @Peekable({
   enableOn: ({ model }: AttachmentBlockComponent) => {
-    return !model.doc.readonly && model.props.type.endsWith('pdf');
+    return !model.store.readonly && model.props.type.endsWith('pdf');
   },
 })
 export class AttachmentBlockComponent extends CaptionedBlockComponent<AttachmentBlockModel> {
@@ -46,7 +55,13 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   blockDraggable = true;
 
-  blobState$ = signal<Partial<BlobState>>({});
+  resourceController = new ResourceController(
+    computed(() => this.model.props.sourceId$.value)
+  );
+
+  get blobUrl() {
+    return this.resourceController.blobUrl$.value;
+  }
 
   protected containerStyleMap = styleMap({
     position: 'relative',
@@ -69,7 +84,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
   };
 
   copy = () => {
-    const slice = Slice.fromModels(this.doc, [this.model]);
+    const slice = Slice.fromModels(this.store, [this.model]);
     this.std.clipboard.copySlice(slice).catch(console.error);
     toast(this.host, 'Copied to clipboard');
   };
@@ -93,33 +108,23 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     window.open(blobUrl, '_blank');
   };
 
+  // Refreshes data.
   refreshData = () => {
-    refreshData(this.std, this).catch(console.error);
+    refreshData(this).catch(console.error);
   };
 
-  updateBlobState(state: Partial<BlobState>) {
-    this.blobState$.value = { ...this.blobState$.value, ...state };
-  }
+  private readonly _refreshKey$ = signal<string | null>(null);
 
-  determineState = (
-    loading: boolean,
-    uploading: boolean,
-    overSize: boolean,
-    error: boolean
-  ): State => {
-    if (overSize) return 'oversize';
-    if (error) return 'warning';
-    if (uploading) return 'uploading';
-    if (loading) return 'loading';
-    return 'none';
+  // Refreshes the embed component.
+  reload = () => {
+    if (this.model.props.embed) {
+      this._refreshKey$.value = nanoid();
+      return;
+    }
+
+    this.refreshData();
   };
 
-  protected get embedView() {
-    return this.std
-      .get(AttachmentEmbedProvider)
-      .render(this.model, this.blobUrl ?? undefined, this._maxFileSize);
-  }
-
   private _selectBlock() {
     const selectionManager = this.host.selection;
     const blockSelection = selectionManager.create(BlockSelection, {
@@ -133,46 +138,22 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
     this.contentEditable = 'false';
 
+    this.resourceController.setEngine(this.std.store.blobSync);
+
+    this.disposables.add(this.resourceController.subscribe());
+    this.disposables.add(this.resourceController);
+
     this.refreshData();
 
-    this.disposables.add(
-      effect(() => {
-        const blobId = this.model.props.sourceId$.value;
-        if (!blobId) return;
-
-        const blobState$ = this.std.store.blobSync.blobState$(blobId);
-        if (!blobState$) return;
-
-        const subscription = blobState$.subscribe(state => {
-          if (state.overSize || state.errorMessage) {
-            state.uploading = false;
-            state.downloading = false;
-          }
-
-          this.updateBlobState(state);
-        });
-
-        return () => subscription.unsubscribe();
-      })
-    );
-
-    if (!this.model.props.style && !this.doc.readonly) {
-      this.doc.withoutTransact(() => {
-        this.doc.updateBlock(this.model, {
+    if (!this.model.props.style && !this.store.readonly) {
+      this.store.withoutTransact(() => {
+        this.store.updateBlock(this.model, {
           style: AttachmentBlockStyles[1],
         });
       });
     }
   }
 
-  override disconnectedCallback() {
-    const blobUrl = this.blobUrl;
-    if (blobUrl) {
-      URL.revokeObjectURL(blobUrl);
-    }
-    super.disconnectedCallback();
-  }
-
   override firstUpdated() {
     // lazy bindings
     this.disposables.addFromEvent(this, 'click', this.onClick);
@@ -226,128 +207,135 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
 
   protected renderWithHorizontal(
     classInfo: ClassInfo,
-    icon: TemplateResult,
-    title: string,
-    description: string,
-    kind: TemplateResult,
-    state: State
+    { icon, title, description, kind, state }: AttachmentResolvedStateInfo
   ) {
-    return html`<div class=${classMap(classInfo)}>
-      <div class="affine-attachment-content">
-        <div class="affine-attachment-content-title">
-          <div class="affine-attachment-content-title-icon">${icon}</div>
+    return html`
+      <div class=${classMap(classInfo)}>
+        <div class="affine-attachment-content">
+          <div class="affine-attachment-content-title">
+            <div class="affine-attachment-content-title-icon">${icon}</div>
+            <div class="affine-attachment-content-title-text truncate">
+              ${title}
+            </div>
+          </div>
 
-          <div class="affine-attachment-content-title-text truncate">
-            ${title}
+          <div class="affine-attachment-content-description">
+            <div class="affine-attachment-content-info truncate">
+              ${description}
+            </div>
+            ${choose(state, [
+              ['error', this.renderReloadButton],
+              ['error:oversize', this.renderUpgradeButton],
+            ])}
           </div>
         </div>
 
-        <div class="affine-attachment-content-description">
-          <div class="affine-attachment-content-info truncate">
-            ${description}
-          </div>
-          ${choose(state, [
-            ['oversize', this.renderUpgradeButton],
-            ['warning', this.renderReloadButton],
-          ])}
-        </div>
+        <div class="affine-attachment-banner">${kind}</div>
       </div>
-
-      <div class="affine-attachment-banner">${kind}</div>
-    </div>`;
+    `;
   }
 
   protected renderWithVertical(
     classInfo: ClassInfo,
-    icon: TemplateResult,
-    title: string,
-    description: string,
-    kind: TemplateResult,
-    state?: State
+    { icon, title, description, kind, state }: AttachmentResolvedStateInfo
   ) {
-    return html`<div class=${classMap(classInfo)}>
-      <div class="affine-attachment-content">
-        <div class="affine-attachment-content-title">
-          <div class="affine-attachment-content-title-icon">${icon}</div>
+    return html`
+      <div class=${classMap(classInfo)}>
+        <div class="affine-attachment-content">
+          <div class="affine-attachment-content-title">
+            <div class="affine-attachment-content-title-icon">${icon}</div>
+            <div class="affine-attachment-content-title-text truncate">
+              ${title}
+            </div>
+          </div>
 
-          <div class="affine-attachment-content-title-text truncate">
-            ${title}
+          <div class="affine-attachment-content-info truncate">
+            ${description}
           </div>
         </div>
 
-        <div class="affine-attachment-content-info truncate">
-          ${description}
+        <div class="affine-attachment-banner">
+          ${kind}
+          ${choose(state, [
+            ['error', this.renderReloadButton],
+            ['error:oversize', this.renderUpgradeButton],
+          ])}
         </div>
       </div>
-
-      <div class="affine-attachment-banner">
-        ${kind}
-        ${choose(state, [
-          ['oversize', this.renderUpgradeButton],
-          ['warning', this.renderReloadButton],
-        ])}
-      </div>
-    </div>`;
+    `;
   }
 
-  protected renderCard = () => {
-    const { name, size, style } = this.model.props;
-    const cardStyle = style ?? AttachmentBlockStyles[1];
-
+  protected resolvedState$ = computed<AttachmentResolvedStateInfo>(() => {
     const theme = this.std.get(ThemeProvider).theme$.value;
-    const { LoadingIcon } = getEmbedCardIcons(theme);
+    const loadingIcon = getLoadingIconWith(theme);
 
-    const blobState = this.blobState$.value;
-    const {
-      uploading = false,
-      downloading = false,
-      overSize = false,
-      errorMessage,
-    } = blobState;
-    const warning = !overSize && Boolean(errorMessage);
-    const error = overSize || warning;
-    const loading = !error && downloading;
-    const state = this.determineState(loading, uploading, overSize, error);
+    const size = this.model.props.size;
+    const name = this.model.props.name$.value;
+    const kind = getAttachmentFileIcon(name.split('.').pop() ?? '');
+
+    const resolvedState = this.resourceController.resolveStateWith({
+      loadingIcon,
+      errorIcon: WarningIcon(),
+      icon: AttachmentIcon(),
+      title: name,
+      description: humanFileSize(size),
+    });
+
+    return { ...resolvedState, kind };
+  });
+
+  protected renderCardView = () => {
+    const resolvedState = this.resolvedState$.value;
+    const cardStyle = this.model.props.style$.value ?? AttachmentBlockStyles[1];
 
     const classInfo = {
       'affine-attachment-card': true,
       [cardStyle]: true,
-      error,
-      loading,
+      loading: resolvedState.loading,
+      error: resolvedState.error,
     };
 
-    const icon = loading
-      ? LoadingIcon
-      : error
-        ? WarningIcon()
-        : AttachmentIcon();
-    const title = uploading ? 'Uploading...' : loading ? 'Loading...' : name;
-    const description = errorMessage || humanFileSize(size);
-    const kind = getAttachmentFileIcon(name.split('.').pop() ?? '');
-
     return when(
       cardStyle === 'cubeThick',
-      () =>
-        this.renderWithVertical(
-          classInfo,
-          icon,
-          title,
-          description,
-          kind,
-          state
-        ),
-      () =>
-        this.renderWithHorizontal(
-          classInfo,
-          icon,
-          title,
-          description,
-          kind,
-          state
-        )
+      () => this.renderWithVertical(classInfo, resolvedState),
+      () => this.renderWithHorizontal(classInfo, resolvedState)
     );
   };
 
+  protected renderEmbedView = () => {
+    const { model, blobUrl } = this;
+    if (!model.props.embed || !blobUrl) return null;
+
+    const { std, _maxFileSize } = this;
+    const provider = std.get(AttachmentEmbedProvider);
+
+    const render = provider.getRender(model, _maxFileSize);
+    if (!render) return null;
+
+    const enabled = provider.shouldShowStatus(model);
+
+    return html`
+      <div class="affine-attachment-embed-container">
+        ${guard([this._refreshKey$.value], () => render(model, blobUrl))}
+      </div>
+      ${when(enabled, () => {
+        const resolvedState = this.resolvedState$.value;
+        if (resolvedState.state !== 'error') return null;
+        // It should be an error messge.
+        const message = resolvedState.description;
+        if (!message) return null;
+
+        return html`
+          <affine-resource-status
+            class="affine-attachment-embed-status"
+            .message=${message}
+            .reload=${() => this.reload()}
+          ></affine-resource-status>
+        `;
+      })}
+    `;
+  };
+
   private readonly _renderCitation = () => {
     const { name, footnoteIdentifier } = this.model.props;
     const fileType = name.split('.').pop() ?? '';
@@ -372,23 +360,12 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         ${when(
           this.isCitation,
           () => this._renderCitation(),
-          () =>
-            when(
-              this.embedView,
-              () =>
-                html`<div class="affine-attachment-embed-container">
-                  ${this.embedView}
-                </div>`,
-              this.renderCard
-            )
+          () => this.renderEmbedView() ?? this.renderCardView()
         )}
       </div>
     `;
   }
 
-  @property({ attribute: false })
-  accessor blobUrl: string | null = null;
-
   override accessor selectedStyle = SelectedStyle.Border;
 
   override accessor useCaptionEditor = true;

blocksuite/affine/blocks/attachment/src/attachment-edgeless-block.ts

@@ -1,10 +1,14 @@
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
-import { AttachmentBlockStyles } from '@blocksuite/affine-model';
+import {
+  AttachmentBlockSchema,
+  AttachmentBlockStyles,
+} from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { toGfxBlockComponent } from '@blocksuite/std';
+import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { AttachmentBlockComponent } from './attachment-block.js';
@@ -48,3 +52,21 @@ declare global {
     'affine-edgeless-attachment': AttachmentEdgelessBlockComponent;
   }
 }
+
+export const AttachmentBlockInteraction = GfxViewInteractionExtension(
+  AttachmentBlockSchema.model.flavour,
+  {
+    resizeConstraint: {
+      lockRatio: true,
+    },
+    handleRotate: () => {
+      return {
+        beforeRotate: context => {
+          context.set({
+            rotatable: false,
+          });
+        },
+      };
+    },
+  }
+);

blocksuite/affine/blocks/attachment/src/attachment-spec.ts

@@ -5,6 +5,7 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { AttachmentBlockAdapterExtensions } from './adapters/extension.js';
+import { AttachmentBlockInteraction } from './attachment-edgeless-block.js';
 import { AttachmentDropOption } from './attachment-service.js';
 import { attachmentSlashMenuConfig } from './configs/slash-menu.js';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
@@ -26,6 +27,7 @@ export const AttachmentBlockSpec: ExtensionType[] = [
   AttachmentEmbedConfigExtension(),
   AttachmentEmbedService,
   AttachmentBlockAdapterExtensions,
+  AttachmentBlockInteraction,
   createBuiltinToolbarConfigExtension(flavour),
   SlashMenuConfigExtension(flavour, attachmentSlashMenuConfig),
 ].flat();

blocksuite/affine/blocks/attachment/src/components/rename-model.ts

@@ -41,7 +41,7 @@ export const RenameModal = ({
       toast(editorHost, 'File name cannot be empty');
       return;
     }
-    model.doc.updateBlock(model, {
+    model.store.updateBlock(model, {
       name: newFileName,
     });
     abort();

blocksuite/affine/blocks/attachment/src/configs/slash-menu.ts

@@ -18,7 +18,7 @@ export const attachmentSlashMenuConfig: SlashMenuConfig = {
       searchAlias: ['file'],
       group: '4_Content & Media@3',
       when: ({ model }) =>
-        model.doc.schema.flavourSchemaMap.has('affine:attachment'),
+        model.store.schema.flavourSchemaMap.has('affine:attachment'),
       action: ({ std, model }) => {
         (async () => {
           const file = await openFileOrFiles();
@@ -41,7 +41,7 @@ export const attachmentSlashMenuConfig: SlashMenuConfig = {
       },
       group: '4_Content & Media@4',
       when: ({ model }) =>
-        model.doc.schema.flavourSchemaMap.has('affine:attachment'),
+        model.store.schema.flavourSchemaMap.has('affine:attachment'),
       action: ({ std, model }) => {
         (async () => {
           const file = await openFileOrFiles();

blocksuite/affine/blocks/attachment/src/configs/toolbar.ts

@@ -77,13 +77,19 @@ export const attachmentViewDropdownMenu = {
         const model = ctx.getCurrentModelByType(AttachmentBlockModel);
         if (!model) return;
 
-        if (!ctx.hasSelectedSurfaceModels) {
+        const provider = ctx.std.get(AttachmentEmbedProvider);
+
+        // TODO(@fundon): should auto focus image block.
+        if (
+          provider.shouldBeConverted(model) &&
+          !ctx.hasSelectedSurfaceModels
+        ) {
           // Clears
           ctx.reset();
           ctx.select('note');
         }
 
-        ctx.std.get(AttachmentEmbedProvider).convertTo(model);
+        provider.convertTo(model);
 
         ctx.track('SelectedView', {
           ...trackBaseProps,
@@ -94,18 +100,32 @@ export const attachmentViewDropdownMenu = {
     },
   ],
   content(ctx) {
-    const model = ctx.getCurrentModelByType(AttachmentBlockModel);
-    if (!model) return null;
+    const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
+    if (!block) return null;
 
+    const model = block.model;
     const embedProvider = ctx.std.get(AttachmentEmbedProvider);
-    const actions = this.actions.map(action => ({ ...action }));
-    const viewType$ = computed(() => {
-      const [cardAction, embedAction] = actions;
+    const actions = computed(() => {
+      const [cardAction, embedAction] = this.actions.map(action => ({
+        ...action,
+      }));
+
+      const ok = block.resourceController.resolvedState$.value.state === 'none';
+      const sourceId = Boolean(model.props.sourceId$.value);
       const embed = model.props.embed$.value ?? false;
+      // 1. Check whether `sourceId` exists.
+      // 2. Check if `embedded` is allowed.
+      // 3. Check `blobState$`
+      const allowed = ok && sourceId && embedProvider.embedded(model) && !embed;
 
       cardAction.disabled = !embed;
-      embedAction.disabled = embed && embedProvider.embedded(model);
+      embedAction.disabled = !allowed;
 
+      return [cardAction, embedAction];
+    });
+    const viewType$ = computed(() => {
+      const [cardAction, embedAction] = actions.value;
+      const embed = model.props.embed$.value ?? false;
       return embed ? embedAction.label : cardAction.label;
     });
     const onToggle = (e: CustomEvent<boolean>) => {
@@ -123,7 +143,7 @@ export const attachmentViewDropdownMenu = {
       model,
       html`<affine-view-dropdown-menu
         @toggle=${onToggle}
-        .actions=${actions}
+        .actions=${actions.value}
         .context=${ctx}
         .viewType$=${viewType$}
       ></affine-view-dropdown-menu>`
@@ -243,7 +263,7 @@ const builtinToolbarConfig = {
       icon: ResetIcon(),
       run(ctx) {
         const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
-        block?.refreshData();
+        block?.reload();
       },
     },
     {

blocksuite/affine/blocks/attachment/src/embed.ts

@@ -3,6 +3,10 @@ import {
   type ImageBlockProps,
   MAX_IMAGE_WIDTH,
 } from '@blocksuite/affine-model';
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
 import { FileSizeLimitProvider } from '@blocksuite/affine-shared/services';
 import {
   readImageSize,
@@ -17,6 +21,7 @@ import type { ExtensionType } from '@blocksuite/store';
 import { Extension } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { getAttachmentBlob } from './utils';
 
@@ -34,9 +39,22 @@ export type AttachmentEmbedConfig = {
     std: BlockStdScope
   ) => Promise<void> | void;
   /**
-   * The template will be used to render the embed view.
+   * Renders the embed view.
    */
-  template?: (model: AttachmentBlockModel, blobUrl: string) => TemplateResult;
+  render?: (
+    model: AttachmentBlockModel,
+    blobUrl: string
+  ) => TemplateResult | null;
+
+  /**
+   * Should show status when turned on.
+   */
+  shouldShowStatus?: boolean;
+
+  /**
+   * Should block type conversion be required.
+   */
+  shouldBeConverted?: boolean;
 };
 
 // Single embed config.
@@ -97,39 +115,53 @@ export class AttachmentEmbedService extends Extension {
   // Converts to embed view.
   convertTo(model: AttachmentBlockModel, maxFileSize = this._maxFileSize) {
     const config = this.values.find(config => config.check(model, maxFileSize));
-    if (!config?.action) {
-      model.doc.updateBlock(model, { embed: true });
+
+    if (config?.action) {
+      config.action(model, this.std)?.catch(console.error);
       return;
     }
-    config.action(model, this.std)?.catch(console.error);
+
+    model.store.updateBlock(model, { embed: true });
   }
 
   embedded(model: AttachmentBlockModel, maxFileSize = this._maxFileSize) {
     return this.values.some(config => config.check(model, maxFileSize));
   }
 
-  render(
+  getRender(model: AttachmentBlockModel, maxFileSize = this._maxFileSize) {
+    return (
+      this.values.find(config => config.check(model, maxFileSize))?.render ??
+      null
+    );
+  }
+
+  shouldShowStatus(
     model: AttachmentBlockModel,
-    blobUrl?: string,
     maxFileSize = this._maxFileSize
   ) {
-    if (!model.props.embed || !blobUrl) return;
+    return (
+      this.values.find(config => config.check(model, maxFileSize))
+        ?.shouldShowStatus ?? false
+    );
+  }
 
-    const config = this.values.find(config => config.check(model, maxFileSize));
-    if (!config || !config.template) {
-      console.error('No embed view template found!', model, model.props.type);
-      return;
-    }
-
-    return config.template(model, blobUrl);
+  shouldBeConverted(
+    model: AttachmentBlockModel,
+    maxFileSize = this._maxFileSize
+  ) {
+    return (
+      this.values.find(config => config.check(model, maxFileSize))
+        ?.shouldBeConverted ?? false
+    );
   }
 }
 
 const embedConfig: AttachmentEmbedConfig[] = [
   {
     name: 'image',
+    shouldBeConverted: true,
     check: model =>
-      model.doc.schema.flavourSchemaMap.has('affine:image') &&
+      model.store.schema.flavourSchemaMap.has('affine:image') &&
       model.props.type.startsWith('image/'),
     async action(model, std) {
       const component = std.view.getBlock(model.id);
@@ -140,16 +172,30 @@ const embedConfig: AttachmentEmbedConfig[] = [
   },
   {
     name: 'pdf',
+    shouldShowStatus: true,
     check: (model, maxFileSize) =>
       model.props.type === 'application/pdf' && model.props.size <= maxFileSize,
-    template: (_, blobUrl) => {
+    action: model => {
+      const bound = Bound.deserialize(model.props.xywh);
+      bound.w = EMBED_CARD_WIDTH.pdf;
+      bound.h = EMBED_CARD_HEIGHT.pdf;
+      model.store.updateBlock(model, {
+        embed: true,
+        style: 'pdf',
+        xywh: bound.serialize(),
+      });
+    },
+    render: (_, blobUrl) => {
       // More options: https://tinytip.co/tips/html-pdf-params/
       // https://chromium.googlesource.com/chromium/src/+/refs/tags/121.0.6153.1/chrome/browser/resources/pdf/open_pdf_params_parser.ts
       const parameters = '#toolbar=0';
       return html`
         <iframe
-          style="width: 100%; color-scheme: auto;"
-          height="480"
+          style=${styleMap({
+            width: '100%',
+            minHeight: '480px',
+            colorScheme: 'auto',
+          })}
           src=${blobUrl + parameters}
           loading="lazy"
           scrolling="no"
@@ -157,6 +203,7 @@ const embedConfig: AttachmentEmbedConfig[] = [
           allowTransparency
           allowfullscreen
           type="application/pdf"
+          credentialless
         ></iframe>
         <div class="affine-attachment-embed-event-mask"></div>
       `;
@@ -164,23 +211,44 @@ const embedConfig: AttachmentEmbedConfig[] = [
   },
   {
     name: 'video',
+    shouldShowStatus: true,
     check: (model, maxFileSize) =>
       model.props.type.startsWith('video/') && model.props.size <= maxFileSize,
-    template: (_, blobUrl) =>
+    action: model => {
+      const bound = Bound.deserialize(model.props.xywh);
+      bound.w = EMBED_CARD_WIDTH.video;
+      bound.h = EMBED_CARD_HEIGHT.video;
+      model.store.updateBlock(model, {
+        embed: true,
+        style: 'video',
+        xywh: bound.serialize(),
+      });
+    },
+    render: (_, blobUrl) =>
       html`<video
-        style="max-height: max-content;"
-        width="100%;"
-        height="480"
-        controls
+        style=${styleMap({
+          display: 'flex',
+          objectFit: 'cover',
+          backgroundSize: 'cover',
+          width: '100%',
+          height: '100%',
+        })}
         src=${blobUrl}
+        width="100%"
+        height="100%"
+        controls
       ></video>`,
   },
   {
     name: 'audio',
     check: (model, maxFileSize) =>
       model.props.type.startsWith('audio/') && model.props.size <= maxFileSize,
-    template: (_, blobUrl) =>
-      html`<audio controls src=${blobUrl} style="margin: 4px;"></audio>`,
+    render: (_, blobUrl) =>
+      html`<audio
+        style=${styleMap({ margin: '4px' })}
+        src=${blobUrl}
+        controls
+      ></audio>`,
   },
 ];
 
@@ -188,7 +256,7 @@ const embedConfig: AttachmentEmbedConfig[] = [
  * Turn the attachment block into an image block.
  */
 async function turnIntoImageBlock(model: AttachmentBlockModel) {
-  if (!model.doc.schema.flavourSchemaMap.has('affine:image')) {
+  if (!model.store.schema.flavourSchemaMap.has('affine:image')) {
     console.error('The image flavour is not supported!');
     return;
   }

blocksuite/affine/blocks/attachment/src/styles.ts

@@ -6,9 +6,9 @@ export const styles = css`
     border-radius: 8px;
     box-sizing: border-box;
     user-select: none;
+    overflow: hidden;
     border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
     background: ${unsafeCSSVarV2('layer/background/primary')};
-    overflow: hidden;
 
     &.focused {
       border-color: ${unsafeCSSVarV2('layer/insideBorder/primaryBorder')};
@@ -30,6 +30,13 @@ export const styles = css`
     min-width: 0;
   }
 
+  .truncate {
+    align-self: stretch;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
   .affine-attachment-content-title {
     display: flex;
     flex-direction: row;
@@ -47,13 +54,6 @@ export const styles = css`
     color: var(--affine-text-primary-color);
   }
 
-  .truncate {
-    align-self: stretch;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
   .affine-attachment-content-title-text {
     color: var(--affine-text-primary-color);
     font-family: var(--affine-font-family);
@@ -117,6 +117,11 @@ export const styles = css`
     }
   }
 
+  .affine-attachment-card.loading,
+  .affine-attachment-card.error {
+    background: ${unsafeCSSVarV2('layer/background/secondary')};
+  }
+
   .affine-attachment-card.cubeThick {
     flex-direction: column-reverse;
 
@@ -138,6 +143,12 @@ export const styles = css`
     height: 100%;
   }
 
+  .affine-attachment-embed-status {
+    position: absolute;
+    left: 14px;
+    bottom: 64px;
+  }
+
   .affine-attachment-embed-event-mask {
     position: absolute;
     inset: 0;

blocksuite/affine/blocks/attachment/src/utils.ts

@@ -22,15 +22,13 @@ import type { BlockModel } from '@blocksuite/store';
 import type { AttachmentBlockComponent } from './attachment-block';
 
 export async function getAttachmentBlob(model: AttachmentBlockModel) {
-  const {
-    sourceId$: { value: sourceId },
-    type$: { value: type },
-  } = model.props;
+  const { sourceId$, type$ } = model.props;
+  const sourceId = sourceId$.peek();
+  const type = type$.peek();
   if (!sourceId) return null;
 
-  const doc = model.doc;
-  let blob = await doc.blobSync.get(sourceId);
-
+  const doc = model.store;
+  const blob = await doc.blobSync.get(sourceId);
   if (!blob) return null;
 
   return new Blob([blob], { type });
@@ -41,9 +39,9 @@ export async function getAttachmentBlob(model: AttachmentBlockModel) {
  * the download process may take a long time!
  */
 export function downloadAttachmentBlob(block: AttachmentBlockComponent) {
-  const { host, model, blobUrl, blobState$ } = block;
+  const { host, model, blobUrl, resourceController } = block;
 
-  if (blobState$.peek().downloading) {
+  if (resourceController.state$.peek().downloading) {
     toast(host, 'Download in progress...');
     return;
   }
@@ -56,7 +54,7 @@ export function downloadAttachmentBlob(block: AttachmentBlockComponent) {
     return;
   }
 
-  block.updateBlobState({ downloading: true });
+  resourceController.updateState({ downloading: true });
 
   toast(host, `Downloading ${shortName}`);
 
@@ -67,34 +65,14 @@ export function downloadAttachmentBlob(block: AttachmentBlockComponent) {
   tmpLink.dispatchEvent(event);
   tmpLink.remove();
 
-  block.updateBlobState({ downloading: false });
+  resourceController.updateState({ downloading: false });
 }
 
-export async function refreshData(
-  std: BlockStdScope,
-  block: AttachmentBlockComponent
-) {
+export async function refreshData(block: AttachmentBlockComponent) {
   const model = block.model;
-  const sourceId = model.props.sourceId$.peek();
-  if (!sourceId) return;
-
-  const blobUrl = block.blobUrl;
-  if (blobUrl) {
-    URL.revokeObjectURL(blobUrl);
-    block.blobUrl = null;
-  }
-
-  let blob = await std.store.blobSync.get(sourceId);
-  if (!blob) {
-    block.updateBlobState({ errorMessage: 'File not found' });
-    return;
-  }
-
   const type = model.props.type$.peek();
 
-  blob = new Blob([blob], { type });
-
-  block.blobUrl = URL.createObjectURL(blob);
+  await block.resourceController.refreshUrlWith(type);
 }
 
 export async function getFileType(file: File) {
@@ -104,7 +82,7 @@ export async function getFileType(file: File) {
   const buffer = await file.arrayBuffer();
   const FileType = await import('file-type');
   const fileType = await FileType.fileTypeFromBuffer(buffer);
-  return fileType ? fileType.mime : '';
+  return fileType?.mime ?? '';
 }
 
 function hasExceeded(

blocksuite/affine/blocks/attachment/src/view.ts

@@ -7,6 +7,7 @@ import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
 import { BlockViewExtension, FlavourExtension } from '@blocksuite/std';
 import { literal } from 'lit/static-html.js';
 
+import { AttachmentBlockInteraction } from './attachment-edgeless-block.js';
 import { AttachmentDropOption } from './attachment-service.js';
 import { attachmentSlashMenuConfig } from './configs/slash-menu.js';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
@@ -44,6 +45,7 @@ export class AttachmentViewExtension extends ViewExtensionProvider {
     ]);
     if (this.isEdgeless(context.scope)) {
       context.register(EdgelessClipboardAttachmentConfig);
+      context.register(AttachmentBlockInteraction);
     }
   }
 }

blocksuite/affine/blocks/attachment/tsconfig.json

@@ -7,7 +7,6 @@
   },
   "include": ["./src"],
   "references": [
-    { "path": "../embed" },
     { "path": "../surface" },
     { "path": "../../components" },
     { "path": "../../ext-loader" },

blocksuite/affine/blocks/bookmark/package.json

@@ -11,6 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@blocksuite/affine-block-embed": "workspace:*",
+    "@blocksuite/affine-block-embed-doc": "workspace:*",
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
@@ -23,7 +24,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",
@@ -31,7 +32,7 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "vitest": "3.1.1"
+    "vitest": "3.1.3"
   },
   "exports": {
     ".": "./src/index.ts",

blocksuite/affine/blocks/bookmark/src/__tests__/adapters/preprocessor.unit.spec.ts

@@ -140,4 +140,16 @@ Some text in between
     `.trim();
     expect(footnoteUrlPreprocessor(input)).toBe(expected);
   });
+
+  it('should encode partial encoded URLs in footnote definitions', () => {
+    const input = `
+[^ref]: {"type":"url","url":"https://zh.wikipedia.org/zh-hans/%E5%B0%8F%E7%B1%B3SU7"}
+[^ref2]: {"type":"url","url":"https://www.dw.com/zh/%E5%B0%8F%E7%B1%B3%E9%A6%96%E6%AC%BE%E6%B1%BD%E8%BD%A6%E5%8F%91%E5%B8%83-su7%E8%B5%B7%E4%BB%B72159%E4%B8%87%E5%85%83/a-68693432"}
+  `.trim();
+    const expected = `
+[^ref]: {"type":"url","url":"https%3A%2F%2Fzh.wikipedia.org%2Fzh-hans%2F%25E5%25B0%258F%25E7%25B1%25B3SU7"}
+[^ref2]: {"type":"url","url":"https%3A%2F%2Fwww.dw.com%2Fzh%2F%25E5%25B0%258F%25E7%25B1%25B3%25E9%25A6%2596%25E6%25AC%25BE%25E6%25B1%25BD%25E8%25BD%25A6%25E5%258F%2591%25E5%25B8%2583-su7%25E8%25B5%25B7%25E4%25BB%25B72159%25E4%25B8%2587%25E5%2585%2583%2Fa-68693432"}
+    `.trim();
+    expect(footnoteUrlPreprocessor(input)).toBe(expected);
+  });
 });

blocksuite/affine/blocks/bookmark/src/adapters/markdown/preprocessor.ts

@@ -23,12 +23,17 @@ type FootnoteDefinition = {
   content: FootNoteReferenceParams;
 };
 
-// Check if a URL is already encoded with encodeURIComponent
-function isEncoded(uri: string): boolean {
+/**
+ * Check if a URL is already encoded with encodeURIComponent to avoid markdown link parsing
+ * @example
+ * https://example.com/path%20with%20spaces should return false
+ * https://example.com/ should return false
+ * https%3A%2F%2Fexample.com%2F should return true
+ */
+function isFullyEncoded(uri: string): boolean {
   try {
-    // If decoding produces a different result than the original,
-    // then the URI contains encoded characters
-    return uri !== decodeURIComponent(uri);
+    // Should check if the components of the URI are fully encoded
+    return uri === encodeURIComponent(decodeURIComponent(uri));
   } catch {
     // If decoding fails, the URI contains invalid percent-encoding
     return true;
@@ -194,10 +199,10 @@ class FootnoteParser {
   // Process URLs in footnote content
   private processUrls(footnote: FootnoteDefinition): FootnoteDefinition {
     const content = footnote.content;
-    if (content.url && !isEncoded(content.url)) {
+    if (content.url && !isFullyEncoded(content.url)) {
       content.url = encodeURIComponent(content.url);
     }
-    if (content.favicon && !isEncoded(content.favicon)) {
+    if (content.favicon && !isFullyEncoded(content.favicon)) {
       content.favicon = encodeURIComponent(content.favicon);
     }
     return footnote;

blocksuite/affine/blocks/bookmark/src/bookmark-block.ts

@@ -2,10 +2,17 @@ import {
   CaptionedBlockComponent,
   SelectedStyle,
 } from '@blocksuite/affine-components/caption';
-import type { BookmarkBlockModel } from '@blocksuite/affine-model';
-import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import type {
+  BookmarkBlockModel,
+  LinkPreviewData,
+} from '@blocksuite/affine-model';
+import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
+import {
+  DocModeProvider,
+  LinkPreviewServiceIdentifier,
+} from '@blocksuite/affine-shared/services';
 import { BlockSelection } from '@blocksuite/std';
-import { computed, type ReadonlySignal } from '@preact/signals-core';
+import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
@@ -28,6 +35,62 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
 
   protected containerStyleMap!: ReturnType<typeof styleMap>;
 
+  /**
+   * @description Local link preview data
+   * When the doc is in readonly mode, and the link preview data are not provided (stored in the block model),
+   * We will use the local link preview data fetched from the link previewer service to render the block.
+   */
+  private readonly _localLinkPreview$ = signal<LinkPreviewData>({
+    icon: null,
+    title: null,
+    description: null,
+    image: null,
+  });
+
+  /**
+   * @description Link preview data for actual rendering
+   * When the doc is not in readonly mode, and the link preview data are provided (stored in the block model),
+   * We will use the model props to render the block.
+   * Otherwise, we will use the local link preview data to render the block.
+   */
+  linkPreview$ = computed(() => {
+    const modelProps = this.model.props;
+    const local = this._localLinkPreview$.value;
+    return {
+      icon: modelProps.icon$.value ?? local.icon ?? null,
+      title: modelProps.title$.value ?? local.title ?? null,
+      description: modelProps.description$.value ?? local.description ?? null,
+      image: modelProps.image$.value ?? local.image ?? null,
+    };
+  });
+
+  private readonly _updateLocalLinkPreview = () => {
+    // cancel any inflight request
+    this._fetchAbortController?.abort();
+    this._fetchAbortController = new AbortController();
+
+    this.loading = true;
+    this.error = false;
+
+    this.std
+      .get(LinkPreviewServiceIdentifier)
+      .query(this.model.props.url, this._fetchAbortController.signal)
+      .then(data => {
+        this._localLinkPreview$.value = {
+          icon: data.icon ?? null,
+          title: data.title ?? null,
+          description: data.description ?? null,
+          image: data.image ?? null,
+        };
+      })
+      .catch(() => {
+        this.error = true;
+      })
+      .finally(() => {
+        this.loading = false;
+      });
+  };
+
   selectBlock = () => {
     const selectionManager = this.std.selection;
     const blockSelection = selectionManager.create(BlockSelection, {
@@ -57,17 +120,38 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
     );
   }
 
+  get imageProxyService() {
+    return this.std.get(ImageProxyService);
+  }
+
+  handleClick = (event: MouseEvent) => {
+    event.stopPropagation();
+
+    if (
+      this.model.parent?.flavour !== 'affine:surface' &&
+      !this.store.readonly
+    ) {
+      this.selectBlock();
+    }
+  };
+
+  handleDoubleClick = (event: MouseEvent) => {
+    event.stopPropagation();
+    this.open();
+  };
+
   private readonly _renderCitationView = () => {
-    const { title, description, url, icon, footnoteIdentifier } =
-      this.model.props;
+    const { url, footnoteIdentifier } = this.model.props;
+    const { icon, title, description } = this.linkPreview$.value;
+    const iconSrc = icon ? this.imageProxyService.buildUrl(icon) : undefined;
     return html`
       <affine-citation-card
-        .icon=${icon}
+        .icon=${iconSrc}
         .citationTitle=${title || url}
         .citationContent=${description}
         .citationIdentifier=${footnoteIdentifier}
-        .onClickCallback=${this.selectBlock}
-        .onDoubleClickCallback=${this.open}
+        .onClickCallback=${this.handleClick}
+        .onDoubleClickCallback=${this.handleDoubleClick}
         .active=${this.selected$.value}
       ></affine-citation-card>
     `;
@@ -97,10 +181,17 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
 
     this.contentEditable = 'false';
 
-    if (!this.model.props.description && !this.model.props.title) {
-      if (this.doc.readonly) {
+    if (
+      (!this.model.props.description && !this.model.props.title) ||
+      (!this.model.props.image && this.model.props.style === 'vertical')
+    ) {
+      // When the doc is readonly, and the preview data not provided
+      // We should fetch the preview data and update the local link preview data
+      if (this.store.readonly) {
+        this._updateLocalLinkPreview();
         return;
       }
+      // Otherwise, we should refresh the data to the model props
       this.refreshData();
     }
 

blocksuite/affine/blocks/bookmark/src/bookmark-edgeless-block.ts

@@ -1,8 +1,10 @@
+import { BookmarkBlockSchema } from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { toGfxBlockComponent } from '@blocksuite/std';
+import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import { BookmarkBlockComponent } from './bookmark-block.js';
@@ -50,6 +52,24 @@ export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
   };
 }
 
+export const BookmarkBlockInteraction = GfxViewInteractionExtension(
+  BookmarkBlockSchema.model.flavour,
+  {
+    resizeConstraint: {
+      lockRatio: true,
+    },
+    handleRotate: () => {
+      return {
+        beforeRotate(context) {
+          context.set({
+            rotatable: false,
+          });
+        },
+      };
+    },
+  }
+);
+
 declare global {
   interface HTMLElementTagNameMap {
     'affine-edgeless-bookmark': BookmarkEdgelessBlockComponent;

blocksuite/affine/blocks/bookmark/src/bookmark-spec.ts

@@ -4,6 +4,7 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { BookmarkBlockAdapterExtensions } from './adapters/extension';
+import { BookmarkBlockInteraction } from './bookmark-edgeless-block';
 import { BookmarkSlashMenuConfigExtension } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
 
@@ -16,6 +17,7 @@ export const BookmarkBlockSpec: ExtensionType[] = [
       ? literal`affine-edgeless-bookmark`
       : literal`affine-bookmark`;
   }),
+  BookmarkBlockInteraction,
   BookmarkBlockAdapterExtensions,
   createBuiltinToolbarConfigExtension(flavour),
   BookmarkSlashMenuConfigExtension,

blocksuite/affine/blocks/bookmark/src/commands/insert-link-by-quick-search.ts

@@ -1,10 +1,15 @@
+import { insertEmbedIframeWithUrlCommand } from '@blocksuite/affine-block-embed';
 import {
   type InsertedLinkType,
-  insertEmbedIframeWithUrlCommand,
   insertEmbedLinkedDocCommand,
+  insertEmbedSyncedDocCommand,
   type LinkableFlavour,
-} from '@blocksuite/affine-block-embed';
-import { QuickSearchProvider } from '@blocksuite/affine-shared/services';
+} from '@blocksuite/affine-block-embed-doc';
+import {
+  DocModeProvider,
+  EditorSettingProvider,
+  QuickSearchProvider,
+} from '@blocksuite/affine-shared/services';
 import type { Command } from '@blocksuite/std';
 
 import { insertBookmarkCommand } from './insert-bookmark';
@@ -26,12 +31,26 @@ export const insertLinkByQuickSearchCommand: Command<
 
       // add linked doc
       if ('docId' in result) {
-        std.command.exec(insertEmbedLinkedDocCommand, {
+        const editorMode = std.get(DocModeProvider).getEditorMode();
+        const editorSettings = std.get(EditorSettingProvider);
+        let flavour: LinkableFlavour = 'affine:embed-linked-doc';
+        if (editorMode === 'edgeless') {
+          flavour =
+            editorSettings.setting$.value.docCanvasPreferView ?? flavour;
+        }
+
+        const insertCommand =
+          flavour === 'affine:embed-linked-doc'
+            ? insertEmbedLinkedDocCommand
+            : insertEmbedSyncedDocCommand;
+
+        std.command.exec(insertCommand, {
           docId: result.docId,
           params: result.params,
         });
+
         return {
-          flavour: 'affine:embed-linked-doc',
+          flavour,
         };
       }
 

blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts

@@ -18,20 +18,6 @@ export class BookmarkCard extends SignalWatcher(
 ) {
   static override styles = styles;
 
-  private _handleClick(event: MouseEvent) {
-    event.stopPropagation();
-    const model = this.bookmark.model;
-
-    if (model.parent?.flavour !== 'affine:surface') {
-      this.bookmark.selectBlock();
-    }
-  }
-
-  private _handleDoubleClick(event: MouseEvent) {
-    event.stopPropagation();
-    this.bookmark.open();
-  }
-
   override connectedCallback(): void {
     super.connectedCallback();
 
@@ -49,8 +35,9 @@ export class BookmarkCard extends SignalWatcher(
   }
 
   override render() {
-    const { icon, title, url, description, image, style } =
-      this.bookmark.model.props;
+    const { url, style } = this.bookmark.model.props;
+    const { icon, title, description, image } =
+      this.bookmark.linkPreview$.value;
 
     const cardClassMap = classMap({
       loading: this.loading,
@@ -74,7 +61,7 @@ export class BookmarkCard extends SignalWatcher(
 
     const theme = this.bookmark.std.get(ThemeProvider).theme;
     const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
-    const imageProxyService = this.bookmark.doc.get(ImageProxyService);
+    const imageProxyService = this.bookmark.store.get(ImageProxyService);
 
     const titleIcon = this.loading
       ? LoadingIcon
@@ -98,8 +85,8 @@ export class BookmarkCard extends SignalWatcher(
     return html`
       <div
         class="affine-bookmark-card ${cardClassMap}"
-        @click=${this._handleClick}
-        @dblclick=${this._handleDoubleClick}
+        @click=${this.bookmark.handleClick}
+        @dblclick=${this.bookmark.handleDoubleClick}
       >
         <div class="affine-bookmark-content">
           <div class="affine-bookmark-content-title">

blocksuite/affine/blocks/bookmark/src/configs/slash-menu.ts

@@ -1,3 +1,4 @@
+import { DefaultTool } from '@blocksuite/affine-block-surface';
 import { toggleEmbedCardCreateModal } from '@blocksuite/affine-components/embed-card-modal';
 import { BookmarkBlockSchema } from '@blocksuite/affine-model';
 import {
@@ -5,6 +6,7 @@ import {
   SlashMenuConfigIdentifier,
 } from '@blocksuite/affine-widget-slash-menu';
 import { LinkIcon } from '@blocksuite/icons/lit';
+import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
 import type { ExtensionType } from '@blocksuite/store';
 
 import { LinkTooltip } from './tooltips';
@@ -21,10 +23,10 @@ const bookmarkSlashMenuConfig: SlashMenuConfig = {
       },
       group: '4_Content & Media@2',
       when: ({ model }) =>
-        model.doc.schema.flavourSchemaMap.has('affine:bookmark'),
+        model.store.schema.flavourSchemaMap.has('affine:bookmark'),
       action: ({ std, model }) => {
         const { host } = std;
-        const parentModel = host.doc.getParent(model);
+        const parentModel = host.store.getParent(model);
         if (!parentModel) {
           return;
         }
@@ -33,11 +35,17 @@ const bookmarkSlashMenuConfig: SlashMenuConfig = {
           host,
           'Links',
           'The added link will be displayed as a card view.',
-          { mode: 'page', parentModel, index }
+          { mode: 'page', parentModel, index },
+          ({ mode }) => {
+            if (mode === 'edgeless') {
+              const gfx = std.get(GfxControllerIdentifier);
+              gfx.tool.setTool(DefaultTool);
+            }
+          }
         )
           .then(() => {
             if (model.text?.length === 0) {
-              model.doc.deleteBlock(model);
+              model.store.deleteBlock(model);
             }
           })
           .catch(console.error);

blocksuite/affine/blocks/bookmark/src/utils.ts

@@ -1,4 +1,4 @@
-import { LinkPreviewerService } from '@blocksuite/affine-shared/services';
+import { LinkPreviewServiceIdentifier } from '@blocksuite/affine-shared/services';
 import { isAbortError } from '@blocksuite/affine-shared/utils';
 
 import type { BookmarkBlockComponent } from './bookmark-block.js';
@@ -15,7 +15,7 @@ export async function refreshBookmarkUrlData(
   try {
     bookmarkElement.loading = true;
 
-    const linkPreviewer = bookmarkElement.doc.get(LinkPreviewerService);
+    const linkPreviewer = bookmarkElement.std.get(LinkPreviewServiceIdentifier);
     const bookmarkUrlData = await linkPreviewer.query(
       bookmarkElement.model.props.url,
       signal
@@ -32,7 +32,7 @@ export async function refreshBookmarkUrlData(
 
     if (signal?.aborted) return;
 
-    bookmarkElement.doc.updateBlock(bookmarkElement.model, {
+    bookmarkElement.store.updateBlock(bookmarkElement.model, {
       title,
       description,
       icon,

blocksuite/affine/blocks/bookmark/src/view.ts

@@ -6,6 +6,7 @@ import { BookmarkBlockSchema } from '@blocksuite/affine-model';
 import { BlockViewExtension, FlavourExtension } from '@blocksuite/std';
 import { literal } from 'lit/static-html.js';
 
+import { BookmarkBlockInteraction } from './bookmark-edgeless-block';
 import { BookmarkSlashMenuConfigExtension } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
 import { EdgelessClipboardBookmarkConfig } from './edgeless-clipboard-config';
@@ -36,6 +37,7 @@ export class BookmarkViewExtension extends ViewExtensionProvider {
     const isEdgeless = this.isEdgeless(context.scope);
     if (isEdgeless) {
       context.register(EdgelessClipboardBookmarkConfig);
+      context.register(BookmarkBlockInteraction);
     }
   }
 }

blocksuite/affine/blocks/bookmark/tsconfig.json

@@ -8,6 +8,7 @@
   "include": ["./src"],
   "references": [
     { "path": "../embed" },
+    { "path": "../embed-doc" },
     { "path": "../surface" },
     { "path": "../../components" },
     { "path": "../../ext-loader" },

blocksuite/affine/blocks/callout/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "emoji-mart": "^5.6.0",
     "lit": "^3.2.0",

blocksuite/affine/blocks/callout/src/adapters/markdown.ts

@@ -0,0 +1,88 @@
+import { CalloutBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockMarkdownAdapterExtension,
+  type BlockMarkdownAdapterMatcher,
+  getCalloutEmoji,
+  isCalloutNode,
+} from '@blocksuite/affine-shared/adapters';
+import { nanoid } from '@blocksuite/store';
+
+// Currently, the callout block children can only be paragraph block or list block
+// In mdast, the node types are `paragraph`, `list`, `heading`, `blockquote`
+const CALLOUT_BLOCK_CHILDREN_TYPES = new Set([
+  'paragraph',
+  'list',
+  'heading',
+  'blockquote',
+]);
+
+export const calloutBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
+  flavour: CalloutBlockSchema.model.flavour,
+  toMatch: o => isCalloutNode(o.node),
+  fromMatch: o => o.node.flavour === CalloutBlockSchema.model.flavour,
+  toBlockSnapshot: {
+    enter: (o, context) => {
+      if (!o.node.data || !isCalloutNode(o.node)) {
+        return;
+      }
+
+      // Currently, the callout block children can only be a paragraph or a list
+      // So we should filter out the other children
+      o.node.children = o.node.children.filter(child =>
+        CALLOUT_BLOCK_CHILDREN_TYPES.has(child.type)
+      );
+
+      const { walkerContext } = context;
+      const calloutEmoji = getCalloutEmoji(o.node);
+      walkerContext.openNode(
+        {
+          type: 'block',
+          id: nanoid(),
+          flavour: CalloutBlockSchema.model.flavour,
+          props: {
+            emoji: calloutEmoji,
+          },
+          children: [],
+        },
+        'children'
+      );
+    },
+    leave: (o, context) => {
+      const { walkerContext } = context;
+      if (isCalloutNode(o.node)) {
+        walkerContext.closeNode();
+      }
+    },
+  },
+  fromBlockSnapshot: {
+    enter: (o, context) => {
+      const emoji = o.node.props.emoji as string;
+      const { walkerContext } = context;
+      walkerContext
+        .openNode(
+          {
+            type: 'blockquote',
+            children: [],
+          },
+          'children'
+        )
+        .openNode({
+          type: 'paragraph',
+          children: [
+            {
+              type: 'text',
+              value: `[!${emoji}]`,
+            },
+          ],
+        })
+        .closeNode();
+    },
+    leave: (_, context) => {
+      const { walkerContext } = context;
+      walkerContext.closeNode();
+    },
+  },
+};
+
+export const CalloutBlockMarkdownAdapterExtension =
+  BlockMarkdownAdapterExtension(calloutBlockMarkdownAdapterMatcher);

blocksuite/affine/blocks/callout/src/callout-spec.ts

@@ -3,6 +3,7 @@ import { BlockViewExtension, FlavourExtension } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
+import { CalloutBlockMarkdownAdapterExtension } from './adapters/markdown';
 import { CalloutKeymapExtension } from './callout-keymap';
 import { calloutSlashMenuConfig } from './configs/slash-menu';
 
@@ -11,4 +12,5 @@ export const CalloutBlockSpec: ExtensionType[] = [
   BlockViewExtension('affine:callout', literal`affine-callout`),
   CalloutKeymapExtension,
   SlashMenuConfigExtension('affine:callout', calloutSlashMenuConfig),
+  CalloutBlockMarkdownAdapterExtension,
 ];

blocksuite/affine/blocks/callout/src/configs/slash-menu.ts

@@ -33,19 +33,24 @@ export const calloutSlashMenuConfig: SlashMenuConfig = {
       when: ({ std, model }) => {
         return (
           std.get(FeatureFlagService).getFlag('enable_callout') &&
-          !isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text')
+          !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text')
         );
       },
       action: ({ model, std }) => {
-        const { doc } = model;
-        const parent = doc.getParent(model);
+        const { store } = model;
+        const parent = store.getParent(model);
         if (!parent) return;
 
         const index = parent.children.indexOf(model);
         if (index === -1) return;
-        const calloutId = doc.addBlock('affine:callout', {}, parent, index + 1);
+        const calloutId = store.addBlock(
+          'affine:callout',
+          {},
+          parent,
+          index + 1
+        );
         if (!calloutId) return;
-        const paragraphId = doc.addBlock('affine:paragraph', {}, calloutId);
+        const paragraphId = store.addBlock('affine:paragraph', {}, calloutId);
         if (!paragraphId) return;
         std.host.updateComplete
           .then(() => {

blocksuite/affine/blocks/callout/src/store.ts

@@ -4,11 +4,14 @@ import {
 } from '@blocksuite/affine-ext-loader';
 import { CalloutBlockSchemaExtension } from '@blocksuite/affine-model';
 
+import { CalloutBlockMarkdownAdapterExtension } from './adapters/markdown';
+
 export class CalloutStoreExtension extends StoreExtensionProvider {
   override name = 'affine-callout-block';
 
   override setup(context: StoreExtensionContext) {
     super.setup(context);
     context.register(CalloutBlockSchemaExtension);
+    context.register(CalloutBlockMarkdownAdapterExtension);
   }
 }

blocksuite/affine/blocks/code/package.json

@@ -27,7 +27,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/code/src/code-block.ts

@@ -26,11 +26,13 @@ import { computed, effect, type Signal, signal } from '@preact/signals-core';
 import { html, nothing, type TemplateResult } from 'lit';
 import { query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { bundledLanguagesInfo, type ThemedToken } from 'shiki';
 
 import { CodeBlockConfigExtension } from './code-block-config.js';
 import { CodeBlockInlineManagerExtension } from './code-block-inline.js';
 import { CodeBlockHighlighter } from './code-block-service.js';
+import { CodeBlockPreviewIdentifier } from './code-preview-extension.js';
 import { codeBlockStyles } from './styles.js';
 
 export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel> {
@@ -66,7 +68,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
   }
 
   get readonly() {
-    return this.doc.readonly;
+    return this.store.readonly;
   }
 
   get langs() {
@@ -224,7 +226,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
         return;
       },
       Tab: ctx => {
-        if (this.doc.readonly) return;
+        if (this.store.readonly) return;
         const state = ctx.get('keyboardState');
         const event = state.raw;
         const inlineEditor = this.inlineEditor;
@@ -332,10 +334,10 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
         return true;
       },
       Delete: () => {
-        return true;
+        return;
       },
       Enter: () => {
-        this.doc.captureSync();
+        this.store.captureSync();
         return true;
       },
       'Mod-Enter': () => {
@@ -346,11 +348,16 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
         if (!inlineRange || !inlineEditor) return;
         const isEnd = model.props.text.length === inlineRange.index;
         if (!isEnd) return;
-        const parent = this.doc.getParent(model);
+        const parent = this.store.getParent(model);
         if (!parent) return;
         const index = parent.children.indexOf(model);
         if (index === -1) return;
-        const id = this.doc.addBlock('affine:paragraph', {}, parent, index + 1);
+        const id = this.store.addBlock(
+          'affine:paragraph',
+          {},
+          parent,
+          index + 1
+        );
         focusTextModel(std, id);
         return true;
       },
@@ -361,7 +368,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
 
   copyCode() {
     const model = this.model;
-    const slice = Slice.fromModels(model.doc, [model]);
+    const slice = Slice.fromModels(model.store, [model]);
     this.std.clipboard
       .copySlice(slice)
       .then(() => {
@@ -384,6 +391,12 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
       this.std.getOptional(CodeBlockConfigExtension.identifier)
         ?.showLineNumbers ?? true;
 
+    const preview = !!this.model.props.preview;
+    const previewContext = this.std.getOptional(
+      CodeBlockPreviewIdentifier(this.model.props.language ?? '')
+    );
+    const shouldRenderPreview = preview && previewContext;
+
     return html`
       <div
         class=${classMap({
@@ -393,12 +406,15 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
         })}
       >
         <rich-text
+          style=${styleMap({
+            display: shouldRenderPreview ? 'none' : undefined,
+          })}
           .yText=${this.model.props.text.yText}
           .inlineEventSource=${this.topContenteditableElement ?? nothing}
-          .undoManager=${this.doc.history}
+          .undoManager=${this.store.history.undoManager}
           .attributesSchema=${this.inlineManager.getSchema()}
           .attributeRenderer=${this.inlineManager.getRenderer()}
-          .readonly=${this.doc.readonly}
+          .readonly=${this.store.readonly}
           .inlineRangeProvider=${this._inlineRangeProvider}
           .enableClipboard=${false}
           .enableUndoRedo=${false}
@@ -416,14 +432,22 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
             : undefined}
         >
         </rich-text>
-
+        <div
+          style=${styleMap({
+            display: shouldRenderPreview ? undefined : 'none',
+          })}
+          contenteditable="false"
+          class="affine-code-block-preview"
+        >
+          ${previewContext?.renderer(this.model)}
+        </div>
         ${this.renderChildren(this.model)} ${Object.values(this.widgets)}
       </div>
     `;
   }
 
   setWrap(wrap: boolean) {
-    this.doc.updateBlock(this.model, { wrap });
+    this.store.updateBlock(this.model, { wrap });
   }
 
   @query('rich-text')

blocksuite/affine/blocks/code/src/code-preview-extension.ts

@@ -0,0 +1,27 @@
+import type { CodeBlockModel } from '@blocksuite/affine-model';
+import { createIdentifier } from '@blocksuite/global/di';
+import type { ExtensionType } from '@blocksuite/store';
+import type { HTMLTemplateResult } from 'lit';
+
+export type CodeBlockPreviewRenderer = (
+  model: CodeBlockModel
+) => HTMLTemplateResult | null;
+
+export type CodeBlockPreviewContext = {
+  renderer: CodeBlockPreviewRenderer;
+  lang: string;
+};
+
+export const CodeBlockPreviewIdentifier =
+  createIdentifier<CodeBlockPreviewContext>('CodeBlockPreview');
+
+export function CodeBlockPreviewExtension(
+  lang: string,
+  renderer: CodeBlockPreviewRenderer
+): ExtensionType {
+  return {
+    setup: di => {
+      di.addImpl(CodeBlockPreviewIdentifier(lang), { renderer, lang });
+    },
+  };
+}

blocksuite/affine/blocks/code/src/code-toolbar/components/code-toolbar.ts

@@ -30,7 +30,6 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
       padding: 4px;
       margin: 0;
       display: flex;
-      justify-content: flex-end;
     }
 
     .code-toolbar-button {
@@ -39,6 +38,10 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
       box-shadow: var(--affine-shadow-1);
       border-radius: 4px;
     }
+
+    .copy-code {
+      margin-left: auto;
+    }
   `;
 
   private _currentOpenMenu: AbortController | null = null;

blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts

@@ -18,10 +18,6 @@ export class LanguageListButton extends WithDisposable(
   SignalWatcher(LitElement)
 ) {
   static override styles = css`
-    :host {
-      margin-right: auto;
-    }
-
     .lang-button {
       background-color: var(--affine-background-primary-color);
       box-shadow: var(--affine-shadow-1);
@@ -53,7 +49,7 @@ export class LanguageListButton extends WithDisposable(
   private _abortController?: AbortController;
 
   private readonly _clickLangBtn = () => {
-    if (this.blockComponent.doc.readonly) return;
+    if (this.blockComponent.store.readonly) return;
     if (this._abortController) {
       // Close the language list if it's already opened.
       this._abortController.abort();
@@ -75,7 +71,7 @@ export class LanguageListButton extends WithDisposable(
           sortedBundledLanguages.splice(index, 1);
           sortedBundledLanguages.unshift(item);
         }
-        this.blockComponent.doc.transact(() => {
+        this.blockComponent.store.transact(() => {
           this.blockComponent.model.props.language$.value = item.name;
         });
       },
@@ -138,10 +134,10 @@ export class LanguageListButton extends WithDisposable(
       </div>`}
       height="24px"
       @click=${this._clickLangBtn}
-      ?disabled=${this.blockComponent.doc.readonly}
+      ?disabled=${this.blockComponent.store.readonly}
     >
       <span class="lang-button-icon" slot="suffix">
-        ${!this.blockComponent.doc.readonly ? ArrowDownIcon : nothing}
+        ${!this.blockComponent.store.readonly ? ArrowDownIcon : nothing}
       </span>
     </icon-button> `;
   }

blocksuite/affine/blocks/code/src/code-toolbar/components/preview-button.ts

@@ -0,0 +1,97 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+import { css, html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import type { CodeBlockComponent } from '../../code-block';
+import { CodeBlockPreviewIdentifier } from '../../code-preview-extension';
+
+export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
+  static override styles = css`
+    .preview-toggle-container {
+      display: flex;
+      padding: 2px;
+      align-items: flex-start;
+      gap: 4px;
+      border-radius: 4px;
+      background: ${unsafeCSSVarV2('segment/background')};
+    }
+
+    .toggle-button {
+      display: flex;
+      padding: 0px 4px;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      border-radius: 4px;
+      color: ${unsafeCSSVarV2('text/primary')};
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+    }
+
+    .toggle-button:hover {
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
+    }
+
+    .toggle-button.active {
+      background: ${unsafeCSSVarV2('segment/button')};
+      box-shadow:
+        var(--Shadow-buttonShadow-1-x, 0px) var(--Shadow-buttonShadow-1-y, 0px)
+          var(--Shadow-buttonShadow-1-blur, 1px) 0px
+          var(--Shadow-buttonShadow-1-color, rgba(0, 0, 0, 0.12)),
+        var(--Shadow-buttonShadow-2-x, 0px) var(--Shadow-buttonShadow-2-y, 1px)
+          var(--Shadow-buttonShadow-2-blur, 5px) 0px
+          var(--Shadow-buttonShadow-2-color, rgba(0, 0, 0, 0.12));
+    }
+  `;
+
+  private readonly _toggle = (value: boolean) => {
+    if (this.blockComponent.store.readonly) return;
+
+    this.blockComponent.store.updateBlock(this.blockComponent.model, {
+      preview: value,
+    });
+  };
+
+  get preview() {
+    return !!this.blockComponent.model.props.preview$.value;
+  }
+
+  override render() {
+    const lang = this.blockComponent.model.props.language$.value ?? '';
+    const previewContext = this.blockComponent.std.getOptional(
+      CodeBlockPreviewIdentifier(lang)
+    );
+    if (!previewContext) return nothing;
+
+    return html`
+      <div class="preview-toggle-container">
+        <div
+          class=${classMap({
+            'toggle-button': true,
+            active: !this.preview,
+          })}
+          @click=${() => this._toggle(false)}
+        >
+          Code
+        </div>
+        <div
+          class=${classMap({
+            'toggle-button': true,
+            active: this.preview,
+          })}
+          @click=${() => this._toggle(true)}
+        >
+          Preview
+        </div>
+      </div>
+    `;
+  }
+
+  @property({ attribute: false })
+  accessor blockComponent!: CodeBlockComponent;
+}

blocksuite/affine/blocks/code/src/code-toolbar/config.ts

@@ -42,6 +42,18 @@ export const PRIMARY_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
           };
         },
       },
+      {
+        type: 'preview',
+        generate: ({ blockComponent }) => {
+          return {
+            action: noop,
+            render: () => html`
+              <preview-button .blockComponent=${blockComponent}>
+              </preview-button>
+            `,
+          };
+        },
+      },
       {
         type: 'copy-code',
         label: 'Copy code',

blocksuite/affine/blocks/code/src/code-toolbar/context.ts

@@ -8,7 +8,7 @@ export class CodeBlockToolbarContext extends MenuContext {
   };
 
   get doc() {
-    return this.blockComponent.doc;
+    return this.blockComponent.store;
   }
 
   get host() {

blocksuite/affine/blocks/code/src/code-toolbar/utils.ts

@@ -12,5 +12,5 @@ export const duplicateCodeBlock = (model: CodeBlockModel) => {
     ...duplicateProps,
   };
 
-  return model.doc.addSiblingBlocks(model, [newProps])[0];
+  return model.store.addSiblingBlocks(model, [newProps])[0];
 };

blocksuite/affine/blocks/code/src/effects.ts

@@ -5,6 +5,7 @@ import {
 } from './code-toolbar';
 import { AffineCodeToolbar } from './code-toolbar/components/code-toolbar';
 import { LanguageListButton } from './code-toolbar/components/lang-button';
+import { PreviewButton } from './code-toolbar/components/preview-button';
 import { AffineCodeUnit } from './highlight/affine-code-unit';
 
 export function effects() {
@@ -13,12 +14,14 @@ export function effects() {
   customElements.define(AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget);
   customElements.define('affine-code-unit', AffineCodeUnit);
   customElements.define('affine-code', CodeBlockComponent);
+  customElements.define('preview-button', PreviewButton);
 }
 
 declare global {
   interface HTMLElementTagNameMap {
     'language-list-button': LanguageListButton;
     'affine-code-toolbar': AffineCodeToolbar;
+    'preview-button': PreviewButton;
     [AFFINE_CODE_TOOLBAR_WIDGET]: AffineCodeToolbarWidget;
   }
 }

blocksuite/affine/blocks/code/src/index.ts

@@ -3,6 +3,7 @@ export * from './clipboard';
 export * from './code-block';
 export * from './code-block-config';
 export * from './code-block-spec';
+export * from './code-preview-extension';
 export * from './code-toolbar';
 export * from './turbo/code-layout-handler';
 export * from './turbo/code-painter.worker';

blocksuite/affine/blocks/code/src/styles.ts

@@ -49,4 +49,8 @@ export const codeBlockStyles = css`
     box-sizing: border-box;
     user-select: none;
   }
+
+  affine-code .affine-code-block-preview {
+    padding: 12px;
+  }
 `;

blocksuite/affine/blocks/code/src/view.ts

@@ -11,6 +11,7 @@ import {
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
 import { getCodeClipboardExtensions } from './clipboard/index.js';
+import { CodeBlockConfigExtension } from './code-block-config';
 import {
   CodeBlockInlineManagerExtension,
   CodeBlockUnitSpecExtension,
@@ -21,7 +22,7 @@ import { AFFINE_CODE_TOOLBAR_WIDGET } from './code-toolbar/index.js';
 import { codeSlashMenuConfig } from './configs/slash-menu.js';
 import { effects } from './effects.js';
 
-export const codeToolbarWidget = WidgetViewExtension(
+const codeToolbarWidget = WidgetViewExtension(
   'affine:code',
   AFFINE_CODE_TOOLBAR_WIDGET,
   literal`${unsafeStatic(AFFINE_CODE_TOOLBAR_WIDGET)}`
@@ -41,7 +42,6 @@ export class CodeBlockViewExtension extends ViewExtensionProvider {
       FlavourExtension('affine:code'),
       CodeBlockHighlighter,
       BlockViewExtension('affine:code', literal`affine-code`),
-      codeToolbarWidget,
       SlashMenuConfigExtension('affine:code', codeSlashMenuConfig),
       CodeKeymapExtension,
       ...getCodeClipboardExtensions(),
@@ -50,5 +50,14 @@ export class CodeBlockViewExtension extends ViewExtensionProvider {
       CodeBlockInlineManagerExtension,
       CodeBlockUnitSpecExtension,
     ]);
+    if (!this.isMobile(context.scope)) {
+      context.register(codeToolbarWidget);
+    } else {
+      context.register(
+        CodeBlockConfigExtension({
+          showLineNumbers: false,
+        })
+      );
+    }
   }
 }

blocksuite/affine/blocks/data-view/package.json

@@ -24,7 +24,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/data-view/src/configs/slash-menu.ts

@@ -21,21 +21,21 @@ export const dataViewSlashMenuConfig: SlashMenuConfig = {
       },
       group: '7_Database@1',
       when: ({ model, std }) =>
-        !isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text') &&
+        !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text') &&
         !!std.get(FeatureFlagService).getFlag('enable_block_query'),
 
       action: ({ model, std }) => {
         const { host } = std;
-        const parent = host.doc.getParent(model);
+        const parent = host.store.getParent(model);
         if (!parent) return;
         const index = parent.children.indexOf(model);
-        const id = host.doc.addBlock(
+        const id = host.store.addBlock(
           'affine:data-view',
           {},
-          host.doc.getParent(model),
+          host.store.getParent(model),
           index + 1
         );
-        const dataViewModel = host.doc.getBlock(id)!;
+        const dataViewModel = host.store.getBlock(id)!;
 
         const dataView = std.view.getBlock(
           dataViewModel.id
@@ -43,7 +43,7 @@ export const dataViewSlashMenuConfig: SlashMenuConfig = {
         dataView?.dataSource.viewManager.viewAdd('table');
 
         if (model.text?.length === 0) {
-          model.doc.deleteBlock(model);
+          model.store.deleteBlock(model);
         }
       },
     },

blocksuite/affine/blocks/data-view/src/data-source.ts

@@ -60,7 +60,7 @@ export class BlockQueryDataSource extends DataSourceBase {
   }
 
   get workspace() {
-    return this.host.doc.workspace;
+    return this.host.store.workspace;
   }
 
   constructor(
@@ -83,14 +83,18 @@ export class BlockQueryDataSource extends DataSourceBase {
     this.workspace.docs.forEach(doc => {
       this.listenToDoc(doc.getStore());
     });
-    this.workspace.slots.docCreated.subscribe(id => {
-      const doc = this.workspace.getDoc(id);
-      if (doc) {
-        this.listenToDoc(doc.getStore());
-      }
-    });
-    this.workspace.slots.docRemoved.subscribe(id => {
-      this.docDisposeMap.get(id)?.();
+    this.workspace.slots.docListUpdated.subscribe(() => {
+      this.workspace.docs.forEach(doc => {
+        if (!this.docDisposeMap.has(doc.id)) {
+          this.listenToDoc(doc.getStore());
+        }
+      });
+      this.docDisposeMap.forEach((_, id) => {
+        if (!this.workspace.docs.has(id)) {
+          this.docDisposeMap.get(id)?.();
+          this.docDisposeMap.delete(id);
+        }
+      });
     });
   }
 
@@ -169,7 +173,7 @@ export class BlockQueryDataSource extends DataSourceBase {
     insertToPosition: InsertToPosition,
     type: string | undefined
   ): string {
-    const doc = this.block.doc;
+    const doc = this.block.store;
     doc.captureSync();
     const column = DatabaseBlockDataSource.propertiesMap.value[
       type ?? propertyPresets.multiSelectPropertyConfig.type
@@ -292,7 +296,7 @@ export class BlockQueryDataSource extends DataSourceBase {
           ].config.propertyData.default(),
         cells: currentCells.map(() => undefined),
       };
-      this.block.doc.captureSync();
+      this.block.store.captureSync();
       viewColumn.type = toType;
       viewColumn.data = result.property;
       currentCells.forEach((value, i) => {

blocksuite/affine/blocks/data-view/src/data-view-block.ts

@@ -104,7 +104,7 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
             prefix: CopyIcon,
             name: 'Copy',
             select: () => {
-              const slice = Slice.fromModels(this.doc, [this.model]);
+              const slice = Slice.fromModels(this.store, [this.model]);
               this.std.clipboard.copySlice(slice).catch(console.error);
             },
           }),
@@ -119,9 +119,9 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
                 name: 'Delete Database',
                 select: () => {
                   this.model.children.slice().forEach(block => {
-                    this.doc.deleteBlock(block);
+                    this.store.deleteBlock(block);
                   });
-                  this.doc.deleteBlock(this.model);
+                  this.store.deleteBlock(this.model);
                 },
               }),
             ],
@@ -237,7 +237,7 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
   }
 
   private renderDatabaseOps() {
-    if (this.doc.readonly) {
+    if (this.store.readonly) {
       return nothing;
     }
     return html` <div class="database-ops" @click="${this._clickDatabaseOps}">

blocksuite/affine/blocks/data-view/src/data-view-model.ts

@@ -24,21 +24,21 @@ export class DataViewBlockModel extends BlockModel<Props> {
   }
 
   applyViewsUpdate() {
-    this.doc.updateBlock(this, {
+    this.store.updateBlock(this, {
       views: this.props.views,
     });
   }
 
   deleteView(id: string) {
-    this.doc.captureSync();
-    this.doc.transact(() => {
+    this.store.captureSync();
+    this.store.transact(() => {
       this.props.views = this.props.views.filter(v => v.id !== id);
     });
   }
 
   duplicateView(id: string): string {
-    const newId = this.doc.workspace.idGenerator();
-    this.doc.transact(() => {
+    const newId = this.store.workspace.idGenerator();
+    this.store.transact(() => {
       const index = this.props.views.findIndex(v => v.id === id);
       const view = this.props.views[index];
       if (view) {
@@ -53,7 +53,7 @@ export class DataViewBlockModel extends BlockModel<Props> {
   }
 
   moveViewTo(id: string, position: InsertToPosition) {
-    this.doc.transact(() => {
+    this.store.transact(() => {
       this.props.views = arrayMove(
         this.props.views,
         v => v.id === id,
@@ -67,7 +67,7 @@ export class DataViewBlockModel extends BlockModel<Props> {
     id: string,
     update: (data: DataViewDataType) => Partial<DataViewDataType>
   ) {
-    this.doc.transact(() => {
+    this.store.transact(() => {
       this.props.views = this.props.views.map(v => {
         if (v.id !== id) {
           return v;

blocksuite/affine/blocks/database/package.json

@@ -24,12 +24,12 @@
     "@blocksuite/icons": "^2.2.12",
     "@blocksuite/std": "workspace:*",
     "@blocksuite/store": "workspace:*",
+    "@emotion/css": "^11.13.5",
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.12",
+    "@toeverything/theme": "^1.1.14",
     "@types/mdast": "^4.0.4",
-    "@vanilla-extract/css": "^1.17.0",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/database/src/block-icons.ts

@@ -14,7 +14,19 @@ import {
 } from '@blocksuite/icons/lit';
 import type { BlockModel } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
-
+const icons: Record<string, TemplateResult> = {
+  text: TextIcon(),
+  quote: QuoteIcon(),
+  h1: Heading1Icon(),
+  h2: Heading2Icon(),
+  h3: Heading3Icon(),
+  h4: Heading4Icon(),
+  h5: Heading5Icon(),
+  h6: Heading6Icon(),
+  bulleted: BulletedListIcon(),
+  numbered: NumberedListIcon(),
+  todo: CheckBoxCheckLinearIcon(),
+};
 export const getIcon = (
   model: BlockModel & {
     props: {
@@ -24,27 +36,10 @@ export const getIcon = (
 ): TemplateResult => {
   if (model.flavour === 'affine:paragraph') {
     const type = model.props.type as ParagraphType;
-    return (
-      {
-        text: TextIcon(),
-        quote: QuoteIcon(),
-        h1: Heading1Icon(),
-        h2: Heading2Icon(),
-        h3: Heading3Icon(),
-        h4: Heading4Icon(),
-        h5: Heading5Icon(),
-        h6: Heading6Icon(),
-      } as Record<ParagraphType, TemplateResult>
-    )[type];
+    return icons[type] ?? TextIcon();
   }
   if (model.flavour === 'affine:list') {
-    return (
-      {
-        bulleted: BulletedListIcon(),
-        numbered: NumberedListIcon(),
-        todo: CheckBoxCheckLinearIcon(),
-      }[model.props.type ?? 'bulleted'] ?? BulletedListIcon()
-    );
+    return icons[model.props.type ?? 'bulleted'] ?? BulletedListIcon();
   }
   return TextIcon();
 };

blocksuite/affine/blocks/database/src/config.ts

@@ -1,10 +1,6 @@
-import type { MenuOptions } from '@blocksuite/affine-components/context-menu';
-import { type DatabaseBlockModel } from '@blocksuite/affine-model';
 import { ConfigExtensionFactory } from '@blocksuite/std';
 
-export interface DatabaseOptionsConfig {
-  configure: (model: DatabaseBlockModel, options: MenuOptions) => MenuOptions;
-}
+import type { DatabaseViewExtensionOptions } from './view';
 
 export const DatabaseConfigExtension =
-  ConfigExtensionFactory<DatabaseOptionsConfig>('affine:database');
+  ConfigExtensionFactory<DatabaseViewExtensionOptions>('affine:database');

blocksuite/affine/blocks/database/src/configs/slash-menu.ts

@@ -25,7 +25,7 @@ export const databaseSlashMenuConfig: SlashMenuConfig = {
       },
       group: '7_Database@0',
       when: ({ model }) =>
-        !isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'),
+        !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text'),
       action: ({ std }) => {
         std.command
           .chain()
@@ -58,7 +58,7 @@ export const databaseSlashMenuConfig: SlashMenuConfig = {
       },
       group: '7_Database@2',
       when: ({ model }) =>
-        !isInsideBlockByFlavour(model.doc, model, 'affine:edgeless-text'),
+        !isInsideBlockByFlavour(model.store, model, 'affine:edgeless-text'),
       action: ({ std }) => {
         std.command
           .chain()

blocksuite/affine/blocks/database/src/context/host-context.ts

@@ -1,7 +1,4 @@
-import { createContextKey } from '@blocksuite/data-view';
+import { createIdentifier } from '@blocksuite/global/di';
 import type { EditorHost } from '@blocksuite/std';
 
-export const HostContextKey = createContextKey<EditorHost | undefined>(
-  'editor-host',
-  undefined
-);
+export const EditorHostKey = createIdentifier<EditorHost>('editor-host');

blocksuite/affine/blocks/database/src/data-source.ts

@@ -2,6 +2,7 @@ import type {
   ColumnDataType,
   ColumnUpdater,
   DatabaseBlockModel,
+  ParagraphBlockModel,
 } from '@blocksuite/affine-model';
 import { getSelectedModelsCommand } from '@blocksuite/affine-shared/commands';
 import { FeatureFlagService } from '@blocksuite/affine-shared/services';
@@ -51,7 +52,62 @@ import {
   databaseBlockViews,
 } from './views/index.js';
 
+type SpacialProperty = {
+  valueSet: (rowId: string, propertyId: string, value: unknown) => void;
+  valueGet: (rowId: string, propertyId: string) => unknown;
+};
 export class DatabaseBlockDataSource extends DataSourceBase {
+  override get parentProvider() {
+    return this._model.store.provider;
+  }
+  spacialProperties: Record<string, SpacialProperty> = {
+    'created-time': {
+      valueSet: () => {},
+      valueGet: (rowId: string) => {
+        const model = this.getModelById(rowId) as ParagraphBlockModel;
+        if (!model) {
+          return null;
+        }
+        return model.props['meta:createdAt'];
+      },
+    },
+    'created-by': {
+      valueSet: () => {},
+      valueGet: (rowId: string) => {
+        const model = this.getModelById(rowId) as
+          | ParagraphBlockModel
+          | undefined;
+        return model ? model.props['meta:createdBy'] : null;
+      },
+    },
+    type: {
+      valueSet: () => {},
+      valueGet: (rowId: string) => {
+        const model = this.getModelById(rowId);
+        if (!model) {
+          return;
+        }
+        return getIcon(model);
+      },
+    },
+    title: {
+      valueSet: () => {},
+      valueGet: (rowId: string) => {
+        const model = this.getModelById(rowId);
+        if (!model) {
+          return;
+        }
+        return model.text;
+      },
+    },
+  };
+  isSpacialProperty(propertyId: string): boolean {
+    return this.spacialProperties[propertyId] !== undefined;
+  }
+  spacialValueGet(rowId: string, propertyId: string): unknown {
+    return this.spacialProperties[propertyId]?.valueGet(rowId, propertyId);
+  }
+
   static externalProperties = signal<PropertyMetaConfig[]>([]);
   static propertiesList = computed(() => {
     return [
@@ -71,11 +127,15 @@ export class DatabaseBlockDataSource extends DataSourceBase {
 
   override featureFlags$: ReadonlySignal<DatabaseFlags> = computed(() => {
     const featureFlagService = this.doc.get(FeatureFlagService);
-    const flag = featureFlagService.getFlag(
+    const enableNumberFormat = featureFlagService.getFlag(
       'enable_database_number_formatting'
     );
+    const enableTableVirtualScroll = featureFlagService.getFlag(
+      'enable_table_virtual_scroll'
+    );
     return {
-      enable_number_formatting: flag ?? false,
+      enable_number_formatting: enableNumberFormat ?? false,
+      enable_table_virtual_scroll: enableTableVirtualScroll ?? false,
     };
   });
 
@@ -95,7 +155,7 @@ export class DatabaseBlockDataSource extends DataSourceBase {
 
   readonly$: ReadonlySignal<boolean> = computed(() => {
     return (
-      this._model.doc.readonly ||
+      this._model.store.readonly ||
       // TODO(@L-Sun): use block level readonly
       IS_MOBILE
     );
@@ -116,7 +176,7 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   viewMetas = databaseBlockViews;
 
   get doc() {
-    return this._model.doc;
+    return this._model.store;
   }
 
   allPropertyMetas$ = computed<PropertyMetaConfig<any, any, any, any>[]>(() => {
@@ -129,9 +189,13 @@ export class DatabaseBlockDataSource extends DataSourceBase {
     );
   });
 
-  constructor(model: DatabaseBlockModel) {
+  constructor(
+    model: DatabaseBlockModel,
+    init?: (dataSource: DatabaseBlockDataSource) => void
+  ) {
     super();
-    this._model = model;
+    this._model = model; // ensure invariants first
+    init?.(this); // then allow external initialisation
   }
 
   private _runCapture() {
@@ -192,20 +256,15 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   }
 
   cellValueGet(rowId: string, propertyId: string): unknown {
-    if (propertyId === 'type') {
-      const model = this.getModelById(rowId);
-      if (!model) {
-        return;
-      }
-      return getIcon(model);
+    if (this.isSpacialProperty(propertyId)) {
+      return this.spacialValueGet(rowId, propertyId);
     }
     const type = this.propertyTypeGet(propertyId);
     if (!type) {
       return;
     }
     if (type === 'title') {
-      const model = this.getModelById(rowId);
-      return model?.text;
+      return this.spacialValueGet(rowId, 'title');
     }
     const meta = this.propertyMetaGet(type);
     if (!meta) {
@@ -298,7 +357,7 @@ export class DatabaseBlockDataSource extends DataSourceBase {
       return;
     }
     const { column: prevColumn, index } = result;
-    this._model.doc.transact(() => {
+    this._model.store.transact(() => {
       if (index >= 0) {
         const result = updater(prevColumn);
         this._model.props.columns[index] = { ...prevColumn, ...result };
@@ -496,15 +555,15 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   }
 
   viewDataAdd(viewData: DataViewDataType): string {
-    this._model.doc.captureSync();
-    this._model.doc.transact(() => {
+    this._model.store.captureSync();
+    this._model.store.transact(() => {
       this._model.props.views = [...this._model.props.views, viewData];
     });
     return viewData.id;
   }
 
   viewDataDelete(viewId: string): void {
-    this._model.doc.captureSync();
+    this._model.store.captureSync();
     deleteView(this._model, viewId);
   }
 
@@ -564,20 +623,20 @@ export const convertToDatabase = (host: EditorHost, viewType: string) => {
   const firstModel = selectedModels?.[0];
   if (!firstModel) return;
 
-  host.doc.captureSync();
+  host.store.captureSync();
 
-  const parentModel = host.doc.getParent(firstModel);
+  const parentModel = host.store.getParent(firstModel);
   if (!parentModel) {
     return;
   }
 
-  const id = host.doc.addBlock(
+  const id = host.store.addBlock(
     'affine:database',
     {},
     parentModel,
     parentModel.children.indexOf(firstModel)
   );
-  const databaseModel = host.doc.getBlock(id)?.model as
+  const databaseModel = host.store.getBlock(id)?.model as
     | DatabaseBlockModel
     | undefined;
   if (!databaseModel) {
@@ -585,7 +644,7 @@ export const convertToDatabase = (host: EditorHost, viewType: string) => {
   }
   const datasource = new DatabaseBlockDataSource(databaseModel);
   datasource.viewManager.viewAdd(viewType);
-  host.doc.moveBlocks(selectedModels, databaseModel);
+  host.store.moveBlocks(selectedModels, databaseModel);
 
   const selectionManager = host.selection;
   selectionManager.clear();

blocksuite/affine/blocks/database/src/database-block.ts

@@ -27,6 +27,7 @@ import {
   type DataViewWidget,
   type DataViewWidgetProps,
   defineUniComponent,
+  ExternalGroupByConfigProvider,
   renderUniLit,
   type SingleView,
   uniMap,
@@ -46,17 +47,15 @@ import { computed, signal } from '@preact/signals-core';
 import { css, html, nothing, unsafeCSS } from 'lit';
 
 import { popSideDetail } from './components/layout.js';
-import {
-  DatabaseConfigExtension,
-  type DatabaseOptionsConfig,
-} from './config.js';
-import { HostContextKey } from './context/host-context.js';
+import { DatabaseConfigExtension } from './config.js';
+import { EditorHostKey } from './context/host-context.js';
 import { DatabaseBlockDataSource } from './data-source.js';
 import { BlockRenderer } from './detail-panel/block-renderer.js';
 import { NoteRenderer } from './detail-panel/note-renderer.js';
 import { DatabaseSelection } from './selection.js';
 import { currentViewStorage } from './utils/current-view.js';
 import { getSingleDocIdFromText } from './utils/title-doc.js';
+import type { DatabaseViewExtensionOptions } from './view';
 
 export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBlockModel> {
   static override styles = css`
@@ -122,7 +121,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
           prefix: CopyIcon(),
           name: 'Copy',
           select: () => {
-            const slice = Slice.fromModels(this.doc, [this.model]);
+            const slice = Slice.fromModels(this.store, [this.model]);
             this.std.clipboard
               .copySlice(slice)
               .then(() => {
@@ -141,9 +140,9 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
               name: 'Delete Database',
               select: () => {
                 this.model.children.slice().forEach(block => {
-                  this.doc.deleteBlock(block);
+                  this.store.deleteBlock(block);
                 });
-                this.doc.deleteBlock(this.model);
+                this.store.deleteBlock(this.model);
               },
             }),
           ],
@@ -260,18 +259,18 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
       );
       return () => {
         this.indicator.remove();
-        const model = this.doc.getBlock(id)?.model;
+        const model = this.store.getBlock(id)?.model;
         const target = result.modelState.model;
-        let parent = this.doc.getParent(target.id);
+        let parent = this.store.getParent(target.id);
         const shouldInsertIn = result.placement === 'in';
         if (shouldInsertIn) {
           parent = target;
         }
         if (model && target && parent) {
           if (shouldInsertIn) {
-            this.doc.moveBlocks([model], parent);
+            this.store.moveBlocks([model], parent);
           } else {
-            this.doc.moveBlocks(
+            this.store.moveBlocks(
               [model],
               parent,
               target,
@@ -335,8 +334,17 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
 
   get dataSource(): DatabaseBlockDataSource {
     if (!this._dataSource) {
-      this._dataSource = new DatabaseBlockDataSource(this.model);
-      this._dataSource.contextSet(HostContextKey, this.host);
+      this._dataSource = new DatabaseBlockDataSource(this.model, dataSource => {
+        dataSource.serviceSet(EditorHostKey, this.host);
+        this.std.provider
+          .getAll(ExternalGroupByConfigProvider)
+          .forEach(config => {
+            dataSource.serviceSet(
+              ExternalGroupByConfigProvider(config.name),
+              config
+            );
+          });
+      });
       const id = currentViewStorage.getCurrentView(this.model.id);
       if (id && this.dataSource.viewManager.viewGet(id)) {
         this.dataSource.viewManager.setCurrentView(id);
@@ -345,7 +353,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     return this._dataSource;
   }
 
-  get optionsConfig(): DatabaseOptionsConfig {
+  get optionsConfig(): DatabaseViewExtensionOptions {
     return {
       configure: (_model, options) => options,
       ...this.std.getOptional(DatabaseConfigExtension.identifier),
@@ -436,13 +444,13 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
                   return peekViewService.peek({
                     docId,
                     databaseId: this.blockId,
-                    databaseDocId: this.model.doc.id,
+                    databaseDocId: this.model.store.id,
                     databaseRowId: data.rowId,
                     target: this,
                   });
                 };
                 const doc = getSingleDocIdFromText(
-                  this.model.doc.getBlock(data.rowId)?.model?.text
+                  this.model.store.getBlock(data.rowId)?.model?.text
                 );
                 if (doc) {
                   return openDoc(doc);

blocksuite/affine/blocks/database/src/database-spec.ts

@@ -1,14 +0,0 @@
-import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
-import { BlockViewExtension, FlavourExtension } from '@blocksuite/std';
-import type { ExtensionType } from '@blocksuite/store';
-import { literal } from 'lit/static-html.js';
-
-import { DatabaseBlockAdapterExtensions } from './adapters/extension.js';
-import { databaseSlashMenuConfig } from './configs/slash-menu.js';
-
-export const DatabaseBlockSpec: ExtensionType[] = [
-  FlavourExtension('affine:database'),
-  BlockViewExtension('affine:database', literal`affine-database`),
-  DatabaseBlockAdapterExtensions,
-  SlashMenuConfigExtension('affine:database', databaseSlashMenuConfig),
-].flat();

blocksuite/affine/blocks/database/src/detail-panel/block-renderer.ts

@@ -74,7 +74,7 @@ export class BlockRenderer
   }
 
   get model() {
-    return this.host?.doc.getBlock(this.rowId)?.model;
+    return this.host?.store.getBlock(this.rowId)?.model;
   }
 
   override connectedCallback() {
@@ -140,7 +140,7 @@ export class BlockRenderer
       return;
     }
     return html` <div class="database-block-detail-header-icon">
-      ${this.view.cellValueGet(this.rowId, iconColumn)}
+      ${this.view.cellGetOrCreate(this.rowId, iconColumn).value$.value}
     </div>`;
   }
 

blocksuite/affine/blocks/database/src/detail-panel/note-renderer.ts

@@ -36,7 +36,7 @@ export class NoteRenderer
   accessor rowId!: string;
 
   rowText$ = computed(() => {
-    return this.databaseBlock.doc.getBlock(this.rowId)?.model?.text;
+    return this.databaseBlock.store.getBlock(this.rowId)?.model?.text;
   });
 
   allowCreateDoc$ = computed(() => {

blocksuite/affine/blocks/database/src/effects.ts

@@ -4,6 +4,7 @@ import { DatabaseBlockComponent } from './database-block';
 import { DatabaseDndPreviewBlockComponent } from './database-dnd-preview-block';
 import { BlockRenderer } from './detail-panel/block-renderer';
 import { NoteRenderer } from './detail-panel/note-renderer';
+import { CreatedTimeCell } from './properties/created-time/cell-renderer';
 import { LinkCell } from './properties/link/cell-renderer';
 import { RichTextCell } from './properties/rich-text/cell-renderer';
 import { IconCell } from './properties/title/icon';
@@ -15,6 +16,7 @@ export function effects() {
   customElements.define('affine-database-link-cell', LinkCell);
   customElements.define('data-view-header-area-text', HeaderAreaTextCell);
   customElements.define('affine-database-rich-text-cell', RichTextCell);
+  customElements.define('affine-database-created-time-cell', CreatedTimeCell);
   customElements.define('center-peek', CenterPeek);
   customElements.define('database-datasource-note-renderer', NoteRenderer);
   customElements.define('database-datasource-block-renderer', BlockRenderer);

blocksuite/affine/blocks/database/src/index.ts

@@ -4,7 +4,6 @@ export * from './config';
 export * from './context';
 export * from './data-source';
 export * from './database-block';
-export * from './database-spec';
 export * from './detail-panel/block-renderer';
 export * from './detail-panel/note-renderer';
 export * from './properties';

blocksuite/affine/blocks/database/src/properties/created-time/cell-renderer.ts

@@ -0,0 +1,55 @@
+import {
+  BaseCellRenderer,
+  createFromBaseCellRenderer,
+  createIcon,
+} from '@blocksuite/data-view';
+import { css } from '@emotion/css';
+import { format } from 'date-fns/format';
+import { html } from 'lit';
+
+import { createdTimePropertyModelConfig } from './define.js';
+const createdTimeCellStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+});
+
+const textStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '100%',
+  height: '100%',
+});
+
+export class CreatedTimeCell extends BaseCellRenderer<number, number> {
+  renderContent() {
+    const formattedDate = this.value
+      ? format(this.value, 'yyyy-MM-dd HH:mm:ss')
+      : '';
+    return html`<div class="${textStyle}">${formattedDate}</div>`;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.classList.add(createdTimeCellStyle);
+  }
+
+  override beforeEnterEditMode() {
+    return false;
+  }
+
+  override render() {
+    return html`<div class="date-container">${this.renderContent()}</div>`;
+  }
+}
+
+export const createdTimeColumnConfig =
+  createdTimePropertyModelConfig.createPropertyMeta({
+    icon: createIcon('DateTimeIcon'),
+    cellRenderer: {
+      view: createFromBaseCellRenderer(CreatedTimeCell),
+    },
+  });

blocksuite/affine/blocks/database/src/properties/created-time/define.ts

@@ -0,0 +1,35 @@
+import { propertyType, t } from '@blocksuite/data-view';
+import { format } from 'date-fns/format';
+import zod from 'zod';
+
+export const createdTimeColumnType = propertyType('created-time');
+export const createdTimePropertyModelConfig = createdTimeColumnType.modelConfig(
+  {
+    name: 'Created Time',
+    propertyData: {
+      schema: zod.object({}),
+      default: () => ({}),
+    },
+    jsonValue: {
+      schema: zod.number().nullable(),
+      isEmpty: () => false,
+      type: () => t.date.instance(),
+    },
+    rawValue: {
+      schema: zod.number().nullable(),
+      default: () => null,
+      toString: ({ value }) =>
+        value != null ? format(value, 'yyyy-MM-dd HH:mm:ss') : '',
+      fromString: () => {
+        return { value: null };
+      },
+      toJson: ({ value }) => value,
+      fromJson: ({ value }) => value,
+    },
+    fixed: {
+      defaultData: {},
+      defaultShow: false,
+      defaultOrder: 'end',
+    },
+  }
+);