chore(server): down scale service (#13367 )

## Summary by CodeRabbit * **Chores** * Reduced the number of deployment replicas for web, graphql, sync, renderer, and doc components across all build types (stable, beta, canary).
2026-02-06 09:33:45 +00:00 · 2025-07-30 17:31:40 +08:00
758 changed files with 3674 additions and 56092 deletions
--- a/.docker/dev/compose.yml.example
+++ b/.docker/dev/compose.yml.example
@@ -18,19 +18,11 @@ services:
    ports:
      - 6379:6379

-  # https://mailpit.axllent.org/docs/install/docker/
-  mailpit:
-    image: axllent/mailpit:latest
+  mailhog:
+    image: mailhog/mailhog:latest
    ports:
      - 1025:1025
      - 8025:8025
-    environment:
-      MP_MAX_MESSAGES: 5000
-      MP_DATABASE: /data/mailpit.db
-      MP_SMTP_AUTH_ACCEPT_ANY: 1
-      MP_SMTP_AUTH_ALLOW_INSECURE: 1
-    volumes:
-      - mailpit_data:/data

  # https://manual.manticoresearch.com/Starting_the_server/Docker
  manticoresearch:
@@ -95,5 +87,4 @@ networks:
 volumes:
  postgres_data:
  manticoresearch_data:
-  mailpit_data:
  elasticsearch_data:
--- a/.docker/selfhost/schema.json
+++ b/.docker/selfhost/schema.json
@@ -148,11 +148,6 @@
          "description": "Whether allow new registrations.\n@default true",
          "default": true
        },
-        "allowSignupForOauth": {
-          "type": "boolean",
-          "description": "Whether allow new registrations via configured oauth.\n@default true",
-          "default": true
-        },
        "requireEmailDomainVerification": {
          "type": "boolean",
          "description": "Whether require email domain record verification before accessing restricted resources.\n@default false",
@@ -195,11 +190,6 @@
      "type": "object",
      "description": "Configuration for mailer module",
      "properties": {
-        "SMTP.name": {
-          "type": "string",
-          "description": "Name of the email server (e.g. your domain name)\n@default \"AFFiNE Server\"\n@environment `MAILER_SERVERNAME`",
-          "default": "AFFiNE Server"
-        },
        "SMTP.host": {
          "type": "string",
          "description": "Host of the email server (e.g. smtp.gmail.com)\n@default \"\"\n@environment `MAILER_HOST`",
@@ -229,46 +219,6 @@
          "type": "boolean",
          "description": "Whether ignore email server's TSL certification verification. Enable it for self-signed certificates.\n@default false\n@environment `MAILER_IGNORE_TLS`",
          "default": false
-        },
-        "fallbackDomains": {
-          "type": "array",
-          "description": "The emails from these domains are always sent using the fallback SMTP server.\n@default []",
-          "default": []
-        },
-        "fallbackSMTP.name": {
-          "type": "string",
-          "description": "Name of the fallback email server (e.g. your domain name)\n@default \"AFFiNE Server\"",
-          "default": "AFFiNE Server"
-        },
-        "fallbackSMTP.host": {
-          "type": "string",
-          "description": "Host of the email server (e.g. smtp.gmail.com)\n@default \"\"",
-          "default": ""
-        },
-        "fallbackSMTP.port": {
-          "type": "number",
-          "description": "Port of the email server (they commonly are 25, 465 or 587)\n@default 465",
-          "default": 465
-        },
-        "fallbackSMTP.username": {
-          "type": "string",
-          "description": "Username used to authenticate the email server\n@default \"\"",
-          "default": ""
-        },
-        "fallbackSMTP.password": {
-          "type": "string",
-          "description": "Password used to authenticate the email server\n@default \"\"",
-          "default": ""
-        },
-        "fallbackSMTP.sender": {
-          "type": "string",
-          "description": "Sender of all the emails (e.g. \"AFFiNE Team <noreply@affine.pro>\")\n@default \"\"",
-          "default": ""
-        },
-        "fallbackSMTP.ignoreTLS": {
-          "type": "boolean",
-          "description": "Whether ignore email server's TSL certification verification. Enable it for self-signed certificates.\n@default false",
-          "default": false
        }
      }
    },
@@ -679,34 +629,14 @@
      "properties": {
        "enabled": {
          "type": "boolean",
-          "description": "Whether to enable the copilot plugin. <br> Document: <a href=\"https://docs.affine.pro/self-host-affine/administer/ai\" target=\"_blank\">https://docs.affine.pro/self-host-affine/administer/ai</a>\n@default false",
+          "description": "Whether to enable the copilot plugin.\n@default false",
          "default": false
        },
-        "scenarios": {
-          "type": "object",
-          "description": "Use custom models in scenarios and override default settings.\n@default {\"override_enabled\":false,\"scenarios\":{\"audio_transcribing\":\"gemini-2.5-flash\",\"chat\":\"gemini-2.5-flash\",\"embedding\":\"gemini-embedding-001\",\"image\":\"gpt-image-1\",\"rerank\":\"gpt-4.1\",\"coding\":\"claude-sonnet-4-5@20250929\",\"complex_text_generation\":\"gpt-4o-2024-08-06\",\"quick_decision_making\":\"gpt-5-mini\",\"quick_text_generation\":\"gemini-2.5-flash\",\"polish_and_summarize\":\"gemini-2.5-flash\"}}",
-          "default": {
-            "override_enabled": false,
-            "scenarios": {
-              "audio_transcribing": "gemini-2.5-flash",
-              "chat": "gemini-2.5-flash",
-              "embedding": "gemini-embedding-001",
-              "image": "gpt-image-1",
-              "rerank": "gpt-4.1",
-              "coding": "claude-sonnet-4-5@20250929",
-              "complex_text_generation": "gpt-4o-2024-08-06",
-              "quick_decision_making": "gpt-5-mini",
-              "quick_text_generation": "gemini-2.5-flash",
-              "polish_and_summarize": "gemini-2.5-flash"
-            }
-          }
-        },
        "providers.openai": {
          "type": "object",
-          "description": "The config for the openai provider.\n@default {\"apiKey\":\"\",\"baseURL\":\"https://api.openai.com/v1\"}\n@link https://github.com/openai/openai-node",
+          "description": "The config for the openai provider.\n@default {\"apiKey\":\"\"}\n@link https://github.com/openai/openai-node",
          "default": {
-            "apiKey": "",
-            "baseURL": "https://api.openai.com/v1"
+            "apiKey": ""
          }
        },
        "providers.fal": {
@@ -718,10 +648,9 @@
        },
        "providers.gemini": {
          "type": "object",
-          "description": "The config for the gemini provider.\n@default {\"apiKey\":\"\",\"baseURL\":\"https://generativelanguage.googleapis.com/v1beta\"}",
+          "description": "The config for the gemini provider.\n@default {\"apiKey\":\"\"}",
          "default": {
-            "apiKey": "",
-            "baseURL": "https://generativelanguage.googleapis.com/v1beta"
+            "apiKey": ""
          }
        },
        "providers.geminiVertex": {
@@ -768,10 +697,9 @@
        },
        "providers.anthropic": {
          "type": "object",
-          "description": "The config for the anthropic provider.\n@default {\"apiKey\":\"\",\"baseURL\":\"https://api.anthropic.com/v1\"}",
+          "description": "The config for the anthropic provider.\n@default {\"apiKey\":\"\"}",
          "default": {
-            "apiKey": "",
-            "baseURL": "https://api.anthropic.com/v1"
+            "apiKey": ""
          }
        },
        "providers.anthropicVertex": {
@@ -1108,33 +1036,18 @@
        },
        "apiKey": {
          "type": "string",
-          "description": "[Deprecated] Stripe API key. Use payment.stripe.apiKey instead.\n@default \"\"\n@environment `STRIPE_API_KEY`",
+          "description": "Stripe API key to enable payment service.\n@default \"\"\n@environment `STRIPE_API_KEY`",
          "default": ""
        },
        "webhookKey": {
          "type": "string",
-          "description": "[Deprecated] Stripe webhook key. Use payment.stripe.webhookKey instead.\n@default \"\"\n@environment `STRIPE_WEBHOOK_KEY`",
+          "description": "Stripe webhook key to enable payment service.\n@default \"\"\n@environment `STRIPE_WEBHOOK_KEY`",
          "default": ""
        },
        "stripe": {
          "type": "object",
-          "description": "Stripe sdk options and credentials\n@default {\"apiKey\":\"\",\"webhookKey\":\"\"}\n@link https://docs.stripe.com/api",
-          "default": {
-            "apiKey": "",
-            "webhookKey": ""
-          }
-        },
-        "revenuecat": {
-          "type": "object",
-          "description": "RevenueCat integration configs\n@default {\"enabled\":false,\"apiKey\":\"\",\"projectId\":\"\",\"webhookAuth\":\"\",\"environment\":\"production\",\"productMap\":{}}\n@link https://www.revenuecat.com/docs/",
-          "default": {
-            "enabled": false,
-            "apiKey": "",
-            "projectId": "",
-            "webhookAuth": "",
-            "environment": "production",
-            "productMap": {}
-          }
+          "description": "Stripe sdk options\n@default {}\n@link https://docs.stripe.com/api",
+          "default": {}
        }
      }
    },
--- a/.github/helm/affine/charts/gcloud-sql-proxy/values.yaml
+++ b/.github/helm/affine/charts/gcloud-sql-proxy/values.yaml
@@ -1,4 +1,4 @@
-replicaCount: 2
+replicaCount: 3
 enabled: false
 database: 
  connectionName: ""
@@ -33,11 +33,8 @@ service:

 resources:
  limits:
-    memory: "1Gi"
-    cpu: "1"
-  requests:
-    memory: "512Mi"
-    cpu: "100m"
+    memory: "4Gi"
+    cpu: "2"

 volumes: []
 volumeMounts: []
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -74,7 +74,7 @@ jobs:
        name: Wait for approval
        with:
          secret: ${{ secrets.GITHUB_TOKEN }}
-          approvers: forehalo,fengmk2,darkskygit
+          approvers: forehalo,fengmk2
          minimum-approvals: 1
          fail-on-denial: true
          issue-title: Please confirm to release docker image
@@ -84,7 +84,7 @@ jobs:
            Tag: ghcr.io/toeverything/affine:${{ needs.prepare.outputs.BUILD_TYPE }}

            > comment with "approve", "approved", "lgtm", "yes" to approve
-            > comment with "deny", "denied", "no" to deny
+            > comment with "deny", "deny", "no" to deny

      - name: Login to GitHub Container Registry
        uses: docker/login-action@v3
--- a/.github/workflows/windows-signer.yml
+++ b/.github/workflows/windows-signer.yml
@@ -29,7 +29,7 @@ jobs:
        shell: cmd
        run: |
          cd ${{ env.ARCHIVE_DIR }}/out
-          signtool sign /tr http://timestamp.globalsign.com/tsa/r6advanced1 /td sha256 /fd sha256 /a ${{ inputs.files }}
+          signtool sign /tr http://timestamp.sectigo.com /td sha256 /fd sha256 /a ${{ inputs.files }}
      - name: zip file
        shell: cmd
        run: |
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,7 +2,6 @@
 **/node_modules
 .yarn
 .github/helm
-.git
 .vscode
 .yarnrc.yml
 .docker
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -93,7 +93,7 @@ dependencies = [
 "symphonia",
 "thiserror 2.0.12",
 "uuid",
- "windows 0.61.3",
+ "windows 0.61.1",
 "windows-core 0.61.2",
 ]

@@ -161,7 +161,6 @@ dependencies = [
 "affine_common",
 "chrono",
 "file-format",
- "infer",
 "mimalloc",
 "napi",
 "napi-build",
@@ -1505,9 +1504,9 @@ dependencies = [

 [[package]]
 name = "file-format"
-version = "0.28.0"
+version = "0.26.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0eab8aa2fba5f39f494000a22f44bf3c755b7d7f8ffad3f36c6d507893074159"
+checksum = "e7ef3d5e8ae27277c8285ac43ed153158178ef0f79567f32024ca8140a0c7cd8"

 [[package]]
 name = "flate2"
@@ -1692,7 +1691,7 @@ dependencies = [
 "libc",
 "log",
 "rustversion",
- "windows 0.61.3",
+ "windows 0.61.1",
 ]

 [[package]]
@@ -1914,7 +1913,7 @@ dependencies = [
 "js-sys",
 "log",
 "wasm-bindgen",
- "windows-core 0.61.2",
+ "windows-core 0.57.0",
 ]

 [[package]]
@@ -2285,7 +2284,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "07033963ba89ebaf1584d767badaa2e8fcec21aedea6b8c0346d487d49c28667"
 dependencies = [
 "cfg-if",
- "windows-targets 0.52.6",
+ "windows-targets 0.48.5",
 ]

 [[package]]
@@ -4733,9 +4732,9 @@ dependencies = [

 [[package]]
 name = "tree-sitter"
-version = "0.25.8"
+version = "0.25.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6d7b8994f367f16e6fa14b5aebbcb350de5d7cbea82dc5b00ae997dd71680dd2"
+checksum = "ac5fff5c47490dfdf473b5228039bfacad9d765d9b6939d26bf7cc064c1c7822"
 dependencies = [
 "cc",
 "regex",
@@ -4843,9 +4842,9 @@ dependencies = [

 [[package]]
 name = "tree-sitter-scala"
-version = "0.24.0"
+version = "0.23.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7516aeb3d1f40ede8e3045b163e86993b3434514dd06c34c0b75e782d9a0b251"
+checksum = "efde5e68b4736e9eac17bfa296c6f104a26bffab363b365eb898c40a63c15d2f"
 dependencies = [
 "cc",
 "tree-sitter-language",
@@ -5335,7 +5334,7 @@ version = "0.1.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cf221c93e13a30d793f7645a0e7762c55d169dbb0a49671918a2319d289b10bb"
 dependencies = [
- "windows-sys 0.59.0",
+ "windows-sys 0.48.0",
 ]

 [[package]]
@@ -5366,9 +5365,9 @@ dependencies = [

 [[package]]
 name = "windows"
-version = "0.61.3"
+version = "0.61.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9babd3a767a4c1aef6900409f85f5d53ce2544ccdfaa86dad48c91782c6d6893"
+checksum = "c5ee8f3d025738cb02bad7868bbb5f8a6327501e870bf51f1b455b0a2454a419"
 dependencies = [
 "windows-collections",
 "windows-core 0.61.2",
@@ -5478,9 +5477,9 @@ dependencies = [

 [[package]]
 name = "windows-link"
-version = "0.1.3"
+version = "0.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5e6ad25900d524eaabdbbb96d20b4311e1e7ae1699af4fb28c17ae66c80d798a"
+checksum = "76840935b766e1b0a05c0066835fb9ec80071d4c09a16f6bd5f7e655e3c14c38"

 [[package]]
 name = "windows-numerics"
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -39,7 +39,7 @@ crossbeam-channel      = "0.5"
 dispatch2              = "0.3"
 docx-parser            = { git = "https://github.com/toeverything/docx-parser" }
 dotenvy                = "0.15"
-file-format            = { version = "0.28", features = ["reader"] }
+file-format            = { version = "0.26", features = ["reader"] }
 homedir                = "0.3"
 infer                  = { version = "0.19.0" }
 lasso                  = { version = "0.7", features = ["multi-threaded"] }
@@ -93,7 +93,7 @@ tree-sitter-javascript = { version = "0.23" }
 tree-sitter-kotlin-ng  = { version = "1.1" }
 tree-sitter-python     = { version = "0.23" }
 tree-sitter-rust       = { version = "0.24" }
-tree-sitter-scala      = { version = "0.24" }
+tree-sitter-scala      = { version = "0.23" }
 tree-sitter-typescript = { version = "0.23" }
 uniffi                 = "0.29"
 url                    = { version = "2.5" }
--- a/README.md
+++ b/README.md
@@ -81,7 +81,7 @@ Star us, and you will receive all release notifications from GitHub without any

 **Multimodal AI partner ready to kick in any work**

- Write up professional work report? Turn an outline into expressive and presentable slides? Summary an article into a well-structured mindmap? Sorting your job plan and backlog for tasks? Or... draw and code prototype apps and web pages directly all with one prompt? With you, [AFFiNE AI](https://affine.pro/ai) pushes your creativity to the edge of your imagination, just like [Canvas AI](https://affine.pro/blog/best-canvas-ai) to generate mind map for brainstorming.
+- Write up professional work report? Turn an outline into expressive and presentable slides? Summary an article into a well-structured mindmap? Sorting your job plan and backlog for tasks? Or... draw and code prototype apps and web pages directly all with one prompt? With you, [AFFiNE AI](https://affine.pro/ai) pushes your creativity to the edge of your imagination,just like [Canvas AI](https://affine.pro/blog/best-canvas-ai) to generate mind map for brainstorming.

 **Local-first & Real-time collaborative**

--- a/SECURITY.md
+++ b/SECURITY.md
@@ -6,12 +6,12 @@ We recommend users to always use the latest major version. Security updates will

 | Version         | Supported          |
 | --------------- | ------------------ |
-| 0.24.x (stable) | :white_check_mark: |
-| < 0.24.x        | :x:                |
+| 0.17.x (stable) | :white_check_mark: |
+| < 0.17.x        | :x:                |

 ## Reporting a Vulnerability

-We welcome you to provide us with bug reports via and email at [security@toeverything.info](mailto:security@toeverything.info) or submit directly on [GitHub](https://github.com/toeverything/AFFiNE/security), **we encourage you to submit the relevant information directly via GitHub**. We expect your report to contain at least the following for us to evaluate and reproduce:
+We welcome you to provide us with bug reports via and email at [security@toeverything.info](mailto:security@toeverything.info). We expect your report to contain at least the following for us to evaluate and reproduce:

 1. Using platform and version, for example:

@@ -22,6 +22,8 @@ We welcome you to provide us with bug reports via and email at [security@toevery

 3. Your classification or analysis of the vulnerability (optional)

-Since we are an open source project, we also welcome you to provide corresponding fix PRs, we will determine specific rewards based on the evaluation results.
+Since we are an open source project, we also welcome you to provide corresponding fix PRs.
+
+We will provide bounties for vulnerabilities involving user information leakage, permission leakage, and unauthorized code execution. For other types of vulnerabilities, we will determine specific rewards based on the evaluation results.

 If the vulnerability is caused by a library we depend on, we encourage you to submit a security report to the corresponding dependent library at the same time to benefit more users.
--- a/blocksuite/affine/blocks/attachment/package.json
+++ b/blocksuite/affine/blocks/attachment/package.json
@@ -17,7 +17,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/bookmark/package.json
+++ b/blocksuite/affine/blocks/bookmark/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/blocks/callout/package.json
+++ b/blocksuite/affine/blocks/callout/package.json
@@ -18,11 +18,10 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@emoji-mart/data": "^1.2.1",
-    "@emotion/css": "^11.13.5",
    "@floating-ui/dom": "^1.6.10",
    "@lit/context": "^1.1.2",
    "@preact/signals-core": "^1.8.0",
--- a/blocksuite/affine/blocks/callout/src/callout-block-styles.ts
+++ b/blocksuite/affine/blocks/callout/src/callout-block-styles.ts
@@ -1,56 +0,0 @@
-import { css } from '@emotion/css';
-
-export const calloutHostStyles = css({
-  display: 'block',
-  margin: '8px 0',
-});
-
-export const calloutBlockContainerStyles = css({
-  display: 'flex',
-  alignItems: 'flex-start',
-  padding: '5px 10px',
-  borderRadius: '8px',
-});
-
-export const calloutEmojiContainerStyles = css({
-  userSelect: 'none',
-  fontSize: '1.2em',
-  width: '24px',
-  height: '24px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  // marginTop is dynamically set by JavaScript based on first child's height
-  marginBottom: '10px',
-  flexShrink: 0,
-  position: 'relative',
-});
-
-export const calloutEmojiStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  ':hover': {
-    cursor: 'pointer',
-    opacity: 0.7,
-  },
-});
-
-export const calloutChildrenStyles = css({
-  flex: 1,
-  minWidth: 0,
-  paddingLeft: '10px',
-});
-
-export const iconPickerContainerStyles = css({
-  position: 'absolute',
-  top: '100%',
-  left: 0,
-  zIndex: 1000,
-  background: 'white',
-  border: '1px solid #ccc',
-  borderRadius: '8px',
-  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-  width: '390px',
-  height: '400px',
-});
--- a/blocksuite/affine/blocks/callout/src/callout-block.ts
+++ b/blocksuite/affine/blocks/callout/src/callout-block.ts
@@ -1,191 +1,84 @@
 import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
-import {
-  createPopup,
-  popupTargetFromElement,
-} from '@blocksuite/affine-components/context-menu';
+import { createLitPortal } from '@blocksuite/affine-components/portal';
 import { DefaultInlineManagerExtension } from '@blocksuite/affine-inline-preset';
-import {
-  type CalloutBlockModel,
-  ParagraphBlockModel,
-} from '@blocksuite/affine-model';
-import { focusTextModel } from '@blocksuite/affine-rich-text';
+import { type CalloutBlockModel } from '@blocksuite/affine-model';
 import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
 import {
  DocModeProvider,
-  type IconData,
-  IconPickerServiceIdentifier,
-  IconType,
+  ThemeProvider,
 } from '@blocksuite/affine-shared/services';
-import type { UniComponent } from '@blocksuite/affine-shared/types';
-import * as icons from '@blocksuite/icons/lit';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import type { BlockComponent } from '@blocksuite/std';
-import { type Signal } from '@preact/signals-core';
-import { cssVarV2 } from '@toeverything/theme/v2';
-import type { TemplateResult } from 'lit';
-import { html } from 'lit';
-import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
-
-import {
-  calloutBlockContainerStyles,
-  calloutChildrenStyles,
-  calloutEmojiContainerStyles,
-  calloutEmojiStyles,
-  calloutHostStyles,
-} from './callout-block-styles.js';
-import { IconPickerWrapper } from './icon-picker-wrapper.js';
-// Copy of renderUniLit and UniLit from affine-data-view
-export const renderUniLit = <Props, Expose extends NonNullable<unknown>>(
-  uni: UniComponent<Props, Expose> | undefined,
-  props?: Props,
-  options?: {
-    ref?: Signal<Expose | undefined>;
-    style?: Readonly<StyleInfo>;
-    class?: string;
-  }
-): TemplateResult => {
-  return html` <uni-lit
-    .uni="${uni}"
-    .props="${props}"
-    .ref="${options?.ref}"
-    style=${options?.style ? styleMap(options?.style) : ''}
-  ></uni-lit>`;
-};
-const getIcon = (icon?: IconData) => {
-  if (!icon) {
-    return null;
-  }
-  if (icon.type === IconType.Emoji) {
-    return icon.unicode;
-  }
-  if (icon.type === IconType.AffineIcon) {
-    return (
-      icons as Record<string, (props: { style: string }) => TemplateResult>
-    )[`${icon.name}Icon`]?.({ style: `color:${icon.color}` });
-  }
-  return null;
-};
+import { flip, offset } from '@floating-ui/dom';
+import { css, html } from 'lit';
+import { query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockModel> {
-  private _popupCloseHandler: (() => void) | null = null;
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this.classList.add(calloutHostStyles);
-  }
-
-  private _getEmojiMarginTop(): string {
-    if (this.model.children.length === 0) {
-      return '10px';
+  static override styles = css`
+    :host {
+      display: block;
+      margin: 8px 0;
    }

-    const firstChild = this.model.children[0];
-    const flavour = firstChild.flavour;
-
-    const marginTopMap: Record<string, string> = {
-      'affine:paragraph:h1': '23px',
-      'affine:paragraph:h2': '20px',
-      'affine:paragraph:h3': '16px',
-      'affine:paragraph:h4': '15px',
-      'affine:paragraph:h5': '14px',
-      'affine:paragraph:h6': '13px',
-    };
-
-    // For heading blocks, use the type to determine margin
-    if (flavour === 'affine:paragraph') {
-      const paragraph = firstChild as ParagraphBlockModel;
-      const type = paragraph.props.type$.value;
-      const key = `${flavour}:${type}`;
-      return marginTopMap[key] || '10px';
+    .affine-callout-block-container {
+      display: flex;
+      padding: 5px 10px;
+      border-radius: 8px;
+      background-color: ${unsafeCSSVarV2('block/callout/background/grey')};
    }

-    // Default for all other block types
-    return '10px';
-  }
-
-  private _closeIconPicker() {
-    if (this._popupCloseHandler) {
-      this._popupCloseHandler();
-      this._popupCloseHandler = null;
+    .affine-callout-emoji-container {
+      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;
    }
-  }
-
-  private _toggleIconPicker(event: MouseEvent) {
-    // If popup is already open, close it
-    if (this._popupCloseHandler) {
-      this._closeIconPicker();
-      return;
+    .affine-callout-emoji:hover {
+      cursor: pointer;
+      opacity: 0.7;
    }

-    // Get IconPickerService from the framework
-    const iconPickerService = this.std.getOptional(IconPickerServiceIdentifier);
-    if (!iconPickerService) {
-      console.warn('IconPickerService not found');
-      return;
+    .affine-callout-children {
+      flex: 1;
+      min-width: 0;
+      padding-left: 10px;
    }
+  `;

-    // Get the uni-component from the service
-    const iconPickerComponent = iconPickerService.iconPickerComponent;
+  private _emojiMenuAbortController: AbortController | null = null;
+  private readonly _toggleEmojiMenu = () => {
+    if (this._emojiMenuAbortController) {
+      this._emojiMenuAbortController.abort();
+    }
+    this._emojiMenuAbortController = new AbortController();

-    // Create props for the icon picker
-    const props = {
-      onSelect: (iconData?: IconData) => {
-        this.model.props.icon$.value = iconData;
-        this._closeIconPicker(); // Close the picker after selection
+    const theme = this.std.get(ThemeProvider).theme$.value;
+
+    createLitPortal({
+      template: html`<affine-emoji-menu
+        .theme=${theme}
+        .onEmojiSelect=${(data: any) => {
+          this.model.props.emoji = data.native;
+        }}
+      ></affine-emoji-menu>`,
+      portalStyles: {
+        zIndex: 'var(--affine-z-index-popover)',
      },
-      onClose: () => {
-        this._closeIconPicker();
-      },
-    };
-
-    // Create IconPickerWrapper instance
-    const wrapper = new IconPickerWrapper();
-    wrapper.iconPickerComponent = iconPickerComponent;
-    wrapper.props = props;
-    wrapper.style.position = 'absolute';
-    wrapper.style.backgroundColor = cssVarV2.layer.background.overlayPanel;
-    wrapper.style.boxShadow = 'var(--affine-menu-shadow)';
-    wrapper.style.borderRadius = '8px';
-
-    // Create popup target from the clicked element
-    const target = popupTargetFromElement(event.currentTarget as HTMLElement);
-
-    // Create popup
-    this._popupCloseHandler = createPopup(target, wrapper, {
-      onClose: () => {
-        this._popupCloseHandler = null;
+      container: this.host,
+      computePosition: {
+        referenceElement: this._emojiButton,
+        placement: 'bottom-start',
+        middleware: [flip(), offset(4)],
+        autoUpdate: { animationFrame: true },
      },
+      abortController: this._emojiMenuAbortController,
+      closeOnClickAway: true,
    });
-  }
-
-  private readonly _handleBlockClick = (event: MouseEvent) => {
-    // Check if the click target is emoji related element
-    const target = event.target as HTMLElement;
-    if (
-      target.closest('.affine-callout-emoji-container') ||
-      target.classList.contains('affine-callout-emoji')
-    ) {
-      return;
-    }
-
-    // If there's no icon, open icon picker on click
-    const icon = this.model.props.icon$.value;
-    if (!icon) {
-      this._toggleIconPicker(event);
-      return;
-    }
-
-    // Only handle clicks when there are no children
-    if (this.model.children.length > 0) {
-      return;
-    }
-
-    // Prevent event bubbling
-    event.stopPropagation();
-
-    // Create a new paragraph block
-    const paragraphId = this.store.addBlock('affine:paragraph', {}, this.model);
-
-    // Focus the new paragraph
-    focusTextModel(this.std, paragraphId);
  };

  get attributeRenderer() {
@@ -204,6 +97,9 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
    return this.std.get(DefaultInlineManagerExtension.identifier);
  }

+  @query('.affine-callout-emoji')
+  private accessor _emojiButton!: HTMLElement;
+
  override get topContenteditableElement() {
    if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
      return this.closest<BlockComponent>(
@@ -214,39 +110,20 @@ export class CalloutBlockComponent extends CaptionedBlockComponent<CalloutBlockM
  }

  override renderBlock() {
-    const icon = this.model.props.icon$.value;
-    const backgroundColorName = this.model.props.backgroundColorName$.value;
-    const backgroundColor = (
-      cssVarV2.block.callout.background as Record<string, string>
-    )[backgroundColorName ?? ''];
-
-    const iconContent = getIcon(icon);
-
+    const emoji = this.model.props.emoji$.value;
    return html`
-      <div
-        class="${calloutBlockContainerStyles}"
-        @click=${this._handleBlockClick}
-        style=${styleMap({
-          backgroundColor: backgroundColor ?? 'transparent',
-        })}
-      >
-        ${iconContent
-          ? html`
-              <div
-                @click=${this._toggleIconPicker}
-                contenteditable="false"
-                class="${calloutEmojiContainerStyles}"
-                style=${styleMap({
-                  marginTop: this._getEmojiMarginTop(),
-                })}
-              >
-                <span class="${calloutEmojiStyles}" data-testid="callout-emoji"
-                  >${iconContent}</span
-                >
-              </div>
-            `
-          : ''}
-        <div class="${calloutChildrenStyles}">
+      <div class="affine-callout-block-container">
+        <div
+          @click=${this._toggleEmojiMenu}
+          contenteditable="false"
+          class="affine-callout-emoji-container"
+          style=${styleMap({
+            display: emoji.length === 0 ? 'none' : undefined,
+          })}
+        >
+          <span class="affine-callout-emoji">${emoji}</span>
+        </div>
+        <div class="affine-callout-children">
          ${this.renderChildren(this.model)}
        </div>
      </div>
--- a/blocksuite/affine/blocks/callout/src/callout-keymap.ts
+++ b/blocksuite/affine/blocks/callout/src/callout-keymap.ts
@@ -1,7 +1,4 @@
-import {
-  CalloutBlockModel,
-  ParagraphBlockModel,
-} from '@blocksuite/affine-model';
+import { CalloutBlockModel } from '@blocksuite/affine-model';
 import { matchModels } from '@blocksuite/affine-shared/utils';
 import {
  BlockSelection,
@@ -9,46 +6,13 @@ import {
  TextSelection,
 } from '@blocksuite/std';

-import { calloutToParagraphCommand } from './commands/callout-to-paragraph.js';
-import { splitCalloutCommand } from './commands/split-callout.js';
-
 export const CalloutKeymapExtension = KeymapExtension(std => {
  return {
-    Enter: ctx => {
-      const text = std.selection.find(TextSelection);
-      if (!text) return false;
-
-      const currentBlock = std.store.getBlock(text.from.blockId);
-      if (!currentBlock) return false;
-
-      // Check if current block is a callout block
-      let calloutBlock = currentBlock;
-      if (!matchModels(currentBlock.model, [CalloutBlockModel])) {
-        // If not, check if the parent is a callout block
-        const parent = std.store.getParent(currentBlock.model);
-        if (!parent || !matchModels(parent, [CalloutBlockModel])) {
-          return false;
-        }
-        const parentBlock = std.store.getBlock(parent.id);
-        if (!parentBlock) return false;
-        calloutBlock = parentBlock;
-      }
-
-      ctx.get('keyboardState').raw.preventDefault();
-      std.command
-        .chain()
-        .pipe(splitCalloutCommand, {
-          blockId: calloutBlock.model.id,
-          inlineIndex: text.from.index,
-          currentBlockId: text.from.blockId,
-        })
-        .run();
-      return true;
-    },
    Backspace: ctx => {
      const text = std.selection.find(TextSelection);
      if (text && text.isCollapsed() && text.from.index === 0) {
        const event = ctx.get('defaultState').event;
+        event.preventDefault();

        const block = std.store.getBlock(text.from.blockId);
        if (!block) return false;
@@ -56,22 +20,6 @@ export const CalloutKeymapExtension = KeymapExtension(std => {
        if (!parent) return false;
        if (!matchModels(parent, [CalloutBlockModel])) return false;

-        // Check if current block is a paragraph inside callout
-        if (matchModels(block.model, [ParagraphBlockModel])) {
-          event.preventDefault();
-
-          std.command
-            .chain()
-            .pipe(calloutToParagraphCommand, {
-              id: block.model.id,
-            })
-            .run();
-
-          return true;
-        }
-
-        // Fallback to selecting the callout block
-        event.preventDefault();
        std.selection.setGroup('note', [
          std.selection.create(BlockSelection, {
            blockId: parent.id,
--- a/blocksuite/affine/blocks/callout/src/commands/callout-to-paragraph.ts
+++ b/blocksuite/affine/blocks/callout/src/commands/callout-to-paragraph.ts
@@ -1,86 +0,0 @@
-import {
-  CalloutBlockModel,
-  ParagraphBlockModel,
-} from '@blocksuite/affine-model';
-import { focusTextModel } from '@blocksuite/affine-rich-text';
-import { matchModels } from '@blocksuite/affine-shared/utils';
-import type { Command } from '@blocksuite/std';
-import { BlockSelection } from '@blocksuite/std';
-import { Text } from '@blocksuite/store';
-
-export const calloutToParagraphCommand: Command<
-  {
-    id: string;
-    stopCapturing?: boolean;
-  },
-  {
-    success: boolean;
-  }
-> = (ctx, next) => {
-  const { id, stopCapturing = true } = ctx;
-  const std = ctx.std;
-  const doc = std.store;
-  const model = doc.getBlock(id)?.model;
-
-  if (!model || !matchModels(model, [ParagraphBlockModel])) return false;
-
-  const parent = doc.getParent(model);
-  if (!parent || !matchModels(parent, [CalloutBlockModel])) return false;
-
-  if (stopCapturing) std.store.captureSync();
-
-  // Get current block index in callout
-  const currentIndex = parent.children.indexOf(model);
-  const hasText = model.text && model.text.length > 0;
-
-  // Find previous paragraph block in callout
-  let previousBlock = null;
-  for (let i = currentIndex - 1; i >= 0; i--) {
-    const sibling = parent.children[i];
-    if (matchModels(sibling, [ParagraphBlockModel])) {
-      previousBlock = sibling;
-      break;
-    }
-  }
-
-  if (previousBlock && hasText) {
-    // Clone current text content before any operations to prevent data loss
-    const currentText = model.text || new Text();
-
-    // Get previous block text and merge index
-    const previousText = previousBlock.text || new Text();
-    const mergeIndex = previousText.length;
-
-    // Apply each delta from cloned current text to previous block to preserve formatting
-    previousText.join(currentText);
-
-    // Remove current block after text has been merged
-    doc.deleteBlock(model, {
-      deleteChildren: false,
-    });
-
-    // Focus at merge point in previous block
-    focusTextModel(std, previousBlock.id, mergeIndex);
-  } else if (previousBlock && !hasText) {
-    // Move cursor to end of previous block
-    doc.deleteBlock(model, {
-      deleteChildren: false,
-    });
-
-    const previousText = previousBlock.text || new Text();
-    focusTextModel(std, previousBlock.id, previousText.length);
-  } else {
-    // No previous block, select the entire callout
-    doc.deleteBlock(model, {
-      deleteChildren: false,
-    });
-
-    std.selection.setGroup('note', [
-      std.selection.create(BlockSelection, {
-        blockId: parent.id,
-      }),
-    ]);
-  }
-
-  return next({ success: true });
-};
--- a/blocksuite/affine/blocks/callout/src/commands/split-callout.ts
+++ b/blocksuite/affine/blocks/callout/src/commands/split-callout.ts
@@ -1,85 +0,0 @@
-import {
-  CalloutBlockModel,
-  ParagraphBlockModel,
-} from '@blocksuite/affine-model';
-import { focusTextModel } from '@blocksuite/affine-rich-text';
-import { matchModels } from '@blocksuite/affine-shared/utils';
-import type { Command, EditorHost } from '@blocksuite/std';
-
-export const splitCalloutCommand: Command<{
-  blockId: string;
-  inlineIndex: number;
-  currentBlockId: string;
-}> = (ctx, next) => {
-  const { blockId, inlineIndex, currentBlockId, std } = ctx;
-  const host = std.host as EditorHost;
-  const doc = host.store;
-
-  const calloutModel = doc.getBlock(blockId)?.model;
-  if (!calloutModel || !matchModels(calloutModel, [CalloutBlockModel])) {
-    console.error(`block ${blockId} is not a callout block`);
-    return;
-  }
-
-  const currentModel = doc.getBlock(currentBlockId)?.model;
-  if (!currentModel) {
-    console.error(`current block ${currentBlockId} not found`);
-    return;
-  }
-
-  doc.captureSync();
-
-  if (matchModels(currentModel, [ParagraphBlockModel])) {
-    // User is in a paragraph within the callout's children
-    const afterText = currentModel.props.text.split(inlineIndex);
-
-    // Update the current paragraph's text to keep only the part before cursor
-    doc.transact(() => {
-      currentModel.props.text.delete(
-        inlineIndex,
-        currentModel.props.text.length - inlineIndex
-      );
-    });
-
-    // Create a new paragraph block after the current one
-    const parent = doc.getParent(currentModel);
-    if (parent) {
-      const currentIndex = parent.children.indexOf(currentModel);
-      const newParagraphId = doc.addBlock(
-        'affine:paragraph',
-        {
-          text: afterText,
-        },
-        parent,
-        currentIndex + 1
-      );
-
-      if (newParagraphId) {
-        host.updateComplete
-          .then(() => {
-            focusTextModel(std, newParagraphId);
-          })
-          .catch(console.error);
-      }
-    }
-  } else {
-    // If current block is not a paragraph, create a new paragraph in callout
-    const newParagraphId = doc.addBlock(
-      'affine:paragraph',
-      {
-        text: new Text(),
-      },
-      calloutModel
-    );
-
-    if (newParagraphId) {
-      host.updateComplete
-        .then(() => {
-          focusTextModel(std, newParagraphId);
-        })
-        .catch(console.error);
-    }
-  }
-
-  next();
-};
--- a/blocksuite/affine/blocks/callout/src/configs/slash-menu.ts
+++ b/blocksuite/affine/blocks/callout/src/configs/slash-menu.ts
@@ -1,12 +1,24 @@
+import { CalloutBlockModel } from '@blocksuite/affine-model';
 import { focusBlockEnd } from '@blocksuite/affine-shared/commands';
 import { FeatureFlagService } from '@blocksuite/affine-shared/services';
-import { isInsideBlockByFlavour } from '@blocksuite/affine-shared/utils';
+import {
+  findAncestorModel,
+  isInsideBlockByFlavour,
+  matchModels,
+} from '@blocksuite/affine-shared/utils';
 import { type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
 import { FontIcon } from '@blocksuite/icons/lit';

 import { calloutTooltip } from './tooltips';

 export const calloutSlashMenuConfig: SlashMenuConfig = {
+  disableWhen: ({ model }) => {
+    return (
+      findAncestorModel(model, ancestor =>
+        matchModels(ancestor, [CalloutBlockModel])
+      ) !== null
+    );
+  },
  items: [
    {
      name: 'Callout',
--- a/blocksuite/affine/blocks/callout/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/callout/src/configs/toolbar.ts
@@ -1,204 +0,0 @@
-import {
-  createPopup,
-  popupTargetFromElement,
-} from '@blocksuite/affine-components/context-menu';
-import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
-import { CalloutBlockModel } from '@blocksuite/affine-model';
-import {
-  ActionPlacement,
-  type IconData,
-  IconPickerServiceIdentifier,
-  type ToolbarAction,
-  type ToolbarActionGroup,
-  type ToolbarModuleConfig,
-  ToolbarModuleExtension,
-} from '@blocksuite/affine-shared/services';
-import { DeleteIcon, PaletteIcon, SmileIcon } from '@blocksuite/icons/lit';
-import { BlockFlavourIdentifier } from '@blocksuite/std';
-import type { ExtensionType } from '@blocksuite/store';
-import { cssVarV2 } from '@toeverything/theme/v2';
-import { html } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
-import { styleMap } from 'lit/directives/style-map.js';
-
-import { IconPickerWrapper } from '../icon-picker-wrapper.js';
-
-const colors = [
-  'default',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'teal',
-  'blue',
-  'purple',
-  'grey',
-] as const;
-
-const backgroundColorAction = {
-  id: 'background-color',
-  label: 'Background Color',
-  tooltip: 'Change background color',
-  icon: PaletteIcon(),
-  run() {
-    // This will be handled by the content function
-  },
-  content(ctx) {
-    const model = ctx.getCurrentModelByType(CalloutBlockModel);
-    if (!model) return null;
-
-    const updateBackground = (color: string) => {
-      ctx.store.updateBlock(model, { backgroundColorName: color });
-    };
-
-    return html`
-      <editor-menu-button
-        .contentPadding=${'8px'}
-        .button=${html`
-          <editor-icon-button
-            aria-label="background"
-            .tooltip=${'Background Color'}
-          >
-            ${PaletteIcon()} ${EditorChevronDown}
-          </editor-icon-button>
-        `}
-      >
-        <div data-size="large" data-orientation="vertical">
-          <div class="highlight-heading">Background</div>
-          ${repeat(colors, color => {
-            const isDefault = color === 'default';
-            const value = isDefault
-              ? null
-              : `var(--affine-text-highlight-${color})`;
-            const displayName = `${color} Background`;
-
-            return html`
-              <editor-menu-action
-                data-testid="background-${color}"
-                @click=${() => updateBackground(color)}
-              >
-                <affine-text-duotone-icon
-                  style=${styleMap({
-                    '--color': 'var(--affine-text-primary-color)',
-                    '--background': value ?? 'transparent',
-                  })}
-                ></affine-text-duotone-icon>
-                <span class="label capitalize">${displayName}</span>
-              </editor-menu-action>
-            `;
-          })}
-        </div>
-      </editor-menu-button>
-    `;
-  },
-} satisfies ToolbarAction;
-
-const iconPickerAction = {
-  id: 'icon-picker',
-  label: 'Icon Picker',
-  tooltip: 'Change icon',
-  icon: SmileIcon(),
-  run() {
-    // This will be handled by the content function
-  },
-  content(ctx) {
-    const model = ctx.getCurrentModelByType(CalloutBlockModel);
-    if (!model) return null;
-
-    const handleIconPickerClick = (event: MouseEvent) => {
-      // Get IconPickerService from the framework
-      const iconPickerService = ctx.std.getOptional(
-        IconPickerServiceIdentifier
-      );
-      if (!iconPickerService) {
-        console.warn('IconPickerService not found');
-        return;
-      }
-
-      // Get the uni-component from the service
-      const iconPickerComponent = iconPickerService.iconPickerComponent;
-
-      // Create props for the icon picker
-      const props = {
-        onSelect: (iconData?: IconData) => {
-          // When iconData is undefined (delete icon), set icon to undefined
-          ctx.store.updateBlock(model, { icon: iconData });
-          closeHandler(); // Close the picker after selection
-        },
-        onClose: () => {
-          closeHandler();
-        },
-      };
-
-      // Create IconPickerWrapper instance
-      const wrapper = new IconPickerWrapper();
-      wrapper.iconPickerComponent = iconPickerComponent;
-      wrapper.props = props;
-      wrapper.style.position = 'absolute';
-      wrapper.style.backgroundColor = cssVarV2.layer.background.overlayPanel;
-      wrapper.style.boxShadow = 'var(--affine-menu-shadow)';
-      wrapper.style.borderRadius = '8px';
-
-      // Create popup target from the clicked element
-      const target = popupTargetFromElement(event.currentTarget as HTMLElement);
-
-      // Create popup
-      const closeHandler = createPopup(target, wrapper, {
-        onClose: () => {
-          // Cleanup if needed
-        },
-      });
-    };
-
-    return html`
-      <editor-icon-button
-        aria-label="icon-picker"
-        .tooltip=${'Change Icon'}
-        @click=${handleIconPickerClick}
-      >
-        ${SmileIcon()} ${EditorChevronDown}
-      </editor-icon-button>
-    `;
-  },
-} satisfies ToolbarAction;
-
-const builtinToolbarConfig = {
-  actions: [
-    {
-      id: 'style',
-      actions: [backgroundColorAction],
-    } satisfies ToolbarActionGroup<ToolbarAction>,
-    {
-      id: 'icon',
-      actions: [iconPickerAction],
-    } satisfies ToolbarActionGroup<ToolbarAction>,
-    {
-      placement: ActionPlacement.More,
-      id: 'c.delete',
-      label: 'Delete',
-      icon: DeleteIcon(),
-      variant: 'destructive',
-      run(ctx) {
-        const model = ctx.getCurrentModelByType(CalloutBlockModel);
-        if (!model) return;
-
-        ctx.store.deleteBlock(model);
-
-        // Clears
-        ctx.select('note');
-        ctx.reset();
-      },
-    } satisfies ToolbarAction,
-  ],
-} as const satisfies ToolbarModuleConfig;
-
-export const createBuiltinToolbarConfigExtension = (
-  flavour: string
-): ExtensionType[] => {
-  return [
-    ToolbarModuleExtension({
-      id: BlockFlavourIdentifier(flavour),
-      config: builtinToolbarConfig,
-    }),
-  ];
-};
--- a/blocksuite/affine/blocks/callout/src/effects.ts
+++ b/blocksuite/affine/blocks/callout/src/effects.ts
@@ -1,14 +1,14 @@
 import { CalloutBlockComponent } from './callout-block';
-import { IconPickerWrapper } from './icon-picker-wrapper';
+import { EmojiMenu } from './emoji-menu';

 export function effects() {
  customElements.define('affine-callout', CalloutBlockComponent);
-  customElements.define('icon-picker-wrapper', IconPickerWrapper);
+  customElements.define('affine-emoji-menu', EmojiMenu);
 }

 declare global {
  interface HTMLElementTagNameMap {
    'affine-callout': CalloutBlockComponent;
-    'icon-picker-wrapper': IconPickerWrapper;
+    'affine-emoji-menu': EmojiMenu;
  }
 }
--- a/blocksuite/affine/blocks/callout/src/emoji-menu.ts
+++ b/blocksuite/affine/blocks/callout/src/emoji-menu.ts
@@ -0,0 +1,34 @@
+import { WithDisposable } from '@blocksuite/global/lit';
+import data from '@emoji-mart/data';
+import { Picker } from 'emoji-mart';
+import { html, LitElement, type PropertyValues } from 'lit';
+import { property, query } from 'lit/decorators.js';
+
+export class EmojiMenu extends WithDisposable(LitElement) {
+  override firstUpdated(props: PropertyValues) {
+    const result = super.firstUpdated(props);
+
+    const picker = new Picker({
+      data,
+      onEmojiSelect: this.onEmojiSelect,
+      autoFocus: true,
+      theme: this.theme,
+    });
+    this.emojiMenu.append(picker as unknown as Node);
+
+    return result;
+  }
+
+  @property({ attribute: false })
+  accessor onEmojiSelect: (data: any) => void = () => {};
+
+  @property({ attribute: false })
+  accessor theme: 'light' | 'dark' = 'light';
+
+  @query('.affine-emoji-menu')
+  accessor emojiMenu!: HTMLElement;
+
+  override render() {
+    return html`<div class="affine-emoji-menu"></div>`;
+  }
+}
--- a/blocksuite/affine/blocks/callout/src/icon-picker-wrapper.ts
+++ b/blocksuite/affine/blocks/callout/src/icon-picker-wrapper.ts
@@ -1,52 +0,0 @@
-import type { IconData } from '@blocksuite/affine-shared/services';
-import type { UniComponent } from '@blocksuite/affine-shared/types';
-import { ShadowlessElement } from '@blocksuite/std';
-import { type Signal } from '@preact/signals-core';
-import { html, type TemplateResult } from 'lit';
-import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
-
-// Copy of renderUniLit from callout-block.ts
-const renderUniLit = <Props, Expose extends NonNullable<unknown>>(
-  uni: UniComponent<Props, Expose> | undefined,
-  props?: Props,
-  options?: {
-    ref?: Signal<Expose | undefined>;
-    style?: Readonly<StyleInfo>;
-    class?: string;
-  }
-): TemplateResult => {
-  return html` <uni-lit
-    .uni="${uni}"
-    .props="${props}"
-    .ref="${options?.ref}"
-    style=${options?.style ? styleMap(options?.style) : ''}
-  ></uni-lit>`;
-};
-
-export interface IconPickerWrapperProps {
-  onSelect?: (iconData?: IconData) => void;
-  onClose?: () => void;
-}
-
-export class IconPickerWrapper extends ShadowlessElement {
-  iconPickerComponent?: UniComponent<IconPickerWrapperProps, any>;
-  props?: IconPickerWrapperProps;
-
-  constructor() {
-    super();
-  }
-
-  override render() {
-    if (!this.iconPickerComponent) {
-      return html``;
-    }
-
-    return renderUniLit(this.iconPickerComponent, this.props);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'icon-picker-wrapper': IconPickerWrapper;
-  }
-}
--- a/blocksuite/affine/blocks/callout/src/view.ts
+++ b/blocksuite/affine/blocks/callout/src/view.ts
@@ -8,7 +8,6 @@ import { literal } from 'lit/static-html.js';

 import { CalloutKeymapExtension } from './callout-keymap';
 import { calloutSlashMenuConfig } from './configs/slash-menu';
-import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
 import { effects } from './effects';

 export class CalloutViewExtension extends ViewExtensionProvider {
@@ -26,7 +25,6 @@ export class CalloutViewExtension extends ViewExtensionProvider {
      BlockViewExtension('affine:callout', literal`affine-callout`),
      CalloutKeymapExtension,
      SlashMenuConfigExtension('affine:callout', calloutSlashMenuConfig),
-      ...createBuiltinToolbarConfigExtension('affine:callout'),
    ]);
  }
 }
--- a/blocksuite/affine/blocks/code/package.json
+++ b/blocksuite/affine/blocks/code/package.json
@@ -22,7 +22,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/data-view/package.json
+++ b/blocksuite/affine/blocks/data-view/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/database/package.json
+++ b/blocksuite/affine/blocks/database/package.json
@@ -21,7 +21,7 @@
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@emotion/css": "^11.13.5",
--- a/blocksuite/affine/blocks/database/src/data-source.ts
+++ b/blocksuite/affine/blocks/database/src/data-source.ts
@@ -164,10 +164,8 @@ export class DatabaseBlockDataSource extends DataSourceBase {
  readonly$: ReadonlySignal<boolean> = computed(() => {
    return (
      this._model.store.readonly ||
-      (IS_MOBILE &&
-        !this._model.store.provider
-          .get(FeatureFlagService)
-          .getFlag('enable_mobile_database_editing'))
+      // TODO(@L-Sun): use block level readonly
+      IS_MOBILE
    );
  });

--- a/blocksuite/affine/blocks/database/src/database-block.ts
+++ b/blocksuite/affine/blocks/database/src/database-block.ts
@@ -13,7 +13,6 @@ import {
  BlockElementCommentManager,
  CommentProviderIdentifier,
  DocModeProvider,
-  FeatureFlagService,
  NotificationProvider,
  type TelemetryEventMap,
  TelemetryProvider,
@@ -35,7 +34,6 @@ import {
  uniMap,
 } from '@blocksuite/data-view';
 import { widgetPresets } from '@blocksuite/data-view/widget-presets';
-import { IS_MOBILE } from '@blocksuite/global/env';
 import { Rect } from '@blocksuite/global/gfx';
 import {
  CommentIcon,
@@ -50,7 +48,6 @@ import { autoUpdate } from '@floating-ui/dom';
 import { computed, signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
-import { styleMap } from 'lit/directives/style-map.js';

 import { popSideDetail } from './components/layout.js';
 import { DatabaseConfigExtension } from './config.js';
@@ -352,7 +349,6 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
    this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, 'true');
    this.classList.add(databaseBlockStyles);
    this.listenFullWidthChange();
-    this.handleMobileEditing();
  }

  listenFullWidthChange() {
@@ -368,41 +364,6 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
      })
    );
  }
-
-  handleMobileEditing() {
-    if (!IS_MOBILE) return;
-
-    let notifyClosed = true;
-    const handler = () => {
-      if (
-        !this.std
-          .get(FeatureFlagService)
-          .getFlag('enable_mobile_database_editing')
-      ) {
-        const notification = this.std.getOptional(NotificationProvider);
-        if (notification && notifyClosed) {
-          notifyClosed = false;
-          notification.notify({
-            title: html`<div
-              style=${styleMap({
-                whiteSpace: 'wrap',
-              })}
-            >
-              Mobile database editing is not supported yet. You can open it in
-              experimental features, or edit it in desktop mode.
-            </div>`,
-            accent: 'warning',
-            onClose: () => {
-              notifyClosed = true;
-            },
-          });
-        }
-      }
-    };
-
-    this.disposables.addFromEvent(this, 'click', handler);
-  }
-
  private readonly dataViewRootLogic = lazy(
    () =>
      new DataViewRootUILogic({
--- a/blocksuite/affine/blocks/edgeless-text/package.json
+++ b/blocksuite/affine/blocks/edgeless-text/package.json
@@ -20,7 +20,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/embed-doc/package.json
+++ b/blocksuite/affine/blocks/embed-doc/package.json
@@ -20,7 +20,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/embed/package.json
+++ b/blocksuite/affine/blocks/embed/package.json
@@ -20,7 +20,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/frame/package.json
+++ b/blocksuite/affine/blocks/frame/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/affine-widget-frame-title": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/image/package.json
+++ b/blocksuite/affine/blocks/image/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/image/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/image/src/configs/toolbar.ts
@@ -1,8 +1,6 @@
-import { updateBlockAlign } from '@blocksuite/affine-block-note';
-import { ImageBlockModel, TextAlign } from '@blocksuite/affine-model';
+import { ImageBlockModel } from '@blocksuite/affine-model';
 import {
  ActionPlacement,
-  blockCommentToolbarButton,
  type ToolbarModuleConfig,
  ToolbarModuleExtension,
 } from '@blocksuite/affine-shared/services';
@@ -13,9 +11,6 @@ import {
  DeleteIcon,
  DownloadIcon,
  DuplicateIcon,
-  TextAlignCenterIcon,
-  TextAlignLeftIcon,
-  TextAlignRightIcon,
 } from '@blocksuite/icons/lit';
 import { BlockFlavourIdentifier } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
@@ -54,58 +49,6 @@ const builtinToolbarConfig = {
        });
      },
    },
-    {
-      id: 'c.1.align-left',
-      tooltip: 'Align left',
-      icon: TextAlignLeftIcon(),
-      run(ctx) {
-        const block = ctx.getCurrentBlockByType(ImageBlockComponent);
-        if (block) {
-          ctx.chain
-            .pipe(updateBlockAlign, {
-              textAlign: TextAlign.Left,
-              selectedBlocks: [block],
-            })
-            .run();
-        }
-      },
-    },
-    {
-      id: 'c.2.align-center',
-      tooltip: 'Align center',
-      icon: TextAlignCenterIcon(),
-      run(ctx) {
-        const block = ctx.getCurrentBlockByType(ImageBlockComponent);
-        if (block) {
-          ctx.chain
-            .pipe(updateBlockAlign, {
-              textAlign: TextAlign.Center,
-              selectedBlocks: [block],
-            })
-            .run();
-        }
-      },
-    },
-    {
-      id: 'c.3.align-right',
-      tooltip: 'Align right',
-      icon: TextAlignRightIcon(),
-      run(ctx) {
-        const block = ctx.getCurrentBlockByType(ImageBlockComponent);
-        if (block) {
-          ctx.chain
-            .pipe(updateBlockAlign, {
-              textAlign: TextAlign.Right,
-              selectedBlocks: [block],
-            })
-            .run();
-        }
-      },
-    },
-    {
-      id: 'd.comment',
-      ...blockCommentToolbarButton,
-    },
    {
      placement: ActionPlacement.More,
      id: 'a.clipboard',
--- a/blocksuite/affine/blocks/image/src/image-block.ts
+++ b/blocksuite/affine/blocks/image/src/image-block.ts
@@ -143,15 +143,6 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
      width: '100%',
    });

-    const alignItemsStyleMap = styleMap({
-      alignItems:
-        this.model.props.textAlign$.value === 'left'
-          ? 'flex-start'
-          : this.model.props.textAlign$.value === 'right'
-            ? 'flex-end'
-            : undefined,
-    });
-
    const resovledState = this.resourceController.resolveStateWith({
      loadingIcon: LoadingIcon({
        strokeColor: cssVarV2('button/pureWhiteText'),
@@ -171,7 +162,6 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
            html`<affine-page-image
              .block=${this}
              .state=${resovledState}
-              style="${alignItemsStyleMap}"
            ></affine-page-image>`,
          () =>
            html`<affine-image-fallback-card
--- a/blocksuite/affine/blocks/latex/package.json
+++ b/blocksuite/affine/blocks/latex/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/list/package.json
+++ b/blocksuite/affine/blocks/list/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/list/src/list-block.ts
+++ b/blocksuite/affine/blocks/list/src/list-block.ts
@@ -150,10 +150,6 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>

    const listIcon = getListIcon(model, !collapsed, _onClickIcon);

-    const textAlignStyle = styleMap({
-      textAlign: this.model.props.textAlign$?.value,
-    });
-
    const children = html`<div
      class="affine-block-children-container"
      style=${styleMap({
@@ -165,7 +161,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
    </div>`;

    return html`
-      <div class=${'affine-list-block-container'} style="${textAlignStyle}">
+      <div class=${'affine-list-block-container'}>
        <div
          class=${classMap({
            'affine-list-rich-text-wrapper': true,
--- a/blocksuite/affine/blocks/note/package.json
+++ b/blocksuite/affine/blocks/note/package.json
@@ -22,7 +22,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/blocks/note/src/commands/index.ts
+++ b/blocksuite/affine/blocks/note/src/commands/index.ts
@@ -8,4 +8,3 @@ export { indentBlock } from './indent-block.js';
 export { indentBlocks } from './indent-blocks.js';
 export { selectBlock } from './select-block.js';
 export { selectBlocksBetween } from './select-blocks-between.js';
-export { updateBlockAlign } from './update-block-align.js';
--- a/blocksuite/affine/blocks/note/src/commands/update-block-align.ts
+++ b/blocksuite/affine/blocks/note/src/commands/update-block-align.ts
@@ -1,53 +0,0 @@
-import type { TextAlign } from '@blocksuite/affine-model';
-import {
-  getBlockSelectionsCommand,
-  getImageSelectionsCommand,
-  getSelectedBlocksCommand,
-  getTextSelectionCommand,
-} from '@blocksuite/affine-shared/commands';
-import {
-  type BlockComponent,
-  type Command,
-  TextSelection,
-} from '@blocksuite/std';
-
-type UpdateBlockAlignConfig = {
-  textAlign: TextAlign;
-  selectedBlocks?: BlockComponent[];
-};
-
-export const updateBlockAlign: Command<UpdateBlockAlignConfig> = (
-  ctx,
-  next
-) => {
-  let { std, textAlign, selectedBlocks } = ctx;
-
-  if (selectedBlocks === null) {
-    const [result, ctx] = std.command
-      .chain()
-      .tryAll(chain => [
-        chain.pipe(getTextSelectionCommand),
-        chain.pipe(getBlockSelectionsCommand),
-        chain.pipe(getImageSelectionsCommand),
-      ])
-      .pipe(getSelectedBlocksCommand, { types: ['text', 'block', 'image'] })
-      .run();
-    if (result) {
-      selectedBlocks = ctx.selectedBlocks;
-    }
-  }
-
-  if (!selectedBlocks || selectedBlocks.length === 0) return false;
-
-  selectedBlocks.forEach(block => {
-    std.store.updateBlock(block.model, { textAlign });
-  });
-
-  const selectionManager = std.host.selection;
-  const textSelection = selectionManager.find(TextSelection);
-  if (!textSelection) {
-    return false;
-  }
-  selectionManager.setGroup('note', [textSelection]);
-  return next();
-};
--- a/blocksuite/affine/blocks/note/src/configs/slash-menu.ts
+++ b/blocksuite/affine/blocks/note/src/configs/slash-menu.ts
@@ -4,15 +4,9 @@ import {
  textFormatConfigs,
 } from '@blocksuite/affine-inline-preset';
 import {
-  type TextAlignConfig,
-  textAlignConfigs,
  type TextConversionConfig,
  textConversionConfigs,
 } from '@blocksuite/affine-rich-text';
-import {
-  getSelectedModelsCommand,
-  getTextSelectionCommand,
-} from '@blocksuite/affine-shared/commands';
 import { isInsideBlockByFlavour } from '@blocksuite/affine-shared/utils';
 import {
  type SlashMenuActionItem,
@@ -23,7 +17,7 @@ import {
 import { HeadingsIcon } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';

-import { updateBlockAlign, updateBlockType } from '../commands';
+import { updateBlockType } from '../commands';
 import { tooltips } from './tooltips';

 let basicIndex = 0;
@@ -66,10 +60,6 @@ const noteSlashMenuConfig: SlashMenuConfig = {
        createConversionItem(config, `1_List@${index++}`)
      ),

-    ...textAlignConfigs.map((config, index) =>
-      createAlignItem(config, `2_Align@${index++}`)
-    ),
-
    ...textFormatConfigs
      .filter(i => !['Code', 'Link'].includes(i.name))
      .map((config, index) =>
@@ -99,26 +89,6 @@ function createConversionItem(
  };
 }

-function createAlignItem(
-  config: TextAlignConfig,
-  group?: SlashMenuItem['group']
-): SlashMenuActionItem {
-  const { textAlign, name, icon } = config;
-  return {
-    name,
-    group,
-    icon,
-    action: ({ std }) => {
-      std.command
-        .chain()
-        .pipe(getTextSelectionCommand)
-        .pipe(getSelectedModelsCommand, { types: ['text'] })
-        .pipe(updateBlockAlign, { textAlign })
-        .run();
-    },
-  };
-}
-
 function createTextFormatItem(
  config: TextFormatConfig,
  group?: SlashMenuItem['group']
--- a/blocksuite/affine/blocks/note/src/note-keymap.ts
+++ b/blocksuite/affine/blocks/note/src/note-keymap.ts
@@ -5,10 +5,7 @@ import {
  NoteBlockSchema,
  ParagraphBlockModel,
 } from '@blocksuite/affine-model';
-import {
-  textAlignConfigs,
-  textConversionConfigs,
-} from '@blocksuite/affine-rich-text';
+import { textConversionConfigs } from '@blocksuite/affine-rich-text';
 import {
  focusBlockEnd,
  focusBlockStart,
@@ -39,7 +36,6 @@ import {
  indentBlocks,
  selectBlock,
  selectBlocksBetween,
-  updateBlockAlign,
  updateBlockType,
 } from './commands';
 import { moveBlockConfigs } from './move-block';
@@ -161,36 +157,6 @@ class NoteKeymap {
      );
  };

-  private readonly _bindTextAlignHotKey = () => {
-    return textAlignConfigs.reduce(
-      (acc, item) => {
-        const keymap = item.hotkey!.reduce(
-          (acc, key) => {
-            return {
-              ...acc,
-              [key]: ctx => {
-                ctx.get('defaultState').event.preventDefault();
-                const [result] = this._std.command
-                  .chain()
-                  .pipe(updateBlockAlign, { textAlign: item.textAlign })
-                  .run();
-
-                return result;
-              },
-            };
-          },
-          {} as Record<string, UIEventHandler>
-        );
-
-        return {
-          ...acc,
-          ...keymap,
-        };
-      },
-      {} as Record<string, UIEventHandler>
-    );
-  };
-
  private _focusBlock: BlockComponent | null = null;

  private readonly _getClosestNoteByBlockId = (blockId: string) => {
@@ -602,7 +568,6 @@ class NoteKeymap {
      ...this._bindMoveBlockHotKey(),
      ...this._bindQuickActionHotKey(),
      ...this._bindTextConversionHotKey(),
-      ...this._bindTextAlignHotKey(),
      Tab: ctx => {
        const [success] = this.std.command.exec(indentBlocks);

--- a/blocksuite/affine/blocks/paragraph/src/paragraph-block.ts
+++ b/blocksuite/affine/blocks/paragraph/src/paragraph-block.ts
@@ -264,10 +264,6 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
      `;
    }

-    const textAlignStyle = styleMap({
-      textAlign: this.model.props.textAlign$?.value,
-    });
-
    const children = html`<div
      class="affine-block-children-container"
      style=${styleMap({
@@ -292,7 +288,6 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
          'affine-paragraph-block-container': true,
          'highlight-comment': this.isCommentHighlighted,
        })}
-        style="${textAlignStyle}"
        data-has-collapsed-siblings="${collapsedSiblings.length > 0}"
      >
        <div
--- a/blocksuite/affine/blocks/paragraph/src/utils/merge-with-prev.ts
+++ b/blocksuite/affine/blocks/paragraph/src/utils/merge-with-prev.ts
@@ -24,7 +24,6 @@ import {
  getPrevContentBlock,
  matchModels,
 } from '@blocksuite/affine-shared/utils';
-import { IS_ANDROID, IS_MOBILE } from '@blocksuite/global/env';
 import { BlockSelection, type EditorHost } from '@blocksuite/std';
 import type { BlockModel, Text } from '@blocksuite/store';

@@ -79,28 +78,6 @@ export function mergeWithPrev(editorHost: EditorHost, model: BlockModel) {
      index: lengthBeforeJoin,
      length: 0,
    }).catch(console.error);
-
-    // due to some IME like Microsoft Swift IME on Android will reset range after join text,
-    // for example:
-    //
-    // $ZERO_WIDTH_FOR_EMPTY_LINE     <--- p1
-    // |aaa                           <--- p2
-    //
-    // after pressing backspace, during beforeinput event, the native range is (p1, 1) -> (p2, 0)
-    // and after browser and IME handle the event, the native range is (p1, 1) -> (p1, 1)
-    //
-    // a|aa                            <--- p1
-    //
-    // so we need to set range again after join text.
-    if (IS_ANDROID) {
-      setTimeout(() => {
-        asyncSetInlineRange(editorHost.std, prevBlock, {
-          index: lengthBeforeJoin,
-          length: 0,
-        }).catch(console.error);
-      });
-    }
-
    return true;
  }

@@ -114,17 +91,10 @@ export function mergeWithPrev(editorHost: EditorHost, model: BlockModel) {
      ...EMBED_BLOCK_MODEL_LIST,
    ])
  ) {
-    // due to create a block selection will clear text selection, which lead
-    // the virtual keyboard to be auto closed on mobile. This behavior breaks
-    // the user experience.
-    if (!IS_MOBILE) {
-      const selection = editorHost.selection.create(BlockSelection, {
-        blockId: prevBlock.id,
-      });
-      editorHost.selection.setGroup('note', [selection]);
-    } else {
-      doc.deleteBlock(prevBlock);
-    }
+    const selection = editorHost.selection.create(BlockSelection, {
+      blockId: prevBlock.id,
+    });
+    editorHost.selection.setGroup('note', [selection]);

    if (model.text?.length === 0) {
      doc.deleteBlock(model, {
--- a/blocksuite/affine/blocks/root/package.json
+++ b/blocksuite/affine/blocks/root/package.json
@@ -38,7 +38,7 @@
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/root/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/root/src/configs/toolbar.ts
@@ -8,10 +8,7 @@ import {
  notifyDocCreated,
  promptDocTitle,
 } from '@blocksuite/affine-block-embed';
-import {
-  updateBlockAlign,
-  updateBlockType,
-} from '@blocksuite/affine-block-note';
+import { updateBlockType } from '@blocksuite/affine-block-note';
 import type { HighlightType } from '@blocksuite/affine-components/highlight-dropdown-menu';
 import { toast } from '@blocksuite/affine-components/toast';
 import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
@@ -26,12 +23,8 @@ import {
 import {
  EmbedLinkedDocBlockSchema,
  EmbedSyncedDocBlockSchema,
-  type TextAlign,
 } from '@blocksuite/affine-model';
-import {
-  textAlignConfigs,
-  textConversionConfigs,
-} from '@blocksuite/affine-rich-text';
+import { textConversionConfigs } from '@blocksuite/affine-rich-text';
 import {
  copySelectedModelsCommand,
  deleteSelectedModelsCommand,
@@ -53,7 +46,6 @@ import {
  ActionPlacement,
  blockCommentToolbarButton,
 } from '@blocksuite/affine-shared/services';
-import { getMostCommonValue } from '@blocksuite/affine-shared/utils';
 import { tableViewMeta } from '@blocksuite/data-view/view-presets';
 import {
  CopyIcon,
@@ -138,64 +130,6 @@ const conversionsActionGroup = {
  },
 } as const satisfies ToolbarActionGenerator;

-const alignActionGroup = {
-  id: 'b.align',
-  when: ({ chain }) => isFormatSupported(chain).run()[0],
-  generate({ chain }) {
-    const [ok, { selectedModels = [] }] = chain
-      .tryAll(chain => [
-        chain.pipe(getTextSelectionCommand),
-        chain.pipe(getBlockSelectionsCommand),
-      ])
-      .pipe(getSelectedModelsCommand, { types: ['text', 'block'] })
-      .run();
-    if (!ok) return null;
-
-    const alignment =
-      textAlignConfigs.find(
-        ({ textAlign }) =>
-          textAlign ===
-          getMostCommonValue(
-            selectedModels.map(
-              ({ props }) => props as { textAlign?: TextAlign }
-            ),
-            'textAlign'
-          )
-      ) ?? textAlignConfigs[0];
-    const update = (textAlign: TextAlign) => {
-      chain.pipe(updateBlockAlign, { textAlign }).run();
-    };
-
-    return {
-      content: html`
-        <editor-menu-button
-          .contentPadding="${'8px'}"
-          .button=${html`
-            <editor-icon-button aria-label="Align" .tooltip="${'Align'}">
-              ${alignment.icon} ${EditorChevronDown}
-            </editor-icon-button>
-          `}
-        >
-          <div data-size="large" data-orientation="vertical">
-            ${repeat(
-              textAlignConfigs,
-              item => item.name,
-              ({ textAlign, name, icon }) => html`
-                <editor-menu-action
-                  aria-label=${name}
-                  @click=${() => update(textAlign)}
-                >
-                  ${icon}<span class="label">${name}</span>
-                </editor-menu-action>
-              `
-            )}
-          </div>
-        </editor-menu-button>
-      `,
-    };
-  },
-} as const satisfies ToolbarActionGenerator;
-
 const inlineTextActionGroup = {
  id: 'b.inline-text',
  when: ({ chain }) => isFormatSupported(chain).run()[0],
@@ -357,7 +291,6 @@ const turnIntoLinkedDoc = {
 export const builtinToolbarConfig = {
  actions: [
    conversionsActionGroup,
-    alignActionGroup,
    inlineTextActionGroup,
    highlightActionGroup,
    turnIntoDatabase,
--- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts
@@ -634,9 +634,9 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {

    const movedElements = new Set([
      ...selectedElements,
-      ...selectedElements.flatMap(el =>
-        isGfxGroupCompatibleModel(el) ? el.descendantElements : []
-      ),
+      ...selectedElements
+        .map(el => (isGfxGroupCompatibleModel(el) ? el.descendantElements : []))
+        .flat(),
    ]);

    movedElements.forEach(element => {
--- a/blocksuite/affine/blocks/root/src/edgeless/index.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/index.ts
@@ -4,6 +4,6 @@ export * from './clipboard/command';
 export * from './edgeless-root-block.js';
 export { EdgelessRootService } from './edgeless-root-service.js';
 export * from './utils/clipboard-utils.js';
-export { getElementProps, sortEdgelessElements } from './utils/clone-utils.js';
+export { sortEdgelessElements } from './utils/clone-utils.js';
 export { isCanvasElement } from './utils/query.js';
 export { EDGELESS_BLOCK_CHILD_PADDING } from '@blocksuite/affine-shared/consts';
--- a/blocksuite/affine/blocks/surface-ref/package.json
+++ b/blocksuite/affine/blocks/surface-ref/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/blocks/surface-ref/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/surface-ref/src/configs/toolbar.ts
@@ -5,7 +5,6 @@ import {
 } from '@blocksuite/affine-shared/commands';
 import {
  ActionPlacement,
-  blockCommentToolbarButton,
  type ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
 import { CaptionIcon, CopyIcon, DeleteIcon } from '@blocksuite/icons/lit';
@@ -62,10 +61,6 @@ export const surfaceRefToolbarModuleConfig: ToolbarModuleConfig = {
        surfaceRefBlock.captionElement.show();
      },
    },
-    {
-      id: 'e.comment',
-      ...blockCommentToolbarButton,
-    },
    {
      id: 'a.clipboard',
      placement: ActionPlacement.More,
--- a/blocksuite/affine/blocks/surface/src/renderer/dom-renderer.ts
+++ b/blocksuite/affine/blocks/surface/src/renderer/dom-renderer.ts
@@ -11,7 +11,7 @@ import {
  getBoundWithRotation,
  intersects,
 } from '@blocksuite/global/gfx';
-import { type BlockStdScope, SurfaceSelection } from '@blocksuite/std';
+import type { BlockStdScope } from '@blocksuite/std';
 import type {
  GfxCompatibleInterface,
  GridManager,
@@ -298,10 +298,7 @@ export class DomRenderer {
      viewportBounds,
      zoom
    );
-    const zIndexStyle = {
-      'z-index': this.layerManager.getZIndex(elementModel),
-    };
-    Object.assign(domElement.style, geometricStyles, zIndexStyle);
+    Object.assign(domElement.style, geometricStyles);
    Object.assign(domElement.style, PLACEHOLDER_RESET_STYLES);

    // Clear classes specific to shapes, if applicable
@@ -338,10 +335,7 @@ export class DomRenderer {
      zoom
    );
    const opacityStyle = getOpacity(elementModel);
-    const zIndexStyle = {
-      'z-index': this.layerManager.getZIndex(elementModel),
-    };
-    Object.assign(domElement.style, geometricStyles, opacityStyle, zIndexStyle);
+    Object.assign(domElement.style, geometricStyles, opacityStyle);

    this._renderElement(elementModel, domElement);
  }
@@ -390,36 +384,6 @@ export class DomRenderer {
        this.refresh();
      })
    );
-
-    // Workaround for the group rendering reactive update when selection changed
-    let lastSet = new Set<string>();
-    this._disposables.add(
-      this.std.selection.filter$(SurfaceSelection).subscribe(selections => {
-        const groupRelatedSelection = new Set(
-          selections.flatMap(s =>
-            s.elements.flatMap(e => {
-              const element = surfaceModel.getElementById(e);
-              if (
-                element &&
-                (element.type === 'group' || element.groups.length !== 0)
-              ) {
-                return [element.id, ...element.groups.map(g => g.id)];
-              }
-              return [];
-            })
-          )
-        );
-
-        if (lastSet.symmetricDifference(groupRelatedSelection).size !== 0) {
-          lastSet.union(groupRelatedSelection).forEach(g => {
-            this._markElementDirty(g, UpdateType.ELEMENT_UPDATED);
-          });
-          this.refresh();
-        }
-
-        lastSet = groupRelatedSelection;
-      })
-    );
  }

  addOverlay = (overlay: Overlay) => {
--- a/blocksuite/affine/blocks/table/package.json
+++ b/blocksuite/affine/blocks/table/package.json
@@ -20,7 +20,7 @@
    "@blocksuite/affine-widget-slash-menu": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@emotion/css": "^11.13.5",
--- a/blocksuite/affine/blocks/table/src/table-block.ts
+++ b/blocksuite/affine/blocks/table/src/table-block.ts
@@ -144,16 +144,6 @@ export class TableBlockComponent extends CaptionedBlockComponent<TableBlockModel
          style=${styleMap({
            paddingLeft: `${virtualPadding}px`,
            paddingRight: `${virtualPadding}px`,
-            marginLeft:
-              !this.model.props.textAlign$.value ||
-              this.model.props.textAlign$?.value === 'left'
-                ? undefined
-                : 'auto',
-            marginRight:
-              !this.model.props.textAlign$.value ||
-              this.model.props.textAlign$?.value === 'right'
-                ? undefined
-                : 'auto',
            width: 'max-content',
          })}
        >
--- a/blocksuite/affine/components/package.json
+++ b/blocksuite/affine/components/package.json
@@ -13,7 +13,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@blocksuite/sync": "workspace:*",
--- a/blocksuite/affine/components/src/context-menu/button.ts
+++ b/blocksuite/affine/components/src/context-menu/button.ts
@@ -193,7 +193,6 @@ export const menuButtonItems = {
    (config: {
      name: string;
      label?: () => TemplateResult;
-      info?: TemplateResult;
      prefix?: TemplateResult;
      postfix?: TemplateResult;
      isSelected?: boolean;
@@ -212,7 +211,7 @@ export const menuButtonItems = {
          return html`
            ${config.prefix}
            <div class="affine-menu-action-text">
-              ${config.label?.() ?? config.name} ${config.info}
+              ${config.label?.() ?? config.name}
            </div>
            ${config.postfix ?? (config.isSelected ? DoneIcon() : undefined)}
          `;
--- a/blocksuite/affine/data-view/package.json
+++ b/blocksuite/affine/data-view/package.json
@@ -13,7 +13,7 @@
    "@blocksuite/affine-components": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@emotion/css": "^11.13.5",
--- a/blocksuite/affine/data-view/src/core/view/data-view-base.ts
+++ b/blocksuite/affine/data-view/src/core/view/data-view-base.ts
@@ -65,7 +65,7 @@ export abstract class DataViewUILogicBase<
      return handler(context);
    });
  }
-  setSelection(selection?: Selection) {
+  setSelection(selection?: Selection): void {
    this.root.setSelection(selection);
  }

--- a/blocksuite/affine/data-view/src/view-presets/kanban/mobile/cell.ts
+++ b/blocksuite/affine/data-view/src/view-presets/kanban/mobile/cell.ts
@@ -73,9 +73,7 @@ export class MobileKanbanCell extends SignalWatcher(
    if (this.view.readonly$.value) {
      return;
    }
-    const setSelection = this.kanbanViewLogic.setSelection.bind(
-      this.kanbanViewLogic
-    );
+    const setSelection = this.kanbanViewLogic.setSelection;
    const viewId = this.kanbanViewLogic.view.id;
    if (setSelection && viewId) {
      if (editing && this.cell?.beforeEnterEditMode() === false) {
@@ -103,12 +101,12 @@ export class MobileKanbanCell extends SignalWatcher(
    this.disposables.add(
      effect(() => {
        const isEditing = this.isSelectionEditing$.value;
-        if (isEditing && !this.isEditing$.peek()) {
+        if (isEditing) {
          this.isEditing$.value = true;
          requestAnimationFrame(() => {
            this._cell.value?.afterEnterEditingMode();
          });
-        } else if (!isEditing && this.isEditing$.peek()) {
+        } else {
          this._cell.value?.beforeExitEditingMode();
          this.isEditing$.value = false;
        }
--- a/blocksuite/affine/data-view/src/view-presets/kanban/mobile/kanban-view-ui-logic.ts
+++ b/blocksuite/affine/data-view/src/view-presets/kanban/mobile/kanban-view-ui-logic.ts
@@ -86,9 +86,6 @@ export class MobileKanbanViewUILogic extends DataViewUILogicBase<
  }

  renderAddGroup = () => {
-    if (this.readonly) {
-      return;
-    }
    const addGroup = this.groupManager.addGroup;
    if (!addGroup) {
      return;
--- a/blocksuite/affine/data-view/src/view-presets/table/mobile/cell.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/mobile/cell.ts
@@ -68,9 +68,7 @@ export class MobileTableCell extends SignalWatcher(
    if (this.view.readonly$.value) {
      return;
    }
-    const setSelection = this.tableViewLogic.setSelection.bind(
-      this.tableViewLogic
-    );
+    const setSelection = this.tableViewLogic.setSelection;
    const viewId = this.tableViewLogic.view.id;
    if (setSelection && viewId) {
      if (editing && this.cell?.beforeEnterEditMode() === false) {
@@ -105,13 +103,13 @@ export class MobileTableCell extends SignalWatcher(
    this.disposables.add(
      effect(() => {
        const isEditing = this.isSelectionEditing$.value;
-        if (isEditing && !this.isEditing$.peek()) {
+        if (isEditing) {
          this.isEditing$.value = true;
          const cell = this._cell.value;
          requestAnimationFrame(() => {
            cell?.afterEnterEditingMode();
          });
-        } else if (!isEditing && this.isEditing$.peek()) {
+        } else {
          this._cell.value?.beforeExitEditingMode();
          this.isEditing$.value = false;
        }
--- a/blocksuite/affine/data-view/src/view-presets/table/mobile/table-view-style.ts
+++ b/blocksuite/affine/data-view/src/view-presets/table/mobile/table-view-style.ts
@@ -5,6 +5,12 @@ export const mobileTableViewWrapper = css({
  position: 'relative',
  width: '100%',
  paddingBottom: '4px',
+  /**
+   * Disable horizontal scrolling to prevent crashes on iOS Safari
+   * See https://github.com/toeverything/AFFiNE/pull/12203
+   * and https://github.com/toeverything/blocksuite/pull/8784
+   */
+  overflowX: 'hidden',
  overflowY: 'hidden',
 });

--- a/blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/list-view.ts
+++ b/blocksuite/affine/data-view/src/widget-presets/quick-setting-bar/filter/list-view.ts
@@ -88,9 +88,6 @@ export class FilterBar extends SignalWatcher(ShadowlessElement) {
  };

  private readonly addFilter = (e: MouseEvent) => {
-    if (this.dataViewLogic.root.config.dataSource.readonly$.peek()) {
-      return;
-    }
    const element = popupTargetFromElement(e.target as HTMLElement);
    popCreateFilter(element, {
      vars: this.vars,
--- a/blocksuite/affine/foundation/package.json
+++ b/blocksuite/affine/foundation/package.json
@@ -16,7 +16,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/data-view": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/fragments/adapter-panel/package.json
+++ b/blocksuite/affine/fragments/adapter-panel/package.json
@@ -15,7 +15,7 @@
    "@blocksuite/affine-model": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/fragments/doc-title/package.json
+++ b/blocksuite/affine/fragments/doc-title/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/fragments/doc-title/src/doc-title.ts
+++ b/blocksuite/affine/fragments/doc-title/src/doc-title.ts
@@ -20,15 +20,14 @@ const DOC_BLOCK_CHILD_PADDING = 24;
 export class DocTitle extends WithDisposable(ShadowlessElement) {
  static override styles = css`
    .doc-title-container {
+      box-sizing: border-box;
+      font-family: var(--affine-font-family);
+      font-size: var(--affine-font-base);
+      line-height: var(--affine-line-height);
+      color: var(--affine-text-primary-color);
      font-size: 40px;
      line-height: 50px;
      font-weight: 700;
-    }
-    .doc-icon-container,
-    .doc-title-container {
-      box-sizing: border-box;
-      font-family: var(--affine-font-family);
-      color: var(--affine-text-primary-color);
      outline: none;
      resize: none;
      border: 0;
@@ -47,14 +46,9 @@ export class DocTitle extends WithDisposable(ShadowlessElement) {
        ${DOC_BLOCK_CHILD_PADDING}px
      );
    }
-    .doc-icon-container + * .doc-title-container {
-      /* when doc icon exists, remove the top padding */
-      padding-top: 0;
-    }

    /* Extra small devices (phones, 640px and down) */
    @container viewport (width <= 640px) {
-      .doc-icon-container,
      .doc-title-container {
        padding-left: ${DOC_BLOCK_CHILD_PADDING}px;
        padding-right: ${DOC_BLOCK_CHILD_PADDING}px;
--- a/blocksuite/affine/fragments/frame-panel/package.json
+++ b/blocksuite/affine/fragments/frame-panel/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/fragments/outline/package.json
+++ b/blocksuite/affine/fragments/outline/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-rich-text": "workspace:*",
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
--- a/blocksuite/affine/fragments/outline/src/utils/query.ts
+++ b/blocksuite/affine/fragments/outline/src/utils/query.ts
@@ -68,5 +68,5 @@ export function getHeadingBlocksFromDoc(
  ignoreEmpty = false
 ) {
  const notes = getNotesFromStore(store, modes);
-  return notes.flatMap(note => getHeadingBlocksFromNote(note, ignoreEmpty));
+  return notes.map(note => getHeadingBlocksFromNote(note, ignoreEmpty)).flat();
 }
--- a/blocksuite/affine/gfx/brush/package.json
+++ b/blocksuite/affine/gfx/brush/package.json
@@ -18,7 +18,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/brush/src/renderer/element/brush.ts
+++ b/blocksuite/affine/gfx/brush/src/renderer/element/brush.ts
--- a/blocksuite/affine/gfx/brush/src/index.ts
+++ b/blocksuite/affine/gfx/brush/src/index.ts
@@ -1,7 +1,7 @@
 export * from './adapter';
 export * from './brush-tool';
+export * from './element-renderer';
 export * from './eraser-tool';
 export * from './highlighter-tool';
-export * from './renderer';
 export * from './toolbar/configs';
 export * from './toolbar/senior-tool';
--- a/blocksuite/affine/gfx/brush/src/renderer/dom/brush.ts
+++ b/blocksuite/affine/gfx/brush/src/renderer/dom/brush.ts
@@ -1,69 +0,0 @@
-import {
-  DomElementRendererExtension,
-  type DomRenderer,
-} from '@blocksuite/affine-block-surface';
-import type { BrushElementModel } from '@blocksuite/affine-model';
-import { DefaultTheme } from '@blocksuite/affine-model';
-
-export const BrushDomRendererExtension = DomElementRendererExtension(
-  'brush',
-  (
-    model: BrushElementModel,
-    domElement: HTMLElement,
-    renderer: DomRenderer
-  ) => {
-    const { zoom } = renderer.viewport;
-    const [, , w, h] = model.deserializedXYWH;
-
-    // Early return if invalid dimensions
-    if (w <= 0 || h <= 0) {
-      return;
-    }
-
-    // Early return if no commands
-    if (!model.commands) {
-      return;
-    }
-
-    // Clear previous content
-    domElement.innerHTML = '';
-
-    // Get color value
-    const color = renderer.getColorValue(model.color, DefaultTheme.black, true);
-
-    // Create SVG element
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.style.position = 'absolute';
-    svg.style.left = '0';
-    svg.style.top = '0';
-    svg.style.width = `${w * zoom}px`;
-    svg.style.height = `${h * zoom}px`;
-    svg.style.overflow = 'visible';
-    svg.style.pointerEvents = 'none';
-    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
-
-    // Apply rotation transform
-    if (model.rotate !== 0) {
-      svg.style.transform = `rotate(${model.rotate}deg)`;
-      svg.style.transformOrigin = 'center';
-    }
-
-    // Create path element for the brush stroke
-    const pathElement = document.createElementNS(
-      'http://www.w3.org/2000/svg',
-      'path'
-    );
-    pathElement.setAttribute('d', model.commands);
-    pathElement.setAttribute('fill', color);
-    pathElement.setAttribute('stroke', 'none');
-
-    svg.append(pathElement);
-    domElement.replaceChildren(svg);
-
-    // Set element size and position
-    domElement.style.width = `${w * zoom}px`;
-    domElement.style.height = `${h * zoom}px`;
-    domElement.style.overflow = 'visible';
-    domElement.style.pointerEvents = 'none';
-  }
-);
--- a/blocksuite/affine/gfx/brush/src/renderer/dom/highlighter.ts
+++ b/blocksuite/affine/gfx/brush/src/renderer/dom/highlighter.ts
@@ -1,73 +0,0 @@
-import {
-  DomElementRendererExtension,
-  type DomRenderer,
-} from '@blocksuite/affine-block-surface';
-import type { HighlighterElementModel } from '@blocksuite/affine-model';
-import { DefaultTheme } from '@blocksuite/affine-model';
-
-export const HighlighterDomRendererExtension = DomElementRendererExtension(
-  'highlighter',
-  (
-    model: HighlighterElementModel,
-    domElement: HTMLElement,
-    renderer: DomRenderer
-  ) => {
-    const { zoom } = renderer.viewport;
-    const [, , w, h] = model.deserializedXYWH;
-
-    // Early return if invalid dimensions
-    if (w <= 0 || h <= 0) {
-      return;
-    }
-
-    // Early return if no commands
-    if (!model.commands) {
-      return;
-    }
-
-    // Clear previous content
-    domElement.innerHTML = '';
-
-    // Get color value
-    const color = renderer.getColorValue(
-      model.color,
-      DefaultTheme.hightlighterColor,
-      true
-    );
-
-    // Create SVG element
-    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-    svg.style.position = 'absolute';
-    svg.style.left = '0';
-    svg.style.top = '0';
-    svg.style.width = `${w * zoom}px`;
-    svg.style.height = `${h * zoom}px`;
-    svg.style.overflow = 'visible';
-    svg.style.pointerEvents = 'none';
-    svg.setAttribute('viewBox', `0 0 ${w} ${h}`);
-
-    // Apply rotation transform
-    if (model.rotate !== 0) {
-      svg.style.transform = `rotate(${model.rotate}deg)`;
-      svg.style.transformOrigin = 'center';
-    }
-
-    // Create path element for the highlighter stroke
-    const pathElement = document.createElementNS(
-      'http://www.w3.org/2000/svg',
-      'path'
-    );
-    pathElement.setAttribute('d', model.commands);
-    pathElement.setAttribute('fill', color);
-    pathElement.setAttribute('stroke', 'none');
-
-    svg.append(pathElement);
-    domElement.replaceChildren(svg);
-
-    // Set element size and position
-    domElement.style.width = `${w * zoom}px`;
-    domElement.style.height = `${h * zoom}px`;
-    domElement.style.overflow = 'visible';
-    domElement.style.pointerEvents = 'none';
-  }
-);
--- a/blocksuite/affine/gfx/brush/src/renderer/dom/index.ts
+++ b/blocksuite/affine/gfx/brush/src/renderer/dom/index.ts
@@ -1,2 +0,0 @@
-export { BrushDomRendererExtension } from './brush';
-export { HighlighterDomRendererExtension } from './highlighter';
--- a/blocksuite/affine/gfx/brush/src/renderer/element/index.ts
+++ b/blocksuite/affine/gfx/brush/src/renderer/element/index.ts
@@ -1,2 +0,0 @@
-export { BrushElementRendererExtension } from './brush';
-export { HighlighterElementRendererExtension } from './highlighter';
--- a/blocksuite/affine/gfx/brush/src/renderer/index.ts
+++ b/blocksuite/affine/gfx/brush/src/renderer/index.ts
@@ -1,2 +0,0 @@
-export * from './dom';
-export * from './element';
--- a/blocksuite/affine/gfx/brush/src/view.ts
+++ b/blocksuite/affine/gfx/brush/src/view.ts
@@ -5,14 +5,9 @@ import {

 import { BrushTool } from './brush-tool';
 import { effects } from './effects';
+import { BrushElementRendererExtension } from './element-renderer';
 import { EraserTool } from './eraser-tool';
 import { HighlighterTool } from './highlighter-tool';
-import {
-  BrushDomRendererExtension,
-  BrushElementRendererExtension,
-  HighlighterDomRendererExtension,
-  HighlighterElementRendererExtension,
-} from './renderer';
 import {
  brushToolbarExtension,
  highlighterToolbarExtension,
@@ -35,9 +30,6 @@ export class BrushViewExtension extends ViewExtensionProvider {
    context.register(HighlighterTool);

    context.register(BrushElementRendererExtension);
-    context.register(BrushDomRendererExtension);
-    context.register(HighlighterElementRendererExtension);
-    context.register(HighlighterDomRendererExtension);

    context.register(brushToolbarExtension);
    context.register(highlighterToolbarExtension);
--- a/blocksuite/affine/gfx/connector/package.json
+++ b/blocksuite/affine/gfx/connector/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/connector/src/element-renderer/connector-dom.ts
+++ b/blocksuite/affine/gfx/connector/src/element-renderer/connector-dom.ts
@@ -0,0 +1,11 @@
+import { DomElementRendererExtension } from '@blocksuite/affine-block-surface';
+
+import { connectorDomRenderer } from './connector-dom/index.js';
+
+/**
+ * Extension to register the DOM-based renderer for 'connector' elements.
+ */
+export const ConnectorDomRendererExtension = DomElementRendererExtension(
+  'connector',
+  connectorDomRenderer
+);
--- a/blocksuite/affine/gfx/connector/src/element-renderer/connector-dom/index.ts
+++ b/blocksuite/affine/gfx/connector/src/element-renderer/connector-dom/index.ts
@@ -1,18 +1,14 @@
-import {
-  DomElementRendererExtension,
-  type DomRenderer,
-} from '@blocksuite/affine-block-surface';
+import type { DomRenderer } from '@blocksuite/affine-block-surface';
 import {
  type ConnectorElementModel,
  ConnectorMode,
  DefaultTheme,
-  type LocalConnectorElementModel,
  type PointStyle,
 } from '@blocksuite/affine-model';
 import { PointLocation, SVGPathBuilder } from '@blocksuite/global/gfx';

-import { isConnectorWithLabel } from '../connector-manager';
-import { DEFAULT_ARROW_SIZE } from './utils';
+import { isConnectorWithLabel } from '../../connector-manager.js';
+import { DEFAULT_ARROW_SIZE } from '../utils.js';

 interface PathBounds {
  minX: number;
@@ -225,8 +221,8 @@ function renderConnectorLabel(
 * @param element - The HTMLElement to apply the connector's styles to.
 * @param renderer - The main DOMRenderer instance, providing access to viewport and color utilities.
 */
-export const connectorBaseDomRenderer = (
-  model: ConnectorElementModel | LocalConnectorElementModel,
+export const connectorDomRenderer = (
+  model: ConnectorElementModel,
  element: HTMLElement,
  renderer: DomRenderer
 ): void => {
@@ -362,21 +358,10 @@ export const connectorBaseDomRenderer = (
  element.style.height = `${model.h * zoom}px`;
  element.style.overflow = 'visible';
  element.style.pointerEvents = 'none';
-};

-export const connectorDomRenderer = (
-  model: ConnectorElementModel,
-  element: HTMLElement,
-  renderer: DomRenderer
-): void => {
-  connectorBaseDomRenderer(model, element, renderer);
-  renderConnectorLabel(model, element, renderer, renderer.viewport.zoom);
-};
+  // Set z-index for layering
+  element.style.zIndex = renderer.layerManager.getZIndex(model).toString();

-/**
- * Extension to register the DOM-based renderer for 'connector' elements.
- */
-export const ConnectorDomRendererExtension = DomElementRendererExtension(
-  'connector',
-  connectorDomRenderer
-);
+  // Render label if present
+  renderConnectorLabel(model, element, renderer, zoom);
+};
--- a/blocksuite/affine/gfx/connector/src/renderer/element-renderer.ts
+++ b/blocksuite/affine/gfx/connector/src/renderer/element-renderer.ts
@@ -25,7 +25,7 @@ import {
 } from '@blocksuite/global/gfx';
 import { deltaInsertsToChunks } from '@blocksuite/std/inline';

-import { isConnectorWithLabel } from '../connector-manager';
+import { isConnectorWithLabel } from '../connector-manager.js';
 import {
  DEFAULT_ARROW_SIZE,
  getArrowOptions,
@@ -33,7 +33,7 @@ import {
  renderCircle,
  renderDiamond,
  renderTriangle,
-} from './utils';
+} from './utils.js';

 export const connector: ElementRenderer<
  ConnectorElementModel | LocalConnectorElementModel
--- a/blocksuite/affine/gfx/connector/src/element-renderer/utils.ts
+++ b/blocksuite/affine/gfx/connector/src/element-renderer/utils.ts
--- a/blocksuite/affine/gfx/connector/src/index.ts
+++ b/blocksuite/affine/gfx/connector/src/index.ts
@@ -1,8 +1,9 @@
 export * from './adapter';
 export * from './connector-manager';
 export * from './connector-tool';
+export * from './element-renderer';
+export { ConnectorDomRendererExtension } from './element-renderer/connector-dom';
 export * from './element-transform';
-export * from './renderer';
 export * from './text';
 export * from './toolbar/config';
 export * from './toolbar/quick-tool';
--- a/blocksuite/affine/gfx/connector/src/renderer/index.ts
+++ b/blocksuite/affine/gfx/connector/src/renderer/index.ts
@@ -1,2 +0,0 @@
-export * from './dom-renderer';
-export * from './element-renderer';
--- a/blocksuite/affine/gfx/connector/src/view.ts
+++ b/blocksuite/affine/gfx/connector/src/view.ts
@@ -6,11 +6,9 @@ import {
 import { ConnectionOverlay } from './connector-manager';
 import { ConnectorTool } from './connector-tool';
 import { effects } from './effects';
+import { ConnectorElementRendererExtension } from './element-renderer';
+import { ConnectorDomRendererExtension } from './element-renderer/connector-dom';
 import { ConnectorFilter } from './element-transform';
-import {
-  ConnectorDomRendererExtension,
-  ConnectorElementRendererExtension,
-} from './renderer';
 import { connectorToolbarExtension } from './toolbar/config';
 import { connectorQuickTool } from './toolbar/quick-tool';
 import { ConnectorElementView, ConnectorInteraction } from './view/view';
--- a/blocksuite/affine/gfx/group/package.json
+++ b/blocksuite/affine/gfx/group/package.json
@@ -19,7 +19,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/group/src/element-renderer/consts.ts
+++ b/blocksuite/affine/gfx/group/src/element-renderer/consts.ts
--- a/blocksuite/affine/gfx/group/src/renderer/element-renderer.ts
+++ b/blocksuite/affine/gfx/group/src/renderer/element-renderer.ts
@@ -6,7 +6,7 @@ import {
 import type { GroupElementModel } from '@blocksuite/affine-model';
 import { Bound } from '@blocksuite/global/gfx';

-import { titleRenderParams } from './utils';
+import { titleRenderParams } from './utils.js';

 export const group: ElementRenderer<GroupElementModel> = (
  model,
--- a/blocksuite/affine/gfx/group/src/element-renderer/utils.ts
+++ b/blocksuite/affine/gfx/group/src/element-renderer/utils.ts
@@ -13,7 +13,7 @@ import {
  GROUP_TITLE_FONT_SIZE,
  GROUP_TITLE_OFFSET,
  GROUP_TITLE_PADDING,
-} from './consts';
+} from './consts.js';

 export function titleRenderParams(group: GroupElementModel, zoom: number) {
  let text = group.title.toString().trim();
--- a/blocksuite/affine/gfx/group/src/index.ts
+++ b/blocksuite/affine/gfx/group/src/index.ts
@@ -1,6 +1,6 @@
 export * from './adapter';
 export * from './command';
+export * from './element-renderer';
 export * from './element-view';
-export * from './renderer';
 export * from './text/text';
 export * from './toolbar/config';
--- a/blocksuite/affine/gfx/group/src/renderer/dom-renderer.ts
+++ b/blocksuite/affine/gfx/group/src/renderer/dom-renderer.ts
@@ -1,62 +0,0 @@
-import { DomElementRendererExtension } from '@blocksuite/affine-block-surface';
-import { FontWeight, type GroupElementModel } from '@blocksuite/affine-model';
-
-import {
-  GROUP_TITLE_FONT,
-  GROUP_TITLE_FONT_SIZE,
-  GROUP_TITLE_PADDING,
-} from './consts';
-import { titleRenderParams } from './utils';
-
-export const GroupDomRendererExtension = DomElementRendererExtension(
-  'group',
-  (model: GroupElementModel, domElement, renderer) => {
-    const { zoom } = renderer.viewport;
-    const [, , w, h] = model.deserializedXYWH;
-
-    const renderParams = titleRenderParams(model, zoom);
-    model.externalXYWH = renderParams.titleBound.serialize();
-
-    domElement.innerHTML = '';
-    domElement.style.outlineColor = '';
-    domElement.style.outlineWidth = '';
-    domElement.style.outlineStyle = '';
-
-    const elements = renderer.provider.selectedElements?.() || [];
-
-    const renderTitle = () => {
-      const { text } = renderParams;
-      const titleElement = document.createElement('div');
-      titleElement.style.transform = `translate(0, -100%)`;
-      titleElement.style.fontFamily = GROUP_TITLE_FONT;
-      titleElement.style.fontWeight = `${FontWeight.Regular}`;
-      titleElement.style.fontStyle = 'normal';
-      titleElement.style.fontSize = `${GROUP_TITLE_FONT_SIZE}px`;
-      titleElement.style.color = renderer.getPropertyValue('--affine-blue');
-      titleElement.style.textAlign = 'left';
-      titleElement.style.padding = `${GROUP_TITLE_PADDING[0]}px ${GROUP_TITLE_PADDING[1]}px`;
-      titleElement.textContent = text;
-      domElement.replaceChildren(titleElement);
-    };
-
-    if (elements.includes(model.id)) {
-      if (model.showTitle) {
-        renderTitle();
-      } else {
-        domElement.style.outlineColor =
-          renderer.getPropertyValue('--affine-blue');
-        domElement.style.outlineWidth = '2px';
-        domElement.style.outlineStyle = 'solid';
-      }
-    } else if (model.childElements.some(child => elements.includes(child.id))) {
-      domElement.style.outlineColor = '#8FD1FF';
-      domElement.style.outlineWidth = '2px';
-      domElement.style.outlineStyle = 'solid';
-    }
-
-    domElement.style.width = `${w * zoom}px`;
-    domElement.style.height = `${h * zoom}px`;
-    domElement.style.overflow = 'visible';
-    domElement.style.pointerEvents = 'none';
-  }
-);
--- a/blocksuite/affine/gfx/group/src/renderer/index.ts
+++ b/blocksuite/affine/gfx/group/src/renderer/index.ts
@@ -1,2 +0,0 @@
-export * from './dom-renderer';
-export * from './element-renderer';
--- a/blocksuite/affine/gfx/group/src/text/edgeless-group-title-editor.ts
+++ b/blocksuite/affine/gfx/group/src/text/edgeless-group-title-editor.ts
@@ -21,7 +21,7 @@ import {
  GROUP_TITLE_FONT_SIZE,
  GROUP_TITLE_OFFSET,
  GROUP_TITLE_PADDING,
-} from '../renderer/consts';
+} from '../element-renderer/consts';

 export function mountGroupTitleEditor(
  group: GroupElementModel,
--- a/blocksuite/affine/gfx/group/src/view.ts
+++ b/blocksuite/affine/gfx/group/src/view.ts
@@ -4,12 +4,9 @@ import {
 } from '@blocksuite/affine-ext-loader';

 import { effects } from './effects';
+import { GroupElementRendererExtension } from './element-renderer';
 import { GroupElementView, GroupInteraction } from './element-view';
 import { GroupInteractionExtension } from './interaction-ext';
-import {
-  GroupDomRendererExtension,
-  GroupElementRendererExtension,
-} from './renderer';
 import { groupToolbarExtension } from './toolbar/config';

 export class GroupViewExtension extends ViewExtensionProvider {
@@ -23,7 +20,6 @@ export class GroupViewExtension extends ViewExtensionProvider {
  override setup(context: ViewExtensionContext) {
    super.setup(context);
    context.register(GroupElementRendererExtension);
-    context.register(GroupDomRendererExtension);
    context.register(GroupElementView);
    if (this.isEdgeless(context.scope)) {
      context.register(groupToolbarExtension);
--- a/blocksuite/affine/gfx/link/package.json
+++ b/blocksuite/affine/gfx/link/package.json
@@ -21,7 +21,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/mindmap/package.json
+++ b/blocksuite/affine/gfx/mindmap/package.json
@@ -25,7 +25,7 @@
    "@blocksuite/affine-shared": "workspace:*",
    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
    "@blocksuite/global": "workspace:*",
-    "@blocksuite/icons": "^2.2.17",
+    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
    "@lit/context": "^1.1.2",
--- a/blocksuite/affine/gfx/mindmap/src/renderer/element-renderer.ts
+++ b/blocksuite/affine/gfx/mindmap/src/renderer/element-renderer.ts
--- a/Show More
+++ b/Show More