refactor(core): use Route component

Close [BS-3509](https://linear.app/affine-design/issue/BS-3509/embed拖入note，然后撤销，形成的block刷新后才可选中，且只能进行有限交互)

### Before

https://github.com/user-attachments/assets/4c83f9ba-1a99-427f-824d-7e946e55e737

### After

https://github.com/user-attachments/assets/e6a28478-0af4-4358-a353-e0c2e8edb0f9

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Bug Fixes**
	- Improved block selection reliability after dragging a block into a note and performing an undo action, ensuring the block remains selectable.

- **Tests**
	- Added an end-to-end test to verify block selection after dragging and undo operations in edgeless mode.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

.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

@@ -27,7 +27,6 @@ services:
   # https://manual.manticoresearch.com/Starting_the_server/Docker
   manticoresearch:
     image: manticoresearch/manticore:${MANTICORE_VERSION:-9.2.14}
-    restart: always
     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/.gitignore

@@ -0,0 +1 @@
+.env

.docker/selfhost/compose.yml

@@ -23,6 +23,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
     restart: unless-stopped
 
   affine_migration:
@@ -38,6 +39,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
     depends_on:
       postgres:
         condition: service_healthy
@@ -57,7 +59,7 @@ services:
     restart: unless-stopped
 
   postgres:
-    image: postgres:16
+    image: pgvector/pgvector:pg16
     container_name: affine_postgres
     volumes:
       - ${DB_DATA_LOCATION}:/var/lib/postgresql/data

.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

@@ -582,10 +582,80 @@ jobs:
         ports:
           - 1025:1025
           - 8025:8025
-      manticoresearch:
+      indexer:
         image: manticoresearch/manticore:9.2.14
         ports:
           - 9308:9308
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: ./.github/actions/setup-node
+        with:
+          electron-install: false
+          full-cache: true
+
+      - name: Download server-native.node
+        uses: actions/download-artifact@v4
+        with:
+          name: server-native.node
+          path: ./packages/backend/native
+
+      - name: Prepare Server Test Environment
+        uses: ./.github/actions/server-test-env
+
+      - name: Run server tests
+        run: yarn affine @affine/server test:coverage --forbid-only
+        env:
+          CARGO_TARGET_DIR: '${{ github.workspace }}/target'
+          CI_NODE_INDEX: ${{ matrix.node_index }}
+          CI_NODE_TOTAL: ${{ matrix.total_nodes }}
+
+      - name: Upload server test coverage results
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./packages/backend/server/.coverage/lcov.info
+          flags: server-test
+          name: affine
+          fail_ci_if_error: false
+
+  server-test-elasticsearch:
+    name: Server Test with Elasticsearch
+    runs-on: ubuntu-latest
+    needs:
+      - optimize_ci
+      - build-server-native
+    if: needs.optimize_ci.outputs.skip == 'false'
+    strategy:
+      fail-fast: false
+    env:
+      NODE_ENV: test
+      DATABASE_URL: postgresql://affine:affine@localhost:5432/affine
+      REDIS_SERVER_HOST: localhost
+      AFFINE_INDEXER_SEARCH_PROVIDER: elasticsearch
+      AFFINE_INDEXER_SEARCH_ENDPOINT: http://localhost:9200
+    services:
+      postgres:
+        image: pgvector/pgvector:pg16
+        env:
+          POSTGRES_PASSWORD: affine
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5432:5432
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
+      mailer:
+        image: mailhog/mailhog
+        ports:
+          - 1025:1025
+          - 8025:8025
     steps:
       # https://github.com/elastic/elastic-github-actions/blob/master/elasticsearch/README.md
       - name: Configure sysctl limits for Elasticsearch
@@ -618,8 +688,8 @@ jobs:
       - name: Prepare Server Test Environment
         uses: ./.github/actions/server-test-env
 
-      - name: Run server tests
-        run: yarn affine @affine/server test:coverage --forbid-only
+      - name: Run server tests with elasticsearch only
+        run: yarn affine @affine/server test:coverage "**/*/*elasticsearch.spec.ts" --forbid-only
         env:
           CARGO_TARGET_DIR: '${{ github.workspace }}/target'
           CI_NODE_INDEX: ${{ matrix.node_index }}
@@ -886,6 +956,10 @@ jobs:
         ports:
           - 1025:1025
           - 8025:8025
+      indexer:
+        image: manticoresearch/manticore:9.2.14
+        ports:
+          - 9308:9308
     steps:
       - uses: actions/checkout@v4
 
@@ -981,6 +1055,10 @@ jobs:
         image: redis
         ports:
           - 6379:6379
+      indexer:
+        image: manticoresearch/manticore:9.2.14
+        ports:
+          - 9308:9308
     steps:
       - uses: actions/checkout@v4
 
@@ -1003,6 +1081,7 @@ jobs:
               - 'packages/backend/server/src/plugins/copilot/**'
               - 'packages/backend/server/tests/copilot.*'
               - 'packages/frontend/core/src/blocksuite/ai/**'
+              - 'packages/frontend/core/src/modules/workspace-indexer-embedding/**'
               - 'tests/affine-cloud-copilot/**'
 
       - name: Setup Node.js
@@ -1276,6 +1355,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
@@ -1316,6 +1402,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

@@ -59,6 +59,10 @@ jobs:
         ports:
           - 1025:1025
           - 8025:8025
+      indexer:
+        image: manticoresearch/manticore:9.2.14
+        ports:
+          - 9308:9308
     steps:
       - uses: actions/checkout@v4
 
@@ -130,6 +134,10 @@ jobs:
         image: redis
         ports:
           - 6379:6379
+      indexer:
+        image: manticoresearch/manticore:9.2.14
+        ports:
+          - 9308:9308
     steps:
       - uses: actions/checkout@v4
 

.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

.nvmrc

@@ -1 +1 @@
-22.15.0
+22.16.0

blocksuite/affine/all/package.json

@@ -58,11 +58,14 @@
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-drag-handle": "workspace:*",
     "@blocksuite/affine-widget-edgeless-auto-connect": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-dragging-area": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-selected-rect": "workspace:*",
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/affine-widget-edgeless-zoom-toolbar": "workspace:*",
     "@blocksuite/affine-widget-frame-title": "workspace:*",
     "@blocksuite/affine-widget-keyboard-toolbar": "workspace:*",
     "@blocksuite/affine-widget-linked-doc": "workspace:*",
+    "@blocksuite/affine-widget-note-slicer": "workspace:*",
     "@blocksuite/affine-widget-page-dragging-area": "workspace:*",
     "@blocksuite/affine-widget-remote-selection": "workspace:*",
     "@blocksuite/affine-widget-scroll-anchoring": "workspace:*",
@@ -178,6 +181,8 @@
     "./widgets/drag-handle/view": "./src/widgets/drag-handle/view.ts",
     "./widgets/edgeless-auto-connect": "./src/widgets/edgeless-auto-connect/index.ts",
     "./widgets/edgeless-auto-connect/view": "./src/widgets/edgeless-auto-connect/view.ts",
+    "./widgets/edgeless-dragging-area": "./src/widgets/edgeless-dragging-area/index.ts",
+    "./widgets/edgeless-dragging-area/view": "./src/widgets/edgeless-dragging-area/view.ts",
     "./widgets/edgeless-toolbar": "./src/widgets/edgeless-toolbar/index.ts",
     "./widgets/edgeless-toolbar/view": "./src/widgets/edgeless-toolbar/view.ts",
     "./widgets/frame-title": "./src/widgets/frame-title/index.ts",
@@ -287,6 +292,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

@@ -40,11 +40,14 @@ import { InlinePresetViewExtension } from '@blocksuite/affine-inline-preset/view
 import { ReferenceViewExtension } from '@blocksuite/affine-inline-reference/view';
 import { DragHandleViewExtension } from '@blocksuite/affine-widget-drag-handle/view';
 import { EdgelessAutoConnectViewExtension } from '@blocksuite/affine-widget-edgeless-auto-connect/view';
+import { EdgelessDraggingAreaViewExtension } from '@blocksuite/affine-widget-edgeless-dragging-area/view';
+import { EdgelessSelectedRectViewExtension } from '@blocksuite/affine-widget-edgeless-selected-rect/view';
 import { EdgelessToolbarViewExtension } from '@blocksuite/affine-widget-edgeless-toolbar/view';
 import { EdgelessZoomToolbarViewExtension } from '@blocksuite/affine-widget-edgeless-zoom-toolbar/view';
 import { FrameTitleViewExtension } from '@blocksuite/affine-widget-frame-title/view';
 import { KeyboardToolbarViewExtension } from '@blocksuite/affine-widget-keyboard-toolbar/view';
 import { LinkedDocViewExtension } from '@blocksuite/affine-widget-linked-doc/view';
+import { NoteSlicerViewExtension } from '@blocksuite/affine-widget-note-slicer/view';
 import { PageDraggingAreaViewExtension } from '@blocksuite/affine-widget-page-dragging-area/view';
 import { RemoteSelectionViewExtension } from '@blocksuite/affine-widget-remote-selection/view';
 import { ScrollAnchoringViewExtension } from '@blocksuite/affine-widget-scroll-anchoring/view';
@@ -99,9 +102,9 @@ export function getInternalViewExtensions() {
     InlinePresetViewExtension,
 
     // Widget
+    // order will affect the z-index of the widget
     DragHandleViewExtension,
     EdgelessAutoConnectViewExtension,
-    EdgelessToolbarViewExtension,
     FrameTitleViewExtension,
     KeyboardToolbarViewExtension,
     LinkedDocViewExtension,
@@ -112,6 +115,10 @@ export function getInternalViewExtensions() {
     ViewportOverlayViewExtension,
     EdgelessZoomToolbarViewExtension,
     PageDraggingAreaViewExtension,
+    EdgelessSelectedRectViewExtension,
+    EdgelessDraggingAreaViewExtension,
+    NoteSlicerViewExtension,
+    EdgelessToolbarViewExtension,
 
     // Fragment
     DocTitleViewExtension,

blocksuite/affine/all/src/widgets/edgeless-dragging-area/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-edgeless-dragging-area';

blocksuite/affine/all/src/widgets/edgeless-dragging-area/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-edgeless-dragging-area/view';

blocksuite/affine/all/src/widgets/edgeless-selected-rect/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-edgeless-selected-rect';

blocksuite/affine/all/src/widgets/edgeless-selected-rect/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-edgeless-selected-rect/view';

blocksuite/affine/all/src/widgets/note-slicer/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-note-slicer';

blocksuite/affine/all/src/widgets/note-slicer/view.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-widget-note-slicer/view';

blocksuite/affine/all/tsconfig.json

@@ -55,11 +55,14 @@
     { "path": "../shared" },
     { "path": "../widgets/drag-handle" },
     { "path": "../widgets/edgeless-auto-connect" },
+    { "path": "../widgets/edgeless-dragging-area" },
+    { "path": "../widgets/edgeless-selected-rect" },
     { "path": "../widgets/edgeless-toolbar" },
     { "path": "../widgets/edgeless-zoom-toolbar" },
     { "path": "../widgets/frame-title" },
     { "path": "../widgets/keyboard-toolbar" },
     { "path": "../widgets/linked-doc" },
+    { "path": "../widgets/note-slicer" },
     { "path": "../widgets/page-dragging-area" },
     { "path": "../widgets/remote-selection" },
     { "path": "../widgets/scroll-anchoring" },

blocksuite/affine/blocks/attachment/package.json

@@ -32,7 +32,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"
   },

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

@@ -17,10 +17,12 @@ import {
   AttachmentBlockStyles,
 } from '@blocksuite/affine-model';
 import {
+  DocModeProvider,
   FileSizeLimitProvider,
+  TelemetryProvider,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
-import { humanFileSize } from '@blocksuite/affine-shared/utils';
+import { formatSize } from '@blocksuite/affine-shared/utils';
 import {
   AttachmentIcon,
   ResetIcon,
@@ -143,7 +145,11 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     this.disposables.add(this.resourceController.subscribe());
     this.disposables.add(this.resourceController);
 
-    this.refreshData();
+    this.disposables.add(
+      this.model.props.sourceId$.subscribe(() => {
+        this.refreshData();
+      })
+    );
 
     if (!this.model.props.style && !this.store.readonly) {
       this.store.withoutTransact(() => {
@@ -183,6 +189,22 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
           @click=${(event: MouseEvent) => {
             event.stopPropagation();
             onOverFileSize?.();
+
+            {
+              const mode =
+                this.std.get(DocModeProvider).getEditorMode() ?? 'page';
+              const segment = mode === 'page' ? 'doc' : 'whiteboard';
+              this.std
+                .getOptional(TelemetryProvider)
+                ?.track('AttachmentUpgradedEvent', {
+                  segment,
+                  page: `${segment} editor`,
+                  module: 'attachment',
+                  control: 'upgrade',
+                  category: 'card',
+                  type: this.model.props.name.split('.').pop() ?? '',
+                });
+            }
           }}
         >
           ${UpgradeIcon()} Upgrade
@@ -198,6 +220,22 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         @click=${(event: MouseEvent) => {
           event.stopPropagation();
           this.refreshData();
+
+          {
+            const mode =
+              this.std.get(DocModeProvider).getEditorMode() ?? 'page';
+            const segment = mode === 'page' ? 'doc' : 'whiteboard';
+            this.std
+              .getOptional(TelemetryProvider)
+              ?.track('AttachmentReloadedEvent', {
+                segment,
+                page: `${segment} editor`,
+                module: 'attachment',
+                control: 'reload',
+                category: 'card',
+                type: this.model.props.name.split('.').pop() ?? '',
+              });
+          }
         }}
       >
         ${ResetIcon()} Reload
@@ -278,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/configs/toolbar.ts

@@ -264,6 +264,12 @@ const builtinToolbarConfig = {
       run(ctx) {
         const block = ctx.getCurrentBlockByType(AttachmentBlockComponent);
         block?.reload();
+
+        ctx.track('AttachmentReloadedEvent', {
+          ...trackBaseProps,
+          control: 'reload',
+          type: block?.model.props.name.split('.').pop() ?? '',
+        });
       },
     },
     {

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}`);
   }
 
@@ -130,7 +130,7 @@ async function buildPropsWith(
     std.getOptional(TelemetryProvider)?.track('AttachmentUploadedEvent', {
       page: `${mode} editor`,
       module: 'attachment',
-      segment: 'attachment',
+      segment: mode,
       control: 'uploader',
       type,
       category,

blocksuite/affine/blocks/bookmark/package.json

@@ -36,7 +36,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"
   },

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/bookmark/src/commands/insert-bookmark.ts

@@ -1,5 +1,3 @@
-import '@blocksuite/affine-block-embed/effects';
-
 import { insertEmbedCard } from '@blocksuite/affine-block-embed';
 import type { EmbedCardStyle } from '@blocksuite/affine-model';
 import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';

blocksuite/affine/blocks/callout/package.json

@@ -35,7 +35,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./view": "./src/view.ts",
     "./store": "./src/store.ts"
   },

blocksuite/affine/blocks/code/package.json

@@ -37,7 +37,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./turbo-painter": "./src/turbo/code-painter.worker.ts",
     "./view": "./src/view.ts",
     "./store": "./src/store.ts"

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-block.ts

@@ -388,8 +388,10 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
 
   override renderBlock(): TemplateResult<1> {
     const showLineNumbers =
-      this.std.getOptional(CodeBlockConfigExtension.identifier)
-        ?.showLineNumbers ?? true;
+      (this.std.getOptional(CodeBlockConfigExtension.identifier)
+        ?.showLineNumbers ??
+        true) &&
+      (this.model.props.lineNumber ?? true);
 
     const preview = !!this.model.props.preview;
     const previewContext = this.std.getOptional(
@@ -403,6 +405,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
           'affine-code-block-container': true,
           mobile: IS_MOBILE,
           wrap: this.model.props.wrap,
+          'disable-line-numbers': !showLineNumbers,
         })}
       >
         <rich-text
@@ -420,16 +423,14 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
           .enableUndoRedo=${false}
           .wrapText=${this.model.props.wrap}
           .verticalScrollContainerGetter=${() => getViewportElement(this.host)}
-          .vLineRenderer=${showLineNumbers
-            ? (vLine: VLine) => {
-                return html`
-                  <span contenteditable="false" class="line-number"
-                    >${vLine.index + 1}</span
-                  >
-                  ${vLine.renderVElements()}
-                `;
-              }
-            : undefined}
+          .vLineRenderer=${(vLine: VLine) => {
+            return html`
+              <span contenteditable="false" class="line-number"
+                >${vLine.index + 1}</span
+              >
+              ${vLine.renderVElements()}
+            `;
+          }}
         >
         </rich-text>
         <div

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/code-toolbar/config.ts

@@ -9,10 +9,12 @@ import {
 import type { MenuItemGroup } from '@blocksuite/affine-components/toolbar';
 import { isInsidePageEditor } from '@blocksuite/affine-shared/utils';
 import { noop, sleep } from '@blocksuite/global/utils';
+import { NumberedListIcon } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
+import { CodeBlockConfigExtension } from '../code-block-config.js';
 import type { CodeBlockToolbarContext } from './context.js';
 import { duplicateCodeBlock } from './utils.js';
 
@@ -148,6 +150,40 @@ export const clipboardGroup: MenuItemGroup<CodeBlockToolbarContext> = {
         };
       },
     },
+    {
+      type: 'line-number',
+      when: ({ std }) =>
+        std.getOptional(CodeBlockConfigExtension.identifier)?.showLineNumbers ??
+        true,
+      generate: ({ blockComponent, close }) => {
+        return {
+          action: () => {},
+          render: () => {
+            const lineNumber = blockComponent.model.props.lineNumber ?? true;
+            const label = lineNumber ? 'Cancel line number' : 'Line number';
+            return html`
+              <editor-menu-action
+                @click=${() => {
+                  blockComponent.store.updateBlock(blockComponent.model, {
+                    lineNumber: !lineNumber,
+                  });
+
+                  close();
+                }}
+                aria-label=${label}
+              >
+                ${NumberedListIcon()}
+                <span class="label">${label}</span>
+                <toggle-switch
+                  style="margin-left: auto;"
+                  .on="${lineNumber}"
+                ></toggle-switch>
+              </editor-menu-action>
+            `;
+          },
+        };
+      },
+    },
     {
       type: 'duplicate',
       label: 'Duplicate',

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);
@@ -50,6 +54,10 @@ export const codeBlockStyles = css`
     user-select: none;
   }
 
+  .affine-code-block-container.disable-line-numbers .line-number {
+    display: none;
+  }
+
   affine-code .affine-code-block-preview {
     padding: 12px;
   }

blocksuite/affine/blocks/data-view/package.json

@@ -33,7 +33,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./view": "./src/view.ts",
     "./store": "./src/store.ts"
   },

blocksuite/affine/blocks/database/package.json

@@ -39,7 +39,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"
   },

blocksuite/affine/blocks/divider/package.json

@@ -29,7 +29,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./view": "./src/view.ts",
     "./store": "./src/store.ts"
   },

blocksuite/affine/blocks/edgeless-text/package.json

@@ -34,7 +34,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./view": "./src/view.ts",
     "./store": "./src/store.ts"
   },

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/package.json

@@ -40,7 +40,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./view": "./src/view.ts",
     "./store": "./src/store.ts"
   },

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/configs/edgeless-interaction.ts

@@ -52,23 +52,25 @@ export const EmbedSyncedDocInteraction =
               scale = newBound.w / realWidth;
             }
 
-            const newWidth = newBound.w / scale;
-
             newBound.w =
-              clamp(newWidth, constraint.minWidth, constraint.maxWidth) * scale;
+              clamp(
+                newBound.w / scale,
+                constraint.minWidth,
+                constraint.maxWidth
+              ) * scale;
             newBound.h =
-              clamp(newBound.h, constraint.minHeight, constraint.maxHeight) *
-              scale;
+              clamp(
+                newBound.h / scale,
+                constraint.minHeight,
+                constraint.maxHeight
+              ) * scale;
 
             const newHeight = newBound.h / scale;
 
-            // only adjust height check the fold state
-            if (originalBound.w === newBound.w) {
-              let preFoldHeight = 0;
-              if (newHeight === constraint.minHeight) {
-                preFoldHeight = initHeight;
-              }
-              model.props.preFoldHeight = preFoldHeight;
+            if (model.isFolded && newHeight > constraint.minHeight) {
+              model.props.preFoldHeight = 0;
+            } else if (!model.isFolded && newHeight <= constraint.minHeight) {
+              model.props.preFoldHeight = initHeight;
             }
 
             model.props.scale = scale;

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/embed-doc/src/embed-synced-doc-block/utils.ts

@@ -76,6 +76,8 @@ export function calcSyncedDocFullHeight(block: BlockComponent) {
   const bottomPadding = 8;
 
   return (
-    (headerHeight + contentHeight + bottomPadding) / block.gfx.viewport.zoom
+    (headerHeight + contentHeight + bottomPadding) /
+    block.gfx.viewport.zoom /
+    (block.model.props.scale ?? 1)
   );
 }

blocksuite/affine/blocks/embed/package.json

@@ -40,7 +40,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./view": "./src/view.ts",
     "./store": "./src/store.ts"
   },

blocksuite/affine/blocks/frame/package.json

@@ -35,7 +35,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"
   },

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

@@ -185,9 +185,33 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
     if (document.fullscreenElement) {
       document.exitFullscreen().catch(console.error);
     }
+
+    // Reset the flag when fully exiting presentation mode
+    this.edgeless.std
+      .get(EditPropsStore)
+      .setStorage('presentNoFrameToastShown', false);
   }
 
-  private _moveToCurrentFrame() {
+  private _moveToCurrentFrame(forceMove = false) {
+    const currentToolOption = this.gfx.tool.currentToolOption$.value;
+    const toolOptions = currentToolOption?.options;
+
+    // If PresentTool is being activated after a temporary pan (indicated by restoredAfterPan)
+    // and a forced move isn't explicitly requested, skip moving to the current frame.
+    // This preserves the user's panned position instead of resetting to the frame's default view.
+    if (
+      currentToolOption?.toolType === PresentTool &&
+      toolOptions?.restoredAfterPan &&
+      !forceMove
+    ) {
+      // Clear the flag so future navigations behave normally
+      this.gfx.tool.setTool(PresentTool, {
+        ...toolOptions,
+        restoredAfterPan: false,
+      });
+      return;
+    }
+
     const current = this._currentFrameIndex;
     const viewport = this.gfx.viewport;
     const frame = this._frames[current];
@@ -263,28 +287,56 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
 
     _disposables.add(
       effect(() => {
-        const currentTool = this.gfx.tool.currentToolOption$.value;
-        const selection = this.gfx.selection;
+        const currentToolOption = this.gfx.tool.currentToolOption$.value;
 
-        if (currentTool?.toolType === PresentTool) {
-          this._cachedIndex = this._currentFrameIndex;
-          this._navigatorMode =
-            (currentTool.options as ToolOptions<PresentTool>)?.mode ??
-            this._navigatorMode;
-          if (isFrameBlock(selection.selectedElements[0])) {
-            this._cachedIndex = this._frames.findIndex(
-              frame => frame.id === selection.selectedElements[0].id
-            );
+        if (currentToolOption?.toolType === PresentTool) {
+          const opts = currentToolOption.options as
+            | ToolOptions<PresentTool>
+            | undefined;
+
+          const isAlreadyFullscreen = !!document.fullscreenElement;
+
+          if (!isAlreadyFullscreen) {
+            this._toggleFullScreen();
+          } else {
+            this._fullScreenMode = true;
           }
-          if (this._frames.length === 0)
-            toast(
-              this.host,
-              'The presentation requires at least 1 frame. You can firstly create a frame.',
-              5000
-            );
-          this._toggleFullScreen();
-        }
 
+          this._cachedIndex = this._currentFrameIndex;
+          this._navigatorMode = opts?.mode ?? this._navigatorMode;
+
+          const selection = this.gfx.selection;
+          if (
+            selection.selectedElements.length > 0 &&
+            isFrameBlock(selection.selectedElements[0])
+          ) {
+            const selectedFrameId = selection.selectedElements[0].id;
+            const indexOfSelectedFrame = this._frames.findIndex(
+              frame => frame.id === selectedFrameId
+            );
+            if (indexOfSelectedFrame !== -1) {
+              this._cachedIndex = indexOfSelectedFrame;
+            }
+          }
+
+          const store = this.edgeless.std.get(EditPropsStore);
+          if (this._frames.length === 0) {
+            if (!store.getStorage('presentNoFrameToastShown')) {
+              toast(
+                this.host,
+                'The presentation requires at least 1 frame. You can firstly create a frame.',
+                5000
+              );
+              store.setStorage('presentNoFrameToastShown', true);
+            }
+          } else {
+            // If frames exist, and the flag was set, reset it.
+            // This allows the toast to show again if all frames are subsequently deleted.
+            if (store.getStorage('presentNoFrameToastShown')) {
+              store.setStorage('presentNoFrameToastShown', false);
+            }
+          }
+        }
         this.requestUpdate();
       })
     );
@@ -305,12 +357,10 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
 
     _disposables.addFromEvent(document, 'fullscreenchange', () => {
       if (document.fullscreenElement) {
-        // When enter fullscreen, we need to set current frame to the cached index
         this._timer = setTimeout(() => {
           this._currentFrameIndex = this._cachedIndex;
         }, 400);
       } else {
-        // When exit fullscreen, we need to clear the timer
         clearTimeout(this._timer);
         if (
           this.edgelessTool.toolType === PresentTool &&
@@ -324,7 +374,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
         }
       }
 
-      setTimeout(() => this._moveToCurrentFrame(), 400);
+      setTimeout(() => this._moveToCurrentFrame(true), 400);
       this.slots.fullScreenToggled.next();
     });
 
@@ -430,11 +480,29 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
   }
 
   protected override updated(changedProperties: PropertyValues) {
-    if (
-      changedProperties.has('_currentFrameIndex') &&
-      this.edgelessTool.toolType === PresentTool
-    ) {
-      this._moveToCurrentFrame();
+    const currentToolOption = this.gfx.tool.currentToolOption$.value;
+    const isPresentToolActive = currentToolOption?.toolType === PresentTool;
+    const toolOptions = currentToolOption?.options;
+    const isRestoredAfterPan = !!(
+      isPresentToolActive && toolOptions?.restoredAfterPan
+    );
+
+    if (changedProperties.has('_currentFrameIndex') && isPresentToolActive) {
+      // When the current frame index changes (e.g., user navigates), a viewport update is needed.
+      // However, if PresentTool is merely being restored after a pan (isRestoredAfterPan = true)
+      // without an explicit index change in this update cycle, we avoid forcing a move to preserve the panned position.
+      // Thus, `forceMove` is true unless it's a pan restoration.
+      const shouldForceMove = !isRestoredAfterPan;
+      this._moveToCurrentFrame(shouldForceMove);
+    } else if (isPresentToolActive && changedProperties.has('edgelessTool')) {
+      // Handles cases where the tool is set/switched to PresentTool (e.g., initial activation or returning from another tool).
+      // Similar to frame index changes, avoid forcing a viewport move if restoring after a pan.
+      const currentToolIsPresentTool =
+        this.edgelessTool.toolType === PresentTool;
+      if (currentToolIsPresentTool) {
+        const shouldForceMoveOnToolChange = !isRestoredAfterPan;
+        this._moveToCurrentFrame(shouldForceMoveOnToolChange);
+      }
     }
   }
 

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/frame/src/present-tool.ts

@@ -4,6 +4,7 @@ import type { NavigatorMode } from './frame-manager';
 
 export type PresentToolOption = {
   mode?: NavigatorMode;
+  restoredAfterPan?: boolean;
 };
 
 export class PresentTool extends BaseTool<PresentToolOption> {

blocksuite/affine/blocks/frame/src/present/navigator-setting-button.ts

@@ -77,18 +77,16 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
     slots.navigatorSettingUpdated.next({
       blackBackground: this.blackBackground,
     });
+    this.edgeless.std
+      .get(EditPropsStore)
+      .setStorage('presentBlackBackground', checked);
   };
 
   private _tryRestoreSettings() {
     const blackBackground = this.edgeless.std
       .get(EditPropsStore)
       .getStorage('presentBlackBackground');
-    this.blackBackground = blackBackground ?? true;
-  }
-
-  override connectedCallback() {
-    super.connectedCallback();
-    this._tryRestoreSettings();
+    this.blackBackground = blackBackground ?? false;
   }
 
   override disconnectedCallback(): void {
@@ -97,6 +95,7 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
   }
 
   override firstUpdated() {
+    if (this.edgeless) this._tryRestoreSettings();
     this._navigatorSettingPopper = createButtonPopper({
       reference: this._navigatorSettingButton,
       popperElement: this._navigatorSettingMenu,
@@ -133,7 +132,7 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
           <div class="text">Black background</div>
 
           <toggle-switch
-            .subscribe=${this.blackBackground}
+            .on=${this.blackBackground}
             .onChange=${this._onBlackBackgroundChange}
           >
           </toggle-switch>
@@ -143,7 +142,7 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
           <div class="text">Hide toolbar</div>
 
           <toggle-switch
-            .subscribe=${this.hideToolbar}
+            .on=${this.hideToolbar}
             .onChange=${(checked: boolean) => {
               this.onHideToolbarChange && this.onHideToolbarChange(checked);
             }}
@@ -173,7 +172,7 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
   private accessor _navigatorSettingMenu!: HTMLElement;
 
   @state()
-  accessor blackBackground = true;
+  accessor blackBackground = false;
 
   @property({ attribute: false })
   accessor edgeless!: BlockComponent;

blocksuite/affine/blocks/image/package.json

@@ -34,7 +34,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./turbo-painter": "./src/turbo/image-painter.worker.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"

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

@@ -7,7 +7,7 @@ import {
 } from '@blocksuite/affine-shared/commands';
 import { ImageSelection } from '@blocksuite/affine-shared/selection';
 import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
-import { WithDisposable } from '@blocksuite/global/lit';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import type { BlockComponent, UIEventStateContext } from '@blocksuite/std';
 import {
   BlockSelection,
@@ -15,8 +15,9 @@ import {
   TextSelection,
 } from '@blocksuite/std';
 import type { BaseSelection } from '@blocksuite/store';
+import { computed } from '@preact/signals-core';
 import { css, html, type PropertyValues } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 
@@ -25,7 +26,9 @@ import { ImageResizeManager } from '../image-resize-manager';
 import { shouldResizeImage } from '../utils';
 import { ImageSelectedRect } from './image-selected-rect';
 
-export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
+export class ImageBlockPageComponent extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
   static override styles = css`
     affine-page-image {
       position: relative;
@@ -68,6 +71,8 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
     }
   `;
 
+  resizeable$ = computed(() => this.block.resizeable$.value);
+
   private _isDragging = false;
 
   private get _doc() {
@@ -134,21 +139,21 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
         return true;
       },
       Delete: ctx => {
-        if (this._host.store.readonly || !this._isSelected) return;
+        if (this._host.store.readonly || !this.resizeable$.peek()) return;
 
         addParagraph(ctx);
         this._doc.deleteBlock(this._model);
         return true;
       },
       Backspace: ctx => {
-        if (this._host.store.readonly || !this._isSelected) return;
+        if (this._host.store.readonly || !this.resizeable$.peek()) return;
 
         addParagraph(ctx);
         this._doc.deleteBlock(this._model);
         return true;
       },
       Enter: ctx => {
-        if (this._host.store.readonly || !this._isSelected) return;
+        if (this._host.store.readonly || !this.resizeable$.peek()) return;
 
         addParagraph(ctx);
         return true;
@@ -213,19 +218,6 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
 
   private _handleSelection() {
     const selection = this._host.selection;
-    this._disposables.add(
-      selection.slots.changed.subscribe(selList => {
-        this._isSelected = selList.some(
-          sel => sel.blockId === this.block.blockId && sel.is(ImageSelection)
-        );
-      })
-    );
-
-    this._disposables.add(
-      this._model.propsUpdated.subscribe(() => {
-        this.requestUpdate();
-      })
-    );
 
     this._disposables.addFromEvent(
       this.resizeImg,
@@ -249,7 +241,7 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
     this.block.handleEvent(
       'click',
       () => {
-        if (!this._isSelected) return;
+        if (!this.resizeable$.peek()) return;
 
         selection.update(selList =>
           selList.filter(
@@ -356,7 +348,7 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
   override render() {
     const imageSize = this._normalizeImageSize();
 
-    const imageSelectedRect = this._isSelected
+    const imageSelectedRect = this.resizeable$.value
       ? ImageSelectedRect(this._doc.readonly)
       : null;
 
@@ -389,9 +381,6 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
     `;
   }
 
-  @state()
-  accessor _isSelected = false;
-
   @property({ attribute: false })
   accessor block!: ImageBlockComponent;
 

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

@@ -4,11 +4,12 @@ import { getLoadingIconWith } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import { ResourceController } from '@blocksuite/affine-components/resource';
 import type { ImageBlockModel } from '@blocksuite/affine-model';
+import { ImageSelection } from '@blocksuite/affine-shared/selection';
 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';
@@ -30,6 +31,13 @@ import {
   enableOn: () => !IS_MOBILE,
 })
 export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel> {
+  resizeable$ = computed(() =>
+    this.std.selection.value.some(
+      selection =>
+        selection.is(ImageSelection) && selection.blockId === this.blockId
+    )
+  );
+
   resourceController = new ResourceController(
     computed(() => this.model.props.sourceId$.value),
     'Image'
@@ -104,7 +112,11 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
     this.disposables.add(this.resourceController.subscribe());
     this.disposables.add(this.resourceController);
 
-    this.refreshData();
+    this.disposables.add(
+      this.model.props.sourceId$.subscribe(() => {
+        this.refreshData();
+      })
+    );
   }
 
   override firstUpdated() {
@@ -130,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';
@@ -100,7 +100,11 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
     this.disposables.add(this.resourceController.subscribe());
     this.disposables.add(this.resourceController);
 
-    this.refreshData();
+    this.disposables.add(
+      this.model.props.sourceId$.subscribe(() => {
+        this.refreshData();
+      })
+    );
   }
 
   override renderGfxBlock() {
@@ -124,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/latex/package.json

@@ -37,7 +37,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"
   },

blocksuite/affine/blocks/list/package.json

@@ -36,7 +36,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./turbo-painter": "./src/turbo/list-painter.worker.ts",
     "./view": "./src/view.ts",
     "./store": "./src/store.ts"

blocksuite/affine/blocks/note/package.json

@@ -39,7 +39,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./turbo-painter": "./src/turbo/note-painter.worker.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"

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/package.json

@@ -32,7 +32,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./turbo-painter": "./src/turbo/paragraph-painter.worker.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"

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/package.json

@@ -15,7 +15,6 @@
     "@blocksuite/affine-block-database": "workspace:*",
     "@blocksuite/affine-block-edgeless-text": "workspace:*",
     "@blocksuite/affine-block-embed": "workspace:*",
-    "@blocksuite/affine-block-embed-doc": "workspace:*",
     "@blocksuite/affine-block-frame": "workspace:*",
     "@blocksuite/affine-block-image": "workspace:*",
     "@blocksuite/affine-block-note": "workspace:*",
@@ -35,6 +34,7 @@
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-rich-text": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-selected-rect": "workspace:*",
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
     "@blocksuite/data-view": "workspace:*",
     "@blocksuite/global": "workspace:*",

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

@@ -3,6 +3,7 @@ import {
   pasteMiddleware,
   replaceIdMiddleware,
   surfaceRefToEmbed,
+  uploadMiddleware,
 } from '@blocksuite/affine-shared/adapters';
 import {
   clearAndSelectFirstModelCommand,
@@ -34,14 +35,17 @@ export class PageClipboard extends ReadOnlyClipboard {
     // When pastina a surface-ref block to another doc
     const surfaceRefToEmbedMiddleware = surfaceRefToEmbed(this.std);
     const replaceId = replaceIdMiddleware(this.std.store.workspace.idGenerator);
+    const upload = uploadMiddleware(this.std);
     this.std.clipboard.use(paste);
     this.std.clipboard.use(surfaceRefToEmbedMiddleware);
     this.std.clipboard.use(replaceId);
+    this.std.clipboard.use(upload);
     this._disposables.add({
       dispose: () => {
         this.std.clipboard.unuse(paste);
         this.std.clipboard.unuse(surfaceRefToEmbedMiddleware);
         this.std.clipboard.unuse(replaceId);
+        this.std.clipboard.unuse(upload);
       },
     });
   };

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/components/utils.ts

@@ -1,65 +0,0 @@
-import type {
-  CursorType,
-  ResizeHandle,
-  StandardCursor,
-} from '@blocksuite/std/gfx';
-
-const rotateCursorMap: {
-  [key in ResizeHandle]: number;
-} = {
-  'top-right': 0,
-  'bottom-right': 90,
-  'bottom-left': 180,
-  'top-left': 270,
-
-  // not used
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-};
-
-export function generateCursorUrl(
-  angle = 0,
-  handle: ResizeHandle,
-  fallback: StandardCursor = 'default'
-): CursorType {
-  angle = ((angle % 360) + 360) % 360;
-  return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(${rotateCursorMap[handle] + angle} 16 16)'%3E%3Cpath fill='white' d='M13.7,18.5h3.9l0-1.5c0-1.4-1.2-2.6-2.6-2.6h-1.5v3.9l-5.8-5.8l5.8-5.8v3.9h2.3c3.1,0,5.6,2.5,5.6,5.6v2.3h3.9l-5.8,5.8L13.7,18.5z'/%3E%3Cpath d='M20.4,19.4v-3.2c0-2.6-2.1-4.7-4.7-4.7h-3.2l0,0V9L9,12.6l3.6,3.6v-2.6l0,0H15c1.9,0,3.5,1.6,3.5,3.5v2.4l0,0h-2.6l3.6,3.6l3.6-3.6L20.4,19.4L20.4,19.4z'/%3E%3C/g%3E%3C/svg%3E") 16 16, ${fallback}`;
-}
-
-const handleToRotateMap: {
-  [key in ResizeHandle]: number;
-} = {
-  'top-left': 45,
-  'top-right': 135,
-  'bottom-right': 45,
-  'bottom-left': 135,
-  left: 0,
-  right: 0,
-  top: 90,
-  bottom: 90,
-};
-
-const rotateToHandleMap: {
-  [key: number]: StandardCursor;
-} = {
-  0: 'ew-resize',
-  45: 'nwse-resize',
-  90: 'ns-resize',
-  135: 'nesw-resize',
-};
-
-export function getRotatedResizeCursor(option: {
-  handle: ResizeHandle;
-  angle: number;
-}) {
-  const angle =
-    (Math.round(
-      (handleToRotateMap[option.handle] + ((option.angle + 360) % 360)) / 45
-    ) %
-      4) *
-    45;
-
-  return rotateToHandleMap[angle] || 'default';
-}

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

@@ -1,7 +1,11 @@
 import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmark';
 import { EdgelessTextBlockComponent } from '@blocksuite/affine-block-edgeless-text';
 import { FrameTool } from '@blocksuite/affine-block-frame';
-import { DefaultTool, isNoteBlock } from '@blocksuite/affine-block-surface';
+import {
+  DefaultTool,
+  EdgelessLegacySlotIdentifier,
+  isNoteBlock,
+} from '@blocksuite/affine-block-surface';
 import { toast } from '@blocksuite/affine-components/toast';
 import {
   BrushTool,
@@ -27,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,
@@ -47,6 +51,7 @@ import { SurfaceSelection, TextSelection } from '@blocksuite/std';
 import {
   type BaseTool,
   GfxBlockElementModel,
+  GfxControllerIdentifier,
   type GfxPrimitiveElementModel,
   isGfxGroupCompatibleModel,
   type ToolOptions,
@@ -66,7 +71,15 @@ import { isCanvasElement } from './utils/query.js';
 
 export class EdgelessPageKeyboardManager extends PageKeyboardManager {
   get gfx() {
-    return this.rootComponent.gfx;
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  get slots() {
+    return this.std.get(EdgelessLegacySlotIdentifier);
+  }
+
+  get std() {
+    return this.rootComponent.std;
   }
 
   constructor(override rootComponent: EdgelessRootBlockComponent) {
@@ -80,10 +93,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: () => {
@@ -118,7 +139,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
               NoteBlockModel,
             ])
           ) {
-            rootComponent.slots.toggleNoteSlicer.next();
+            this.slots.toggleNoteSlicer.next();
           }
         },
         f: () => {
@@ -153,7 +174,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
             elements.length === 1 &&
             isNoteBlock(elements[0])
           ) {
-            rootComponent.slots.toggleNoteSlicer.next();
+            this.slots.toggleNoteSlicer.next();
           }
         },
         '@': () => {
@@ -454,6 +475,9 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
         const selection = gfx.selection;
 
         if (event.code === 'Space' && !event.repeat) {
+          const currentToolName =
+            this.rootComponent.gfx.tool.currentToolName$.peek();
+          if (currentToolName === 'frameNavigator') return false;
           this._space(event);
         } else if (
           !selection.editing &&
@@ -491,8 +515,12 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
       ctx => {
         const event = ctx.get('keyboardState').raw;
         if (event.code === 'Space' && !event.repeat) {
+          const currentToolName =
+            this.rootComponent.gfx.tool.currentToolName$.peek();
+          if (currentToolName === 'frameNavigator') return false;
           this._space(event);
         }
+        return false;
       },
       { global: true }
     );
@@ -705,7 +733,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
       }
       this._setEdgelessTool(PanTool, { panning: false });
 
-      edgeless.dispatcher.disposables.addFromEvent(
+      this.std.event.disposables.addFromEvent(
         document,
         'keyup',
         revertToPrevTool

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

@@ -1,7 +1,6 @@
 import { NoteConfigExtension } from '@blocksuite/affine-block-note';
 import {
   DefaultTool,
-  EdgelessLegacySlotIdentifier,
   getBgGridGap,
   normalizeWheelDeltaY,
   type SurfaceBlockComponent,
@@ -45,7 +44,6 @@ import { css, html } from 'lit';
 import { query } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import type { EdgelessSelectedRectWidget } from './components/rects/edgeless-selected-rect.js';
 import { EdgelessPageKeyboardManager } from './edgeless-keyboard.js';
 import type { EdgelessRootService } from './edgeless-root-service.js';
 import { isCanvasElement } from './utils/query.js';
@@ -121,43 +119,27 @@ export class EdgelessRootBlockComponent extends BlockComponent<
 
   keyboardManager: EdgelessPageKeyboardManager | null = null;
 
-  get dispatcher() {
-    return this.std.event;
-  }
-
-  get fontLoader() {
-    return this.std.get(FontLoaderService);
-  }
-
   get gfx() {
     return this.std.get(GfxControllerIdentifier);
   }
 
-  get selectedRectWidget() {
-    return this.host.view.getWidget(
-      'edgeless-selected-rect',
-      this.host.id
-    ) as EdgelessSelectedRectWidget;
-  }
-
-  get slots() {
-    return this.std.get(EdgelessLegacySlotIdentifier);
-  }
-
   get surfaceBlockModel() {
     return this.model.children.find(
       child => child.flavour === 'affine:surface'
     ) as SurfaceBlockModel;
   }
 
-  get viewportElement(): HTMLElement {
+  private get _viewportElement(): HTMLElement {
     return this.std.get(ViewportElementProvider).viewportElement;
   }
 
+  get fontLoader() {
+    return this.std.get(FontLoaderService);
+  }
+
   private _initFontLoader() {
-    this.std
-      .get(FontLoaderService)
-      .ready.then(() => {
+    this.fontLoader.ready
+      .then(() => {
         this.surface.refresh();
       })
       .catch(console.error);
@@ -181,7 +163,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
 
   private _initPanEvent() {
     this.disposables.add(
-      this.dispatcher.add('pan', ctx => {
+      this.std.event.add('pan', ctx => {
         const { viewport } = this.gfx;
         if (viewport.locked) return;
 
@@ -205,7 +187,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
 
   private _initPinchEvent() {
     this.disposables.add(
-      this.dispatcher.add('pinch', ctx => {
+      this.std.event.add('pinch', ctx => {
         const { viewport } = this.gfx;
         if (viewport.locked) return;
 
@@ -285,7 +267,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
       this.gfx.viewport.onResize();
     });
 
-    resizeObserver.observe(this.viewportElement);
+    resizeObserver.observe(this._viewportElement);
     this._resizeObserver = resizeObserver;
   }
 
@@ -348,7 +330,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
 
   private _initWheelEvent() {
     this._disposables.add(
-      this.dispatcher.add('wheel', ctx => {
+      this.std.event.add('wheel', ctx => {
         const config = this.std.getOptional(EditorSettingProvider)?.setting$;
         const state = ctx.get('defaultState');
         const e = state.event as WheelEvent;

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

@@ -1,26 +1,5 @@
-import { LifeCycleWatcher, WidgetViewExtension } from '@blocksuite/std';
+import { LifeCycleWatcher } from '@blocksuite/std';
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
-import { literal, unsafeStatic } from 'lit/static-html.js';
-
-import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
-import { EDGELESS_DRAGGING_AREA_WIDGET } from './components/rects/edgeless-dragging-area-rect.js';
-import { EDGELESS_SELECTED_RECT_WIDGET } from './components/rects/edgeless-selected-rect.js';
-
-export const edgelessDraggingAreaWidget = WidgetViewExtension(
-  'affine:page',
-  EDGELESS_DRAGGING_AREA_WIDGET,
-  literal`${unsafeStatic(EDGELESS_DRAGGING_AREA_WIDGET)}`
-);
-export const noteSlicerWidget = WidgetViewExtension(
-  'affine:page',
-  NOTE_SLICER_WIDGET,
-  literal`${unsafeStatic(NOTE_SLICER_WIDGET)}`
-);
-export const edgelessSelectedRectWidget = WidgetViewExtension(
-  'affine:page',
-  EDGELESS_SELECTED_RECT_WIDGET,
-  literal`${unsafeStatic(EDGELESS_SELECTED_RECT_WIDGET)}`
-);
 
 export class EdgelessLocker extends LifeCycleWatcher {
   static override key = 'edgeless-locker';

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

@@ -1,7 +1,7 @@
+export { EdgelessRootPreviewBlockComponent } from '../preview/edgeless-root-preview-block';
 export * from './clipboard/clipboard';
 export * from './clipboard/command';
 export * from './edgeless-root-block.js';
-export { EdgelessRootPreviewBlockComponent } from './edgeless-root-preview-block.js';
 export { EdgelessRootService } from './edgeless-root-service.js';
 export * from './utils/clipboard-utils.js';
 export { sortEdgelessElements } from './utils/clone-utils.js';

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

@@ -1,17 +1,3 @@
-import { EdgelessAutoCompletePanel } from './edgeless/components/auto-complete/auto-complete-panel.js';
-import { EdgelessAutoComplete } from './edgeless/components/auto-complete/edgeless-auto-complete.js';
-import {
-  NOTE_SLICER_WIDGET,
-  NoteSlicer,
-} from './edgeless/components/note-slicer/index.js';
-import {
-  EDGELESS_DRAGGING_AREA_WIDGET,
-  EdgelessDraggingAreaRectWidget,
-} from './edgeless/components/rects/edgeless-dragging-area-rect.js';
-import {
-  EDGELESS_SELECTED_RECT_WIDGET,
-  EdgelessSelectedRectWidget,
-} from './edgeless/components/rects/edgeless-selected-rect.js';
 import {
   EdgelessRootBlockComponent,
   EdgelessRootPreviewBlockComponent,
@@ -22,7 +8,6 @@ import {
 export function effects() {
   // Register components by category
   registerRootComponents();
-  registerMiscComponents();
 }
 
 function registerRootComponents() {
@@ -35,37 +20,9 @@ function registerRootComponents() {
   );
 }
 
-function registerMiscComponents() {
-  // Auto-complete components
-  customElements.define(
-    'edgeless-auto-complete-panel',
-    EdgelessAutoCompletePanel
-  );
-  customElements.define('edgeless-auto-complete', EdgelessAutoComplete);
-
-  // Note and template components
-  customElements.define(NOTE_SLICER_WIDGET, NoteSlicer);
-
-  // Dragging area components
-  customElements.define(
-    EDGELESS_DRAGGING_AREA_WIDGET,
-    EdgelessDraggingAreaRectWidget
-  );
-  customElements.define(
-    EDGELESS_SELECTED_RECT_WIDGET,
-    EdgelessSelectedRectWidget
-  );
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'affine-edgeless-root': EdgelessRootBlockComponent;
-    'affine-edgeless-root-preview': EdgelessRootPreviewBlockComponent;
-    'edgeless-auto-complete-panel': EdgelessAutoCompletePanel;
-    'edgeless-auto-complete': EdgelessAutoComplete;
-    'note-slicer': NoteSlicer;
-    'edgeless-dragging-area-rect': EdgelessDraggingAreaRectWidget;
-    'edgeless-selected-rect': EdgelessSelectedRectWidget;
     'affine-page-root': PageRootBlockComponent;
   }
 }

blocksuite/affine/blocks/root/src/preview/edgeless-root-preview-block.ts

@@ -25,13 +25,9 @@ import { css, html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
-import type { EdgelessRootService } from './edgeless-root-service.js';
-import { isCanvasElement } from './utils/query.js';
+import { isCanvasElement } from '../edgeless/utils/query';
 
-export class EdgelessRootPreviewBlockComponent extends BlockComponent<
-  RootBlockModel,
-  EdgelessRootService
-> {
+export class EdgelessRootPreviewBlockComponent extends BlockComponent<RootBlockModel> {
   static override styles = css`
     affine-edgeless-root-preview {
       pointer-events: none;
@@ -66,9 +62,13 @@ export class EdgelessRootPreviewBlockComponent extends BlockComponent<
     }
   `;
 
+  private get _viewport() {
+    return this._gfx.viewport;
+  }
+
   private readonly _refreshLayerViewport = requestThrottledConnectedFrame(
     () => {
-      const { zoom, translateX, translateY } = this.service.viewport;
+      const { zoom, translateX, translateY } = this._viewport;
       const gap = getBgGridGap(zoom);
 
       this.backgroundStyle = {
@@ -81,10 +81,6 @@ export class EdgelessRootPreviewBlockComponent extends BlockComponent<
 
   private _resizeObserver: ResizeObserver | null = null;
 
-  get dispatcher() {
-    return this.service?.uiEventDispatcher;
-  }
-
   private get _gfx() {
     return this.std.get(GfxControllerIdentifier);
   }

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

@@ -18,12 +18,7 @@ import { PageClipboard, ReadOnlyClipboard } from './clipboard';
 import { builtinToolbarConfig } from './configs/toolbar';
 import { EdgelessClipboardController, EdgelessRootService } from './edgeless';
 import { EdgelessElementToolbarExtension } from './edgeless/configs/toolbar';
-import {
-  edgelessDraggingAreaWidget,
-  EdgelessLocker,
-  edgelessSelectedRectWidget,
-  noteSlicerWidget,
-} from './edgeless/edgeless-root-spec';
+import { EdgelessLocker } from './edgeless/edgeless-root-spec';
 import { AltCloneExtension } from './edgeless/interact-extensions/clone-ext';
 import { effects } from './effects';
 import { fallbackKeymap } from './keyboard/keymap';
@@ -90,9 +85,6 @@ export class RootViewExtension extends ViewExtensionProvider {
     }
     context.register([
       BlockViewExtension('affine:page', literal`affine-edgeless-root`),
-      edgelessDraggingAreaWidget,
-      noteSlicerWidget,
-      edgelessSelectedRectWidget,
       EdgelessClipboardController,
       AltCloneExtension,
     ]);

blocksuite/affine/blocks/root/tsconfig.json

@@ -12,7 +12,6 @@
     { "path": "../database" },
     { "path": "../edgeless-text" },
     { "path": "../embed" },
-    { "path": "../embed-doc" },
     { "path": "../frame" },
     { "path": "../image" },
     { "path": "../note" },
@@ -32,6 +31,7 @@
     { "path": "../../model" },
     { "path": "../../rich-text" },
     { "path": "../../shared" },
+    { "path": "../../widgets/edgeless-selected-rect" },
     { "path": "../../widgets/edgeless-toolbar" },
     { "path": "../../data-view" },
     { "path": "../../../framework/global" },

blocksuite/affine/blocks/surface-ref/package.json

@@ -36,7 +36,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"
   },

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/package.json

@@ -37,7 +37,6 @@
   },
   "exports": {
     ".": "./src/index.ts",
-    "./effects": "./src/effects.ts",
     "./store": "./src/store.ts",
     "./view": "./src/view.ts"
   },