chore: test result

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [file-type](https://redirect.github.com/sindresorhus/file-type) | [`^20.0.0` -> `^21.0.0`](https://renovatebot.com/diffs/npm/file-type/20.5.0/21.0.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/file-type/21.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/file-type/21.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/file-type/20.5.0/21.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/file-type/20.5.0/21.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) |

---

### Release Notes

<details>
<summary>sindresorhus/file-type (file-type)</summary>

### [`v21.0.0`](https://redirect.github.com/sindresorhus/file-type/releases/tag/v21.0.0)

[Compare Source](https://redirect.github.com/sindresorhus/file-type/compare/v20.5.0...v21.0.0)

##### Breaking

-   Require Node.js 20  [`24aec1f`](https://redirect.github.com/sindresorhus/file-type/commit/24aec1f)
-   Drop Adobe Illustrator (.ai) detection support ([#&#8203;743](https://redirect.github.com/sindresorhus/file-type/issues/743))  [`af169f3`](https://redirect.github.com/sindresorhus/file-type/commit/af169f3)
-   Correct Matroska (video) MIME-type to formal IANA registration ([#&#8203;753](https://redirect.github.com/sindresorhus/file-type/issues/753))  [`f53f5ff`](https://redirect.github.com/sindresorhus/file-type/commit/f53f5ff)
-   Correct FLAC MIME-type to formal IANA registration ([#&#8203;755](https://redirect.github.com/sindresorhus/file-type/issues/755))  [`b9fda36`](https://redirect.github.com/sindresorhus/file-type/commit/b9fda36)
-   Correct Apache Parquet MIME-type to formal IANA registration ([#&#8203;748](https://redirect.github.com/sindresorhus/file-type/issues/748))  [`98e3f8e`](https://redirect.github.com/sindresorhus/file-type/commit/98e3f8e)
-   Correct Apache Arrow MIME-type to formal IANA registration ([#&#8203;754](https://redirect.github.com/sindresorhus/file-type/issues/754))  [`7184775`](https://redirect.github.com/sindresorhus/file-type/commit/7184775)

##### Improvements

-   Allow options to be directly passed to exported functions ([#&#8203;752](https://redirect.github.com/sindresorhus/file-type/issues/752))  [`d264029`](https://redirect.github.com/sindresorhus/file-type/commit/d264029)
-   Add `mpegOffsetTolerance` option ([#&#8203;646](https://redirect.github.com/sindresorhus/file-type/issues/646))  [`c40840a`](https://redirect.github.com/sindresorhus/file-type/commit/c40840a)

##### Fixes

-   Fix detection of some PAX TAR formats ([#&#8203;762](https://redirect.github.com/sindresorhus/file-type/issues/762))  [`574d0d6`](https://redirect.github.com/sindresorhus/file-type/commit/574d0d6)

***

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/toeverything/AFFiNE).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MC4xNi4wIiwidXBkYXRlZEluVmVyIjoiNDAuMTYuMCIsInRhcmdldEJyYW5jaCI6ImNhbmFyeSIsImxhYmVscyI6WyJkZXBlbmRlbmNpZXMiXX0=-->

.devcontainer/build.sh

@@ -6,6 +6,7 @@ yarn install
 
 # Build Server Dependencies
 yarn affine @affine/server-native build
+yarn affine @affine/reader build
 
 # Create database
 yarn affine @affine/server prisma migrate reset -f

.devcontainer/docker-compose.yml

@@ -10,6 +10,7 @@ services:
     environment:
       DATABASE_URL: postgresql://affine:affine@db:5432/affine
       REDIS_SERVER_HOST: redis
+      AFFINE_INDEXER_SEARCH_ENDPOINT: http://indexer:9308
 
   db:
     image: pgvector/pgvector:pg16
@@ -23,5 +24,19 @@ services:
   redis:
     image: redis
 
+  indexer:
+    image: manticoresearch/manticore:${MANTICORE_VERSION:-9.3.2}
+    ulimits:
+      nproc: 65535
+      nofile:
+        soft: 65535
+        hard: 65535
+      memlock:
+        soft: -1
+        hard: -1
+    volumes:
+      - manticoresearch_data:/var/lib/manticore
+
 volumes:
   postgres-data:
+  manticoresearch_data:

.docker/dev/.env.example

@@ -12,4 +12,4 @@ DB_DATABASE_NAME=affine
 # ELASTIC_PLATFORM=linux/arm64
 
 # manticoresearch
-MANTICORE_VERSION=9.2.14
+MANTICORE_VERSION=9.3.2

.docker/dev/.gitignore

@@ -1,3 +1,6 @@
 postgres
 .env
-compose.yml
+compose.yml
+certs/*
+!certs/.gitkeep
+nginx/conf.d/*

.docker/dev/README.md

@@ -0,0 +1,27 @@
+# Dev containers
+
+## Develop with domain
+
+> MacOs only, OrbStack only
+
+### 1. Generate and install Root CA
+
+```bash
+# the root ca file will be located at `./.docker/dev/certs/ca`
+yarn affine cert --install
+```
+
+### 2. Generate domain certs
+
+```bash
+# certificates will be located at `./.docker/dev/certs/${domain}`
+yarn affine cert --domain dev.affine.fail
+```
+
+### 3. Enable dns and nginx service in compose.yml
+
+### 4. Add custom dns server
+
+```bash
+echo "nameserver 127.0.0.1" | sudo tee /etc/resolver/dev.affine.fail
+```

.docker/dev/compose.yml.elasticsearch.example

@@ -1,65 +0,0 @@
-name: affine_dev_services
-services:
-  postgres:
-    env_file:
-      - .env
-    image: pgvector/pgvector:pg${DB_VERSION:-16}
-    ports:
-      - 5432:5432
-    environment:
-      POSTGRES_PASSWORD: ${DB_PASSWORD}
-      POSTGRES_USER: ${DB_USERNAME}
-      POSTGRES_DB: ${DB_DATABASE_NAME}
-    volumes:
-      - postgres_data:/var/lib/postgresql/data
-
-  redis:
-    image: redis:latest
-    ports:
-      - 6379:6379
-
-  mailhog:
-    image: mailhog/mailhog:latest
-    ports:
-      - 1025:1025
-      - 8025:8025
-
-  elasticsearch:
-    image: docker.elastic.co/elasticsearch/elasticsearch:${ELASTIC_VERSION:-9.0.1}${ELASTIC_VERSION_ARM64}
-    platform: ${ELASTIC_PLATFORM}
-    labels:
-      co.elastic.logs/module: elasticsearch
-    volumes:
-      - elasticsearch_data:/usr/share/elasticsearch/data
-    ports:
-      - ${ES_PORT:-9200}:9200
-    environment:
-      - node.name=es01
-      - cluster.name=affine-dev
-      - discovery.type=single-node
-      - bootstrap.memory_lock=true
-      - xpack.security.enabled=false
-      - xpack.security.http.ssl.enabled=false
-      - xpack.security.transport.ssl.enabled=false
-      - xpack.license.self_generated.type=basic
-    mem_limit: ${ES_MEM_LIMIT:-1073741824}
-    ulimits:
-      memlock:
-        soft: -1
-        hard: -1
-    healthcheck:
-      test:
-        [
-          "CMD-SHELL",
-          "curl -s http://localhost:9200 | grep -q 'affine-dev'",
-        ]
-      interval: 10s
-      timeout: 10s
-      retries: 120
-
-networks:
-  dev:
-
-volumes:
-  postgres_data:
-  elasticsearch_data:

.docker/dev/compose.yml.example

@@ -26,8 +26,7 @@ services:
 
   # https://manual.manticoresearch.com/Starting_the_server/Docker
   manticoresearch:
-    image: manticoresearch/manticore:${MANTICORE_VERSION:-9.2.14}
-    restart: always
+    image: manticoresearch/manticore:${MANTICORE_VERSION:-9.3.2}
     ports:
       - 9308:9308
     ulimits:
@@ -40,6 +39,58 @@ services:
         hard: -1
     volumes:
       - manticoresearch_data:/var/lib/manticore
+  
+  # elasticsearch:
+  #   image: docker.elastic.co/elasticsearch/elasticsearch:${ELASTIC_VERSION:-9.0.1}${ELASTIC_VERSION_ARM64}
+  #   platform: ${ELASTIC_PLATFORM}
+  #   labels:
+  #     co.elastic.logs/module: elasticsearch
+  #   volumes:
+  #     - elasticsearch_data:/usr/share/elasticsearch/data
+  #   ports:
+  #     - ${ES_PORT:-9200}:9200
+  #   environment:
+  #     - node.name=es01
+  #     - cluster.name=affine-dev
+  #     - discovery.type=single-node
+  #     - bootstrap.memory_lock=true
+  #     - xpack.security.enabled=false
+  #     - xpack.security.http.ssl.enabled=false
+  #     - xpack.security.transport.ssl.enabled=false
+  #     - xpack.license.self_generated.type=basic
+  #   mem_limit: ${ES_MEM_LIMIT:-1073741824}
+  #   ulimits:
+  #     memlock:
+  #       soft: -1
+  #       hard: -1
+  #   healthcheck:
+  #     test:
+  #       [
+  #         "CMD-SHELL",
+  #         "curl -s http://localhost:9200 | grep -q 'affine-dev'",
+  #       ]
+  #     interval: 10s
+  #     timeout: 10s
+  #     retries: 120
+
+  # dns:
+  #   image: strm/dnsmasq
+  #   volumes:
+  #     - ./dnsmasq.conf:/etc/dnsmasq.d/local.conf
+  #   ports:
+  #     - "53:53/udp"
+  #   cap_add:
+  #     - NET_ADMIN
+  #   depends_on:
+  #     - nginx
+
+  # nginx:
+  #   image: nginx:alpine
+  #   volumes:
+  #     - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
+  #     - ./nginx/conf.d:/etc/nginx/conf.d:ro
+  #     - ./certs:/etc/nginx/certs:ro
+  #   network_mode: host
 
 networks:
   dev:
@@ -47,3 +98,4 @@ networks:
 volumes:
   postgres_data:
   manticoresearch_data:
+  elasticsearch_data:

.docker/dev/dnsmasq.conf

@@ -0,0 +1,2 @@
+log-queries
+address=/dev.affine.fail/127.0.0.1

.docker/dev/nginx/nginx.conf

@@ -0,0 +1,28 @@
+user nginx;
+worker_processes auto;
+
+error_log   /var/log/nginx/error.log;
+pid         /var/run/nginx.pid;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  include mime.types;
+  default_type  application/octet-stream;
+
+  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+  access_log  /var/log/nginx/access.log  main;
+
+  sendfile on;
+  keepalive_timeout  65;
+  types_hash_max_size 2048;
+  client_max_body_size 512M;
+  server_names_hash_bucket_size 128;
+  ssi on;
+  gzip  on;
+  include "/etc/nginx/conf.d/*";
+}

.docker/dev/templates/nginx.conf

@@ -0,0 +1,27 @@
+server {
+  listen 80;
+  server_name DEV_DOMAIN;
+  
+  location / {
+    return 301 https://$host$request_uri;
+  }
+}
+
+server {
+  listen 443 ssl;
+  http2 on;
+  ssl_certificate /etc/nginx/certs/$host/crt;
+  ssl_certificate_key /etc/nginx/certs/$host/key;
+  server_name DEV_DOMAIN;
+
+  location / {
+    proxy_pass http://localhost:8080;
+    proxy_set_header   Host              $host;
+    proxy_set_header   X-Real-IP         $remote_addr;
+    proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
+    proxy_set_header   X-Forwarded-Proto $scheme;
+    proxy_set_header   Upgrade           $http_upgrade;
+    proxy_set_header   Connection        "upgrade";
+    resolver 127.0.0.1;
+  }
+}

.docker/dev/templates/openssl.conf

@@ -0,0 +1,25 @@
+[req]
+distinguished_name = req_distinguished_name
+req_extensions = v3_req
+
+[req_distinguished_name]
+countryName = Country Name (2 letter code)
+countryName_default = US
+stateOrProvinceName = State or Province Name (full name)
+stateOrProvinceName_default = MN
+localityName = Locality Name (eg, city)
+localityName_default = Minneapolis
+organizationalUnitName	= Organizational Unit Name (eg, section)
+organizationalUnitName_default	= Domain Control Validated
+commonName = Internet Widgits Ltd
+commonName_max	= 64
+
+[ v3_req ]
+# Extensions to add to a certificate request
+basicConstraints = CA:FALSE
+keyUsage = nonRepudiation, digitalSignature, keyEncipherment
+subjectAltName = @alt_names
+
+[alt_names]
+DNS.1 = DEV_DOMAIN
+DNS.2 = *.DEV_DOMAIN

.docker/selfhost/.env.example

@@ -21,8 +21,3 @@ CONFIG_LOCATION=~/.affine/self-host/config
 DB_USERNAME=affine
 DB_PASSWORD=
 DB_DATABASE=affine
-
-# indexer search provider manticoresearch version
-MANTICORE_VERSION=9.2.14
-# position of the manticoresearch data to persist 
-MANTICORE_DATA_LOCATION=~/.affine/self-host/manticore

.docker/selfhost/compose.yml

@@ -10,8 +10,6 @@ services:
         condition: service_healthy
       postgres:
         condition: service_healthy
-      indexer:
-        condition: service_healthy
       affine_migration:
         condition: service_completed_successfully
     volumes:
@@ -23,7 +21,7 @@ services:
     environment:
       - REDIS_SERVER_HOST=redis
       - DATABASE_URL=postgresql://${DB_USERNAME}:${DB_PASSWORD}@postgres:5432/${DB_DATABASE:-affine}
-      - AFFINE_INDEXER_SEARCH_ENDPOINT=http://indexer:9308
+      - AFFINE_INDEXER_ENABLED=false
     restart: unless-stopped
 
   affine_migration:
@@ -39,14 +37,12 @@ services:
     environment:
       - REDIS_SERVER_HOST=redis
       - DATABASE_URL=postgresql://${DB_USERNAME}:${DB_PASSWORD}@postgres:5432/${DB_DATABASE:-affine}
-      - AFFINE_INDEXER_SEARCH_ENDPOINT=http://indexer:9308
+      - AFFINE_INDEXER_ENABLED=false
     depends_on:
       postgres:
         condition: service_healthy
       redis:
         condition: service_healthy
-      indexer:
-        condition: service_healthy
 
   redis:
     image: redis
@@ -78,24 +74,3 @@ services:
       timeout: 5s
       retries: 5
     restart: unless-stopped
-
-  indexer:
-    image: manticoresearch/manticore:${MANTICORE_VERSION:-9.2.14}
-    container_name: affine_indexer
-    volumes:
-      - ${MANTICORE_DATA_LOCATION}:/var/lib/manticore
-    ulimits:
-      nproc: 65535
-      nofile:
-        soft: 65535
-        hard: 65535
-      memlock:
-        soft: -1
-        hard: -1
-    healthcheck:
-      test:
-        ['CMD', 'wget', '-O-', 'http://127.0.0.1:9308']
-      interval: 10s
-      timeout: 5s
-      retries: 5
-    restart: unless-stopped

.docker/selfhost/schema.json

@@ -48,14 +48,14 @@
         },
         "queues.copilot": {
           "type": "object",
-          "description": "The config for copilot job queue\n@default {\"concurrency\":1}",
+          "description": "The config for copilot job queue\n@default {\"concurrency\":5}",
           "properties": {
             "concurrency": {
               "type": "number"
             }
           },
           "default": {
-            "concurrency": 1
+            "concurrency": 5
           }
         },
         "queues.doc": {
@@ -812,7 +812,7 @@
       "properties": {
         "enabled": {
           "type": "boolean",
-          "description": "Enable indexer plugin\n@default true",
+          "description": "Enable indexer plugin\n@default true\n@environment `AFFINE_INDEXER_ENABLED`",
           "default": true
         },
         "provider.type": {
@@ -825,6 +825,11 @@
           "description": "Indexer search service endpoint\n@default \"http://localhost:9308\"\n@environment `AFFINE_INDEXER_SEARCH_ENDPOINT`",
           "default": "http://localhost:9308"
         },
+        "provider.apiKey": {
+          "type": "string",
+          "description": "Indexer search service api key. Optional for elasticsearch\n@default \"\"\n@environment `AFFINE_INDEXER_SEARCH_API_KEY`\n@link https://www.elastic.co/guide/server/current/api-key.html",
+          "default": ""
+        },
         "provider.username": {
           "type": "string",
           "description": "Indexer search service auth username, if not set, basic auth will be disabled. Optional for elasticsearch\n@default \"\"\n@environment `AFFINE_INDEXER_SEARCH_USERNAME`\n@link https://www.elastic.co/guide/en/elasticsearch/reference/current/http-clients.html",
@@ -834,6 +839,11 @@
           "type": "string",
           "description": "Indexer search service auth password, if not set, basic auth will be disabled. Optional for elasticsearch\n@default \"\"\n@environment `AFFINE_INDEXER_SEARCH_PASSWORD`",
           "default": ""
+        },
+        "autoIndex.batchSize": {
+          "type": "number",
+          "description": "Number of workspaces automatically indexed per batch\n@default 10",
+          "default": 10
         }
       }
     },
@@ -881,13 +891,43 @@
         },
         "providers.oidc": {
           "type": "object",
-          "description": "OIDC OAuth provider config\n@default {\"clientId\":\"\",\"clientSecret\":\"\",\"issuer\":\"\",\"args\":{}}",
+          "description": "OIDC OAuth provider config\n@default {\"clientId\":\"\",\"clientSecret\":\"\",\"issuer\":\"\",\"args\":{}}\n@link https://openid.net/specs/openid-connect-core-1_0.html",
+          "properties": {
+            "clientId": {
+              "type": "string"
+            },
+            "clientSecret": {
+              "type": "string"
+            },
+            "args": {
+              "type": "object"
+            }
+          },
           "default": {
             "clientId": "",
             "clientSecret": "",
             "issuer": "",
             "args": {}
           }
+        },
+        "providers.apple": {
+          "type": "object",
+          "description": "Apple OAuth provider config\n@default {\"clientId\":\"\",\"clientSecret\":\"\"}\n@link https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js/implementing_sign_in_with_apple_in_your_app",
+          "properties": {
+            "clientId": {
+              "type": "string"
+            },
+            "clientSecret": {
+              "type": "string"
+            },
+            "args": {
+              "type": "object"
+            }
+          },
+          "default": {
+            "clientId": "",
+            "clientSecret": ""
+          }
         }
       }
     },

.github/actions/deploy/deploy.mjs

@@ -18,8 +18,7 @@ const {
   STATIC_IP_NAME,
   AFFINE_INDEXER_SEARCH_PROVIDER,
   AFFINE_INDEXER_SEARCH_ENDPOINT,
-  AFFINE_INDEXER_SEARCH_USERNAME,
-  AFFINE_INDEXER_SEARCH_PASSWORD,
+  AFFINE_INDEXER_SEARCH_API_KEY,
 } = process.env;
 
 const buildType = BUILD_TYPE || 'canary';
@@ -88,8 +87,7 @@ const createHelmCommand = ({ isDryRun }) => {
   const indexerOptions = [
     `--set-string global.indexer.provider="${AFFINE_INDEXER_SEARCH_PROVIDER}"`,
     `--set-string global.indexer.endpoint="${AFFINE_INDEXER_SEARCH_ENDPOINT}"`,
-    `--set-string global.indexer.username="${AFFINE_INDEXER_SEARCH_USERNAME}"`,
-    `--set-string global.indexer.password="${AFFINE_INDEXER_SEARCH_PASSWORD}"`,
+    `--set-string global.indexer.apiKey="${AFFINE_INDEXER_SEARCH_API_KEY}"`,
   ];
   const serviceAnnotations = [
     `--set-json   web.serviceAccount.annotations="{ \\"iam.gke.io/gcp-service-account\\": \\"${APP_IAM_ACCOUNT}\\" }"`,

.github/helm/affine/charts/doc/templates/deployment.yaml

@@ -73,13 +73,11 @@ spec:
             value: "{{ .Values.global.indexer.provider }}"
           - name: AFFINE_INDEXER_SEARCH_ENDPOINT
             value: "{{ .Values.global.indexer.endpoint }}"
-          - name: AFFINE_INDEXER_SEARCH_USERNAME
-            value: "{{ .Values.global.indexer.username }}"
-          - name: AFFINE_INDEXER_SEARCH_PASSWORD
+          - name: AFFINE_INDEXER_SEARCH_API_KEY
             valueFrom:
               secretKeyRef:
                 name: indexer
-                key: indexer-password
+                key: indexer-apiKey
           - name: AFFINE_SERVER_PORT
             value: "{{ .Values.global.docService.port }}"
           - name: AFFINE_SERVER_SUB_PATH

.github/helm/affine/charts/doc/templates/monitoring.yaml

@@ -0,0 +1,12 @@
+{{- if eq .Values.global.deployment.platform "gcp" -}}
+apiVersion: monitoring.googleapis.com/v1
+kind: ClusterPodMonitoring
+metadata:
+  name: "{{ include "doc.fullname" . }}"
+spec:
+  selector:
+    {{- include "doc.selectorLabels" . | nindent 4 }}
+  endpoints:
+    - port: 9464
+      interval: 30s
+{{- end }}

.github/helm/affine/charts/graphql/templates/deployment.yaml

@@ -71,13 +71,11 @@ spec:
             value: "{{ .Values.global.indexer.provider }}"
           - name: AFFINE_INDEXER_SEARCH_ENDPOINT
             value: "{{ .Values.global.indexer.endpoint }}"
-          - name: AFFINE_INDEXER_SEARCH_USERNAME
-            value: "{{ .Values.global.indexer.username }}"
-          - name: AFFINE_INDEXER_SEARCH_PASSWORD
+          - name: AFFINE_INDEXER_SEARCH_API_KEY
             valueFrom:
               secretKeyRef:
                 name: indexer
-                key: indexer-password
+                key: indexer-apiKey
           - name: AFFINE_SERVER_PORT
             value: "{{ .Values.service.port }}"
           - name: AFFINE_SERVER_SUB_PATH

.github/helm/affine/charts/graphql/templates/migration.yaml

@@ -48,13 +48,11 @@ spec:
             value: "{{ .Values.global.indexer.provider }}"
           - name: AFFINE_INDEXER_SEARCH_ENDPOINT
             value: "{{ .Values.global.indexer.endpoint }}"
-          - name: AFFINE_INDEXER_SEARCH_USERNAME
-            value: "{{ .Values.global.indexer.username }}"
-          - name: AFFINE_INDEXER_SEARCH_PASSWORD
+          - name: AFFINE_INDEXER_SEARCH_API_KEY
             valueFrom:
               secretKeyRef:
                 name: indexer
-                key: indexer-password
+                key: indexer-apiKey
         resources:
           requests:
             cpu: '100m'

.github/helm/affine/charts/graphql/templates/monitoring.yaml

@@ -0,0 +1,12 @@
+{{- if eq .Values.global.deployment.platform "gcp" -}}
+apiVersion: monitoring.googleapis.com/v1
+kind: ClusterPodMonitoring
+metadata:
+  name: "{{ include "graphql.fullname" . }}"
+spec:
+  selector:
+    {{- include "graphql.selectorLabels" . | nindent 4 }}
+  endpoints:
+    - port: 9464
+      interval: 30s
+{{- end }}

.github/helm/affine/charts/renderer/templates/deployment.yaml

@@ -73,13 +73,11 @@ spec:
             value: "{{ .Values.global.indexer.provider }}"
           - name: AFFINE_INDEXER_SEARCH_ENDPOINT
             value: "{{ .Values.global.indexer.endpoint }}"
-          - name: AFFINE_INDEXER_SEARCH_USERNAME
-            value: "{{ .Values.global.indexer.username }}"
-          - name: AFFINE_INDEXER_SEARCH_PASSWORD
+          - name: AFFINE_INDEXER_SEARCH_API_KEY
             valueFrom:
               secretKeyRef:
                 name: indexer
-                key: indexer-password
+                key: indexer-apiKey
           - name: AFFINE_SERVER_PORT
             value: "{{ .Values.service.port }}"
           - name: AFFINE_SERVER_SUB_PATH

.github/helm/affine/charts/renderer/templates/monitoring.yaml

@@ -0,0 +1,12 @@
+{{- if eq .Values.global.deployment.platform "gcp" -}}
+apiVersion: monitoring.googleapis.com/v1
+kind: ClusterPodMonitoring
+metadata:
+  name: "{{ include "renderer.fullname" . }}"
+spec:
+  selector:
+    {{- include "renderer.selectorLabels" . | nindent 4 }}
+  endpoints:
+    - port: 9464
+      interval: 30s	
+{{- end }}

.github/helm/affine/charts/sync/templates/deployment.yaml

@@ -73,13 +73,11 @@ spec:
             value: "{{ .Values.global.indexer.provider }}"
           - name: AFFINE_INDEXER_SEARCH_ENDPOINT
             value: "{{ .Values.global.indexer.endpoint }}"
-          - name: AFFINE_INDEXER_SEARCH_USERNAME
-            value: "{{ .Values.global.indexer.username }}"
-          - name: AFFINE_INDEXER_SEARCH_PASSWORD
+          - name: AFFINE_INDEXER_SEARCH_API_KEY
             valueFrom:
               secretKeyRef:
                 name: indexer
-                key: indexer-password
+                key: indexer-apiKey
           - name: AFFINE_SERVER_PORT
             value: "{{ .Values.service.port }}"
           - name: AFFINE_SERVER_HOST

.github/helm/affine/charts/sync/templates/monitoring.yaml

@@ -0,0 +1,12 @@
+{{- if eq .Values.global.deployment.platform "gcp" -}}
+apiVersion: monitoring.googleapis.com/v1
+kind: ClusterPodMonitoring
+metadata:
+  name: "{{ include "sync.fullname" . }}"
+spec:
+  selector:
+    {{- include "sync.selectorLabels" . | nindent 4 }}
+  endpoints:
+    - port: 9464
+      interval: 30s
+{{- end }}

.github/helm/affine/templates/indexer-secret.yaml

@@ -1,4 +1,4 @@
-{{- if .Values.global.indexer.password -}}
+{{- if .Values.global.indexer.apiKey -}}
 apiVersion: v1
 kind: Secret
 metadata:
@@ -9,5 +9,5 @@ metadata:
     "helm.sh/hook-delete-policy": before-hook-creation
 type: Opaque
 data:
-  indexer-password: {{ .Values.global.indexer.password | b64enc }}
+  indexer-apiKey: {{ .Values.global.indexer.apiKey | b64enc }}
 {{- end }}

.github/workflows/build-test.yml

@@ -125,6 +125,7 @@ jobs:
       - name: Run BS Docs Build
         run: |
           yarn affine bs-docs build
+          git checkout packages/frontend/i18n/src/i18n-completenesses.json
           git status --porcelain | grep . && {
             echo "Run 'yarn typecheck && yarn affine bs-docs build' and make sure all changes are submitted"
             exit 1
@@ -183,6 +184,7 @@ jobs:
           yarn affine gql build
           yarn affine i18n build
           yarn affine server genconfig
+          git checkout packages/frontend/i18n/src/i18n-completenesses.json
           git status --porcelain | grep . && {
             echo "Run 'yarn affine init && yarn affine gql build && yarn affine i18n build && yarn affine server genconfig' and make sure all changes are submitted"
             exit 1
@@ -583,7 +585,7 @@ jobs:
           - 1025:1025
           - 8025:8025
       indexer:
-        image: manticoresearch/manticore:9.2.14
+        image: manticoresearch/manticore:9.3.2
         ports:
           - 9308:9308
     steps:
@@ -733,7 +735,7 @@ jobs:
         ports:
           - 6379:6379
       indexer:
-        image: manticoresearch/manticore:9.2.14
+        image: manticoresearch/manticore:9.3.2
         ports:
           - 9308:9308
     steps:
@@ -957,7 +959,7 @@ jobs:
           - 1025:1025
           - 8025:8025
       indexer:
-        image: manticoresearch/manticore:9.2.14
+        image: manticoresearch/manticore:9.3.2
         ports:
           - 9308:9308
     steps:
@@ -1056,7 +1058,7 @@ jobs:
         ports:
           - 6379:6379
       indexer:
-        image: manticoresearch/manticore:9.2.14
+        image: manticoresearch/manticore:9.3.2
         ports:
           - 9308:9308
     steps:
@@ -1183,7 +1185,7 @@ jobs:
           - 1025:1025
           - 8025:8025
       indexer:
-        image: manticoresearch/manticore:9.2.14
+        image: manticoresearch/manticore:9.3.2
         ports:
           - 9308:9308
     steps:
@@ -1355,6 +1357,13 @@ jobs:
               target: x86_64-unknown-linux-gnu,
               test: true,
             }
+          - {
+              os: windows-latest,
+              platform: windows,
+              arch: x64,
+              target: x86_64-pc-windows-msvc,
+              test: true,
+            }
     steps:
       - uses: actions/checkout@v4
       - name: Setup Node.js
@@ -1395,6 +1404,18 @@ jobs:
           HOIST_NODE_MODULES: 1
         run: yarn affine @affine/electron package --platform=darwin --arch=arm64
 
+      - name: Make Bundle (Windows)
+        if: ${{ matrix.spec.target == 'x86_64-pc-windows-msvc' }}
+        shell: bash
+        env:
+          SKIP_BUNDLE: true
+          SKIP_WEB_BUILD: true
+          HOIST_NODE_MODULES: 1
+        run: |
+          rm -rf packages/frontend/apps/electron/node_modules/@affine/nbstore/node_modules/@blocksuite/affine/node_modules
+          rm -rf packages/frontend/apps/electron/node_modules/@affine/native/node_modules
+          yarn affine @affine/electron package --platform=win32 --arch=x64
+
       - name: Make Bundle (Linux)
         run: |
           sudo add-apt-repository universe

.github/workflows/copilot-test.yml

@@ -60,7 +60,7 @@ jobs:
           - 1025:1025
           - 8025:8025
       indexer:
-        image: manticoresearch/manticore:9.2.14
+        image: manticoresearch/manticore:9.3.2
         ports:
           - 9308:9308
     steps:
@@ -135,7 +135,7 @@ jobs:
         ports:
           - 6379:6379
       indexer:
-        image: manticoresearch/manticore:9.2.14
+        image: manticoresearch/manticore:9.3.2
         ports:
           - 9308:9308
     steps:

.github/workflows/deploy.yml

@@ -105,8 +105,7 @@ jobs:
           STATIC_IP_NAME: ${{ secrets.STATIC_IP_NAME }}
           AFFINE_INDEXER_SEARCH_PROVIDER: ${{ secrets.AFFINE_INDEXER_SEARCH_PROVIDER }}
           AFFINE_INDEXER_SEARCH_ENDPOINT: ${{ secrets.AFFINE_INDEXER_SEARCH_ENDPOINT }}
-          AFFINE_INDEXER_SEARCH_USERNAME: ${{ secrets.AFFINE_INDEXER_SEARCH_USERNAME }}
-          AFFINE_INDEXER_SEARCH_PASSWORD: ${{ secrets.AFFINE_INDEXER_SEARCH_PASSWORD }}
+          AFFINE_INDEXER_SEARCH_API_KEY: ${{ secrets.AFFINE_INDEXER_SEARCH_API_KEY }}
 
   deploy-done:
     needs:

.github/workflows/release-desktop.yml

@@ -252,7 +252,7 @@ jobs:
         shell: bash
         # node_modules of nbstore is not needed for building, and it will make the build process out of memory
         run: |
-          rm -rf packages/frontend/apps/electron/node_modules/@affine/nbstore/node_modules/@blocksuite
+          rm -rf packages/frontend/apps/electron/node_modules/@affine/nbstore/node_modules/@blocksuite/affine/node_modules
           rm -rf packages/frontend/apps/electron/node_modules/@affine/native/node_modules
 
       - name: package

.github/workflows/release-mobile.yml

@@ -180,7 +180,6 @@ jobs:
       - name: Testflight
         if: ${{ env.BUILD_TYPE != 'stable' }}
         working-directory: packages/frontend/apps/ios/App
-        continue-on-error: true
         run: |
           echo -n "${{ env.BUILD_PROVISION_PROFILE }}" | base64 --decode -o $PP_PATH
           mkdir -p ~/Library/MobileDevice/Provisioning\ Profiles

.nvmrc

@@ -1 +1 @@
-22.15.1
+22.16.0

blocksuite/affine/all/package.json

@@ -33,6 +33,7 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-foundation": "workspace:*",
+    "@blocksuite/affine-fragment-adapter-panel": "workspace:*",
     "@blocksuite/affine-fragment-doc-title": "workspace:*",
     "@blocksuite/affine-fragment-frame-panel": "workspace:*",
     "@blocksuite/affine-fragment-outline": "workspace:*",
@@ -209,6 +210,8 @@
     "./fragments/frame-panel/view": "./src/fragments/frame-panel/view.ts",
     "./fragments/outline": "./src/fragments/outline/index.ts",
     "./fragments/outline/view": "./src/fragments/outline/view.ts",
+    "./fragments/adapter-panel": "./src/fragments/adapter-panel/index.ts",
+    "./fragments/adapter-panel/view": "./src/fragments/adapter-panel/view.ts",
     "./gfx/text": "./src/gfx/text/index.ts",
     "./gfx/text/store": "./src/gfx/text/store.ts",
     "./gfx/text/view": "./src/gfx/text/view.ts",
@@ -292,6 +295,7 @@
   "version": "0.21.0",
   "devDependencies": {
     "@vanilla-extract/vite-plugin": "^5.0.0",
+    "msw": "^2.8.4",
     "vitest": "3.1.3"
   }
 }

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

@@ -2697,4 +2697,335 @@ describe('html to snapshot', () => {
     });
     expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
   });
+
+  test('block level element in b should not be treated as inline', async () => {
+    const html = template(`<b><p><span>aaa</span></p></b>`);
+    const blockSnapshot: BlockSnapshot = {
+      type: 'block',
+      id: 'matchesReplaceMap[0]',
+      flavour: 'affine:note',
+      props: {
+        xywh: '[0,0,800,95]',
+        background: DefaultTheme.noteBackgrounColor,
+        index: 'a0',
+        hidden: false,
+        displayMode: NoteDisplayMode.DocAndEdgeless,
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'matchesReplaceMap[1]',
+          flavour: 'affine:paragraph',
+          props: {
+            type: 'text',
+            text: {
+              '$blocksuite:internal:text$': true,
+              delta: [
+                {
+                  insert: 'aaa',
+                },
+              ],
+            },
+          },
+          children: [],
+        },
+      ],
+    };
+
+    const htmlAdapter = new HtmlAdapter(createJob(), provider);
+    const rawBlockSnapshot = await htmlAdapter.toBlockSnapshot({
+      file: html,
+    });
+    expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
+  });
+
+  describe('strong element', () => {
+    test('should not be bold when font-weight is normal', async () => {
+      const html = template(`<span style="font-weight: normal;">aaa</span>`);
+      const blockSnapshot: BlockSnapshot = {
+        type: 'block',
+        id: 'matchesReplaceMap[0]',
+        flavour: 'affine:note',
+        props: {
+          xywh: '[0,0,800,95]',
+          background: DefaultTheme.noteBackgrounColor,
+          index: 'a0',
+          hidden: false,
+          displayMode: NoteDisplayMode.DocAndEdgeless,
+        },
+        children: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[1]',
+            flavour: 'affine:paragraph',
+            props: {
+              type: 'text',
+              text: {
+                '$blocksuite:internal:text$': true,
+                delta: [
+                  {
+                    insert: 'aaa',
+                  },
+                ],
+              },
+            },
+            children: [],
+          },
+        ],
+      };
+
+      const htmlAdapter = new HtmlAdapter(createJob(), provider);
+      const rawBlockSnapshot = await htmlAdapter.toBlockSnapshot({
+        file: html,
+      });
+      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
+    });
+
+    test('should be bold when font-weight is bold or 500-900 ', async () => {
+      const html = template(
+        `<p><span style="font-weight: bold;">aaa</span><span style="font-weight: 100;">aaa</span><span style="font-weight: 500;">bbb</span><span style="font-weight: 200;">bbb</span><span style="font-weight: 600;">ccc</span><span style="font-weight: 300;">ccc</span><span style="font-weight: 700;">ddd</span></p>`
+      );
+      const blockSnapshot: BlockSnapshot = {
+        type: 'block',
+        id: 'matchesReplaceMap[0]',
+        flavour: 'affine:note',
+        props: {
+          xywh: '[0,0,800,95]',
+          background: DefaultTheme.noteBackgrounColor,
+          index: 'a0',
+          hidden: false,
+          displayMode: NoteDisplayMode.DocAndEdgeless,
+        },
+        children: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[1]',
+            flavour: 'affine:paragraph',
+            props: {
+              type: 'text',
+              text: {
+                '$blocksuite:internal:text$': true,
+                delta: [
+                  {
+                    attributes: {
+                      bold: true,
+                    },
+                    insert: 'aaa',
+                  },
+                  {
+                    insert: 'aaa',
+                  },
+                  {
+                    attributes: {
+                      bold: true,
+                    },
+                    insert: 'bbb',
+                  },
+                  {
+                    insert: 'bbb',
+                  },
+                  {
+                    attributes: {
+                      bold: true,
+                    },
+                    insert: 'ccc',
+                  },
+                  {
+                    insert: 'ccc',
+                  },
+                  {
+                    attributes: {
+                      bold: true,
+                    },
+                    insert: 'ddd',
+                  },
+                ],
+              },
+            },
+            children: [],
+          },
+        ],
+      };
+
+      const htmlAdapter = new HtmlAdapter(createJob(), provider);
+      const rawBlockSnapshot = await htmlAdapter.toBlockSnapshot({
+        file: html,
+      });
+      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
+    });
+  });
+
+  test('should be italic when tag is i or em or span with style font-style: italic', async () => {
+    const html = template(
+      `<p><i>aaa</i><span>aaa</span><em>bbb</em><span>bbb</span><span style="font-style: italic;">ccc</span></p>`
+    );
+    const blockSnapshot: BlockSnapshot = {
+      type: 'block',
+      id: 'matchesReplaceMap[0]',
+      flavour: 'affine:note',
+      props: {
+        xywh: '[0,0,800,95]',
+        background: DefaultTheme.noteBackgrounColor,
+        index: 'a0',
+        hidden: false,
+        displayMode: NoteDisplayMode.DocAndEdgeless,
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'matchesReplaceMap[1]',
+          flavour: 'affine:paragraph',
+          props: {
+            type: 'text',
+            text: {
+              '$blocksuite:internal:text$': true,
+              delta: [
+                {
+                  attributes: {
+                    italic: true,
+                  },
+                  insert: 'aaa',
+                },
+                {
+                  insert: 'aaa',
+                },
+                {
+                  attributes: {
+                    italic: true,
+                  },
+                  insert: 'bbb',
+                },
+                {
+                  insert: 'bbb',
+                },
+                {
+                  attributes: {
+                    italic: true,
+                  },
+                  insert: 'ccc',
+                },
+              ],
+            },
+          },
+          children: [],
+        },
+      ],
+    };
+
+    const htmlAdapter = new HtmlAdapter(createJob(), provider);
+    const rawBlockSnapshot = await htmlAdapter.toBlockSnapshot({
+      file: html,
+    });
+    expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
+  });
+
+  test('should be underline when tag is u or span with style text-decoration: underline', async () => {
+    const html = template(
+      `<p><u>aaa</u><span>aaa</span><span style="text-decoration: underline;">bbb</span></p>`
+    );
+    const blockSnapshot: BlockSnapshot = {
+      type: 'block',
+      id: 'matchesReplaceMap[0]',
+      flavour: 'affine:note',
+      props: {
+        xywh: '[0,0,800,95]',
+        background: DefaultTheme.noteBackgrounColor,
+        index: 'a0',
+        hidden: false,
+        displayMode: NoteDisplayMode.DocAndEdgeless,
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'matchesReplaceMap[1]',
+          flavour: 'affine:paragraph',
+          props: {
+            type: 'text',
+            text: {
+              '$blocksuite:internal:text$': true,
+              delta: [
+                {
+                  attributes: {
+                    underline: true,
+                  },
+                  insert: 'aaa',
+                },
+                {
+                  insert: 'aaa',
+                },
+                {
+                  attributes: {
+                    underline: true,
+                  },
+                  insert: 'bbb',
+                },
+              ],
+            },
+          },
+          children: [],
+        },
+      ],
+    };
+
+    const htmlAdapter = new HtmlAdapter(createJob(), provider);
+    const rawBlockSnapshot = await htmlAdapter.toBlockSnapshot({
+      file: html,
+    });
+    expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
+  });
+
+  test('should be strike when tag is del or span with style text-decoration: line-through', async () => {
+    const html = template(
+      `<p><del>aaa</del><span>aaa</span><span style="text-decoration: line-through;">bbb</span></p>`
+    );
+    const blockSnapshot: BlockSnapshot = {
+      type: 'block',
+      id: 'matchesReplaceMap[0]',
+      flavour: 'affine:note',
+      props: {
+        xywh: '[0,0,800,95]',
+        background: DefaultTheme.noteBackgrounColor,
+        index: 'a0',
+        hidden: false,
+        displayMode: NoteDisplayMode.DocAndEdgeless,
+      },
+      children: [
+        {
+          type: 'block',
+          id: 'matchesReplaceMap[1]',
+          flavour: 'affine:paragraph',
+          props: {
+            type: 'text',
+            text: {
+              '$blocksuite:internal:text$': true,
+              delta: [
+                {
+                  attributes: {
+                    strike: true,
+                  },
+                  insert: 'aaa',
+                },
+                {
+                  insert: 'aaa',
+                },
+                {
+                  attributes: {
+                    strike: true,
+                  },
+                  insert: 'bbb',
+                },
+              ],
+            },
+          },
+          children: [],
+        },
+      ],
+    };
+
+    const htmlAdapter = new HtmlAdapter(createJob(), provider);
+    const rawBlockSnapshot = await htmlAdapter.toBlockSnapshot({
+      file: html,
+    });
+    expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
+  });
 });

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

@@ -4417,6 +4417,69 @@ hhh
       });
       expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
     });
+
+    test('should handle footnote reference with url prefix', async () => {
+      const blockSnapshot = {
+        type: 'block',
+        id: 'matchesReplaceMap[0]',
+        flavour: 'affine:note',
+        props: {
+          xywh: '[0,0,800,95]',
+          background: DefaultTheme.noteBackgrounColor,
+          index: 'a0',
+          hidden: false,
+          displayMode: NoteDisplayMode.DocAndEdgeless,
+        },
+        children: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[1]',
+            flavour: 'affine:paragraph',
+            props: {
+              type: 'text',
+              text: {
+                '$blocksuite:internal:text$': true,
+                delta: [
+                  {
+                    insert: 'https://example.com',
+                    attributes: {
+                      link: 'https://example.com',
+                    },
+                  },
+                  {
+                    insert: ' ',
+                  },
+                  {
+                    insert: ' ',
+                    attributes: {
+                      footnote: {
+                        label: '1',
+                        reference: {
+                          type: 'url',
+                          url,
+                          favicon,
+                          title,
+                          description,
+                        },
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+            children: [],
+          },
+        ],
+      };
+
+      const markdown = `https://example.com[^1]\n\n[^1]: {"type":"url","url":"${url}","favicon":"${favicon}","title":"${title}","description":"${description}"}\n`;
+
+      const mdAdapter = new MarkdownAdapter(createJob(), provider);
+      const rawBlockSnapshot = await mdAdapter.toBlockSnapshot({
+        file: markdown,
+      });
+      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
+    });
   });
 
   test('should not wrap url with angle brackets if it is not a url', async () => {

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

@@ -1,11 +1,14 @@
 import { DefaultTheme, NoteDisplayMode } from '@blocksuite/affine-model';
 import { NotionHtmlAdapter } from '@blocksuite/affine-shared/adapters';
+import { DEFAULT_IMAGE_PROXY_ENDPOINT } from '@blocksuite/affine-shared/consts';
 import {
   AssetsManager,
   type BlockSnapshot,
   MemoryBlobCRUD,
 } from '@blocksuite/store';
-import { describe, expect, test } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+import { afterAll, afterEach, beforeAll, describe, expect, test } from 'vitest';
 
 import { createJob } from '../utils/create-job.js';
 import { getProvider } from '../utils/get-provider.js';
@@ -1195,43 +1198,71 @@ describe('notion html to snapshot', () => {
     expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
   });
 
-  test('image', async () => {
-    const html = `<div class="page-body">
-      <figure id="ed3d2ae9-62f5-433a-9049-9ddbd1c81ac5" class="image"><a
-          href="https://raw.githubusercontent.com/toeverything/blocksuite/master/assets/logo.svg"><img src="https://raw.githubusercontent.com/toeverything/blocksuite/master/assets/logo.svg" /></a>
-      </figure>
-    </div>`;
+  describe('image', () => {
+    const originalUrl =
+      'https://raw.githubusercontent.com/toeverything/blocksuite/master/assets/logo.svg';
 
-    const blockSnapshot: BlockSnapshot = {
-      type: 'block',
-      id: 'matchesReplaceMap[0]',
-      flavour: 'affine:note',
-      props: {
-        xywh: '[0,0,800,95]',
-        background: DefaultTheme.noteBackgrounColor,
-        index: 'a0',
-        hidden: false,
-        displayMode: NoteDisplayMode.DocAndEdgeless,
-      },
-      children: [
-        {
-          type: 'block',
-          id: 'matchesReplaceMap[1]',
-          flavour: 'affine:image',
-          props: {
-            sourceId: 'matchesReplaceMap[2]',
+    const imageProxy = DEFAULT_IMAGE_PROXY_ENDPOINT;
+    const imageUrl = `${imageProxy}?url=${encodeURIComponent(originalUrl)}`;
+
+    // Mock the image request
+    const imageRequestHandlers = [
+      http.get(imageUrl.toString(), async () => {
+        // Return a mock image blob
+        const mockImageBlob = new Blob(['mock image data'], {
+          type: 'image/svg+xml',
+        });
+        return new HttpResponse(mockImageBlob, {
+          headers: {
+            'Content-Type': 'image/svg+xml',
           },
-          children: [],
-        },
-      ],
-    };
+        });
+      }),
+    ];
 
-    const adapter = new NotionHtmlAdapter(createJob(), provider);
-    const rawBlockSnapshot = await adapter.toBlockSnapshot({
-      file: html,
-      assets: new AssetsManager({ blob: new MemoryBlobCRUD() }),
+    const server = setupServer(...imageRequestHandlers);
+    beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
+    afterAll(() => server.close());
+    afterEach(() => server.resetHandlers());
+
+    test('network image resource', async () => {
+      const html = `<div class="page-body">
+        <figure id="ed3d2ae9-62f5-433a-9049-9ddbd1c81ac5" class="image"><a
+            href="${originalUrl}"><img src="${originalUrl}" /></a>
+        </figure>
+      </div>`;
+
+      const blockSnapshot: BlockSnapshot = {
+        type: 'block',
+        id: 'matchesReplaceMap[0]',
+        flavour: 'affine:note',
+        props: {
+          xywh: '[0,0,800,95]',
+          background: DefaultTheme.noteBackgrounColor,
+          index: 'a0',
+          hidden: false,
+          displayMode: NoteDisplayMode.DocAndEdgeless,
+        },
+        children: [
+          {
+            type: 'block',
+            id: 'matchesReplaceMap[1]',
+            flavour: 'affine:image',
+            props: {
+              sourceId: 'matchesReplaceMap[2]',
+            },
+            children: [],
+          },
+        ],
+      };
+
+      const adapter = new NotionHtmlAdapter(createJob(), provider);
+      const rawBlockSnapshot = await adapter.toBlockSnapshot({
+        file: html,
+        assets: new AssetsManager({ blob: new MemoryBlobCRUD() }),
+      });
+      expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
     });
-    expect(nanoidReplacement(rawBlockSnapshot)).toEqual(blockSnapshot);
   });
 
   test('bookmark', async () => {

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

@@ -19,6 +19,7 @@ import { SurfaceViewExtension } from '@blocksuite/affine-block-surface/view';
 import { SurfaceRefViewExtension } from '@blocksuite/affine-block-surface-ref/view';
 import { TableViewExtension } from '@blocksuite/affine-block-table/view';
 import { FoundationViewExtension } from '@blocksuite/affine-foundation/view';
+import { AdapterPanelViewExtension } from '@blocksuite/affine-fragment-adapter-panel/view';
 import { DocTitleViewExtension } from '@blocksuite/affine-fragment-doc-title/view';
 import { FramePanelViewExtension } from '@blocksuite/affine-fragment-frame-panel/view';
 import { OutlineViewExtension } from '@blocksuite/affine-fragment-outline/view';
@@ -102,9 +103,9 @@ export function getInternalViewExtensions() {
     InlinePresetViewExtension,
 
     // Widget
+    // order will affect the z-index of the widget
     DragHandleViewExtension,
     EdgelessAutoConnectViewExtension,
-    EdgelessToolbarViewExtension,
     FrameTitleViewExtension,
     KeyboardToolbarViewExtension,
     LinkedDocViewExtension,
@@ -118,10 +119,12 @@ export function getInternalViewExtensions() {
     EdgelessSelectedRectViewExtension,
     EdgelessDraggingAreaViewExtension,
     NoteSlicerViewExtension,
+    EdgelessToolbarViewExtension,
 
     // Fragment
     DocTitleViewExtension,
     FramePanelViewExtension,
     OutlineViewExtension,
+    AdapterPanelViewExtension,
   ];
 }

blocksuite/affine/all/src/fragments/adapter-panel/index.ts

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

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

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

blocksuite/affine/all/tsconfig.json

@@ -30,6 +30,7 @@
     { "path": "../components" },
     { "path": "../ext-loader" },
     { "path": "../foundation" },
+    { "path": "../fragments/adapter-panel" },
     { "path": "../fragments/doc-title" },
     { "path": "../fragments/frame-panel" },
     { "path": "../fragments/outline" },

blocksuite/affine/blocks/attachment/package.json

@@ -24,7 +24,7 @@
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
     "@toeverything/theme": "^1.1.14",
-    "file-type": "^20.0.0",
+    "file-type": "^21.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",

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

@@ -22,7 +22,7 @@ import {
   TelemetryProvider,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
-import { humanFileSize } from '@blocksuite/affine-shared/utils';
+import { formatSize } from '@blocksuite/affine-shared/utils';
 import {
   AttachmentIcon,
   ResetIcon,
@@ -316,7 +316,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
       errorIcon: WarningIcon(),
       icon: AttachmentIcon(),
       title: name,
-      description: humanFileSize(size),
+      description: formatSize(size),
     });
 
     return { ...resolvedState, kind };

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

@@ -13,7 +13,7 @@ import {
   FileSizeLimitProvider,
   TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
-import { humanFileSize } from '@blocksuite/affine-shared/utils';
+import { formatSize } from '@blocksuite/affine-shared/utils';
 import { Bound, type IVec, Vec } from '@blocksuite/global/gfx';
 import type { BlockStdScope } from '@blocksuite/std';
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
@@ -93,7 +93,7 @@ function hasExceeded(
   const exceeded = files.some(file => file.size > maxFileSize);
 
   if (exceeded) {
-    const size = humanFileSize(maxFileSize, true, 0);
+    const size = formatSize(maxFileSize);
     toast(std.host, `You can only upload files less than ${size}`);
   }
 

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

@@ -11,6 +11,7 @@ import {
   DocModeProvider,
   LinkPreviewServiceIdentifier,
 } from '@blocksuite/affine-shared/services';
+import { normalizeUrl } from '@blocksuite/affine-shared/utils';
 import { BlockSelection } from '@blocksuite/std';
 import { computed, type ReadonlySignal, signal } from '@preact/signals-core';
 import { html } from 'lit';
@@ -99,12 +100,12 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
     selectionManager.setGroup('note', [blockSelection]);
   };
 
+  get link() {
+    return normalizeUrl(this.model.props.url);
+  }
+
   open = () => {
-    let link = this.model.props.url;
-    if (!link.match(/^[a-zA-Z]+:\/\//)) {
-      link = 'https://' + link;
-    }
-    window.open(link, '_blank');
+    window.open(this.link, '_blank');
   };
 
   refreshData = () => {

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

@@ -48,7 +48,11 @@ const codePreprocessor: MarkdownAdapterPreprocessor = {
         }
 
         trimmedLine = trimmedLine.trimEnd();
-        if (!trimmedLine.startsWith('<') && !trimmedLine.endsWith('>')) {
+        if (
+          !trimmedLine.startsWith('<') &&
+          !trimmedLine.endsWith('>') &&
+          !trimmedLine.includes(' ')
+        ) {
           // check if it is a url link and wrap it with the angle brackets
           // sometimes the url includes emphasis `_` that will break URL parsing
           //

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

@@ -1,13 +0,0 @@
-import { toGfxBlockComponent } from '@blocksuite/std';
-
-import { CodeBlockComponent } from './code-block.js';
-
-export class CodeEdgelessBlockComponent extends toGfxBlockComponent(
-  CodeBlockComponent
-) {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'affine-edgeless-code': CodeEdgelessBlockComponent;
-  }
-}

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

@@ -4,6 +4,7 @@ import type {
   MenuItemGroup,
 } from '@blocksuite/affine-components/toolbar';
 import { renderGroups } from '@blocksuite/affine-components/toolbar';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { WithDisposable } from '@blocksuite/global/lit';
 import { noop } from '@blocksuite/global/utils';
 import { MoreVerticalIcon } from '@blocksuite/icons/lit';
@@ -33,8 +34,8 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
     }
 
     .code-toolbar-button {
-      color: var(--affine-icon-color);
-      background-color: var(--affine-background-primary-color);
+      color: ${unsafeCSSVarV2('icon/primary')};
+      background-color: ${unsafeCSSVarV2('segment/background')};
       box-shadow: var(--affine-shadow-1);
       border-radius: 4px;
     }

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

@@ -19,8 +19,6 @@ export class LanguageListButton extends WithDisposable(
 ) {
   static override styles = css`
     .lang-button {
-      background-color: var(--affine-background-primary-color);
-      box-shadow: var(--affine-shadow-1);
       display: flex;
       gap: 4px;
       padding: 2px 4px;
@@ -28,11 +26,11 @@ export class LanguageListButton extends WithDisposable(
     }
 
     .lang-button:hover {
-      background: var(--affine-hover-color-filled);
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
     }
 
     .lang-button[hover] {
-      background: var(--affine-hover-color-filled);
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
     }
 
     .lang-button-icon {

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

@@ -1,5 +1,4 @@
 import { CodeBlockComponent } from './code-block';
-import { CodeEdgelessBlockComponent } from './code-edgeless-block';
 import {
   AFFINE_CODE_TOOLBAR_WIDGET,
   AffineCodeToolbarWidget,
@@ -15,7 +14,6 @@ export function effects() {
   customElements.define(AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget);
   customElements.define('affine-code-unit', AffineCodeUnit);
   customElements.define('affine-code', CodeBlockComponent);
-  customElements.define('affine-edgeless-code', CodeEdgelessBlockComponent);
   customElements.define('preview-button', PreviewButton);
 }
 

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

@@ -2,6 +2,10 @@ import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
 import { css } from 'lit';
 
 export const codeBlockStyles = css`
+  affine-code {
+    display: block;
+  }
+
   .affine-code-block-container {
     font-size: var(--affine-font-xs);
     line-height: var(--affine-line-height);

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

@@ -41,11 +41,7 @@ export class CodeBlockViewExtension extends ViewExtensionProvider {
     context.register([
       FlavourExtension('affine:code'),
       CodeBlockHighlighter,
-      BlockViewExtension('affine:code', model => {
-        return model.parent?.flavour === 'affine:surface'
-          ? literal`affine-edgeless-code`
-          : literal`affine-code`;
-      }),
+      BlockViewExtension('affine:code', literal`affine-code`),
       SlashMenuConfigExtension('affine:code', codeSlashMenuConfig),
       CodeKeymapExtension,
       ...getCodeClipboardExtensions(),

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

@@ -26,6 +26,7 @@ import {
   GfxViewInteractionExtension,
   type SelectedContext,
 } from '@blocksuite/std/gfx';
+import { computed } from '@preact/signals-core';
 import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
@@ -82,6 +83,23 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
     });
   }
 
+  private readonly _style$ = computed(() => {
+    const {
+      color$: { value: color },
+      fontFamily$: { value: fontFamily },
+      fontStyle$: { value: fontStyle },
+      fontWeight$: { value: fontWeight },
+      textAlign$: { value: textAlign },
+    } = this.model.props;
+    return {
+      color,
+      fontFamily,
+      fontStyle,
+      fontWeight,
+      textAlign,
+    };
+  });
+
   checkWidthOverflow(width: number) {
     let wValid = true;
 
@@ -365,7 +383,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
 
   override renderPageContent() {
     const { color, fontFamily, fontStyle, fontWeight, textAlign } =
-      this.model.props;
+      this._style$.value;
     const themeProvider = this.std.get(ThemeProvider);
     const textColor = themeProvider.generateColorProperty(
       color,

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

@@ -259,7 +259,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
     );
   }
 
-  private _handleDoubleClick(event: MouseEvent) {
+  private readonly _handleDoubleClick = (event: MouseEvent) => {
     event.stopPropagation();
     const openDocService = this.std.get(OpenDocExtensionIdentifier);
     const shouldOpenInPeek =
@@ -270,7 +270,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
         : 'open-in-active-view',
       event,
     });
-  }
+  };
 
   private _isDocEmpty() {
     const linkedDoc = this.linkedDoc;
@@ -311,6 +311,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
         .citationIdentifier=${footnoteIdentifier}
         .active=${this.selected$.value}
         .onClickCallback=${this._handleClick}
+        .onDoubleClickCallback=${this._handleDoubleClick}
       ></affine-citation-card>
     </div> `;
   };

blocksuite/affine/blocks/embed-doc/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts

@@ -20,7 +20,6 @@ import { choose } from 'lit/directives/choose.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { guard } from 'lit/directives/guard.js';
 import { styleMap } from 'lit/directives/style-map.js';
-import { when } from 'lit/directives/when.js';
 
 import { EmbedSyncedDocConfigExtension } from './configs';
 import { EmbedSyncedDocBlockComponent } from './embed-synced-doc-block';
@@ -123,22 +122,18 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
           <div class="affine-embed-synced-doc-edgeless-header-wrapper">
             ${header}
           </div>
-          ${when(
-            !this.model.isFolded,
-            () =>
-              html`<div class="affine-embed-synced-doc-editor">
-                  ${this.isPageMode && this._isEmptySyncedDoc
-                    ? html`
-                        <div class="affine-embed-synced-doc-editor-empty">
-                          <span>
-                            This is a linked doc, you can add content here.
-                          </span>
-                        </div>
-                      `
-                    : guard([editorMode, syncedDoc], renderEditor)}
-                </div>
-                <div class="affine-embed-synced-doc-editor-overlay"></div>`
-          )}
+          <div class="affine-embed-synced-doc-editor">
+            ${this.isPageMode && this._isEmptySyncedDoc
+              ? html`
+                  <div class="affine-embed-synced-doc-editor-empty">
+                    <span>
+                      This is a linked doc, you can add content here.
+                    </span>
+                  </div>
+                `
+              : guard([editorMode, syncedDoc], renderEditor)}
+          </div>
+          <div class="affine-embed-synced-doc-editor-overlay"></div>
         </div>
       `
     );

blocksuite/affine/blocks/frame/src/frame-toolbar.ts

@@ -160,19 +160,30 @@ const builtinSurfaceToolbarConfig = {
             background => resolveColor(background, theme)
           ) ?? DefaultTheme.transparent;
         const onPick = (e: PickColorEvent) => {
-          if (e.type === 'pick') {
-            const color = e.detail.value;
-            for (const model of models) {
-              const props = packColor(field, color);
-              ctx.std
-                .get(EdgelessCRUDIdentifier)
-                .updateElement(model.id, props);
-            }
-            return;
-          }
-
-          for (const model of models) {
-            model[e.type === 'start' ? 'stash' : 'pop'](field);
+          switch (e.type) {
+            case 'pick':
+              {
+                const color = e.detail.value;
+                const props = packColor(field, color);
+                const crud = ctx.std.get(EdgelessCRUDIdentifier);
+                models.forEach(model => {
+                  crud.updateElement(model.id, props);
+                });
+              }
+              break;
+            case 'start':
+              ctx.store.captureSync();
+              models.forEach(model => {
+                model.stash(field);
+              });
+              break;
+            case 'end':
+              ctx.store.transact(() => {
+                models.forEach(model => {
+                  model.pop(field);
+                });
+              });
+              break;
           }
         };
 

blocksuite/affine/blocks/image/package.json

@@ -26,7 +26,7 @@
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
     "@toeverything/theme": "^1.1.14",
-    "file-type": "^20.0.0",
+    "file-type": "^21.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",

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

@@ -9,7 +9,7 @@ import {
   ThemeProvider,
   ToolbarRegistryIdentifier,
 } from '@blocksuite/affine-shared/services';
-import { humanFileSize } from '@blocksuite/affine-shared/utils';
+import { formatSize } from '@blocksuite/affine-shared/utils';
 import { IS_MOBILE } from '@blocksuite/global/env';
 import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
@@ -142,7 +142,7 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
       errorIcon: BrokenImageIcon(),
       icon: ImageIcon(),
       title: 'Image',
-      description: humanFileSize(size),
+      description: formatSize(size),
     });
 
     return html`

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

@@ -8,7 +8,7 @@ import {
 } from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
-import { humanFileSize } from '@blocksuite/affine-shared/utils';
+import { formatSize } from '@blocksuite/affine-shared/utils';
 import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
 import { GfxBlockComponent } from '@blocksuite/std';
 import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
@@ -128,7 +128,7 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
       errorIcon: BrokenImageIcon(),
       icon: ImageIcon(),
       title: 'Image',
-      description: humanFileSize(size),
+      description: formatSize(size),
     });
 
     return html`

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

@@ -11,8 +11,8 @@ import {
   NativeClipboardProvider,
 } from '@blocksuite/affine-shared/services';
 import {
+  formatSize,
   getBlockProps,
-  humanFileSize,
   isInsidePageEditor,
   readImageSize,
   transformModel,
@@ -241,7 +241,7 @@ function hasExceeded(
   const exceeded = files.some(file => file.size > maxFileSize);
 
   if (exceeded) {
-    const size = humanFileSize(maxFileSize, true, 0);
+    const size = formatSize(maxFileSize);
     toast(std.host, `You can only upload files less than ${size}`);
   }
 

blocksuite/affine/blocks/note/src/components/edgeless-note-style-panel.ts

@@ -40,12 +40,12 @@ export class EdgelessNoteStylePanel extends SignalWatcher(
   @property({ attribute: false })
   accessor std!: BlockStdScope;
 
-  @query('.edgeless-note-style-panel')
-  private accessor _panel!: HTMLDivElement;
-
   @state()
   accessor tabType: 'style' | 'customColor' = 'style';
 
+  @query('div.edgeless-note-style-panel-container')
+  accessor container!: HTMLDivElement;
+
   static override styles = css`
     .edgeless-note-style-panel {
       display: flex;
@@ -187,7 +187,32 @@ export class EdgelessNoteStylePanel extends SignalWatcher(
   };
 
   private readonly _pickColor = (e: PickColorEvent) => {
-    console.log(e);
+    switch (e.type) {
+      case 'pick':
+        {
+          const color = e.detail.value;
+          const crud = this.std.get(EdgelessCRUDIdentifier);
+          this.notes.forEach(note => {
+            crud.updateElement(note.id, {
+              background: color,
+            } satisfies Partial<NoteProps>);
+          });
+        }
+        break;
+      case 'start':
+        this._beforeChange();
+        this.notes.forEach(note => {
+          note.stash('background');
+        });
+        break;
+      case 'end':
+        this.std.store.transact(() => {
+          this.notes.forEach(note => {
+            note.pop('background');
+          });
+        });
+        break;
+    }
   };
 
   private readonly _selectShadow = (e: CustomEvent<NoteShadow>) => {
@@ -265,7 +290,7 @@ export class EdgelessNoteStylePanel extends SignalWatcher(
   };
 
   private _renderStylePanel() {
-    return html` <div class="edgeless-note-style-panel">
+    return html`<div class="edgeless-note-style-panel">
       <div class="edgeless-note-style-section">
         <div class="edgeless-note-style-section-title">Fill color</div>
         <edgeless-color-panel
@@ -369,9 +394,11 @@ export class EdgelessNoteStylePanel extends SignalWatcher(
   }
 
   override firstUpdated() {
-    this.disposables.addFromEvent(this._panel, 'click', e => {
-      e.stopPropagation();
-    });
+    if (this.container) {
+      this.disposables.addFromEvent(this.container, 'click', e => {
+        e.stopPropagation();
+      });
+    }
   }
 
   override render() {
@@ -383,11 +410,18 @@ export class EdgelessNoteStylePanel extends SignalWatcher(
             ${PaletteIcon()}
           </editor-icon-button>
         `}
+        @toggle=${(e: CustomEvent<boolean>) => {
+          if (!e.detail) {
+            this.tabType = 'style';
+          }
+        }}
       >
-        ${choose(this.tabType, [
-          ['style', () => this._renderStylePanel()],
-          ['customColor', () => this._renderCustomColorPanel()],
-        ])}
+        <div class="edgeless-note-style-panel-container">
+          ${choose(this.tabType, [
+            ['style', () => this._renderStylePanel()],
+            ['customColor', () => this._renderCustomColorPanel()],
+          ])}
+        </div>
       </editor-menu-button>
     `;
   }

blocksuite/affine/blocks/paragraph/src/utils/merge-with-prev.ts

@@ -8,6 +8,7 @@ import {
   EdgelessTextBlockModel,
   ImageBlockModel,
   ListBlockModel,
+  NoteBlockModel,
   ParagraphBlockModel,
   type RootBlockModel,
 } from '@blocksuite/affine-model';
@@ -19,7 +20,6 @@ import { EMBED_BLOCK_MODEL_LIST } from '@blocksuite/affine-shared/consts';
 import type { ExtendedModel } from '@blocksuite/affine-shared/types';
 import {
   focusTitle,
-  getDocTitleInlineEditor,
   getPrevContentBlock,
   matchModels,
 } from '@blocksuite/affine-shared/utils';
@@ -122,41 +122,39 @@ function handleNoPreviousSibling(editorHost: EditorHost, model: ExtendedModel) {
   const text = model.text;
   const parent = doc.getParent(model);
   if (!parent) return false;
-  const titleEditor = getDocTitleInlineEditor(editorHost);
-  // Probably no title, e.g. in edgeless mode
-  if (!titleEditor) {
-    if (
-      matchModels(parent, [EdgelessTextBlockModel]) ||
-      model.children.length > 0
-    ) {
+
+  if (matchModels(parent, [NoteBlockModel]) && parent.isPageBlock()) {
+    const rootModel = model.store.root as RootBlockModel;
+    const title = rootModel.props.title;
+
+    doc.captureSync();
+    let textLength = 0;
+    if (text) {
+      textLength = text.length;
+      title.join(text);
+    }
+
+    // Preserve at least one block to be able to focus on container click
+    if (doc.getNext(model) || model.children.length > 0) {
       doc.deleteBlock(model, {
         bringChildrenTo: parent,
       });
-      return true;
+    } else {
+      text?.clear();
     }
-    return false;
+    focusTitle(editorHost, title.length - textLength);
+    return true;
   }
 
-  const rootModel = model.store.root as RootBlockModel;
-  const title = rootModel.props.title;
-
-  doc.captureSync();
-  let textLength = 0;
-  if (text) {
-    textLength = text.length;
-    title.join(text);
-  }
-
-  // Preserve at least one block to be able to focus on container click
-  if (doc.getNext(model) || model.children.length > 0) {
-    const parent = doc.getParent(model);
-    if (!parent) return false;
+  if (
+    matchModels(parent, [EdgelessTextBlockModel]) ||
+    model.children.length > 0
+  ) {
     doc.deleteBlock(model, {
       bringChildrenTo: parent,
     });
-  } else {
-    text?.clear();
+    return true;
   }
-  focusTitle(editorHost, title.length - textLength);
-  return true;
+
+  return false;
 }

blocksuite/affine/blocks/root/src/edgeless/clipboard/clipboard.ts

@@ -209,9 +209,10 @@ export class EdgelessClipboardController extends PageClipboard {
         await addImages(this.std, imageFiles, {
           point,
           maxWidth: MAX_IMAGE_WIDTH,
+          shouldTransformPoint: false,
         });
       } else {
-        await addAttachments(this.std, [...files], point);
+        await addAttachments(this.std, [...files], point, false);
       }
 
       this.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
@@ -227,11 +228,7 @@ export class EdgelessClipboardController extends PageClipboard {
 
     if (isUrlInClipboard(data)) {
       const url = data.getData('text/plain');
-      const lastMousePos = this.toolManager.lastMousePos$.peek();
-      const [x, y] = this.gfx.viewport.toModelCoord(
-        lastMousePos.x,
-        lastMousePos.y
-      );
+      const { x, y } = this.toolManager.lastMousePos$.peek();
 
       // try to interpret url as affine doc url
       const parseDocUrlService = this.std.getOptional(ParseDocUrlProvider);
@@ -562,11 +559,7 @@ export class EdgelessClipboardController extends PageClipboard {
   }
 
   private async _pasteTextContentAsNote(content: BlockSnapshot[] | string) {
-    const lastMousePos = this.toolManager.lastMousePos$.peek();
-    const [x, y] = this.gfx.viewport.toModelCoord(
-      lastMousePos.x,
-      lastMousePos.y
-    );
+    const { x, y } = this.toolManager.lastMousePos$.peek();
 
     const noteProps = {
       xywh: new Bound(

blocksuite/affine/blocks/root/src/edgeless/clipboard/command.ts

@@ -52,9 +52,7 @@ export const createElementsFromClipboardDataCommand: Command<Input, Output> = (
     let oldCommonBound, pasteX, pasteY;
     {
       const lastMousePos = toolManager.lastMousePos$.peek();
-      pasteCenter =
-        pasteCenter ??
-        gfx.viewport.toModelCoord(lastMousePos.x, lastMousePos.y);
+      pasteCenter = pasteCenter ?? [lastMousePos.x, lastMousePos.y];
       const [modelX, modelY] = pasteCenter;
       oldCommonBound = edgelessElementsBoundFromRawData(elementsRawData);
 

blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts

@@ -31,7 +31,7 @@ import { mountShapeTextEditor, ShapeTool } from '@blocksuite/affine-gfx-shape';
 import { TextTool } from '@blocksuite/affine-gfx-text';
 import {
   ConnectorElementModel,
-  ConnectorMode,
+  type ConnectorMode,
   EdgelessTextBlockModel,
   GroupElementModel,
   LayoutType,
@@ -66,7 +66,6 @@ import {
   DEFAULT_NOTE_TIP,
 } from './utils/consts.js';
 import { deleteElements } from './utils/crud.js';
-import { getNextShapeType } from './utils/hotkey-utils.js';
 import { isCanvasElement } from './utils/query.js';
 
 export class EdgelessPageKeyboardManager extends PageKeyboardManager {
@@ -93,10 +92,18 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
           this._setEdgelessTool(TextTool);
         },
         c: () => {
-          const mode = ConnectorMode.Curve;
-          rootComponent.std.get(EditPropsStore).recordLastProps('connector', {
-            mode,
-          });
+          const editPropsStore = this.std.get(EditPropsStore);
+
+          let mode: ConnectorMode;
+          if (
+            this.gfx.tool.currentToolName$.peek() === ConnectorTool.toolName
+          ) {
+            mode = this.gfx.tool.get(ConnectorTool).getNextMode();
+            editPropsStore.recordLastProps('connector', { mode });
+          } else {
+            mode = editPropsStore.lastProps$.peek().connector.mode;
+          }
+
           this._setEdgelessTool(ConnectorTool, { mode });
         },
         h: () => {
@@ -208,10 +215,8 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
           ) {
             return;
           }
-          const { shapeName } = controller.activatedOption;
-          const nextShapeName = getNextShapeType(shapeName);
           this._setEdgelessTool(ShapeTool, {
-            shapeName: nextShapeName,
+            shapeName: controller.cycleShapeName('prev'),
           });
 
           controller.createOverlay();

blocksuite/affine/blocks/root/src/edgeless/utils/hotkey-utils.ts

@@ -1,15 +0,0 @@
-import type { ShapeToolOption } from '@blocksuite/affine-gfx-shape';
-import { ShapeType } from '@blocksuite/affine-model';
-
-const shapeMap: Record<ShapeToolOption['shapeName'], number> = {
-  [ShapeType.Rect]: 0,
-  [ShapeType.Ellipse]: 1,
-  [ShapeType.Diamond]: 2,
-  [ShapeType.Triangle]: 3,
-  roundedRect: 4,
-};
-const shapes = Object.keys(shapeMap) as ShapeToolOption['shapeName'][];
-
-export function getNextShapeType(cur: ShapeToolOption['shapeName']) {
-  return shapes[(shapeMap[cur] + 1) % shapes.length];
-}

blocksuite/affine/blocks/surface-ref/src/components/placeholder.ts

@@ -1,3 +1,4 @@
+import { ColorScheme } from '@blocksuite/affine-model';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { DeleteIcon } from '@blocksuite/icons/lit';
@@ -7,7 +8,7 @@ import { css, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
-import { SurfaceRefNotFoundBackground } from '../icons';
+import { DarkDeletedSmallBanner, LightDeletedSmallBanner } from '../icons';
 import { getReferenceModelTitle, TYPE_ICON_MAP } from '../utils';
 
 export class SurfaceRefPlaceHolder extends SignalWatcher(
@@ -70,6 +71,9 @@ export class SurfaceRefPlaceHolder extends SignalWatcher(
   @property({ attribute: false })
   accessor inEdgeless = false;
 
+  @property({ attribute: false })
+  accessor theme: ColorScheme = ColorScheme.Light;
+
   override render() {
     const { referenceModel, refFlavour, inEdgeless } = this;
 
@@ -83,6 +87,11 @@ export class SurfaceRefPlaceHolder extends SignalWatcher(
       (referenceModel && getReferenceModelTitle(referenceModel)) ??
       matchedType.name;
 
+    const notFoundBackground =
+      this.theme === ColorScheme.Light
+        ? LightDeletedSmallBanner
+        : DarkDeletedSmallBanner;
+
     return html`
       <div
         class=${classMap({
@@ -92,7 +101,7 @@ export class SurfaceRefPlaceHolder extends SignalWatcher(
       >
         ${modelNotFound
           ? html`<div class="surface-ref-not-found-background">
-              ${SurfaceRefNotFoundBackground}
+              ${notFoundBackground}
             </div>`
           : nothing}
         <div class="surface-ref-placeholder-heading">

blocksuite/affine/blocks/surface-ref/src/icons.ts

@@ -1,105 +1,211 @@
 import { html } from 'lit';
 
-export const SurfaceRefNotFoundBackground = html`
-  <svg
-    width="204"
-    height="66"
-    viewBox="0 0 204 66"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g filter="url(#filter0_d_877_26)">
-      <rect width="53" height="66" transform="translate(49 22)" fill="white" />
-      <rect
-        x="57.0168"
-        y="30.8"
-        width="26.0545"
-        height="3.85"
-        rx="1.925"
-        fill="black"
-        fill-opacity="0.07"
-      />
-      <rect
-        x="57.0168"
-        y="38.5"
-        width="36.9664"
-        height="2.2"
-        rx="1.1"
-        fill="black"
-        fill-opacity="0.07"
-      />
-      <rect
-        x="57.0168"
-        y="44"
-        width="19.5409"
-        height="2.2"
-        rx="1.1"
-        fill="black"
-        fill-opacity="0.07"
-      />
-      <rect
-        x="57.0168"
-        y="49.5"
-        width="36.9664"
-        height="2.2"
-        rx="1.1"
-        fill="black"
-        fill-opacity="0.07"
-      />
-      <rect
-        x="57.0168"
-        y="55"
-        width="19.5409"
-        height="2.2"
-        rx="1.1"
-        fill="black"
-        fill-opacity="0.07"
-      />
-    </g>
-    <path
-      d="M157.341 17.6783L144.153 14.356L144.708 12.2671C145.628 8.80598 143.153 5.18897 139.18 4.18815L129.589 1.77198C125.616 0.771163 121.65 2.76557 120.73 6.22669L120.175 8.31563L106.987 4.99341C103.676 4.15942 100.371 5.82148 99.6048 8.70566L98.4947 12.8835C98.1881 14.0373 99.0131 15.2429 100.337 15.5765L157.885 30.0735C159.209 30.4071 160.531 29.7424 160.837 28.5886L161.948 24.4107C162.714 21.5266 160.651 18.5123 157.341 17.6783ZM125.526 7.43477C125.831 6.28324 127.157 5.61689 128.478 5.94987L138.07 8.36603C139.391 8.69901 140.218 9.90749 139.912 11.059L139.357 13.148L124.97 9.52372L125.526 7.43477Z"
-      fill="#E6E6E6"
+export const LightDeletedSmallBanner = html`<svg
+  width="204"
+  height="66"
+  viewBox="0 0 204 66"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g filter="url(#filter0_d_3075_418)">
+    <rect width="53" height="66" transform="translate(49 22)" fill="white" />
+    <rect
+      x="57.0168"
+      y="30.8"
+      width="26.0545"
+      height="3.85"
+      rx="1.925"
+      fill="black"
+      fill-opacity="0.1"
     />
-    <path
-      d="M98.6798 34.2638C98.2253 34.2631 97.8625 34.6108 97.8834 35.0271L99.9152 75.4671C100.103 79.2097 103.451 82.1461 107.536 82.1527L146.222 82.216C150.307 82.2226 153.665 79.2973 153.866 75.5552L156.037 35.1221C156.06 34.7059 155.698 34.357 155.243 34.3563L98.6798 34.2638ZM137.141 40.1651C137.143 38.8748 138.285 37.8316 139.693 37.8339C141.1 37.8362 142.238 38.8831 142.236 40.1734L142.183 70.5327C142.181 71.8229 141.039 72.8661 139.632 72.8638C138.225 72.8615 137.086 71.8146 137.089 70.5244L137.141 40.1651ZM124.404 40.1442C124.406 38.854 125.548 37.8108 126.956 37.8131C128.363 37.8154 129.501 38.8623 129.499 40.1526L129.447 70.5119C129.444 71.8021 128.303 72.8453 126.895 72.843C125.488 72.8407 124.349 71.7938 124.352 70.5035L124.404 40.1442ZM111.667 40.1234C111.669 38.8331 112.811 37.7899 114.219 37.7922C115.626 37.7945 116.764 38.8415 116.762 40.1317L116.71 70.491C116.707 71.7813 115.566 72.8245 114.158 72.8222C112.751 72.8199 111.613 71.773 111.615 70.4827L111.667 40.1234Z"
-      fill="#E6E6E6"
+    <rect
+      x="57.0168"
+      y="38.5"
+      width="36.9664"
+      height="2.2"
+      rx="1.1"
+      fill="black"
+      fill-opacity="0.1"
     />
-    <defs>
-      <filter
-        id="filter0_d_877_26"
-        x="46"
-        y="19"
-        width="59"
-        height="72"
-        filterUnits="userSpaceOnUse"
-        color-interpolation-filters="sRGB"
-      >
-        <feFlood flood-opacity="0" result="BackgroundImageFix" />
-        <feColorMatrix
-          in="SourceAlpha"
-          type="matrix"
-          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-          result="hardAlpha"
-        />
-        <feOffset />
-        <feGaussianBlur stdDeviation="1.5" />
-        <feComposite in2="hardAlpha" operator="out" />
-        <feColorMatrix
-          type="matrix"
-          values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.1 0"
-        />
-        <feBlend
-          mode="normal"
-          in2="BackgroundImageFix"
-          result="effect1_dropShadow_877_26"
-        />
-        <feBlend
-          mode="normal"
-          in="SourceGraphic"
-          in2="effect1_dropShadow_877_26"
-          result="shape"
-        />
-      </filter>
-    </defs>
-  </svg>
-`;
+    <rect
+      x="57.0168"
+      y="44"
+      width="19.5409"
+      height="2.2"
+      rx="1.1"
+      fill="black"
+      fill-opacity="0.1"
+    />
+    <rect
+      x="57.0168"
+      y="49.5"
+      width="36.9664"
+      height="2.2"
+      rx="1.1"
+      fill="black"
+      fill-opacity="0.1"
+    />
+    <rect
+      x="57.0168"
+      y="55"
+      width="19.5409"
+      height="2.2"
+      rx="1.1"
+      fill="black"
+      fill-opacity="0.1"
+    />
+  </g>
+  <path
+    d="M157.341 17.6783L144.153 14.3561L144.708 12.2671C145.628 8.80601 143.153 5.189 139.18 4.18818L129.588 1.77201C125.616 0.771194 121.65 2.7656 120.73 6.22672L120.175 8.31566L106.987 4.99344C103.676 4.15945 100.371 5.82152 99.6047 8.70569L98.4946 12.8836C98.188 14.0373 99.013 15.2429 100.337 15.5766L157.885 30.0735C159.209 30.4072 160.531 29.7424 160.837 28.5886L161.948 24.4108C162.714 21.5266 160.651 18.5123 157.341 17.6783ZM125.525 7.4348C125.831 6.28327 127.157 5.61692 128.478 5.9499L138.07 8.36606C139.391 8.69904 140.218 9.90752 139.912 11.059L139.357 13.148L124.97 9.52375L125.525 7.4348Z"
+    fill="#E6E6E6"
+  />
+  <path
+    d="M98.6798 34.2639C98.2253 34.2631 97.8625 34.6108 97.8834 35.0271L99.9152 75.4671C100.103 79.2098 103.451 82.1461 107.536 82.1528L146.222 82.216C150.307 82.2227 153.665 79.2973 153.866 75.5553L156.037 35.1222C156.06 34.7059 155.698 34.3571 155.243 34.3563L98.6798 34.2639ZM137.141 40.1651C137.143 38.8748 138.285 37.8316 139.693 37.8339C141.1 37.8362 142.238 38.8831 142.236 40.1734L142.183 70.5327C142.181 71.823 141.039 72.8662 139.632 72.8639C138.225 72.8616 137.086 71.8147 137.089 70.5244L137.141 40.1651ZM124.404 40.1443C124.406 38.854 125.548 37.8108 126.956 37.8131C128.363 37.8154 129.501 38.8623 129.499 40.1526L129.447 70.5119C129.444 71.8022 128.303 72.8454 126.895 72.8431C125.488 72.8408 124.349 71.7938 124.352 70.5036L124.404 40.1443ZM111.667 40.1234C111.669 38.8332 112.811 37.79 114.219 37.7923C115.626 37.7946 116.764 38.8415 116.762 40.1318L116.71 70.4911C116.707 71.7813 115.566 72.8245 114.158 72.8222C112.751 72.8199 111.613 71.773 111.615 70.4827L111.667 40.1234Z"
+    fill="#E6E6E6"
+  />
+  <defs>
+    <filter
+      id="filter0_d_3075_418"
+      x="46"
+      y="19"
+      width="59"
+      height="72"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset />
+      <feGaussianBlur stdDeviation="1.5" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_3075_418"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_3075_418"
+        result="shape"
+      />
+    </filter>
+  </defs>
+</svg> `;
+
+export const DarkDeletedSmallBanner = html`<svg
+  width="204"
+  height="66"
+  viewBox="0 0 204 66"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g filter="url(#filter0_d_3075_12843)">
+    <rect
+      width="53"
+      height="66"
+      transform="translate(49 22)"
+      fill="white"
+      fill-opacity="0.08"
+    />
+    <rect
+      x="57.0168"
+      y="30.8"
+      width="26.0545"
+      height="3.85"
+      rx="1.925"
+      fill="white"
+      fill-opacity="0.1"
+    />
+    <rect
+      x="57.0168"
+      y="38.5"
+      width="36.9664"
+      height="2.2"
+      rx="1.1"
+      fill="white"
+      fill-opacity="0.1"
+    />
+    <rect
+      x="57.0168"
+      y="44"
+      width="19.5409"
+      height="2.2"
+      rx="1.1"
+      fill="white"
+      fill-opacity="0.1"
+    />
+    <rect
+      x="57.0168"
+      y="49.5"
+      width="36.9664"
+      height="2.2"
+      rx="1.1"
+      fill="white"
+      fill-opacity="0.1"
+    />
+    <rect
+      x="57.0168"
+      y="55"
+      width="19.5409"
+      height="2.2"
+      rx="1.1"
+      fill="white"
+      fill-opacity="0.1"
+    />
+  </g>
+  <path
+    d="M157.341 17.6783L144.153 14.3561L144.708 12.2671C145.628 8.80601 143.153 5.189 139.18 4.18818L129.588 1.77201C125.616 0.771194 121.65 2.7656 120.73 6.22672L120.175 8.31566L106.987 4.99344C103.676 4.15945 100.371 5.82152 99.6048 8.70569L98.4946 12.8836C98.1881 14.0373 99.013 15.2429 100.337 15.5766L157.885 30.0735C159.209 30.4072 160.531 29.7424 160.837 28.5886L161.948 24.4108C162.714 21.5266 160.651 18.5123 157.341 17.6783ZM125.525 7.4348C125.831 6.28327 127.157 5.61692 128.478 5.9499L138.07 8.36606C139.391 8.69904 140.218 9.90752 139.912 11.059L139.357 13.148L124.97 9.52375L125.525 7.4348Z"
+    fill="#646464"
+  />
+  <path
+    d="M98.6798 34.2639C98.2253 34.2631 97.8625 34.6108 97.8834 35.0271L99.9152 75.4671C100.103 79.2098 103.451 82.1461 107.536 82.1528L146.222 82.216C150.307 82.2227 153.665 79.2973 153.866 75.5553L156.037 35.1222C156.06 34.7059 155.698 34.3571 155.243 34.3563L98.6798 34.2639ZM137.141 40.1651C137.143 38.8748 138.285 37.8316 139.693 37.8339C141.1 37.8362 142.238 38.8831 142.236 40.1734L142.183 70.5327C142.181 71.823 141.04 72.8662 139.632 72.8639C138.225 72.8616 137.086 71.8147 137.089 70.5244L137.141 40.1651ZM124.404 40.1443C124.406 38.854 125.548 37.8108 126.956 37.8131C128.363 37.8154 129.501 38.8623 129.499 40.1526L129.447 70.5119C129.444 71.8022 128.303 72.8454 126.895 72.8431C125.488 72.8408 124.35 71.7938 124.352 70.5036L124.404 40.1443ZM111.667 40.1234C111.669 38.8332 112.811 37.79 114.219 37.7923C115.626 37.7946 116.764 38.8415 116.762 40.1318L116.71 70.4911C116.707 71.7813 115.566 72.8245 114.158 72.8222C112.751 72.8199 111.613 71.773 111.615 70.4827L111.667 40.1234Z"
+    fill="#646464"
+  />
+  <defs>
+    <filter
+      id="filter0_d_3075_12843"
+      x="46"
+      y="19"
+      width="59"
+      height="72"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset />
+      <feGaussianBlur stdDeviation="1.5" />
+      <feComposite in2="hardAlpha" operator="out" />
+      <feColorMatrix
+        type="matrix"
+        values="0 0 0 0 0.258824 0 0 0 0 0.254902 0 0 0 0 0.286275 0 0 0 0.1 0"
+      />
+      <feBlend
+        mode="normal"
+        in2="BackgroundImageFix"
+        result="effect1_dropShadow_3075_12843"
+      />
+      <feBlend
+        mode="normal"
+        in="SourceGraphic"
+        in2="effect1_dropShadow_3075_12843"
+        result="shape"
+      />
+    </filter>
+  </defs>
+</svg> `;

blocksuite/affine/blocks/surface-ref/src/surface-ref-block.ts

@@ -374,6 +374,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
     const { w, h } = Bound.deserialize(this._referenceXYWH$.value);
     const aspectRatio = h !== 0 ? w / h : 1;
     const _previewSpec = this._previewSpec.concat(this._runtimePreviewExt);
+    const edgelessTheme = this.std.get(ThemeProvider).edgeless$.value;
 
     return html`<div class="ref-content">
       <div
@@ -381,6 +382,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
         style=${styleMap({
           aspectRatio: `${aspectRatio}`,
         })}
+        data-theme=${edgelessTheme}
       >
         ${guard(this._previewDoc, () => {
           return this._previewDoc
@@ -440,13 +442,14 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
 
     const { _referencedModel, model } = this;
     const isEmpty = !_referencedModel || !_referencedModel.xywh;
+    const theme = this.std.get(ThemeProvider).theme$.value;
     const content = isEmpty
       ? html`<surface-ref-placeholder
           .referenceModel=${_referencedModel}
           .refFlavour=${model.props.refFlavour$.value}
+          .theme=${theme}
         ></surface-ref-placeholder>`
       : this._renderRefContent();
-    const edgelessTheme = this.std.get(ThemeProvider).edgeless$.value;
 
     return html`
       <div
@@ -454,7 +457,6 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
           'affine-surface-ref': true,
           focused: this.selected$.value,
         })}
-        data-theme=${edgelessTheme}
         @click=${this._handleClick}
       >
         ${content}

blocksuite/affine/blocks/surface/src/extensions/connector-dom-renderer.ts

@@ -0,0 +1,3 @@
+import { ConnectorDomRendererExtension } from '../renderer/dom-elements/index.js';
+
+export { ConnectorDomRendererExtension };

blocksuite/affine/blocks/surface/src/extensions/index.ts

@@ -1,4 +1,5 @@
 export * from './clipboard-config';
+export * from './connector-dom-renderer';
 export * from './crud-extension';
 export * from './dom-element-renderer';
 export * from './edit-props-middleware-builder';

blocksuite/affine/blocks/surface/src/renderer/dom-elements/connector.ts

@@ -0,0 +1,398 @@
+import type { ConnectorElementModel } from '@blocksuite/affine-model';
+import { ConnectorMode, DefaultTheme } from '@blocksuite/affine-model';
+import {
+  getBezierParameters,
+  type PointLocation,
+} from '@blocksuite/global/gfx';
+
+import { DomElementRendererExtension } from '../../extensions/dom-element-renderer.js';
+import type { DomRenderer } from '../dom-renderer.js';
+import type { DomElementRenderer } from './index.js';
+
+/**
+ * DOM renderer for connector elements.
+ * Uses SVG to render connector paths, endpoints, and labels.
+ */
+export const connectorDomRenderer: DomElementRenderer<ConnectorElementModel> = (
+  elementModel,
+  domElement,
+  renderer
+) => {
+  const {
+    mode,
+    path: points,
+    strokeStyle,
+    frontEndpointStyle,
+    rearEndpointStyle,
+    strokeWidth,
+    stroke,
+    w,
+    h,
+  } = elementModel;
+
+  // Clear previous content
+  domElement.innerHTML = '';
+
+  // Points might not be built yet in some scenarios (undo/redo, copy/paste)
+  if (!points.length || points.length < 2) {
+    return;
+  }
+
+  // Create SVG element
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.style.width = `${w * renderer.viewport.zoom}px`;
+  svg.style.height = `${h * renderer.viewport.zoom}px`;
+  svg.style.position = 'absolute';
+  svg.style.top = '0';
+  svg.style.left = '0';
+  svg.style.pointerEvents = 'none';
+  svg.style.overflow = 'visible';
+
+  const strokeColor = renderer.getColorValue(
+    stroke,
+    DefaultTheme.connectorColor,
+    true
+  );
+
+  // Render connector path
+  renderConnectorPath(
+    svg,
+    points,
+    mode,
+    strokeStyle,
+    strokeWidth,
+    strokeColor,
+    renderer.viewport.zoom
+  );
+
+  // Render endpoints
+  if (frontEndpointStyle && frontEndpointStyle !== 'None') {
+    renderEndpoint(
+      svg,
+      points,
+      frontEndpointStyle,
+      'front',
+      strokeWidth,
+      strokeColor,
+      mode,
+      renderer.viewport.zoom
+    );
+  }
+
+  if (rearEndpointStyle && rearEndpointStyle !== 'None') {
+    renderEndpoint(
+      svg,
+      points,
+      rearEndpointStyle,
+      'rear',
+      strokeWidth,
+      strokeColor,
+      mode,
+      renderer.viewport.zoom
+    );
+  }
+
+  // Render label if exists
+  if (elementModel.hasLabel()) {
+    renderConnectorLabel(elementModel, domElement, renderer);
+  }
+
+  domElement.appendChild(svg);
+};
+
+function renderConnectorPath(
+  svg: SVGSVGElement,
+  points: PointLocation[],
+  mode: ConnectorMode,
+  strokeStyle: string,
+  strokeWidth: number,
+  strokeColor: string,
+  zoom: number
+) {
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
+  let pathData = '';
+
+  if (mode === ConnectorMode.Curve) {
+    // Bezier curve
+    const bezierParams = getBezierParameters(points);
+    const [p0, p1, p2, p3] = bezierParams;
+    pathData = `M ${p0[0]} ${p0[1]} C ${p1[0]} ${p1[1]} ${p2[0]} ${p2[1]} ${p3[0]} ${p3[1]}`;
+  } else {
+    // Straight or orthogonal lines
+    pathData = `M ${points[0][0]} ${points[0][1]}`;
+    for (let i = 1; i < points.length; i++) {
+      pathData += ` L ${points[i][0]} ${points[i][1]}`;
+    }
+  }
+
+  path.setAttribute('d', pathData);
+  path.setAttribute('stroke', strokeColor);
+  path.setAttribute('stroke-width', (strokeWidth * zoom).toString());
+  path.setAttribute('fill', 'none');
+  path.setAttribute('stroke-linecap', 'round');
+  path.setAttribute('stroke-linejoin', 'round');
+
+  if (strokeStyle === 'dash') {
+    const dashArray = `${12 * zoom},${12 * zoom}`;
+    path.setAttribute('stroke-dasharray', dashArray);
+  }
+
+  svg.appendChild(path);
+}
+
+function renderEndpoint(
+  svg: SVGSVGElement,
+  points: PointLocation[],
+  endpointStyle: string,
+  position: 'front' | 'rear',
+  strokeWidth: number,
+  strokeColor: string,
+  mode: ConnectorMode,
+  zoom: number
+) {
+  const pointIndex = position === 'rear' ? points.length - 1 : 0;
+  const point = points[pointIndex];
+  const size = 15 * (strokeWidth / 2) * zoom;
+
+  // Calculate tangent direction for endpoint orientation
+  let tangent: [number, number];
+  if (mode === ConnectorMode.Curve) {
+    const bezierParams = getBezierParameters(points);
+    // For curve mode, use bezier tangent
+    if (position === 'rear') {
+      const lastIdx = points.length - 1;
+      const prevPoint = points[lastIdx - 1];
+      tangent = [point[0] - prevPoint[0], point[1] - prevPoint[1]];
+    } else {
+      const nextPoint = points[1];
+      tangent = [nextPoint[0] - point[0], nextPoint[1] - point[1]];
+    }
+  } else {
+    // For straight/orthogonal mode
+    if (position === 'rear') {
+      const prevPoint = points[points.length - 2];
+      tangent = [point[0] - prevPoint[0], point[1] - prevPoint[1]];
+    } else {
+      const nextPoint = points[1];
+      tangent = [nextPoint[0] - point[0], nextPoint[1] - point[1]];
+    }
+  }
+
+  // Normalize tangent
+  const length = Math.sqrt(tangent[0] * tangent[0] + tangent[1] * tangent[1]);
+  if (length > 0) {
+    tangent[0] /= length;
+    tangent[1] /= length;
+  }
+
+  // Adjust tangent direction for front endpoint
+  if (position === 'front') {
+    tangent[0] = -tangent[0];
+    tangent[1] = -tangent[1];
+  }
+
+  switch (endpointStyle) {
+    case 'Arrow':
+      renderArrowEndpoint(svg, point, tangent, size, strokeColor, zoom);
+      break;
+    case 'Triangle':
+      renderTriangleEndpoint(svg, point, tangent, size, strokeColor, zoom);
+      break;
+    case 'Circle':
+      renderCircleEndpoint(svg, point, tangent, size, strokeColor, zoom);
+      break;
+    case 'Diamond':
+      renderDiamondEndpoint(svg, point, tangent, size, strokeColor, zoom);
+      break;
+  }
+}
+
+function renderArrowEndpoint(
+  svg: SVGSVGElement,
+  point: PointLocation,
+  tangent: [number, number],
+  size: number,
+  color: string,
+  zoom: number
+) {
+  const angle = Math.PI / 4; // 45 degrees
+  const arrowPath = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'path'
+  );
+
+  // Calculate arrow points
+  const cos1 = Math.cos(angle);
+  const sin1 = Math.sin(angle);
+  const cos2 = Math.cos(-angle);
+  const sin2 = Math.sin(-angle);
+
+  const x1 = point[0] + size * (tangent[0] * cos1 - tangent[1] * sin1);
+  const y1 = point[1] + size * (tangent[0] * sin1 + tangent[1] * cos1);
+  const x2 = point[0] + size * (tangent[0] * cos2 - tangent[1] * sin2);
+  const y2 = point[1] + size * (tangent[0] * sin2 + tangent[1] * cos2);
+
+  const pathData = `M ${x1} ${y1} L ${point[0]} ${point[1]} L ${x2} ${y2}`;
+  arrowPath.setAttribute('d', pathData);
+  arrowPath.setAttribute('stroke', color);
+  arrowPath.setAttribute('stroke-width', (2 * zoom).toString());
+  arrowPath.setAttribute('fill', 'none');
+  arrowPath.setAttribute('stroke-linecap', 'round');
+  arrowPath.setAttribute('stroke-linejoin', 'round');
+
+  svg.appendChild(arrowPath);
+}
+
+function renderTriangleEndpoint(
+  svg: SVGSVGElement,
+  point: PointLocation,
+  tangent: [number, number],
+  size: number,
+  color: string,
+  zoom: number
+) {
+  const triangle = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'polygon'
+  );
+
+  const angle = Math.PI / 3; // 60 degrees
+  const cos1 = Math.cos(angle);
+  const sin1 = Math.sin(angle);
+  const cos2 = Math.cos(-angle);
+  const sin2 = Math.sin(-angle);
+
+  const x1 = point[0] + size * (tangent[0] * cos1 - tangent[1] * sin1);
+  const y1 = point[1] + size * (tangent[0] * sin1 + tangent[1] * cos1);
+  const x2 = point[0] + size * (tangent[0] * cos2 - tangent[1] * sin2);
+  const y2 = point[1] + size * (tangent[0] * sin2 + tangent[1] * cos2);
+
+  const points = `${point[0]},${point[1]} ${x1},${y1} ${x2},${y2}`;
+  triangle.setAttribute('points', points);
+  triangle.setAttribute('fill', color);
+  triangle.setAttribute('stroke', color);
+  triangle.setAttribute('stroke-width', (1 * zoom).toString());
+
+  svg.appendChild(triangle);
+}
+
+function renderCircleEndpoint(
+  svg: SVGSVGElement,
+  point: PointLocation,
+  tangent: [number, number],
+  size: number,
+  color: string,
+  zoom: number
+) {
+  const circle = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'circle'
+  );
+
+  const radius = size * 0.5;
+  const centerX = point[0] + radius * tangent[0];
+  const centerY = point[1] + radius * tangent[1];
+
+  circle.setAttribute('cx', centerX.toString());
+  circle.setAttribute('cy', centerY.toString());
+  circle.setAttribute('r', radius.toString());
+  circle.setAttribute('fill', color);
+  circle.setAttribute('stroke', color);
+  circle.setAttribute('stroke-width', (1 * zoom).toString());
+
+  svg.appendChild(circle);
+}
+
+function renderDiamondEndpoint(
+  svg: SVGSVGElement,
+  point: PointLocation,
+  tangent: [number, number],
+  size: number,
+  color: string,
+  zoom: number
+) {
+  const diamond = document.createElementNS(
+    'http://www.w3.org/2000/svg',
+    'polygon'
+  );
+
+  // Calculate diamond points
+  const perpX = -tangent[1]; // Perpendicular to tangent
+  const perpY = tangent[0];
+
+  const halfSize = size * 0.5;
+  const x1 = point[0] + halfSize * tangent[0]; // Front point
+  const y1 = point[1] + halfSize * tangent[1];
+  const x2 = point[0] + halfSize * perpX; // Right point
+  const y2 = point[1] + halfSize * perpY;
+  const x3 = point[0] - halfSize * tangent[0]; // Back point
+  const y3 = point[1] - halfSize * tangent[1];
+  const x4 = point[0] - halfSize * perpX; // Left point
+  const y4 = point[1] - halfSize * perpY;
+
+  const points = `${x1},${y1} ${x2},${y2} ${x3},${y3} ${x4},${y4}`;
+  diamond.setAttribute('points', points);
+  diamond.setAttribute('fill', color);
+  diamond.setAttribute('stroke', color);
+  diamond.setAttribute('stroke-width', (1 * zoom).toString());
+
+  svg.appendChild(diamond);
+}
+
+function renderConnectorLabel(
+  elementModel: ConnectorElementModel,
+  domElement: HTMLElement,
+  renderer: DomRenderer
+) {
+  if (!elementModel.text || !elementModel.labelXYWH) {
+    return;
+  }
+
+  const labelElement = document.createElement('div');
+  const [lx, ly, lw, lh] = elementModel.labelXYWH;
+  const { x, y } = elementModel;
+
+  // Position label relative to the connector
+  const relativeX = (lx - x) * renderer.viewport.zoom;
+  const relativeY = (ly - y) * renderer.viewport.zoom;
+
+  labelElement.style.position = 'absolute';
+  labelElement.style.left = `${relativeX}px`;
+  labelElement.style.top = `${relativeY}px`;
+  labelElement.style.width = `${lw * renderer.viewport.zoom}px`;
+  labelElement.style.height = `${lh * renderer.viewport.zoom}px`;
+  labelElement.style.pointerEvents = 'auto';
+  labelElement.style.display = 'flex';
+  labelElement.style.alignItems = 'center';
+  labelElement.style.justifyContent = 'center';
+  labelElement.style.backgroundColor = 'white';
+  labelElement.style.border = '1px solid #e0e0e0';
+  labelElement.style.borderRadius = '4px';
+  labelElement.style.padding = '2px 4px';
+  labelElement.style.fontSize = `${(elementModel.labelStyle?.fontSize || 16) * renderer.viewport.zoom}px`;
+  labelElement.style.fontFamily =
+    elementModel.labelStyle?.fontFamily || 'Inter';
+  labelElement.style.color = renderer.getColorValue(
+    elementModel.labelStyle?.color || DefaultTheme.black,
+    DefaultTheme.black,
+    true
+  );
+  labelElement.style.textAlign = elementModel.labelStyle?.textAlign || 'center';
+  labelElement.style.overflow = 'hidden';
+  labelElement.style.whiteSpace = 'nowrap';
+  labelElement.style.textOverflow = 'ellipsis';
+
+  // Set label text content
+  labelElement.textContent = elementModel.text.toString();
+
+  domElement.appendChild(labelElement);
+}
+
+// Export the extension
+import { DomElementRendererExtension } from '../../extensions/dom-element-renderer.js';
+
+export const ConnectorDomRendererExtension = DomElementRendererExtension(
+  'connector',
+  connectorDomRenderer
+);

blocksuite/affine/blocks/surface/src/renderer/dom-elements/index.ts

@@ -29,3 +29,9 @@ export const DomElementRendererIdentifier = (type: string) =>
 export type DomElementRenderer<
   T extends SurfaceElementModel = SurfaceElementModel,
 > = (elementModel: T, domElement: HTMLElement, renderer: DomRenderer) => void;
+
+// Export the connector DOM renderer
+export {
+  connectorDomRenderer,
+  ConnectorDomRendererExtension,
+} from './connector.js';

blocksuite/affine/blocks/surface/src/renderer/dom-renderer.ts

@@ -81,53 +81,6 @@ function getOpacity(elementModel: SurfaceElementModel) {
   return { opacity: `${elementModel.opacity ?? 1}` };
 }
 
-/**
- * @class DomRenderer
- * Renders surface elements directly to the DOM using HTML elements and CSS.
- *
- * This renderer supports an extension mechanism to handle different types of surface elements.
- * To add rendering support for a new element type (e.g., 'my-custom-element'), follow these steps:
- *
- * 1.  **Define the Renderer Function**:
- *     Create a function that implements the rendering logic for your element.
- *     This function will receive the element's model, the target HTMLElement, and the DomRenderer instance.
- *     Signature: `(model: MyCustomElementModel, domElement: HTMLElement, renderer: DomRenderer) => void;`
- *     Example: `shapeDomRenderer` in `blocksuite/affine/gfx/shape/src/element-renderer/shape-dom/index.ts`.
- *     In this function, you'll apply styles and attributes to the `domElement` based on the `model`.
- *
- * 2.  **Create the Renderer Extension**:
- *     Create a new file (e.g., `my-custom-element-dom-renderer.extension.ts`).
- *     Import `DomElementRendererExtension` (e.g., from `@blocksuite/affine-block-surface` or its source location
- *     `blocksuite/affine/blocks/surface/src/extensions/dom-element-renderer.ts`).
- *     Import your renderer function (from step 1).
- *     Use the factory to create your extension:
- *     `export const MyCustomElementDomRendererExtension = DomElementRendererExtension('my-custom-element', myCustomElementRendererFn);`
- *     Example: `ShapeDomRendererExtension` in `blocksuite/affine/gfx/shape/src/element-renderer/shape-dom.ts`.
- *
- * 3.  **Register the Extension**:
- *     In your application setup where BlockSuite services and view extensions are registered (e.g., a `ViewExtensionProvider`
- *     or a central DI configuration place), import your new extension (from step 2) and register it with the
- *     dependency injection container.
- *     Example: `context.register(MyCustomElementDomRendererExtension);`
- *     As seen with `ShapeDomRendererExtension` being registered in `blocksuite/affine/gfx/shape/src/view.ts`.
- *
- * 4.  **Core Infrastructure (Provided by DomRenderer System)**:
- *     -   `DomElementRenderer` (type): The function signature for renderers, defined in
- *         `blocksuite/affine/blocks/surface/src/renderer/dom-elements/index.ts`.
- *     -   `DomElementRendererIdentifier` (function): Creates unique service identifiers for DI,
- *         used by `DomRenderer` to look up specific renderers. Defined in the same file.
- *     -   `DomElementRendererExtension` (factory): A helper to create extension objects for easy registration.
- *         (e.g., from `@blocksuite/affine-block-surface` or its source).
- *     -   `DomRenderer._renderElement()`: This method automatically looks up the registered renderer using
- *         `DomElementRendererIdentifier(elementType)` and calls it if found.
- *
- * 5.  **Ensure Exports**:
- *     -   The `DomRenderer` class itself should be accessible (e.g., exported from `@blocksuite/affine/blocks/surface`).
- *     -   The `DomElementRendererExtension` factory should be accessible.
- *
- * By following these steps, `DomRenderer` will automatically pick up and use your custom rendering logic
- * when it encounters elements of 'my-custom-element' type.
- */
 export class DomRenderer {
   private _container!: HTMLElement;
 

blocksuite/affine/blocks/surface/src/renderer/tool-overlay.ts

@@ -26,7 +26,7 @@ export class ToolOverlay extends Overlay {
       this.gfx.viewport.viewportUpdated.pipe(startWith(null)).subscribe(() => {
         // when viewport is updated, we should keep the overlay in the same position
         // to get last mouse position and convert it to model coordinates
-        const pos = this.gfx.tool.lastMousePos$.value;
+        const pos = this.gfx.tool.lastMouseViewPos$.value;
         const [x, y] = this.gfx.viewport.toModelCoord(pos.x, pos.y);
         this.x = x;
         this.y = y;

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

@@ -28,7 +28,6 @@ export const SurfaceBlockSchema = defineBlockSchema({
       'affine:attachment',
       'affine:embed-*',
       'affine:edgeless-text',
-      'affine:code',
     ],
   },
   transformer: transformerConfigs =>

blocksuite/affine/blocks/surface/src/tool/default-tool.ts

@@ -26,9 +26,7 @@ export enum DefaultModeDragType {
 export class DefaultTool extends BaseTool {
   static override toolName: string = 'default';
 
-  private _accumulateDelta: IVec = [0, 0];
-
-  private _autoPanTimer: number | null = null;
+  private _edgeScrollingTimer: number | null = null;
 
   private readonly _clearDisposable = () => {
     if (this._disposables) {
@@ -38,19 +36,17 @@ export class DefaultTool extends BaseTool {
   };
 
   private readonly _clearSelectingState = () => {
-    this._stopAutoPanning();
+    this._stopEdgeScrolling();
     this._clearDisposable();
   };
 
   private _disposables: DisposableGroup | null = null;
 
-  private _panViewport(delta: IVec) {
-    this._accumulateDelta[0] += delta[0];
-    this._accumulateDelta[1] += delta[1];
+  private _scrollViewport(delta: IVec) {
     this.gfx.viewport.applyDeltaCenter(delta[0], delta[1]);
   }
 
-  private _selectionRectTransition: null | {
+  private _spaceTranslationRect: null | {
     w: number;
     h: number;
     startX: number;
@@ -59,61 +55,43 @@ export class DefaultTool extends BaseTool {
     endY: number;
   } = null;
 
-  private readonly _startAutoPanning = (delta: IVec) => {
-    this._panViewport(delta);
-    this._updateSelectingState(delta);
-    this._stopAutoPanning();
+  private readonly _enableEdgeScrolling = (delta: IVec) => {
+    this._stopEdgeScrolling();
+    this._scrollViewport(delta);
 
-    this._autoPanTimer = window.setInterval(() => {
-      this._panViewport(delta);
-      this._updateSelectingState(delta);
+    this._edgeScrollingTimer = window.setInterval(() => {
+      this._scrollViewport(delta);
     }, 30);
   };
 
-  private readonly _stopAutoPanning = () => {
-    if (this._autoPanTimer) {
-      clearTimeout(this._autoPanTimer);
-      this._autoPanTimer = null;
+  private readonly _stopEdgeScrolling = () => {
+    if (this._edgeScrollingTimer) {
+      clearInterval(this._edgeScrollingTimer);
+      this._edgeScrollingTimer = null;
     }
   };
 
   private _toBeMoved: GfxModel[] = [];
 
-  private readonly _updateSelectingState = (delta: IVec = [0, 0]) => {
+  private readonly _updateSelection = () => {
     const { gfx } = this;
 
-    if (gfx.keyboard.spaceKey$.peek() && this._selectionRectTransition) {
-      /* Move the selection if space is pressed */
-      const curDraggingViewArea = this.controller.draggingViewArea$.peek();
-      const { w, h, startX, startY, endX, endY } =
-        this._selectionRectTransition;
-      const { endX: lastX, endY: lastY } = curDraggingViewArea;
+    if (gfx.keyboard.spaceKey$.peek() && this._spaceTranslationRect) {
+      const { w, h, startX, startY, endX, endY } = this._spaceTranslationRect;
+      const { endX: lastX, endY: lastY } = this.controller.draggingArea$.peek();
 
-      const dx = lastX + delta[0] - endX + this._accumulateDelta[0];
-      const dy = lastY + delta[1] - endY + this._accumulateDelta[1];
+      const dx = lastX - endX;
+      const dy = lastY - endY;
 
-      this.controller.draggingViewArea$.value = {
-        ...curDraggingViewArea,
+      this.controller.draggingArea$.value = {
         x: Math.min(startX + dx, lastX),
         y: Math.min(startY + dy, lastY),
         w,
         h,
         startX: startX + dx,
         startY: startY + dy,
-      };
-    } else {
-      const curDraggingArea = this.controller.draggingViewArea$.peek();
-      const newStartX = curDraggingArea.startX - delta[0];
-      const newStartY = curDraggingArea.startY - delta[1];
-
-      this.controller.draggingViewArea$.value = {
-        ...curDraggingArea,
-        startX: newStartX,
-        startY: newStartY,
-        x: Math.min(newStartX, curDraggingArea.endX),
-        y: Math.min(newStartY, curDraggingArea.endY),
-        w: Math.abs(curDraggingArea.endX - newStartX),
-        h: Math.abs(curDraggingArea.endY - newStartY),
+        endX: endX + dx,
+        endY: endY + dy,
       };
     }
 
@@ -174,7 +152,7 @@ export class DefaultTool extends BaseTool {
   }
 
   private _determineDragType(evt: PointerEventState): DefaultModeDragType {
-    const { x, y } = this.controller.lastMouseModelPos$.peek();
+    const { x, y } = this.controller.lastMousePos$.peek();
     if (this.selection.isInSelectedRect(x, y)) {
       if (this.selection.selectedElements.length === 1) {
         const currentHoveredElem = this._getElementInGroup(x, y);
@@ -243,10 +221,9 @@ export class DefaultTool extends BaseTool {
         this.gfx.viewport.viewportUpdated.subscribe(() => {
           if (
             this.dragType === DefaultModeDragType.Selecting &&
-            this.controller.dragging$.peek() &&
-            !this._autoPanTimer
+            this.controller.dragging$.peek()
           ) {
-            this._updateSelectingState();
+            this._updateSelection();
           }
         })
       );
@@ -280,9 +257,8 @@ export class DefaultTool extends BaseTool {
   }
 
   override deactivate() {
-    this._stopAutoPanning();
+    this._stopEdgeScrolling();
     this._clearDisposable();
-    this._accumulateDelta = [0, 0];
   }
 
   override doubleClick(e: PointerEventState) {
@@ -323,13 +299,12 @@ export class DefaultTool extends BaseTool {
     switch (this.dragType) {
       case DefaultModeDragType.Selecting: {
         // Record the last drag pointer position for auto panning and view port updating
-
-        this._updateSelectingState();
+        this._updateSelection();
         const moveDelta = calPanDelta(viewport, e);
         if (moveDelta) {
-          this._startAutoPanning(moveDelta);
+          this._enableEdgeScrolling(moveDelta);
         } else {
-          this._stopAutoPanning();
+          this._stopEdgeScrolling();
         }
         break;
       }
@@ -385,18 +360,11 @@ export class DefaultTool extends BaseTool {
         const pressed = this.gfx.keyboard.spaceKey$.value;
 
         if (pressed) {
-          const currentDraggingArea = this.controller.draggingViewArea$.peek();
+          const currentDraggingArea = this.controller.draggingArea$.peek();
 
-          this._selectionRectTransition = {
-            w: currentDraggingArea.w,
-            h: currentDraggingArea.h,
-            startX: currentDraggingArea.startX,
-            startY: currentDraggingArea.startY,
-            endX: currentDraggingArea.endX,
-            endY: currentDraggingArea.endY,
-          };
+          this._spaceTranslationRect = currentDraggingArea;
         } else {
-          this._selectionRectTransition = null;
+          this._spaceTranslationRect = null;
         }
       })
     );

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

@@ -7,6 +7,7 @@ import { literal } from 'lit/static-html.js';
 
 import { effects } from './effects';
 import {
+  ConnectorDomRendererExtension,
   EdgelessCRUDExtension,
   EdgelessLegacySlotExtension,
   EditPropsMiddlewareBuilder,
@@ -26,6 +27,7 @@ export class SurfaceViewExtension extends ViewExtensionProvider {
     super.setup(context);
     context.register([
       FlavourExtension('affine:surface'),
+      ConnectorDomRendererExtension,
       EdgelessCRUDExtension,
       EdgelessLegacySlotExtension,
       ExportManagerExtension,

blocksuite/affine/blocks/table/src/table-cell.ts

@@ -745,7 +745,7 @@ export class TableCell extends SignalWatcher(
             padding: '8px 12px',
           })}
           .yText="${this.text}"
-          .inlineEventSource="${this.topContenteditableElement}"
+          .inlineEventSource="${this.topContenteditableElement ?? nothing}"
           .attributesSchema="${this.inlineManager?.getSchema()}"
           .attributeRenderer="${this.inlineManager?.getRenderer()}"
           .embedChecker="${this.inlineManager?.embedChecker}"

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

@@ -20,7 +20,7 @@ export type StateKind =
 export type StateInfo = {
   icon: TemplateResult;
   title?: string;
-  description?: string;
+  description?: string | null;
 };
 
 export type ResolvedStateInfoPart = {

blocksuite/affine/components/src/toggle-switch/index.ts

@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -18,8 +19,7 @@ const styles = css`
     text-indent: -9999px;
     width: 38px;
     height: 20px;
-    background: var(--affine-icon-color);
-    border: 1px solid var(--affine-black-10);
+    background: ${unsafeCSSVarV2('toggle/backgroundOff')};
     display: block;
     border-radius: 20px;
     position: relative;
@@ -28,22 +28,21 @@ const styles = css`
   label:after {
     content: '';
     position: absolute;
-    top: 1px;
-    left: 1px;
+    top: 2px;
+    left: 2px;
     width: 16px;
     height: 16px;
-    background: var(--affine-white);
-    border: 1px solid var(--affine-black-10);
+    background: ${unsafeCSSVarV2('toggle/foreground')};
     border-radius: 16px;
     transition: 0.1s;
   }
 
   label.on {
-    background: var(--affine-primary-color);
+    background: ${unsafeCSSVarV2('toggle/background')};
   }
 
   label.on:after {
-    left: calc(100% - 1px);
+    left: calc(100% - 2px);
     transform: translateX(-100%);
   }
 

blocksuite/affine/data-view/src/view-presets/table/pc-virtual/row/row-header-css.ts

@@ -39,6 +39,9 @@ export const dragHandlerIndicator = css({
   backgroundColor: 'var(--affine-placeholder-color)',
 });
 
+export const show = css({
+  opacity: '1 !important',
+});
 export const rowSelectCheckbox = css({
   display: 'flex',
   alignItems: 'center',
@@ -47,7 +50,3 @@ export const rowSelectCheckbox = css({
   fontSize: '20px',
   color: cssVarV2.icon.primary,
 });
-
-export const show = css({
-  opacity: 1,
-});

blocksuite/affine/fragments/adapter-panel/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@blocksuite/affine-fragment-adapter-panel",
+  "description": "Adapter panel fragment for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.12",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.13",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.14",
+    "lit": "^3.2.0",
+    "rxjs": "^7.8.1"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./view": "./src/view.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.21.0"
+}

blocksuite/affine/fragments/adapter-panel/src/adapter-panel.ts

@@ -0,0 +1,177 @@
+import type { Store, TransformerMiddleware } from '@blocksuite/affine/store';
+import {
+  type HtmlAdapter,
+  HtmlAdapterFactoryIdentifier,
+  type MarkdownAdapter,
+  MarkdownAdapterFactoryIdentifier,
+  type PlainTextAdapter,
+  PlainTextAdapterFactoryIdentifier,
+} from '@blocksuite/affine-shared/adapters';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+import { provide } from '@lit/context';
+import { effect, signal } from '@preact/signals-core';
+import { baseTheme } from '@toeverything/theme';
+import { css, html, LitElement, type PropertyValues, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import {
+  type AdapterPanelContext,
+  adapterPanelContext,
+  ADAPTERS,
+} from './config';
+
+export const AFFINE_ADAPTER_PANEL = 'affine-adapter-panel';
+
+export class AdapterPanel extends SignalWatcher(WithDisposable(LitElement)) {
+  static override styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+    }
+
+    .adapters-container {
+      width: 100%;
+      height: 100%;
+      background-color: var(--affine-background-primary-color);
+      box-sizing: border-box;
+      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
+    }
+  `;
+
+  get activeAdapter() {
+    return this._context.activeAdapter$.value;
+  }
+
+  private _createJob() {
+    return this.store.getTransformer(this.transformerMiddlewares);
+  }
+
+  private _getDocSnapshot() {
+    const job = this._createJob();
+    const result = job.docToSnapshot(this.store);
+    return result;
+  }
+
+  private async _getHtmlContent() {
+    try {
+      const job = this._createJob();
+      const htmlAdapterFactory = this.store.get(HtmlAdapterFactoryIdentifier);
+      const htmlAdapter = htmlAdapterFactory.get(job) as HtmlAdapter;
+      const result = await htmlAdapter.fromDoc(this.store);
+      return result?.file;
+    } catch (error) {
+      console.error('Failed to get html content', error);
+      return '';
+    }
+  }
+
+  private async _getMarkdownContent() {
+    try {
+      const job = this._createJob();
+      const markdownAdapterFactory = this.store.get(
+        MarkdownAdapterFactoryIdentifier
+      );
+      const markdownAdapter = markdownAdapterFactory.get(
+        job
+      ) as MarkdownAdapter;
+      const result = await markdownAdapter.fromDoc(this.store);
+      return result?.file;
+    } catch (error) {
+      console.error('Failed to get markdown content', error);
+      return '';
+    }
+  }
+
+  private async _getPlainTextContent() {
+    try {
+      const job = this._createJob();
+      const plainTextAdapterFactory = this.store.get(
+        PlainTextAdapterFactoryIdentifier
+      );
+      const plainTextAdapter = plainTextAdapterFactory.get(
+        job
+      ) as PlainTextAdapter;
+      const result = await plainTextAdapter.fromDoc(this.store);
+      return result?.file;
+    } catch (error) {
+      console.error('Failed to get plain text content', error);
+      return '';
+    }
+  }
+
+  private readonly _updateActiveContent = async () => {
+    const activeId = this.activeAdapter.id;
+    switch (activeId) {
+      case 'markdown':
+        this._context.markdownContent$.value =
+          (await this._getMarkdownContent()) || '';
+        break;
+      case 'html':
+        this._context.htmlContent$.value = (await this._getHtmlContent()) || '';
+        break;
+      case 'plaintext':
+        this._context.plainTextContent$.value =
+          (await this._getPlainTextContent()) || '';
+        break;
+      case 'snapshot':
+        this._context.docSnapshot$.value = this._getDocSnapshot() || null;
+        break;
+    }
+  };
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._context = {
+      activeAdapter$: signal(ADAPTERS[0]),
+      isHtmlPreview$: signal(false),
+      docSnapshot$: signal(null),
+      htmlContent$: signal(''),
+      markdownContent$: signal(''),
+      plainTextContent$: signal(''),
+    };
+  }
+
+  override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('store')) {
+      this._updateActiveContent().catch(console.error);
+    }
+  }
+
+  override firstUpdated() {
+    this.disposables.add(
+      effect(() => {
+        if (this.activeAdapter) {
+          this._updateActiveContent().catch(console.error);
+        }
+      })
+    );
+  }
+
+  override render() {
+    return html`
+      <div class="adapters-container">
+        <affine-adapter-panel-header
+          .updateActiveContent=${this._updateActiveContent}
+        ></affine-adapter-panel-header>
+        <affine-adapter-panel-body></affine-adapter-panel-body>
+      </div>
+    `;
+  }
+
+  @property({ attribute: false })
+  accessor store!: Store;
+
+  @property({ attribute: false })
+  accessor transformerMiddlewares: TransformerMiddleware[] = [];
+
+  @provide({ context: adapterPanelContext })
+  private accessor _context!: AdapterPanelContext;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [AFFINE_ADAPTER_PANEL]: AdapterPanel;
+  }
+}

blocksuite/affine/fragments/adapter-panel/src/body/adapter-panel-body.ts

@@ -0,0 +1,216 @@
+import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { SignalWatcher } from '@blocksuite/global/lit';
+import { consume } from '@lit/context';
+import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+
+import {
+  type AdapterItem,
+  type AdapterPanelContext,
+  adapterPanelContext,
+  ADAPTERS,
+} from '../config';
+
+export const AFFINE_ADAPTER_PANEL_BODY = 'affine-adapter-panel-body';
+
+export class AdapterPanelBody extends SignalWatcher(LitElement) {
+  static override styles = css`
+    .adapter-panel-body {
+      width: 100%;
+      height: calc(100% - 50px);
+      box-sizing: border-box;
+      overflow: auto;
+      padding: 8px 16px;
+    }
+
+    ${scrollbarStyle('.adapter-panel-body')}
+
+    .adapter-content {
+      width: 100%;
+      height: 100%;
+      white-space: pre-wrap;
+      color: var(--affine-text-primary-color);
+      font-size: var(--affine-font-sm);
+      box-sizing: border-box;
+    }
+
+    .html-content {
+      display: flex;
+      gap: 8px;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    .html-preview-container,
+    .html-panel-content {
+      width: 100%;
+      flex: 1 0 0;
+      border: none;
+      box-sizing: border-box;
+      color: var(--affine-text-primary-color);
+      overflow: auto;
+    }
+
+    ${scrollbarStyle('.html-panel-content')}
+
+    .html-panel-footer {
+      width: 100%;
+      height: 24px;
+      display: flex;
+    }
+
+    .html-toggle-container {
+      display: flex;
+      background: ${unsafeCSSVarV2('segment/background')};
+      justify-content: flex-start;
+      padding: 2px;
+      border-radius: 4px;
+    }
+
+    .html-toggle-item {
+      cursor: pointer;
+      display: flex;
+      padding: 0px 4px;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 20px;
+      border-radius: 4px;
+      color: ${unsafeCSSVarV2('text/primary')};
+    }
+
+    .html-toggle-item:hover {
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
+    }
+
+    .html-toggle-item[active] {
+      background: ${unsafeCSSVarV2('segment/button')};
+      box-shadow:
+        var(--Shadow-buttonShadow-1-x, 0px) var(--Shadow-buttonShadow-1-y, 0px)
+          var(--Shadow-buttonShadow-1-blur, 1px) 0px
+          var(--Shadow-buttonShadow-1-color, rgba(0, 0, 0, 0.12)),
+        var(--Shadow-buttonShadow-2-x, 0px) var(--Shadow-buttonShadow-2-y, 1px)
+          var(--Shadow-buttonShadow-2-blur, 5px) 0px
+          var(--Shadow-buttonShadow-2-color, rgba(0, 0, 0, 0.12));
+    }
+
+    .adapter-container {
+      display: none;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+    }
+
+    .adapter-container.active {
+      display: block;
+    }
+  `;
+
+  get activeAdapter() {
+    return this._context.activeAdapter$.value;
+  }
+
+  get isHtmlPreview() {
+    return this._context.isHtmlPreview$.value;
+  }
+
+  get htmlContent() {
+    return this._context.htmlContent$.value;
+  }
+
+  get markdownContent() {
+    return this._context.markdownContent$.value;
+  }
+
+  get plainTextContent() {
+    return this._context.plainTextContent$.value;
+  }
+
+  get docSnapshot() {
+    return this._context.docSnapshot$.value;
+  }
+
+  private _renderHtmlPanel() {
+    return html`
+      ${this.isHtmlPreview
+        ? html`<iframe
+            class="html-preview-container"
+            .srcdoc=${this.htmlContent}
+            sandbox="allow-same-origin"
+          ></iframe>`
+        : html`<div class="html-panel-content">${this.htmlContent}</div>`}
+      <div class="html-panel-footer">
+        <div class="html-toggle-container">
+          <span
+            class="html-toggle-item"
+            ?active=${!this.isHtmlPreview}
+            @click=${() => (this._context.isHtmlPreview$.value = false)}
+            >Source</span
+          >
+          <span
+            class="html-toggle-item"
+            ?active=${this.isHtmlPreview}
+            @click=${() => (this._context.isHtmlPreview$.value = true)}
+            >Preview</span
+          >
+        </div>
+      </div>
+    `;
+  }
+
+  private readonly _renderAdapterContent = (adapter: AdapterItem) => {
+    switch (adapter.id) {
+      case 'html':
+        return this._renderHtmlPanel();
+      case 'markdown':
+        return this.markdownContent;
+      case 'plaintext':
+        return this.plainTextContent;
+      case 'snapshot':
+        return this.docSnapshot
+          ? JSON.stringify(this.docSnapshot, null, 4)
+          : '';
+      default:
+        return '';
+    }
+  };
+
+  private readonly _renderAdapterContainer = (adapter: AdapterItem) => {
+    const containerClasses = classMap({
+      'adapter-container': true,
+      active: this.activeAdapter.id === adapter.id,
+    });
+
+    const contentClasses = classMap({
+      'adapter-content': true,
+      [`${adapter.id}-content`]: true,
+    });
+
+    const content = this._renderAdapterContent(adapter);
+
+    return html`
+      <div class=${containerClasses}>
+        <div class=${contentClasses}>${content}</div>
+      </div>
+    `;
+  };
+
+  override render() {
+    return html`
+      <div class="adapter-panel-body">
+        ${ADAPTERS.map(adapter => this._renderAdapterContainer(adapter))}
+      </div>
+    `;
+  }
+
+  @consume({ context: adapterPanelContext })
+  private accessor _context!: AdapterPanelContext;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [AFFINE_ADAPTER_PANEL_BODY]: AdapterPanelBody;
+  }
+}

blocksuite/affine/fragments/adapter-panel/src/config.ts

@@ -0,0 +1,28 @@
+import type { DocSnapshot } from '@blocksuite/store';
+import { createContext } from '@lit/context';
+import type { Signal } from '@preact/signals-core';
+
+export type AdapterItem = {
+  id: string;
+  label: string;
+};
+
+export const ADAPTERS: AdapterItem[] = [
+  { id: 'markdown', label: 'Markdown' },
+  { id: 'plaintext', label: 'PlainText' },
+  { id: 'html', label: 'HTML' },
+  { id: 'snapshot', label: 'Snapshot' },
+];
+
+export type AdapterPanelContext = {
+  activeAdapter$: Signal<AdapterItem>;
+  isHtmlPreview$: Signal<boolean>;
+  docSnapshot$: Signal<DocSnapshot | null>;
+  htmlContent$: Signal<string>;
+  markdownContent$: Signal<string>;
+  plainTextContent$: Signal<string>;
+};
+
+export const adapterPanelContext = createContext<AdapterPanelContext>(
+  'adapterPanelContext'
+);

blocksuite/affine/fragments/adapter-panel/src/effects.ts

@@ -0,0 +1,17 @@
+import { AdapterPanel, AFFINE_ADAPTER_PANEL } from './adapter-panel';
+import {
+  AdapterPanelBody,
+  AFFINE_ADAPTER_PANEL_BODY,
+} from './body/adapter-panel-body';
+import { AdapterMenu, AFFINE_ADAPTER_MENU } from './header/adapter-menu';
+import {
+  AdapterPanelHeader,
+  AFFINE_ADAPTER_PANEL_HEADER,
+} from './header/adapter-panel-header';
+
+export function effects() {
+  customElements.define(AFFINE_ADAPTER_PANEL, AdapterPanel);
+  customElements.define(AFFINE_ADAPTER_MENU, AdapterMenu);
+  customElements.define(AFFINE_ADAPTER_PANEL_HEADER, AdapterPanelHeader);
+  customElements.define(AFFINE_ADAPTER_PANEL_BODY, AdapterPanelBody);
+}

blocksuite/affine/fragments/adapter-panel/src/header/adapter-menu.ts

@@ -0,0 +1,86 @@
+import { SignalWatcher } from '@blocksuite/global/lit';
+import { consume } from '@lit/context';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import {
+  type AdapterItem,
+  type AdapterPanelContext,
+  adapterPanelContext,
+  ADAPTERS,
+} from '../config';
+
+export const AFFINE_ADAPTER_MENU = 'affine-adapter-menu';
+
+export class AdapterMenu extends SignalWatcher(LitElement) {
+  static override styles = css`
+    .adapter-menu {
+      min-width: 120px;
+      padding: 4px;
+      background: var(--affine-background-primary-color);
+      border: 1px solid var(--affine-border-color);
+      border-radius: 4px;
+      box-shadow: var(--affine-shadow-1);
+    }
+    .adapter-menu-item {
+      display: block;
+      width: 100%;
+      padding: 6px 8px;
+      border: none;
+      background: none;
+      text-align: left;
+      cursor: pointer;
+      color: var(--affine-text-primary-color);
+      font-family: var(--affine-font-family);
+      font-size: var(--affine-font-xs);
+      border-radius: 4px;
+    }
+    .adapter-menu-item:hover {
+      background: var(--affine-hover-color);
+    }
+    .adapter-menu-item.active {
+      color: var(--affine-primary-color);
+      background: var(--affine-hover-color);
+    }
+  `;
+
+  get activeAdapter() {
+    return this._context.activeAdapter$.value;
+  }
+
+  private readonly _handleAdapterChange = async (adapter: AdapterItem) => {
+    this._context.activeAdapter$.value = adapter;
+    this.abortController?.abort();
+  };
+
+  override render() {
+    return html`<div class="adapter-menu">
+      ${ADAPTERS.map(adapter => {
+        const classes = classMap({
+          'adapter-menu-item': true,
+          active: this.activeAdapter.id === adapter.id,
+        });
+        return html`
+          <button
+            class=${classes}
+            @click=${() => this._handleAdapterChange(adapter)}
+          >
+            ${adapter.label}
+          </button>
+        `;
+      })}
+    </div>`;
+  }
+
+  @property({ attribute: false })
+  accessor abortController: AbortController | null = null;
+
+  @consume({ context: adapterPanelContext })
+  private accessor _context!: AdapterPanelContext;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    [AFFINE_ADAPTER_MENU]: AdapterMenu;
+  }
+}

blocksuite/affine/fragments/adapter-panel/src/header/adapter-panel-header.ts

@@ -0,0 +1,119 @@
+import { createLitPortal } from '@blocksuite/affine-components/portal';
+import { SignalWatcher } from '@blocksuite/global/lit';
+import { ArrowDownSmallIcon, FlipDirectionIcon } from '@blocksuite/icons/lit';
+import { flip, offset } from '@floating-ui/dom';
+import { consume } from '@lit/context';
+import { css, html, LitElement } from 'lit';
+import { property, query } from 'lit/decorators.js';
+
+import { type AdapterPanelContext, adapterPanelContext } from '../config';
+
+export const AFFINE_ADAPTER_PANEL_HEADER = 'affine-adapter-panel-header';
+
+export class AdapterPanelHeader extends SignalWatcher(LitElement) {
+  static override styles = css`
+    .adapter-panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: var(--affine-background-primary-color);
+    }
+    .adapter-selector {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100px;
+      cursor: pointer;
+      border-radius: 4px;
+      border: 1px solid var(--affine-border-color);
+      padding: 4px 8px;
+    }
+    .adapter-selector:hover {
+      background: var(--affine-hover-color);
+    }
+    .adapter-selector-label {
+      display: flex;
+      align-items: center;
+      color: var(--affine-text-primary-color);
+      font-size: var(--affine-font-xs);
+    }
+    .update-button {
+      height: 20px;
+      width: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      cursor: pointer;
+      color: var(--affine-icon-color);
+    }
+    .update-button:hover {
+      background-color: var(--affine-hover-color);
+    }
+  `;
+
+  get activeAdapter() {
+    return this._context.activeAdapter$.value;
+  }
+
+  private _adapterMenuAbortController: AbortController | null = null;
+  private readonly _toggleAdapterMenu = () => {
+    if (this._adapterMenuAbortController) {
+      this._adapterMenuAbortController.abort();
+    }
+    this._adapterMenuAbortController = new AbortController();
+
+    createLitPortal({
+      template: html`<affine-adapter-menu
+        .abortController=${this._adapterMenuAbortController}
+      ></affine-adapter-menu>`,
+      portalStyles: {
+        zIndex: 'var(--affine-z-index-popover)',
+      },
+      container: this._adapterPanelHeader,
+      computePosition: {
+        referenceElement: this._adapterSelector,
+        placement: 'bottom-start',
+        middleware: [flip(), offset(4)],
+        autoUpdate: { animationFrame: true },
+      },
+      abortController: this._adapterMenuAbortController,
+      closeOnClickAway: true,
+    });
+  };
+
+  override render() {
+    return html`
+      <div class="adapter-panel-header">
+        <div class="adapter-selector" @click="${this._toggleAdapterMenu}">
+          <span class="adapter-selector-label">
+            ${this.activeAdapter.label}
+          </span>
+          ${ArrowDownSmallIcon({ width: '16px', height: '16px' })}
+        </div>
+        <div class="update-button" @click="${this.updateActiveContent}">
+          ${FlipDirectionIcon({ width: '16px', height: '16px' })}
+        </div>
+      </div>
+    `;
+  }
+
+  @query('.adapter-panel-header')
+  private accessor _adapterPanelHeader!: HTMLDivElement;
+
+  @query('.adapter-selector')
+  private accessor _adapterSelector!: HTMLDivElement;
+
+  @property({ attribute: false })
+  accessor updateActiveContent: () => void = () => {};
+
+  @consume({ context: adapterPanelContext })
+  private accessor _context!: AdapterPanelContext;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    [AFFINE_ADAPTER_PANEL_HEADER]: AdapterPanelHeader;
+  }
+}

blocksuite/affine/fragments/adapter-panel/src/index.ts

@@ -0,0 +1,4 @@
+export * from './adapter-panel.js';
+export * from './body/adapter-panel-body.js';
+export * from './header/adapter-menu.js';
+export * from './header/adapter-panel-header.js';

blocksuite/affine/fragments/adapter-panel/src/view.ts

@@ -0,0 +1,12 @@
+import { ViewExtensionProvider } from '@blocksuite/affine-ext-loader';
+
+import { effects } from './effects';
+
+export class AdapterPanelViewExtension extends ViewExtensionProvider {
+  override name = 'affine-adapter-panel-fragment';
+
+  override effect() {
+    super.effect();
+    effects();
+  }
+}

blocksuite/affine/fragments/adapter-panel/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../components" },
+    { "path": "../../ext-loader" },
+    { "path": "../../model" },
+    { "path": "../../shared" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/std" },
+    { "path": "../../../framework/store" }
+  ]
+}

blocksuite/affine/fragments/frame-panel/src/header/frames-setting-menu.ts

@@ -138,7 +138,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
         <div class="action-label">Fill Screen</div>
         <div class="toggle-button">
           <toggle-switch
-            .subscribe=${this.fillScreen}
+            .on=${this.fillScreen}
             .onChange=${this._onFillScreenChange}
           ></toggle-switch>
         </div>
@@ -153,7 +153,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
         <div class="action-label">Dark background</div>
         <div class="toggle-button">
           <toggle-switch
-            .subscribe=${this.blackBackground}
+            .on=${this.blackBackground}
             .onChange=${this._onBlackBackgroundChange}
           ></toggle-switch>
         </div>
@@ -162,7 +162,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
         <div class="action-label">Hide toolbar</div>
         <div class="toggle-button">
           <toggle-switch
-            .subscribe=${this.hideToolbar}
+            .on=${this.hideToolbar}
             .onChange=${this._onHideToolBarChange}
           ></toggle-switch>
         </div>

blocksuite/affine/fragments/outline/src/body/outline-notice.ts

@@ -7,7 +7,7 @@ import { effect, signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
 
 import { type TocContext, tocContext } from '../config';
-import { getNotesFromDoc } from '../utils/query';
+import { getNotesFromStore } from '../utils/query';
 import * as styles from './outline-notice.css';
 
 export const AFFINE_OUTLINE_NOTICE = 'affine-outline-notice';
@@ -31,7 +31,7 @@ export class OutlineNotice extends SignalWatcher(
         }
 
         const shouldShowNotice =
-          getNotesFromDoc(this._context.editor$.value.store, [
+          getNotesFromStore(this._context.editor$.value.store, [
             NoteDisplayMode.DocOnly,
           ]).length > 0;
 

blocksuite/affine/fragments/outline/src/body/outline-panel-body.ts

@@ -35,7 +35,7 @@ import type {
 import type { NoteCardEntity, NoteDropPayload } from '../utils/drag';
 import {
   getHeadingBlocksFromDoc,
-  getNotesFromDoc,
+  getNotesFromStore,
   isHeadingBlock,
 } from '../utils/query';
 import {
@@ -91,7 +91,7 @@ export class OutlinePanelBody extends SignalWatcher(
     return this._context.editor$.value;
   }
 
-  private get doc() {
+  private get store() {
     return this.editor.store;
   }
 
@@ -154,11 +154,11 @@ export class OutlinePanelBody extends SignalWatcher(
   }
 
   private _moveSelectedNotes(insertIndex: number) {
-    if (!this.doc.root) return;
+    if (!this.store.root) return;
 
     const pageVisibleNotes = this._pageVisibleNotes$.peek();
     const selected = this._allSelectedNotes$.peek();
-    const children = this.doc.root.children.slice();
+    const children = this.store.root.children.slice();
 
     const noteIndex = new Map<NoteBlockModel, number>();
     children.forEach((block, index) => {
@@ -189,14 +189,14 @@ export class OutlinePanelBody extends SignalWatcher(
 
     const newChildren = [...leftPart, ...selected, ...rightPart];
 
-    this.doc.updateBlock(this.doc.root, {
+    this.store.updateBlock(this.store.root, {
       children: newChildren,
     });
   }
 
   private async _scrollToBlock(blockId: string) {
     // if focus title
-    if (blockId === this.doc.root?.id) {
+    if (blockId === this.store.root?.id) {
       this.editor.std.selection.setGroup('note', []);
       this.editor.std.event.active = false;
       focusTitle(this.editor);
@@ -221,7 +221,7 @@ export class OutlinePanelBody extends SignalWatcher(
     const { selected, id, multiselect } = e.detail;
     const gfx = this.editor.std.get(GfxControllerIdentifier);
     const editorMode = this.editor.std.get(DocModeProvider).getEditorMode();
-    const note = this.doc.getBlock(id)?.model;
+    const note = this.store.getBlock(id)?.model;
     if (!note || !matchModels(note, [NoteBlockModel])) return;
 
     // map from signal to value
@@ -302,12 +302,12 @@ export class OutlinePanelBody extends SignalWatcher(
           return hasHeadings || this._context.enableSorting$.value;
         };
 
-        this._pageVisibleNotes$.value = getNotesFromDoc(this.doc, [
+        this._pageVisibleNotes$.value = getNotesFromStore(this.store, [
           NoteDisplayMode.DocAndEdgeless,
           NoteDisplayMode.DocOnly,
         ]).filter(isRenderableNote);
 
-        this._edgelessOnlyNotes$.value = getNotesFromDoc(this.doc, [
+        this._edgelessOnlyNotes$.value = getNotesFromStore(this.store, [
           NoteDisplayMode.EdgelessOnly,
         ]).filter(isRenderableNote);
       })
@@ -379,23 +379,23 @@ export class OutlinePanelBody extends SignalWatcher(
   }
 
   private _renderDocTitle() {
-    if (!this.doc.root) return nothing;
+    if (!this.store.root) return nothing;
 
     const hasNotEmptyHeadings =
       getHeadingBlocksFromDoc(
-        this.doc,
+        this.store,
         [NoteDisplayMode.DocOnly, NoteDisplayMode.DocAndEdgeless],
         true
       ).length > 0;
 
     if (!hasNotEmptyHeadings) return nothing;
 
-    const rootId = this.doc.root.id;
+    const rootId = this.store.root.id;
     const active = rootId === this._activeHeadingId$.value;
 
     return html`<affine-outline-block-preview
       class=${classMap({ active: active })}
-      .block=${this.doc.root}
+      .block=${this.store.root}
       @click=${() => {
         this._scrollToBlock(rootId).catch(console.error);
       }}

blocksuite/affine/fragments/outline/src/header/outline-setting-menu.ts

@@ -26,7 +26,7 @@ export class OutlineNotePreviewSettingMenu extends SignalWatcher(
         <div class=${styles.actionLabel}>Show type icon</div>
         <div class=${styles.toggleButton}>
           <toggle-switch
-            .subscribe=${showPreviewIcon}
+            .on=${showPreviewIcon}
             .onChange=${() => {
               this._context.showIcons$.value = !showPreviewIcon;
             }}

blocksuite/affine/fragments/outline/src/outline-viewer.ts

@@ -200,6 +200,7 @@ export class OutlineViewer extends SignalWatcher(
       )
     );
 
+    // title update
     this.disposables.add(
       this.editor.store.workspace.meta.docMetaUpdated.subscribe(() => {
         this.requestUpdate();

blocksuite/affine/fragments/outline/src/utils/query.ts

@@ -9,15 +9,15 @@ import type { BlockModel, Store } from '@blocksuite/store';
 
 import { headingKeys } from '../config.js';
 
-export function getNotesFromDoc(
-  doc: Store,
+export function getNotesFromStore(
+  store: Store,
   modes: NoteDisplayMode[] = [
     NoteDisplayMode.DocAndEdgeless,
     NoteDisplayMode.DocOnly,
     NoteDisplayMode.EdgelessOnly,
   ]
 ) {
-  const rootModel = doc.root;
+  const rootModel = store.root;
   if (!rootModel) return [];
 
   const notes: NoteBlockModel[] = [];
@@ -59,7 +59,7 @@ export function getHeadingBlocksFromNote(
 }
 
 export function getHeadingBlocksFromDoc(
-  doc: Store,
+  store: Store,
   modes: NoteDisplayMode[] = [
     NoteDisplayMode.DocAndEdgeless,
     NoteDisplayMode.DocOnly,
@@ -67,6 +67,6 @@ export function getHeadingBlocksFromDoc(
   ],
   ignoreEmpty = false
 ) {
-  const notes = getNotesFromDoc(doc, modes);
+  const notes = getNotesFromStore(store, modes);
   return notes.map(note => getHeadingBlocksFromNote(note, ignoreEmpty)).flat();
 }

blocksuite/affine/gfx/brush/src/brush-tool.ts

@@ -1,4 +1,7 @@
-import { CanvasElementType } from '@blocksuite/affine-block-surface';
+import {
+  CanvasElementType,
+  EdgelessCRUDIdentifier,
+} from '@blocksuite/affine-block-surface';
 import type { BrushElementModel } from '@blocksuite/affine-model';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
 import type { IVec } from '@blocksuite/global/gfx';
@@ -118,7 +121,7 @@ export class BrushTool extends BaseTool {
     this._lastPoint = [pointX, pointY];
     this._draggingPathPoints = points;
 
-    this.gfx.updateElement(this._draggingElement!, {
+    this.gfx.updateElement(this._draggingElement, {
       points: this._tryGetPressurePoints(e),
     });
 
@@ -167,6 +170,24 @@ export class BrushTool extends BaseTool {
     this._lastPopLength = 0;
   }
 
+  override click(e: PointerEventState) {
+    this.doc.captureSync();
+
+    const [modelX, modelY] = this.gfx.viewport.toModelCoord(
+      e.point.x,
+      e.point.y
+    );
+
+    const points = this._pressureSupportedPointerIds.has(e.raw.pointerId)
+      ? [[modelX, modelY, e.pressure]]
+      : [[modelX, modelY]];
+
+    const crud = this.std.get(EdgelessCRUDIdentifier);
+    crud.addElement(CanvasElementType.BRUSH, {
+      points,
+    });
+  }
+
   override activate() {
     this.std.getOptional(TelemetryProvider)?.track('EdgelessToolPicked', {
       page: 'whiteboard editor',

blocksuite/affine/gfx/brush/src/toolbar/configs/brush.ts

@@ -68,19 +68,30 @@ export const brushToolbarConfig = {
             resolveColor(color, theme)
           ) ?? resolveColor(DefaultTheme.black, theme);
         const onPick = (e: PickColorEvent) => {
-          if (e.type === 'pick') {
-            const color = e.detail.value;
-            for (const model of models) {
-              const props = packColor(field, color);
-              ctx.std
-                .get(EdgelessCRUDIdentifier)
-                .updateElement(model.id, props);
-            }
-            return;
-          }
-
-          for (const model of models) {
-            model[e.type === 'start' ? 'stash' : 'pop'](field);
+          switch (e.type) {
+            case 'pick':
+              {
+                const color = e.detail.value;
+                const props = packColor(field, color);
+                const crud = ctx.std.get(EdgelessCRUDIdentifier);
+                models.forEach(model => {
+                  crud.updateElement(model.id, props);
+                });
+              }
+              break;
+            case 'start':
+              ctx.store.captureSync();
+              models.forEach(model => {
+                model.stash(field);
+              });
+              break;
+            case 'end':
+              ctx.store.transact(() => {
+                models.forEach(model => {
+                  model.pop(field);
+                });
+              });
+              break;
           }
         };
 

blocksuite/affine/gfx/connector/src/connector-tool.ts

@@ -3,12 +3,10 @@ import {
   DefaultTool,
   OverlayIdentifier,
 } from '@blocksuite/affine-block-surface';
-import type {
-  Connection,
-  ConnectorElementModel,
-  ConnectorMode,
-} from '@blocksuite/affine-model';
 import {
+  type Connection,
+  type ConnectorElementModel,
+  ConnectorMode,
   GroupElementModel,
   ShapeElementModel,
   ShapeType,
@@ -223,4 +221,17 @@ export class ConnectorTool extends BaseTool<ConnectorToolOptions> {
 
     this.findTargetByPoint(point);
   }
+
+  getNextMode() {
+    // reorder the enum values
+    const modes = [
+      ConnectorMode.Curve,
+      ConnectorMode.Orthogonal,
+      ConnectorMode.Straight,
+    ];
+
+    const currentIndex = modes.indexOf(this.activatedOption.mode);
+    const nextIndex = (currentIndex + 1) % modes.length;
+    return modes[nextIndex];
+  }
 }