fix(core): audio job submittion timeout too short (#11918)

fix AF-2556

.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

.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:

.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`",

.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
 
@@ -1141,6 +1177,7 @@ jobs:
       - check-yarn-binary
       - e2e-test
       - e2e-blocksuite-test
+      - e2e-blocksuite-cross-browser-test
       - e2e-mobile-test
       - unit-test
       - build-native

.gitignore

@@ -85,3 +85,6 @@ packages/frontend/core/public/static/templates
 af
 af.cmd
 *.resolved
+
+# playwright
+storageState.json

.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"
     }
   ]
 }

.yarnrc.yml

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

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.18"
+version = "1.2.19"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "525046617d8376e3db1deffb079e91cef90a89fc3ca5c185bbf8c9ecdd15cd5c"
+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]]
@@ -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"
@@ -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",
 ]

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 }

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",

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'],
@@ -4091,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);
+  });
 });

blocksuite/affine/all/src/widgets/keyboard-toolbar.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-keyboard-toolbar';

blocksuite/affine/all/src/widgets/linked-doc.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-linked-doc';

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" },

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> {

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>
+      `;
     },
   },
   {

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;
+  }
 `;

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`

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;
     }
   `;
 

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",

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,

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}>`;
           }
         }
 

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,
+  ];
+}

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();

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,
   };
 }
 

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';

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],
+    };
+  }
+}

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
+);

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" },

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);
     }
   }
 

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>
       `
     );

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;
     }
   }

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;

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,
     });
   }
 

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,
     });
   }
 

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);
       },
     },
     {

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 = () => {

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 });
       },
     },
   ],

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', {

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', {

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';

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() {

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
         );
 

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",

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';

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],
+    };
+  }
+}

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
+);

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" },

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(
                 {
@@ -71,7 +43,6 @@ export const paragraphBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
                 'children'
               )
               .closeNode();
-            walkerContext.skipAllChildren();
             break;
           }
           case 'heading': {
@@ -119,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) => {

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:*",

blocksuite/affine/blocks/root/src/clipboard/readonly-clipboard.ts

@@ -34,6 +34,12 @@ const NotionClipboardConfig = ClipboardAdapterConfigExtension({
   priority: 95,
 });
 
+const HtmlClipboardConfig = ClipboardAdapterConfigExtension({
+  mimeType: 'text/html',
+  adapter: HtmlAdapter,
+  priority: 90,
+});
+
 const imageClipboardConfigs = [
   'image/apng',
   'image/avif',
@@ -46,20 +52,14 @@ const imageClipboardConfigs = [
   return ClipboardAdapterConfigExtension({
     mimeType,
     adapter: ImageAdapter,
-    priority: 85,
+    priority: 80,
   });
 });
 
 const PlainTextClipboardConfig = ClipboardAdapterConfigExtension({
   mimeType: 'text/plain',
   adapter: MixTextAdapter,
-  priority: 80,
-});
-
-const HtmlClipboardConfig = ClipboardAdapterConfigExtension({
-  mimeType: 'text/html',
-  adapter: HtmlAdapter,
-  priority: 75,
+  priority: 70,
 });
 
 const AttachmentClipboardConfig = ClipboardAdapterConfigExtension({

blocksuite/affine/blocks/root/src/common-specs/index.ts

@@ -33,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';
@@ -44,7 +45,7 @@ import { RootBlockAdapterExtensions } from '../adapters/extension';
 import { clipboardConfigs } from '../clipboard';
 import { builtinToolbarConfig } from '../configs/toolbar';
 import { fallbackKeymap } from '../keyboard/keymap';
-import { linkedDocWidget, modalWidget, viewportOverlayWidget } from './widgets';
+import { viewportOverlayWidget } from './widgets';
 
 /**
  * Why do we add these extensions into CommonSpecs?
@@ -83,7 +84,6 @@ export const CommonSpecs: ExtensionType[] = [
   ...clipboardConfigs,
   ...EdgelessElementViews,
   ...EdgelessElementRendererExtension,
-  modalWidget,
   SlashMenuExtension,
   linkedDocWidget,
   dragHandleWidget,

blocksuite/affine/blocks/root/src/common-specs/widgets.ts

@@ -1,20 +1,8 @@
 import { WidgetViewExtension } from '@blocksuite/std';
 import { literal, unsafeStatic } from 'lit/static-html.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 linkedDocWidget = WidgetViewExtension(
-  'affine:page',
-  AFFINE_LINKED_DOC_WIDGET,
-  literal`${unsafeStatic(AFFINE_LINKED_DOC_WIDGET)}`
-);
 export const viewportOverlayWidget = WidgetViewExtension(
   'affine:page',
   AFFINE_VIEWPORT_OVERLAY_WIDGET,

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>
           `}
         >

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');
         },

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;

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;
   }

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;
   }

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,11 +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 { 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,
@@ -93,7 +89,6 @@ function registerGfxEffects() {
 }
 
 function registerWidgets() {
-  customElements.define(AFFINE_MODAL_WIDGET, AffineModalWidget);
   customElements.define(
     AFFINE_PAGE_DRAGGING_AREA_WIDGET,
     AffinePageDraggingAreaWidget
@@ -124,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);

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';

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) {

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();
 

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');

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;
-  }
 }

blocksuite/affine/blocks/root/src/types.ts

@@ -1,40 +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_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_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_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

blocksuite/affine/blocks/root/src/widgets/index.ts

@@ -1,18 +1,4 @@
 export { AffineEdgelessZoomToolbarWidget } from './edgeless-zoom-toolbar/index.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';

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;
-}

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;
-  }
-}

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" },

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(

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%);
   }

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>
     `;

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'),
     },

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',

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}

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',
+  },
+};

blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts

@@ -7,11 +7,16 @@ import {
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { SignalWatcher } from '@blocksuite/global/lit';
-import { computed, type Signal } from '@preact/signals-core';
+import {
+  computed,
+  type ReadonlySignal,
+  type Signal,
+} from '@preact/signals-core';
 import { css, html, LitElement, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { penInfoMap } from './consts';
 import type { Pen, PenMap } from './types';
 
 export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
@@ -26,8 +31,14 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
 
     .pens {
       display: flex;
+      height: 100%;
       padding: 0 4px;
-      align-items: center;
+      align-items: flex-end;
+
+      edgeless-tool-icon-button {
+        display: flex;
+        align-self: flex-start;
+      }
 
       .pen-wrapper {
         display: flex;
@@ -36,7 +47,7 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
         align-items: flex-end;
         justify-content: center;
         position: relative;
-        transform: translateY(10px);
+        transform: translateY(-2px);
         transition-property: color, transform;
         transition-duration: 300ms;
         transition-timing-function: ease-in-out;
@@ -46,7 +57,7 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
       .pen-wrapper:hover,
       .pen-wrapper:active,
       .pen-wrapper[data-active] {
-        transform: translateY(-10px);
+        transform: translateY(-22px);
       }
     }
 
@@ -56,6 +67,8 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
     }
 
     menu-divider {
+      display: flex;
+      align-self: center;
       height: 24px;
       margin: 0 9px;
     }
@@ -83,42 +96,64 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
   override render() {
     const {
       _theme$: { value: theme },
-      color$: { value: currentColor },
       colors$: {
         value: { brush: brushColor, highlighter: highlighterColor },
       },
-      pen$: { value: pen },
       penIconMap$: {
         value: { brush: brushIcon, highlighter: highlighterIcon },
       },
+      penInfo$: {
+        value: { type, color },
+      },
     } = this;
 
     return html`
       <edgeless-slide-menu>
         <div class="pens" slot="prefix">
-          <div
-            class="pen-wrapper edgeless-brush-button"
-            ?data-active="${pen === 'brush'}"
-            style=${styleMap({ color: brushColor })}
+          <edgeless-tool-icon-button
+            class="edgeless-brush-button"
+            .tooltip=${html`<affine-tooltip-content-with-shortcut
+              data-tip="${penInfoMap.brush.tip}"
+              data-shortcut="${penInfoMap.brush.shortcut}"
+            ></affine-tooltip-content-with-shortcut>`}
+            .tooltipOffset=${20}
+            .hover=${false}
             @click=${() => this._onPickPen('brush')}
           >
-            ${brushIcon}
-          </div>
-          <div
-            class="pen-wrapper edgeless-highlighter-button"
-            ?data-active="${pen === 'highlighter'}"
-            style=${styleMap({ color: highlighterColor })}
+            <div
+              class="pen-wrapper"
+              style=${styleMap({ color: brushColor })}
+              ?data-active="${type === 'brush'}"
+            >
+              ${brushIcon}
+            </div>
+          </edgeless-tool-icon-button>
+
+          <edgeless-tool-icon-button
+            class="edgeless-highlighter-button"
+            .tooltip=${html`<affine-tooltip-content-with-shortcut
+              data-tip="${penInfoMap.highlighter.tip}"
+              data-shortcut="${penInfoMap.highlighter.shortcut}"
+            ></affine-tooltip-content-with-shortcut>`}
+            .tooltipOffset=${20}
+            .hover=${false}
             @click=${() => this._onPickPen('highlighter')}
           >
-            ${highlighterIcon}
-          </div>
+            <div
+              class="pen-wrapper"
+              style=${styleMap({ color: highlighterColor })}
+              ?data-active="${type === 'highlighter'}"
+            >
+              ${highlighterIcon}
+            </div>
+          </edgeless-tool-icon-button>
           <menu-divider .vertical=${true}></menu-divider>
         </div>
         <div class="menu-content">
           <edgeless-color-panel
             class="one-way"
             @select=${this._onPickColor}
-            .value=${currentColor}
+            .value=${color}
             .theme=${theme}
             .palettes=${DefaultTheme.StrokeColorShortPalettes}
             .shouldKeepColor=${true}
@@ -135,14 +170,20 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
   accessor onChange!: (props: Record<string, unknown>) => void;
 
   @property({ attribute: false })
-  accessor colors$!: Signal<PenMap<string>>;
+  accessor colors$!: ReadonlySignal<PenMap<string>>;
 
   @property({ attribute: false })
-  accessor color$!: Signal<string>;
+  accessor penIconMap$!: ReadonlySignal<PenMap<TemplateResult>>;
 
   @property({ attribute: false })
   accessor pen$!: Signal<Pen>;
 
   @property({ attribute: false })
-  accessor penIconMap$!: Signal<PenMap<TemplateResult>>;
+  accessor penInfo$!: ReadonlySignal<{
+    type: Pen;
+    color: string;
+    icon: TemplateResult<1>;
+    tip: string;
+    shortcut: string;
+  }>;
 }

blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts

@@ -10,7 +10,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 
-import { penIconMap } from './icons';
+import { penIconMap, penInfoMap } from './consts';
 import type { Pen } from './types';
 
 export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
@@ -81,6 +81,18 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
     return this.penIconMap$.value[pen];
   });
 
+  private readonly penInfo$ = computed(() => {
+    const type = this.pen$.value;
+    const icon = this.penIcon$.value;
+    const color = this.color$.value;
+    return {
+      ...penInfoMap[type],
+      color,
+      icon,
+      type,
+    };
+  });
+
   private readonly pen$ = signal<Pen>('brush');
 
   override enableActiveBackground = true;
@@ -89,9 +101,20 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
 
   override firstUpdated() {
     this.disposables.add(
-      this.gfx.tool.currentToolName$.subscribe(tool => {
-        if (this.type.map(String).includes(tool)) return;
-        this.tryDisposePopper();
+      this.gfx.tool.currentToolName$.subscribe(name => {
+        const tool = this.type.find(t => t === name);
+        if (!tool) {
+          this.tryDisposePopper();
+          return;
+        }
+
+        if (tool !== this.pen$.peek()) {
+          this.pen$.value = tool;
+        }
+
+        if (this.active) return;
+
+        this._togglePenMenu();
       })
     );
   }
@@ -101,10 +124,10 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
     !this.active && this.setEdgelessTool(this.pen$.peek());
     const menu = this.createPopper('edgeless-pen-menu', this);
     Object.assign(menu.element, {
-      color$: this.color$,
       colors$: this.colors$,
-      pen$: this.pen$,
       penIconMap$: this.penIconMap$,
+      pen$: this.pen$,
+      penInfo$: this.penInfo$,
       edgeless: this.edgeless,
       onChange: (props: Record<string, unknown>) => {
         const pen = this.pen$.peek();
@@ -117,20 +140,22 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
   override render() {
     const {
       active,
-      penIcon$: { value: icon },
-      color$: { value: color },
+      penInfo$: {
+        value: { type, color, icon, tip, shortcut },
+      },
     } = this;
 
     return html`
       <edgeless-toolbar-button
         class="edgeless-pen-button"
+        data-drawing-tool="${type}"
         .tooltip=${when(
           this.popper,
           () => nothing,
           () =>
             html`<affine-tooltip-content-with-shortcut
-              data-tip="${'Pen'}"
-              data-shortcut="${'P'}"
+              data-tip="${tip}"
+              data-shortcut="${shortcut}"
             ></affine-tooltip-content-with-shortcut>`
         )}
         .tooltipOffset=${4}

blocksuite/affine/gfx/turbo-renderer/src/turbo-renderer.ts

@@ -73,16 +73,20 @@ export const TurboRendererConfigFactory =
 export class ViewportTurboRendererExtension extends GfxExtension {
   static override key = 'viewportTurboRenderer';
 
-  private readonly state$ = new BehaviorSubject<RenderingState>('inactive');
+  public readonly state$ = new BehaviorSubject<RenderingState>('inactive');
   public readonly canvas: HTMLCanvasElement = document.createElement('canvas');
+  public layoutCacheData: ViewportLayoutTree | null = null;
   private readonly worker: Worker;
   private readonly disposables = new DisposableGroup();
-  private layoutCacheData: ViewportLayoutTree | null = null;
   private layoutVersion = 0;
   private bitmap: ImageBitmap | null = null;
   private viewportElement: GfxViewportElement | null = null;
   private readonly refresh$ = new Subject<void>();
 
+  public get currentState(): RenderingState {
+    return this.state$.value;
+  }
+
   constructor(gfx: GfxController) {
     super(gfx);
 

blocksuite/affine/inlines/footnote/src/adapters/markdown/markdown-inline.ts

@@ -29,13 +29,23 @@ export const markdownFootnoteReferenceToDeltaMatcher =
         const footnoteReference = FootNoteReferenceParamsSchema.parse(
           footnoteDefinitionJson
         );
+
+        // If the footnote reference is an attachment, and the file type is not set,
+        // Try to infer the file type from the file name.
+        const { type: referenceType, fileName, fileType } = footnoteReference;
+        if (referenceType === 'attachment' && fileName && !fileType) {
+          const ext = fileName.split('.').pop()?.toLowerCase();
+          if (ext) {
+            footnoteReference.fileType = ext;
+          }
+        }
+
         const footnote = {
           label: ast.identifier,
           reference: footnoteReference,
         };
         return [{ insert: ' ', attributes: { footnote } }];
-      } catch (error) {
-        console.warn('Error parsing footnote reference', error);
+      } catch {
         return [];
       }
     },

blocksuite/affine/inlines/footnote/src/footnote-node/footnote-node.ts

@@ -1,4 +1,5 @@
 import { HoverController } from '@blocksuite/affine-components/hover';
+import { PeekViewProvider } from '@blocksuite/affine-components/peek';
 import type { FootNote } from '@blocksuite/affine-model';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
@@ -12,11 +13,11 @@ import {
 import {
   INLINE_ROOT_ATTR,
   type InlineRootElement,
-  ZERO_WIDTH_NON_JOINER,
-  ZERO_WIDTH_SPACE,
+  ZERO_WIDTH_FOR_EMBED_NODE,
+  ZERO_WIDTH_FOR_EMPTY_LINE,
 } from '@blocksuite/std/inline';
 import type { DeltaInsert } from '@blocksuite/store';
-import { shift } from '@floating-ui/dom';
+import { flip, offset, shift } from '@floating-ui/dom';
 import { baseTheme } from '@toeverything/theme';
 import { css, html, nothing, unsafeCSS } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -27,6 +28,8 @@ import type { FootNoteNodeConfigProvider } from './footnote-config';
 
 // Virtual padding for the footnote popup overflow detection offsets.
 const POPUP_SHIFT_PADDING = 8;
+// The offset between the footnote node and the popup.
+const POPUP_OFFSET = 4;
 
 export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
   static override styles = css`
@@ -105,8 +108,55 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
     return selfInlineRange;
   }
 
+  get footnote() {
+    return this.delta.attributes?.footnote;
+  }
+
+  get readonly() {
+    return this.std.store.readonly;
+  }
+
+  onFootnoteClick = () => {
+    if (!this.footnote) {
+      return;
+    }
+    const { type, docId, url } = this.footnote.reference;
+
+    switch (type) {
+      case 'doc':
+        if (docId) {
+          this._handleDocReference(docId);
+        }
+        break;
+      case 'url':
+        if (url) {
+          this._handleUrlReference(url);
+        }
+        break;
+    }
+  };
+
+  private readonly _handleDocReference = (docId: string) => {
+    if (this.readonly) {
+      return;
+    }
+
+    this.std
+      .getOptional(PeekViewProvider)
+      ?.peek({
+        docId,
+      })
+      .catch(console.error);
+  };
+
+  private readonly _handleUrlReference = (url: string) => {
+    window.open(url, '_blank');
+  };
+
   private readonly _FootNoteDefaultContent = (footnote: FootNote) => {
-    return html`<span class="footnote-content-default"
+    return html`<span
+      class="footnote-content-default"
+      @click=${this.onFootnoteClick}
       >${footnote.label}</span
     >`;
   };
@@ -121,14 +171,14 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
           .footnote=${footnote}
           .std=${this.std}
           .abortController=${abortController}
-          .onPopupClick=${this.onPopupClick}
+          .onPopupClick=${this.onPopupClick ?? this.onFootnoteClick}
         ></footnote-popup>`;
   };
 
   private readonly _whenHover: HoverController = new HoverController(
     this,
     ({ abortController }) => {
-      const footnote = this.delta.attributes?.footnote;
+      const { footnote } = this;
       if (!footnote) return null;
 
       if (
@@ -155,12 +205,16 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
 
       return {
         template: this._FootNotePopup(footnote, abortController),
-        container: this,
+        container: this.std.host,
         computePosition: {
           referenceElement: this,
           placement: 'top',
           autoUpdate: true,
-          middleware: [shift({ padding: POPUP_SHIFT_PADDING })],
+          middleware: [
+            shift({ padding: POPUP_SHIFT_PADDING }),
+            flip(),
+            offset(POPUP_OFFSET),
+          ],
         },
       };
     },
@@ -186,7 +240,7 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
     return html`<span
       ${this.hidePopup ? '' : ref(this._whenHover.setReference)}
       class=${nodeClasses}
-      >${node}<v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
+      >${node}<v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text
     ></span>`;
   }
 
@@ -195,7 +249,7 @@ export class AffineFootnoteNode extends WithDisposable(ShadowlessElement) {
 
   @property({ type: Object })
   accessor delta: DeltaInsert<AffineTextAttributes> = {
-    insert: ZERO_WIDTH_SPACE,
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
     attributes: {},
   };
 

blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup-chip.ts

@@ -9,48 +9,42 @@ export class FootNotePopupChip extends LitElement {
       border-radius: 4px;
       max-width: 173px;
       height: 24px;
-      padding: 2px 4px;
+      padding: 4px;
       align-items: center;
-      gap: 4px;
+      gap: 8px;
       box-sizing: border-box;
       cursor: default;
       transition: width 0.3s ease-in-out;
     }
 
-    .prefix-icon,
-    .suffix-icon {
+    .prefix-icon {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 16px;
       height: 16px;
+      width: 16px;
       color: ${unsafeCSSVarV2('icon/primary')};
       border-radius: 4px;
 
       svg,
-      object {
+      img {
         width: 16px;
         height: 16px;
         fill: ${unsafeCSSVarV2('icon/primary')};
       }
     }
 
-    .suffix-icon:hover {
-      background-color: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
-      cursor: pointer;
-    }
-
     .popup-chip-label {
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       text-align: left;
-      height: 20px;
-      line-height: 20px;
+      height: 22px;
+      line-height: 22px;
       color: ${unsafeCSSVarV2('text/primary')};
-      font-size: 12px;
-      font-weight: 400;
+      font-size: var(--affine-font-sm);
+      font-weight: 500;
     }
   `;
 
@@ -63,11 +57,6 @@ export class FootNotePopupChip extends LitElement {
             </div>`
           : nothing}
         <div class="popup-chip-label" title=${this.tooltip}>${this.label}</div>
-        ${this.suffixIcon
-          ? html`<div class="suffix-icon" @click=${this.onSuffixClick}>
-              ${this.suffixIcon}
-            </div>`
-          : nothing}
       </div>
     `;
   }
@@ -78,9 +67,6 @@ export class FootNotePopupChip extends LitElement {
   @property({ attribute: false })
   accessor label: string = '';
 
-  @property({ attribute: false })
-  accessor suffixIcon: TemplateResult | undefined = undefined;
-
   @property({ attribute: false })
   accessor tooltip: string = '';
 
@@ -89,7 +75,4 @@ export class FootNotePopupChip extends LitElement {
 
   @property({ attribute: false })
   accessor onPrefixClick: (() => void) | undefined = undefined;
-
-  @property({ attribute: false })
-  accessor onSuffixClick: (() => void) | undefined = undefined;
 }

blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts

@@ -4,7 +4,6 @@ import {
   LightLoadingIcon,
   WebIcon16,
 } from '@blocksuite/affine-components/icons';
-import { PeekViewProvider } from '@blocksuite/affine-components/peek';
 import { ColorScheme, type FootNote } from '@blocksuite/affine-model';
 import {
   DocDisplayMetaProvider,
@@ -13,10 +12,9 @@ import {
 } from '@blocksuite/affine-shared/services';
 import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
-import { DualLinkIcon, LinkIcon } from '@blocksuite/icons/lit';
 import type { BlockStdScope } from '@blocksuite/std';
 import { computed, signal } from '@preact/signals-core';
-import { css, html, LitElement, type TemplateResult } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import type { FootNotePopupClickHandler } from './footnote-config';
@@ -57,36 +55,11 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
       }
 
       const favicon = this._linkPreview$.value?.favicon;
-      if (!favicon) {
-        return undefined;
-      }
-
-      const titleIconType =
-        favicon.split('.').pop() === 'svg'
-          ? 'svg+xml'
-          : favicon.split('.').pop();
-      const titleIcon = html`<object
-        type="image/${titleIconType}"
-        data=${favicon}
-        draggable="false"
-      >
-        ${WebIcon16}
-      </object>`;
-      return titleIcon;
+      return favicon ? html`<img src=${favicon} alt="favicon" />` : WebIcon16;
     }
     return undefined;
   });
 
-  private readonly _suffixIcon = (): TemplateResult | undefined => {
-    const referenceType = this.footnote.reference.type;
-    if (referenceType === 'doc') {
-      return DualLinkIcon({ width: '16px', height: '16px' });
-    } else if (referenceType === 'url') {
-      return LinkIcon({ width: '16px', height: '16px' });
-    }
-    return undefined;
-  };
-
   private readonly _popupLabel$ = computed(() => {
     const referenceType = this.footnote.reference.type;
     let label = '';
@@ -127,50 +100,9 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
     return theme === ColorScheme.Light ? LightLoadingIcon : DarkLoadingIcon;
   };
 
-  /**
-   * When clicking the chip, we will navigate to the reference doc or open the url
-   */
-  private readonly _handleDocReference = (docId: string) => {
-    this.std
-      .getOptional(PeekViewProvider)
-      ?.peek({
-        docId,
-      })
-      .catch(console.error);
-  };
-
-  private readonly _handleUrlReference = (url: string) => {
-    window.open(url, '_blank');
-  };
-
-  private readonly _handleReference = () => {
-    const { type, docId, url } = this.footnote.reference;
-
-    switch (type) {
-      case 'doc':
-        if (docId) {
-          this._handleDocReference(docId);
-        }
-        break;
-      case 'url':
-        if (url) {
-          this._handleUrlReference(url);
-        }
-        break;
-    }
-
-    this.abortController.abort();
-  };
-
   private readonly _onChipClick = () => {
-    // If the onPopupClick is defined, use it
-    if (this.onPopupClick) {
-      this.onPopupClick(this.footnote, this.abortController);
-      return;
-    }
-
-    // Otherwise, handle the reference by default
-    this._handleReference();
+    this.onPopupClick(this.footnote, this.abortController);
+    this.abortController.abort();
   };
 
   override connectedCallback() {
@@ -199,7 +131,6 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
         <footnote-popup-chip
           .prefixIcon=${this._prefixIcon$.value}
           .label=${this._popupLabel$.value}
-          .suffixIcon=${this._suffixIcon()}
           .onClick=${this._onChipClick}
           .tooltip=${this._tooltip$.value}
         ></footnote-popup-chip>
@@ -217,5 +148,5 @@ export class FootNotePopup extends SignalWatcher(WithDisposable(LitElement)) {
   accessor abortController!: AbortController;
 
   @property({ attribute: false })
-  accessor onPopupClick: FootNotePopupClickHandler | undefined = undefined;
+  accessor onPopupClick: FootNotePopupClickHandler | (() => void) = () => {};
 }

blocksuite/affine/inlines/latex/src/latex-node/latex-editor-unit.ts

@@ -1,6 +1,6 @@
 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';
@@ -50,6 +50,6 @@ export class LatexEditorUnit extends ShadowlessElement {
 
   @property({ attribute: false })
   accessor delta: DeltaInsert<AffineTextAttributes> = {
-    insert: ZERO_WIDTH_SPACE,
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
   };
 }

blocksuite/affine/inlines/latex/src/latex-node/latex-node.ts

@@ -9,8 +9,8 @@ import {
 } from '@blocksuite/std';
 import {
   type InlineEditor,
-  ZERO_WIDTH_NON_JOINER,
-  ZERO_WIDTH_SPACE,
+  ZERO_WIDTH_FOR_EMBED_NODE,
+  ZERO_WIDTH_FOR_EMPTY_LINE,
 } from '@blocksuite/std/inline';
 import type { DeltaInsert } from '@blocksuite/store';
 import { signal } from '@preact/signals-core';
@@ -178,7 +178,7 @@ export class AffineLatexNode extends SignalWatcher(
   override render() {
     return html`<span class="affine-latex" data-selected=${this.selected}
       ><div class="latex-container"></div>
-      <v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
+      <v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text
     ></span>`;
   }
 
@@ -244,7 +244,7 @@ export class AffineLatexNode extends SignalWatcher(
 
   @property({ attribute: false })
   accessor delta: DeltaInsert<AffineTextAttributes> = {
-    insert: ZERO_WIDTH_SPACE,
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
   };
 
   @property({ attribute: false })

blocksuite/affine/inlines/link/src/link-node/affine-link.ts

@@ -13,7 +13,7 @@ import { BLOCK_ID_ATTR, ShadowlessElement } from '@blocksuite/std';
 import {
   INLINE_ROOT_ATTR,
   type InlineRootElement,
-  ZERO_WIDTH_SPACE,
+  ZERO_WIDTH_FOR_EMPTY_LINE,
 } from '@blocksuite/std/inline';
 import type { DeltaInsert } from '@blocksuite/store';
 import { css, html } from 'lit';
@@ -177,7 +177,7 @@ export class AffineLink extends WithDisposable(ShadowlessElement) {
 
   @property({ type: Object })
   accessor delta: DeltaInsert<AffineTextAttributes> = {
-    insert: ZERO_WIDTH_SPACE,
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
   };
 
   @property({ attribute: false })

blocksuite/affine/inlines/mention/src/affine-mention.ts

@@ -5,8 +5,8 @@ import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import type { BlockStdScope } from '@blocksuite/std';
 import { ShadowlessElement } from '@blocksuite/std';
 import {
-  ZERO_WIDTH_NON_JOINER,
-  ZERO_WIDTH_SPACE,
+  ZERO_WIDTH_FOR_EMBED_NODE,
+  ZERO_WIDTH_FOR_EMPTY_LINE,
 } from '@blocksuite/std/inline';
 import type { DeltaInsert } from '@blocksuite/store';
 import { css, html } from 'lit';
@@ -88,7 +88,7 @@ export class AffineMention extends SignalWatcher(
       data-selected=${this.selected}
       data-type="error"
       class="affine-mention"
-      >@Unknown Member<v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
+      >@Unknown Member<v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text
     ></span>`;
 
     const userService = this.std.getOptional(UserProvider);
@@ -107,7 +107,7 @@ export class AffineMention extends SignalWatcher(
           data-selected=${this.selected}
           data-type="removed"
           class="affine-mention"
-          >@Inactive Member<v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
+          >@Inactive Member<v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text
         ></span>`;
       } else {
         return html`<span
@@ -115,7 +115,7 @@ export class AffineMention extends SignalWatcher(
           data-type="default"
           class="affine-mention"
           >@${userInfo$.value.name ?? 'Unknown'}<v-text
-            .str=${ZERO_WIDTH_NON_JOINER}
+            .str=${ZERO_WIDTH_FOR_EMBED_NODE}
           ></v-text
         ></span>`;
       }
@@ -129,7 +129,7 @@ export class AffineMention extends SignalWatcher(
         >@loading<span class="dots"
           ><span class="dot">.</span><span class="dot">.</span
           ><span class="dot">.</span></span
-        ><v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
+        ><v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text
       ></span>`;
     }
 
@@ -138,7 +138,7 @@ export class AffineMention extends SignalWatcher(
 
   @property({ type: Object })
   accessor delta: DeltaInsert<AffineTextAttributes> = {
-    insert: ZERO_WIDTH_SPACE,
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
     attributes: {},
   };
 

blocksuite/affine/inlines/preset/src/nodes/affine-text.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';
@@ -30,6 +30,6 @@ export class AffineText extends ShadowlessElement {
 
   @property({ type: Object })
   accessor delta: DeltaInsert<AffineTextAttributes> = {
-    insert: ZERO_WIDTH_SPACE,
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
   };
 }

blocksuite/affine/inlines/reference/src/reference-node/reference-node.ts

@@ -22,8 +22,8 @@ import { BLOCK_ID_ATTR, ShadowlessElement } from '@blocksuite/std';
 import {
   INLINE_ROOT_ATTR,
   type InlineRootElement,
-  ZERO_WIDTH_NON_JOINER,
-  ZERO_WIDTH_SPACE,
+  ZERO_WIDTH_FOR_EMBED_NODE,
+  ZERO_WIDTH_FOR_EMPTY_LINE,
 } from '@blocksuite/std/inline';
 import type { DeltaInsert, DocMeta, Store } from '@blocksuite/store';
 import { css, html, nothing } from 'lit';
@@ -49,6 +49,10 @@ export class AffineReference extends WithDisposable(ShadowlessElement) {
       cursor: pointer;
       user-select: none;
       padding: 1px 2px 1px 0;
+
+      svg {
+        margin-bottom: 0.1em;
+      }
     }
     .affine-reference:hover {
       background: var(--affine-hover-color);
@@ -274,14 +278,14 @@ export class AffineReference extends WithDisposable(ShadowlessElement) {
             >${title}</span
           >`;
 
-    // we need to add `<v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text>` in an
+    // we need to add `<v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text>` in an
     // embed element to make sure inline range calculation is correct
     return html`<span
       data-selected=${this.selected}
       class="affine-reference"
       style=${styleMap(style)}
       @click=${(event: MouseEvent) => this.open({ event })}
-      >${content}<v-text .str=${ZERO_WIDTH_NON_JOINER}></v-text
+      >${content}<v-text .str=${ZERO_WIDTH_FOR_EMBED_NODE}></v-text
     ></span>`;
   }
 
@@ -299,7 +303,7 @@ export class AffineReference extends WithDisposable(ShadowlessElement) {
 
   @property({ type: Object })
   accessor delta: DeltaInsert<AffineTextAttributes> = {
-    insert: ZERO_WIDTH_SPACE,
+    insert: ZERO_WIDTH_FOR_EMPTY_LINE,
     attributes: {},
   };
 

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

@@ -33,7 +33,7 @@ export const CalloutBlockSchema = defineBlockSchema({
       'affine:edgeless-text',
       'affine:transcription',
     ],
-    children: ['affine:paragraph'],
+    children: ['affine:paragraph', 'affine:list'],
   },
   toModel: () => new CalloutBlockModel(),
 });

blocksuite/affine/model/src/blocks/list/list-model.ts

@@ -43,6 +43,7 @@ export const ListBlockSchema = defineBlockSchema({
       'affine:list',
       'affine:paragraph',
       'affine:edgeless-text',
+      'affine:callout',
     ],
   },
   toModel: () => new ListBlockModel(),

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

@@ -22,6 +22,7 @@ export {
   type BlockMarkdownAdapterMatcher,
   BlockMarkdownAdapterMatcherIdentifier,
   FOOTNOTE_DEFINITION_PREFIX,
+  IN_PARAGRAPH_NODE_CONTEXT_KEY,
   InlineDeltaToMarkdownAdapterExtension,
   type InlineDeltaToMarkdownAdapterMatcher,
   InlineDeltaToMarkdownAdapterMatcherIdentifier,

blocksuite/affine/shared/src/adapters/markdown/type.ts

@@ -17,3 +17,4 @@ export const isMarkdownAST = (node: unknown): node is MarkdownAST =>
   (node as MarkdownAST).type !== undefined;
 
 export const FOOTNOTE_DEFINITION_PREFIX = 'footnoteDefinition:';
+export const IN_PARAGRAPH_NODE_CONTEXT_KEY = 'mdast:paragraph';

blocksuite/affine/shared/src/adapters/middlewares/surface-ref-to-embed.ts

@@ -11,12 +11,16 @@ export const surfaceRefToEmbed =
       }
     });
     slots.beforeImport.subscribe(payload => {
+      // only handle surface-ref block snapshot
       if (
-        pageId &&
-        payload.type === 'block' &&
-        payload.snapshot.flavour === 'affine:surface-ref' &&
-        !std.store.hasBlock(payload.snapshot.id)
-      ) {
+        payload.type !== 'block' ||
+        payload.snapshot.flavour !== 'affine:surface-ref'
+      )
+        return;
+
+      // turn into embed-linked-doc if the current doc is different from the pageId of the surface-ref block
+      const isNotSameDoc = pageId !== std.store.doc.id;
+      if (pageId && isNotSameDoc) {
         // The blockId of the original surface-ref block
         const blockId = payload.snapshot.id;
         payload.snapshot.id = std.workspace.idGenerator();

blocksuite/affine/shared/src/services/doc-display-meta-service.ts

@@ -217,7 +217,7 @@ export class DocDisplayMetaService
 function iconBuilder(
   icon: typeof PageIcon,
   size = '1.25em',
-  style = 'user-select:none;flex-shrink:0;vertical-align:middle;font-size:inherit;margin-bottom:0.1em;'
+  style = 'user-select:none;flex-shrink:0;vertical-align:middle;font-size:inherit;'
 ) {
   return icon({ width: size, height: size, style });
 }

blocksuite/affine/shared/src/services/edit-props-store.ts

@@ -98,7 +98,9 @@ export class EditPropsStore extends LifeCycleWatcher {
     );
 
     this.lastProps$ = computed(() => {
-      const editorSetting$ = this.std.getOptional(EditorSettingProvider);
+      const editorSetting$ = this.std.getOptional(
+        EditorSettingProvider
+      )?.setting$;
       const nextProps = mergeWith(
         clonedeep(initProps),
         editorSetting$?.value,

blocksuite/affine/shared/src/services/editor-setting-service.ts

@@ -10,21 +10,32 @@ export const GeneralSettingSchema = z
   .object({
     edgelessScrollZoom: z.boolean().default(false),
     edgelessDisableScheduleUpdate: z.boolean().default(false),
+    docDropCanvasPreferView: z
+      .enum(['affine:embed-linked-doc', 'affine:embed-synced-doc'])
+      .default('affine:embed-synced-doc'),
   })
   .merge(NodePropsSchema);
 
 export type EditorSetting = z.infer<typeof GeneralSettingSchema>;
 
-export const EditorSettingProvider = createIdentifier<
-  Signal<DeepPartial<EditorSetting>>
->('AffineEditorSettingProvider');
+export interface EditorSettingService {
+  setting$: Signal<DeepPartial<EditorSetting>>;
+  set?: (
+    key: keyof EditorSetting,
+    value: EditorSetting[keyof EditorSetting]
+  ) => void;
+}
+
+export const EditorSettingProvider = createIdentifier<EditorSettingService>(
+  'AffineEditorSettingProvider'
+);
 
 export function EditorSettingExtension(
-  signal: Signal<DeepPartial<EditorSetting>>
+  service: EditorSettingService
 ): ExtensionType {
   return {
     setup: di => {
-      di.addImpl(EditorSettingProvider, () => signal);
+      di.addImpl(EditorSettingProvider, () => service);
     },
   };
 }

blocksuite/affine/shared/src/services/feature-flag-service.ts

@@ -18,6 +18,7 @@ export interface BlockSuiteFlags {
   enable_block_meta: boolean;
   enable_callout: boolean;
   enable_edgeless_scribbled_style: boolean;
+  enable_embed_doc_with_alias: boolean;
 }
 
 export class FeatureFlagService extends StoreExtension {
@@ -40,6 +41,7 @@ export class FeatureFlagService extends StoreExtension {
     enable_block_meta: true,
     enable_callout: false,
     enable_edgeless_scribbled_style: false,
+    enable_embed_doc_with_alias: false,
   });
 
   setFlag(key: keyof BlockSuiteFlags, value: boolean) {

blocksuite/affine/shared/src/services/telemetry-service/link.ts

@@ -1,4 +1,4 @@
-import type { TelemetryEvent } from './types.js';
+import type { LinkEvent } from './types.js';
 
 export type LinkEventType =
   | 'CopiedLink'
@@ -16,4 +16,4 @@ export type LinkEventType =
   | 'EditLink'
   | 'ReloadLink';
 
-export type LinkToolbarEvents = Record<LinkEventType, TelemetryEvent>;
+export type LinkToolbarEvents = Record<LinkEventType, LinkEvent>;