chore(server): ignore unknown config module (#11926 )

fix(server): config defaults (#11879 )
feat(core): replace onboarding template (#11874 )
2026-02-04 16:44:56 +00:00 · 2025-05-29 10:20:37 +08:00 · 2025-05-29 10:20:26 +08:00 · 2025-04-30 11:37:25 +08:00 · 2025-04-30 11:37:18 +08:00 · 2025-04-29 15:52:37 +08:00
687 changed files with 17348 additions and 12510 deletions
--- a/.cargo/config.toml
+++ b/.cargo/config.toml
@@ -5,7 +5,7 @@ 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", "-C", "link-args=-weak_framework ScreenCaptureKit"]
+rustflags = ["-C", "link-args=-Wl,-undefined,dynamic_lookup,-no_fixup_chains", "-C", "link-args=-all_load", "-C", "link-args=-weak_framework ScreenCaptureKit"]
 # https://sourceware.org/bugzilla/show_bug.cgi?id=21032
 # https://sourceware.org/bugzilla/show_bug.cgi?id=21031
 # https://github.com/rust-lang/rust/issues/134820
--- a/.devcontainer/Dockerfile
+++ b/.devcontainer/Dockerfile
@@ -1,10 +0,0 @@
-FROM mcr.microsoft.com/devcontainers/base:bookworm
-
-USER vscode
-# Install Homebrew For Linux
-RUN /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" && \
-    eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)" && \
-    echo "eval \"\$($(brew --prefix)/bin/brew shellenv)\"" >> /home/vscode/.zshrc && \
-    echo "eval \"\$($(brew --prefix)/bin/brew shellenv)\"" >> /home/vscode/.bashrc && \
-    # Install Graphite
-    brew install withgraphite/tap/graphite && gt --version
--- a/.devcontainer/build.sh
+++ b/.devcontainer/build.sh
@@ -1,10 +1,6 @@
 #!/bin/bash
 # This is a script used by the devcontainer to build the project

-#Enable yarn
-corepack enable
-corepack prepare yarn@stable --activate
-
 # install dependencies
 yarn install

--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,12 +1,16 @@
 // For format details, see https://aka.ms/devcontainer.json.
 {
-  "name": "Debian",
+  "name": "AFFiNE Dev Container",
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}",
+  "containerEnv": {
+    "COREPACK_ENABLE_DOWNLOAD_PROMPT": "0"
+  },
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
-      "version": "22"
+      "version": "lts",
+      "installYarnUsingApt": false
    },
    "ghcr.io/devcontainers/features/rust:1": {}
  },
@@ -16,7 +20,7 @@
      "extensions": [
        "ms-playwright.playwright",
        "esbenp.prettier-vscode",
-        "streetsidesoftware.code-spell-checker"
+        "dbaeumer.vscode-eslint"
      ]
    }
  },
--- a/.devcontainer/docker-compose.yml
+++ b/.devcontainer/docker-compose.yml
@@ -2,9 +2,7 @@ version: '3.8'

 services:
  app:
-    build:
-      context: .
-      dockerfile: Dockerfile
+    image: mcr.microsoft.com/devcontainers/base:bookworm
    volumes:
      - ../..:/workspaces:cached
    command: sleep infinity
@@ -24,8 +22,6 @@ services:
      POSTGRES_DB: affine
  redis:
    image: redis
-    ports:
-      - 6379:6379

 volumes:
  postgres-data:
--- a/.devcontainer/setup-user.sh
+++ b/.devcontainer/setup-user.sh
@@ -1,9 +1,9 @@
 set -e

+npm install -g @withgraphite/graphite-cli@stable
+
 if [ -v GRAPHITE_TOKEN ];then
    gt auth --token $GRAPHITE_TOKEN
 fi

-git fetch origin canary:canary --depth=1
-git branch canary -t origin/canary
 gt init --trunk canary
--- a/.docker/selfhost/compose.yml
+++ b/.docker/selfhost/compose.yml
@@ -44,7 +44,7 @@ services:

  redis:
    image: redis
-    container_name: redis
+    container_name: affine_redis
    healthcheck:
      test: ['CMD', 'redis-cli', '--raw', 'incr', 'ping']
      interval: 10s
@@ -54,7 +54,7 @@ services:

  postgres:
    image: postgres:16
-    container_name: postgres
+    container_name: affine_postgres
    volumes:
      - ${DB_DATA_LOCATION}:/var/lib/postgresql/data
    environment:
--- a/.docker/selfhost/schema.json
+++ b/.docker/selfhost/schema.json
@@ -200,11 +200,6 @@
      "type": "object",
      "description": "Configuration for mailer module",
      "properties": {
-        "enabled": {
-          "type": "boolean",
-          "description": "Whether enabled mail service.\n@default false",
-          "default": false
-        },
        "SMTP.host": {
          "type": "string",
          "description": "Host of the email server (e.g. smtp.gmail.com)\n@default \"\"\n@environment `MAILER_HOST`",
@@ -512,8 +507,7 @@
      "properties": {
        "name": {
          "type": "string",
-          "description": "A recognizable name for the server. Will be shown when connected with AFFiNE Desktop.\n@default \"AFFiNE Cloud\"",
-          "default": "AFFiNE Cloud"
+          "description": "A recognizable name for the server. Will be shown when connected with AFFiNE Desktop.\n@default undefined"
        },
        "externalUrl": {
          "type": "string",
@@ -537,7 +531,7 @@
        },
        "path": {
          "type": "string",
-          "description": "Subpath where the server get deployed if there is.\n@default \"\"\n@environment `AFFINE_SERVER_SUB_PATH`",
+          "description": "Subpath where the server get deployed if there is one.(e.g. /affine)\n@default \"\"\n@environment `AFFINE_SERVER_SUB_PATH`",
          "default": ""
        }
      }
--- a/.github/workflows/build-test.yml
+++ b/.github/workflows/build-test.yml
@@ -218,7 +218,43 @@ jobs:
        if: always()
        uses: actions/upload-artifact@v4
        with:
-          name: test-results-e2e-legacy-bs-${{ matrix.shard }}
+          name: test-results-e2e-bs-${{ matrix.shard }}
+          path: ./test-results
+          if-no-files-found: ignore
+
+  e2e-blocksuite-cross-browser-test:
+    name: E2E BlockSuite Cross Browser Test
+    runs-on: ubuntu-latest
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2]
+        browser: ['chromium', 'firefox', 'webkit']
+    steps:
+      - uses: actions/checkout@v4
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+        with:
+          playwright-install: true
+          playwright-platform: ${{ matrix.browser }}
+          electron-install: false
+          full-cache: true
+
+      - name: Run playground build
+        run: yarn workspace @blocksuite/playground build
+
+      - name: Run playwright tests
+        env:
+          BROWSER: ${{ matrix.browser }}
+        run: yarn workspace @affine-test/blocksuite test "cross-platform/" --forbid-only --shard=${{ matrix.shard }}/${{ strategy.job-total }}
+
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-results-e2e-bs-cross-browser-${{ matrix.browser }}-${{ matrix.shard }}
          path: ./test-results
          if-no-files-found: ignore

@@ -752,8 +788,8 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        shardIndex: [1, 2, 3]
-        shardTotal: [3]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
    needs:
      - build-server-native
    services:
@@ -791,6 +827,8 @@ jobs:
        with:
          filters: |
            changed:
+              - 'packages/backend/server/src/plugins/copilot/**'
+              - 'packages/backend/server/tests/copilot.*'
              - 'packages/frontend/core/src/blocksuite/ai/**'
              - 'tests/affine-cloud-copilot/**'

@@ -1139,6 +1177,7 @@ jobs:
      - check-yarn-binary
      - e2e-test
      - e2e-blocksuite-test
+      - e2e-blocksuite-cross-browser-test
      - e2e-mobile-test
      - unit-test
      - build-native
--- a/.github/workflows/copilot-test.yml
+++ b/.github/workflows/copilot-test.yml
@@ -108,8 +108,8 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        shardIndex: [1, 2, 3]
-        shardTotal: [3]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
+        shardTotal: [8]
    needs:
      - build-server-native
    services:
--- a/.gitignore
+++ b/.gitignore
@@ -85,3 +85,6 @@ packages/frontend/core/public/static/templates
 af
 af.cmd
 *.resolved
+
+# playwright
+storageState.json
--- a/.vscode/launch.template.json
+++ b/.vscode/launch.template.json
@@ -29,10 +29,7 @@
      "type": "chrome",
      "request": "launch",
      "name": "Debug AFFiNE Web",
-      "url": "http://localhost:8080",
-      "sourceMapPathOverrides": {
-        "webpack://affine/blocksuite/*": "${workspaceFolder}/blocksuite/*"
-      }
+      "url": "http://localhost:8080"
    }
  ]
 }
--- a/.yarn/releases/yarn-4.8.1.cjs
+++ b/.yarn/releases/yarn-4.8.1.cjs
--- a/.yarn/releases/yarn-4.9.1.cjs
+++ b/.yarn/releases/yarn-4.9.1.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -12,4 +12,4 @@ npmPublishAccess: public

 npmPublishRegistry: "https://registry.npmjs.org"

-yarnPath: .yarn/releases/yarn-4.8.1.cjs
+yarnPath: .yarn/releases/yarn-4.9.1.cjs
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -79,6 +79,7 @@ dependencies = [
 "block2",
 "core-foundation",
 "coreaudio-rs",
+ "criterion2",
 "dispatch2",
 "libc",
 "napi",
@@ -286,9 +287,9 @@ dependencies = [

 [[package]]
 name = "anyhow"
-version = "1.0.97"
+version = "1.0.98"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dcfed56ad506cb2c684a14971b8861fdc3baaaae314b9e5f9bb532cbe3ba7a4f"
+checksum = "e16d2d3311acee920a9eb8d33b8cbc1787ce4a264e85f964c2404b969bdcd487"

 [[package]]
 name = "arbitrary"
@@ -513,9 +514,9 @@ checksum = "4848ed5727d39a7573551c205bcb1ccd88c8cad4ed2c80f62e2316f208196b8d"

 [[package]]
 name = "bstr"
-version = "1.11.3"
+version = "1.12.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "531a9155a481e2ee699d4f98f43c0ca4ff8ee1bfd55c31e9e98fb29d2b176fe0"
+checksum = "234113d19d0d7d613b40e86fb654acf958910802bcceab913a4f9e7cda03b1a4"
 dependencies = [
 "memchr",
 "regex-automata 0.4.9",
@@ -601,9 +602,9 @@ dependencies = [

 [[package]]
 name = "cc"
-version = "1.2.17"
+version = "1.2.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1fcb57c740ae1daf453ae85f16e37396f672b039e00d9d866e07ddb24e328e3a"
+checksum = "8e3a13707ac958681c13b39b458c073d0d9bc8a22cb1b2f4c8e55eb72c13f362"
 dependencies = [
 "shlex",
 ]
@@ -719,9 +720,9 @@ dependencies = [

 [[package]]
 name = "clap"
-version = "4.5.35"
+version = "4.5.36"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d8aa86934b44c19c50f87cc2790e19f54f7a67aedb64101c2e1a2e5ecfb73944"
+checksum = "2df961d8c8a0d08aa9945718ccf584145eee3f3aa06cddbeac12933781102e04"
 dependencies = [
 "clap_builder",
 "clap_derive",
@@ -729,9 +730,9 @@ dependencies = [

 [[package]]
 name = "clap_builder"
-version = "4.5.35"
+version = "4.5.36"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2414dbb2dd0695280da6ea9261e327479e9d37b0630f6b53ba2a11c60c679fd9"
+checksum = "132dbda40fb6753878316a489d5a1242a8ef2f0d9e47ba01c951ea8aa7d013a5"
 dependencies = [
 "anstream",
 "anstyle",
@@ -1207,9 +1208,9 @@ checksum = "877a4ace8713b0bcf2a4e7eec82529c029f1d0619886d18145fea96c3ffe5c0f"

 [[package]]
 name = "errno"
-version = "0.3.10"
+version = "0.3.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "33d852cb9b869c2a9b3df2f71a3074817f01e1844f839a144f5fcef059a4eb5d"
+checksum = "976dd42dc7e85965fe702eb8164f21f450704bdde31faefd6471dba214cb594e"
 dependencies = [
 "libc",
 "windows-sys 0.59.0",
@@ -1357,9 +1358,9 @@ dependencies = [

 [[package]]
 name = "four-char-code"
-version = "2.2.0"
+version = "2.3.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c661315fd366b2a1f970df7b7cb1a28d2678d49ef4872f7dcc19b4a83150f20b"
+checksum = "42da99970737c0150e3c5cd1cdc510735a2511739f5c3aa3c6bfc9f31441488d"

 [[package]]
 name = "fs-err"
@@ -1529,9 +1530,9 @@ dependencies = [

 [[package]]
 name = "half"
-version = "2.5.0"
+version = "2.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7db2ff139bba50379da6aa0766b52fdcb62cb5b263009b09ed58ba604e14bbd1"
+checksum = "459196ed295495a68f7d7fe1d84f6c4b7ff0e21fe3017b2f283c6fac3ad803c9"
 dependencies = [
 "cfg-if",
 "crunchy",
@@ -1844,9 +1845,9 @@ dependencies = [

 [[package]]
 name = "indexmap"
-version = "2.8.0"
+version = "2.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3954d50fe15b02142bf25d3b8bdadb634ec3948f103d04ffe3031bc8fe9d7058"
+checksum = "cea70ddb795996207ad57735b50c5982d8844f38ba9ee5f1aedcfb708a2aa11e"
 dependencies = [
 "equivalent",
 "hashbrown 0.15.2",
@@ -1975,9 +1976,9 @@ dependencies = [

 [[package]]
 name = "libc"
-version = "0.2.171"
+version = "0.2.172"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c19937216e9d3aa9956d9bb8dfc0b0c8beb6058fc4f7a4dc4d850edf86a237d6"
+checksum = "d750af042f7ef4f724306de029d18836c26c1765a54a6a3f094cbd23a7267ffa"

 [[package]]
 name = "libloading"
@@ -1986,7 +1987,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fc2f4eb4bc735547cfed7c0a4922cbd04a4655978c09b54f1f7b228750664c34"
 dependencies = [
 "cfg-if",
- "windows-targets 0.48.5",
+ "windows-targets 0.52.6",
 ]

 [[package]]
@@ -1997,9 +1998,9 @@ checksum = "8355be11b20d696c8f18f6cc018c4e372165b1fa8126cef092399c9951984ffa"

 [[package]]
 name = "libmimalloc-sys"
-version = "0.1.41"
+version = "0.1.42"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6b20daca3a4ac14dbdc753c5e90fc7b490a48a9131daed3c9a9ced7b2defd37b"
+checksum = "ec9d6fac27761dabcd4ee73571cdb06b7022dc99089acbe5435691edffaac0f4"
 dependencies = [
 "cc",
 "libc",
@@ -2018,9 +2019,9 @@ dependencies = [

 [[package]]
 name = "linux-raw-sys"
-version = "0.9.3"
+version = "0.9.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fe7db12097d22ec582439daf8618b8fdd1a7bef6270e9af3b1ebcd30893cf413"
+checksum = "cd945864f07fe9f5371a27ad7b52a172b4b499999f1d97574c9fa68373937e12"

 [[package]]
 name = "litemap"
@@ -2153,9 +2154,9 @@ checksum = "78ca9ab1a0babb1e7d5695e3530886289c18cf2f87ec19a575a0abdce112e3a3"

 [[package]]
 name = "mimalloc"
-version = "0.1.45"
+version = "0.1.46"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "03cb1f88093fe50061ca1195d336ffec131347c7b833db31f9ab62a2d1b7925f"
+checksum = "995942f432bbb4822a7e9c3faa87a695185b0d09273ba85f097b54f4e458f2af"
 dependencies = [
 "libmimalloc-sys",
 ]
@@ -2184,9 +2185,9 @@ checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"

 [[package]]
 name = "miniz_oxide"
-version = "0.8.7"
+version = "0.8.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ff70ce3e48ae43fa075863cef62e8b43b71a4f2382229920e0df362592919430"
+checksum = "3be647b768db090acb35d5ec5db2b0e1f1de11133ca123b9eacf5137868f892a"
 dependencies = [
 "adler2",
 ]
@@ -2560,7 +2561,7 @@ checksum = "1e91099d4268b0e11973f036e885d652fb0b21fedcf69738c627f94db6a44f42"
 [[package]]
 name = "pdf-extract"
 version = "0.8.2"
-source = "git+https://github.com/toeverything/pdf-extract#49ef7d2aec5bb495467a40082cd9717e849ee29a"
+source = "git+https://github.com/toeverything/pdf-extract?branch=darksky%2Fimprove-font-decoding#e74beed894e1b8dc228c2bf078ed92814b27759f"
 dependencies = [
 "adobe-cmap-parser",
 "cff-parser",
@@ -2896,9 +2897,9 @@ dependencies = [

 [[package]]
 name = "redox_syscall"
-version = "0.5.10"
+version = "0.5.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0b8c0c260b63a8219631167be35e6a988e9554dbd323f8bd08439c8ed1302bd1"
+checksum = "d2f103c6d277498fbceb16e84d317e2a400f160f46904d5f5410848c829511a3"
 dependencies = [
 "bitflags 2.9.0",
 ]
@@ -3089,9 +3090,9 @@ dependencies = [

 [[package]]
 name = "rustls"
-version = "0.23.25"
+version = "0.23.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "822ee9188ac4ec04a2f0531e55d035fb2de73f18b41a63c70c2712503b6fb13c"
+checksum = "df51b5869f3a441595eac5e8ff14d486ff285f7b8c0df8770e49c3b56351f0f0"
 dependencies = [
 "once_cell",
 "ring",
@@ -3101,15 +3102,6 @@ dependencies = [
 "zeroize",
 ]

-[[package]]
-name = "rustls-pemfile"
-version = "2.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dce314e5fee3f39953d46bb63bb8a46d40c2f8fb7cc5a3b6cab2bde9721d6e50"
-dependencies = [
- "rustls-pki-types",
-]
-
 [[package]]
 name = "rustls-pki-types"
 version = "1.11.0"
@@ -3187,9 +3179,9 @@ dependencies = [

 [[package]]
 name = "scroll_derive"
-version = "0.12.0"
+version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7f81c2fde025af7e69b1d1420531c8a8811ca898919db177141a85313b1cb932"
+checksum = "1783eabc414609e28a5ba76aee5ddd52199f7107a0b24c2e9746a1ecc34a683d"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -3339,9 +3331,9 @@ dependencies = [

 [[package]]
 name = "smallvec"
-version = "1.14.0"
+version = "1.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7fcf8323ef1faaee30a44a340193b1ac6814fd9b7b4e88e9d4519a3e4abe1cfd"
+checksum = "8917285742e9f3e1683f0a9c4e6b57960b7314d0b08d30d1ecd426713ee2eee9"
 dependencies = [
 "serde",
 ]
@@ -3393,9 +3385,9 @@ dependencies = [

 [[package]]
 name = "sqlx"
-version = "0.8.3"
+version = "0.8.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4410e73b3c0d8442c5f99b425d7a435b5ee0ae4167b3196771dd3f7a01be745f"
+checksum = "14e22987355fbf8cfb813a0cf8cd97b1b4ec834b94dbd759a9e8679d41fabe83"
 dependencies = [
 "sqlx-core",
 "sqlx-macros",
@@ -3406,10 +3398,11 @@ dependencies = [

 [[package]]
 name = "sqlx-core"
-version = "0.8.3"
+version = "0.8.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6a007b6936676aa9ab40207cde35daab0a04b823be8ae004368c0793b96a61e0"
+checksum = "55c4720d7d4cd3d5b00f61d03751c685ad09c33ae8290c8a2c11335e0604300b"
 dependencies = [
+ "base64 0.22.1",
 "bytes",
 "chrono",
 "crc",
@@ -3428,7 +3421,6 @@ dependencies = [
 "once_cell",
 "percent-encoding",
 "rustls",
- "rustls-pemfile",
 "serde",
 "serde_json",
 "sha2",
@@ -3443,9 +3435,9 @@ dependencies = [

 [[package]]
 name = "sqlx-macros"
-version = "0.8.3"
+version = "0.8.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3112e2ad78643fef903618d78cf0aec1cb3134b019730edb039b69eaf531f310"
+checksum = "175147fcb75f353ac7675509bc58abb2cb291caf0fd24a3623b8f7e3eb0a754b"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -3456,9 +3448,9 @@ dependencies = [

 [[package]]
 name = "sqlx-macros-core"
-version = "0.8.3"
+version = "0.8.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4e9f90acc5ab146a99bf5061a7eb4976b573f560bc898ef3bf8435448dd5e7ad"
+checksum = "1cde983058e53bfa75998e1982086c5efe3c370f3250bf0357e344fa3352e32b"
 dependencies = [
 "dotenvy",
 "either",
@@ -3482,9 +3474,9 @@ dependencies = [

 [[package]]
 name = "sqlx-mysql"
-version = "0.8.3"
+version = "0.8.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4560278f0e00ce64938540546f59f590d60beee33fffbd3b9cd47851e5fff233"
+checksum = "847d2e5393a4f39e47e4f36cab419709bc2b83cbe4223c60e86e1471655be333"
 dependencies = [
 "atoi",
 "base64 0.22.1",
@@ -3525,9 +3517,9 @@ dependencies = [

 [[package]]
 name = "sqlx-postgres"
-version = "0.8.3"
+version = "0.8.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c5b98a57f363ed6764d5b3a12bfedf62f07aa16e1856a7ddc2a0bb190a959613"
+checksum = "cc35947a541b9e0a2e3d85da444f1c4137c13040267141b208395a0d0ca4659f"
 dependencies = [
 "atoi",
 "base64 0.22.1",
@@ -3563,9 +3555,9 @@ dependencies = [

 [[package]]
 name = "sqlx-sqlite"
-version = "0.8.3"
+version = "0.8.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f85ca71d3a5b24e64e1d08dd8fe36c6c95c339a896cc33068148906784620540"
+checksum = "6c48291dac4e5ed32da0927a0b981788be65674aeb62666d19873ab4289febde"
 dependencies = [
 "atoi",
 "chrono",
@@ -3581,6 +3573,7 @@ dependencies = [
 "serde",
 "serde_urlencoded",
 "sqlx-core",
+ "thiserror 2.0.12",
 "tracing",
 "url",
 ]
@@ -5058,9 +5051,9 @@ checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"

 [[package]]
 name = "winnow"
-version = "0.7.4"
+version = "0.7.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0e97b544156e9bebe1a0ffbc03484fc1ffe3100cbce3ffb17eac35f7cdd7ab36"
+checksum = "63d3fcd9bba44b03821e7d699eeee959f3126dcc4aa8e4ae18ec617c2a5cea10"
 dependencies = [
 "memchr",
 ]
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -40,7 +40,7 @@ objc2-foundation       = "0.3"
 once_cell              = "1"
 parking_lot            = "0.12"
 path-ext               = "0.1.1"
-pdf-extract            = { git = "https://github.com/toeverything/pdf-extract" }
+pdf-extract            = { git = "https://github.com/toeverything/pdf-extract", branch = "darksky/improve-font-decoding" }
 rand                   = "0.9"
 rayon                  = "1.10"
 readability            = { version = "0.3.0", default-features = false }
--- a/blocksuite/affine/all/package.json
+++ b/blocksuite/affine/all/package.json
@@ -55,6 +55,8 @@
    "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/affine-widget-frame-title": "workspace:*",
+    "@blocksuite/affine-widget-keyboard-toolbar": "workspace:*",
+    "@blocksuite/affine-widget-linked-doc": "workspace:*",
    "@blocksuite/affine-widget-remote-selection": "workspace:*",
    "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
@@ -115,10 +117,12 @@
    "./widgets/edgeless-auto-connect": "./src/widgets/edgeless-auto-connect.ts",
    "./widgets/edgeless-toolbar": "./src/widgets/edgeless-toolbar.ts",
    "./widgets/frame-title": "./src/widgets/frame-title.ts",
+    "./widgets/linked-doc": "./src/widgets/linked-doc.ts",
    "./widgets/remote-selection": "./src/widgets/remote-selection.ts",
    "./widgets/scroll-anchoring": "./src/widgets/scroll-anchoring.ts",
    "./widgets/slash-menu": "./src/widgets/slash-menu.ts",
    "./widgets/toolbar": "./src/widgets/toolbar.ts",
+    "./widgets/keyboard-toolbar": "./src/widgets/keyboard-toolbar.ts",
    "./fragments/doc-title": "./src/fragments/doc-title.ts",
    "./fragments/frame-panel": "./src/fragments/frame-panel.ts",
    "./fragments/outline": "./src/fragments/outline.ts",
--- a/blocksuite/affine/all/src/tests/adapters/markdown.unit.spec.ts
+++ b/blocksuite/affine/all/src/tests/adapters/markdown.unit.spec.ts
@@ -2448,203 +2448,262 @@ World!
 });

 describe('markdown to snapshot', () => {
-  test('code', async () => {
-    const markdown = '```python\nimport this\n```\n';
+  describe('code', () => {
+    test('markdown code block', async () => {
+      const markdown = '```python\nimport this\n```\n';

-    const blockSnapshot: BlockSnapshot = {
-      type: 'block',
-      id: 'matchesReplaceMap[0]',
-      flavour: 'affine:note',
-      props: {
-        xywh: '[0,0,800,95]',
-        background: DefaultTheme.noteBackgrounColor,
-        index: 'a0',
-        hidden: false,
-        displayMode: NoteDisplayMode.DocAndEdgeless,
-      },
-      children: [
-        {
-          type: 'block',
-          id: 'matchesReplaceMap[1]',
-          flavour: 'affine:code',
-          props: {
-            language: 'python',
-            wrap: false,
-            text: {
-              '$blocksuite:internal:text$': true,
-              delta: [
-                {
-                  insert: 'import this',
-                },
-              ],
-            },
-          },
-          children: [],
+      const blockSnapshot: BlockSnapshot = {
+        type: 'block',
+        id: 'matchesReplaceMap[0]',
+        flavour: 'affine:note',
+        props: {
+          xywh: '[0,0,800,95]',
+          background: DefaultTheme.noteBackgrounColor,
+          index: 'a0',
+          hidden: false,
+          displayMode: NoteDisplayMode.DocAndEdgeless,
        },
-      ],
-    };
-
-    const mdAdapter = new MarkdownAdapter(createJob(), provider);
-    const rawBlockSnapshot = await mdAdapter.toBlockSnapshot({
-      file: markdown,
-    });
-    expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
-  });
-
-  test('code with indentation 1 - slice', async () => {
-    const markdown = '```python\n    import this\n```';
-
-    const sliceSnapshot: SliceSnapshot = {
-      type: 'slice',
-      content: [
-        {
-          type: 'block',
-          id: 'matchesReplaceMap[0]',
-          flavour: 'affine:note',
-          props: {
-            xywh: '[0,0,800,95]',
-            background: DefaultTheme.noteBackgrounColor,
-            index: 'a0',
-            hidden: false,
-            displayMode: 'both',
-          },
-          children: [
-            {
-              type: 'block',
-              id: 'matchesReplaceMap[1]',
-              flavour: 'affine:code',
-              props: {
-                language: 'python',
-                wrap: false,
-                text: {
-                  '$blocksuite:internal:text$': true,
-                  delta: [
-                    {
-                      insert: '    import this',
-                    },
-                  ],
-                },
+        children: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[1]',
+            flavour: 'affine:code',
+            props: {
+              language: 'python',
+              wrap: false,
+              text: {
+                '$blocksuite:internal:text$': true,
+                delta: [
+                  {
+                    insert: 'import this',
+                  },
+                ],
              },
-              children: [],
            },
-          ],
-        },
-      ],
-      workspaceId: '',
-      pageId: '',
-    };
-
-    const mdAdapter = new MarkdownAdapter(createJob(), provider);
-    const rawSliceSnapshot = await mdAdapter.toSliceSnapshot({
-      file: markdown,
-      workspaceId: '',
-      pageId: '',
-    });
-    expect(nanoidReplacement(rawSliceSnapshot!)).toEqual(sliceSnapshot);
-  });
-
-  test('code with indentation 2 - slice', async () => {
-    const markdown = '````python\n```python\n    import this\n```\n````';
-
-    const sliceSnapshot: SliceSnapshot = {
-      type: 'slice',
-      content: [
-        {
-          type: 'block',
-          id: 'matchesReplaceMap[0]',
-          flavour: 'affine:note',
-          props: {
-            xywh: '[0,0,800,95]',
-            background: DefaultTheme.noteBackgrounColor,
-            index: 'a0',
-            hidden: false,
-            displayMode: 'both',
+            children: [],
          },
-          children: [
-            {
-              type: 'block',
-              id: 'matchesReplaceMap[1]',
-              flavour: 'affine:code',
-              props: {
-                language: 'python',
-                wrap: false,
-                text: {
-                  '$blocksuite:internal:text$': true,
-                  delta: [
-                    {
-                      insert: '```python\n    import this\n```',
-                    },
-                  ],
-                },
-              },
-              children: [],
-            },
-          ],
-        },
-      ],
-      workspaceId: '',
-      pageId: '',
-    };
+        ],
+      };

-    const mdAdapter = new MarkdownAdapter(createJob(), provider);
-    const rawSliceSnapshot = await mdAdapter.toSliceSnapshot({
-      file: markdown,
-      workspaceId: '',
-      pageId: '',
+      const mdAdapter = new MarkdownAdapter(createJob(), provider);
+      const rawBlockSnapshot = await mdAdapter.toBlockSnapshot({
+        file: markdown,
+      });
+      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
    });
-    expect(nanoidReplacement(rawSliceSnapshot!)).toEqual(sliceSnapshot);
-  });

-  test('code with indentation 3 - slice', async () => {
-    const markdown = '~~~~python\n````python\n    import this\n````\n~~~~';
+    test('code with indentation 1 - slice', async () => {
+      const markdown = '```python\n    import this\n```';

-    const sliceSnapshot: SliceSnapshot = {
-      type: 'slice',
-      content: [
-        {
-          type: 'block',
-          id: 'matchesReplaceMap[0]',
-          flavour: 'affine:note',
-          props: {
-            xywh: '[0,0,800,95]',
-            background: DefaultTheme.noteBackgrounColor,
-            index: 'a0',
-            hidden: false,
-            displayMode: 'both',
+      const sliceSnapshot: SliceSnapshot = {
+        type: 'slice',
+        content: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[0]',
+            flavour: 'affine:note',
+            props: {
+              xywh: '[0,0,800,95]',
+              background: DefaultTheme.noteBackgrounColor,
+              index: 'a0',
+              hidden: false,
+              displayMode: 'both',
+            },
+            children: [
+              {
+                type: 'block',
+                id: 'matchesReplaceMap[1]',
+                flavour: 'affine:code',
+                props: {
+                  language: 'python',
+                  wrap: false,
+                  text: {
+                    '$blocksuite:internal:text$': true,
+                    delta: [
+                      {
+                        insert: '    import this',
+                      },
+                    ],
+                  },
+                },
+                children: [],
+              },
+            ],
          },
-          children: [
-            {
-              type: 'block',
-              id: 'matchesReplaceMap[1]',
-              flavour: 'affine:code',
-              props: {
-                language: 'python',
-                wrap: false,
-                text: {
-                  '$blocksuite:internal:text$': true,
-                  delta: [
-                    {
-                      insert: '````python\n    import this\n````',
-                    },
-                  ],
-                },
-              },
-              children: [],
-            },
-          ],
-        },
-      ],
-      workspaceId: '',
-      pageId: '',
-    };
+        ],
+        workspaceId: '',
+        pageId: '',
+      };

-    const mdAdapter = new MarkdownAdapter(createJob(), provider);
-    const rawSliceSnapshot = await mdAdapter.toSliceSnapshot({
-      file: markdown,
-      workspaceId: '',
-      pageId: '',
+      const mdAdapter = new MarkdownAdapter(createJob(), provider);
+      const rawSliceSnapshot = await mdAdapter.toSliceSnapshot({
+        file: markdown,
+        workspaceId: '',
+        pageId: '',
+      });
+      expect(nanoidReplacement(rawSliceSnapshot!)).toEqual(sliceSnapshot);
+    });
+
+    test('code with indentation 2 - slice', async () => {
+      const markdown = '````python\n```python\n    import this\n```\n````';
+
+      const sliceSnapshot: SliceSnapshot = {
+        type: 'slice',
+        content: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[0]',
+            flavour: 'affine:note',
+            props: {
+              xywh: '[0,0,800,95]',
+              background: DefaultTheme.noteBackgrounColor,
+              index: 'a0',
+              hidden: false,
+              displayMode: 'both',
+            },
+            children: [
+              {
+                type: 'block',
+                id: 'matchesReplaceMap[1]',
+                flavour: 'affine:code',
+                props: {
+                  language: 'python',
+                  wrap: false,
+                  text: {
+                    '$blocksuite:internal:text$': true,
+                    delta: [
+                      {
+                        insert: '```python\n    import this\n```',
+                      },
+                    ],
+                  },
+                },
+                children: [],
+              },
+            ],
+          },
+        ],
+        workspaceId: '',
+        pageId: '',
+      };
+
+      const mdAdapter = new MarkdownAdapter(createJob(), provider);
+      const rawSliceSnapshot = await mdAdapter.toSliceSnapshot({
+        file: markdown,
+        workspaceId: '',
+        pageId: '',
+      });
+      expect(nanoidReplacement(rawSliceSnapshot!)).toEqual(sliceSnapshot);
+    });
+
+    test('code with indentation 3 - slice', async () => {
+      const markdown = '~~~~python\n````python\n    import this\n````\n~~~~';
+
+      const sliceSnapshot: SliceSnapshot = {
+        type: 'slice',
+        content: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[0]',
+            flavour: 'affine:note',
+            props: {
+              xywh: '[0,0,800,95]',
+              background: DefaultTheme.noteBackgrounColor,
+              index: 'a0',
+              hidden: false,
+              displayMode: 'both',
+            },
+            children: [
+              {
+                type: 'block',
+                id: 'matchesReplaceMap[1]',
+                flavour: 'affine:code',
+                props: {
+                  language: 'python',
+                  wrap: false,
+                  text: {
+                    '$blocksuite:internal:text$': true,
+                    delta: [
+                      {
+                        insert: '````python\n    import this\n````',
+                      },
+                    ],
+                  },
+                },
+                children: [],
+              },
+            ],
+          },
+        ],
+        workspaceId: '',
+        pageId: '',
+      };
+
+      const mdAdapter = new MarkdownAdapter(createJob(), provider);
+      const rawSliceSnapshot = await mdAdapter.toSliceSnapshot({
+        file: markdown,
+        workspaceId: '',
+        pageId: '',
+      });
+      expect(nanoidReplacement(rawSliceSnapshot!)).toEqual(sliceSnapshot);
+    });
+
+    test('html block import as code block', async () => {
+      const markdown = `<div class="container">
+  <header>
+    <h1>Welcome to My Page</h1>
+    <nav>
+      <ul>
+        <li><a href="#home">Home</a></li>
+        <li><a href="#about">About</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main>
+    <p>This is a sample HTML content</p>
+  </main>
+</div>`;
+
+      const blockSnapshot: BlockSnapshot = {
+        type: 'block',
+        id: 'matchesReplaceMap[0]',
+        flavour: 'affine:note',
+        props: {
+          xywh: '[0,0,800,95]',
+          background: DefaultTheme.noteBackgrounColor,
+          index: 'a0',
+          hidden: false,
+          displayMode: NoteDisplayMode.DocAndEdgeless,
+        },
+        children: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[1]',
+            flavour: 'affine:code',
+            props: {
+              language: 'html',
+              wrap: false,
+              text: {
+                '$blocksuite:internal:text$': true,
+                delta: [
+                  {
+                    insert:
+                      '<div class="container">\n  <header>\n    <h1>Welcome to My Page</h1>\n    <nav>\n      <ul>\n        <li><a href="#home">Home</a></li>\n        <li><a href="#about">About</a></li>\n      </ul>\n    </nav>\n  </header>\n  <main>\n    <p>This is a sample HTML content</p>\n  </main>\n</div>',
+                  },
+                ],
+              },
+            },
+            children: [],
+          },
+        ],
+      };
+
+      const mdAdapter = new MarkdownAdapter(createJob(), provider);
+      const rawBlockSnapshot = await mdAdapter.toBlockSnapshot({
+        file: markdown,
+      });
+      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
    });
-    expect(nanoidReplacement(rawSliceSnapshot!)).toEqual(sliceSnapshot);
  });

  test('paragraph', async () => {
@@ -3638,48 +3697,6 @@ bbb
    expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
  });

-  test('html tag', async () => {
-    const markdown = `<aaa>\n`;
-
-    const blockSnapshot: BlockSnapshot = {
-      type: 'block',
-      id: 'matchesReplaceMap[0]',
-      flavour: 'affine:note',
-      props: {
-        xywh: '[0,0,800,95]',
-        background: DefaultTheme.noteBackgrounColor,
-        index: 'a0',
-        hidden: false,
-        displayMode: NoteDisplayMode.DocAndEdgeless,
-      },
-      children: [
-        {
-          type: 'block',
-          id: 'matchesReplaceMap[1]',
-          flavour: 'affine:paragraph',
-          props: {
-            text: {
-              '$blocksuite:internal:text$': true,
-              delta: [
-                {
-                  insert: '<aaa>',
-                },
-              ],
-            },
-            type: 'text',
-          },
-          children: [],
-        },
-      ],
-    };
-
-    const mdAdapter = new MarkdownAdapter(createJob(), provider);
-    const rawBlockSnapshot = await mdAdapter.toBlockSnapshot({
-      file: markdown,
-    });
-    expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
-  });
-
  describe('inline latex', () => {
    test.each([
      ['dollar sign syntax', 'inline $E=mc^2$ latex\n'],
@@ -3769,6 +3786,48 @@ bbb
      });
      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
    });
+
+    test('escapes dollar signs followed by a digit or space and digit', async () => {
+      const markdown =
+        'The price of the T-shirt is $9.15 and the price of the hat is $ 8\n';
+      const blockSnapshot: BlockSnapshot = {
+        type: 'block',
+        id: 'matchesReplaceMap[0]',
+        flavour: 'affine:note',
+        props: {
+          xywh: '[0,0,800,95]',
+          background: DefaultTheme.noteBackgrounColor,
+          index: 'a0',
+          hidden: false,
+          displayMode: NoteDisplayMode.DocAndEdgeless,
+        },
+        children: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[1]',
+            flavour: 'affine:paragraph',
+            props: {
+              type: 'text',
+              text: {
+                '$blocksuite:internal:text$': true,
+                delta: [
+                  {
+                    insert:
+                      'The price of the T-shirt is $9.15 and the price of the hat is $ 8',
+                  },
+                ],
+              },
+            },
+            children: [],
+          },
+        ],
+      };
+      const mdAdapter = new MarkdownAdapter(createJob(), provider);
+      const rawBlockSnapshot = await mdAdapter.toBlockSnapshot({
+        file: markdown,
+      });
+      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
+    });
  });

  test('reference', async () => {
@@ -4049,4 +4108,55 @@ hhh
    });
    expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
  });
+
+  test('should not wrap url with angle brackets if it is not a url', async () => {
+    const markdown = 'prompt: How many people will live in the world in 2040?';
+    const sliceSnapshot: SliceSnapshot = {
+      type: 'slice',
+      content: [
+        {
+          type: 'block',
+          id: 'matchesReplaceMap[0]',
+          flavour: 'affine:note',
+          props: {
+            xywh: '[0,0,800,95]',
+            background: DefaultTheme.noteBackgrounColor,
+            index: 'a0',
+            hidden: false,
+            displayMode: NoteDisplayMode.DocAndEdgeless,
+          },
+          children: [
+            {
+              type: 'block',
+              id: 'matchesReplaceMap[1]',
+              flavour: 'affine:paragraph',
+              props: {
+                type: 'text',
+                text: {
+                  '$blocksuite:internal:text$': true,
+                  delta: [
+                    {
+                      insert:
+                        'prompt: How many people will live in the world in 2040?',
+                    },
+                  ],
+                },
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+      workspaceId: '',
+      pageId: '',
+    };
+
+    const mdAdapter = new MarkdownAdapter(createJob(), provider);
+    const rawSliceSnapshot = await mdAdapter.toSliceSnapshot({
+      file: markdown,
+      workspaceId: '',
+      pageId: '',
+    });
+    expect(nanoidReplacement(rawSliceSnapshot!)).toEqual(sliceSnapshot);
+  });
 });
--- a/blocksuite/affine/all/src/adapters/extension.ts
+++ b/blocksuite/affine/all/src/adapters/extension.ts
@@ -24,36 +24,46 @@ import { defaultMarkdownPreprocessors } from './markdown/preprocessor';
 import { defaultBlockNotionHtmlAdapterMatchers } from './notion-html/block-matcher';
 import { defaultBlockPlainTextAdapterMatchers } from './plain-text/block-matcher';

-export const AdapterFactoryExtensions: ExtensionType[] = [
-  AttachmentAdapterFactoryExtension,
-  ImageAdapterFactoryExtension,
-  MarkdownAdapterFactoryExtension,
-  PlainTextAdapterFactoryExtension,
-  HtmlAdapterFactoryExtension,
-  NotionTextAdapterFactoryExtension,
-  NotionHtmlAdapterFactoryExtension,
-  MixTextAdapterFactoryExtension,
-];
+export function getAdapterFactoryExtensions(): ExtensionType[] {
+  return [
+    AttachmentAdapterFactoryExtension,
+    ImageAdapterFactoryExtension,
+    MarkdownAdapterFactoryExtension,
+    PlainTextAdapterFactoryExtension,
+    HtmlAdapterFactoryExtension,
+    NotionTextAdapterFactoryExtension,
+    NotionHtmlAdapterFactoryExtension,
+    MixTextAdapterFactoryExtension,
+  ];
+}

-export const HtmlAdapterExtension: ExtensionType[] = [
-  ...HtmlInlineToDeltaAdapterExtensions,
-  ...defaultBlockHtmlAdapterMatchers,
-  ...InlineDeltaToHtmlAdapterExtensions,
-];
+export function getHtmlAdapterExtensions(): ExtensionType[] {
+  return [
+    ...HtmlInlineToDeltaAdapterExtensions,
+    ...defaultBlockHtmlAdapterMatchers,
+    ...InlineDeltaToHtmlAdapterExtensions,
+  ];
+}

-export const MarkdownAdapterExtension: ExtensionType[] = [
-  ...MarkdownInlineToDeltaAdapterExtensions,
-  ...defaultBlockMarkdownAdapterMatchers,
-  ...InlineDeltaToMarkdownAdapterExtensions,
-  ...defaultMarkdownPreprocessors,
-];
+export function getMarkdownAdapterExtensions(): ExtensionType[] {
+  return [
+    ...MarkdownInlineToDeltaAdapterExtensions,
+    ...defaultBlockMarkdownAdapterMatchers,
+    ...InlineDeltaToMarkdownAdapterExtensions,
+    ...defaultMarkdownPreprocessors,
+  ];
+}

-export const NotionHtmlAdapterExtension: ExtensionType[] = [
-  ...NotionHtmlInlineToDeltaAdapterExtensions,
-  ...defaultBlockNotionHtmlAdapterMatchers,
-];
+export function getNotionHtmlAdapterExtensions(): ExtensionType[] {
+  return [
+    ...NotionHtmlInlineToDeltaAdapterExtensions,
+    ...defaultBlockNotionHtmlAdapterMatchers,
+  ];
+}

-export const PlainTextAdapterExtension: ExtensionType[] = [
-  ...defaultBlockPlainTextAdapterMatchers,
-  ...InlineDeltaToPlainTextAdapterExtensions,
-];
+export function getPlainTextAdapterExtensions(): ExtensionType[] {
+  return [
+    ...defaultBlockPlainTextAdapterMatchers,
+    ...InlineDeltaToPlainTextAdapterExtensions,
+  ];
+}
--- a/blocksuite/affine/all/src/extensions/store.ts
+++ b/blocksuite/affine/all/src/extensions/store.ts
@@ -51,11 +51,11 @@ import {
 import type { ExtensionType } from '@blocksuite/store';

 import {
-  AdapterFactoryExtensions,
-  HtmlAdapterExtension,
-  MarkdownAdapterExtension,
-  NotionHtmlAdapterExtension,
-  PlainTextAdapterExtension,
+  getAdapterFactoryExtensions,
+  getHtmlAdapterExtensions,
+  getMarkdownAdapterExtensions,
+  getNotionHtmlAdapterExtensions,
+  getPlainTextAdapterExtensions,
 } from '../adapters/extension.js';

 export const StoreExtensions: ExtensionType[] = [
@@ -96,11 +96,11 @@ export const StoreExtensions: ExtensionType[] = [
  DatabaseSelectionExtension,
  TableSelectionExtension,

-  HtmlAdapterExtension,
-  MarkdownAdapterExtension,
-  NotionHtmlAdapterExtension,
-  PlainTextAdapterExtension,
-  AdapterFactoryExtensions,
+  getHtmlAdapterExtensions(),
+  getMarkdownAdapterExtensions(),
+  getNotionHtmlAdapterExtensions(),
+  getPlainTextAdapterExtensions(),
+  getAdapterFactoryExtensions(),

  FeatureFlagService,
  LinkPreviewerService,
--- a/blocksuite/affine/all/src/widgets/keyboard-toolbar.ts
+++ b/blocksuite/affine/all/src/widgets/keyboard-toolbar.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-keyboard-toolbar';
--- a/blocksuite/affine/all/src/widgets/linked-doc.ts
+++ b/blocksuite/affine/all/src/widgets/linked-doc.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-linked-doc';
--- a/blocksuite/affine/all/tsconfig.json
+++ b/blocksuite/affine/all/tsconfig.json
@@ -52,6 +52,8 @@
    { "path": "../widgets/edgeless-auto-connect" },
    { "path": "../widgets/edgeless-toolbar" },
    { "path": "../widgets/frame-title" },
+    { "path": "../widgets/keyboard-toolbar" },
+    { "path": "../widgets/linked-doc" },
    { "path": "../widgets/remote-selection" },
    { "path": "../widgets/scroll-anchoring" },
    { "path": "../widgets/slash-menu" },
--- a/blocksuite/affine/blocks/attachment/src/attachment-block.ts
+++ b/blocksuite/affine/blocks/attachment/src/attachment-block.ts
@@ -28,7 +28,7 @@ import { checkAttachmentBlob, downloadAttachmentBlob } from './utils';

@Peekable({
  enableOn: ({ model }: AttachmentBlockComponent) => {
-    return model.props.type.endsWith('pdf');
+    return !model.doc.readonly && model.props.type.endsWith('pdf');
  },
 })
 export class AttachmentBlockComponent extends CaptionedBlockComponent<AttachmentBlockModel> {
--- a/blocksuite/affine/blocks/attachment/src/embed.ts
+++ b/blocksuite/affine/blocks/attachment/src/embed.ts
@@ -146,17 +146,20 @@ const embedConfig: AttachmentEmbedConfig[] = [
      // More options: https://tinytip.co/tips/html-pdf-params/
      // https://chromium.googlesource.com/chromium/src/+/refs/tags/121.0.6153.1/chrome/browser/resources/pdf/open_pdf_params_parser.ts
      const parameters = '#toolbar=0';
-      return html`<iframe
-        style="width: 100%; color-scheme: auto;"
-        height="480"
-        src=${blobUrl + parameters}
-        loading="lazy"
-        scrolling="no"
-        frameborder="no"
-        allowTransparency
-        allowfullscreen
-        type="application/pdf"
-      ></iframe>`;
+      return html`
+        <iframe
+          style="width: 100%; color-scheme: auto;"
+          height="480"
+          src=${blobUrl + parameters}
+          loading="lazy"
+          scrolling="no"
+          frameborder="no"
+          allowTransparency
+          allowfullscreen
+          type="application/pdf"
+        ></iframe>
+        <div class="affine-attachment-embed-event-mask"></div>
+      `;
    },
  },
  {
--- a/blocksuite/affine/blocks/attachment/src/styles.ts
+++ b/blocksuite/affine/blocks/attachment/src/styles.ts
@@ -136,4 +136,9 @@ export const styles = css`
    width: 100%;
    height: 100%;
  }
+
+  .affine-attachment-embed-event-mask {
+    position: absolute;
+    inset: 0;
+  }
 `;
--- a/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts
+++ b/blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts
@@ -81,21 +81,10 @@ export class BookmarkCard extends SignalWatcher(
    const theme = this.bookmark.std.get(ThemeProvider).theme;
    const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);

-    const titleIconType =
-      !icon?.split('.').pop() || icon?.split('.').pop() === 'svg'
-        ? 'svg+xml'
-        : icon?.split('.').pop();
-
    const titleIcon = this.loading
      ? LoadingIcon
      : icon
-        ? html`<object
-            type="image/${titleIconType}"
-            data=${icon}
-            draggable="false"
-          >
-            ${WebIcon16}
-          </object>`
+        ? html`<img src=${icon} alt="icon" />`
        : WebIcon16;

    const descriptionText = this.loading
@@ -108,9 +97,7 @@ export class BookmarkCard extends SignalWatcher(

    const bannerImage =
      !this.loading && image
-        ? html`<object type="image/webp" data=${image} draggable="false">
-            ${EmbedCardBannerIcon}
-          </object>`
+        ? html`<img src=${image} alt="banner" />`
        : EmbedCardBannerIcon;

    return html`
--- a/blocksuite/affine/blocks/callout/src/callout-block.ts
+++ b/blocksuite/affine/blocks/callout/src/callout-block.ts
@@ -21,16 +21,21 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM

    .affine-callout-block-container {
      display: flex;
-      padding: 12px 16px;
+      padding: 5px 10px;
      border-radius: 8px;
      background-color: ${unsafeCSSVarV2('block/callout/background/grey')};
    }

    .affine-callout-emoji-container {
-      margin-right: 12px;
-      margin-top: 10px;
+      margin-right: 10px;
+      margin-top: 14px;
      user-select: none;
      font-size: 1.2em;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
    }
    .affine-callout-emoji:hover {
      cursor: pointer;
@@ -40,6 +45,7 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
    .affine-callout-children {
      flex: 1;
      min-width: 0;
+      padding-left: 10px;
    }
  `;

--- a/blocksuite/affine/blocks/code/package.json
+++ b/blocksuite/affine/blocks/code/package.json
@@ -11,6 +11,7 @@
  "license": "MIT",
  "dependencies": {
    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
    "@blocksuite/affine-inline-latex": "workspace:*",
    "@blocksuite/affine-inline-link": "workspace:*",
    "@blocksuite/affine-inline-preset": "workspace:*",
@@ -35,7 +36,8 @@
  },
  "exports": {
    ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./turbo-painter": "./src/turbo/code-painter.worker.ts"
  },
  "files": [
    "src",
--- a/blocksuite/affine/blocks/code/src/adapters/markdown/markdown.ts
+++ b/blocksuite/affine/blocks/code/src/adapters/markdown/markdown.ts
@@ -3,25 +3,51 @@ import {
  BlockMarkdownAdapterExtension,
  type BlockMarkdownAdapterMatcher,
  CODE_BLOCK_WRAP_KEY,
+  IN_PARAGRAPH_NODE_CONTEXT_KEY,
  type MarkdownAST,
 } from '@blocksuite/affine-shared/adapters';
 import type { DeltaInsert } from '@blocksuite/store';
 import { nanoid } from '@blocksuite/store';
-import type { Code } from 'mdast';
+import type { Code, Html } from 'mdast';

 const isCodeNode = (node: MarkdownAST): node is Code => node.type === 'code';
+const isHtmlNode = (node: MarkdownAST): node is Html => node.type === 'html';
+
+const isCodeOrHtmlNode = (node: MarkdownAST): node is Code | Html =>
+  isCodeNode(node) || isHtmlNode(node);

 export const codeBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
  flavour: CodeBlockSchema.model.flavour,
-  toMatch: o => isCodeNode(o.node),
+  toMatch: o => isCodeOrHtmlNode(o.node),
  fromMatch: o => o.node.flavour === 'affine:code',
  toBlockSnapshot: {
    enter: (o, context) => {
-      if (!isCodeNode(o.node)) {
+      if (!isCodeOrHtmlNode(o.node)) {
        return;
      }
+
      const { walkerContext, configs } = context;
      const wrap = configs.get(CODE_BLOCK_WRAP_KEY) === 'true';
+      let language = 'plain text';
+      switch (o.node.type) {
+        case 'code': {
+          if (o.node.lang) {
+            language = o.node.lang;
+          }
+          break;
+        }
+        case 'html': {
+          const inParagraphNode = !!walkerContext.getGlobalContext(
+            IN_PARAGRAPH_NODE_CONTEXT_KEY
+          );
+          // only handle top level html node
+          if (inParagraphNode) {
+            return;
+          }
+          language = 'html';
+          break;
+        }
+      }
      walkerContext
        .openNode(
          {
@@ -29,7 +55,7 @@ export const codeBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
            id: nanoid(),
            flavour: 'affine:code',
            props: {
-              language: o.node.lang ?? 'Plain Text',
+              language,
              wrap,
              text: {
                '$blocksuite:internal:text$': true,
--- a/blocksuite/affine/blocks/code/src/adapters/markdown/preprocessor.ts
+++ b/blocksuite/affine/blocks/code/src/adapters/markdown/preprocessor.ts
@@ -2,6 +2,7 @@ import {
  type MarkdownAdapterPreprocessor,
  MarkdownPreprocessorExtension,
 } from '@blocksuite/affine-shared/adapters';
+import { isValidUrl } from '@blocksuite/affine-shared/utils';

 const codePreprocessor: MarkdownAdapterPreprocessor = {
  name: 'code',
@@ -53,14 +54,9 @@ const codePreprocessor: MarkdownAdapterPreprocessor = {
          //
          // eg. /MuawcBMT1Mzvoar09-_66?mode=page&blockIds=rL2_GXbtLU2SsJVfCSmh_
          // https://www.markdownguide.org/basic-syntax/#urls-and-email-addresses
-          try {
-            const valid =
-              URL.canParse?.(trimmedLine) ?? Boolean(new URL(trimmedLine));
-            if (valid) {
-              return `<${trimmedLine}>`;
-            }
-          } catch (err) {
-            console.log(err);
+          const valid = isValidUrl(trimmedLine);
+          if (valid) {
+            return `<${trimmedLine}>`;
          }
        }

--- a/blocksuite/affine/blocks/code/src/clipboard/index.ts
+++ b/blocksuite/affine/blocks/code/src/clipboard/index.ts
@@ -0,0 +1,173 @@
+import { deleteTextCommand } from '@blocksuite/affine-inline-preset';
+import {
+  HtmlAdapter,
+  pasteMiddleware,
+  PlainTextAdapter,
+} from '@blocksuite/affine-shared/adapters';
+import {
+  getBlockIndexCommand,
+  getBlockSelectionsCommand,
+  getTextSelectionCommand,
+} from '@blocksuite/affine-shared/commands';
+import { type Container, createIdentifier } from '@blocksuite/global/di';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import {
+  type BlockStdScope,
+  Clipboard,
+  type ClipboardAdapterConfig,
+  LifeCycleWatcher,
+  LifeCycleWatcherIdentifier,
+  StdIdentifier,
+  type UIEventHandler,
+} from '@blocksuite/std';
+import type { ExtensionType } from '@blocksuite/store';
+
+export const CodeClipboardAdapterConfigIdentifier =
+  createIdentifier<ClipboardAdapterConfig>('code-clipboard-adapter-config');
+
+export function CodeClipboardAdapterConfigExtension(
+  config: ClipboardAdapterConfig
+): ExtensionType {
+  return {
+    setup: di => {
+      di.addImpl(
+        CodeClipboardAdapterConfigIdentifier(config.mimeType),
+        () => config
+      );
+    },
+  };
+}
+
+const PlainTextClipboardConfig = CodeClipboardAdapterConfigExtension({
+  mimeType: 'text/plain',
+  adapter: PlainTextAdapter,
+  priority: 90,
+});
+
+const HtmlClipboardConfig = CodeClipboardAdapterConfigExtension({
+  mimeType: 'text/html',
+  adapter: HtmlAdapter,
+  priority: 80,
+});
+
+export class CodeBlockClipboard extends Clipboard {
+  static override readonly key = 'code-block-clipboard';
+
+  override get _adapters() {
+    const adapterConfigs = this.std.provider.getAll(
+      CodeClipboardAdapterConfigIdentifier
+    );
+    return Array.from(adapterConfigs.values());
+  }
+}
+
+export class CodeBlockClipboardController extends LifeCycleWatcher {
+  static override key = 'code-block-clipboard-controller';
+
+  private readonly _disposables = new DisposableGroup();
+
+  constructor(
+    std: BlockStdScope,
+    readonly clipboard: CodeBlockClipboard
+  ) {
+    super(std);
+  }
+
+  static override setup(di: Container) {
+    di.add(
+      this as unknown as {
+        new (
+          std: BlockStdScope,
+          clipboard: CodeBlockClipboard
+        ): CodeBlockClipboardController;
+      },
+      [StdIdentifier, CodeBlockClipboard]
+    );
+    di.addImpl(LifeCycleWatcherIdentifier(this.key), provider =>
+      provider.get(this)
+    );
+  }
+
+  protected _init = () => {
+    const paste = pasteMiddleware(this.std);
+    this.clipboard.use(paste);
+
+    this._disposables.add({
+      dispose: () => {
+        this.clipboard.unuse(paste);
+      },
+    });
+  };
+
+  onPaste: UIEventHandler = ctx => {
+    const e = ctx.get('clipboardState').raw;
+    e.preventDefault();
+
+    this.std.store.captureSync();
+    this.std.command
+      .chain()
+      .try(cmd => [
+        cmd.pipe(getTextSelectionCommand).pipe((ctx, next) => {
+          const textSelection = ctx.currentTextSelection;
+          if (!textSelection) return;
+          const end = textSelection.to ?? textSelection.from;
+          next({ currentSelectionPath: end.blockId });
+        }),
+        cmd.pipe(getBlockSelectionsCommand).pipe((ctx, next) => {
+          const currentBlockSelections = ctx.currentBlockSelections;
+          if (!currentBlockSelections) return;
+          const blockSelection = currentBlockSelections.at(-1);
+          if (!blockSelection) return;
+          next({ currentSelectionPath: blockSelection.blockId });
+        }),
+      ])
+      .pipe(getBlockIndexCommand)
+      .try(cmd => [cmd.pipe(getTextSelectionCommand).pipe(deleteTextCommand)])
+      .pipe((ctx, next) => {
+        if (!ctx.parentBlock) {
+          return;
+        }
+        this.clipboard
+          .paste(
+            e,
+            this.std.store,
+            ctx.parentBlock.model.id,
+            ctx.blockIndex ? ctx.blockIndex + 1 : 1
+          )
+          .catch(console.error);
+
+        return next();
+      })
+      .run();
+    return true;
+  };
+
+  override mounted() {
+    this._init();
+
+    // add paste event listener for code block
+    const subscription = this.std.view.viewUpdated.subscribe(
+      ({ type, method, view }) => {
+        if (type !== 'block' || view.model.flavour !== 'affine:code') return;
+
+        if (method === 'add') {
+          view.handleEvent('paste', this.onPaste);
+        }
+      }
+    );
+    this._disposables.add(subscription);
+  }
+
+  override unmounted() {
+    this._disposables.dispose();
+  }
+}
+
+export function getCodeClipboardExtensions(): ExtensionType[] {
+  return [
+    PlainTextClipboardConfig,
+    HtmlClipboardConfig,
+    CodeBlockClipboard,
+    CodeBlockClipboardController,
+  ];
+}
--- a/blocksuite/affine/blocks/code/src/code-block-spec.ts
+++ b/blocksuite/affine/blocks/code/src/code-block-spec.ts
@@ -8,6 +8,7 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';

 import { CodeBlockAdapterExtensions } from './adapters/extension.js';
+import { getCodeClipboardExtensions } from './clipboard/index.js';
 import {
  CodeBlockInlineManagerExtension,
  CodeBlockUnitSpecExtension,
@@ -33,4 +34,5 @@ export const CodeBlockSpec: ExtensionType[] = [
  CodeBlockAdapterExtensions,
  SlashMenuConfigExtension('affine:code', codeSlashMenuConfig),
  CodeKeymapExtension,
+  ...getCodeClipboardExtensions(),
 ].flat();
--- a/blocksuite/affine/blocks/code/src/highlight/affine-code-unit.ts
+++ b/blocksuite/affine/blocks/code/src/highlight/affine-code-unit.ts
@@ -1,7 +1,7 @@
 import { affineTextStyles } from '@blocksuite/affine-shared/styles';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { ShadowlessElement } from '@blocksuite/std';
-import { ZERO_WIDTH_SPACE } from '@blocksuite/std/inline';
+import { ZERO_WIDTH_FOR_EMPTY_LINE } from '@blocksuite/std/inline';
 import type { DeltaInsert } from '@blocksuite/store';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -111,7 +111,7 @@ export class AffineCodeUnit extends ShadowlessElement {

  @property({ type: Object })
  accessor delta: DeltaInsert<AffineTextAttributes> = {
-    insert: ZERO_WIDTH_SPACE,
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
  };
 }

--- a/blocksuite/affine/blocks/code/src/index.ts
+++ b/blocksuite/affine/blocks/code/src/index.ts
@@ -1,5 +1,8 @@
 export * from './adapters';
+export * from './clipboard';
 export * from './code-block';
 export * from './code-block-config';
 export * from './code-block-spec';
 export * from './code-toolbar';
+export * from './turbo/code-layout-handler';
+export * from './turbo/code-painter.worker';
--- a/blocksuite/affine/blocks/code/src/turbo/code-layout-handler.ts
+++ b/blocksuite/affine/blocks/code/src/turbo/code-layout-handler.ts
@@ -0,0 +1,71 @@
+import type { Rect } from '@blocksuite/affine-gfx-turbo-renderer';
+import {
+  BlockLayoutHandlerExtension,
+  BlockLayoutHandlersIdentifier,
+} from '@blocksuite/affine-gfx-turbo-renderer';
+import type { Container } from '@blocksuite/global/di';
+import type { EditorHost, GfxBlockComponent } from '@blocksuite/std';
+import { clientToModelCoord, type ViewportRecord } from '@blocksuite/std/gfx';
+import type { BlockModel } from '@blocksuite/store';
+
+import type { CodeLayout } from './code-painter.worker';
+
+export class CodeLayoutHandlerExtension extends BlockLayoutHandlerExtension<CodeLayout> {
+  readonly blockType = 'affine:code';
+
+  static override setup(di: Container) {
+    di.addImpl(
+      BlockLayoutHandlersIdentifier('code'),
+      CodeLayoutHandlerExtension
+    );
+  }
+
+  override queryLayout(
+    model: BlockModel,
+    host: EditorHost,
+    viewportRecord: ViewportRecord
+  ): CodeLayout | null {
+    const component = host.std.view.getBlock(model.id) as GfxBlockComponent;
+    if (!component) return null;
+
+    const codeBlockElement = component.querySelector(
+      '.affine-code-block-container'
+    );
+    if (!codeBlockElement) return null;
+
+    const { zoom, viewScale } = viewportRecord;
+    const codeLayout: CodeLayout = {
+      type: 'affine:code',
+      blockId: model.id,
+      rect: { x: 0, y: 0, w: 0, h: 0 },
+    };
+
+    // Get the bounding rect of the code block
+    const clientRect = codeBlockElement.getBoundingClientRect();
+    if (!clientRect) return null;
+
+    // Convert client coordinates to model coordinates
+    const [modelX, modelY] = clientToModelCoord(viewportRecord, [
+      clientRect.x,
+      clientRect.y,
+    ]);
+
+    codeLayout.rect = {
+      x: modelX,
+      y: modelY,
+      w: clientRect.width / zoom / viewScale,
+      h: clientRect.height / zoom / viewScale,
+    };
+
+    return codeLayout;
+  }
+
+  calculateBound(layout: CodeLayout) {
+    const rect: Rect = layout.rect;
+
+    return {
+      rect,
+      subRects: [rect],
+    };
+  }
+}
--- a/blocksuite/affine/blocks/code/src/turbo/code-painter.worker.ts
+++ b/blocksuite/affine/blocks/code/src/turbo/code-painter.worker.ts
@@ -0,0 +1,53 @@
+import type {
+  BlockLayout,
+  BlockLayoutPainter,
+  WorkerToHostMessage,
+} from '@blocksuite/affine-gfx-turbo-renderer';
+import { BlockLayoutPainterExtension } from '@blocksuite/affine-gfx-turbo-renderer/painter';
+
+export interface CodeLayout extends BlockLayout {
+  type: 'affine:code';
+}
+
+function isCodeLayout(layout: BlockLayout): layout is CodeLayout {
+  return layout.type === 'affine:code';
+}
+
+class CodeLayoutPainter implements BlockLayoutPainter {
+  paint(
+    ctx: OffscreenCanvasRenderingContext2D,
+    layout: BlockLayout,
+    layoutBaseX: number,
+    layoutBaseY: number
+  ): void {
+    if (!isCodeLayout(layout)) {
+      const message: WorkerToHostMessage = {
+        type: 'paintError',
+        error: 'Invalid layout format',
+        blockType: 'affine:code',
+      };
+      self.postMessage(message);
+      return;
+    }
+
+    // Get the layout dimensions
+    const x = layout.rect.x - layoutBaseX;
+    const y = layout.rect.y - layoutBaseY;
+    const width = layout.rect.w;
+    const height = layout.rect.h;
+
+    // Simple white rectangle for now
+    ctx.fillStyle = 'white';
+    ctx.fillRect(x, y, width, height);
+
+    // Add a border to visualize the code block
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.1)';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x, y, width, height);
+  }
+}
+
+export const CodeLayoutPainterExtension = BlockLayoutPainterExtension(
+  'affine:code',
+  CodeLayoutPainter
+);
--- a/blocksuite/affine/blocks/code/tsconfig.json
+++ b/blocksuite/affine/blocks/code/tsconfig.json
@@ -8,6 +8,7 @@
  "include": ["./src"],
  "references": [
    { "path": "../../components" },
+    { "path": "../../gfx/turbo-renderer" },
    { "path": "../../inlines/latex" },
    { "path": "../../inlines/link" },
    { "path": "../../inlines/preset" },
--- a/blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts
+++ b/blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts
@@ -259,7 +259,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
    };
  }

-  override onSelected(context: SelectedContext) {
+  override onSelected(context: SelectedContext): void | boolean {
    const { selected, multiSelect, event: e } = context;
    const { editing } = this.gfx.selection;
    const alreadySelected = this.gfx.selection.has(this.model.id);
@@ -318,7 +318,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
        })
        .catch(console.error);
    } else {
-      super.onSelected(context);
+      return super.onSelected(context);
    }
  }

--- a/blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts
@@ -4,7 +4,7 @@ import type {
  EmbedGithubStyles,
 } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { BlockSelection } from '@blocksuite/std';
+import { BlockSelection, isGfxBlockComponent } from '@blocksuite/std';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -166,16 +166,16 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
            'affine-embed-github-block': true,
            loading,
            [style]: true,
+            edgeless: isGfxBlockComponent(this),
            selected: this.selected$.value,
          })}
          style=${styleMap({
-            transform: `scale(${this._scale})`,
+            // 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">
@@ -260,6 +260,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
              </div>
            </div>
          </div>
+          <div class="affine-embed-github-banner">${bannerImage}</div>
        </div>
      `
    );
--- a/blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts
@@ -14,6 +14,7 @@ export const styles = css`
    opacity: var(--add, 1);
    background: var(--affine-background-primary-color);
    user-select: none;
+    overflow: hidden;
  }

  .affine-embed-github-content {
@@ -275,7 +276,7 @@ export const styles = css`
  }

  .affine-embed-github-block.vertical {
-    flex-direction: column;
+    flex-direction: column-reverse;

    .affine-embed-github-content {
      width: 100%;
@@ -383,7 +384,8 @@ export const styles = css`
    .affine-embed-github-content {
      width: 100%;
    }
-    .affine-embed-github-banner {
+
+    .affine-embed-github-block:not(.edgeless) .affine-embed-github-banner {
      display: none;
    }
  }
--- a/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-error-card.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-error-card.ts
@@ -209,9 +209,9 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
    });
  };

-  private readonly _handleRetry = (e: MouseEvent) => {
+  private readonly _handleRetry = async (e: MouseEvent) => {
    e.stopPropagation();
-    this.onRetry();
+    const success = await this.onRetry();

    // track retry event
    this.telemetryService?.track('ReloadLink', {
@@ -220,6 +220,7 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
      segment: 'editor',
      module: 'embed block',
      control: 'reload button',
+      result: success ? 'success' : 'failure',
    });
  };

@@ -301,7 +302,7 @@ export class EmbedIframeErrorCard extends WithDisposable(LitElement) {
  accessor error: Error | null = null;

  @property({ attribute: false })
-  accessor onRetry!: () => void;
+  accessor onRetry!: () => Promise<boolean>;

  @property({ attribute: false })
  accessor model!: EmbedIframeBlockModel;
--- a/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-link-edit-popup.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-link-edit-popup.ts
@@ -78,7 +78,7 @@ export class EmbedIframeLinkEditPopup extends SignalWatcher(
      segment: 'editor',
      module: 'embed block',
      control: 'edit button',
-      other: status,
+      result: status,
    });
  }

--- a/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-link-input-popup.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-iframe-block/components/embed-iframe-link-input-popup.ts
@@ -228,7 +228,7 @@ export class EmbedIframeLinkInputPopup extends EmbedIframeLinkInputBase {
      segment: this.options?.telemetrySegment ?? 'editor',
      module: 'embed block',
      control: 'confirm embed link',
-      other: status,
+      result: status,
    });
  }

--- a/blocksuite/affine/blocks/embed/src/embed-iframe-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-iframe-block/configs/toolbar.ts
@@ -299,12 +299,19 @@ export const builtinToolbarConfig = {
      icon: ResetIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockByType(EmbedIframeBlockComponent);
-        component?.refreshData().catch(console.error);
-
-        ctx.track('ReloadLink', {
-          ...trackBaseProps,
-          control: 'reload link',
-        });
+        component
+          ?.refreshData()
+          .then(success => {
+            ctx.track('ReloadLink', {
+              type: 'embed iframe block',
+              page: 'doc editor',
+              segment: 'doc',
+              module: 'toolbar',
+              control: 'reload link',
+              result: success ? 'success' : 'failure',
+            });
+          })
+          .catch(console.error);
      },
    },
    {
--- a/blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-block.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-block.ts
@@ -143,7 +143,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
      const { url } = this.model.props;
      if (!url) {
        this.status$.value = 'idle';
-        return;
+        return false;
      }

      // set loading status
@@ -188,11 +188,13 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra

      // set success status
      this.status$.value = 'success';
+      return true;
    } catch (err) {
      // set error status
      this.status$.value = 'error';
      this.error$.value = err instanceof Error ? err : new Error(String(err));
      console.error('Failed to refresh iframe data:', err);
+      return false;
    }
  };

@@ -284,7 +286,7 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
  };

  private readonly _handleRetry = async () => {
-    await this.refreshData();
+    return await this.refreshData();
  };

  private readonly _renderIframe = () => {
--- a/blocksuite/affine/blocks/embed/src/embed-linked-doc-block/configs/slash-menu.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-linked-doc-block/configs/slash-menu.ts
@@ -1,8 +1,5 @@
 import { EmbedLinkedDocBlockSchema } from '@blocksuite/affine-model';
-import {
-  getInlineEditorByModel,
-  insertContent,
-} from '@blocksuite/affine-rich-text';
+import { insertContent } from '@blocksuite/affine-rich-text';
 import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import { createDefaultDoc } from '@blocksuite/affine-shared/utils';
 import {
@@ -68,22 +65,7 @@ const linkedDocSlashMenuConfig: SlashMenuConfig = {
        if (!linkedDocWidget) return;
        // TODO(@L-Sun): make linked-doc-widget as extension
        // @ts-expect-error same as above
-        const triggerKey = linkedDocWidget.config.triggerKeys[0];
-
-        insertContent(std, model, triggerKey);
-
-        const inlineEditor = getInlineEditorByModel(std, model);
-        if (inlineEditor) {
-          // Wait for range to be updated
-          const subscription = inlineEditor.slots.inlineRangeSync.subscribe(
-            () => {
-              // TODO(@L-Sun): make linked-doc-widget as extension
-              subscription.unsubscribe();
-              // @ts-expect-error same as above
-              linkedDocWidget.show({ addTriggerKey: true });
-            }
-          );
-        }
+        linkedDocWidget.show({ addTriggerKey: true });
      },
    },
  ],
--- a/blocksuite/affine/blocks/embed/src/embed-linked-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-linked-doc-block/configs/toolbar.ts
@@ -12,6 +12,8 @@ import {
 import {
  ActionPlacement,
  DocDisplayMetaProvider,
+  EditorSettingProvider,
+  FeatureFlagService,
  type LinkEventType,
  type OpenDocMode,
  type ToolbarAction,
@@ -33,7 +35,7 @@ import {
  ExpandFullIcon,
  OpenInNewIcon,
 } from '@blocksuite/icons/lit';
-import { BlockFlavourIdentifier } from '@blocksuite/std';
+import { BlockFlavourIdentifier, isGfxBlockComponent } from '@blocksuite/std';
 import { type ExtensionType, Slice } from '@blocksuite/store';
 import { computed, signal } from '@preact/signals-core';
 import { html } from 'lit';
@@ -213,6 +215,20 @@ const conversionsActionGroup = {
      },
      run(ctx) {
        const block = ctx.getCurrentBlockByType(EmbedLinkedDocBlockComponent);
+
+        if (
+          ctx.std
+            .get(FeatureFlagService)
+            .getFlag('enable_embed_doc_with_alias') &&
+          isGfxBlockComponent(block)
+        ) {
+          const editorSetting = ctx.std.getOptional(EditorSettingProvider);
+          editorSetting?.set?.(
+            'docDropCanvasPreferView',
+            'affine:embed-synced-doc'
+          );
+        }
+
        block?.convertToEmbed();

        ctx.track('SelectedView', {
--- a/blocksuite/affine/blocks/embed/src/embed-synced-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-synced-doc-block/configs/toolbar.ts
@@ -3,6 +3,8 @@ import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import { EmbedSyncedDocModel } from '@blocksuite/affine-model';
 import {
  ActionPlacement,
+  EditorSettingProvider,
+  FeatureFlagService,
  type LinkEventType,
  type OpenDocMode,
  type ToolbarAction,
@@ -21,7 +23,7 @@ import {
  ExpandFullIcon,
  OpenInNewIcon,
 } from '@blocksuite/icons/lit';
-import { BlockFlavourIdentifier } from '@blocksuite/std';
+import { BlockFlavourIdentifier, isGfxBlockComponent } from '@blocksuite/std';
 import { type ExtensionType, Slice } from '@blocksuite/store';
 import { computed, signal } from '@preact/signals-core';
 import { html } from 'lit';
@@ -30,7 +32,6 @@ import { keyed } from 'lit/directives/keyed.js';
 import { repeat } from 'lit/directives/repeat.js';

 import { EmbedSyncedDocBlockComponent } from '../embed-synced-doc-block';
-
 const trackBaseProps = {
  category: 'linked doc',
  type: 'embed view',
@@ -142,6 +143,19 @@ const conversionsActionGroup = {
      label: 'Card view',
      run(ctx) {
        const block = ctx.getCurrentBlockByType(EmbedSyncedDocBlockComponent);
+        if (
+          ctx.std
+            .get(FeatureFlagService)
+            .getFlag('enable_embed_doc_with_alias') &&
+          isGfxBlockComponent(block)
+        ) {
+          const editorSetting = ctx.std.getOptional(EditorSettingProvider);
+          editorSetting?.set?.(
+            'docDropCanvasPreferView',
+            'affine:embed-linked-doc'
+          );
+        }
+
        block?.convertToCard();

        ctx.track('SelectedView', {
--- a/blocksuite/affine/blocks/embed/src/embed-synced-doc-block/embed-synced-doc-block.ts
+++ b/blocksuite/affine/blocks/embed/src/embed-synced-doc-block/embed-synced-doc-block.ts
@@ -117,9 +117,9 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
    const nextDepth = this.depth + 1;
    const previewSpecBuilder = SpecProvider._.getSpec(name);
    const currentDisposables = this.disposables;
-    const editorSetting =
-      this.std.getOptional(EditorSettingProvider) ??
-      signal(GeneralSettingSchema.parse({}));
+    const editorSetting = this.std.getOptional(EditorSettingProvider) ?? {
+      setting$: signal(GeneralSettingSchema.parse({})),
+    };

    class EmbedSyncedDocWatcher extends LifeCycleWatcher {
      static override key = 'embed-synced-doc-watcher';
--- a/blocksuite/affine/blocks/frame/src/frame-block.ts
+++ b/blocksuite/affine/blocks/frame/src/frame-block.ts
@@ -53,7 +53,7 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
    };
  }

-  override onSelected(context: SelectedContext): void {
+  override onSelected(context: SelectedContext): boolean | void {
    const { x, y } = context.position;

    if (
@@ -63,10 +63,10 @@ export class FrameBlockComponent extends GfxBlockComponent<FrameBlockModel> {
        // otherwise if the frame has title, then ignore it because in this case the frame cannot be selected by frame body
        this.model.props.title.length)
    ) {
-      return;
+      return false;
    }

-    super.onSelected(context);
+    return super.onSelected(context);
  }

  override renderGfxBlock() {
--- a/blocksuite/affine/blocks/frame/src/frame-toolbar.ts
+++ b/blocksuite/affine/blocks/frame/src/frame-toolbar.ts
@@ -80,7 +80,7 @@ const builtinSurfaceToolbarConfig = {

        ctx.store.addBlock(
          SurfaceRefBlockSchema.model.flavour,
-          { reference: frameId, refFlavour: NoteBlockSchema.model.flavour },
+          { reference: frameId, refFlavour: FrameBlockSchema.model.flavour },
          lastNoteId
        );

--- a/blocksuite/affine/blocks/image/package.json
+++ b/blocksuite/affine/blocks/image/package.json
@@ -13,6 +13,7 @@
    "@blocksuite/affine-block-note": "workspace:*",
    "@blocksuite/affine-block-surface": "workspace:*",
    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
@@ -32,7 +33,8 @@
  },
  "exports": {
    ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./turbo-painter": "./src/turbo/image-painter.worker.ts"
  },
  "files": [
    "src",
--- a/blocksuite/affine/blocks/image/src/index.ts
+++ b/blocksuite/affine/blocks/image/src/index.ts
@@ -7,5 +7,7 @@ export { ImageProxyService } from './image-proxy-service';
 export * from './image-service';
 export * from './image-spec';
 export * from './styles';
+export * from './turbo/image-layout-handler';
+export * from './turbo/image-painter.worker';
 export { addImages, downloadImageBlob, uploadBlobForImage } from './utils';
 export { ImageSelection } from '@blocksuite/affine-shared/selection';
--- a/blocksuite/affine/blocks/image/src/turbo/image-layout-handler.ts
+++ b/blocksuite/affine/blocks/image/src/turbo/image-layout-handler.ts
@@ -0,0 +1,69 @@
+import type { Rect } from '@blocksuite/affine-gfx-turbo-renderer';
+import {
+  BlockLayoutHandlerExtension,
+  BlockLayoutHandlersIdentifier,
+} from '@blocksuite/affine-gfx-turbo-renderer';
+import type { Container } from '@blocksuite/global/di';
+import type { EditorHost, GfxBlockComponent } from '@blocksuite/std';
+import { clientToModelCoord, type ViewportRecord } from '@blocksuite/std/gfx';
+import type { BlockModel } from '@blocksuite/store';
+
+import type { ImageLayout } from './image-painter.worker';
+
+export class ImageLayoutHandlerExtension extends BlockLayoutHandlerExtension<ImageLayout> {
+  readonly blockType = 'affine:image';
+
+  static override setup(di: Container) {
+    di.addImpl(
+      BlockLayoutHandlersIdentifier('image'),
+      ImageLayoutHandlerExtension
+    );
+  }
+
+  override queryLayout(
+    model: BlockModel,
+    host: EditorHost,
+    viewportRecord: ViewportRecord
+  ): ImageLayout | null {
+    const component = host.std.view.getBlock(model.id) as GfxBlockComponent;
+    if (!component) return null;
+
+    const imageContainer = component.querySelector('.affine-image-container');
+    if (!imageContainer) return null;
+
+    const resizableImg = component.querySelector(
+      '.resizable-img'
+    ) as HTMLElement;
+    if (!resizableImg) return null;
+
+    const { zoom, viewScale } = viewportRecord;
+    const rect = resizableImg.getBoundingClientRect();
+
+    const [modelX, modelY] = clientToModelCoord(viewportRecord, [
+      rect.x,
+      rect.y,
+    ]);
+
+    const imageLayout: ImageLayout = {
+      type: 'affine:image',
+      blockId: model.id,
+      rect: {
+        x: modelX,
+        y: modelY,
+        w: rect.width / zoom / viewScale,
+        h: rect.height / zoom / viewScale,
+      },
+    };
+
+    return imageLayout;
+  }
+
+  calculateBound(layout: ImageLayout) {
+    const rect: Rect = layout.rect;
+
+    return {
+      rect,
+      subRects: [rect],
+    };
+  }
+}
--- a/blocksuite/affine/blocks/image/src/turbo/image-painter.worker.ts
+++ b/blocksuite/affine/blocks/image/src/turbo/image-painter.worker.ts
@@ -0,0 +1,56 @@
+import type {
+  BlockLayout,
+  BlockLayoutPainter,
+} from '@blocksuite/affine-gfx-turbo-renderer';
+import { BlockLayoutPainterExtension } from '@blocksuite/affine-gfx-turbo-renderer/painter';
+
+export interface ImageLayout extends BlockLayout {
+  type: 'affine:image';
+  rect: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  };
+}
+
+function isImageLayout(layout: BlockLayout): layout is ImageLayout {
+  return layout.type === 'affine:image';
+}
+
+class ImageLayoutPainter implements BlockLayoutPainter {
+  paint(
+    ctx: OffscreenCanvasRenderingContext2D,
+    layout: BlockLayout,
+    layoutBaseX: number,
+    layoutBaseY: number
+  ): void {
+    if (!isImageLayout(layout)) {
+      console.warn(
+        'Expected image layout but received different format:',
+        layout
+      );
+      return;
+    }
+
+    // For now, just paint a white rectangle
+    const x = layout.rect.x - layoutBaseX;
+    const y = layout.rect.y - layoutBaseY;
+    const width = layout.rect.w;
+    const height = layout.rect.h;
+
+    // Draw a white rectangle with border
+    ctx.fillStyle = 'white';
+    ctx.fillRect(x, y, width, height);
+
+    // Add a border
+    ctx.strokeStyle = '#e0e0e0';
+    ctx.lineWidth = 1;
+    ctx.strokeRect(x, y, width, height);
+  }
+}
+
+export const ImageLayoutPainterExtension = BlockLayoutPainterExtension(
+  'affine:image',
+  ImageLayoutPainter
+);
--- a/blocksuite/affine/blocks/image/tsconfig.json
+++ b/blocksuite/affine/blocks/image/tsconfig.json
@@ -10,6 +10,7 @@
    { "path": "../note" },
    { "path": "../surface" },
    { "path": "../../components" },
+    { "path": "../../gfx/turbo-renderer" },
    { "path": "../../model" },
    { "path": "../../shared" },
    { "path": "../../widgets/slash-menu" },
--- a/blocksuite/affine/blocks/latex/src/adapters/markdown/preprocessor.ts
+++ b/blocksuite/affine/blocks/latex/src/adapters/markdown/preprocessor.ts
@@ -3,21 +3,84 @@ import {
  MarkdownPreprocessorExtension,
 } from '@blocksuite/affine-shared/adapters';

+function escapeBrackets(text: string) {
+  const pattern =
+    /(```[\S\s]*?```|`.*?`)|\\\[([\S\s]*?[^\\])\\]|\\\((.*?)\\\)/g;
+  return text.replaceAll(
+    pattern,
+    (match, codeBlock, squareBracket, roundBracket) => {
+      if (codeBlock) {
+        return codeBlock;
+      } else if (squareBracket) {
+        return `$$${squareBracket}$$`;
+      } else if (roundBracket) {
+        return `$${roundBracket}$`;
+      }
+      return match;
+    }
+  );
+}
+
+function escapeMhchem(text: string) {
+  return text.replaceAll('$\\ce{', '$\\\\ce{').replaceAll('$\\pu{', '$\\\\pu{');
+}
+
+/**
+ * Preprocess the content to protect code blocks and LaTeX expressions
+ * reference issue: https://github.com/remarkjs/react-markdown/issues/785
+ * reference comment: https://github.com/remarkjs/react-markdown/issues/785#issuecomment-2307567823
+ * @param content - The content to preprocess
+ * @returns The preprocessed content
+ */
+function preprocessLatex(content: string) {
+  // Protect code blocks
+  const codeBlocks: string[] = [];
+  let preprocessedContent = content;
+  preprocessedContent = preprocessedContent.replace(
+    /(```[\s\S]*?```|`[^`\n]+`)/g,
+    (_, code) => {
+      codeBlocks.push(code);
+      return `<<CODE_BLOCK_${codeBlocks.length - 1}>>`;
+    }
+  );
+
+  // Protect existing LaTeX expressions
+  const latexExpressions: string[] = [];
+  preprocessedContent = preprocessedContent.replace(
+    /(\$\$[\s\S]*?\$\$|\\\[[\s\S]*?\\\]|\\\(.*?\\\))/g,
+    match => {
+      latexExpressions.push(match);
+      return `<<LATEX_${latexExpressions.length - 1}>>`;
+    }
+  );
+
+  // Escape dollar signs that are likely currency indicators
+  preprocessedContent = preprocessedContent.replace(/\$(?=\d)/g, '\\$');
+
+  // Restore LaTeX expressions
+  preprocessedContent = preprocessedContent.replace(
+    /<<LATEX_(\d+)>>/g,
+    (_, index) => latexExpressions[parseInt(index)]
+  );
+
+  // Restore code blocks
+  preprocessedContent = preprocessedContent.replace(
+    /<<CODE_BLOCK_(\d+)>>/g,
+    (_, index) => codeBlocks[parseInt(index)]
+  );
+
+  // Apply additional escaping functions
+  preprocessedContent = escapeBrackets(preprocessedContent);
+  preprocessedContent = escapeMhchem(preprocessedContent);
+
+  return preprocessedContent;
+}
+
 const latexPreprocessor: MarkdownAdapterPreprocessor = {
  name: 'latex',
  levels: ['block', 'slice', 'doc'],
  preprocess: content => {
-    // Replace block-level LaTeX delimiters \[ \] with $$ $$
-    const blockProcessedContent = content.replace(
-      /\\\[(.*?)\\\]/gs,
-      (_, equation) => `$$${equation}$$`
-    );
-    // Replace inline LaTeX delimiters \( \) with $ $
-    const inlineProcessedContent = blockProcessedContent.replace(
-      /\\\((.*?)\\\)/gs,
-      (_, equation) => `$${equation}$`
-    );
-    return inlineProcessedContent;
+    return preprocessLatex(content);
  },
 };

--- a/blocksuite/affine/blocks/list/src/turbo/list-layout-handler.ts
+++ b/blocksuite/affine/blocks/list/src/turbo/list-layout-handler.ts
@@ -6,8 +6,9 @@ import {
  segmentSentences,
 } from '@blocksuite/affine-gfx-turbo-renderer';
 import type { Container } from '@blocksuite/global/di';
-import type { GfxBlockComponent } from '@blocksuite/std';
-import { clientToModelCoord } from '@blocksuite/std/gfx';
+import type { EditorHost, GfxBlockComponent } from '@blocksuite/std';
+import { clientToModelCoord, type ViewportRecord } from '@blocksuite/std/gfx';
+import type { BlockModel } from '@blocksuite/store';

 import type { ListLayout } from './list-painter.worker';

@@ -21,24 +22,27 @@ export class ListLayoutHandlerExtension extends BlockLayoutHandlerExtension<List
    );
  }

-  queryLayout(component: GfxBlockComponent): ListLayout | null {
-    // Select all list items within this list block
+  override queryLayout(
+    model: BlockModel,
+    host: EditorHost,
+    viewportRecord: ViewportRecord
+  ): ListLayout | null {
+    const component = host.std.view.getBlock(model.id) as GfxBlockComponent;
+    if (!component) return null;
+
+    // Find the list items within this specific list component
    const listItemSelector =
      '.affine-list-block-container .affine-list-rich-text-wrapper [data-v-text="true"]';
    const listItemNodes = component.querySelectorAll(listItemSelector);

    if (listItemNodes.length === 0) return null;

-    const viewportRecord = component.gfx.viewport.deserializeRecord(
-      component.dataset.viewportState
-    );
-
-    if (!viewportRecord) return null;
-
    const { zoom, viewScale } = viewportRecord;
    const list: ListLayout = {
      type: 'affine:list',
      items: [],
+      blockId: model.id,
+      rect: { x: 0, y: 0, w: 0, h: 0 },
    };

    listItemNodes.forEach(listItemNode => {
--- a/blocksuite/affine/blocks/list/src/turbo/list-painter.worker.ts
+++ b/blocksuite/affine/blocks/list/src/turbo/list-painter.worker.ts
@@ -77,10 +77,15 @@ class ListLayoutPainter implements BlockLayoutPainter {
      return;
    }

-    if (!isListLayout(layout)) return;
+    if (!isListLayout(layout)) {
+      console.warn(
+        'Expected list layout but received different format:',
+        layout
+      );
+      return;
+    }

    const renderedPositions = new Set<string>();
-
    layout.items.forEach(item => {
      const fontSize = item.fontSize;
      const baselineY = getBaseline(fontSize);
--- a/blocksuite/affine/blocks/note/package.json
+++ b/blocksuite/affine/blocks/note/package.json
@@ -14,6 +14,7 @@
    "@blocksuite/affine-block-surface": "workspace:*",
    "@blocksuite/affine-components": "workspace:*",
    "@blocksuite/affine-fragment-doc-title": "workspace:*",
+    "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
    "@blocksuite/affine-inline-preset": "workspace:*",
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-rich-text": "workspace:*",
@@ -37,7 +38,8 @@
  },
  "exports": {
    ".": "./src/index.ts",
-    "./effects": "./src/effects.ts"
+    "./effects": "./src/effects.ts",
+    "./turbo-painter": "./src/turbo/note-painter.worker.ts"
  },
  "files": [
    "src",
--- a/blocksuite/affine/blocks/note/src/index.ts
+++ b/blocksuite/affine/blocks/note/src/index.ts
@@ -6,3 +6,5 @@ export * from './edgeless-clipboard-config';
 export * from './note-block';
 export * from './note-edgeless-block';
 export * from './note-spec';
+export * from './turbo/note-layout-handler';
+export * from './turbo/note-painter.worker';
--- a/blocksuite/affine/blocks/note/src/turbo/note-layout-handler.ts
+++ b/blocksuite/affine/blocks/note/src/turbo/note-layout-handler.ts
@@ -0,0 +1,81 @@
+import type { Rect } from '@blocksuite/affine-gfx-turbo-renderer';
+import {
+  BlockLayoutHandlerExtension,
+  BlockLayoutHandlersIdentifier,
+} from '@blocksuite/affine-gfx-turbo-renderer';
+import {
+  ColorScheme,
+  type NoteBlockModel,
+  resolveColor,
+} from '@blocksuite/affine-model';
+import type { Container } from '@blocksuite/global/di';
+import type { EditorHost, GfxBlockComponent } from '@blocksuite/std';
+import { clientToModelCoord, type ViewportRecord } from '@blocksuite/std/gfx';
+import type { BlockModel } from '@blocksuite/store';
+
+import type { NoteLayout } from './note-painter.worker';
+
+export class NoteLayoutHandlerExtension extends BlockLayoutHandlerExtension<NoteLayout> {
+  readonly blockType = 'affine:note';
+
+  static override setup(di: Container) {
+    di.addImpl(
+      BlockLayoutHandlersIdentifier('note'),
+      NoteLayoutHandlerExtension
+    );
+  }
+
+  override queryLayout(
+    model: BlockModel,
+    host: EditorHost,
+    viewportRecord: ViewportRecord
+  ): NoteLayout | null {
+    const component = host.std.view.getBlock(model.id) as GfxBlockComponent;
+    if (!component) return null;
+
+    // Get the note container element
+    const noteContainer = component.querySelector('.affine-note-mask');
+    if (!noteContainer) return null;
+
+    // Get the bounding client rect of the note container
+    const clientRect = noteContainer.getBoundingClientRect();
+
+    // Convert client coordinates to model coordinates
+    const [modelX, modelY] = clientToModelCoord(viewportRecord, [
+      clientRect.x,
+      clientRect.y,
+    ]);
+
+    const { zoom, viewScale } = viewportRecord;
+
+    // Cast model to NoteBlockModel to access background property from props
+    const noteModel = model as NoteBlockModel;
+    const background = noteModel.props.background;
+    // Resolve the color to a string
+    const backgroundString = resolveColor(background, ColorScheme.Light);
+
+    // Create the note layout object
+    const noteLayout: NoteLayout = {
+      type: 'affine:note',
+      blockId: model.id,
+      rect: {
+        x: modelX,
+        y: modelY,
+        w: clientRect.width / zoom / viewScale,
+        h: clientRect.height / zoom / viewScale,
+      },
+      background: backgroundString,
+    };
+
+    return noteLayout;
+  }
+
+  calculateBound(layout: NoteLayout) {
+    const rect: Rect = layout.rect;
+
+    return {
+      rect,
+      subRects: [rect], // The note is represented by a single rectangle
+    };
+  }
+}
--- a/blocksuite/affine/blocks/note/src/turbo/note-painter.worker.ts
+++ b/blocksuite/affine/blocks/note/src/turbo/note-painter.worker.ts
@@ -0,0 +1,49 @@
+import type {
+  BlockLayout,
+  BlockLayoutPainter,
+  WorkerToHostMessage,
+} from '@blocksuite/affine-gfx-turbo-renderer';
+import { BlockLayoutPainterExtension } from '@blocksuite/affine-gfx-turbo-renderer/painter';
+
+export interface NoteLayout extends BlockLayout {
+  type: 'affine:note';
+  background?: string;
+}
+
+function isNoteLayout(layout: BlockLayout): layout is NoteLayout {
+  return layout.type === 'affine:note';
+}
+
+class NoteLayoutPainter implements BlockLayoutPainter {
+  paint(
+    ctx: OffscreenCanvasRenderingContext2D,
+    layout: BlockLayout,
+    layoutBaseX: number,
+    layoutBaseY: number
+  ): void {
+    if (!isNoteLayout(layout)) {
+      const message: WorkerToHostMessage = {
+        type: 'paintError',
+        error: 'Invalid layout format',
+        blockType: 'affine:note',
+      };
+      self.postMessage(message);
+      return;
+    }
+
+    // Get the layout rectangle
+    const x = layout.rect.x - layoutBaseX;
+    const y = layout.rect.y - layoutBaseY;
+    const width = layout.rect.w;
+    const height = layout.rect.h;
+
+    ctx.fillStyle = layout.background || 'rgb(255, 255, 255)';
+    ctx.fillRect(x, y, width, height);
+    ctx.strokeRect(x, y, width, height);
+  }
+}
+
+export const NoteLayoutPainterExtension = BlockLayoutPainterExtension(
+  'affine:note',
+  NoteLayoutPainter
+);
--- a/blocksuite/affine/blocks/note/tsconfig.json
+++ b/blocksuite/affine/blocks/note/tsconfig.json
@@ -11,6 +11,7 @@
    { "path": "../surface" },
    { "path": "../../components" },
    { "path": "../../fragments/doc-title" },
+    { "path": "../../gfx/turbo-renderer" },
    { "path": "../../inlines/preset" },
    { "path": "../../model" },
    { "path": "../../rich-text" },
--- a/blocksuite/affine/blocks/paragraph/src/adapters/markdown.ts
+++ b/blocksuite/affine/blocks/paragraph/src/adapters/markdown.ts
@@ -2,18 +2,14 @@ import { ParagraphBlockSchema } from '@blocksuite/affine-model';
 import {
  BlockMarkdownAdapterExtension,
  type BlockMarkdownAdapterMatcher,
+  IN_PARAGRAPH_NODE_CONTEXT_KEY,
  type MarkdownAST,
 } from '@blocksuite/affine-shared/adapters';
 import type { DeltaInsert } from '@blocksuite/store';
 import { nanoid } from '@blocksuite/store';
 import type { Heading } from 'mdast';

-const PARAGRAPH_MDAST_TYPE = new Set([
-  'paragraph',
-  'html',
-  'heading',
-  'blockquote',
-]);
+const PARAGRAPH_MDAST_TYPE = new Set(['paragraph', 'heading', 'blockquote']);

 const isParagraphMDASTType = (node: MarkdownAST) =>
  PARAGRAPH_MDAST_TYPE.has(node.type);
@@ -27,32 +23,8 @@ export const paragraphBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
      enter: (o, context) => {
        const { walkerContext, deltaConverter } = context;
        switch (o.node.type) {
-          case 'html': {
-            walkerContext
-              .openNode(
-                {
-                  type: 'block',
-                  id: nanoid(),
-                  flavour: 'affine:paragraph',
-                  props: {
-                    type: 'text',
-                    text: {
-                      '$blocksuite:internal:text$': true,
-                      delta: [
-                        {
-                          insert: o.node.value,
-                        },
-                      ],
-                    },
-                  },
-                  children: [],
-                },
-                'children'
-              )
-              .closeNode();
-            break;
-          }
          case 'paragraph': {
+            walkerContext.setGlobalContext(IN_PARAGRAPH_NODE_CONTEXT_KEY, true);
            walkerContext
              .openNode(
                {
@@ -118,6 +90,12 @@ export const paragraphBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
          }
        }
      },
+      leave: (o, context) => {
+        if (o.node.type === 'paragraph') {
+          const { walkerContext } = context;
+          walkerContext.setGlobalContext(IN_PARAGRAPH_NODE_CONTEXT_KEY, false);
+        }
+      },
    },
    fromBlockSnapshot: {
      enter: (o, context) => {
--- a/blocksuite/affine/blocks/paragraph/src/turbo/paragraph-layout-handler.ts
+++ b/blocksuite/affine/blocks/paragraph/src/turbo/paragraph-layout-handler.ts
@@ -6,8 +6,9 @@ import {
  segmentSentences,
 } from '@blocksuite/affine-gfx-turbo-renderer';
 import type { Container } from '@blocksuite/global/di';
-import type { GfxBlockComponent } from '@blocksuite/std';
-import { clientToModelCoord } from '@blocksuite/std/gfx';
+import type { EditorHost, GfxBlockComponent } from '@blocksuite/std';
+import { clientToModelCoord, type ViewportRecord } from '@blocksuite/std/gfx';
+import type { BlockModel } from '@blocksuite/store';

 import type { ParagraphLayout } from './paragraph-painter.worker';

@@ -21,58 +22,54 @@ export class ParagraphLayoutHandlerExtension extends BlockLayoutHandlerExtension
    );
  }

-  queryLayout(component: GfxBlockComponent): ParagraphLayout | null {
+  override queryLayout(
+    model: BlockModel,
+    host: EditorHost,
+    viewportRecord: ViewportRecord
+  ): ParagraphLayout | null {
+    const component = host.std.view.getBlock(model.id) as GfxBlockComponent;
    const paragraphSelector =
      '.affine-paragraph-rich-text-wrapper [data-v-text="true"]';
-    const paragraphNodes = component.querySelectorAll(paragraphSelector);
-
-    if (paragraphNodes.length === 0) return null;
-
-    const viewportRecord = component.gfx.viewport.deserializeRecord(
-      component.dataset.viewportState
-    );
-
-    if (!viewportRecord) return null;
+    const paragraphNode = component.querySelector(paragraphSelector);
+    if (!paragraphNode) return null;

    const { zoom, viewScale } = viewportRecord;
    const paragraph: ParagraphLayout = {
      type: 'affine:paragraph',
      sentences: [],
+      blockId: model.id,
+      rect: { x: 0, y: 0, w: 0, h: 0 },
    };

-    paragraphNodes.forEach(paragraphNode => {
-      const computedStyle = window.getComputedStyle(paragraphNode);
-      const fontSizeStr = computedStyle.fontSize;
-      const fontSize = parseInt(fontSizeStr);
+    const computedStyle = window.getComputedStyle(paragraphNode);
+    const fontSizeStr = computedStyle.fontSize;
+    const fontSize = parseInt(fontSizeStr);

-      const sentences = segmentSentences(paragraphNode.textContent || '');
-      const sentenceLayouts = sentences.map(sentence => {
-        const sentenceRects = getSentenceRects(paragraphNode, sentence);
-        const rects = sentenceRects.map(({ text, rect }) => {
-          const [modelX, modelY] = clientToModelCoord(viewportRecord, [
-            rect.x,
-            rect.y,
-          ]);
-          return {
-            text,
-            rect: {
-              x: modelX,
-              y: modelY,
-              w: rect.w / zoom / viewScale,
-              h: rect.h / zoom / viewScale,
-            },
-          };
-        });
+    const sentences = segmentSentences(paragraphNode.textContent || '');
+    const sentenceLayouts = sentences.map(sentence => {
+      const sentenceRects = getSentenceRects(paragraphNode, sentence);
+      const rects = sentenceRects.map(({ text, rect }) => {
+        const [modelX, modelY] = clientToModelCoord(viewportRecord, [
+          rect.x,
+          rect.y,
+        ]);
        return {
-          text: sentence,
-          rects,
-          fontSize,
+          text,
+          rect: {
+            x: modelX,
+            y: modelY,
+            w: rect.w / zoom / viewScale,
+            h: rect.h / zoom / viewScale,
+          },
        };
      });
-
-      paragraph.sentences.push(...sentenceLayouts);
+      return {
+        text: sentence,
+        rects,
+        fontSize,
+      };
    });
-
+    paragraph.sentences.push(...sentenceLayouts);
    return paragraph;
  }

--- a/blocksuite/affine/blocks/paragraph/src/turbo/paragraph-painter.worker.ts
+++ b/blocksuite/affine/blocks/paragraph/src/turbo/paragraph-painter.worker.ts
@@ -73,10 +73,15 @@ class ParagraphLayoutPainter implements BlockLayoutPainter {
      return;
    }

-    if (!isParagraphLayout(layout)) return; // cast to ParagraphLayout
+    if (!isParagraphLayout(layout)) {
+      console.warn(
+        'Expected paragraph layout but received different format:',
+        layout
+      );
+      return;
+    }

    const renderedPositions = new Set<string>();
-
    layout.sentences.forEach(sentence => {
      const fontSize = sentence.fontSize;
      const baselineY = getBaseline(fontSize);
--- a/blocksuite/affine/blocks/root/package.json
+++ b/blocksuite/affine/blocks/root/package.json
@@ -46,6 +46,8 @@
    "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/affine-widget-frame-title": "workspace:*",
+    "@blocksuite/affine-widget-keyboard-toolbar": "workspace:*",
+    "@blocksuite/affine-widget-linked-doc": "workspace:*",
    "@blocksuite/affine-widget-remote-selection": "workspace:*",
    "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
--- a/blocksuite/affine/blocks/root/src/common-specs/index.ts
+++ b/blocksuite/affine/blocks/root/src/common-specs/index.ts
@@ -23,6 +23,7 @@ import {
 } from '@blocksuite/affine-gfx-text';
 import { NoteBlockSchema } from '@blocksuite/affine-model';
 import {
+  AutoClearSelectionService,
  DNDAPIExtension,
  DocModeService,
  EmbedOptionService,
@@ -32,6 +33,7 @@ import {
  ToolbarRegistryExtension,
 } from '@blocksuite/affine-shared/services';
 import { dragHandleWidget } from '@blocksuite/affine-widget-drag-handle';
+import { linkedDocWidget } from '@blocksuite/affine-widget-linked-doc';
 import { docRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
 import { scrollAnchoringWidget } from '@blocksuite/affine-widget-scroll-anchoring';
 import { SlashMenuExtension } from '@blocksuite/affine-widget-slash-menu';
@@ -43,12 +45,7 @@ import { RootBlockAdapterExtensions } from '../adapters/extension';
 import { clipboardConfigs } from '../clipboard';
 import { builtinToolbarConfig } from '../configs/toolbar';
 import { fallbackKeymap } from '../keyboard/keymap';
-import {
-  innerModalWidget,
-  linkedDocWidget,
-  modalWidget,
-  viewportOverlayWidget,
-} from './widgets';
+import { viewportOverlayWidget } from './widgets';

 /**
 * Why do we add these extensions into CommonSpecs?
@@ -82,12 +79,11 @@ export const CommonSpecs: ExtensionType[] = [
  DNDAPIExtension,
  FileDropExtension,
  ToolbarRegistryExtension,
+  AutoClearSelectionService,
  ...RootBlockAdapterExtensions,
  ...clipboardConfigs,
  ...EdgelessElementViews,
  ...EdgelessElementRendererExtension,
-  modalWidget,
-  innerModalWidget,
  SlashMenuExtension,
  linkedDocWidget,
  dragHandleWidget,
--- a/blocksuite/affine/blocks/root/src/common-specs/widgets.ts
+++ b/blocksuite/affine/blocks/root/src/common-specs/widgets.ts
@@ -1,26 +1,8 @@
 import { WidgetViewExtension } from '@blocksuite/std';
 import { literal, unsafeStatic } from 'lit/static-html.js';

-import { AFFINE_INNER_MODAL_WIDGET } from '../widgets/inner-modal/inner-modal.js';
-import { AFFINE_LINKED_DOC_WIDGET } from '../widgets/linked-doc/config.js';
-import { AFFINE_MODAL_WIDGET } from '../widgets/modal/modal.js';
 import { AFFINE_VIEWPORT_OVERLAY_WIDGET } from '../widgets/viewport-overlay/viewport-overlay.js';

-export const modalWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_MODAL_WIDGET,
-  literal`${unsafeStatic(AFFINE_MODAL_WIDGET)}`
-);
-export const innerModalWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_INNER_MODAL_WIDGET,
-  literal`${unsafeStatic(AFFINE_INNER_MODAL_WIDGET)}`
-);
-export const linkedDocWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_LINKED_DOC_WIDGET,
-  literal`${unsafeStatic(AFFINE_LINKED_DOC_WIDGET)}`
-);
 export const viewportOverlayWidget = WidgetViewExtension(
  'affine:page',
  AFFINE_VIEWPORT_OVERLAY_WIDGET,
--- a/blocksuite/affine/blocks/root/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/root/src/configs/toolbar.ts
@@ -10,6 +10,7 @@ import {
 } from '@blocksuite/affine-block-embed';
 import { updateBlockType } from '@blocksuite/affine-block-note';
 import { toast } from '@blocksuite/affine-components/toast';
+import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import {
  deleteTextCommand,
  formatBlockCommand,
@@ -40,7 +41,6 @@ import { ActionPlacement } from '@blocksuite/affine-shared/services';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { tableViewMeta } from '@blocksuite/data-view/view-presets';
 import {
-  ArrowDownSmallIcon,
  CopyIcon,
  DatabaseTableViewIcon,
  DeleteIcon,
@@ -94,7 +94,7 @@ const conversionsActionGroup = {
              aria-label="Conversions"
              .tooltip="${'Turn into'}"
            >
-              ${conversion.icon} ${ArrowDownSmallIcon()}
+              ${conversion.icon} ${EditorChevronDown}
            </editor-icon-button>
          `}
        >
--- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts
@@ -88,6 +88,9 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
        p: () => {
          this._setEdgelessTool('brush');
        },
+        'Shift-p': () => {
+          this._setEdgelessTool('highlighter');
+        },
        e: () => {
          this._setEdgelessTool('eraser');
        },
--- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-block.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-block.ts
@@ -45,7 +45,6 @@ import { css, html } from 'lit';
 import { query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';

-import type { EdgelessRootBlockWidgetName } from '../types.js';
 import type { EdgelessSelectedRectWidget } from './components/rects/edgeless-selected-rect.js';
 import { EdgelessPageKeyboardManager } from './edgeless-keyboard.js';
 import type { EdgelessRootService } from './edgeless-root-service.js';
@@ -53,8 +52,7 @@ import { isCanvasElement } from './utils/query.js';

 export class EdgelessRootBlockComponent extends BlockComponent<
  RootBlockModel,
-  EdgelessRootService,
-  EdgelessRootBlockWidgetName
+  EdgelessRootService
 > {
  static override styles = css`
    affine-edgeless-root {
@@ -351,7 +349,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
  private _initWheelEvent() {
    this._disposables.add(
      this.dispatcher.add('wheel', ctx => {
-        const config = this.std.getOptional(EditorSettingProvider);
+        const config = this.std.getOptional(EditorSettingProvider)?.setting$;
        const state = ctx.get('defaultState');
        const e = state.event as WheelEvent;
        const edgelessScrollZoom = config?.peek().edgelessScrollZoom ?? false;
--- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-preview-block.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-preview-block.ts
@@ -25,14 +25,12 @@ import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';

-import type { EdgelessRootBlockWidgetName } from '../types.js';
 import type { EdgelessRootService } from './edgeless-root-service.js';
 import { isCanvasElement } from './utils/query.js';

 export class EdgelessRootPreviewBlockComponent extends BlockComponent<
  RootBlockModel,
-  EdgelessRootService,
-  EdgelessRootBlockWidgetName
+  EdgelessRootService
 > {
  static override styles = css`
    affine-edgeless-root-preview {
@@ -171,7 +169,7 @@ export class EdgelessRootPreviewBlockComponent extends BlockComponent<
  }

  private get _disableScheduleUpdate() {
-    const editorSetting = this.std.getOptional(EditorSettingProvider);
+    const editorSetting = this.std.getOptional(EditorSettingProvider)?.setting$;

    return editorSetting?.peek().edgelessDisableScheduleUpdate ?? false;
  }
--- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-service.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/edgeless-root-service.ts
@@ -6,7 +6,6 @@ import {
  type SurfaceBlockModel,
  type SurfaceContext,
 } from '@blocksuite/affine-block-surface';
-import { TemplateJob } from '@blocksuite/affine-gfx-template';
 import {
  type ConnectorElementModel,
  RootBlockSchema,
@@ -39,8 +38,6 @@ export class EdgelessRootService extends RootService implements SurfaceContext {

  private readonly _surface: SurfaceBlockModel;

-  TemplateJob = TemplateJob;
-
  get blocks(): GfxBlockElementModel[] {
    return this.layer.blocks;
  }
--- a/blocksuite/affine/blocks/root/src/effects.ts
+++ b/blocksuite/affine/blocks/root/src/effects.ts
@@ -7,6 +7,8 @@ import { effects as gfxShapeEffects } from '@blocksuite/affine-gfx-shape/effects
 import { effects as gfxTemplateEffects } from '@blocksuite/affine-gfx-template/effects';
 import { effects as gfxCanvasTextEffects } from '@blocksuite/affine-gfx-text/effects';
 import { effects as widgetEdgelessToolbarEffects } from '@blocksuite/affine-widget-edgeless-toolbar/effects';
+import { effects as widgetMobileToolbarEffects } from '@blocksuite/affine-widget-keyboard-toolbar/effects';
+import { effects as widgetLinkedDocEffects } from '@blocksuite/affine-widget-linked-doc/effects';

 import { EdgelessAutoCompletePanel } from './edgeless/components/auto-complete/auto-complete-panel.js';
 import { EdgelessAutoComplete } from './edgeless/components/auto-complete/edgeless-auto-complete.js';
@@ -27,7 +29,6 @@ import { ToolbarArrowUpIcon } from './edgeless/components/toolbar/common/toolbar
 import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
 import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
 import {
-  AffineModalWidget,
  EdgelessRootBlockComponent,
  EdgelessRootPreviewBlockComponent,
  PageRootBlockComponent,
@@ -43,15 +44,6 @@ import {
 } from './widgets/edgeless-zoom-toolbar/index.js';
 import { ZoomBarToggleButton } from './widgets/edgeless-zoom-toolbar/zoom-bar-toggle-button.js';
 import { EdgelessZoomToolbar } from './widgets/edgeless-zoom-toolbar/zoom-toolbar.js';
-import {
-  AFFINE_INNER_MODAL_WIDGET,
-  AffineInnerModalWidget,
-} from './widgets/inner-modal/inner-modal.js';
-import { effects as widgetMobileToolbarEffects } from './widgets/keyboard-toolbar/effects.js';
-import { effects as widgetLinkedDocEffects } from './widgets/linked-doc/effects.js';
-import { Loader } from './widgets/linked-doc/import-doc/loader.js';
-import { AffineCustomModal } from './widgets/modal/custom-modal.js';
-import { AFFINE_MODAL_WIDGET } from './widgets/modal/modal.js';
 import {
  AFFINE_PAGE_DRAGGING_AREA_WIDGET,
  AffinePageDraggingAreaWidget,
@@ -97,8 +89,6 @@ function registerGfxEffects() {
 }

 function registerWidgets() {
-  customElements.define(AFFINE_INNER_MODAL_WIDGET, AffineInnerModalWidget);
-  customElements.define(AFFINE_MODAL_WIDGET, AffineModalWidget);
  customElements.define(
    AFFINE_PAGE_DRAGGING_AREA_WIDGET,
    AffinePageDraggingAreaWidget
@@ -129,12 +119,6 @@ function registerEdgelessToolbarComponents() {
 }

 function registerMiscComponents() {
-  // Modal and menu components
-  customElements.define('affine-custom-modal', AffineCustomModal);
-
-  // Loading and preview components
-  customElements.define('loader-element', Loader);
-
  // Toolbar and UI components
  customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar);
  customElements.define('zoom-bar-toggle-button', ZoomBarToggleButton);
@@ -185,6 +169,5 @@ declare global {
    'edgeless-zoom-toolbar': EdgelessZoomToolbar;

    [AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET]: AffineEdgelessZoomToolbarWidget;
-    [AFFINE_INNER_MODAL_WIDGET]: AffineInnerModalWidget;
  }
 }
--- a/blocksuite/affine/blocks/root/src/index.ts
+++ b/blocksuite/affine/blocks/root/src/index.ts
@@ -8,9 +8,7 @@ export * from './page/page-root-block.js';
 export { PageRootService } from './page/page-root-service.js';
 export * from './page/page-root-spec.js';
 export * from './preview/preview-root-block.js';
-export * from './root-config.js';
 export { RootService } from './root-service.js';
-export * from './transformers/index.js';
 export * from './types.js';
 export * from './utils/index.js';
 export * from './widgets/index.js';
--- a/blocksuite/affine/blocks/root/src/page/page-root-block.ts
+++ b/blocksuite/affine/blocks/root/src/page/page-root-block.ts
@@ -27,7 +27,6 @@ import { css, html } from 'lit';
 import { query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';

-import type { PageRootBlockWidgetName } from '../index.js';
 import { PageKeyboardManager } from '../keyboard/keyboard-manager.js';
 import type { PageRootService } from './page-root-service.js';

@@ -52,8 +51,7 @@ function testClickOnBlankArea(

 export class PageRootBlockComponent extends BlockComponent<
  RootBlockModel,
-  PageRootService,
-  PageRootBlockWidgetName
+  PageRootService
 > {
  static override styles = css`
    editor-host:has(> affine-page-root, * > affine-page-root) {
--- a/blocksuite/affine/blocks/root/src/page/page-root-spec.ts
+++ b/blocksuite/affine/blocks/root/src/page/page-root-spec.ts
@@ -1,20 +1,15 @@
 import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
+import { keyboardToolbarWidget } from '@blocksuite/affine-widget-keyboard-toolbar';
+import { IS_MOBILE } from '@blocksuite/global/env';
 import { BlockViewExtension, WidgetViewExtension } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';

 import { PageClipboard } from '../clipboard/page-clipboard.js';
 import { CommonSpecs } from '../common-specs/index.js';
-import { AFFINE_KEYBOARD_TOOLBAR_WIDGET } from '../widgets/keyboard-toolbar/index.js';
 import { AFFINE_PAGE_DRAGGING_AREA_WIDGET } from '../widgets/page-dragging-area/page-dragging-area.js';
 import { PageRootService } from './page-root-service.js';

-export const keyboardToolbarWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_KEYBOARD_TOOLBAR_WIDGET,
-  literal`${unsafeStatic(AFFINE_KEYBOARD_TOOLBAR_WIDGET)}`
-);
-
 export const pageDraggingAreaWidget = WidgetViewExtension(
  'affine:page',
  AFFINE_PAGE_DRAGGING_AREA_WIDGET,
@@ -31,7 +26,7 @@ const PageCommonExtension: ExtensionType[] = [
 export const PageRootBlockSpec: ExtensionType[] = [
  ...PageCommonExtension,
  BlockViewExtension('affine:page', literal`affine-page-root`),
-  keyboardToolbarWidget,
+  IS_MOBILE ? [keyboardToolbarWidget] : [],
  PageClipboard,
 ].flat();

--- a/blocksuite/affine/blocks/root/src/root-config.ts
+++ b/blocksuite/affine/blocks/root/src/root-config.ts
@@ -1,12 +0,0 @@
-import { ConfigExtensionFactory } from '@blocksuite/std';
-
-import type { KeyboardToolbarConfig } from './widgets/keyboard-toolbar/config.js';
-import type { LinkedWidgetConfig } from './widgets/linked-doc/index.js';
-
-export interface RootBlockConfig {
-  linkedWidget?: Partial<LinkedWidgetConfig>;
-  keyboardToolbar?: Partial<KeyboardToolbarConfig>;
-}
-
-export const RootBlockConfigExtension =
-  ConfigExtensionFactory<RootBlockConfig>('affine:root-block');
--- a/blocksuite/affine/blocks/root/src/root-service.ts
+++ b/blocksuite/affine/blocks/root/src/root-service.ts
@@ -1,48 +1,6 @@
 import { RootBlockSchema } from '@blocksuite/affine-model';
-import {
-  getBlockSelectionsCommand,
-  getImageSelectionsCommand,
-  getSelectedBlocksCommand,
-  getTextSelectionCommand,
-} from '@blocksuite/affine-shared/commands';
-import type { BlockComponent } from '@blocksuite/std';
 import { BlockService } from '@blocksuite/std';

-import type { RootBlockComponent } from './types.js';
-
 export abstract class RootService extends BlockService {
  static override readonly flavour = RootBlockSchema.model.flavour;
-
-  get selectedBlocks() {
-    let result: BlockComponent[] = [];
-    this.std.command
-      .chain()
-      .tryAll(chain => [
-        chain.pipe(getTextSelectionCommand),
-        chain.pipe(getImageSelectionsCommand),
-        chain.pipe(getBlockSelectionsCommand),
-      ])
-      .pipe(getSelectedBlocksCommand)
-      .pipe(({ selectedBlocks }) => {
-        if (!selectedBlocks) return;
-        result = selectedBlocks;
-      })
-      .run();
-    return result;
-  }
-
-  get selectedModels() {
-    return this.selectedBlocks.map(block => block.model);
-  }
-
-  get viewportElement() {
-    const rootId = this.std.store.root?.id;
-    if (!rootId) return null;
-    const rootComponent = this.std.view.getBlock(
-      rootId
-    ) as RootBlockComponent | null;
-    if (!rootComponent) return null;
-    const viewportElement = rootComponent.viewportElement;
-    return viewportElement;
-  }
 }
--- a/blocksuite/affine/blocks/root/src/types.ts
+++ b/blocksuite/affine/blocks/root/src/types.ts
@@ -1,43 +1,5 @@
-import type { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
-import type { AFFINE_FRAME_TITLE_WIDGET } from '@blocksuite/affine-widget-frame-title';
-import type {
-  AFFINE_DOC_REMOTE_SELECTION_WIDGET,
-  AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET,
-} from '@blocksuite/affine-widget-remote-selection';
-import type { AFFINE_SLASH_MENU_WIDGET } from '@blocksuite/affine-widget-slash-menu';
-
 import type { EdgelessRootBlockComponent } from './edgeless/edgeless-root-block.js';
 import type { PageRootBlockComponent } from './page/page-root-block.js';
-import type { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from './widgets/edgeless-zoom-toolbar/index.js';
-import type { AFFINE_KEYBOARD_TOOLBAR_WIDGET } from './widgets/index.js';
-import type { AFFINE_INNER_MODAL_WIDGET } from './widgets/inner-modal/inner-modal.js';
-import type { AFFINE_LINKED_DOC_WIDGET } from './widgets/linked-doc/config.js';
-import type { AFFINE_MODAL_WIDGET } from './widgets/modal/modal.js';
-import type { AFFINE_PAGE_DRAGGING_AREA_WIDGET } from './widgets/page-dragging-area/page-dragging-area.js';
-import type { AFFINE_VIEWPORT_OVERLAY_WIDGET } from './widgets/viewport-overlay/viewport-overlay.js';
-
-export type PageRootBlockWidgetName =
-  | typeof AFFINE_KEYBOARD_TOOLBAR_WIDGET
-  | typeof AFFINE_MODAL_WIDGET
-  | typeof AFFINE_INNER_MODAL_WIDGET
-  | typeof AFFINE_SLASH_MENU_WIDGET
-  | typeof AFFINE_LINKED_DOC_WIDGET
-  | typeof AFFINE_PAGE_DRAGGING_AREA_WIDGET
-  | typeof AFFINE_DRAG_HANDLE_WIDGET
-  | typeof AFFINE_DOC_REMOTE_SELECTION_WIDGET
-  | typeof AFFINE_VIEWPORT_OVERLAY_WIDGET;
-
-export type EdgelessRootBlockWidgetName =
-  | typeof AFFINE_MODAL_WIDGET
-  | typeof AFFINE_INNER_MODAL_WIDGET
-  | typeof AFFINE_SLASH_MENU_WIDGET
-  | typeof AFFINE_LINKED_DOC_WIDGET
-  | typeof AFFINE_DRAG_HANDLE_WIDGET
-  | typeof AFFINE_DOC_REMOTE_SELECTION_WIDGET
-  | typeof AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET
-  | typeof AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET
-  | typeof AFFINE_VIEWPORT_OVERLAY_WIDGET
-  | typeof AFFINE_FRAME_TITLE_WIDGET;

 export type RootBlockComponent =
  | PageRootBlockComponent
--- a/blocksuite/affine/blocks/root/src/widgets/index.ts
+++ b/blocksuite/affine/blocks/root/src/widgets/index.ts
@@ -1,19 +1,4 @@
 export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.js';
-export { AffineInnerModalWidget } from './inner-modal/inner-modal.js';
-export * from './keyboard-toolbar/index.js';
-export {
-  type LinkedMenuAction,
-  type LinkedMenuGroup,
-  type LinkedMenuItem,
-  type LinkedWidgetConfig,
-  LinkedWidgetUtils,
-} from './linked-doc/config.js';
-export {
-  // It's used in the AFFiNE!
-  showImportModal,
-} from './linked-doc/import-doc/index.js';
-export { AffineLinkedDocWidget } from './linked-doc/index.js';
-export { AffineModalWidget } from './modal/modal.js';
 export { AffinePageDraggingAreaWidget } from './page-dragging-area/page-dragging-area.js';
 export * from './viewport-overlay/viewport-overlay.js';
 export { AffineFrameTitleWidget } from '@blocksuite/affine-widget-frame-title';
--- a/blocksuite/affine/blocks/root/src/widgets/inner-modal/inner-modal.ts
+++ b/blocksuite/affine/blocks/root/src/widgets/inner-modal/inner-modal.ts
@@ -1,58 +0,0 @@
-import { WidgetComponent } from '@blocksuite/std';
-import {
-  autoUpdate,
-  computePosition,
-  type FloatingElement,
-  type ReferenceElement,
-  size,
-} from '@floating-ui/dom';
-import { nothing } from 'lit';
-
-export const AFFINE_INNER_MODAL_WIDGET = 'affine-inner-modal-widget';
-
-export class AffineInnerModalWidget extends WidgetComponent {
-  private _getTarget?: () => ReferenceElement;
-
-  get target(): ReferenceElement {
-    if (this._getTarget) {
-      return this._getTarget();
-    }
-    return document.body;
-  }
-
-  open(
-    modal: FloatingElement,
-    ops: { onClose?: () => void }
-  ): { close(): void } {
-    const cancel = autoUpdate(this.target, modal, () => {
-      computePosition(this.target, modal, {
-        middleware: [
-          size({
-            apply: ({ rects }) => {
-              Object.assign(modal.style, {
-                left: `${rects.reference.x}px`,
-                top: `${rects.reference.y}px`,
-                width: `${rects.reference.width}px`,
-                height: `${rects.reference.height}px`,
-              });
-            },
-          }),
-        ],
-      }).catch(console.error);
-    });
-    const close = () => {
-      modal.remove();
-      ops.onClose?.();
-      cancel();
-    };
-    return { close };
-  }
-
-  override render() {
-    return nothing;
-  }
-
-  setTarget(fn: () => ReferenceElement) {
-    this._getTarget = fn;
-  }
-}
--- a/blocksuite/affine/blocks/root/src/widgets/modal/custom-modal.ts
+++ b/blocksuite/affine/blocks/root/src/widgets/modal/custom-modal.ts
@@ -1,144 +0,0 @@
-import { css, html, LitElement, nothing } from 'lit';
-import { ref } from 'lit/directives/ref.js';
-import { repeat } from 'lit/directives/repeat.js';
-
-type ModalButton = {
-  text: string;
-  type?: 'primary';
-  onClick: () => Promise<void> | void;
-};
-
-type ModalOptions = {
-  footer: null | ModalButton[];
-};
-
-export class AffineCustomModal extends LitElement {
-  static override styles = css`
-    :host {
-      z-index: calc(var(--affine-z-index-modal) + 3);
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-    }
-
-    .modal-background {
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      align-items: center;
-      background-color: var(--affine-background-modal-color);
-      justify-content: center;
-      display: flex;
-    }
-
-    .modal-window {
-      width: 70%;
-      min-width: 500px;
-      height: 80%;
-      overflow-y: scroll;
-      background-color: var(--affine-background-overlay-panel-color);
-      border-radius: 12px;
-      box-shadow: var(--affine-shadow-3);
-      position: relative;
-    }
-
-    .modal-main {
-      height: 100%;
-    }
-
-    .modal-footer {
-      display: flex;
-      justify-content: flex-end;
-      gap: 20px;
-      padding: 24px;
-      position: absolute;
-      box-sizing: border-box;
-      bottom: 0;
-      right: 0;
-    }
-
-    .modal-footer .button {
-      align-items: center;
-      background: var(--affine-white);
-      border: 1px solid;
-      border-color: var(--affine-border-color);
-      border-radius: 8px;
-      color: var(--affine-text-primary-color);
-      cursor: pointer;
-      display: inline-flex;
-      font-size: var(--affine-font-sm);
-      font-weight: 500;
-      justify-content: center;
-      outline: 0;
-      padding: 12px 18px;
-      touch-action: manipulation;
-      transition: all 0.3s;
-      user-select: none;
-    }
-
-    .modal-footer .primary {
-      background: var(--affine-primary-color);
-      border-color: var(--affine-black-10);
-      box-shadow: var(--affine-button-inner-shadow);
-      color: var(--affine-pure-white);
-    }
-  `;
-
-  onOpen!: (div: HTMLDivElement) => void;
-
-  options!: ModalOptions;
-
-  close() {
-    this.remove();
-  }
-
-  modalRef(modal: Element | undefined) {
-    if (modal) this.onOpen?.(modal as HTMLDivElement);
-  }
-
-  override render() {
-    const { options } = this;
-
-    return html`<div class="modal-background">
-      <div class="modal-window">
-        <div class="modal-main" ${ref(this.modalRef)}></div>
-        <div class="modal-footer">
-          ${options.footer
-            ? repeat(
-                options.footer,
-                button => button.text,
-                button => html`
-                  <button
-                    class="button ${button.type ?? ''}"
-                    @click=${button.onClick}
-                  >
-                    ${button.text}
-                  </button>
-                `
-              )
-            : nothing}
-        </div>
-      </div>
-    </div>`;
-  }
-}
-
-type CreateModalOption = ModalOptions & {
-  entry: (div: HTMLDivElement) => void;
-};
-
-export function createCustomModal(
-  options: CreateModalOption,
-  container: HTMLElement = document.body
-) {
-  const modal = new AffineCustomModal();
-
-  modal.onOpen = options.entry;
-  modal.options = options;
-
-  container.append(modal);
-
-  return modal;
-}
--- a/blocksuite/affine/blocks/root/src/widgets/modal/modal.ts
+++ b/blocksuite/affine/blocks/root/src/widgets/modal/modal.ts
@@ -1,22 +0,0 @@
-import { WidgetComponent } from '@blocksuite/std';
-import { nothing } from 'lit';
-
-import { createCustomModal } from './custom-modal.js';
-
-export const AFFINE_MODAL_WIDGET = 'affine-modal-widget';
-
-export class AffineModalWidget extends WidgetComponent {
-  open(options: Parameters<typeof createCustomModal>[0]) {
-    return createCustomModal(options, this.ownerDocument.body);
-  }
-
-  override render() {
-    return nothing;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    [AFFINE_MODAL_WIDGET]: AffineModalWidget;
-  }
-}
--- a/blocksuite/affine/blocks/root/tsconfig.json
+++ b/blocksuite/affine/blocks/root/tsconfig.json
@@ -43,6 +43,8 @@
    { "path": "../../widgets/edgeless-auto-connect" },
    { "path": "../../widgets/edgeless-toolbar" },
    { "path": "../../widgets/frame-title" },
+    { "path": "../../widgets/keyboard-toolbar" },
+    { "path": "../../widgets/linked-doc" },
    { "path": "../../widgets/remote-selection" },
    { "path": "../../widgets/scroll-anchoring" },
    { "path": "../../widgets/slash-menu" },
--- a/blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts
+++ b/blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts
@@ -49,7 +49,7 @@ import {
 import type { BaseSelection, Store } from '@blocksuite/store';
 import { effect, signal } from '@preact/signals-core';
 import { css, html, nothing } from 'lit';
-import { query, state } from 'lit/decorators.js';
+import { query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -103,17 +103,12 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
      margin: 0 auto;
      position: relative;
      overflow: hidden;
-      pointer-events: none;
      user-select: none;
    }

    .ref-viewport-event-mask {
      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: auto;
+      inset: 0;
    }
  `;

@@ -139,11 +134,11 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
    return this._referencedModel;
  }

-  private _focusBlock() {
+  private readonly _handleClick = () => {
    this.selection.update(() => {
      return [this.selection.create(BlockSelection, { blockId: this.blockId })];
    });
-  }
+  };

  private _initHotkey() {
    const selection = this.host.selection;
@@ -178,7 +173,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode

    this.bindHotKey({
      Enter: () => {
-        if (!this._focused) return;
+        if (!this.selected$.value) return;
        addParagraph();
        return true;
      },
@@ -260,17 +255,6 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
    }
  }

-  private _initSelection() {
-    const selection = this.host.selection;
-    this._disposables.add(
-      selection.slots.changed.subscribe(selList => {
-        this._focused = selList.some(
-          sel => sel.blockId === this.blockId && sel.is(BlockSelection)
-        );
-      })
-    );
-  }
-
  private _initViewport() {
    const refreshViewport = () => {
      if (!this._referenceXYWH$.value) return;
@@ -436,7 +420,6 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
    this._initHotkey();
    this._initViewport();
    this._initReferencedModel();
-    this._initSelection();
  }

  override firstUpdated() {
@@ -462,10 +445,10 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
      <div
        class=${classMap({
          'affine-surface-ref': true,
-          focused: this._focused,
+          focused: this.selected$.value,
        })}
        data-theme=${edgelessTheme}
-        @click=${this._focusBlock}
+        @click=${this._handleClick}
      >
        ${content}
      </div>
@@ -488,9 +471,6 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
    this.std.get(DocModeProvider).setEditorMode('edgeless');
  }

-  @state()
-  private accessor _focused: boolean = false;
-
  @query('.affine-surface-ref')
  accessor hoverableContainer!: HTMLDivElement;

--- a/blocksuite/affine/blocks/surface/src/consts.ts
+++ b/blocksuite/affine/blocks/surface/src/consts.ts
@@ -17,8 +17,12 @@ export interface IModelCoord {
  y: number;
 }

+// TODO(@L-Sun): we should remove this list when refactor the pointerOut event to pointerLeave,
+// since the previous will be triggered when the pointer move to the area of the its children elements
+// see: https://developer.mozilla.org/en-US/docs/Web/API/Element/pointerout_event
 export const EXCLUDING_MOUSE_OUT_CLASS_LIST = [
  'affine-note-mask',
  'edgeless-block-portal-note',
  'affine-block-children-container',
+  'edgeless-container',
 ];
--- a/blocksuite/affine/blocks/surface/src/managers/connector-manager.ts
+++ b/blocksuite/affine/blocks/surface/src/managers/connector-manager.ts
@@ -12,7 +12,6 @@ import type { IBound, IVec, IVec3 } from '@blocksuite/global/gfx';
 import {
  almostEqual,
  Bound,
-  clamp,
  getBezierCurveBoundingBox,
  getBezierParameters,
  getBoundFromPoints,
@@ -85,7 +84,7 @@ export function calculateNearestLocation(
 ) {
  const { x, y, w, h } = bounds;
  return locations
-    .map(offset => [x + offset[0] * w, y + offset[1] * h] as IVec)
+    .map<IVec>(offset => [x + offset[0] * w, y + offset[1] * h])
    .map(point => getPointFromBoundsWithRotation(bounds, point))
    .reduce(
      (prev, curr, index) => {
@@ -99,7 +98,7 @@ export function calculateNearestLocation(
        return prev;
      },
      [...locations[0]]
-    ) as IVec;
+    );
 }

 function rBound(ele: GfxModel, anti = false): IBound {
@@ -139,21 +138,19 @@ export function getAnchors(ele: GfxModel) {
  const anchors: { point: PointLocation; coord: IVec }[] = [];
  const rotate = ele.rotate;

-  [
-    [bound.center[0], bound.y - offset],
-    [bound.center[0], bound.maxY + offset],
-    [bound.x - offset, bound.center[1]],
-    [bound.maxX + offset, bound.center[1]],
-  ]
-    .map(vec =>
-      getPointFromBoundsWithRotation({ ...bound, rotate }, vec as IVec)
-    )
+  (
+    [
+      [bound.center[0], bound.y - offset],
+      [bound.center[0], bound.maxY + offset],
+      [bound.x - offset, bound.center[1]],
+      [bound.maxX + offset, bound.center[1]],
+    ] satisfies IVec[]
+  )
+    .map(vec => getPointFromBoundsWithRotation({ ...bound, rotate }, vec))
    .forEach(vec => {
-      const rst = ele.getLineIntersections(bound.center as IVec, vec as IVec);
-      if (!rst) {
-        console.error(`Failed to get line intersections for ${ele.id}`);
-        return;
-      }
+      const rst = ele.getLineIntersections(bound.center, vec);
+      if (!rst) return;
+
      const originPoint = getPointFromBoundsWithRotation(
        { ...bound, rotate: -rotate },
        rst[0]
@@ -164,7 +161,7 @@ export function getAnchors(ele: GfxModel) {
 }

 function getConnectableRelativePosition(connectable: GfxModel, position: IVec) {
-  const location = connectable.getRelativePointLocation(position as IVec);
+  const location = connectable.getRelativePointLocation(position);
  if (isVecZero(Vec.sub(position, [0, 0.5])))
    location.tangent = Vec.rot([0, -1], toRadian(connectable.rotate));
  else if (isVecZero(Vec.sub(position, [1, 0.5])))
@@ -184,7 +181,11 @@ export function getNearestConnectableAnchor(ele: Connectable, point: IVec) {
  );
 }

-function closestPoint(points: PointLocation[], point: IVec) {
+function closestPoint(
+  points: PointLocation[],
+  point: IVec
+): PointLocation | null {
+  if (points.length === 0) return null;
  const rst = points.map(p => ({ p, d: Vec.dist(p, point) }));
  rst.sort((a, b) => a.d - b.d);
  return rst[0].p;
@@ -245,7 +246,7 @@ function filterConnectablePoints<T extends IVec3 | IVec>(
 ): T[] {
  return points.filter(point => {
    if (!bound) return true;
-    return !bound.isPointInBound(point as IVec);
+    return !bound.isPointInBound([point[0], point[1]]);
  });
 }

@@ -368,15 +369,17 @@ function pushGapMidPoint(
      bound.lowerLine,
      bound2.upperLine,
      bound2.lowerLine,
-    ].map(line => {
-      return lineIntersects(
-        point as unknown as IVec,
-        [point[0], point[1] + 1],
-        line[0],
-        line[1],
-        true
-      ) as IVec;
-    });
+    ]
+      .map(line => {
+        return lineIntersects(
+          [point[0], point[1]],
+          [point[0], point[1] + 1],
+          line[0],
+          line[1],
+          true
+        );
+      })
+      .filter(p => p !== null);
    rst.sort((a, b) => a[1] - b[1]);
    const midPoint = Vec.lrp(rst[1], rst[2], 0.5);
    pushWithPriority(points, [midPoint], 6);
@@ -399,15 +402,17 @@ function pushGapMidPoint(
      bound.rightLine,
      bound2.leftLine,
      bound2.rightLine,
-    ].map(line => {
-      return lineIntersects(
-        point as unknown as IVec,
-        [point[0] + 1, point[1]],
-        line[0],
-        line[1],
-        true
-      ) as IVec;
-    });
+    ]
+      .map(line => {
+        return lineIntersects(
+          [point[0], point[1]],
+          [point[0] + 1, point[1]],
+          line[0],
+          line[1],
+          true
+        );
+      })
+      .filter(p => p !== null);
    rst.sort((a, b) => a[0] - b[0]);
    const midPoint = Vec.lrp(rst[1], rst[2], 0.5);
    pushWithPriority(points, [midPoint], 6);
@@ -480,14 +485,14 @@ function getConnectablePoints(
  expandEndBound: Bound | null
 ) {
  const lineBound = Bound.fromPoints([
-    startPoint,
-    endPoint,
-  ] as unknown[] as IVec[]);
+    [startPoint[0], startPoint[1]],
+    [endPoint[0], endPoint[1]],
+  ]);
  const outerBound =
    expandStartBound &&
    expandEndBound &&
    expandStartBound.unite(expandEndBound);
-  let points = [nextStartPoint, lastEndPoint] as IVec3[];
+  let points = [nextStartPoint, lastEndPoint];
  pushWithPriority(points, lineBound.getVerticesAndMidpoints());

  if (!startBound || !endBound) {
@@ -534,7 +539,7 @@ function getConnectablePoints(
    pushWithPriority(points, expandStartBound.getVerticesAndMidpoints());
    pushWithPriority(
      points,
-      expandStartBound.include(lastEndPoint as unknown as IVec).points
+      expandStartBound.include([lastEndPoint[0], lastEndPoint[1]]).points
    );
  }

@@ -542,7 +547,7 @@ function getConnectablePoints(
    pushWithPriority(points, expandEndBound.getVerticesAndMidpoints());
    pushWithPriority(
      points,
-      expandEndBound.include(nextStartPoint as unknown as IVec).points
+      expandEndBound.include([nextStartPoint[0], nextStartPoint[1]]).points
    );
  }

@@ -561,7 +566,7 @@ function getConnectablePoints(
        almostEqual(item[0], point[0], 0.02) &&
        almostEqual(item[1], point[1], 0.02)
    );
-  }) as IVec3[];
+  });
  if (!startEnds[0] || !startEnds[1]) {
    throw new BlockSuiteError(
      BlockSuiteError.ErrorCode.ValueNotExists,
@@ -603,7 +608,9 @@ function mergePath(points: IVec[] | IVec3[]) {
      continue;
    result.push([cur[0], cur[1]]);
  }
-  result.push(last(points as IVec[]) as IVec);
+  if (points.length !== 0) {
+    result.push([points[points.length - 1][0], points[points.length - 1][1]]);
+  }
  for (let i = 0; i < result.length - 1; i++) {
    const cur = result[i];
    const next = result[i + 1];
@@ -687,7 +694,7 @@ function getNextPoint(
  offsetW = 10,
  offsetH = 10
 ) {
-  const result: IVec = Array.from(point) as IVec;
+  const result: IVec = [point[0], point[1]];
  if (almostEqual(bound.x, result[0])) result[0] -= offsetX;
  else if (almostEqual(bound.y, result[1])) result[1] -= offsetY;
  else if (almostEqual(bound.maxX, result[0])) result[0] += offsetW;
@@ -993,7 +1000,7 @@ export class ConnectionOverlay extends Overlay {
          this.highlightPoint = anchor.point;
          result = {
            id: connectable.id,
-            position: anchor.coord as IVec,
+            position: anchor.coord,
          };
        }
      }
@@ -1001,7 +1008,7 @@ export class ConnectionOverlay extends Overlay {
      if (shortestDistance < 8 && result) break;

      // if not, check if closes to bound
-      const nearestPoint = connectable.getNearestPoint(point as IVec) as IVec;
+      const nearestPoint = connectable.getNearestPoint(point);

      if (Vec.dist(nearestPoint, point) < 8) {
        this.highlightPoint = nearestPoint;
@@ -1013,9 +1020,7 @@ export class ConnectionOverlay extends Overlay {
        target.push(connectable);
        result = {
          id: connectable.id,
-          position: bound
-            .toRelative(originPoint)
-            .map(n => clamp(n, 0, 1)) as IVec,
+          position: Vec.clampV(bound.toRelative(originPoint), 0, 1),
        };
      }

@@ -1048,7 +1053,7 @@ export class ConnectionOverlay extends Overlay {
    // at last, if not, just return the point
    if (!result) {
      result = {
-        position: point as IVec,
+        position: point,
      };
    }

@@ -1383,7 +1388,7 @@ export class ConnectorPathGenerator extends PathGenerator {
      const eb = Bound.deserialize(end.xywh);
      const startPoint = getNearestConnectableAnchor(start, eb.center);
      const endPoint = getNearestConnectableAnchor(end, sb.center);
-      return [startPoint, endPoint];
+      return (startPoint && endPoint && [startPoint, endPoint]) ?? [];
    } else {
      const endPoint = this._getConnectionPoint(connector, 'target');
      const startPoint = this._getConnectionPoint(connector, 'source');
--- a/blocksuite/affine/blocks/surface/src/renderer/tool-overlay.ts
+++ b/blocksuite/affine/blocks/surface/src/renderer/tool-overlay.ts
@@ -1,6 +1,7 @@
 import { DisposableGroup } from '@blocksuite/global/disposable';
 import { noop } from '@blocksuite/global/utils';
 import type { GfxController } from '@blocksuite/std/gfx';
+import { startWith } from 'rxjs';

 import type { RoughCanvas } from '../utils/rough/canvas';
 import { Overlay } from './overlay';
@@ -18,10 +19,11 @@ export class ToolOverlay extends Overlay {
    super(gfx);
    this.x = 0;
    this.y = 0;
-    this.globalAlpha = 0;
+    this.globalAlpha = 1;
    this.gfx = gfx;
+
    this.disposables.add(
-      this.gfx.viewport.viewportUpdated.subscribe(() => {
+      this.gfx.viewport.viewportUpdated.pipe(startWith(null)).subscribe(() => {
        // when viewport is updated, we should keep the overlay in the same position
        // to get last mouse position and convert it to model coordinates
        const pos = this.gfx.tool.lastMousePos$.value;
--- a/blocksuite/affine/components/src/color-picker/utils.ts
+++ b/blocksuite/affine/components/src/color-picker/utils.ts
@@ -321,7 +321,7 @@ export const calcCustomButtonStyle = (
    return { '--b': b, '--c': c };
  }

-  if (color.startsWith('---')) {
+  if (color.startsWith('--')) {
    if (!color.endsWith('transparent')) {
      b = 'var(--affine-background-overlay-panel-color)';
      c = keepColor(
--- a/blocksuite/affine/components/src/toggle-switch/index.ts
+++ b/blocksuite/affine/components/src/toggle-switch/index.ts
@@ -38,11 +38,11 @@ const styles = css`
    transition: 0.1s;
  }

-  label.subscribe {
+  label.on {
    background: var(--affine-primary-color);
  }

-  label.subscribe:after {
+  label.on:after {
    left: calc(100% - 1px);
    transform: translateX(-100%);
  }
--- a/blocksuite/affine/components/src/tooltip-content-with-shortcut/index.ts
+++ b/blocksuite/affine/components/src/tooltip-content-with-shortcut/index.ts
@@ -1,5 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
+import { repeat } from 'lit-html/directives/repeat.js';

 export class TooltipContentWithShortcut extends LitElement {
  static override styles = css`
@@ -9,6 +10,10 @@ export class TooltipContentWithShortcut extends LitElement {
      align-items: center;
      gap: 10px;
    }
+    .tooltip__shortcuts {
+      display: flex;
+      gap: 2px;
+    }
    .tooltip__shortcut {
      font-size: 12px;
      position: relative;
@@ -28,19 +33,30 @@ export class TooltipContentWithShortcut extends LitElement {
      opacity: 0.2;
    }
    .tooltip__label {
+      display: flex;
+      flex: 1;
      white-space: pre;
    }
  `;

+  get shortcuts() {
+    let shortcut = this.shortcut;
+    if (!shortcut) return [];
+    return shortcut.split(' ');
+  }
+
  override render() {
-    const { tip, shortcut, postfix } = this;
+    const { tip, shortcuts, postfix } = this;

    return html`
      <div class="tooltip-with-shortcut">
        <span class="tooltip__label">${tip}</span>
-        ${shortcut
-          ? html`<span class="tooltip__shortcut">${shortcut}</span>`
-          : ''}
+        <div class="tooltip__shortcuts">
+          ${repeat(
+            shortcuts,
+            shortcut => html`<span class="tooltip__shortcut">${shortcut}</span>`
+          )}
+        </div>
        ${postfix ? html`<span class="tooltip__postfix">${postfix}</span>` : ''}
      </div>
    `;
--- a/blocksuite/affine/fragments/outline/src/card/outline-card.css.ts
+++ b/blocksuite/affine/fragments/outline/src/card/outline-card.css.ts
@@ -26,10 +26,10 @@ export const cardPreview = style({
  borderRadius: '4px',
  cursor: 'default',
  userSelect: 'none',
-  ':hover': {
-    background: cssVarV2('layer/background/hoverOverlay'),
-  },
  selectors: {
+    [`${outlineCard}[data-sortable="true"] &:hover`]: {
+      background: cssVarV2('layer/background/hoverOverlay'),
+    },
    [`${outlineCard}[data-status="selected"] &`]: {
      background: cssVarV2('layer/background/hoverOverlay'),
    },
--- a/blocksuite/affine/fragments/outline/src/card/outline-preview.css.ts
+++ b/blocksuite/affine/fragments/outline/src/card/outline-preview.css.ts
@@ -1,6 +1,6 @@
 import { cssVar } from '@toeverything/theme';
 import { cssVarV2 } from '@toeverything/theme/v2';
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';

 export const outlineBlockPreview = style({
  fontFamily: cssVar('fontFamily'),
@@ -108,6 +108,11 @@ export const linkedDocPreviewUnavailable = style({
  color: cssVarV2('text/disable'),
 });

+export const linkedDocPreviewAvailable = style({});
+globalStyle(`${linkedDocPreviewAvailable} > svg`, {
+  marginBottom: '0.1em',
+});
+
 export const linkedDocTextUnavailable = style({
  color: cssVarV2('text/disable'),
  textDecoration: 'line-through',
--- a/blocksuite/affine/fragments/outline/src/card/outline-preview.ts
+++ b/blocksuite/affine/fragments/outline/src/card/outline-preview.ts
@@ -67,6 +67,7 @@ export class OutlineBlockPreview extends SignalWatcher(
        return html`<span
          class=${classMap({
            [styles.linkedDocPreviewUnavailable]: unavailable,
+            [styles.linkedDocPreviewAvailable]: !unavailable,
          })}
        >
          ${icon}
--- a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/consts.ts
+++ b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/consts.ts
@@ -0,0 +1,29 @@
+import {
+  EdgelessBrushDarkIcon,
+  EdgelessBrushLightIcon,
+  EdgelessHighlighterDarkIcon,
+  EdgelessHighlighterLightIcon,
+} from './icons';
+import type { Pen } from './types';
+
+export const penIconMap = {
+  dark: {
+    brush: EdgelessBrushDarkIcon,
+    highlighter: EdgelessHighlighterDarkIcon,
+  },
+  light: {
+    brush: EdgelessBrushLightIcon,
+    highlighter: EdgelessHighlighterLightIcon,
+  },
+};
+
+export const penInfoMap: { [k in Pen]: { tip: string; shortcut: string } } = {
+  brush: {
+    tip: 'Pen',
+    shortcut: 'P',
+  },
+  highlighter: {
+    tip: 'Highlighter',
+    shortcut: '⇧ P',
+  },
+};
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export * from '@blocksuite/affine-widget-keyboard-toolbar';`