chore: merge blocksuite source code (#9213)

### Preview

![CleanShot 2024-12-19 at 20.41.47.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/60a701ea-bca0-42d5-8a06-f10af44c8fc8.gif)

### Render when scrolling

![CleanShot 2024-12-20 at 09.54.26.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/df0008d7-5bd9-4e98-b426-cb1036dbb611.gif)

### api
```tsx
const items = useMemo(() => {
    return {
        id: '',
        height: 100,
        children: <div></div>
    }
}, [])

<Masonry items={items} />
```

.cargo/config.toml

@@ -2,3 +2,7 @@
 rustflags = ["-C", "target-feature=+crt-static"]
 [target.aarch64-pc-windows-msvc]
 rustflags = ["-C", "target-feature=+crt-static"]
+[target.'cfg(target_os = "linux")']
+rustflags = ["-C", "link-args=-Wl,--warn-unresolved-symbols"]
+[target.'cfg(target_os = "macos")']
+rustflags = ["-C", "link-args=-all_load"]

.devcontainer/docker-compose.yml

@@ -11,6 +11,7 @@ services:
     network_mode: service:db
     environment:
       DATABASE_URL: postgresql://affine:affine@db:5432/affine
+      REDIS_SERVER_HOST: redis
 
   db:
     image: postgres:latest
@@ -21,6 +22,10 @@ services:
       POSTGRES_PASSWORD: affine
       POSTGRES_USER: affine
       POSTGRES_DB: affine
+  redis:
+    image: redis
+    ports:
+      - 6379:6379
 
 volumes:
   postgres-data:

.docker/dev/.env.example

@@ -0,0 +1,4 @@
+DATABASE_LOCATION=./postgres
+DB_PASSWORD=affine
+DB_USERNAME=affine
+DB_DATABASE_NAME=affine

.docker/dev/.gitignore

@@ -0,0 +1,3 @@
+postgres
+.env
+compose.yml

.docker/dev/compose.yml.example

@@ -0,0 +1,28 @@
+name: affine_dev_services
+services:
+  postgres:
+    env_file:
+      - .env
+    image: postgres:16
+    ports:
+      - 5432:5432
+    environment:
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+      POSTGRES_USER: ${DB_USERNAME}
+      POSTGRES_DB: ${DB_DATABASE_NAME}
+    volumes:
+      - ${DATABASE_LOCATION}:/var/lib/postgresql/data
+
+  redis:
+    image: redis:latest
+    ports:
+      - 6379:6379
+
+  mailhog:
+    image: mailhog/mailhog:latest
+    ports:
+      - 1025:1025
+      - 8025:8025
+
+networks:
+  dev:

.eslintignore

@@ -1,16 +0,0 @@
-node_modules
-dist
-.next
-out
-storybook-static
-affine-out
-_next
-lib
-.eslintrc.js
-e2e-dist-*
-static
-web-static
-public
-packages/frontend/i18n/src/i18n-generated.ts
-packages/frontend/i18n/src/i18n-completenesses.json
-packages/frontend/templates/*.gen.ts

.eslintrc.js

@@ -1,289 +0,0 @@
-const { join } = require('node:path');
-
-const createPattern = packageName => [
-  {
-    group: ['**/dist', '**/dist/**'],
-    message: 'Do not import from dist',
-    allowTypeImports: false,
-  },
-  {
-    group: ['**/src', '**/src/**'],
-    message: 'Do not import from src',
-    allowTypeImports: false,
-  },
-  {
-    group: [`@affine/${packageName}`],
-    message: 'Do not import package itself',
-    allowTypeImports: false,
-  },
-  {
-    group: [`@toeverything/${packageName}`],
-    message: 'Do not import package itself',
-    allowTypeImports: false,
-  },
-  {
-    group: ['@blocksuite/store'],
-    message: "Import from '@blocksuite/global/utils'",
-    importNames: ['assertExists', 'assertEquals'],
-  },
-  {
-    group: ['react-router-dom'],
-    message: 'Use `useNavigateHelper` instead',
-    importNames: ['useNavigate'],
-  },
-  {
-    group: ['@affine/env/constant'],
-    message:
-      'Do not import from @affine/env/constant. Use `BUILD_CONFIG.isElectron` instead',
-    importNames: ['isElectron'],
-  },
-];
-
-const allPackages = [
-  'packages/backend/server',
-  'packages/frontend/component',
-  'packages/frontend/core',
-  'packages/frontend/apps/electron',
-  'packages/frontend/apps/web',
-  'packages/frontend/apps/mobile',
-  'packages/frontend/graphql',
-  'packages/frontend/i18n',
-  'packages/frontend/native',
-  'packages/frontend/templates',
-  'packages/frontend/track',
-  'packages/common/debug',
-  'packages/common/env',
-  'packages/common/infra',
-  'packages/common/theme',
-  'tools/cli',
-];
-
-/**
- * @type {import('eslint').Linter.Config}
- */
-const config = {
-  root: true,
-  settings: {
-    react: {
-      version: 'detect',
-    },
-    next: {
-      rootDir: 'packages/frontend/core',
-    },
-  },
-  extends: [
-    'eslint:recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      globalReturn: false,
-      impliedStrict: true,
-      jsx: true,
-    },
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: join(__dirname, 'tsconfig.eslint.json'),
-  },
-  plugins: [
-    'react',
-    '@typescript-eslint',
-    'simple-import-sort',
-    'sonarjs',
-    'import-x',
-    'unused-imports',
-    'unicorn',
-    'rxjs',
-  ],
-  rules: {
-    'array-callback-return': 'error',
-    'no-undef': 'off',
-    'no-empty': 'off',
-    'no-func-assign': 'off',
-    'no-cond-assign': 'off',
-    'no-constant-binary-expression': 'error',
-    'no-constructor-return': 'error',
-    'no-self-compare': 'error',
-    eqeqeq: ['error', 'always', { null: 'ignore' }],
-    'react/prop-types': 'off',
-    'react/jsx-no-useless-fragment': 'error',
-    '@typescript-eslint/consistent-type-imports': 'error',
-    '@typescript-eslint/no-non-null-assertion': 'error',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    '@typescript-eslint/await-thenable': 'error',
-    '@typescript-eslint/require-array-sort-compare': 'error',
-    '@typescript-eslint/unified-signatures': 'error',
-    '@typescript-eslint/prefer-for-of': 'error',
-    '@typescript-eslint/no-unused-vars': [
-      'error',
-      {
-        varsIgnorePattern: '^_',
-        argsIgnorePattern: '^_',
-        caughtErrorsIgnorePattern: '^_',
-      },
-    ],
-    'unused-imports/no-unused-imports': 'error',
-    'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error',
-    'import-x/no-duplicates': 'error',
-    '@typescript-eslint/ban-ts-comment': [
-      'error',
-      {
-        'ts-expect-error': 'allow-with-description',
-        'ts-ignore': true,
-        'ts-nocheck': true,
-        'ts-check': false,
-      },
-    ],
-    '@typescript-eslint/no-restricted-imports': [
-      'error',
-      {
-        patterns: [
-          {
-            group: ['**/dist'],
-            message: "Don't import from dist",
-            allowTypeImports: false,
-          },
-          {
-            group: ['**/src'],
-            message: "Don't import from src",
-            allowTypeImports: false,
-          },
-          {
-            group: ['@blocksuite/store'],
-            message: "Import from '@blocksuite/global/utils'",
-            importNames: ['assertExists', 'assertEquals'],
-          },
-        ],
-      },
-    ],
-    'unicorn/filename-case': [
-      'error',
-      {
-        case: 'kebabCase',
-        ignore: ['^\\[[a-zA-Z0-9-_]+\\]\\.tsx$'],
-      },
-    ],
-    'unicorn/no-unnecessary-await': 'error',
-    'unicorn/no-useless-fallback-in-spread': 'error',
-    'unicorn/prefer-dom-node-dataset': 'error',
-    'unicorn/prefer-dom-node-append': 'error',
-    'unicorn/prefer-dom-node-remove': 'error',
-    'unicorn/prefer-array-some': 'error',
-    'unicorn/prefer-date-now': 'error',
-    'unicorn/prefer-blob-reading-methods': 'error',
-    'unicorn/no-typeof-undefined': 'error',
-    'unicorn/no-useless-promise-resolve-reject': 'error',
-    'unicorn/no-new-array': 'error',
-    'unicorn/new-for-builtins': 'error',
-    'unicorn/prefer-node-protocol': 'error',
-    'sonarjs/no-all-duplicated-branches': 'error',
-    'sonarjs/no-element-overwrite': 'error',
-    'sonarjs/no-empty-collection': 'error',
-    'sonarjs/no-extra-arguments': 'error',
-    'sonarjs/no-identical-conditions': 'error',
-    'sonarjs/no-identical-expressions': 'error',
-    'sonarjs/no-ignored-return': 'error',
-    'sonarjs/no-one-iteration-loop': 'error',
-    'sonarjs/no-use-of-empty-return-value': 'error',
-    'sonarjs/non-existent-operator': 'error',
-    'sonarjs/no-collapsible-if': 'error',
-    'sonarjs/no-same-line-conditional': 'error',
-    'sonarjs/no-duplicated-branches': 'error',
-    'sonarjs/no-collection-size-mischeck': 'error',
-    'sonarjs/no-useless-catch': 'error',
-    'sonarjs/no-identical-functions': 'error',
-    'rxjs/finnish': [
-      'error',
-      {
-        functions: false,
-        methods: false,
-        strict: true,
-        types: {
-          '^LiveData$': true,
-          // some yjs classes are Observables, but they don't need to be in Finnish notation
-          '^Doc$': false, // yjs Doc
-          '^Awareness$': false, // yjs Awareness
-          '^UndoManager$': false, // yjs UndoManager
-        },
-      },
-    ],
-  },
-  overrides: [
-    {
-      files: 'packages/backend/server/**/*.ts',
-      rules: {
-        '@typescript-eslint/consistent-type-imports': 0,
-      },
-    },
-    {
-      files: '*.cjs',
-      rules: {
-        '@typescript-eslint/no-var-requires': 0,
-      },
-    },
-    ...allPackages.map(pkg => ({
-      files: [`${pkg}/src/**/*.ts`, `${pkg}/src/**/*.tsx`, `${pkg}/**/*.mjs`],
-      rules: {
-        '@typescript-eslint/no-restricted-imports': [
-          'error',
-          {
-            patterns: createPattern(pkg),
-          },
-        ],
-        '@typescript-eslint/no-floating-promises': [
-          'error',
-          {
-            ignoreVoid: false,
-            ignoreIIFE: false,
-          },
-        ],
-        '@typescript-eslint/no-misused-promises': ['error'],
-        '@typescript-eslint/prefer-readonly': 'error',
-        'import-x/no-extraneous-dependencies': ['error'],
-        'react-hooks/exhaustive-deps': [
-          'warn',
-          {
-            additionalHooks:
-              '(useAsyncCallback|useCatchEventCallback|useDraggable|useDropTarget|useRefEffect)',
-          },
-        ],
-      },
-    })),
-    {
-      files: [
-        '**/__tests__/**/*',
-        '**/*.stories.tsx',
-        '**/*.spec.ts',
-        '**/tests/**/*',
-        'scripts/**/*',
-        '**/benchmark/**/*',
-        '**/__debug__/**/*',
-        '**/e2e/**/*',
-      ],
-      rules: {
-        '@typescript-eslint/no-non-null-assertion': 0,
-        '@typescript-eslint/ban-ts-comment': [
-          'error',
-          {
-            'ts-expect-error': false,
-            'ts-ignore': true,
-            'ts-nocheck': true,
-            'ts-check': false,
-          },
-        ],
-        '@typescript-eslint/no-floating-promises': 0,
-        '@typescript-eslint/no-misused-promises': 0,
-        '@typescript-eslint/no-restricted-imports': 0,
-      },
-    },
-  ],
-};
-
-module.exports = config;

.github/actions/build-rust/action.yml

@@ -7,9 +7,6 @@ inputs:
   package:
     description: 'Package to build'
     required: true
-  nx_token:
-    description: 'Nx Cloud access token'
-    required: false
 
 runs:
   using: 'composite'
@@ -51,5 +48,4 @@ runs:
       run: |
         yarn workspace ${{ inputs.package }} build --target ${{ inputs.target }} --use-napi-cross
       env:
-        NX_CLOUD_ACCESS_TOKEN: ${{ inputs.nx_token }}
         DEBUG: 'napi:*'

.github/actions/server-test-env/action.yml

@@ -15,6 +15,8 @@ runs:
 
     - name: Run init-db script
       shell: bash
+      env:
+        NODE_ENV: test
       run: |
         yarn workspace @affine/server exec prisma generate
         yarn workspace @affine/server exec prisma db push

.github/actions/setup-node/action.yml

@@ -46,6 +46,9 @@ runs:
         registry-url: https://npm.pkg.github.com
         scope: '@toeverything'
 
+    - uses: kenchan0130/actions-system-info@master
+      id: system-info
+
     - name: Init CorePack
       if: ${{ inputs.corepack-install == 'true' }}
       shell: bash
@@ -78,7 +81,7 @@ runs:
         path: |
           node_modules
           ${{ steps.yarn-cache.outputs.yarn_global_cache }}
-        key: node_modules-cache-${{ github.job }}-${{ runner.os }}
+        key: node_modules-cache-${{ github.job }}-${{ runner.os }}-${{ runner.arch }}-${{ steps.system-info.outputs.name }}-${{ steps.system-info.outputs.release }}-${{ steps.system-info.outputs.version }}
 
     # The network performance on macOS is very poor
     # and the decompression performance on Windows is very terrible
@@ -89,7 +92,7 @@ runs:
       with:
         path: |
           ${{ steps.yarn-cache.outputs.yarn_global_cache }}
-        key: node_modules-cache-${{ github.job }}-${{ runner.os }}
+        key: node_modules-cache-${{ github.job }}-${{ runner.os }}-${{ runner.arch }}-${{ steps.system-info.outputs.name }}-${{ steps.system-info.outputs.release }}-${{ steps.system-info.outputs.version }}
 
     - name: Cache full yarn cache on Linux
       uses: actions/cache@v4
@@ -98,7 +101,7 @@ runs:
         path: |
           node_modules
           ${{ steps.yarn-cache.outputs.yarn_global_cache }}
-        key: node_modules-cache-full-${{ runner.os }}
+        key: node_modules-cache-full-${{ runner.os }}-${{ runner.arch }}-${{ steps.system-info.outputs.name }}-${{ steps.system-info.outputs.release }}-${{ steps.system-info.outputs.version }}
 
     - name: Cache full yarn cache on non-Linux
       uses: actions/cache@v4
@@ -106,7 +109,7 @@ runs:
       with:
         path: |
           ${{ steps.yarn-cache.outputs.yarn_global_cache }}
-        key: node_modules-cache-full-${{ runner.os }}
+        key: node_modules-cache-full-${{ runner.os }}-${{ runner.arch }}-${{ steps.system-info.outputs.name }}-${{ steps.system-info.outputs.release }}-${{ steps.system-info.outputs.version }}
 
     - name: yarn install
       if: ${{ inputs.package-install == 'true' }}
@@ -148,7 +151,7 @@ runs:
       if: ${{ inputs.playwright-install == 'true' }}
       with:
         path: ${{ github.workspace }}/node_modules/.cache/ms-playwright
-        key: '${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}'
+        key: '${{ runner.os }}-${{ runner.arch }}-${{ steps.system-info.outputs.name }}-${{ steps.system-info.outputs.release }}-${{ steps.system-info.outputs.version }}-playwright-${{ steps.playwright-version.outputs.version }}'
         # As a fallback, if the Playwright version has changed, try use the
         # most recently cached version. There's a good chance that at least one
         # of the browser binary versions haven't been updated, so Playwright can
@@ -158,7 +161,7 @@ runs:
         # date cache, but still let Playwright decide if it needs to download
         # new binaries or not.
         restore-keys: |
-          ${{ runner.os }}-playwright-
+          ${{ runner.os }}-${{ runner.arch }}-${{ steps.system-info.outputs.name }}-${{ steps.system-info.outputs.release }}-${{ steps.system-info.outputs.version }}-playwright-
 
     # If the Playwright browser binaries weren't able to be restored, we tell
     # playwright to install everything for us.
@@ -181,9 +184,9 @@ runs:
       if: ${{ inputs.electron-install == 'true' }}
       with:
         path: 'node_modules/.cache/electron'
-        key: '${{ runner.os }}-electron-${{ steps.electron-version.outputs.version }}'
+        key: '${{ runner.os }}-${{ runner.arch }}-${{ steps.system-info.outputs.name }}-${{ steps.system-info.outputs.release }}-${{ steps.system-info.outputs.version }}-electron-${{ steps.electron-version.outputs.version }}'
         restore-keys: |
-          ${{ runner.os }}-electron-
+          ${{ runner.os }}-${{ runner.arch }}-${{ steps.system-info.outputs.name }}-${{ steps.system-info.outputs.release }}-${{ steps.system-info.outputs.version }}-electron-
 
     - name: Install Electron binary
       shell: bash

.github/deployment/self-host/.env.example

@@ -0,0 +1,23 @@
+# select a revision to deploy, available values: stable, beta, canary
+AFFINE_REVISION=stable
+
+# set the port for the server container it will expose the server on
+PORT=3010
+
+# set the host for the server for outgoing links
+# AFFINE_SERVER_HTTPS=true
+# AFFINE_SERVER_HOST=affine.yourdomain.com
+# or 
+# AFFINE_SERVER_EXTERNAL_URL=https://affine.yourdomain.com
+
+# position of the database data to persist
+DB_DATA_LOCATION=~/.affine/self-host/postgres
+# position of the upload data(images, files, etc.) to persist
+UPLOAD_LOCATION=~/.affine/self-host/storage
+# position of the configuration files to persist
+CONFIG_LOCATION=~/.affine/self-host/config
+
+# database credentials
+DB_USERNAME=affine
+DB_PASSWORD=
+DB_DATABASE=affine

.github/deployment/self-host/compose.yaml

@@ -1,60 +1,71 @@
+name: affine
 services:
   affine:
-    image: ghcr.io/toeverything/affine-graphql:stable
-    container_name: affine_selfhosted
-    command:
-      ['sh', '-c', 'node ./scripts/self-host-predeploy && node ./dist/index.js']
+    image: ghcr.io/toeverything/affine-graphql:${AFFINE_REVISION:-stable}
+    container_name: affine_server
     ports:
-      - '3010:3010'
-      - '5555:5555'
+      - '${PORT:-3010}:3010'
     depends_on:
       redis:
         condition: service_healthy
       postgres:
         condition: service_healthy
+      affine_migration:
+        condition: service_completed_successfully
     volumes:
       # custom configurations
-      - ~/.affine/self-host/config:/root/.affine/config
-      # blob storage
-      - ~/.affine/self-host/storage:/root/.affine/storage
-    logging:
-      driver: 'json-file'
-      options:
-        max-size: '1000m'
-    restart: unless-stopped
+      - ${UPLOAD_LOCATION}:/root/.affine/storage
+      - ${CONFIG_LOCATION}:/root/.affine/config
+    env_file:
+      - .env
     environment:
-      - NODE_OPTIONS="--import=./scripts/register.js"
-      - AFFINE_CONFIG_PATH=/root/.affine/config
-      - REDIS_SERVER_HOST=redis
-      - DATABASE_URL=postgres://affine:affine@postgres:5432/affine
       - NODE_ENV=production
-      # Telemetry allows us to collect data on how you use the affine. This data will helps us improve the app and provide better features.
-      # Uncomment next line if you wish to quit telemetry.
-      # - TELEMETRY_ENABLE=false
+      - DATABASE_URL=postgresql://${DB_USERNAME}:${DB_PASSWORD}@postgres:5432/${DB_DATABASE:-affine}
+    restart: unless-stopped
+
+  affine_migration:
+    image: ghcr.io/toeverything/affine-graphql:${AFFINE_REVISION:-stable}
+    container_name: affine_migration_job
+    volumes:
+      # custom configurations
+      - ${UPLOAD_LOCATION}:/root/.affine/storage
+      - ${CONFIG_LOCATION}:/root/.affine/config
+    command: ['sh', '-c', 'node ./scripts/self-host-predeploy.js']
+    env_file:
+      - .env
+    environment:
+      - DATABASE_URL=postgresql://${DB_USERNAME}:${DB_PASSWORD}@postgres:5432/${DB_DATABASE:-affine}
+    depends_on:
+      postgres:
+        condition: service_healthy
+
   redis:
     image: redis
-    container_name: affine_redis
-    restart: unless-stopped
-    volumes:
-      - ~/.affine/self-host/redis:/data
+    container_name: redis
     healthcheck:
       test: ['CMD', 'redis-cli', '--raw', 'incr', 'ping']
       interval: 10s
       timeout: 5s
       retries: 5
+    restart: unless-stopped
+
   postgres:
     image: postgres:16
-    container_name: affine_postgres
-    restart: unless-stopped
+    container_name: postgres
     volumes:
-      - ~/.affine/self-host/postgres:/var/lib/postgresql/data
+      - ${DB_DATA_LOCATION}:/var/lib/postgresql/data
+    environment:
+      POSTGRES_USER: ${DB_USERNAME}
+      POSTGRES_PASSWORD: ${DB_PASSWORD}
+      POSTGRES_DB: ${DB_DATABASE:-affine}
+      POSTGRES_INITDB_ARGS: '--data-checksums'
+      # you better set a password for you database
+      # or you may add 'POSTGRES_HOST_AUTH_METHOD=trust' to ignore postgres security policy
+      POSTGRES_HOST_AUTH_METHOD: trust
     healthcheck:
-      test: ['CMD-SHELL', 'pg_isready -U affine']
+      test:
+        ['CMD', 'pg_isready', '-U', "${DB_USERNAME}", '-d', "${DB_DATABASE:-affine}"]
       interval: 10s
       timeout: 5s
       retries: 5
-    environment:
-      POSTGRES_USER: affine
-      POSTGRES_PASSWORD: affine
-      POSTGRES_DB: affine
-      PGDATA: /var/lib/postgresql/data/pgdata
+    restart: unless-stopped

.github/renovate.json

@@ -7,15 +7,13 @@
     "**/bower_components/**",
     "**/vendor/**",
     "**/examples/**",
-    "**/__tests__/**",
-    "**/test/**",
-    "**/__fixtures__/**"
+    "**/__tests__/**"
   ],
   "packageRules": [
     {
-      "matchPackagePatterns": ["^eslint", "^@typescript-eslint"],
       "rangeStrategy": "replace",
-      "groupName": "linter"
+      "groupName": "linter",
+      "matchPackageNames": ["/^eslint/", "/^@typescript-eslint/"]
     },
     {
       "matchDepNames": ["oxlint"],
@@ -24,17 +22,15 @@
     },
     {
       "groupName": "blocksuite",
-      "matchPackagePatterns": ["^@blocksuite"],
-      "excludePackageNames": ["@blocksuite/icons"],
       "rangeStrategy": "replace",
-      "changelogUrl": "https://github.com/toeverything/blocksuite/blob/master/packages/blocks/CHANGELOG.md"
+      "changelogUrl": "https://github.com/toeverything/blocksuite/blob/master/packages/blocks/CHANGELOG.md",
+      "matchPackageNames": ["/^@blocksuite/", "!@blocksuite/icons"]
     },
     {
       "groupName": "all non-major dependencies",
       "groupSlug": "all-minor-patch",
-      "matchPackagePatterns": ["*"],
-      "excludePackagePatterns": ["^@blocksuite/", "oxlint"],
-      "matchUpdateTypes": ["minor", "patch"]
+      "matchUpdateTypes": ["minor", "patch"],
+      "matchPackageNames": ["*", "!/^@blocksuite//", "!/oxlint/"]
     },
     {
       "groupName": "rust toolchain",
@@ -43,7 +39,7 @@
     },
     {
       "groupName": "nestjs",
-      "matchPackagePatterns": ["^@nestjs"]
+      "matchPackageNames": ["/^@nestjs/"]
     }
   ],
   "commitMessagePrefix": "chore: ",

.github/workflows/build-images.yml

@@ -7,9 +7,6 @@ on:
         type: string
         required: true
 
-env:
-  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
-
 permissions:
   contents: 'write'
   id-token: 'write'
@@ -50,7 +47,7 @@ jobs:
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
       - name: Build Core
-        run: yarn nx build @affine/web --skip-nx-cache
+        run: yarn workspace @affine/web build
         env:
           R2_ACCOUNT_ID: ${{ secrets.R2_ACCOUNT_ID }}
           R2_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
@@ -83,7 +80,7 @@ jobs:
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
       - name: Build Admin
-        run: yarn nx build @affine/admin --skip-nx-cache
+        run: yarn workspace @affine/admin build
         env:
           R2_ACCOUNT_ID: ${{ secrets.R2_ACCOUNT_ID }}
           R2_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
@@ -115,7 +112,7 @@ jobs:
       - name: Setup Node.js
         uses: ./.github/actions/setup-node
       - name: Build Mobile
-        run: yarn nx build @affine/mobile --skip-nx-cache
+        run: yarn workspace @affine/mobile build
         env:
           R2_ACCOUNT_ID: ${{ secrets.R2_ACCOUNT_ID }}
           R2_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
@@ -163,7 +160,6 @@ jobs:
         with:
           target: ${{ matrix.targets.name }}
           package: '@affine/server-native'
-          nx_token: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
       - name: Upload ${{ matrix.targets.file }}
         uses: actions/upload-artifact@v4
         with:

.github/workflows/build-test.yml

@@ -19,7 +19,6 @@ env:
   AFFINE_ENV: dev
   COVERAGE: true
   MACOSX_DEPLOYMENT_TARGET: '10.13'
-  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
   PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/node_modules/.cache/ms-playwright
   DEPLOYMENT_TYPE: affine
 
@@ -173,31 +172,6 @@ jobs:
           path: ./test-results
           if-no-files-found: ignore
 
-  e2e-migration-test:
-    name: E2E Migration Test
-    runs-on: ubuntu-latest
-    env:
-      DISTRIBUTION: web
-    steps:
-      - uses: actions/checkout@v4
-      - name: Setup Node.js
-        uses: ./.github/actions/setup-node
-        with:
-          playwright-install: true
-          electron-install: false
-          full-cache: true
-
-      - name: Run playwright tests
-        run: yarn workspace @affine-test/affine-migration e2e --forbid-only
-
-      - name: Upload test results
-        if: ${{ failure() }}
-        uses: actions/upload-artifact@v4
-        with:
-          name: test-results-e2e-migration
-          path: ./test-results
-          if-no-files-found: ignore
-
   unit-test:
     name: Unit Test
     runs-on: ubuntu-latest
@@ -220,7 +194,7 @@ jobs:
           path: ./packages/frontend/native
 
       - name: Unit Test
-        run: yarn nx test:coverage @affine/monorepo
+        run: yarn test:coverage
 
       - name: Upload unit test coverage results
         uses: codecov/codecov-action@v5
@@ -263,7 +237,6 @@ jobs:
         with:
           target: ${{ matrix.spec.target }}
           package: '@affine/native'
-          nx_token: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
       - name: Upload ${{ steps.filename.outputs.filename }}
         uses: actions/upload-artifact@v4
         with:
@@ -288,7 +261,6 @@ jobs:
         with:
           target: 'x86_64-unknown-linux-gnu'
           package: '@affine/server-native'
-          nx_token: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
       - name: Upload server-native.node
         uses: actions/upload-artifact@v4
         with:
@@ -329,6 +301,7 @@ jobs:
       NODE_ENV: test
       DISTRIBUTION: web
       DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      REDIS_SERVER_HOST: localhost
     services:
       postgres:
         image: postgres
@@ -341,6 +314,10 @@ jobs:
           --health-retries 5
         ports:
           - 5432:5432
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
       mailer:
         image: mailhog/mailhog
         ports:
@@ -379,11 +356,10 @@ jobs:
           name: affine
           fail_ci_if_error: false
 
-  server-native-test:
-    name: Run server native tests
+  rust-test:
+    name: Run native tests
     runs-on: ubuntu-latest
     env:
-      RUSTFLAGS: -D warnings
       CARGO_TERM_COLOR: always
     steps:
       - uses: actions/checkout@v4
@@ -405,6 +381,7 @@ jobs:
       NODE_ENV: test
       DISTRIBUTION: web
       DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      REDIS_SERVER_HOST: localhost
     services:
       postgres:
         image: postgres
@@ -417,6 +394,10 @@ jobs:
           --health-retries 5
         ports:
           - 5432:5432
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
       mailer:
         image: mailhog/mailhog
         ports:
@@ -437,32 +418,33 @@ jobs:
           fi
 
       - uses: dorny/paths-filter@v3
-        id: filter
+        id: apifilter
         with:
           filters: |
-            backend:
-              - 'packages/backend/server/src/**'
+            changed:
+              - 'packages/backend/server/src/plugins/copilot/**'
+              - 'packages/backend/server/tests/copilot.*'
 
       - name: Setup Node.js
-        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.filter.outputs.backend == 'true' }}
+        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.apifilter.outputs.changed == 'true' }}
         uses: ./.github/actions/setup-node
         with:
           electron-install: false
           full-cache: true
 
       - name: Download server-native.node
-        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.filter.outputs.backend == 'true' }}
+        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.apifilter.outputs.changed == 'true' }}
         uses: actions/download-artifact@v4
         with:
           name: server-native.node
           path: ./packages/backend/server
 
       - name: Prepare Server Test Environment
-        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.filter.outputs.backend == 'true' }}
+        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.apifilter.outputs.changed == 'true' }}
         uses: ./.github/actions/server-test-env
 
       - name: Run server tests
-        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.filter.outputs.backend == 'true' }}
+        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.apifilter.outputs.changed == 'true' }}
         run: yarn workspace @affine/server test:copilot:coverage --forbid-only
         env:
           CARGO_TARGET_DIR: '${{ github.workspace }}/target'
@@ -470,7 +452,7 @@ jobs:
           COPILOT_FAL_API_KEY: ${{ secrets.COPILOT_FAL_API_KEY }}
 
       - name: Upload server test coverage results
-        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.filter.outputs.backend == 'true' }}
+        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.apifilter.outputs.changed == 'true' }}
         uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
@@ -486,6 +468,8 @@ jobs:
       DISTRIBUTION: web
       DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
       IN_CI_TEST: true
+      REDIS_SERVER_HOST: localhost
+      DEPLOYMENT_TYPE: affine
     strategy:
       fail-fast: false
       matrix:
@@ -505,6 +489,10 @@ jobs:
           --health-retries 5
         ports:
           - 5432:5432
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
     steps:
       - uses: actions/checkout@v4
 
@@ -519,8 +507,17 @@ jobs:
             echo "skip=true" >> $GITHUB_OUTPUT
           fi
 
+      - uses: dorny/paths-filter@v3
+        id: e2efilter
+        with:
+          filters: |
+            changed:
+              - 'packages/frontend/core/src/blocksuite/presets/ai/**'
+              - 'packages/frontend/core/src/components/blocksuite/block-suite-editor/ai/**'
+              - 'tests/affine-cloud-copilot/**'
+
       - name: Setup Node.js
-        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' }}
+        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.e2efilter.outputs.changed == 'true' }}
         uses: ./.github/actions/setup-node
         with:
           playwright-install: true
@@ -528,14 +525,14 @@ jobs:
           hard-link-nm: false
 
       - name: Download server-native.node
-        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' }}
+        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.e2efilter.outputs.changed == 'true' }}
         uses: actions/download-artifact@v4
         with:
           name: server-native.node
           path: ./packages/backend/server
 
       - name: Run Copilot E2E Test ${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
-        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' }}
+        if: ${{ steps.check-blocksuite-update.outputs.skip != 'true' || steps.e2efilter.outputs.changed == 'true' }}
         uses: ./.github/actions/copilot-test
         with:
           script: yarn workspace @affine-test/affine-cloud-copilot e2e --forbid-only --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
@@ -548,6 +545,7 @@ jobs:
     env:
       DISTRIBUTION: web
       DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      REDIS_SERVER_HOST: localhost
       IN_CI_TEST: true
     strategy:
       fail-fast: false
@@ -582,6 +580,10 @@ jobs:
           --health-retries 5
         ports:
           - 5432:5432
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
       mailer:
         image: mailhog/mailhog
         ports:
@@ -671,7 +673,7 @@ jobs:
         uses: ./.github/actions/setup-node
         timeout-minutes: 10
         with:
-          extra-flags: workspaces focus @affine/electron @affine/monorepo @affine-test/affine-desktop
+          extra-flags: workspaces focus @affine/electron @affine/monorepo @affine-test/affine-desktop @affine/nbstore @toeverything/infra
           playwright-install: true
           hard-link-nm: false
           enableScripts: false
@@ -766,13 +768,12 @@ jobs:
       - check-yarn-binary
       - e2e-test
       - e2e-mobile-test
-      - e2e-migration-test
       - unit-test
       - build-native
       - build-server-native
       - build-electron-renderer
       - server-test
-      - server-native-test
+      - rust-test
       - copilot-api-test
       - copilot-e2e-test
       - server-e2e-test

.github/workflows/copilot-test.yml

@@ -4,7 +4,6 @@ on:
   workflow_dispatch:
 
 env:
-  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
   PLAYWRIGHT_BROWSERS_PATH: ${{ github.workspace }}/node_modules/.cache/ms-playwright
 
 jobs:
@@ -25,7 +24,6 @@ jobs:
         with:
           target: 'x86_64-unknown-linux-gnu'
           package: '@affine/server-native'
-          nx_token: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
       - name: Upload server-native.node
         uses: actions/upload-artifact@v4
         with:
@@ -42,6 +40,7 @@ jobs:
       NODE_ENV: test
       DISTRIBUTION: web
       DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      REDIS_SERVER_HOST: localhost
     services:
       postgres:
         image: postgres
@@ -54,6 +53,10 @@ jobs:
           --health-retries 5
         ports:
           - 5432:5432
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
       mailer:
         image: mailhog/mailhog
         ports:
@@ -100,6 +103,7 @@ jobs:
     env:
       DISTRIBUTION: web
       DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      REDIS_SERVER_HOST: localhost
       IN_CI_TEST: true
     strategy:
       fail-fast: false
@@ -120,6 +124,10 @@ jobs:
           --health-retries 5
         ports:
           - 5432:5432
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/deploy.yml

@@ -12,8 +12,6 @@ on:
           - beta
           - stable
           - internal
-env:
-  NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
 
 permissions:
   contents: 'write'

.github/workflows/release-desktop.yml

@@ -60,7 +60,6 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           SENTRY_RELEASE: ${{ steps.version.outputs.APP_VERSION }}
           RELEASE_VERSION: ${{ steps.version.outputs.APP_VERSION }}
-          SKIP_NX_CACHE: 'true'
           MIXPANEL_TOKEN: ${{ secrets.MIXPANEL_TOKEN }}
 
       - name: Upload web artifact
@@ -108,7 +107,7 @@ jobs:
         timeout-minutes: 10
         uses: ./.github/actions/setup-node
         with:
-          extra-flags: workspaces focus @affine/electron @affine/monorepo
+          extra-flags: workspaces focus @affine/electron @affine/monorepo @affine/nbstore @toeverything/infra
           hard-link-nm: false
           nmHoistingLimits: workspaces
           enableScripts: false
@@ -117,7 +116,6 @@ jobs:
         with:
           target: ${{ matrix.spec.target }}
           package: '@affine/native'
-          nx_token: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
       - uses: actions/download-artifact@v4
         with:
           name: web
@@ -170,14 +168,14 @@ jobs:
           mv packages/frontend/apps/electron/out/*/make/deb/${{ matrix.spec.arch }}/*.deb ./builds/affine-${{ needs.before-make.outputs.RELEASE_VERSION }}-${{ env.BUILD_TYPE }}-linux-${{ matrix.spec.arch }}.deb
           mv packages/frontend/apps/electron/out/*/make/flatpak/*/*.flatpak ./builds/affine-${{ needs.before-make.outputs.RELEASE_VERSION }}-${{ env.BUILD_TYPE }}-linux-${{ matrix.spec.arch }}.flatpak
 
-      - uses: actions/attest-build-provenance@v1
+      - uses: actions/attest-build-provenance@v2
         if: ${{ matrix.spec.platform == 'darwin' }}
         with:
           subject-path: |
             ./builds/affine-${{ needs.before-make.outputs.RELEASE_VERSION }}-${{ env.BUILD_TYPE }}-macos-${{ matrix.spec.arch }}.zip
             ./builds/affine-${{ needs.before-make.outputs.RELEASE_VERSION }}-${{ env.BUILD_TYPE }}-macos-${{ matrix.spec.arch }}.dmg
 
-      - uses: actions/attest-build-provenance@v1
+      - uses: actions/attest-build-provenance@v2
         if: ${{ matrix.spec.platform == 'linux' }}
         with:
           subject-path: |
@@ -225,7 +223,7 @@ jobs:
         timeout-minutes: 10
         uses: ./.github/actions/setup-node
         with:
-          extra-flags: workspaces focus @affine/electron @affine/monorepo
+          extra-flags: workspaces focus @affine/electron @affine/monorepo @affine/nbstore @toeverything/infra
           hard-link-nm: false
           nmHoistingLimits: workspaces
       - name: Build AFFiNE native
@@ -233,7 +231,6 @@ jobs:
         with:
           target: ${{ matrix.spec.target }}
           package: '@affine/native'
-          nx_token: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
       - uses: actions/download-artifact@v4
         with:
           name: web
@@ -386,7 +383,7 @@ jobs:
           mv packages/frontend/apps/electron/out/*/make/squirrel.windows/${{ matrix.spec.arch }}/*.exe ./builds/affine-${{ needs.before-make.outputs.RELEASE_VERSION }}-${{ env.BUILD_TYPE }}-windows-${{ matrix.spec.arch }}.exe
           mv packages/frontend/apps/electron/out/*/make/nsis.windows/${{ matrix.spec.arch }}/*.exe ./builds/affine-${{ needs.before-make.outputs.RELEASE_VERSION }}-${{ env.BUILD_TYPE }}-windows-${{ matrix.spec.arch }}.nsis.exe
 
-      - uses: actions/attest-build-provenance@v1
+      - uses: actions/attest-build-provenance@v2
         with:
           subject-path: |
             ./builds/affine-${{ needs.before-make.outputs.RELEASE_VERSION }}-${{ env.BUILD_TYPE }}-windows-${{ matrix.spec.arch }}.zip
@@ -415,33 +412,37 @@ jobs:
         uses: actions/download-artifact@v4
         with:
           name: affine-darwin-x64-builds
-          path: ./
+          path: ./release
       - name: Download Artifacts (macos-arm64)
         uses: actions/download-artifact@v4
         with:
           name: affine-darwin-arm64-builds
-          path: ./
+          path: ./release
       - name: Download Artifacts (windows-x64)
         uses: actions/download-artifact@v4
         with:
           name: affine-win32-x64-builds
-          path: ./
+          path: ./release
       - name: Download Artifacts (windows-arm64)
         uses: actions/download-artifact@v4
         with:
           name: affine-win32-arm64-builds
-          path: ./
+          path: ./release
       - name: Download Artifacts (linux-x64)
         uses: actions/download-artifact@v4
         with:
           name: affine-linux-x64-builds
-          path: ./
+          path: ./release
       - uses: actions/setup-node@v4
         with:
           node-version: 20
+      - name: Copy Selfhost Release Files
+        run: |
+          cp ./.github/deployment/self-host/compose.yaml ./release/docker-compose.yaml
+          cp ./.github/deployment/self-host/.env.example ./release/.env.example
       - name: Generate Release yml
         run: |
-          node ./packages/frontend/apps/electron/scripts/generate-yml.js
+          node ./scripts/generate-release-yml.mjs
         env:
           RELEASE_VERSION: ${{ needs.before-make.outputs.RELEASE_VERSION }}
       - name: Create Release Draft
@@ -452,16 +453,7 @@ jobs:
           body: ''
           draft: ${{ github.event.inputs.is-draft }}
           prerelease: ${{ github.event.inputs.is-pre-release }}
-          files: |
-            ./VERSION
-            ./*.zip
-            ./*.dmg
-            ./*.exe
-            ./*.appimage
-            ./*.deb
-            ./*.flatpak
-            ./*.apk
-            ./*.yml
+          files: ./release/*
       - name: Create Nightly Release Draft
         if: ${{ github.ref_type == 'branch' }}
         uses: softprops/action-gh-release@v2
@@ -476,13 +468,4 @@ jobs:
           body: ''
           draft: false
           prerelease: true
-          files: |
-            ./VERSION
-            ./*.zip
-            ./*.dmg
-            ./*.exe
-            ./*.appimage
-            ./*.deb
-            ./*.apk
-            ./*.flatpak
-            ./*.yml
+          files: ./release/*

.github/workflows/release-mobile.yml

@@ -37,9 +37,25 @@ env:
   KEYCHAIN_NAME: ${{ github.workspace }}/signing_temp
 
 jobs:
-  build-ios-web:
+  output-env:
     runs-on: ubuntu-latest
-    environment: ${{ inputs.build-type || github.event.inputs.build-type }}
+    outputs:
+      ENVIRONMENT: ${{ steps.env.outputs.ENVIRONMENT }}
+    steps:
+      - name: Output Environment
+        id: env
+        run: |
+          if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
+            echo "ENVIRONMENT=${{ github.event.inputs.build-type }}" >> $GITHUB_OUTPUT
+          else
+            echo "ENVIRONMENT=" >> $GITHUB_OUTPUT
+          fi
+
+  build-ios-web:
+    needs:
+      - output-env
+    runs-on: ubuntu-latest
+    environment: ${{ needs.output-env.outputs.ENVIRONMENT }}
     outputs:
       RELEASE_VERSION: ${{ steps.version.outputs.APP_VERSION }}
     steps:
@@ -52,7 +68,7 @@ jobs:
       - name: Setup @sentry/cli
         uses: ./.github/actions/setup-sentry
       - name: Build Mobile
-        run: yarn nx build @affine/ios --skip-nx-cache
+        run: yarn workspace @affine/ios build
         env:
           PUBLIC_PATH: '/'
           MIXPANEL_TOKEN: ${{ secrets.MIXPANEL_TOKEN }}
@@ -62,7 +78,6 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           SENTRY_RELEASE: ${{ steps.version.outputs.APP_VERSION }}
           RELEASE_VERSION: ${{ steps.version.outputs.APP_VERSION }}
-          SKIP_NX_CACHE: 'true'
       - name: Upload ios artifact
         uses: actions/upload-artifact@v4
         with:
@@ -71,7 +86,9 @@ jobs:
 
   build-android-web:
     runs-on: ubuntu-latest
-    environment: ${{ github.event.inputs.build-type || inputs.build-type }}
+    needs:
+      - output-env
+    environment: ${{ needs.output-env.outputs.ENVIRONMENT }}
     outputs:
       RELEASE_VERSION: ${{ steps.version.outputs.APP_VERSION }}
     steps:
@@ -84,7 +101,7 @@ jobs:
       - name: Setup @sentry/cli
         uses: ./.github/actions/setup-sentry
       - name: Build Mobile
-        run: yarn nx build @affine/android --skip-nx-cache
+        run: yarn workspace @affine/android build
         env:
           PUBLIC_PATH: '/'
           MIXPANEL_TOKEN: ${{ secrets.MIXPANEL_TOKEN }}
@@ -94,7 +111,6 @@ jobs:
           SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           SENTRY_RELEASE: ${{ steps.version.outputs.APP_VERSION }}
           RELEASE_VERSION: ${{ steps.version.outputs.APP_VERSION }}
-          SKIP_NX_CACHE: 'true'
       - name: Upload android artifact
         uses: actions/upload-artifact@v4
         with:
@@ -132,6 +148,10 @@ jobs:
       - uses: maxim-lobanov/setup-xcode@v1
         with:
           xcode-version: latest-stable
+      - name: Setup Rust
+        uses: ./.github/actions/setup-rust
+        with:
+          targets: 'aarch64-apple-ios'
       - name: Testflight
         if: ${{ env.BUILD_TYPE != 'stable' }}
         working-directory: packages/frontend/apps/ios/App
@@ -169,8 +189,15 @@ jobs:
           electron-install: false
           hard-link-nm: false
           enableScripts: false
+      - name: Setup Rust
+        uses: ./.github/actions/setup-rust
+        with:
+          targets: 'aarch64-linux-android'
       - name: Cap sync
         run: yarn workspace @affine/android cap sync
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
       - name: Auth gcloud
         id: auth
         uses: google-github-actions/auth@v2
@@ -185,6 +212,7 @@ jobs:
         with:
           distribution: 'temurin'
           java-version: '17'
+          cache: 'gradle'
       - name: Auto increment version code
         id: bump
         if: ${{ env.BUILD_TARGET == 'distribution' }}
@@ -199,6 +227,7 @@ jobs:
           AFFINE_ANDROID_KEYSTORE_PASSWORD: ${{ secrets.AFFINE_ANDROID_KEYSTORE_PASSWORD }}
           AFFINE_ANDROID_KEYSTORE_ALIAS_PASSWORD: ${{ secrets.AFFINE_ANDROID_KEYSTORE_ALIAS_PASSWORD }}
           AFFINE_ANDROID_SIGN_KEYSTORE: ${{ secrets.AFFINE_ANDROID_SIGN_KEYSTORE }}
+
       - name: Upload to Google Play
         uses: r0adkll/upload-google-play@v1
         if: ${{ env.BUILD_TARGET == 'distribution' }}

.github/workflows/workers.yml

@@ -15,7 +15,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Publish
-        uses: cloudflare/wrangler-action@v3.12.1
+        uses: cloudflare/wrangler-action@v3.13.0
         with:
           apiToken: ${{ secrets.CF_API_TOKEN }}
           accountId: ${{ secrets.CF_ACCOUNT_ID }}

.nvmrc

@@ -1 +1 @@
-20.18.0
+20.18.1

.prettierignore

@@ -12,11 +12,10 @@ storybook-static
 web-static
 public
 packages/backend/server/src/schema.gql
-packages/backend/server/src/fundamentals/error/errors.gen.ts
+packages/backend/server/src/base/error/errors.gen.ts
 packages/frontend/i18n/src/i18n-generated.ts
 packages/frontend/i18n/src/i18n-completenesses.json
 packages/frontend/graphql/src/graphql/index.ts
-tests/affine-legacy/**/static
 .yarnrc.yml
 packages/frontend/templates/*.gen.ts
 packages/frontend/templates/onboarding
@@ -26,3 +25,4 @@ packages/frontend/templates/onboarding
 packages/backend/native/index.d.ts
 packages/frontend/native/index.d.ts
 packages/frontend/native/index.js
+compose.yaml

.yarn/patches/@atlaskit-pragmatic-drag-and-drop-npm-1.4.0-75c45f52d3.patch

@@ -0,0 +1,19 @@
+diff --git a/dist/esm/adapter/external-adapter.js b/dist/esm/adapter/external-adapter.js
+index ef7a963d91f08c9e70c8ed9c6b41972bec349319..e682841ec10a4a8a9ce7a79642e58de5c9e664d5 100644
+--- a/dist/esm/adapter/external-adapter.js
++++ b/dist/esm/adapter/external-adapter.js
+@@ -54,9 +54,11 @@ var adapter = makeAdapter({
+       type: 'dragenter',
+       listener: function listener(event) {
+         // drag operation was started within the document, it won't be an "external" drag
+-        if (didDragStartLocally) {
+-          return;
+-        }
++
++        // we will handle all events actually
++        // if (didDragStartLocally) {
++        //   return;
++        // }
+ 
+         // Note: not checking if event was cancelled (`event.defaultPrevented`) as
+         // cancelling a "dragenter" accepts the drag operation (not prevent it)

.yarn/patches/decode-named-character-reference-npm-1.0.2-db17a755fd.patch

@@ -0,0 +1,13 @@
+diff --git a/package.json b/package.json
+index 5fef2811aa86f3f1f8228daef7d867863e71db72..b795fbd2a0e1cba0b6389ff051220f4e3c52fc13 100644
+--- a/package.json
++++ b/package.json
+@@ -34,7 +34,7 @@
+       "deno": "./index.js",
+       "react-native": "./index.js",
+       "worker": "./index.js",
+-      "browser": "./index.dom.js",
++      "browser": "./index.js",
+       "default": "./index.js"
+     }
+   },

.yarnrc.yml

@@ -12,4 +12,4 @@ npmPublishAccess: public
 
 npmPublishRegistry: "https://registry.npmjs.org"
 
-yarnPath: .yarn/releases/yarn-4.5.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

Cargo.toml

@@ -3,15 +3,19 @@ members  = [
     "./packages/backend/native",
     "./packages/common/native",
     "./packages/frontend/native",
-    "./packages/frontend/native/schema"
+    "./packages/frontend/native/sqlite_v1",
+    "./packages/frontend/native/nbstore",
+    "./packages/frontend/native/schema",
+    "./packages/frontend/mobile-native",
 ]
 resolver = "2"
 
 [workspace.dependencies]
 affine_common = { path = "./packages/common/native" }
+criterion2    = { version = "2", default-features = false }
 anyhow        = "1"
 chrono        = "0.4"
-dotenv        = "0.15"
+dotenvy        = "0.15"
 file-format   = { version = "0.26", features = ["reader"] }
 mimalloc      = "0.1"
 napi          = { version = "3.0.0-alpha.12", features = ["async", "chrono_date", "error_anyhow", "napi9", "serde"] }

blocksuite/affine/all/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@blocksuite/affine",
+  "description": "BlockSuite for Affine",
+  "type": "module",
+  "scripts": {
+    "build": "tsc --build --verbose",
+    "test:unit": "nx vite:test --run --passWithNoTests",
+    "test:unit:coverage": "nx vite:test --run --coverage",
+    "test:e2e": "playwright test"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/blocks": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/inline": "workspace:*",
+    "@blocksuite/presets": "workspace:*",
+    "@blocksuite/store": "workspace:*"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts",
+    "./block-std": "./src/block-std/index.ts",
+    "./block-std/gfx": "./src/block-std/gfx.ts",
+    "./global": "./src/global/index.ts",
+    "./global/utils": "./src/global/utils.ts",
+    "./global/env": "./src/global/env.ts",
+    "./global/exceptions": "./src/global/exceptions.ts",
+    "./global/di": "./src/global/di.ts",
+    "./global/types": "./src/global/types.ts",
+    "./store": "./src/store/index.ts",
+    "./inline": "./src/inline/index.ts",
+    "./inline/consts": "./src/inline/consts.ts",
+    "./inline/types": "./src/inline/types.ts",
+    "./presets": "./src/presets/index.ts",
+    "./blocks": "./src/blocks/index.ts",
+    "./blocks/schemas": "./src/blocks/schemas.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "effects": [
+        "dist/effects.d.ts"
+      ],
+      "block-std": [
+        "dist/block-std/index.d.ts"
+      ],
+      "block-std/gfx": [
+        "dist/block-std/gfx.d.ts"
+      ],
+      "global": [
+        "dist/global/index.d.ts"
+      ],
+      "global/utils": [
+        "dist/global/utils.d.ts"
+      ],
+      "global/env": [
+        "dist/global/env.d.ts"
+      ],
+      "global/exceptions": [
+        "dist/global/exceptions.d.ts"
+      ],
+      "global/di": [
+        "dist/global/di.d.ts"
+      ],
+      "global/types": [
+        "dist/global/types.d.ts"
+      ],
+      "store": [
+        "dist/store/index.d.ts"
+      ],
+      "inline": [
+        "dist/inline/index.d.ts"
+      ],
+      "inline/consts": [
+        "dist/inline/consts.d.ts"
+      ],
+      "inline/types": [
+        "dist/inline/types.d.ts"
+      ],
+      "presets": [
+        "dist/presets/index.d.ts"
+      ],
+      "blocks": [
+        "dist/blocks/index.d.ts"
+      ],
+      "blocks/schemas": [
+        "dist/blocks/schemas.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ]
+}

blocksuite/affine/all/src/block-std/gfx.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/block-std/gfx';

blocksuite/affine/all/src/block-std/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/block-std';

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

@@ -0,0 +1 @@
+export * from '@blocksuite/blocks';

blocksuite/affine/all/src/blocks/schemas.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/blocks/schemas';

blocksuite/affine/all/src/effects.ts

@@ -0,0 +1,7 @@
+import { effects as blocksEffects } from '@blocksuite/blocks/effects';
+import { effects as presetsEffects } from '@blocksuite/presets/effects';
+
+export function effects() {
+  blocksEffects();
+  presetsEffects();
+}

blocksuite/affine/all/src/global/di.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/global/di';

blocksuite/affine/all/src/global/env.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/global/env';

blocksuite/affine/all/src/global/exceptions.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/global/exceptions';

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

@@ -0,0 +1 @@
+export * from '@blocksuite/global';

blocksuite/affine/all/src/global/types.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/global/types';

blocksuite/affine/all/src/global/utils.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/global/utils';

blocksuite/affine/all/src/index.ts

@@ -0,0 +1 @@
+export {};

blocksuite/affine/all/src/inline/consts.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/inline/consts';

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

@@ -0,0 +1 @@
+export * from '@blocksuite/inline';

blocksuite/affine/all/src/inline/types.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/inline/types';

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

@@ -0,0 +1 @@
+export * from '@blocksuite/presets';

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

@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/no-restricted-imports */
+
+// oxlint-disable-next-line
+// @ts-ignore FIXME: typecheck error
+export * from '@blocksuite/store';

blocksuite/affine/all/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src/",
+    "outDir": "./dist/",
+    "noEmit": false
+  },
+  "include": ["./src"],
+  "references": [
+    {
+      "path": "../../framework/global"
+    },
+    {
+      "path": "../../framework/store"
+    },
+    {
+      "path": "../../framework/block-std"
+    },
+    {
+      "path": "../../framework/inline"
+    },
+    {
+      "path": "../../blocks"
+    },
+    {
+      "path": "../../presets"
+    }
+  ]
+}

blocksuite/affine/all/typedoc.json

@@ -0,0 +1,4 @@
+{
+  "extends": ["../../../typedoc.base.json"],
+  "entryPoints": ["src/index.ts"]
+}

blocksuite/affine/all/vitest.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  esbuild: {
+    target: 'es2018',
+  },
+  test: {
+    globalSetup: '../../../scripts/vitest-global.ts',
+    include: ['src/__tests__/**/*.unit.spec.ts'],
+    testTimeout: 1000,
+    coverage: {
+      provider: 'istanbul', // or 'c8'
+      reporter: ['lcov'],
+      reportsDirectory: '../../../.coverage/affine',
+    },
+    /**
+     * Custom handler for console.log in tests.
+     *
+     * Return `false` to ignore the log.
+     */
+    onConsoleLog(log, type) {
+      if (log.includes('https://lit.dev/msg/dev-mode')) {
+        return false;
+      }
+      console.warn(`Unexpected ${type} log`, log);
+      throw new Error(log);
+    },
+    environment: 'happy-dom',
+  },
+});

blocksuite/affine/block-embed/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@blocksuite/affine-block-embed",
+  "description": "Embed blocks for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "test:unit": "nx vite:test --run --passWithNoTests",
+    "test:unit:coverage": "nx vite:test --run --coverage",
+    "test:e2e": "playwright test"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.1.75",
+    "@blocksuite/inline": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.10",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.1",
+    "lit": "^3.2.0",
+    "minimatch": "^10.0.1",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ]
+}

blocksuite/affine/block-embed/src/common/adapters/html.ts

@@ -0,0 +1,66 @@
+import type { BlockHtmlAdapterMatcher } from '@blocksuite/affine-shared/adapters';
+
+export function createEmbedBlockHtmlAdapterMatcher(
+  flavour: string,
+  {
+    toMatch = () => false,
+    fromMatch = o => o.node.flavour === flavour,
+    toBlockSnapshot = {},
+    fromBlockSnapshot = {
+      enter: (o, context) => {
+        const { walkerContext } = context;
+        // Parse as link
+        if (
+          typeof o.node.props.title !== 'string' ||
+          typeof o.node.props.url !== 'string'
+        ) {
+          return;
+        }
+
+        walkerContext
+          .openNode(
+            {
+              type: 'element',
+              tagName: 'div',
+              properties: {
+                className: ['affine-paragraph-block-container'],
+              },
+              children: [],
+            },
+            'children'
+          )
+          .openNode(
+            {
+              type: 'element',
+              tagName: 'a',
+              properties: {
+                href: o.node.props.url,
+              },
+              children: [
+                {
+                  type: 'text',
+                  value: o.node.props.title,
+                },
+              ],
+            },
+            'children'
+          )
+          .closeNode()
+          .closeNode();
+      },
+    },
+  }: {
+    toMatch?: BlockHtmlAdapterMatcher['toMatch'];
+    fromMatch?: BlockHtmlAdapterMatcher['fromMatch'];
+    toBlockSnapshot?: BlockHtmlAdapterMatcher['toBlockSnapshot'];
+    fromBlockSnapshot?: BlockHtmlAdapterMatcher['fromBlockSnapshot'];
+  } = Object.create(null)
+): BlockHtmlAdapterMatcher {
+  return {
+    flavour,
+    toMatch,
+    fromMatch,
+    toBlockSnapshot,
+    fromBlockSnapshot,
+  };
+}

blocksuite/affine/block-embed/src/common/adapters/markdown.ts

@@ -0,0 +1,58 @@
+import type { BlockMarkdownAdapterMatcher } from '@blocksuite/affine-shared/adapters';
+
+export function createEmbedBlockMarkdownAdapterMatcher(
+  flavour: string,
+  {
+    toMatch = () => false,
+    fromMatch = o => o.node.flavour === flavour,
+    toBlockSnapshot = {},
+    fromBlockSnapshot = {
+      enter: (o, context) => {
+        const { walkerContext } = context;
+        // Parse as link
+        if (
+          typeof o.node.props.title !== 'string' ||
+          typeof o.node.props.url !== 'string'
+        ) {
+          return;
+        }
+        walkerContext
+          .openNode(
+            {
+              type: 'paragraph',
+              children: [],
+            },
+            'children'
+          )
+          .openNode(
+            {
+              type: 'link',
+              url: o.node.props.url,
+              children: [
+                {
+                  type: 'text',
+                  value: o.node.props.title,
+                },
+              ],
+            },
+            'children'
+          )
+          .closeNode()
+          .closeNode();
+      },
+    },
+  }: {
+    toMatch?: BlockMarkdownAdapterMatcher['toMatch'];
+    fromMatch?: BlockMarkdownAdapterMatcher['fromMatch'];
+    toBlockSnapshot?: BlockMarkdownAdapterMatcher['toBlockSnapshot'];
+    fromBlockSnapshot?: BlockMarkdownAdapterMatcher['fromBlockSnapshot'];
+  } = {}
+): BlockMarkdownAdapterMatcher {
+  return {
+    flavour,
+    toMatch,
+    fromMatch,
+    toBlockSnapshot,
+    fromBlockSnapshot,
+  };
+}

blocksuite/affine/block-embed/src/common/adapters/plain-text.ts

@@ -0,0 +1,40 @@
+import type { BlockPlainTextAdapterMatcher } from '@blocksuite/affine-shared/adapters';
+
+export function createEmbedBlockPlainTextAdapterMatcher(
+  flavour: string,
+  {
+    toMatch = () => false,
+    fromMatch = o => o.node.flavour === flavour,
+    toBlockSnapshot = {},
+    fromBlockSnapshot = {
+      enter: (o, context) => {
+        const { textBuffer } = context;
+        // Parse as link
+        if (
+          typeof o.node.props.title !== 'string' ||
+          typeof o.node.props.url !== 'string'
+        ) {
+          return;
+        }
+        const buffer = `[${o.node.props.title}](${o.node.props.url})`;
+        if (buffer.length > 0) {
+          textBuffer.content += buffer;
+          textBuffer.content += '\n';
+        }
+      },
+    },
+  }: {
+    toMatch?: BlockPlainTextAdapterMatcher['toMatch'];
+    fromMatch?: BlockPlainTextAdapterMatcher['fromMatch'];
+    toBlockSnapshot?: BlockPlainTextAdapterMatcher['toBlockSnapshot'];
+    fromBlockSnapshot?: BlockPlainTextAdapterMatcher['fromBlockSnapshot'];
+  } = {}
+): BlockPlainTextAdapterMatcher {
+  return {
+    flavour,
+    toMatch,
+    fromMatch,
+    toBlockSnapshot,
+    fromBlockSnapshot,
+  };
+}

blocksuite/affine/block-embed/src/common/adapters/utils.ts

@@ -0,0 +1,13 @@
+import type { ReferenceParams } from '@blocksuite/affine-model';
+import { TextUtils } from '@blocksuite/affine-shared/adapters';
+
+export function generateDocUrl(
+  docBaseUrl: string,
+  pageId: string,
+  params: ReferenceParams
+) {
+  const search = TextUtils.toURLSearchParams(params);
+  const query = search?.size ? `?${search.toString()}` : '';
+  const url = docBaseUrl ? `${docBaseUrl}/${pageId}${query}` : '';
+  return url;
+}

blocksuite/affine/block-embed/src/common/embed-block-element.ts

@@ -0,0 +1,172 @@
+import {
+  CaptionedBlockComponent,
+  SelectedStyle,
+} from '@blocksuite/affine-components/caption';
+import type { EmbedCardStyle } from '@blocksuite/affine-model';
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_MIN_WIDTH,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
+import {
+  DocModeProvider,
+  DragHandleConfigExtension,
+} from '@blocksuite/affine-shared/services';
+import {
+  captureEventTarget,
+  convertDragPreviewDocToEdgeless,
+  convertDragPreviewEdgelessToDoc,
+} from '@blocksuite/affine-shared/utils';
+import { type BlockService, isGfxBlockComponent } from '@blocksuite/block-std';
+import type { GfxCompatibleProps } from '@blocksuite/block-std/gfx';
+import type { BlockModel } from '@blocksuite/store';
+import type { TemplateResult } from 'lit';
+import { html } from 'lit';
+import { query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
+
+export const EmbedDragHandleOption = DragHandleConfigExtension({
+  flavour: /affine:embed-*/,
+  edgeless: true,
+  onDragEnd: props => {
+    const { state, draggingElements } = props;
+    if (
+      draggingElements.length !== 1 ||
+      draggingElements[0].model.flavour.match(/affine:embed-*/) === null
+    )
+      return false;
+
+    const blockComponent = draggingElements[0] as EmbedBlockComponent;
+    const isInSurface = isGfxBlockComponent(blockComponent);
+    const target = captureEventTarget(state.raw.target);
+    const isTargetEdgelessContainer =
+      target?.classList.contains('edgeless-container');
+
+    if (isInSurface) {
+      const style = blockComponent._cardStyle;
+      const targetStyle =
+        style === 'vertical' || style === 'cube' ? 'horizontal' : style;
+      return convertDragPreviewEdgelessToDoc({
+        blockComponent,
+        style: targetStyle,
+        ...props,
+      });
+    } else if (isTargetEdgelessContainer) {
+      const style = blockComponent._cardStyle;
+
+      return convertDragPreviewDocToEdgeless({
+        blockComponent,
+        cssSelector: '.embed-block-container',
+        width: EMBED_CARD_WIDTH[style],
+        height: EMBED_CARD_HEIGHT[style],
+        ...props,
+      });
+    }
+
+    return false;
+  },
+});
+
+export class EmbedBlockComponent<
+  Model extends BlockModel<GfxCompatibleProps> = BlockModel<GfxCompatibleProps>,
+  Service extends BlockService = BlockService,
+  WidgetName extends string = string,
+> extends CaptionedBlockComponent<Model, Service, WidgetName> {
+  private _fetchAbortController = new AbortController();
+
+  _cardStyle: EmbedCardStyle = 'horizontal';
+
+  /**
+   * The actual rendered scale of the embed card.
+   * By default, it is set to 1.
+   */
+  protected _scale = 1;
+
+  blockDraggable = true;
+
+  /**
+   * The style of the embed card.
+   * You can use this to change the height and width of the card.
+   * By default, the height and width are set to `_cardHeight` and `_cardWidth` respectively.
+   */
+  protected embedContainerStyle: StyleInfo = {};
+
+  renderEmbed = (content: () => TemplateResult) => {
+    if (
+      this._cardStyle === 'horizontal' ||
+      this._cardStyle === 'horizontalThin' ||
+      this._cardStyle === 'list'
+    ) {
+      this.style.display = 'block';
+
+      const mode = this.std.get(DocModeProvider).getEditorMode();
+      if (mode === 'edgeless') {
+        this.style.minWidth = `${EMBED_CARD_MIN_WIDTH}px`;
+      }
+    }
+
+    const selected = !!this.selected?.is('block');
+    return html`
+      <div
+        draggable="${this.blockDraggable ? 'true' : 'false'}"
+        class=${classMap({
+          'embed-block-container': true,
+          'selected-style': selected,
+        })}
+        style=${styleMap({
+          height: `${this._cardHeight}px`,
+          width: '100%',
+          ...this.embedContainerStyle,
+        })}
+      >
+        ${content()}
+      </div>
+    `;
+  };
+
+  /**
+   * The height of the current embed card. Changes based on the card style.
+   */
+  get _cardHeight() {
+    return EMBED_CARD_HEIGHT[this._cardStyle];
+  }
+
+  /**
+   * The width of the current embed card. Changes based on the card style.
+   */
+  get _cardWidth() {
+    return EMBED_CARD_WIDTH[this._cardStyle];
+  }
+
+  get fetchAbortController() {
+    return this._fetchAbortController;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    if (this._fetchAbortController.signal.aborted)
+      this._fetchAbortController = new AbortController();
+
+    this.contentEditable = 'false';
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._fetchAbortController.abort();
+  }
+
+  protected override accessor blockContainerStyles: StyleInfo | undefined = {
+    margin: '18px 0',
+  };
+
+  @query('.embed-block-container')
+  protected accessor embedBlock!: HTMLDivElement;
+
+  override accessor selectedStyle = SelectedStyle.Border;
+
+  override accessor useCaptionEditor = true;
+
+  override accessor useZeroWidth = true;
+}

blocksuite/affine/block-embed/src/common/embed-note-content-styles.ts

@@ -0,0 +1,80 @@
+import { css } from 'lit';
+
+export const embedNoteContentStyles = css`
+  .affine-embed-doc-content-note-blocks affine-divider,
+  .affine-embed-doc-content-note-blocks affine-divider > * {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .affine-embed-doc-content-note-blocks affine-paragraph,
+  .affine-embed-doc-content-note-blocks affine-list {
+    margin-top: 4px !important;
+    margin-bottom: 4px !important;
+    padding: 0 2px;
+  }
+  .affine-embed-doc-content-note-blocks affine-paragraph *,
+  .affine-embed-doc-content-note-blocks affine-list * {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 20px;
+    font-size: var(--affine-font-xs);
+    font-weight: 400;
+  }
+  .affine-embed-doc-content-note-blocks affine-list .affine-list-block__prefix {
+    height: 20px;
+  }
+  .affine-embed-doc-content-note-blocks affine-paragraph .quote {
+    padding-left: 15px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h1),
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h2),
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h3),
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h4),
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h5),
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h6) {
+    margin-top: 6px !important;
+    margin-bottom: 4px !important;
+    padding: 0 2px;
+  }
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h1) *,
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h2) *,
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h3) *,
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h4) *,
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h5) *,
+  .affine-embed-doc-content-note-blocks affine-paragraph:has(.h6) * {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+    padding-top: 0;
+    padding-bottom: 0;
+    line-height: 20px;
+    font-size: var(--affine-font-xs);
+    font-weight: 600;
+  }
+
+  .affine-embed-linked-doc-block.horizontal {
+    affine-paragraph,
+    affine-list {
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+      max-height: 40px;
+      overflow: hidden;
+      display: flex;
+    }
+    affine-paragraph .quote {
+      padding-top: 4px;
+      padding-bottom: 4px;
+      height: 28px;
+    }
+    affine-paragraph .quote::after {
+      height: 20px;
+      margin-top: 4px !important;
+      margin-bottom: 4px !important;
+    }
+  }
+`;

blocksuite/affine/block-embed/src/common/insert-embed-card.ts

@@ -0,0 +1,81 @@
+import { SurfaceBlockComponent } from '@blocksuite/affine-block-surface';
+import type { EmbedCardStyle } from '@blocksuite/affine-model';
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
+import type { BlockStdScope } from '@blocksuite/block-std';
+import { Bound, Vec } from '@blocksuite/global/utils';
+
+interface EmbedCardProperties {
+  flavour: string;
+  targetStyle: EmbedCardStyle;
+  props: Record<string, unknown>;
+}
+
+export function insertEmbedCard(
+  std: BlockStdScope,
+  properties: EmbedCardProperties
+) {
+  const { host } = std;
+  const { flavour, targetStyle, props } = properties;
+  const selectionManager = host.selection;
+
+  let blockId: string | undefined;
+  const textSelection = selectionManager.find('text');
+  const blockSelection = selectionManager.find('block');
+  const surfaceSelection = selectionManager.find('surface');
+  if (textSelection) {
+    blockId = textSelection.blockId;
+  } else if (blockSelection) {
+    blockId = blockSelection.blockId;
+  } else if (surfaceSelection && surfaceSelection.editing) {
+    blockId = surfaceSelection.blockId;
+  }
+
+  if (blockId) {
+    const block = host.view.getBlock(blockId);
+    if (!block) return;
+    const parent = host.doc.getParent(block.model);
+    if (!parent) return;
+    const index = parent.children.indexOf(block.model);
+    host.doc.addBlock(flavour as never, props, parent, index + 1);
+  } else {
+    const rootId = std.doc.root?.id;
+    if (!rootId) return;
+    const edgelessRoot = std.view.getBlock(rootId);
+    if (!edgelessRoot) return;
+
+    // @ts-expect-error TODO: fix after edgeless refactor
+    edgelessRoot.service.viewport.smoothZoom(1);
+    // @ts-expect-error TODO: fix after edgeless refactor
+    const surfaceBlock = edgelessRoot.surface;
+    if (!(surfaceBlock instanceof SurfaceBlockComponent)) return;
+    const center = Vec.toVec(surfaceBlock.renderer.viewport.center);
+    // @ts-expect-error TODO: fix after edgeless refactor
+    const cardId = edgelessRoot.service.addBlock(
+      flavour,
+      {
+        ...props,
+        xywh: Bound.fromCenter(
+          center,
+          EMBED_CARD_WIDTH[targetStyle],
+          EMBED_CARD_HEIGHT[targetStyle]
+        ).serialize(),
+        style: targetStyle,
+      },
+      surfaceBlock.model
+    );
+
+    // @ts-expect-error TODO: fix after edgeless refactor
+    edgelessRoot.service.selection.set({
+      elements: [cardId],
+      editing: false,
+    });
+
+    // @ts-expect-error TODO: fix after edgeless refactor
+    edgelessRoot.tools.setEdgelessTool({
+      type: 'default',
+    });
+  }
+}

blocksuite/affine/block-embed/src/common/link-previewer.ts

@@ -0,0 +1,99 @@
+import type { LinkPreviewData } from '@blocksuite/affine-model';
+import { DEFAULT_LINK_PREVIEW_ENDPOINT } from '@blocksuite/affine-shared/consts';
+import { isAbortError } from '@blocksuite/affine-shared/utils';
+import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
+
+export type LinkPreviewResponseData = {
+  url: string;
+  title?: string;
+  siteName?: string;
+  description?: string;
+  images?: string[];
+  mediaType?: string;
+  contentType?: string;
+  charset?: string;
+  videos?: string[];
+  favicons?: string[];
+};
+
+export class LinkPreviewer {
+  private _endpoint = DEFAULT_LINK_PREVIEW_ENDPOINT;
+
+  query = async (
+    url: string,
+    signal?: AbortSignal
+  ): Promise<Partial<LinkPreviewData>> => {
+    if (
+      (url.startsWith('https://x.com/') ||
+        url.startsWith('https://www.x.com/') ||
+        url.startsWith('https://www.twitter.com/') ||
+        url.startsWith('https://twitter.com/')) &&
+      url.includes('/status/')
+    ) {
+      // use api.fxtwitter.com
+      url =
+        'https://api.fxtwitter.com/status/' + /\/status\/(.*)/.exec(url)?.[1];
+      try {
+        const { tweet } = await fetch(url, { signal }).then(res => res.json());
+        return {
+          title: tweet.author.name,
+          icon: tweet.author.avatar_url,
+          description: tweet.text,
+          image: tweet.media?.photos?.[0].url || tweet.author.banner_url,
+        };
+      } catch (e) {
+        console.error(`Failed to fetch tweet: ${url}`);
+        console.error(e);
+        return {};
+      }
+    } else {
+      const response = await fetch(this._endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          url,
+        }),
+        signal,
+      })
+        .then(r => {
+          if (!r || !r.ok) {
+            throw new BlockSuiteError(
+              ErrorCode.DefaultRuntimeError,
+              `Failed to fetch link preview: ${url}`
+            );
+          }
+          return r;
+        })
+        .catch(err => {
+          if (isAbortError(err)) return null;
+          console.error(`Failed to fetch link preview: ${url}`);
+          console.error(err);
+          return null;
+        });
+
+      if (!response) return {};
+
+      const data: LinkPreviewResponseData = await response.json();
+      return {
+        title: data.title ? this._getStringFromHTML(data.title) : null,
+        description: data.description
+          ? this._getStringFromHTML(data.description)
+          : null,
+        icon: data.favicons?.[0],
+        image: data.images?.[0],
+      };
+    }
+  };
+
+  setEndpoint = (endpoint: string) => {
+    this._endpoint = endpoint;
+  };
+
+  private _getStringFromHTML(html: string) {
+    const div = document.createElement('div');
+    div.innerHTML = html;
+    return div.textContent;
+  }
+}

blocksuite/affine/block-embed/src/common/render-linked-doc.ts

@@ -0,0 +1,297 @@
+import type { SurfaceBlockModel } from '@blocksuite/affine-block-surface';
+import {
+  type DocMode,
+  type ImageBlockModel,
+  NoteDisplayMode,
+} from '@blocksuite/affine-model';
+import { EMBED_CARD_HEIGHT } from '@blocksuite/affine-shared/consts';
+import { matchFlavours, SpecProvider } from '@blocksuite/affine-shared/utils';
+import { BlockStdScope } from '@blocksuite/block-std';
+import { assertExists } from '@blocksuite/global/utils';
+import {
+  type BlockModel,
+  BlockViewType,
+  type Doc,
+  type Query,
+} from '@blocksuite/store';
+import { render, type TemplateResult } from 'lit';
+
+import type { EmbedLinkedDocBlockComponent } from '../embed-linked-doc-block/index.js';
+import type { EmbedSyncedDocCard } from '../embed-synced-doc-block/components/embed-synced-doc-card.js';
+
+export function renderLinkedDocInCard(
+  card: EmbedLinkedDocBlockComponent | EmbedSyncedDocCard
+) {
+  const linkedDoc = card.linkedDoc;
+  assertExists(
+    linkedDoc,
+    `Trying to load page ${card.model.pageId} in linked page block, but the page is not found.`
+  );
+
+  // eslint-disable-next-line sonarjs/no-collapsible-if
+  if ('bannerContainer' in card) {
+    if (card.editorMode === 'page') {
+      renderPageAsBanner(card).catch(e => {
+        console.error(e);
+        card.isError = true;
+      });
+    }
+  }
+
+  renderNoteContent(card).catch(e => {
+    console.error(e);
+    card.isError = true;
+  });
+}
+
+async function renderPageAsBanner(card: EmbedSyncedDocCard) {
+  const linkedDoc = card.linkedDoc;
+  assertExists(
+    linkedDoc,
+    `Trying to load page ${card.model.pageId} in linked page block, but the page is not found.`
+  );
+
+  const notes = getNotesFromDoc(linkedDoc);
+  if (!notes) {
+    card.isBannerEmpty = true;
+    return;
+  }
+
+  const target = notes.flatMap(note =>
+    note.children.filter(child => matchFlavours(child, ['affine:image']))
+  )[0];
+
+  if (target) {
+    await renderImageAsBanner(card, target);
+    return;
+  }
+
+  card.isBannerEmpty = true;
+}
+
+async function renderImageAsBanner(
+  card: EmbedSyncedDocCard,
+  image: BlockModel
+) {
+  const sourceId = (image as ImageBlockModel).sourceId;
+  if (!sourceId) return;
+
+  const storage = card.linkedDoc?.blobSync;
+  if (!storage) return;
+
+  const blob = await storage.get(sourceId);
+  if (!blob) return;
+
+  const url = URL.createObjectURL(blob);
+  const $img = document.createElement('img');
+  $img.src = url;
+  await addCover(card, $img);
+
+  card.isBannerEmpty = false;
+}
+
+async function addCover(
+  card: EmbedSyncedDocCard,
+  cover: HTMLElement | TemplateResult<1>
+) {
+  const coverContainer = await card.bannerContainer;
+  if (!coverContainer) return;
+  while (coverContainer.firstChild) {
+    coverContainer.firstChild.remove();
+  }
+
+  if (cover instanceof HTMLElement) {
+    coverContainer.append(cover);
+  } else {
+    render(cover, coverContainer);
+  }
+}
+
+async function renderNoteContent(
+  card: EmbedLinkedDocBlockComponent | EmbedSyncedDocCard
+) {
+  card.isNoteContentEmpty = true;
+
+  const doc = card.linkedDoc;
+  assertExists(
+    doc,
+    `Trying to load page ${card.model.pageId} in linked page block, but the page is not found.`
+  );
+
+  const notes = getNotesFromDoc(doc);
+  if (!notes) {
+    return;
+  }
+
+  const cardStyle = card.model.style;
+  const isHorizontal = cardStyle === 'horizontal';
+  const allowFlavours: (keyof BlockSuite.BlockModels)[] = isHorizontal
+    ? []
+    : ['affine:image'];
+
+  const noteChildren = notes.flatMap(note =>
+    note.children.filter(model => {
+      if (matchFlavours(model, allowFlavours)) {
+        return true;
+      }
+      return filterTextModel(model);
+    })
+  );
+
+  if (!noteChildren.length) {
+    return;
+  }
+
+  card.isNoteContentEmpty = false;
+
+  const noteContainer = await card.noteContainer;
+
+  if (!noteContainer) {
+    return;
+  }
+
+  while (noteContainer.firstChild) {
+    noteContainer.firstChild.remove();
+  }
+
+  const noteBlocksContainer = document.createElement('div');
+  noteBlocksContainer.classList.add('affine-embed-doc-content-note-blocks');
+  noteBlocksContainer.contentEditable = 'false';
+  noteContainer.append(noteBlocksContainer);
+
+  if (isHorizontal) {
+    // When the card is horizontal, we only render the first block
+    noteChildren.splice(1);
+  } else {
+    // Before rendering, we can not know the height of each block
+    // But we can limit the number of blocks to render simply by the height of the card
+    const cardHeight = EMBED_CARD_HEIGHT[cardStyle];
+    const minSingleBlockHeight = 20;
+    const maxBlockCount = Math.floor(cardHeight / minSingleBlockHeight);
+    if (noteChildren.length > maxBlockCount) {
+      noteChildren.splice(maxBlockCount);
+    }
+  }
+  const childIds = noteChildren.map(child => child.id);
+  const ids: string[] = [];
+  childIds.forEach(block => {
+    let parent: string | null = block;
+    while (parent && !ids.includes(parent)) {
+      ids.push(parent);
+      parent = doc.blockCollection.crud.getParent(parent);
+    }
+  });
+  const query: Query = {
+    mode: 'strict',
+    match: ids.map(id => ({ id, viewType: BlockViewType.Display })),
+  };
+  const previewDoc = doc.blockCollection.getDoc({ query });
+  const previewSpec = SpecProvider.getInstance().getSpec('page:preview');
+  const previewStd = new BlockStdScope({
+    doc: previewDoc,
+    extensions: previewSpec.value,
+  });
+  const previewTemplate = previewStd.render();
+  const fragment = document.createDocumentFragment();
+  render(previewTemplate, fragment);
+  noteBlocksContainer.append(fragment);
+  const contentEditableElements = noteBlocksContainer.querySelectorAll(
+    '[contenteditable="true"]'
+  );
+  contentEditableElements.forEach(element => {
+    (element as HTMLElement).contentEditable = 'false';
+  });
+}
+
+function filterTextModel(model: BlockModel) {
+  if (matchFlavours(model, ['affine:paragraph', 'affine:list'])) {
+    return !!model.text?.toString().length;
+  }
+  return false;
+}
+
+export function getNotesFromDoc(doc: Doc) {
+  const notes = doc.root?.children.filter(
+    child =>
+      matchFlavours(child, ['affine:note']) &&
+      child.displayMode !== NoteDisplayMode.EdgelessOnly
+  );
+
+  if (!notes || !notes.length) {
+    return null;
+  }
+
+  return notes;
+}
+
+export function isEmptyDoc(doc: Doc | null, mode: DocMode) {
+  if (!doc) {
+    return true;
+  }
+
+  if (mode === 'page') {
+    const notes = getNotesFromDoc(doc);
+    if (!notes || !notes.length) {
+      return true;
+    }
+    return notes.every(note => isEmptyNote(note));
+  } else {
+    const surface = getSurfaceBlock(doc);
+    if (surface?.elementModels.length || doc.blockSize > 2) {
+      return false;
+    }
+    return true;
+  }
+}
+
+export function isEmptyNote(note: BlockModel) {
+  return note.children.every(block => {
+    return (
+      block.flavour === 'affine:paragraph' &&
+      (!block.text || block.text.length === 0)
+    );
+  });
+}
+
+function getSurfaceBlock(doc: Doc) {
+  const blocks = doc.getBlocksByFlavour('affine:surface');
+  return blocks.length !== 0 ? (blocks[0].model as SurfaceBlockModel) : null;
+}
+
+/**
+ * Gets the document content with a max length.
+ */
+export function getDocContentWithMaxLength(doc: Doc, maxlength = 500) {
+  const notes = getNotesFromDoc(doc);
+  if (!notes) return;
+
+  const noteChildren = notes.flatMap(note =>
+    note.children.filter(model => filterTextModel(model))
+  );
+  if (!noteChildren.length) return;
+
+  let count = 0;
+  let reached = false;
+  const texts = [];
+
+  for (const model of noteChildren) {
+    let t = model.text?.toString();
+    if (t?.length) {
+      const c: number = count + Math.max(0, texts.length - 1);
+
+      if (t.length + c > maxlength) {
+        t = t.substring(0, maxlength - c);
+        reached = true;
+      }
+
+      texts.push(t);
+      count += t.length;
+
+      if (reached) {
+        break;
+      }
+    }
+  }
+
+  return texts.join('\n');
+}

blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts

@@ -0,0 +1,92 @@
+import {
+  blockComponentSymbol,
+  type BlockService,
+  type GfxBlockComponent,
+  GfxElementSymbol,
+  toGfxBlockComponent,
+} from '@blocksuite/block-std';
+import type {
+  GfxBlockElementModel,
+  GfxCompatibleProps,
+} from '@blocksuite/block-std/gfx';
+import { Bound } from '@blocksuite/global/utils';
+import type { StyleInfo } from 'lit/directives/style-map.js';
+
+import type { EmbedBlockComponent } from './embed-block-element.js';
+
+export function toEdgelessEmbedBlock<
+  Model extends GfxBlockElementModel<GfxCompatibleProps>,
+  Service extends BlockService,
+  WidgetName extends string,
+  B extends typeof EmbedBlockComponent<Model, Service, WidgetName>,
+>(block: B) {
+  return class extends toGfxBlockComponent(block) {
+    _isDragging = false;
+
+    _isResizing = false;
+
+    _isSelected = false;
+
+    _showOverlay = false;
+
+    override [blockComponentSymbol] = true;
+
+    override blockDraggable = false;
+
+    protected override embedContainerStyle: StyleInfo = {};
+
+    override [GfxElementSymbol] = true;
+
+    get bound(): Bound {
+      return Bound.deserialize(this.model.xywh);
+    }
+
+    get rootService() {
+      return this.std.getService('affine:page');
+    }
+
+    _handleClick(_: MouseEvent): void {
+      return;
+    }
+
+    override connectedCallback(): void {
+      super.connectedCallback();
+      const rootService = this.rootService;
+
+      this._disposables.add(
+        // @ts-expect-error TODO: fix after edgeless slots are migrated to extension
+        rootService.slots.elementResizeStart.on(() => {
+          this._isResizing = true;
+          this._showOverlay = true;
+        })
+      );
+
+      this._disposables.add(
+        // @ts-expect-error TODO: fix after edgeless slots are migrated to extension
+        rootService.slots.elementResizeEnd.on(() => {
+          this._isResizing = false;
+          this._showOverlay =
+            this._isResizing || this._isDragging || !this._isSelected;
+        })
+      );
+    }
+
+    override renderGfxBlock() {
+      const bound = Bound.deserialize(this.model.xywh);
+
+      this.embedContainerStyle.width = `${bound.w}px`;
+      this.embedContainerStyle.height = `${bound.h}px`;
+      this.blockContainerStyles = {
+        width: `${bound.w}px`,
+      };
+      this._scale = bound.w / this._cardWidth;
+
+      return this.renderPageContent();
+    }
+
+    protected override accessor blockContainerStyles: StyleInfo | undefined =
+      undefined;
+  } as B & {
+    new (...args: any[]): GfxBlockComponent;
+  };
+}

blocksuite/affine/block-embed/src/common/utils.ts

@@ -0,0 +1,47 @@
+import {
+  DarkLoadingIcon,
+  EmbedCardDarkBannerIcon,
+  EmbedCardDarkCubeIcon,
+  EmbedCardDarkHorizontalIcon,
+  EmbedCardDarkListIcon,
+  EmbedCardDarkVerticalIcon,
+  EmbedCardLightBannerIcon,
+  EmbedCardLightCubeIcon,
+  EmbedCardLightHorizontalIcon,
+  EmbedCardLightListIcon,
+  EmbedCardLightVerticalIcon,
+  LightLoadingIcon,
+} from '@blocksuite/affine-components/icons';
+import { ColorScheme } from '@blocksuite/affine-model';
+import type { TemplateResult } from 'lit';
+
+type EmbedCardIcons = {
+  LoadingIcon: TemplateResult<1>;
+  EmbedCardBannerIcon: TemplateResult<1>;
+  EmbedCardHorizontalIcon: TemplateResult<1>;
+  EmbedCardListIcon: TemplateResult<1>;
+  EmbedCardVerticalIcon: TemplateResult<1>;
+  EmbedCardCubeIcon: TemplateResult<1>;
+};
+
+export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons {
+  if (theme === ColorScheme.Light) {
+    return {
+      LoadingIcon: LightLoadingIcon,
+      EmbedCardBannerIcon: EmbedCardLightBannerIcon,
+      EmbedCardHorizontalIcon: EmbedCardLightHorizontalIcon,
+      EmbedCardListIcon: EmbedCardLightListIcon,
+      EmbedCardVerticalIcon: EmbedCardLightVerticalIcon,
+      EmbedCardCubeIcon: EmbedCardLightCubeIcon,
+    };
+  } else {
+    return {
+      LoadingIcon: DarkLoadingIcon,
+      EmbedCardBannerIcon: EmbedCardDarkBannerIcon,
+      EmbedCardHorizontalIcon: EmbedCardDarkHorizontalIcon,
+      EmbedCardListIcon: EmbedCardDarkListIcon,
+      EmbedCardVerticalIcon: EmbedCardDarkVerticalIcon,
+      EmbedCardCubeIcon: EmbedCardDarkCubeIcon,
+    };
+  }
+}

blocksuite/affine/block-embed/src/effects.ts

@@ -0,0 +1,131 @@
+import { EmbedEdgelessBlockComponent } from './embed-figma-block/embed-edgeless-figma-block.js';
+import type { EmbedFigmaBlockService } from './embed-figma-block/embed-figma-service.js';
+import { EmbedFigmaBlockComponent } from './embed-figma-block/index.js';
+import { EmbedEdgelessGithubBlockComponent } from './embed-github-block/embed-edgeless-github-block.js';
+import {
+  EmbedGithubBlockComponent,
+  type EmbedGithubBlockService,
+} from './embed-github-block/index.js';
+import { EmbedHtmlFullscreenToolbar } from './embed-html-block/components/fullscreen-toolbar.js';
+import { EmbedEdgelessHtmlBlockComponent } from './embed-html-block/embed-edgeless-html-block.js';
+import { EmbedHtmlBlockComponent } from './embed-html-block/index.js';
+import type { insertEmbedLinkedDocCommand } from './embed-linked-doc-block/commands/insert-embed-linked-doc.js';
+import type {
+  InsertedLinkType,
+  insertLinkByQuickSearchCommand,
+} from './embed-linked-doc-block/commands/insert-link-by-quick-search.js';
+import { EmbedEdgelessLinkedDocBlockComponent } from './embed-linked-doc-block/embed-edgeless-linked-doc-block.js';
+import type { EmbedLinkedDocBlockConfig } from './embed-linked-doc-block/embed-linked-doc-config.js';
+import { EmbedLinkedDocBlockComponent } from './embed-linked-doc-block/index.js';
+import { EmbedEdgelessLoomBlockComponent } from './embed-loom-block/embed-edgeless-loom-bock.js';
+import {
+  EmbedLoomBlockComponent,
+  type EmbedLoomBlockService,
+} from './embed-loom-block/index.js';
+import { EmbedSyncedDocCard } from './embed-synced-doc-block/components/embed-synced-doc-card.js';
+import { EmbedEdgelessSyncedDocBlockComponent } from './embed-synced-doc-block/embed-edgeless-synced-doc-block.js';
+import { EmbedSyncedDocBlockComponent } from './embed-synced-doc-block/index.js';
+import { EmbedEdgelessYoutubeBlockComponent } from './embed-youtube-block/embed-edgeless-youtube-block.js';
+import {
+  EmbedYoutubeBlockComponent,
+  type EmbedYoutubeBlockService,
+} from './embed-youtube-block/index.js';
+
+export function effects() {
+  customElements.define(
+    'affine-embed-edgeless-figma-block',
+    EmbedEdgelessBlockComponent
+  );
+  customElements.define('affine-embed-figma-block', EmbedFigmaBlockComponent);
+
+  customElements.define('affine-embed-html-block', EmbedHtmlBlockComponent);
+  customElements.define(
+    'affine-embed-edgeless-html-block',
+    EmbedEdgelessHtmlBlockComponent
+  );
+
+  customElements.define(
+    'embed-html-fullscreen-toolbar',
+    EmbedHtmlFullscreenToolbar
+  );
+  customElements.define(
+    'affine-embed-edgeless-github-block',
+    EmbedEdgelessGithubBlockComponent
+  );
+  customElements.define('affine-embed-github-block', EmbedGithubBlockComponent);
+
+  customElements.define(
+    'affine-embed-edgeless-youtube-block',
+    EmbedEdgelessYoutubeBlockComponent
+  );
+  customElements.define(
+    'affine-embed-youtube-block',
+    EmbedYoutubeBlockComponent
+  );
+
+  customElements.define(
+    'affine-embed-edgeless-loom-block',
+    EmbedEdgelessLoomBlockComponent
+  );
+  customElements.define('affine-embed-loom-block', EmbedLoomBlockComponent);
+
+  customElements.define('affine-embed-synced-doc-card', EmbedSyncedDocCard);
+
+  customElements.define(
+    'affine-embed-edgeless-linked-doc-block',
+    EmbedEdgelessLinkedDocBlockComponent
+  );
+  customElements.define(
+    'affine-embed-linked-doc-block',
+    EmbedLinkedDocBlockComponent
+  );
+
+  customElements.define(
+    'affine-embed-edgeless-synced-doc-block',
+    EmbedEdgelessSyncedDocBlockComponent
+  );
+  customElements.define(
+    'affine-embed-synced-doc-block',
+    EmbedSyncedDocBlockComponent
+  );
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-embed-figma-block': EmbedFigmaBlockComponent;
+    'affine-embed-edgeless-figma-block': EmbedEdgelessBlockComponent;
+    'affine-embed-github-block': EmbedGithubBlockComponent;
+    'affine-embed-edgeless-github-block': EmbedEdgelessGithubBlockComponent;
+    'affine-embed-html-block': EmbedHtmlBlockComponent;
+    'affine-embed-edgeless-html-block': EmbedEdgelessHtmlBlockComponent;
+    'embed-html-fullscreen-toolbar': EmbedHtmlFullscreenToolbar;
+    'affine-embed-edgeless-loom-block': EmbedEdgelessLoomBlockComponent;
+    'affine-embed-loom-block': EmbedLoomBlockComponent;
+    'affine-embed-youtube-block': EmbedYoutubeBlockComponent;
+    'affine-embed-edgeless-youtube-block': EmbedEdgelessYoutubeBlockComponent;
+    'affine-embed-synced-doc-card': EmbedSyncedDocCard;
+    'affine-embed-synced-doc-block': EmbedSyncedDocBlockComponent;
+    'affine-embed-edgeless-synced-doc-block': EmbedEdgelessSyncedDocBlockComponent;
+    'affine-embed-linked-doc-block': EmbedLinkedDocBlockComponent;
+    'affine-embed-edgeless-linked-doc-block': EmbedEdgelessLinkedDocBlockComponent;
+  }
+
+  namespace BlockSuite {
+    interface BlockServices {
+      'affine:embed-figma': EmbedFigmaBlockService;
+      'affine:embed-github': EmbedGithubBlockService;
+      'affine:embed-loom': EmbedLoomBlockService;
+      'affine:embed-youtube': EmbedYoutubeBlockService;
+    }
+    interface BlockConfigs {
+      'affine:embed-linked-doc': EmbedLinkedDocBlockConfig;
+    }
+    interface CommandContext {
+      insertedLinkType?: Promise<InsertedLinkType>;
+    }
+    interface Commands {
+      insertEmbedLinkedDoc: typeof insertEmbedLinkedDocCommand;
+      insertLinkByQuickSearch: typeof insertLinkByQuickSearchCommand;
+    }
+  }
+}

blocksuite/affine/block-embed/src/embed-figma-block/adapters/html.ts

@@ -0,0 +1,11 @@
+import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model';
+import { BlockHtmlAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockHtmlAdapterMatcher } from '../../common/adapters/html.js';
+
+export const embedFigmaBlockHtmlAdapterMatcher =
+  createEmbedBlockHtmlAdapterMatcher(EmbedFigmaBlockSchema.model.flavour);
+
+export const EmbedFigmaBlockHtmlAdapterExtension = BlockHtmlAdapterExtension(
+  embedFigmaBlockHtmlAdapterMatcher
+);

blocksuite/affine/block-embed/src/embed-figma-block/adapters/index.ts

@@ -0,0 +1,3 @@
+export * from './html.js';
+export * from './markdown.js';
+export * from './plain-text.js';

blocksuite/affine/block-embed/src/embed-figma-block/adapters/markdown.ts

@@ -0,0 +1,11 @@
+import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model';
+import { BlockMarkdownAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockMarkdownAdapterMatcher } from '../../common/adapters/markdown.js';
+
+export const embedFigmaBlockMarkdownAdapterMatcher =
+  createEmbedBlockMarkdownAdapterMatcher(EmbedFigmaBlockSchema.model.flavour);
+
+export const EmbedFigmaMarkdownAdapterExtension = BlockMarkdownAdapterExtension(
+  embedFigmaBlockMarkdownAdapterMatcher
+);

blocksuite/affine/block-embed/src/embed-figma-block/adapters/plain-text.ts

@@ -0,0 +1,10 @@
+import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model';
+import { BlockPlainTextAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockPlainTextAdapterMatcher } from '../../common/adapters/plain-text.js';
+
+export const embedFigmaBlockPlainTextAdapterMatcher =
+  createEmbedBlockPlainTextAdapterMatcher(EmbedFigmaBlockSchema.model.flavour);
+
+export const EmbedFigmaBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(embedFigmaBlockPlainTextAdapterMatcher);

blocksuite/affine/block-embed/src/embed-figma-block/embed-edgeless-figma-block.ts

@@ -0,0 +1,6 @@
+import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
+import { EmbedFigmaBlockComponent } from './embed-figma-block.js';
+
+export class EmbedEdgelessBlockComponent extends toEdgelessEmbedBlock(
+  EmbedFigmaBlockComponent
+) {}

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-block.ts

@@ -0,0 +1,166 @@
+import { OpenIcon } from '@blocksuite/affine-components/icons';
+import type {
+  EmbedFigmaModel,
+  EmbedFigmaStyles,
+} from '@blocksuite/affine-model';
+import { html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { EmbedBlockComponent } from '../common/embed-block-element.js';
+import type { EmbedFigmaBlockService } from './embed-figma-service.js';
+import { FigmaIcon, styles } from './styles.js';
+
+export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
+  EmbedFigmaModel,
+  EmbedFigmaBlockService
+> {
+  static override styles = styles;
+
+  override _cardStyle: (typeof EmbedFigmaStyles)[number] = 'figma';
+
+  protected _isDragging = false;
+
+  protected _isResizing = false;
+
+  open = () => {
+    let link = this.model.url;
+    if (!link.match(/^[a-zA-Z]+:\/\//)) {
+      link = 'https://' + link;
+    }
+    window.open(link, '_blank');
+  };
+
+  refreshData = () => {};
+
+  private _handleDoubleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.open();
+  }
+
+  private _selectBlock() {
+    const selectionManager = this.host.selection;
+    const blockSelection = selectionManager.create('block', {
+      blockId: this.blockId,
+    });
+    selectionManager.setGroup('note', [blockSelection]);
+  }
+
+  protected _handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this._selectBlock();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._cardStyle = this.model.style;
+
+    if (!this.model.description && !this.model.title) {
+      this.doc.withoutTransact(() => {
+        this.doc.updateBlock(this.model, {
+          title: 'Figma',
+          description: this.model.url,
+        });
+      });
+    }
+
+    this.disposables.add(
+      this.model.propsUpdated.on(({ key }) => {
+        if (key === 'url') {
+          this.refreshData();
+        }
+      })
+    );
+
+    // this is required to prevent iframe from capturing pointer events
+    this.disposables.add(
+      this.std.selection.slots.changed.on(() => {
+        this._isSelected =
+          !!this.selected?.is('block') || !!this.selected?.is('surface');
+
+        this._showOverlay =
+          this._isResizing || this._isDragging || !this._isSelected;
+      })
+    );
+    // this is required to prevent iframe from capturing pointer events
+    this.handleEvent('dragStart', () => {
+      this._isDragging = true;
+      this._showOverlay =
+        this._isResizing || this._isDragging || !this._isSelected;
+    });
+
+    this.handleEvent('dragEnd', () => {
+      this._isDragging = false;
+      this._showOverlay =
+        this._isResizing || this._isDragging || !this._isSelected;
+    });
+  }
+
+  override renderBlock() {
+    const { title, description, url } = this.model;
+    const titleText = title ?? 'Figma';
+    const descriptionText = description ?? url;
+
+    return this.renderEmbed(
+      () => html`
+        <div
+          class=${classMap({
+            'affine-embed-figma-block': true,
+            selected: this._isSelected,
+          })}
+          style=${styleMap({
+            transform: `scale(${this._scale})`,
+            transformOrigin: '0 0',
+          })}
+          @click=${this._handleClick}
+          @dblclick=${this._handleDoubleClick}
+        >
+          <div class="affine-embed-figma">
+            <div class="affine-embed-figma-iframe-container">
+              <iframe
+                src=${`https://www.figma.com/embed?embed_host=blocksuite&url=${url}`}
+                allowfullscreen
+                loading="lazy"
+              ></iframe>
+
+              <div
+                class=${classMap({
+                  'affine-embed-figma-iframe-overlay': true,
+                  hide: !this._showOverlay,
+                })}
+              ></div>
+            </div>
+          </div>
+          <div class="affine-embed-figma-content">
+            <div class="affine-embed-figma-content-header">
+              <div class="affine-embed-figma-content-title-icon">
+                ${FigmaIcon}
+              </div>
+
+              <div class="affine-embed-figma-content-title-text">
+                ${titleText}
+              </div>
+            </div>
+
+            <div class="affine-embed-figma-content-description">
+              ${descriptionText}
+            </div>
+
+            <div class="affine-embed-figma-content-url" @click=${this.open}>
+              <span>www.figma.com</span>
+
+              <div class="affine-embed-figma-content-url-icon">${OpenIcon}</div>
+            </div>
+          </div>
+        </div>
+      `
+    );
+  }
+
+  @state()
+  protected accessor _isSelected = false;
+
+  @state()
+  protected accessor _showOverlay = true;
+}

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-model.ts

@@ -0,0 +1,2 @@
+export const figmaUrlRegex: RegExp =
+  /https:\/\/[\w.-]+\.?figma.com\/([\w-]+)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/;

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-service.ts

@@ -0,0 +1,23 @@
+import {
+  EmbedFigmaBlockSchema,
+  EmbedFigmaStyles,
+} from '@blocksuite/affine-model';
+import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
+import { BlockService } from '@blocksuite/block-std';
+
+import { figmaUrlRegex } from './embed-figma-model.js';
+
+export class EmbedFigmaBlockService extends BlockService {
+  static override readonly flavour = EmbedFigmaBlockSchema.model.flavour;
+
+  override mounted() {
+    super.mounted();
+
+    this.std.get(EmbedOptionProvider).registerEmbedBlockOptions({
+      flavour: this.flavour,
+      urlRegex: figmaUrlRegex,
+      styles: EmbedFigmaStyles,
+      viewType: 'embed',
+    });
+  }
+}

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-spec.ts

@@ -0,0 +1,18 @@
+import {
+  BlockViewExtension,
+  type ExtensionType,
+  FlavourExtension,
+} from '@blocksuite/block-std';
+import { literal } from 'lit/static-html.js';
+
+import { EmbedFigmaBlockService } from './embed-figma-service.js';
+
+export const EmbedFigmaBlockSpec: ExtensionType[] = [
+  FlavourExtension('affine:embed-figma'),
+  EmbedFigmaBlockService,
+  BlockViewExtension('affine:embed-figma', model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-figma-block`
+      : literal`affine-embed-figma-block`;
+  }),
+];

blocksuite/affine/block-embed/src/embed-figma-block/index.ts

@@ -0,0 +1,5 @@
+export * from './adapters/index.js';
+export * from './embed-figma-block.js';
+export * from './embed-figma-model.js';
+export * from './embed-figma-spec.js';
+export { FigmaIcon } from './styles.js';

blocksuite/affine/block-embed/src/embed-figma-block/styles.ts

@@ -0,0 +1,229 @@
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
+import { css, html } from 'lit';
+
+export const styles = css`
+  .affine-embed-figma-block {
+    width: ${EMBED_CARD_WIDTH.figma}px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 12px;
+
+    border-radius: 8px;
+    border: 1px solid var(--affine-background-tertiary-color);
+
+    opacity: var(--add, 1);
+    background: var(--affine-background-primary-color);
+    user-select: none;
+
+    aspect-ratio: ${EMBED_CARD_WIDTH.figma} / ${EMBED_CARD_HEIGHT.figma};
+  }
+
+  .affine-embed-figma {
+    flex-grow: 1;
+    width: 100%;
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-figma img,
+  .affine-embed-figma object,
+  .affine-embed-figma svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px 4px var(--1, 0px) var(--1, 0px);
+  }
+
+  .affine-embed-figma-iframe-container {
+    height: 100%;
+    position: relative;
+  }
+
+  .affine-embed-figma-iframe-container > iframe {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px 4px var(--1, 0px) var(--1, 0px);
+    border: none;
+  }
+
+  .affine-embed-figma-iframe-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .affine-embed-figma-iframe-overlay.hide {
+    display: none;
+  }
+
+  .affine-embed-figma-content {
+    display: block;
+    flex-direction: column;
+    width: 100%;
+    height: fit-content;
+    border-radius: var(--1, 0px);
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-figma-content-header {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+
+    align-self: stretch;
+    padding: var(--1, 0px);
+    border-radius: var(--1, 0px);
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-figma-content-title-icon {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .affine-embed-figma-content-title-icon img,
+  .affine-embed-figma-content-title-icon object,
+  .affine-embed-figma-content-title-icon svg {
+    width: 20px;
+    height: 20px;
+    fill: var(--affine-background-primary-color);
+  }
+
+  .affine-embed-figma-content-title-text {
+    flex: 1 0 0;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--affine-text-primary-color);
+
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-sm);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px;
+  }
+
+  .affine-embed-figma-content-description {
+    height: 40px;
+
+    position: relative;
+
+    word-break: break-word;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--affine-text-primary-color);
+
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-xs);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .affine-embed-figma-content-description::after {
+    content: '...';
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background-color: var(--affine-background-primary-color);
+  }
+
+  .affine-embed-figma-content-url {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+    width: max-content;
+    max-width: 100%;
+    cursor: pointer;
+  }
+  .affine-embed-figma-content-url > span {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+
+    word-break: break-all;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--affine-text-secondary-color);
+
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-xs);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+  .affine-embed-figma-content-url:hover > span {
+    color: var(--affine-link-color);
+  }
+  .affine-embed-figma-content-url:hover .open-icon {
+    fill: var(--affine-link-color);
+  }
+
+  .affine-embed-figma-content-url-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 12px;
+  }
+  .affine-embed-figma-content-url-icon .open-icon {
+    height: 12px;
+    width: 12px;
+    fill: var(--affine-text-secondary-color);
+  }
+
+  .affine-embed-figma-block.selected {
+    .affine-embed-figma-content-url > span {
+      color: var(--affine-link-color);
+    }
+    .affine-embed-figma-content-url .open-icon {
+      fill: var(--affine-link-color);
+    }
+  }
+`;
+
+export const FigmaIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M7.66898 17.9165C9.00426 17.9165 10.088 16.7342 10.088 15.2776V12.6387H7.66898C6.3337 12.6387 5.25 13.8209 5.25 15.2776C5.25 16.7342 6.3337 17.9165 7.66898 17.9165Z"
+    fill="#0ACF83"
+  />
+  <path
+    d="M5.25 10.0002C5.25 8.54355 6.3337 7.36133 7.66898 7.36133H10.088V12.6391H7.66898C6.3337 12.6391 5.25 11.4569 5.25 10.0002Z"
+    fill="#A259FF"
+  />
+  <path
+    d="M5.25 4.72238C5.25 3.26572 6.3337 2.0835 7.66898 2.0835H10.088V7.36127H7.66898C6.3337 7.36127 5.25 6.17905 5.25 4.72238Z"
+    fill="#F24E1E"
+  />
+  <path
+    d="M10.0879 2.0835H12.5069C13.8421 2.0835 14.9259 3.26572 14.9259 4.72238C14.9259 6.17905 13.8421 7.36127 12.5069 7.36127H10.0879V2.0835Z"
+    fill="#FF7262"
+  />
+  <path
+    d="M14.9259 10.0002C14.9259 11.4569 13.8421 12.6391 12.5069 12.6391C11.1716 12.6391 10.0879 11.4569 10.0879 10.0002C10.0879 8.54355 11.1716 7.36133 12.5069 7.36133C13.8421 7.36133 14.9259 8.54355 14.9259 10.0002Z"
+    fill="#1ABCFE"
+  />
+</svg>`;

blocksuite/affine/block-embed/src/embed-github-block/adapters/html.ts

@@ -0,0 +1,11 @@
+import { EmbedGithubBlockSchema } from '@blocksuite/affine-model';
+import { BlockHtmlAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockHtmlAdapterMatcher } from '../../common/adapters/html.js';
+
+export const embedGithubBlockHtmlAdapterMatcher =
+  createEmbedBlockHtmlAdapterMatcher(EmbedGithubBlockSchema.model.flavour);
+
+export const EmbedGithubBlockHtmlAdapterExtension = BlockHtmlAdapterExtension(
+  embedGithubBlockHtmlAdapterMatcher
+);

blocksuite/affine/block-embed/src/embed-github-block/adapters/index.ts

@@ -0,0 +1,3 @@
+export * from './html.js';
+export * from './markdown.js';
+export * from './plain-text.js';

blocksuite/affine/block-embed/src/embed-github-block/adapters/markdown.ts

@@ -0,0 +1,10 @@
+import { EmbedGithubBlockSchema } from '@blocksuite/affine-model';
+import { BlockMarkdownAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockMarkdownAdapterMatcher } from '../../common/adapters/markdown.js';
+
+export const embedGithubBlockMarkdownAdapterMatcher =
+  createEmbedBlockMarkdownAdapterMatcher(EmbedGithubBlockSchema.model.flavour);
+
+export const EmbedGithubMarkdownAdapterExtension =
+  BlockMarkdownAdapterExtension(embedGithubBlockMarkdownAdapterMatcher);

blocksuite/affine/block-embed/src/embed-github-block/adapters/plain-text.ts

@@ -0,0 +1,10 @@
+import { EmbedGithubBlockSchema } from '@blocksuite/affine-model';
+import { BlockPlainTextAdapterExtension } from '@blocksuite/affine-shared/adapters';
+
+import { createEmbedBlockPlainTextAdapterMatcher } from '../../common/adapters/plain-text.js';
+
+export const embedGithubBlockPlainTextAdapterMatcher =
+  createEmbedBlockPlainTextAdapterMatcher(EmbedGithubBlockSchema.model.flavour);
+
+export const EmbedGithubBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(embedGithubBlockPlainTextAdapterMatcher);

blocksuite/affine/block-embed/src/embed-github-block/embed-edgeless-github-block.ts

@@ -0,0 +1,6 @@
+import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
+import { EmbedGithubBlockComponent } from './embed-github-block.js';
+
+export class EmbedEdgelessGithubBlockComponent extends toEdgelessEmbedBlock(
+  EmbedGithubBlockComponent
+) {}

blocksuite/affine/block-embed/src/embed-github-block/embed-github-block.ts

@@ -0,0 +1,275 @@
+import { OpenIcon } from '@blocksuite/affine-components/icons';
+import type {
+  EmbedGithubModel,
+  EmbedGithubStyles,
+} from '@blocksuite/affine-model';
+import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { EmbedBlockComponent } from '../common/embed-block-element.js';
+import { getEmbedCardIcons } from '../common/utils.js';
+import { githubUrlRegex } from './embed-github-model.js';
+import type { EmbedGithubBlockService } from './embed-github-service.js';
+import { GithubIcon, styles } from './styles.js';
+import {
+  getGithubStatusIcon,
+  refreshEmbedGithubStatus,
+  refreshEmbedGithubUrlData,
+} from './utils.js';
+
+export class EmbedGithubBlockComponent extends EmbedBlockComponent<
+  EmbedGithubModel,
+  EmbedGithubBlockService
+> {
+  static override styles = styles;
+
+  override _cardStyle: (typeof EmbedGithubStyles)[number] = 'horizontal';
+
+  open = () => {
+    let link = this.model.url;
+    if (!link.match(/^[a-zA-Z]+:\/\//)) {
+      link = 'https://' + link;
+    }
+    window.open(link, '_blank');
+  };
+
+  refreshData = () => {
+    refreshEmbedGithubUrlData(this, this.fetchAbortController.signal).catch(
+      console.error
+    );
+  };
+
+  refreshStatus = () => {
+    refreshEmbedGithubStatus(this, this.fetchAbortController.signal).catch(
+      console.error
+    );
+  };
+
+  private _handleAssigneeClick(assignee: string) {
+    const link = `https://www.github.com/${assignee}`;
+    window.open(link, '_blank');
+  }
+
+  private _handleDoubleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.open();
+  }
+
+  private _selectBlock() {
+    const selectionManager = this.host.selection;
+    const blockSelection = selectionManager.create('block', {
+      blockId: this.blockId,
+    });
+    selectionManager.setGroup('note', [blockSelection]);
+  }
+
+  protected _handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this._selectBlock();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._cardStyle = this.model.style;
+
+    if (!this.model.owner || !this.model.repo || !this.model.githubId) {
+      this.doc.withoutTransact(() => {
+        const url = this.model.url;
+        const urlMatch = url.match(githubUrlRegex);
+        if (urlMatch) {
+          const [, owner, repo, githubType, githubId] = urlMatch;
+          this.doc.updateBlock(this.model, {
+            owner,
+            repo,
+            githubType: githubType === 'issue' ? 'issue' : 'pr',
+            githubId,
+          });
+        }
+      });
+    }
+
+    this.doc.withoutTransact(() => {
+      if (!this.model.description && !this.model.title) {
+        this.refreshData();
+      } else {
+        this.refreshStatus();
+      }
+    });
+
+    this.disposables.add(
+      this.model.propsUpdated.on(({ key }) => {
+        if (key === 'url') {
+          this.refreshData();
+        }
+      })
+    );
+
+    this.disposables.add(
+      this.selection.slots.changed.on(() => {
+        this._isSelected =
+          !!this.selected?.is('block') || !!this.selected?.is('surface');
+      })
+    );
+  }
+
+  override renderBlock() {
+    const {
+      title = 'GitHub',
+      githubType,
+      status,
+      statusReason,
+      owner,
+      repo,
+      createdAt,
+      assignees,
+      description,
+      image,
+      style,
+    } = this.model;
+
+    const loading = this.loading;
+    const theme = this.std.get(ThemeProvider).theme;
+    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const titleIcon = loading ? LoadingIcon : GithubIcon;
+    const statusIcon = status
+      ? getGithubStatusIcon(githubType, status, statusReason)
+      : nothing;
+    const statusText = loading ? '' : status;
+    const titleText = loading ? 'Loading...' : title;
+    const descriptionText = loading ? '' : description;
+    const bannerImage =
+      !loading && image
+        ? html`<object type="image/webp" data=${image} draggable="false">
+            ${EmbedCardBannerIcon}
+          </object>`
+        : EmbedCardBannerIcon;
+
+    let dateText = '';
+    if (createdAt) {
+      const date = new Date(createdAt);
+      dateText = date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+      });
+      const day = date.getDate();
+      const suffix =
+        ['th', 'st', 'nd', 'rd'][((day / 10) | 0) !== 1 ? day % 10 : 4] || 'th';
+      dateText = dateText.replace(/\d+/, `${day}${suffix}`);
+    }
+
+    return this.renderEmbed(
+      () => html`
+        <div
+          class=${classMap({
+            'affine-embed-github-block': true,
+            loading,
+            [style]: true,
+            selected: this._isSelected,
+          })}
+          style=${styleMap({
+            transform: `scale(${this._scale})`,
+            transformOrigin: '0 0 ',
+          })}
+          @click=${this._handleClick}
+          @dblclick=${this._handleDoubleClick}
+        >
+          <div class="affine-embed-github-banner">${bannerImage}</div>
+          <div class="affine-embed-github-content">
+            <div class="affine-embed-github-content-title">
+              <div class="affine-embed-github-content-title-icons">
+                <div class="affine-embed-github-content-title-site-icon">
+                  ${titleIcon}
+                </div>
+
+                ${status && statusText
+                  ? html`<div
+                      class=${classMap({
+                        'affine-embed-github-content-title-status-icon': true,
+                        [githubType]: true,
+                        [status]: true,
+                        success: statusReason === 'completed',
+                        failure: statusReason === 'not_planned',
+                      })}
+                    >
+                      ${statusIcon}
+
+                      <span>${statusText}</span>
+                    </div>`
+                  : nothing}
+              </div>
+
+              <div class="affine-embed-github-content-title-text">
+                ${titleText}
+              </div>
+            </div>
+
+            <div class="affine-embed-github-content-description">
+              ${descriptionText}
+            </div>
+
+            ${githubType === 'issue' && assignees
+              ? html`
+                  <div class="affine-embed-github-content-assignees">
+                    <div
+                      class="affine-embed-github-content-assignees-text label"
+                    >
+                      Assignees
+                    </div>
+
+                    <div
+                      class="affine-embed-github-content-assignees-text users"
+                    >
+                      ${assignees.length === 0
+                        ? html`<span
+                            class="affine-embed-github-content-assignees-text-users placeholder"
+                            >No one</span
+                          >`
+                        : repeat(
+                            assignees,
+                            assignee => assignee,
+                            (assignee, index) =>
+                              html`<span
+                                  class="affine-embed-github-content-assignees-text-users user"
+                                  @click=${() =>
+                                    this._handleAssigneeClick(assignee)}
+                                  >${`@${assignee}`}</span
+                                >
+                                ${index === assignees.length - 1 ? '' : `, `}`
+                          )}
+                    </div>
+                  </div>
+                `
+              : nothing}
+
+            <div class="affine-embed-github-content-url" @click=${this.open}>
+              <span class="affine-embed-github-content-repo"
+                >${`${owner}/${repo} |`}</span
+              >
+
+              ${createdAt
+                ? html`<span class="affine-embed-github-content-date"
+                    >${dateText} |</span
+                  >`
+                : nothing}
+              <span>github.com</span>
+
+              <div class="affine-embed-github-content-url-icon">
+                ${OpenIcon}
+              </div>
+            </div>
+          </div>
+        </div>
+      `
+    );
+  }
+
+  @state()
+  private accessor _isSelected = false;
+
+  @property({ attribute: false })
+  accessor loading = false;
+}

blocksuite/affine/block-embed/src/embed-github-block/embed-github-model.ts

@@ -0,0 +1,2 @@
+export const githubUrlRegex: RegExp =
+  /^(?:https?:\/\/)?(?:www\.)?github\.com\/([^/]+)\/([^/]+)\/(issue|pull)s?\/(\d+)$/;

blocksuite/affine/block-embed/src/embed-github-block/embed-github-service.ts

@@ -0,0 +1,43 @@
+import {
+  EmbedGithubBlockSchema,
+  type EmbedGithubModel,
+  EmbedGithubStyles,
+} from '@blocksuite/affine-model';
+import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
+import { BlockService } from '@blocksuite/block-std';
+
+import { LinkPreviewer } from '../common/link-previewer.js';
+import { githubUrlRegex } from './embed-github-model.js';
+import { queryEmbedGithubApiData, queryEmbedGithubData } from './utils.js';
+
+export class EmbedGithubBlockService extends BlockService {
+  static override readonly flavour = EmbedGithubBlockSchema.model.flavour;
+
+  private static readonly linkPreviewer = new LinkPreviewer();
+
+  static setLinkPreviewEndpoint =
+    EmbedGithubBlockService.linkPreviewer.setEndpoint;
+
+  queryApiData = (embedGithubModel: EmbedGithubModel, signal?: AbortSignal) => {
+    return queryEmbedGithubApiData(embedGithubModel, signal);
+  };
+
+  queryUrlData = (embedGithubModel: EmbedGithubModel, signal?: AbortSignal) => {
+    return queryEmbedGithubData(
+      embedGithubModel,
+      EmbedGithubBlockService.linkPreviewer,
+      signal
+    );
+  };
+
+  override mounted() {
+    super.mounted();
+
+    this.std.get(EmbedOptionProvider).registerEmbedBlockOptions({
+      flavour: this.flavour,
+      urlRegex: githubUrlRegex,
+      styles: EmbedGithubStyles,
+      viewType: 'card',
+    });
+  }
+}

blocksuite/affine/block-embed/src/embed-github-block/embed-github-spec.ts

@@ -0,0 +1,18 @@
+import {
+  BlockViewExtension,
+  type ExtensionType,
+  FlavourExtension,
+} from '@blocksuite/block-std';
+import { literal } from 'lit/static-html.js';
+
+import { EmbedGithubBlockService } from './embed-github-service.js';
+
+export const EmbedGithubBlockSpec: ExtensionType[] = [
+  FlavourExtension('affine:embed-github'),
+  EmbedGithubBlockService,
+  BlockViewExtension('affine:embed-github', model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-github-block`
+      : literal`affine-embed-github-block`;
+  }),
+];

blocksuite/affine/block-embed/src/embed-github-block/index.ts

@@ -0,0 +1,5 @@
+export * from './adapters/index.js';
+export * from './embed-github-block.js';
+export * from './embed-github-service.js';
+export * from './embed-github-spec.js';
+export { GithubIcon } from './styles.js';

blocksuite/affine/block-embed/src/embed-github-block/styles.ts

@@ -0,0 +1,513 @@
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
+import { css, html } from 'lit';
+
+export const styles = css`
+  .affine-embed-github-block {
+    box-sizing: border-box;
+    display: flex;
+    width: 100%;
+    height: ${EMBED_CARD_HEIGHT.horizontal}px;
+
+    border-radius: 8px;
+    border: 1px solid var(--affine-background-tertiary-color);
+
+    opacity: var(--add, 1);
+    background: var(--affine-background-primary-color);
+    user-select: none;
+  }
+
+  .affine-embed-github-content {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    align-self: stretch;
+    gap: 4px;
+    padding: 12px;
+    border-radius: var(--1, 0px);
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-github-content-title {
+    display: flex;
+    min-height: 22px;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+
+    align-self: stretch;
+    padding: var(--1, 0px);
+    border-radius: var(--1, 0px);
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-github-content-title-icons {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .affine-embed-github-content-title-icons img,
+  .affine-embed-github-content-title-icons object,
+  .affine-embed-github-content-title-icons svg {
+    width: 16px;
+    height: 16px;
+    color: var(--affine-pure-white);
+  }
+
+  .affine-embed-github-content-title-site-icon {
+    display: flex;
+    width: 16px;
+    height: 16px;
+    justify-content: center;
+    align-items: center;
+
+    .github-icon {
+      fill: var(--affine-black);
+      color: var(--affine-black);
+    }
+  }
+
+  .affine-embed-github-content-title-status-icon {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 6px;
+    border-radius: 20px;
+
+    color: var(--affine-pure-white);
+    leading-trim: both;
+
+    text-edge: cap;
+    font-feature-settings:
+      'clig' off,
+      'liga' off;
+    text-transform: capitalize;
+    font-family: var(--affine-font-family);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+  }
+  .affine-embed-github-content-title-status-icon.issue.open {
+    background: #238636;
+  }
+  .affine-embed-github-content-title-status-icon.issue.closed.success {
+    background: #8957e5;
+  }
+  .affine-embed-github-content-title-status-icon.issue.closed.failure {
+    background: #6e7681;
+  }
+  .affine-embed-github-content-title-status-icon.pr.open {
+    background: #238636;
+  }
+  .affine-embed-github-content-title-status-icon.pr.draft {
+    background: #6e7681;
+  }
+  .affine-embed-github-content-title-status-icon.pr.merged {
+    background: #8957e5;
+  }
+  .affine-embed-github-content-title-status-icon.pr.closed {
+    background: #c03737;
+  }
+
+  .affine-embed-github-content-title-status-icon > svg {
+    height: 16px;
+    width: 16px;
+    padding: 2px;
+  }
+
+  .affine-embed-github-content-title-status-icon > span {
+    padding: 0px 1.5px;
+  }
+
+  .affine-embed-github-content-title-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--affine-text-primary-color);
+
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-sm);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px;
+  }
+
+  .affine-embed-github-content-description {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+
+    flex-grow: 1;
+
+    word-break: break-word;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--affine-text-primary-color);
+
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-xs);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+
+  .affine-embed-github-content-assignees {
+    display: none;
+  }
+
+  .affine-embed-github-content-url {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 4px;
+    width: max-content;
+    max-width: 100%;
+    cursor: pointer;
+  }
+  .affine-embed-github-content-url > span {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+
+    word-break: break-all;
+    white-space: normal;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--affine-text-secondary-color);
+
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-xs);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+  }
+  .affine-embed-github-content-url:hover > span {
+    color: var(--affine-link-color);
+  }
+  .affine-embed-github-content-url:hover .open-icon {
+    fill: var(--affine-link-color);
+  }
+
+  .affine-embed-github-content-url-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 12px;
+    height: 12px;
+  }
+  .affine-embed-github-content-url-icon .open-icon {
+    height: 12px;
+    width: 12px;
+    fill: var(--affine-text-secondary-color);
+  }
+
+  .affine-embed-github-banner {
+    margin: 12px 0px 0px 12px;
+    width: 204px;
+    height: 102px;
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-github-banner img,
+  .affine-embed-github-banner object,
+  .affine-embed-github-banner svg {
+    width: 204px;
+    height: 102px;
+    object-fit: cover;
+    border-radius: 4px 4px var(--1, 0px) var(--1, 0px);
+  }
+
+  .affine-embed-github-block.loading {
+    .affine-embed-github-content-title-text {
+      color: var(--affine-placeholder-color);
+    }
+  }
+
+  .affine-embed-github-block.selected {
+    .affine-embed-github-content-url > span {
+      color: var(--affine-link-color);
+    }
+    .affine-embed-github-content-url .open-icon {
+      fill: var(--affine-link-color);
+    }
+  }
+
+  .affine-embed-github-block.list {
+    height: ${EMBED_CARD_HEIGHT.list}px;
+    width: ${EMBED_CARD_WIDTH.list}px;
+
+    .affine-embed-github-content {
+      width: 100%;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .affine-embed-github-content-title {
+      width: 660px;
+    }
+
+    .affine-embed-github-content-repo {
+      display: none;
+    }
+
+    .affine-embed-github-content-date {
+      display: none;
+    }
+
+    .affine-embed-github-content-url {
+      width: 90px;
+      justify-content: flex-end;
+    }
+
+    .affine-embed-github-content-description {
+      display: none;
+    }
+
+    .affine-embed-github-banner {
+      display: none;
+    }
+  }
+
+  .affine-embed-github-block.horizontal {
+    width: ${EMBED_CARD_WIDTH.horizontal}px;
+    height: ${EMBED_CARD_HEIGHT.horizontal}px;
+  }
+
+  .affine-embed-github-block.vertical {
+    width: ${EMBED_CARD_WIDTH.vertical}px;
+    height: ${EMBED_CARD_HEIGHT.vertical}px;
+    flex-direction: column;
+
+    .affine-embed-github-content {
+      width: 100%;
+    }
+
+    .affine-embed-github-content-description {
+      -webkit-line-clamp: 6;
+    }
+
+    .affine-embed-github-content-assignees {
+      display: flex;
+      padding: var(--1, 0px);
+      align-items: center;
+      justify-content: flex-start;
+      gap: 2px;
+      align-self: stretch;
+    }
+
+    .affine-embed-github-content-assignees-text {
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+
+      font-family: var(--affine-font-family);
+      font-size: var(--affine-font-xs);
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px;
+    }
+
+    .affine-embed-github-content-assignees-text.label {
+      width: 72px;
+      color: var(--affine-text-primary-color);
+      font-weight: 600;
+    }
+
+    .affine-embed-github-content-assignees-text.users {
+      width: calc(100% - 72px);
+      word-break: break-all;
+      white-space: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-weight: 400;
+    }
+
+    .affine-embed-github-content-assignees-text-users.user {
+      color: var(--affine-link-color);
+      cursor: pointer;
+    }
+
+    .affine-embed-github-content-assignees-text-users.placeholder {
+      color: var(--affine-placeholder-color);
+    }
+
+    .affine-embed-github-banner {
+      width: 340px;
+      height: 170px;
+      margin-left: 12px;
+    }
+
+    .affine-embed-github-banner img,
+    .affine-embed-github-banner object,
+    .affine-embed-github-banner svg {
+      width: 340px;
+      height: 170px;
+    }
+  }
+
+  .affine-embed-github-block.cube {
+    width: ${EMBED_CARD_WIDTH.cube}px;
+    height: ${EMBED_CARD_HEIGHT.cube}px;
+
+    .affine-embed-github-content {
+      width: 100%;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
+
+    .affine-embed-github-content-title {
+      flex-direction: column;
+      gap: 4px;
+      align-items: flex-start;
+    }
+
+    .affine-embed-github-content-title-text {
+      -webkit-line-clamp: 2;
+    }
+
+    .affine-embed-github-content-description {
+      display: none;
+    }
+
+    .affine-embed-github-banner {
+      display: none;
+    }
+
+    .affine-embed-github-content-repo {
+      display: none;
+    }
+
+    .affine-embed-github-content-date {
+      display: none;
+    }
+  }
+`;
+
+export const GithubIcon = html`<svg
+  class="github-icon"
+  width="20"
+  height="20"
+  viewBox="0 0 16 16"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M8.00016 1.33334C4.31683 1.33334 1.3335 4.39214 1.3335 8.16864C1.3335 11.1933 3.24183 13.7479 5.89183 14.6536C6.22516 14.7134 6.35016 14.5084 6.35016 14.3289C6.35016 14.1666 6.34183 13.6283 6.34183 13.0559C4.66683 13.372 4.2335 12.6372 4.10016 12.2527C4.02516 12.0562 3.70016 11.4496 3.41683 11.2872C3.1835 11.1591 2.85016 10.8429 3.4085 10.8344C3.9335 10.8259 4.3085 11.33 4.4335 11.535C5.0335 12.5689 5.99183 12.2784 6.37516 12.0989C6.4335 11.6546 6.6085 11.3556 6.80016 11.1847C5.31683 11.0138 3.76683 10.4243 3.76683 7.80978C3.76683 7.06644 4.02516 6.45127 4.45016 5.9728C4.3835 5.80192 4.15016 5.1013 4.51683 4.16145C4.51683 4.16145 5.07516 3.98202 6.35016 4.86206C6.8835 4.70827 7.45016 4.63137 8.01683 4.63137C8.5835 4.63137 9.15016 4.70827 9.6835 4.86206C10.9585 3.97348 11.5168 4.16145 11.5168 4.16145C11.8835 5.1013 11.6502 5.80192 11.5835 5.9728C12.0085 6.45127 12.2668 7.0579 12.2668 7.80978C12.2668 10.4328 10.7085 11.0138 9.22516 11.1847C9.46683 11.3983 9.67516 11.8084 9.67516 12.4492C9.67516 13.3635 9.66683 14.0983 9.66683 14.3289C9.66683 14.5084 9.79183 14.722 10.1252 14.6536C11.4486 14.1955 12.5986 13.3234 13.4133 12.1601C14.228 10.9968 14.6664 9.60079 14.6668 8.16864C14.6668 4.39214 11.6835 1.33334 8.00016 1.33334Z"
+  />
+</svg> `;
+
+export const GithubIssueOpenIcon = html`<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path>
+  <path
+    d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"
+  ></path>
+</svg>`;
+
+export const GithubIssueClosedSuccessIcon = html`<svg
+  aria-hidden="true"
+  height="16"
+  viewBox="0 0 16 16"
+  version="1.1"
+  width="16"
+  data-view-component="true"
+  class="octicon octicon-issue-closed flex-items-center mr-1"
+  fill="currentColor"
+>
+  <path
+    d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"
+  ></path>
+  <path
+    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"
+  ></path>
+</svg>`;
+
+export const GithubIssueClosedFailureIcon = html`<svg
+  aria-hidden="true"
+  height="16"
+  viewBox="0 0 16 16"
+  version="1.1"
+  width="16"
+  data-view-component="true"
+  class="octicon octicon-skip flex-items-center mr-1"
+  fill="currentColor"
+>
+  <path
+    d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm9.78-2.22-5.5 5.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l5.5-5.5a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"
+  ></path>
+</svg>`;
+
+export const GithubPROpenIcon = html`<svg
+  height="16"
+  class="octicon octicon-git-pull-request"
+  viewBox="0 0 16 16"
+  version="1.1"
+  width="16"
+  aria-hidden="true"
+  fill="currentColor"
+>
+  <path
+    d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"
+  ></path>
+</svg>`;
+
+export const GithubPRDraftIcon = html`<svg
+  height="16"
+  class="octicon octicon-git-pull-request-draft"
+  viewBox="0 0 16 16"
+  version="1.1"
+  width="16"
+  aria-hidden="true"
+  fill="currentColor"
+>
+  <path
+    d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 14a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM14 7.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm0-4.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z"
+  ></path>
+</svg>`;
+
+export const GithubPRMergedIcon = html`<svg
+  height="16"
+  class="octicon octicon-git-merge"
+  viewBox="0 0 16 16"
+  version="1.1"
+  width="16"
+  aria-hidden="true"
+  fill="currentColor"
+>
+  <path
+    d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"
+  ></path>
+</svg>`;
+
+export const GithubPRClosedIcon = html`<svg
+  height="16"
+  class="octicon octicon-git-pull-request-closed"
+  viewBox="0 0 16 16"
+  version="1.1"
+  width="16"
+  aria-hidden="true"
+  fill="currentColor"
+>
+  <path
+    d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 5.5a.75.75 0 0 1 .75.75v3.378a2.251 2.251 0 1 1-1.5 0V7.25a.75.75 0 0 1 .75-.75Zm-2.03-5.273a.75.75 0 0 1 1.06 0l.97.97.97-.97a.748.748 0 0 1 1.265.332.75.75 0 0 1-.205.729l-.97.97.97.97a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-.97-.97-.97.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l.97-.97-.97-.97a.75.75 0 0 1 0-1.06ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
+  ></path>
+</svg>`;

blocksuite/affine/block-embed/src/embed-github-block/utils.ts

@@ -0,0 +1,170 @@
+import type {
+  EmbedGithubBlockUrlData,
+  EmbedGithubModel,
+} from '@blocksuite/affine-model';
+import { isAbortError } from '@blocksuite/affine-shared/utils';
+import { assertExists } from '@blocksuite/global/utils';
+import { nothing } from 'lit';
+
+import type { LinkPreviewer } from '../common/link-previewer.js';
+import type { EmbedGithubBlockComponent } from './embed-github-block.js';
+import {
+  GithubIssueClosedFailureIcon,
+  GithubIssueClosedSuccessIcon,
+  GithubIssueOpenIcon,
+  GithubPRClosedIcon,
+  GithubPRDraftIcon,
+  GithubPRMergedIcon,
+  GithubPROpenIcon,
+} from './styles.js';
+
+export async function queryEmbedGithubData(
+  embedGithubModel: EmbedGithubModel,
+  linkPreviewer: LinkPreviewer,
+  signal?: AbortSignal
+): Promise<Partial<EmbedGithubBlockUrlData>> {
+  const [githubApiData, openGraphData] = await Promise.all([
+    queryEmbedGithubApiData(embedGithubModel, signal),
+    linkPreviewer.query(embedGithubModel.url, signal),
+  ]);
+  return { ...githubApiData, ...openGraphData };
+}
+
+export async function queryEmbedGithubApiData(
+  embedGithubModel: EmbedGithubModel,
+  signal?: AbortSignal
+): Promise<Partial<EmbedGithubBlockUrlData>> {
+  const { owner, repo, githubType, githubId } = embedGithubModel;
+  let githubApiData: Partial<EmbedGithubBlockUrlData> = {};
+
+  // github's public api has a rate limit of 60 requests per hour
+  const apiUrl = `https://api.github.com/repos/${owner}/${repo}/${
+    githubType === 'issue' ? 'issues' : 'pulls'
+  }/${githubId}`;
+
+  const githubApiResponse = await fetch(apiUrl, {
+    cache: 'no-cache',
+    signal,
+  }).catch(() => null);
+
+  if (githubApiResponse && githubApiResponse.ok) {
+    const githubApiJson = await githubApiResponse.json();
+    const { state, state_reason, draft, merged, created_at, assignees } =
+      githubApiJson;
+
+    const assigneeLogins = assignees.map(
+      (assignee: { login: string }) => assignee.login
+    );
+
+    let status = state;
+    if (merged) {
+      status = 'merged';
+    } else if (state === 'open' && draft) {
+      status = 'draft';
+    }
+
+    githubApiData = {
+      status,
+      statusReason: state_reason,
+      createdAt: created_at,
+      assignees: assigneeLogins,
+    };
+  }
+
+  return githubApiData;
+}
+
+export async function refreshEmbedGithubUrlData(
+  embedGithubElement: EmbedGithubBlockComponent,
+  signal?: AbortSignal
+): Promise<void> {
+  let image = null,
+    status = null,
+    statusReason = null,
+    title = null,
+    description = null,
+    createdAt = null,
+    assignees = null;
+
+  try {
+    embedGithubElement.loading = true;
+
+    const queryUrlData = embedGithubElement.service?.queryUrlData;
+    assertExists(queryUrlData);
+
+    const githubUrlData = await queryUrlData(embedGithubElement.model);
+    ({
+      image = null,
+      status = null,
+      statusReason = null,
+      title = null,
+      description = null,
+      createdAt = null,
+      assignees = null,
+    } = githubUrlData);
+
+    if (signal?.aborted) return;
+
+    embedGithubElement.doc.updateBlock(embedGithubElement.model, {
+      image,
+      status,
+      statusReason,
+      title,
+      description,
+      createdAt,
+      assignees,
+    });
+  } catch (error) {
+    if (signal?.aborted || isAbortError(error)) return;
+    throw Error;
+  } finally {
+    embedGithubElement.loading = false;
+  }
+}
+
+export async function refreshEmbedGithubStatus(
+  embedGithubElement: EmbedGithubBlockComponent,
+  signal?: AbortSignal
+) {
+  const queryApiData = embedGithubElement.service?.queryApiData;
+  assertExists(queryApiData);
+  const githubApiData = await queryApiData(embedGithubElement.model, signal);
+
+  if (!githubApiData.status || signal?.aborted) return;
+
+  embedGithubElement.doc.updateBlock(embedGithubElement.model, {
+    status: githubApiData.status,
+    statusReason: githubApiData.statusReason,
+    createdAt: githubApiData.createdAt,
+    assignees: githubApiData.assignees,
+  });
+}
+
+export function getGithubStatusIcon(
+  type: 'issue' | 'pr',
+  status: string,
+  statusReason: string | null
+) {
+  if (type === 'issue') {
+    if (status === 'open') {
+      return GithubIssueOpenIcon;
+    } else if (status === 'closed' && statusReason === 'completed') {
+      return GithubIssueClosedSuccessIcon;
+    } else if (status === 'closed' && statusReason === 'not_planned') {
+      return GithubIssueClosedFailureIcon;
+    } else {
+      return nothing;
+    }
+  } else if (type === 'pr') {
+    if (status === 'open') {
+      return GithubPROpenIcon;
+    } else if (status === 'draft') {
+      return GithubPRDraftIcon;
+    } else if (status === 'merged') {
+      return GithubPRMergedIcon;
+    } else if (status === 'closed') {
+      return GithubPRClosedIcon;
+    }
+  }
+  return nothing;
+}

blocksuite/affine/block-embed/src/embed-html-block/components/fullscreen-toolbar.ts

@@ -0,0 +1,171 @@
+import {
+  menu,
+  popMenu,
+  popupTargetFromElement,
+} from '@blocksuite/affine-components/context-menu';
+import { EditPropsStore } from '@blocksuite/affine-shared/services';
+import {
+  CopyIcon,
+  DoneIcon,
+  ExpandCloseIcon,
+  SettingsIcon,
+} from '@blocksuite/icons/lit';
+import { autoPlacement, flip, offset } from '@floating-ui/dom';
+import { css, html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+
+import type { EmbedEdgelessHtmlBlockComponent } from '../embed-edgeless-html-block.js';
+
+export class EmbedHtmlFullscreenToolbar extends LitElement {
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      position: absolute;
+      z-index: 1;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 0;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
+    .toolbar-toggle-control {
+      padding-bottom: 20px;
+    }
+
+    .toolbar-toggle-control[data-auto-hide='true'] {
+      transition: 0.27s ease;
+      padding-top: 100px;
+      transform: translateY(100px);
+    }
+
+    .toolbar-toggle-control[data-auto-hide='true']:hover {
+      padding-top: 0;
+      transform: translateY(0);
+    }
+
+    .fullscreen-toolbar-container {
+      background: var(--affine-background-overlay-panel-color);
+      box-shadow: var(--affine-menu-shadow);
+      border: 1px solid var(--affine-border-color);
+      border-radius: 40px;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12px;
+
+      padding: 0 20px;
+
+      height: 64px;
+    }
+
+    .short-v-divider {
+      display: inline-block;
+      background-color: var(--affine-border-color);
+      width: 1px;
+      height: 36px;
+    }
+  `;
+
+  private _popSettings = () => {
+    this._popperVisible = true;
+    popMenu(popupTargetFromElement(this._fullScreenToolbarContainer), {
+      options: {
+        items: [
+          () =>
+            html` <div class="settings-header">
+              <span>Settings</span>
+            </div>`,
+          menu.group({
+            name: 'thing',
+            items: [
+              menu.toggleSwitch({
+                name: 'Hide toolbar',
+                on: this.autoHideToolbar,
+                onChange: on => {
+                  this.autoHideToolbar = on;
+                },
+              }),
+            ],
+          }),
+        ],
+        onClose: () => {
+          this._popperVisible = false;
+        },
+      },
+      middleware: [
+        autoPlacement({ allowedPlacements: ['top-end'] }),
+        flip(),
+        offset({ mainAxis: 4, crossAxis: -40 }),
+      ],
+      container: this.embedHtml.iframeWrapper,
+    });
+  };
+
+  copyCode = () => {
+    if (this._copied) return;
+
+    this.embedHtml.std.clipboard
+      .writeToClipboard(items => {
+        items['text/plain'] = this.embedHtml.model.html ?? '';
+        return items;
+      })
+      .then(() => {
+        this._copied = true;
+        setTimeout(() => (this._copied = false), 1500);
+      })
+      .catch(console.error);
+  };
+
+  private get autoHideToolbar() {
+    return (
+      this.embedHtml.std
+        .get(EditPropsStore)
+        .getStorage('autoHideEmbedHTMLFullScreenToolbar') ?? false
+    );
+  }
+
+  private set autoHideToolbar(val: boolean) {
+    this.embedHtml.std
+      .get(EditPropsStore)
+      .setStorage('autoHideEmbedHTMLFullScreenToolbar', val);
+  }
+
+  override render() {
+    const hideToolbar = !this._popperVisible && this.autoHideToolbar;
+
+    return html`
+      <div data-auto-hide="${hideToolbar}" class="toolbar-toggle-control">
+        <div class="fullscreen-toolbar-container">
+          <icon-button @click="${this.embedHtml.close}"
+            >${ExpandCloseIcon()}
+          </icon-button>
+          <icon-button
+            @click="${this._popSettings}"
+            hover="${this._popperVisible}"
+            >${SettingsIcon()}
+          </icon-button>
+
+          <div class="short-v-divider"></div>
+
+          <icon-button class="copy-button" @click="${this.copyCode}"
+            >${this._copied ? DoneIcon() : CopyIcon()}
+          </icon-button>
+        </div>
+      </div>
+    `;
+  }
+
+  @state()
+  private accessor _copied = false;
+
+  @query('.fullscreen-toolbar-container')
+  private accessor _fullScreenToolbarContainer!: HTMLElement;
+
+  @state()
+  private accessor _popperVisible = false;
+
+  @property({ attribute: false })
+  accessor embedHtml!: EmbedEdgelessHtmlBlockComponent;
+}

blocksuite/affine/block-embed/src/embed-html-block/embed-edgeless-html-block.ts

@@ -0,0 +1,6 @@
+import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
+import { EmbedHtmlBlockComponent } from './embed-html-block.js';
+
+export class EmbedEdgelessHtmlBlockComponent extends toEdgelessEmbedBlock(
+  EmbedHtmlBlockComponent
+) {}

blocksuite/affine/block-embed/src/embed-html-block/embed-html-block.ts

@@ -0,0 +1,145 @@
+import type { EmbedHtmlModel, EmbedHtmlStyles } from '@blocksuite/affine-model';
+import { html } from 'lit';
+import { query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
+
+import { EmbedBlockComponent } from '../common/embed-block-element.js';
+import { HtmlIcon, styles } from './styles.js';
+
+export class EmbedHtmlBlockComponent extends EmbedBlockComponent<EmbedHtmlModel> {
+  static override styles = styles;
+
+  override _cardStyle: (typeof EmbedHtmlStyles)[number] = 'html';
+
+  protected _isDragging = false;
+
+  protected _isResizing = false;
+
+  close = () => {
+    document.exitFullscreen().catch(console.error);
+  };
+
+  protected embedHtmlStyle: StyleInfo = {};
+
+  open = () => {
+    this.iframeWrapper?.requestFullscreen().catch(console.error);
+  };
+
+  refreshData = () => {};
+
+  private _handleDoubleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this.open();
+  }
+
+  private _selectBlock() {
+    const selectionManager = this.host.selection;
+    const blockSelection = selectionManager.create('block', {
+      blockId: this.blockId,
+    });
+    selectionManager.setGroup('note', [blockSelection]);
+  }
+
+  protected _handleClick(event: MouseEvent) {
+    event.stopPropagation();
+    this._selectBlock();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._cardStyle = this.model.style;
+
+    // this is required to prevent iframe from capturing pointer events
+    this.disposables.add(
+      this.std.selection.slots.changed.on(() => {
+        this._isSelected =
+          !!this.selected?.is('block') || !!this.selected?.is('surface');
+
+        this._showOverlay =
+          this._isResizing || this._isDragging || !this._isSelected;
+      })
+    );
+    // this is required to prevent iframe from capturing pointer events
+    this.handleEvent('dragStart', () => {
+      this._isDragging = true;
+      this._showOverlay =
+        this._isResizing || this._isDragging || !this._isSelected;
+    });
+
+    this.handleEvent('dragEnd', () => {
+      this._isDragging = false;
+      this._showOverlay =
+        this._isResizing || this._isDragging || !this._isSelected;
+    });
+  }
+
+  override renderBlock(): unknown {
+    const titleText = 'Basic HTML Page Structure';
+
+    const htmlSrc = `
+      <style>
+        body {
+          margin: 0;
+        }
+      </style>
+      ${this.model.html}
+    `;
+
+    return this.renderEmbed(() => {
+      if (!this.model.html) {
+        return html` <div class="affine-html-empty">Empty</div>`;
+      }
+      return html`
+        <div
+          class=${classMap({
+            'affine-embed-html-block': true,
+            selected: this._isSelected,
+          })}
+          style=${styleMap(this.embedHtmlStyle)}
+          @click=${this._handleClick}
+          @dblclick=${this._handleDoubleClick}
+        >
+          <div class="affine-embed-html">
+            <div class="affine-embed-html-iframe-container">
+              <div class="embed-html-block-iframe-wrapper" allowfullscreen>
+                <iframe
+                  class="embed-html-block-iframe"
+                  sandbox="allow-scripts"
+                  scrolling="no"
+                  .srcdoc=${htmlSrc}
+                  loading="lazy"
+                ></iframe>
+                <embed-html-fullscreen-toolbar
+                  .embedHtml=${this}
+                ></embed-html-fullscreen-toolbar>
+              </div>
+
+              <div
+                class=${classMap({
+                  'affine-embed-html-iframe-overlay': true,
+                  hide: !this._showOverlay,
+                })}
+              ></div>
+            </div>
+          </div>
+
+          <div class="affine-embed-html-title">
+            <div class="affine-embed-html-title-icon">${HtmlIcon}</div>
+
+            <div class="affine-embed-html-title-text">${titleText}</div>
+          </div>
+        </div>
+      `;
+    });
+  }
+
+  @state()
+  protected accessor _isSelected = false;
+
+  @state()
+  protected accessor _showOverlay = true;
+
+  @query('.embed-html-block-iframe-wrapper')
+  accessor iframeWrapper!: HTMLDivElement;
+}

blocksuite/affine/block-embed/src/embed-html-block/embed-html-spec.ts

@@ -0,0 +1,10 @@
+import { BlockViewExtension, type ExtensionType } from '@blocksuite/block-std';
+import { literal } from 'lit/static-html.js';
+
+export const EmbedHtmlBlockSpec: ExtensionType[] = [
+  BlockViewExtension('affine:embed-html', model => {
+    return model.parent?.flavour === 'affine:surface'
+      ? literal`affine-embed-edgeless-html-block`
+      : literal`affine-embed-html-block`;
+  }),
+];

blocksuite/affine/block-embed/src/embed-html-block/index.ts

@@ -0,0 +1,7 @@
+export * from './embed-html-block.js';
+export * from './embed-html-spec.js';
+export {
+  EMBED_HTML_MIN_HEIGHT,
+  EMBED_HTML_MIN_WIDTH,
+  HtmlIcon,
+} from './styles.js';

blocksuite/affine/block-embed/src/embed-html-block/styles.ts

@@ -0,0 +1,150 @@
+import { css, html } from 'lit';
+
+export const EMBED_HTML_MIN_WIDTH = 370;
+export const EMBED_HTML_MIN_HEIGHT = 80;
+
+export const styles = css`
+  .affine-embed-html-block {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    padding: 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+
+    border-radius: 12px;
+    border: 1px solid var(--affine-background-tertiary-color);
+
+    opacity: var(--add, 1);
+    background: var(--affine-background-primary-color);
+    user-select: none;
+  }
+
+  .affine-embed-html {
+    flex-grow: 1;
+    width: 100%;
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-html img,
+  .affine-embed-html object,
+  .affine-embed-html svg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px 4px var(--1, 0px) var(--1, 0px);
+  }
+
+  .affine-embed-html-iframe-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px 4px 0px 0px;
+    box-shadow: var(--affine-shadow-1);
+    overflow: hidden;
+  }
+
+  .embed-html-block-iframe-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .embed-html-block-iframe-wrapper > iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+
+  .embed-html-block-iframe-wrapper affine-menu {
+    min-width: 296px;
+  }
+
+  .embed-html-block-iframe-wrapper affine-menu .settings-header {
+    padding: 7px 12px;
+    font-weight: 500;
+    font-size: var(--affine-font-xs);
+    color: var(--affine-text-secondary-color);
+  }
+
+  .embed-html-block-iframe-wrapper > embed-html-fullscreen-toolbar {
+    visibility: hidden;
+  }
+
+  .embed-html-block-iframe-wrapper:fullscreen > embed-html-fullscreen-toolbar {
+    visibility: visible;
+  }
+
+  .affine-embed-html-iframe-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .affine-embed-html-iframe-overlay.hide {
+    display: none;
+  }
+
+  .affine-embed-html-title {
+    height: fit-content;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    padding: var(--1, 0px);
+    border-radius: var(--1, 0px);
+    opacity: var(--add, 1);
+  }
+
+  .affine-embed-html-title-icon {
+    display: flex;
+    width: 20px;
+    height: 20px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .affine-embed-html-title-icon img,
+  .affine-embed-html-title-icon object,
+  .affine-embed-html-title-icon svg {
+    width: 20px;
+    height: 20px;
+    fill: var(--affine-background-primary-color);
+  }
+
+  .affine-embed-html-title-text {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--affine-text-primary-color);
+
+    font-family: var(--affine-font-family);
+    font-size: var(--affine-font-sm);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px;
+  }
+`;
+
+export const HtmlIcon = html`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M6.66667 1.875C5.40101 1.875 4.375 2.90101 4.375 4.16667V6.66667C4.375 7.01184 4.65482 7.29167 5 7.29167C5.34518 7.29167 5.625 7.01184 5.625 6.66667V4.16667C5.625 3.59137 6.09137 3.125 6.66667 3.125H12.9349C13.2563 3.125 13.5598 3.27341 13.7571 3.52714L15.8222 6.18232C15.9645 6.36517 16.0417 6.5902 16.0417 6.82185V15C16.0417 15.5753 15.5753 16.0417 15 16.0417H6.66667C6.09137 16.0417 5.625 15.5753 5.625 15V13.75C5.625 13.4048 5.34518 13.125 5 13.125C4.65482 13.125 4.375 13.4048 4.375 13.75V15C4.375 16.2657 5.40101 17.2917 6.66667 17.2917H15C16.2657 17.2917 17.2917 16.2657 17.2917 15V6.82185C17.2917 6.31223 17.1218 5.81716 16.8089 5.4149L14.7438 2.75972C14.3096 2.2015 13.642 1.875 12.9349 1.875H6.66667ZM2.30713 11.4758C2.30713 11.7936 2.47945 11.9727 2.78158 11.9727C3.0837 11.9727 3.25602 11.7936 3.25602 11.4758V10.6679H4.3929V11.4758C4.3929 11.7936 4.56523 11.9727 4.86735 11.9727C5.16947 11.9727 5.3418 11.7936 5.3418 11.4758V9.12821C5.3418 8.81043 5.16947 8.63139 4.86735 8.63139C4.56523 8.63139 4.3929 8.81043 4.3929 9.12821V9.91374H3.25602V9.12821C3.25602 8.81043 3.0837 8.63139 2.78158 8.63139C2.47945 8.63139 2.30713 8.81043 2.30713 9.12821V11.4758ZM6.51672 11.4758C6.51672 11.7936 6.68905 11.9727 6.99117 11.9727C7.29329 11.9727 7.46562 11.7936 7.46562 11.4758V9.44377H7.9423C8.19295 9.44377 8.3608 9.30725 8.3608 9.06555C8.3608 8.82385 8.19743 8.68734 7.9423 8.68734H6.04004C5.78491 8.68734 5.62154 8.82385 5.62154 9.06555C5.62154 9.30725 5.78939 9.44377 6.04004 9.44377H6.51672V11.4758ZM9.05457 11.9727C8.79049 11.9727 8.64054 11.8138 8.64054 11.534V9.25354C8.64054 8.85518 8.85986 8.63139 9.25598 8.63139C9.58944 8.63139 9.76624 8.76343 9.90051 9.11479L10.46 10.5717H10.4779L11.0352 9.11479C11.1694 8.76343 11.3462 8.63139 11.6797 8.63139C12.0758 8.63139 12.2951 8.85518 12.2951 9.25354V11.534C12.2951 11.8138 12.1452 11.9727 11.8811 11.9727C11.617 11.9727 11.4671 11.8138 11.4671 11.534V10.0458H11.4492L10.8069 11.6638C10.742 11.8272 10.639 11.901 10.4712 11.901C10.3011 11.901 10.1914 11.825 10.1288 11.6638L9.48649 10.0458H9.46859V11.534C9.46859 11.8138 9.31864 11.9727 9.05457 11.9727ZM12.745 11.4199C12.745 11.7377 12.9173 11.9167 13.2194 11.9167H14.5868C14.8419 11.9167 15.0053 11.7802 15.0053 11.5385C15.0053 11.2968 14.8374 11.1603 14.5868 11.1603H13.6938V9.12821C13.6938 8.81043 13.5215 8.63139 13.2194 8.63139C12.9173 8.63139 12.745 8.81043 12.745 9.12821V11.4199Z"
+    fill="#77757D"
+  />
+</svg> `;

blocksuite/affine/block-embed/src/embed-linked-doc-block/adapters/html.ts

@@ -0,0 +1,64 @@
+import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockHtmlAdapterExtension,
+  type BlockHtmlAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+import { generateDocUrl } from '../../common/adapters/utils.js';
+
+export const embedLinkedDocBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
+  flavour: EmbedLinkedDocBlockSchema.model.flavour,
+  toMatch: () => false,
+  fromMatch: o => o.node.flavour === EmbedLinkedDocBlockSchema.model.flavour,
+  toBlockSnapshot: {},
+  fromBlockSnapshot: {
+    enter: (o, context) => {
+      const { configs, walkerContext } = context;
+      // Parse as link
+      if (!o.node.props.pageId) {
+        return;
+      }
+      const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
+      const url = generateDocUrl(
+        configs.get('docLinkBaseUrl') ?? '',
+        String(o.node.props.pageId),
+        o.node.props.params ?? Object.create(null)
+      );
+
+      walkerContext
+        .openNode(
+          {
+            type: 'element',
+            tagName: 'div',
+            properties: {
+              className: ['affine-paragraph-block-container'],
+            },
+            children: [],
+          },
+          'children'
+        )
+        .openNode(
+          {
+            type: 'element',
+            tagName: 'a',
+            properties: {
+              href: url,
+            },
+            children: [
+              {
+                type: 'text',
+                value: title,
+              },
+            ],
+          },
+          'children'
+        )
+        .closeNode()
+        .closeNode();
+    },
+  },
+};
+
+export const EmbedLinkedDocHtmlAdapterExtension = BlockHtmlAdapterExtension(
+  embedLinkedDocBlockHtmlAdapterMatcher
+);

blocksuite/affine/block-embed/src/embed-linked-doc-block/adapters/index.ts

@@ -0,0 +1,3 @@
+export * from './html.js';
+export * from './markdown.js';
+export * from './plain-text.js';

blocksuite/affine/block-embed/src/embed-linked-doc-block/adapters/markdown.ts

@@ -0,0 +1,57 @@
+import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockMarkdownAdapterExtension,
+  type BlockMarkdownAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+import { generateDocUrl } from '../../common/adapters/utils.js';
+
+export const embedLinkedDocBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
+  {
+    flavour: EmbedLinkedDocBlockSchema.model.flavour,
+    toMatch: () => false,
+    fromMatch: o => o.node.flavour === EmbedLinkedDocBlockSchema.model.flavour,
+    toBlockSnapshot: {},
+    fromBlockSnapshot: {
+      enter: (o, context) => {
+        const { configs, walkerContext } = context;
+        // Parse as link
+        if (!o.node.props.pageId) {
+          return;
+        }
+        const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
+        const url = generateDocUrl(
+          configs.get('docLinkBaseUrl') ?? '',
+          String(o.node.props.pageId),
+          o.node.props.params ?? Object.create(null)
+        );
+        walkerContext
+          .openNode(
+            {
+              type: 'paragraph',
+              children: [],
+            },
+            'children'
+          )
+          .openNode(
+            {
+              type: 'link',
+              url,
+              title: o.node.props.caption as string | null,
+              children: [
+                {
+                  type: 'text',
+                  value: title,
+                },
+              ],
+            },
+            'children'
+          )
+          .closeNode()
+          .closeNode();
+      },
+    },
+  };
+
+export const EmbedLinkedDocMarkdownAdapterExtension =
+  BlockMarkdownAdapterExtension(embedLinkedDocBlockMarkdownAdapterMatcher);

blocksuite/affine/block-embed/src/embed-linked-doc-block/adapters/plain-text.ts

@@ -0,0 +1,34 @@
+import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
+import {
+  BlockPlainTextAdapterExtension,
+  type BlockPlainTextAdapterMatcher,
+} from '@blocksuite/affine-shared/adapters';
+
+import { generateDocUrl } from '../../common/adapters/utils.js';
+
+export const embedLinkedDocBlockPlainTextAdapterMatcher: BlockPlainTextAdapterMatcher =
+  {
+    flavour: EmbedLinkedDocBlockSchema.model.flavour,
+    toMatch: () => false,
+    fromMatch: o => o.node.flavour === EmbedLinkedDocBlockSchema.model.flavour,
+    toBlockSnapshot: {},
+    fromBlockSnapshot: {
+      enter: (o, context) => {
+        const { configs, textBuffer } = context;
+        // Parse as link
+        if (!o.node.props.pageId) {
+          return;
+        }
+        const title = configs.get('title:' + o.node.props.pageId) ?? 'untitled';
+        const url = generateDocUrl(
+          configs.get('docLinkBaseUrl') ?? '',
+          String(o.node.props.pageId),
+          o.node.props.params ?? Object.create(null)
+        );
+        textBuffer.content += `${title}: ${url}\n`;
+      },
+    },
+  };
+
+export const EmbedLinkedDocBlockPlainTextAdapterExtension =
+  BlockPlainTextAdapterExtension(embedLinkedDocBlockPlainTextAdapterMatcher);

blocksuite/affine/block-embed/src/embed-linked-doc-block/commands/index.ts

@@ -0,0 +1,9 @@
+import type { BlockCommands } from '@blocksuite/block-std';
+
+import { insertEmbedLinkedDocCommand } from './insert-embed-linked-doc.js';
+import { insertLinkByQuickSearchCommand } from './insert-link-by-quick-search.js';
+
+export const commands: BlockCommands = {
+  insertEmbedLinkedDoc: insertEmbedLinkedDocCommand,
+  insertLinkByQuickSearch: insertLinkByQuickSearchCommand,
+};

blocksuite/affine/block-embed/src/embed-linked-doc-block/commands/insert-embed-linked-doc.ts

@@ -0,0 +1,21 @@
+import type { EmbedCardStyle, ReferenceParams } from '@blocksuite/affine-model';
+import type { Command } from '@blocksuite/block-std';
+
+import { insertEmbedCard } from '../../common/insert-embed-card.js';
+
+export const insertEmbedLinkedDocCommand: Command<
+  never,
+  'insertedLinkType',
+  {
+    docId: string;
+    params?: ReferenceParams;
+  }
+> = (ctx, next) => {
+  const { docId, params, std } = ctx;
+  const flavour = 'affine:embed-linked-doc';
+  const targetStyle: EmbedCardStyle = 'vertical';
+  const props: Record<string, unknown> = { pageId: docId };
+  if (params) props.params = params;
+  insertEmbedCard(std, { flavour, targetStyle, props });
+  next();
+};

blocksuite/affine/block-embed/src/embed-linked-doc-block/commands/insert-link-by-quick-search.ts

@@ -0,0 +1,48 @@
+import { QuickSearchProvider } from '@blocksuite/affine-shared/services';
+import type { Command } from '@blocksuite/block-std';
+
+export type InsertedLinkType = {
+  flavour?: 'affine:bookmark' | 'affine:embed-linked-doc';
+} | null;
+
+export const insertLinkByQuickSearchCommand: Command<
+  never,
+  'insertedLinkType'
+> = (ctx, next) => {
+  const { std } = ctx;
+  const quickSearchService = std.getOptional(QuickSearchProvider);
+  if (!quickSearchService) {
+    next();
+    return;
+  }
+
+  const insertedLinkType: Promise<InsertedLinkType> = quickSearchService
+    .openQuickSearch()
+    .then(result => {
+      if (!result) return null;
+
+      // add linked doc
+      if ('docId' in result) {
+        std.command.exec('insertEmbedLinkedDoc', {
+          docId: result.docId,
+          params: result.params,
+        });
+        return {
+          flavour: 'affine:embed-linked-doc',
+        };
+      }
+
+      // add normal link;
+      if ('externalUrl' in result) {
+        // @ts-expect-error TODO: fix after bookmark refactor
+        std.command.exec('insertBookmark', { url: result.externalUrl });
+        return {
+          flavour: 'affine:bookmark',
+        };
+      }
+
+      return null;
+    });
+
+  next({ insertedLinkType });
+};

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-edgeless-linked-doc-block.ts

@@ -0,0 +1,72 @@
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
+import { cloneReferenceInfoWithoutAliases } from '@blocksuite/affine-shared/utils';
+import { Bound } from '@blocksuite/global/utils';
+
+import { toEdgelessEmbedBlock } from '../common/to-edgeless-embed-block.js';
+import { EmbedLinkedDocBlockComponent } from './embed-linked-doc-block.js';
+
+export class EmbedEdgelessLinkedDocBlockComponent extends toEdgelessEmbedBlock(
+  EmbedLinkedDocBlockComponent
+) {
+  override convertToEmbed = () => {
+    const { id, doc, caption, xywh } = this.model;
+
+    // synced doc entry controlled by awareness flag
+    const isSyncedDocEnabled = doc.awarenessStore.getFlag(
+      'enable_synced_doc_block'
+    );
+    if (!isSyncedDocEnabled) {
+      return;
+    }
+
+    const style = 'syncedDoc';
+    const bound = Bound.deserialize(xywh);
+    bound.w = EMBED_CARD_WIDTH[style];
+    bound.h = EMBED_CARD_HEIGHT[style];
+
+    const edgelessService = this.rootService;
+
+    if (!edgelessService) {
+      return;
+    }
+
+    // @ts-expect-error TODO: fix after edgeless refactor
+    const newId = edgelessService.addBlock(
+      'affine:embed-synced-doc',
+      {
+        xywh: bound.serialize(),
+        caption,
+        ...cloneReferenceInfoWithoutAliases(this.referenceInfo$.peek()),
+      },
+      // @ts-expect-error TODO: fix after edgeless refactor
+      edgelessService.surface
+    );
+
+    this.std.command.exec('reassociateConnectors', {
+      oldId: id,
+      newId,
+    });
+
+    // @ts-expect-error TODO: fix after edgeless refactor
+    edgelessService.selection.set({
+      editing: false,
+      elements: [newId],
+    });
+
+    doc.deleteBlock(this.model);
+  };
+
+  get rootService() {
+    return this.std.getService('affine:page');
+  }
+
+  protected override _handleClick(evt: MouseEvent): void {
+    if (this.config.handleClick) {
+      this.config.handleClick(evt, this.host, this.referenceInfo$.peek());
+      return;
+    }
+  }
+}

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-linked-doc-block.ts

@@ -0,0 +1,557 @@
+import { isPeekable, Peekable } from '@blocksuite/affine-components/peek';
+import {
+  REFERENCE_NODE,
+  RefNodeSlotsProvider,
+} from '@blocksuite/affine-components/rich-text';
+import type {
+  DocMode,
+  EmbedLinkedDocModel,
+  EmbedLinkedDocStyles,
+} from '@blocksuite/affine-model';
+import {
+  EMBED_CARD_HEIGHT,
+  EMBED_CARD_WIDTH,
+} from '@blocksuite/affine-shared/consts';
+import {
+  DocDisplayMetaProvider,
+  DocModeProvider,
+  ThemeProvider,
+} from '@blocksuite/affine-shared/services';
+import {
+  cloneReferenceInfo,
+  cloneReferenceInfoWithoutAliases,
+  matchFlavours,
+  referenceToNode,
+} from '@blocksuite/affine-shared/utils';
+import { Bound } from '@blocksuite/global/utils';
+import { DocCollection } from '@blocksuite/store';
+import { computed } from '@preact/signals-core';
+import { html, nothing } from 'lit';
+import { property, queryAsync, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { when } from 'lit/directives/when.js';
+
+import { EmbedBlockComponent } from '../common/embed-block-element.js';
+import { renderLinkedDocInCard } from '../common/render-linked-doc.js';
+import { SyncedDocErrorIcon } from '../embed-synced-doc-block/styles.js';
+import {
+  type EmbedLinkedDocBlockConfig,
+  EmbedLinkedDocBlockConfigIdentifier,
+} from './embed-linked-doc-config.js';
+import { styles } from './styles.js';
+import { getEmbedLinkedDocIcons } from './utils.js';
+
+@Peekable({
+  enableOn: ({ doc }: EmbedLinkedDocBlockComponent) => !doc.readonly,
+})
+export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinkedDocModel> {
+  static override styles = styles;
+
+  private _load = async () => {
+    const {
+      loading = true,
+      isError = false,
+      isBannerEmpty = true,
+      isNoteContentEmpty = true,
+    } = this.getInitialState();
+
+    this._loading = loading;
+    this.isError = isError;
+    this.isBannerEmpty = isBannerEmpty;
+    this.isNoteContentEmpty = isNoteContentEmpty;
+
+    if (!this._loading) {
+      return;
+    }
+
+    const linkedDoc = this.linkedDoc;
+    if (!linkedDoc) {
+      this._loading = false;
+      return;
+    }
+
+    if (!linkedDoc.loaded) {
+      try {
+        linkedDoc.load();
+      } catch (e) {
+        console.error(e);
+        this.isError = true;
+      }
+    }
+
+    if (!this.isError && !linkedDoc.root) {
+      await new Promise<void>(resolve => {
+        linkedDoc.slots.rootAdded.once(() => {
+          resolve();
+        });
+      });
+    }
+
+    this._loading = false;
+
+    // If it is a link to a block or element, the content will not be rendered.
+    if (this._referenceToNode) {
+      return;
+    }
+
+    if (!this.isError) {
+      const cardStyle = this.model.style;
+      if (cardStyle === 'horizontal' || cardStyle === 'vertical') {
+        renderLinkedDocInCard(this);
+      }
+    }
+  };
+
+  private _selectBlock = () => {
+    const selectionManager = this.host.selection;
+    const blockSelection = selectionManager.create('block', {
+      blockId: this.blockId,
+    });
+    selectionManager.setGroup('note', [blockSelection]);
+  };
+
+  private _setDocUpdatedAt = () => {
+    const meta = this.doc.collection.meta.getDocMeta(this.model.pageId);
+    if (meta) {
+      const date = meta.updatedDate || meta.createDate;
+      this._docUpdatedAt = new Date(date);
+    }
+  };
+
+  override _cardStyle: (typeof EmbedLinkedDocStyles)[number] = 'horizontal';
+
+  convertToEmbed = () => {
+    if (this._referenceToNode) return;
+
+    const { doc, caption } = this.model;
+
+    // synced doc entry controlled by awareness flag
+    const isSyncedDocEnabled = doc.awarenessStore.getFlag(
+      'enable_synced_doc_block'
+    );
+    if (!isSyncedDocEnabled) {
+      return;
+    }
+
+    const parent = doc.getParent(this.model);
+    if (!parent) {
+      return;
+    }
+    const index = parent.children.indexOf(this.model);
+
+    doc.addBlock(
+      'affine:embed-synced-doc',
+      {
+        caption,
+        ...cloneReferenceInfoWithoutAliases(this.referenceInfo$.peek()),
+      },
+      parent,
+      index
+    );
+
+    this.std.selection.setGroup('note', []);
+    doc.deleteBlock(this.model);
+  };
+
+  covertToInline = () => {
+    const { doc } = this.model;
+    const parent = doc.getParent(this.model);
+    if (!parent) {
+      return;
+    }
+    const index = parent.children.indexOf(this.model);
+
+    const yText = new DocCollection.Y.Text();
+    yText.insert(0, REFERENCE_NODE);
+    yText.format(0, REFERENCE_NODE.length, {
+      reference: {
+        type: 'LinkedPage',
+        ...this.referenceInfo$.peek(),
+      },
+    });
+    const text = new doc.Text(yText);
+
+    doc.addBlock(
+      'affine:paragraph',
+      {
+        text,
+      },
+      parent,
+      index
+    );
+
+    doc.deleteBlock(this.model);
+  };
+
+  referenceInfo$ = computed(() => {
+    const { pageId, params, title$, description$ } = this.model;
+    return cloneReferenceInfo({
+      pageId,
+      params,
+      title: title$.value,
+      description: description$.value,
+    });
+  });
+
+  icon$ = computed(() => {
+    const { pageId, params, title } = this.referenceInfo$.value;
+    return this.std
+      .get(DocDisplayMetaProvider)
+      .icon(pageId, { params, title, referenced: true }).value;
+  });
+
+  open = () => {
+    this.std
+      .getOptional(RefNodeSlotsProvider)
+      ?.docLinkClicked.emit(this.referenceInfo$.peek());
+  };
+
+  refreshData = () => {
+    this._load().catch(e => {
+      console.error(e);
+      this.isError = true;
+    });
+  };
+
+  title$ = computed(() => {
+    const { pageId, params, title } = this.referenceInfo$.value;
+    return (
+      title ||
+      this.std
+        .get(DocDisplayMetaProvider)
+        .title(pageId, { params, title, referenced: true })
+    );
+  });
+
+  get config(): EmbedLinkedDocBlockConfig {
+    return (
+      this.std.provider.getOptional(EmbedLinkedDocBlockConfigIdentifier) || {}
+    );
+  }
+
+  get docTitle() {
+    return this.model.title || this.linkedDoc?.meta?.title || 'Untitled';
+  }
+
+  get editorMode() {
+    return this._linkedDocMode;
+  }
+
+  get linkedDoc() {
+    return this.std.collection.getDoc(this.model.pageId);
+  }
+
+  private _handleDoubleClick(event: MouseEvent) {
+    if (this.config.handleDoubleClick) {
+      this.config.handleDoubleClick(
+        event,
+        this.host,
+        this.referenceInfo$.peek()
+      );
+      if (event.defaultPrevented) {
+        return;
+      }
+    }
+
+    if (isPeekable(this)) {
+      return;
+    }
+    event.stopPropagation();
+    this.open();
+  }
+
+  private _isDocEmpty() {
+    const linkedDoc = this.linkedDoc;
+    if (!linkedDoc) {
+      return false;
+    }
+    return !!linkedDoc && this.isNoteContentEmpty && this.isBannerEmpty;
+  }
+
+  protected _handleClick(event: MouseEvent) {
+    if (this.config.handleClick) {
+      this.config.handleClick(event, this.host, this.referenceInfo$.peek());
+      if (event.defaultPrevented) {
+        return;
+      }
+    }
+
+    this._selectBlock();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    this._cardStyle = this.model.style;
+    this._referenceToNode = referenceToNode(this.model);
+
+    this._load().catch(e => {
+      console.error(e);
+      this.isError = true;
+    });
+
+    const linkedDoc = this.linkedDoc;
+    if (linkedDoc) {
+      this.disposables.add(
+        linkedDoc.collection.meta.docMetaUpdated.on(() => {
+          this._load().catch(e => {
+            console.error(e);
+            this.isError = true;
+          });
+        })
+      );
+      this.disposables.add(
+        linkedDoc.slots.blockUpdated.on(payload => {
+          if (
+            payload.type === 'update' &&
+            ['', 'caption', 'xywh'].includes(payload.props.key)
+          ) {
+            return;
+          }
+
+          if (payload.type === 'add' && payload.init) {
+            return;
+          }
+
+          this._load().catch(e => {
+            console.error(e);
+            this.isError = true;
+          });
+        })
+      );
+
+      this._setDocUpdatedAt();
+      this.disposables.add(
+        this.doc.collection.meta.docMetaUpdated.on(() => {
+          this._setDocUpdatedAt();
+        })
+      );
+
+      if (this._referenceToNode) {
+        this._linkedDocMode = this.model.params?.mode ?? 'page';
+      } else {
+        const docMode = this.std.get(DocModeProvider);
+        this._linkedDocMode = docMode.getPrimaryMode(this.model.pageId);
+        this.disposables.add(
+          docMode.onPrimaryModeChange(mode => {
+            this._linkedDocMode = mode;
+          }, this.model.pageId)
+        );
+      }
+    }
+
+    this.disposables.add(
+      this.model.propsUpdated.on(({ key }) => {
+        if (key === 'style') {
+          this._cardStyle = this.model.style;
+        }
+        if (key === 'pageId' || key === 'style') {
+          this._load().catch(e => {
+            console.error(e);
+            this.isError = true;
+          });
+        }
+      })
+    );
+  }
+
+  getInitialState(): {
+    loading?: boolean;
+    isError?: boolean;
+    isNoteContentEmpty?: boolean;
+    isBannerEmpty?: boolean;
+  } {
+    return {};
+  }
+
+  override renderBlock() {
+    const linkedDoc = this.linkedDoc;
+    const isDeleted = !linkedDoc;
+    const isLoading = this._loading;
+    const isError = this.isError;
+    const isEmpty = this._isDocEmpty() && this.isBannerEmpty;
+    const inCanvas = matchFlavours(this.model.parent, ['affine:surface']);
+
+    const cardClassMap = classMap({
+      loading: isLoading,
+      error: isError,
+      deleted: isDeleted,
+      empty: isEmpty,
+      'banner-empty': this.isBannerEmpty,
+      'note-empty': this.isNoteContentEmpty,
+      'in-canvas': inCanvas,
+      [this._cardStyle]: true,
+    });
+
+    const theme = this.std.get(ThemeProvider).theme;
+    const {
+      LoadingIcon,
+      ReloadIcon,
+      LinkedDocDeletedBanner,
+      LinkedDocEmptyBanner,
+      SyncedDocErrorBanner,
+    } = getEmbedLinkedDocIcons(theme, this._linkedDocMode, this._cardStyle);
+
+    const icon = isError
+      ? SyncedDocErrorIcon
+      : isLoading
+        ? LoadingIcon
+        : this.icon$.value;
+    const title = isLoading ? 'Loading...' : this.title$;
+    const description = this.model.description$;
+
+    const showDefaultNoteContent = isError || isLoading || isDeleted || isEmpty;
+    const defaultNoteContent = isError
+      ? 'This linked doc failed to load.'
+      : isLoading
+        ? ''
+        : isDeleted
+          ? 'This linked doc is deleted.'
+          : isEmpty
+            ? 'Preview of the doc will be displayed here.'
+            : '';
+
+    const dateText =
+      this._cardStyle === 'cube'
+        ? this._docUpdatedAt.toLocaleTimeString()
+        : this._docUpdatedAt.toLocaleString();
+
+    const showDefaultBanner = isError || isLoading || isDeleted || isEmpty;
+
+    const defaultBanner = isError
+      ? SyncedDocErrorBanner
+      : isLoading
+        ? LinkedDocEmptyBanner
+        : isDeleted
+          ? LinkedDocDeletedBanner
+          : LinkedDocEmptyBanner;
+
+    const hasDescriptionAlias = Boolean(description.value);
+
+    return this.renderEmbed(
+      () => html`
+        <div
+          class="affine-embed-linked-doc-block ${cardClassMap}"
+          style=${styleMap({
+            transform: `scale(${this._scale})`,
+            transformOrigin: '0 0',
+          })}
+          @click=${this._handleClick}
+          @dblclick=${this._handleDoubleClick}
+        >
+          <div class="affine-embed-linked-doc-content">
+            <div class="affine-embed-linked-doc-content-title">
+              <div class="affine-embed-linked-doc-content-title-icon">
+                ${icon}
+              </div>
+
+              <div class="affine-embed-linked-doc-content-title-text">
+                ${title}
+              </div>
+            </div>
+
+            ${when(
+              hasDescriptionAlias,
+              () =>
+                html`<div class="affine-embed-linked-doc-content-note alias">
+                  ${description}
+                </div>`,
+              () =>
+                when(
+                  showDefaultNoteContent,
+                  () => html`
+                    <div class="affine-embed-linked-doc-content-note default">
+                      ${defaultNoteContent}
+                    </div>
+                  `,
+                  () => html`
+                    <div
+                      class="affine-embed-linked-doc-content-note render"
+                    ></div>
+                  `
+                )
+            )}
+            ${isError
+              ? html`
+                  <div class="affine-embed-linked-doc-card-content-reload">
+                    <div
+                      class="affine-embed-linked-doc-card-content-reload-button"
+                      @click=${this.refreshData}
+                    >
+                      ${ReloadIcon} <span>Reload</span>
+                    </div>
+                  </div>
+                `
+              : html`
+                  <div class="affine-embed-linked-doc-content-date">
+                    <span>Updated</span>
+
+                    <span>${dateText}</span>
+                  </div>
+                `}
+          </div>
+
+          ${showDefaultBanner
+            ? html`
+                <div class="affine-embed-linked-doc-banner default">
+                  ${defaultBanner}
+                </div>
+              `
+            : nothing}
+        </div>
+      `
+    );
+  }
+
+  override updated() {
+    // update card style when linked doc deleted
+    const linkedDoc = this.linkedDoc;
+    const { xywh, style } = this.model;
+    const bound = Bound.deserialize(xywh);
+    if (linkedDoc && style === 'horizontalThin') {
+      bound.w = EMBED_CARD_WIDTH.horizontal;
+      bound.h = EMBED_CARD_HEIGHT.horizontal;
+      this.doc.withoutTransact(() => {
+        this.doc.updateBlock(this.model, {
+          xywh: bound.serialize(),
+          style: 'horizontal',
+        });
+      });
+    } else if (!linkedDoc && style === 'horizontal') {
+      bound.w = EMBED_CARD_WIDTH.horizontalThin;
+      bound.h = EMBED_CARD_HEIGHT.horizontalThin;
+      this.doc.withoutTransact(() => {
+        this.doc.updateBlock(this.model, {
+          xywh: bound.serialize(),
+          style: 'horizontalThin',
+        });
+      });
+    }
+  }
+
+  @state()
+  private accessor _docUpdatedAt: Date = new Date();
+
+  @state()
+  private accessor _linkedDocMode: DocMode = 'page';
+
+  @state()
+  private accessor _loading = false;
+
+  // reference to block/element
+  @state()
+  private accessor _referenceToNode = false;
+
+  @property({ attribute: false })
+  accessor isBannerEmpty = false;
+
+  @property({ attribute: false })
+  accessor isError = false;
+
+  @property({ attribute: false })
+  accessor isNoteContentEmpty = false;
+
+  @queryAsync('.affine-embed-linked-doc-content-note.render')
+  accessor noteContainer!: Promise<HTMLDivElement | null>;
+}