refactor(editor): remove inline editor keyboard utils and add markdown property in rich-text (#10375)

### TL;DR

Relocated AI-related code from `presets` directory to a dedicated `ai` directory for better organization and maintainability.

### What changed?

- Moved AI-related code from `blocksuite/presets/ai` to `blocksuite/ai`
- Relocated AI chat block code from `blocksuite/blocks` to `blocksuite/ai/blocks`
- Updated imports across files to reflect new directory structure
- Renamed `registerBlocksuitePresetsCustomComponents` to `registerAIEffects`
- Fixed path references in GitHub workflow file

### How to test?

1. Build and run the application
2. Verify AI functionality works as expected:
   - Test AI chat blocks
   - Check AI panel functionality
   - Verify AI copilot features
   - Ensure AI-related UI components render correctly

### Why make this change?

This restructuring improves code organization by:
- Giving AI features a dedicated directory that better reflects their importance
- Making the codebase more maintainable by grouping related AI functionality
- Reducing confusion by removing AI code from the more general `presets` directory
- Creating clearer boundaries between AI and non-AI related code

.devcontainer/Dockerfile

@@ -1,5 +1,6 @@
 FROM mcr.microsoft.com/devcontainers/base:bookworm
 
+USER vscode
 # Install Homebrew For Linux
 RUN /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" && \
     eval "$(/home/linuxbrew/.linuxbrew/bin/brew shellenv)" && \

.docker/dev/.env.example

@@ -1,4 +1,3 @@
-DATABASE_LOCATION=./postgres
 DB_PASSWORD=affine
 DB_USERNAME=affine
 DB_DATABASE_NAME=affine

.github/actions/deploy/deploy.mjs

@@ -47,18 +47,21 @@ const replicaConfig = {
     graphql: Number(process.env.PRODUCTION_GRAPHQL_REPLICA) || 3,
     sync: Number(process.env.PRODUCTION_SYNC_REPLICA) || 3,
     renderer: Number(process.env.PRODUCTION_RENDERER_REPLICA) || 3,
+    doc: Number(process.env.PRODUCTION_DOC_REPLICA) || 3,
   },
   beta: {
     web: 2,
     graphql: Number(process.env.BETA_GRAPHQL_REPLICA) || 2,
     sync: Number(process.env.BETA_SYNC_REPLICA) || 2,
     renderer: Number(process.env.BETA_RENDERER_REPLICA) || 2,
+    doc: Number(process.env.BETA_DOC_REPLICA) || 2,
   },
   canary: {
     web: 2,
     graphql: 2,
     sync: 2,
     renderer: 2,
+    doc: 2,
   },
 };
 
@@ -67,12 +70,14 @@ const cpuConfig = {
     web: '300m',
     graphql: '1',
     sync: '1',
+    doc: '1',
     renderer: '300m',
   },
   canary: {
     web: '300m',
     graphql: '1',
     sync: '1',
+    doc: '1',
     renderer: '300m',
   },
 };
@@ -111,6 +116,7 @@ const createHelmCommand = ({ isDryRun }) => {
         `--set        web.resources.requests.cpu="${cpu.web}"`,
         `--set        graphql.resources.requests.cpu="${cpu.graphql}"`,
         `--set        sync.resources.requests.cpu="${cpu.sync}"`,
+        `--set        doc.resources.requests.cpu="${cpu.doc}"`,
       ]
     : [];
 
@@ -168,6 +174,9 @@ const createHelmCommand = ({ isDryRun }) => {
     `--set-string renderer.image.tag="${imageTag}"`,
     `--set        renderer.app.host=${host}`,
     `--set        renderer.replicaCount=${replica.renderer}`,
+    `--set-string doc.image.tag="${imageTag}"`,
+    `--set        doc.app.host=${host}`,
+    `--set        doc.replicaCount=${replica.doc}`,
     ...serviceAnnotations,
     ...resources,
     `--timeout 10m`,

.github/helm/affine/charts/doc/Chart.yaml

@@ -0,0 +1,11 @@
+apiVersion: v2
+name: doc
+description: AFFiNE doc server
+type: application
+version: 0.0.0
+appVersion: "0.20.0"
+dependencies:
+  - name: gcloud-sql-proxy
+    version: 0.0.0
+    repository: "file://../gcloud-sql-proxy"
+    condition: .global.database.gcloud.enabled

.github/helm/affine/charts/doc/templates/NOTES.txt

@@ -0,0 +1,16 @@
+1. Get the application URL by running these commands:
+{{- if contains "NodePort" .Values.service.type }}
+  export NODE_PORT=$(kubectl get --namespace {{ .Release.Namespace }} -o jsonpath="{.spec.ports[0].nodePort}" services {{ include "doc.fullname" . }})
+  export NODE_IP=$(kubectl get nodes --namespace {{ .Release.Namespace }} -o jsonpath="{.items[0].status.addresses[0].address}")
+  echo http://$NODE_IP:$NODE_PORT
+{{- else if contains "LoadBalancer" .Values.service.type }}
+     NOTE: It may take a few minutes for the LoadBalancer IP to be available.
+           You can watch the status of by running 'kubectl get --namespace {{ .Release.Namespace }} svc -w {{ include "doc.fullname" . }}'
+  export SERVICE_IP=$(kubectl get svc --namespace {{ .Release.Namespace }} {{ include "doc.fullname" . }} --template "{{"{{ range (index .status.loadBalancer.ingress 0) }}{{.}}{{ end }}"}}")
+  echo http://$SERVICE_IP:{{ .Values.service.port }}
+{{- else if contains "ClusterIP" .Values.service.type }}
+  export POD_NAME=$(kubectl get pods --namespace {{ .Release.Namespace }} -l "app.kubernetes.io/name={{ include "doc.name" . }},app.kubernetes.io/instance={{ .Release.Name }}" -o jsonpath="{.items[0].metadata.name}")
+  export CONTAINER_PORT=$(kubectl get pod --namespace {{ .Release.Namespace }} $POD_NAME -o jsonpath="{.spec.containers[0].ports[0].containerPort}")
+  echo "Visit http://127.0.0.1:8080 to use your application"
+  kubectl --namespace {{ .Release.Namespace }} port-forward $POD_NAME 8080:$CONTAINER_PORT
+{{- end }}

.github/helm/affine/charts/doc/templates/_helpers.tpl

@@ -0,0 +1,63 @@
+{{/*
+Expand the name of the chart.
+*/}}
+{{- define "doc.name" -}}
+{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Create a default fully qualified app name.
+We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
+If release name contains chart name it will be used as a full name.
+*/}}
+{{- define "doc.fullname" -}}
+{{- if .Values.fullnameOverride }}
+{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- $name := default .Chart.Name .Values.nameOverride }}
+{{- if contains $name .Release.Name }}
+{{- .Release.Name | trunc 63 | trimSuffix "-" }}
+{{- else }}
+{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
+{{- end }}
+{{- end }}
+{{- end }}
+
+{{/*
+Create chart name and version as used by the chart label.
+*/}}
+{{- define "doc.chart" -}}
+{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
+{{- end }}
+
+{{/*
+Common labels
+*/}}
+{{- define "doc.labels" -}}
+helm.sh/chart: {{ include "doc.chart" . }}
+{{ include "doc.selectorLabels" . }}
+{{- if .Chart.AppVersion }}
+app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
+{{- end }}
+app.kubernetes.io/managed-by: {{ .Release.Service }}
+monitoring: enabled
+{{- end }}
+
+{{/*
+Selector labels
+*/}}
+{{- define "doc.selectorLabels" -}}
+app.kubernetes.io/name: {{ include "doc.name" . }}
+app.kubernetes.io/instance: {{ .Release.Name }}
+{{- end }}
+
+{{/*
+Create the name of the service account to use
+*/}}
+{{- define "doc.serviceAccountName" -}}
+{{- if .Values.serviceAccount.create }}
+{{- default (include "doc.fullname" .) .Values.global.docService.name }}
+{{- else }}
+{{- default "default" .Values.global.docService.name }}
+{{- end }}
+{{- end }}

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

@@ -0,0 +1,105 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: {{ include "doc.fullname" . }}
+  labels:
+    {{- include "doc.labels" . | nindent 4 }}
+spec:
+  replicas: {{ .Values.replicaCount }}
+  selector:
+    matchLabels:
+      {{- include "doc.selectorLabels" . | nindent 6 }}
+  template:
+    metadata:
+      {{- with .Values.podAnnotations }}
+      annotations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      labels:
+        {{- include "doc.selectorLabels" . | nindent 8 }}
+    spec:
+      {{- with .Values.imagePullSecrets }}
+      imagePullSecrets:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      serviceAccountName: {{ include "doc.serviceAccountName" . }}
+      containers:
+        - name: {{ .Chart.Name }}
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
+          imagePullPolicy: {{ .Values.image.pullPolicy }}
+          env:
+          - name: AFFINE_PRIVATE_KEY
+            valueFrom:
+              secretKeyRef:
+                name: "{{ .Values.global.secret.secretName }}"
+                key: key
+          - name: NODE_ENV
+            value: "{{ .Values.env }}"
+          - name: NODE_OPTIONS
+            value: "--max-old-space-size=4096"
+          - name: NO_COLOR
+            value: "1"
+          - name: DEPLOYMENT_TYPE
+            value: "affine"
+          - name: SERVER_FLAVOR
+            value: "doc"
+          - name: AFFINE_ENV
+            value: "{{ .Release.Namespace }}"
+          - name: DATABASE_PASSWORD
+            valueFrom:
+              secretKeyRef:
+                name: pg-postgresql
+                key: postgres-password
+          - name: DATABASE_URL
+            value: postgres://{{ .Values.global.database.user }}:$(DATABASE_PASSWORD)@{{ .Values.global.database.url }}:{{ .Values.global.database.port }}/{{ .Values.global.database.name }}
+          - name: REDIS_SERVER_ENABLED
+            value: "true"
+          - name: REDIS_SERVER_HOST
+            value: "{{ .Values.global.redis.host }}"
+          - name: REDIS_SERVER_PORT
+            value: "{{ .Values.global.redis.port }}"
+          - name: REDIS_SERVER_USER
+            value: "{{ .Values.global.redis.username }}"
+          - name: REDIS_SERVER_PASSWORD
+            valueFrom:
+              secretKeyRef:
+                name: redis
+                key: redis-password
+          - name: REDIS_SERVER_DATABASE
+            value: "{{ .Values.global.redis.database }}"
+          - name: AFFINE_SERVER_PORT
+            value: "{{ .Values.global.docService.port }}"
+          - name: AFFINE_SERVER_SUB_PATH
+            value: "{{ .Values.app.path }}"
+          - name: AFFINE_SERVER_HOST
+            value: "{{ .Values.app.host }}"
+          - name: AFFINE_SERVER_HTTPS
+            value: "{{ .Values.app.https }}"
+          ports:
+            - name: http
+              containerPort: {{ .Values.global.docService.port }}
+              protocol: TCP
+          livenessProbe:
+            httpGet:
+              path: /info
+              port: http
+            initialDelaySeconds: {{ .Values.probe.initialDelaySeconds }}
+          readinessProbe:
+            httpGet:
+              path: /info
+              port: http
+            initialDelaySeconds: {{ .Values.probe.initialDelaySeconds }}
+          resources:
+            {{- toYaml .Values.resources | nindent 12 }}
+      {{- with .Values.nodeSelector }}
+      nodeSelector:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.affinity }}
+      affinity:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}
+      {{- with .Values.tolerations }}
+      tolerations:
+        {{- toYaml . | nindent 8 }}
+      {{- end }}

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

@@ -0,0 +1,19 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: {{ include "doc.fullname" . }}
+  labels:
+    {{- include "doc.labels" . | nindent 4 }}
+  {{- with .Values.service.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+spec:
+  type: {{ .Values.service.type }}
+  ports:
+    - port: {{ .Values.global.docService.port }}
+      targetPort: http
+      protocol: TCP
+      name: http
+  selector:
+    {{- include "doc.selectorLabels" . | nindent 4 }}

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

@@ -0,0 +1,12 @@
+{{- if .Values.serviceAccount.create -}}
+apiVersion: v1
+kind: ServiceAccount
+metadata:
+  name: {{ include "doc.serviceAccountName" . }}
+  labels:
+    {{- include "doc.labels" . | nindent 4 }}
+  {{- with .Values.serviceAccount.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
+{{- end }}

.github/helm/affine/charts/doc/templates/tests/test-connection.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Pod
+metadata:
+  name: "{{ include "doc.fullname" . }}-test-connection"
+  labels:
+    {{- include "doc.labels" . | nindent 4 }}
+  annotations:
+    "helm.sh/hook": test
+spec:
+  containers:
+    - name: wget
+      image: busybox
+      command: ['wget']
+      args: ['{{ include "doc.fullname" . }}:{{ .Values.global.docService.port }}']
+  restartPolicy: Never

.github/helm/affine/charts/doc/values.yaml

@@ -0,0 +1,37 @@
+replicaCount: 1
+image:
+  repository: ghcr.io/toeverything/affine-graphql
+  pullPolicy: IfNotPresent
+  tag: ''
+
+imagePullSecrets: []
+nameOverride: ''
+fullnameOverride: ''
+# map to NODE_ENV environment variable
+env: 'production'
+app:
+  # AFFINE_SERVER_SUB_PATH
+  path: ''
+  # AFFINE_SERVER_HOST
+  host: '0.0.0.0'
+  https: true
+serviceAccount:
+  create: true
+  annotations: {}
+
+podAnnotations: {}
+
+podSecurityContext:
+  fsGroup: 2000
+
+resources:
+  requests:
+    cpu: '2'
+    memory: 4Gi
+
+probe:
+  initialDelaySeconds: 20
+
+nodeSelector: {}
+tolerations: []
+affinity: {}

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

@@ -116,8 +116,8 @@ spec:
               secretKeyRef:
                 name: "{{ .Values.app.payment.stripe.secretName }}"
                 key: stripeWebhookKey
-          - name: DOC_MERGE_INTERVAL
-            value: "{{ .Values.app.doc.mergeInterval }}"
+          - name: DOC_SERVICE_ENDPOINT
+            value: "http://{{ .Values.global.docService.name }}:{{ .Values.global.docService.port }}"
           {{ if .Values.app.experimental.enableJwstCodec }}
           - name: DOC_MERGE_USE_JWST_CODEC
             value: "true"

.github/helm/affine/charts/graphql/values.yaml

@@ -17,8 +17,6 @@ app:
   # AFFINE_SERVER_HOST
   host: '0.0.0.0'
   https: true
-  doc:
-    mergeInterval: "3000"
   captcha:
     enabled: false
     secretName: captcha

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

@@ -94,6 +94,8 @@ spec:
                 name: "{{ .Values.global.objectStorage.r2.secretName }}"
                 key: secretAccessKey
           {{ end }}
+          - name: DOC_SERVICE_ENDPOINT
+            value: "http://{{ .Values.global.docService.name }}:{{ .Values.global.docService.port }}"
           ports:
             - name: http
               containerPort: {{ .Values.service.port }}

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

@@ -73,6 +73,8 @@ spec:
             value: "{{ .Values.service.port }}"
           - name: AFFINE_SERVER_HOST
             value: "{{ .Values.app.host }}"
+          - name: DOC_SERVICE_ENDPOINT
+            value: "http://{{ .Values.global.docService.name }}:{{ .Values.global.docService.port }}"
           ports:
             - name: http
               containerPort: {{ .Values.service.port }}

.github/helm/affine/values.yaml

@@ -39,6 +39,9 @@ global:
       secretAccessKey: ''
   gke:
     enabled: true
+  docService:
+    name: 'affine-doc'
+    port: 3020
 
 graphql:
   service:
@@ -61,6 +64,12 @@ renderer:
     annotations:
       cloud.google.com/backend-config: '{"default": "affine-api-backendconfig"}'
 
+doc:
+  service:
+    type: ClusterIP
+    annotations:
+      cloud.google.com/backend-config: '{"default": "affine-api-backendconfig"}'
+
 web:
   service:
     type: ClusterIP

.github/workflows/build-images.yml

@@ -28,7 +28,7 @@ jobs:
           extra-flags: workspaces focus @affine/server
       - name: Build Server
         run: |
-          rm -rf packages/backend/server/src/__tests__
+          find packages/backend/server -type d -name "__tests__" -exec rm -rf {} +
           yarn workspace @affine/server build
       - name: Upload server dist
         uses: actions/upload-artifact@v4

.github/workflows/build-test.yml

@@ -118,6 +118,26 @@ jobs:
       - name: Run Type Check
         run: yarn typecheck
 
+  lint-rust:
+    name: Lint Rust
+    runs-on: ubuntu-latest
+    needs: optimize_ci
+    if: needs.optimize_ci.outputs.skip == 'false'
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/build-rust
+        with:
+          no-build: 'true'
+      - name: fmt check
+        run: |
+          rustup toolchain add nightly
+          rustup component add --toolchain nightly-x86_64-unknown-linux-gnu rustfmt
+          cargo +nightly fmt --all -- --check
+      - name: Clippy
+        run: |
+          rustup component add clippy
+          cargo clippy --all-targets --all-features -- -D warnings
+
   check-yarn-binary:
     name: Check yarn binary
     runs-on: ubuntu-latest
@@ -155,7 +175,7 @@ jobs:
         run: yarn workspace @blocksuite/legacy-e2e test --forbid-only --shard=${{ matrix.shard }}/${{ strategy.job-total }}
 
       - name: Upload test results
-        if: ${{ failure() }}
+        if: always()
         uses: actions/upload-artifact@v4
         with:
           name: test-results-e2e-legacy-bs-${{ matrix.shard }}
@@ -187,7 +207,7 @@ jobs:
         run: yarn affine @affine-test/affine-local e2e --forbid-only --shard=${{ matrix.shard }}/${{ strategy.job-total }}
 
       - name: Upload test results
-        if: ${{ failure() }}
+        if: always()
         uses: actions/upload-artifact@v4
         with:
           name: test-results-e2e-${{ matrix.shard }}
@@ -219,7 +239,7 @@ jobs:
         run: yarn affine @affine-test/affine-mobile e2e --forbid-only --shard=${{ matrix.shard }}/${{ strategy.job-total }}
 
       - name: Upload test results
-        if: ${{ failure() }}
+        if: always()
         uses: actions/upload-artifact@v4
         with:
           name: test-results-e2e-mobile-${{ matrix.shard }}
@@ -308,6 +328,7 @@ jobs:
           package: '@affine/native'
       - name: Upload ${{ steps.filename.outputs.filename }}
         uses: actions/upload-artifact@v4
+        if: always()
         with:
           name: ${{ steps.filename.outputs.filename }}
           path: ${{ env.DEV_DRIVE_WORKSPACE || github.workspace }}/packages/frontend/native/${{ steps.filename.outputs.filename }}
@@ -334,6 +355,7 @@ jobs:
           package: '@affine/server-native'
       - name: Upload server-native.node
         uses: actions/upload-artifact@v4
+        if: always()
         with:
           name: server-native.node
           path: ./packages/backend/native/server-native.node
@@ -359,6 +381,7 @@ jobs:
         run: tar -czf dist.tar.gz --directory=packages/frontend/apps/electron-renderer/dist .
       - name: Upload web artifact
         uses: actions/upload-artifact@v4
+        if: always()
         with:
           name: web
           path: dist.tar.gz
@@ -371,6 +394,11 @@ jobs:
       - optimize_ci
       - build-server-native
     if: needs.optimize_ci.outputs.skip == 'false'
+    strategy:
+      fail-fast: false
+      matrix:
+        node_index: [0, 1, 2]
+        total_nodes: [3]
     env:
       NODE_ENV: test
       DISTRIBUTION: web
@@ -420,6 +448,8 @@ jobs:
         env:
           CARGO_TARGET_DIR: '${{ github.workspace }}/target'
           COPILOT_OPENAI_API_KEY: 'use_fake_openai_api_key'
+          CI_NODE_INDEX: ${{ matrix.node_index }}
+          CI_NODE_TOTAL: ${{ matrix.total_nodes }}
 
       - name: Upload server test coverage results
         uses: codecov/codecov-action@v5
@@ -594,8 +624,7 @@ jobs:
         with:
           filters: |
             changed:
-              - 'packages/frontend/core/src/blocksuite/presets/ai/**'
-              - 'packages/frontend/core/src/components/blocksuite/block-suite-editor/ai/**'
+              - 'packages/frontend/core/src/blocksuite/ai/**'
               - 'tests/affine-cloud-copilot/**'
 
       - name: Setup Node.js
@@ -640,12 +669,16 @@ jobs:
       matrix:
         tests:
           - name: 'Server E2E Test 1/3'
+            shard: 1
             script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=1/3
           - name: 'Server E2E Test 2/3'
+            shard: 2
             script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=2/3
           - name: 'Server E2E Test 3/3'
+            shard: 3
             script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=3/3
           - name: 'Server Desktop E2E Test'
+            shard: desktop
             script: |
               yarn affine @affine/electron build:dev
               # Workaround for Electron apps failing to initialize on Ubuntu 24.04 due to AppArmor restrictions
@@ -708,10 +741,10 @@ jobs:
           COPILOT_PERPLEXITY_API_KEY: 1
 
       - name: Upload test results
-        if: ${{ failure() }}
+        if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: test-results-e2e-server
+          name: test-results-e2e-server-${{ matrix.tests.shard }}
           path: ./test-results
           if-no-files-found: ignore
 
@@ -833,7 +866,7 @@ jobs:
           yarn affine @affine/electron node ./scripts/macos-arm64-output-check.ts
 
       - name: Upload test results
-        if: ${{ failure() }}
+        if: always()
         uses: actions/upload-artifact@v4
         with:
           name: test-results-e2e-${{ matrix.spec.os }}-${{ matrix.spec.arch }}
@@ -855,6 +888,7 @@ jobs:
     needs:
       - analyze
       - lint
+      - lint-rust
       - check-yarn-binary
       - e2e-test
       - e2e-legacy-blocksuite-test

.github/workflows/release-mobile.yml

@@ -231,7 +231,7 @@ jobs:
       - name: Build
         run: |
           echo -n "${{ env.AFFINE_ANDROID_SIGN_KEYSTORE }}" | base64 --decode > packages/frontend/apps/android/affine.keystore
-          yarn workspace @affine/android cap build android
+          yarn workspace @affine/android cap build android --flavor ${{ env.BUILD_TYPE }} --androidreleasetype AAB
         env:
           AFFINE_ANDROID_KEYSTORE_PASSWORD: ${{ secrets.AFFINE_ANDROID_KEYSTORE_PASSWORD }}
           AFFINE_ANDROID_KEYSTORE_ALIAS_PASSWORD: ${{ secrets.AFFINE_ANDROID_KEYSTORE_ALIAS_PASSWORD }}
@@ -243,7 +243,7 @@ jobs:
         with:
           serviceAccountJson: ${{ steps.auth.outputs.credentials_file_path }}
           packageName: app.affine.pro
-          releaseFiles: packages/frontend/apps/android/App/app/build/outputs/bundle/release/app-release-signed.aab
+          releaseFiles: packages/frontend/apps/android/App/app/build/outputs/bundle/${{ env.BUILD_TYPE }}Release/app-${{ env.BUILD_TYPE }}-release-signed.aab
           track: internal
           status: draft
           existingEditId: ${{ steps.bump.outputs.EDIT_ID }}

.github/workflows/workers.yml

@@ -1,23 +0,0 @@
-name: Deploy Cloudflare Worker
-
-on:
-  push:
-    branches:
-      - canary
-    paths:
-      - tools/workers/**
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    name: Deploy
-    environment: stable
-    steps:
-      - uses: actions/checkout@v4
-      - name: Publish
-        uses: cloudflare/wrangler-action@v3.13.1
-        with:
-          apiToken: ${{ secrets.CF_API_TOKEN }}
-          accountId: ${{ secrets.CF_ACCOUNT_ID }}
-          workingDirectory: 'tools/workers'
-          packageManager: 'yarn'

.nvmrc

@@ -1 +1 @@
-22.13.0
+22.14.0

.prettierignore

@@ -29,6 +29,7 @@ test-results
 tools/cli/src/webpack/error-handler.js
 packages/backend/native/index.d.ts
 packages/backend/server/src/__tests__/__snapshots__
+packages/common/native/fixtures/**
 packages/frontend/native/index.d.ts
 packages/frontend/native/index.js
 packages/frontend/graphql/src/graphql/index.ts

Cargo.toml

@@ -19,17 +19,17 @@ chrono           = "0.4"
 criterion2       = { version = "2", default-features = false }
 dotenvy          = "0.15"
 file-format      = { version = "0.26", features = ["reader"] }
+homedir          = "0.3"
 mimalloc         = "0.1"
 napi             = { version = "3.0.0-alpha.12", features = ["async", "chrono_date", "error_anyhow", "napi9", "serde"] }
 napi-build       = { version = "2" }
 napi-derive      = { version = "3.0.0-alpha.12" }
 notify           = { version = "8", features = ["serde"] }
-objc2            = "0.5.2"
-objc2-foundation = "0.2.2"
+objc2            = "0.6"
+objc2-foundation = "0.3"
 once_cell        = "1"
 parking_lot      = "0.12"
-homedir          = "0.3"
-rand             = "0.8"
+rand             = "0.9"
 rayon            = "1.10"
 serde            = "1"
 serde_json       = "1"
@@ -38,7 +38,7 @@ sqlx             = { version = "0.8", default-features = false, features = ["chr
 thiserror        = "2"
 tiktoken-rs      = "0.6"
 tokio            = "1.37"
-uniffi           = "0.28"
+uniffi           = "0.29"
 uuid             = "1.8"
 v_htmlescape     = "0.15"
 y-octo           = { git = "https://github.com/y-crdt/y-octo.git", branch = "main" }

blocksuite/affine/all/package.json

@@ -17,7 +17,6 @@
     "@blocksuite/blocks": "workspace:*",
     "@blocksuite/global": "workspace:*",
     "@blocksuite/inline": "workspace:*",
-    "@blocksuite/presets": "workspace:*",
     "@blocksuite/store": "workspace:*",
     "@blocksuite/sync": "workspace:*"
   },
@@ -37,7 +36,6 @@
     "./inline": "./src/inline/index.ts",
     "./inline/consts": "./src/inline/consts.ts",
     "./inline/types": "./src/inline/types.ts",
-    "./presets": "./src/presets/index.ts",
     "./blocks": "./src/blocks/index.ts",
     "./blocks/schemas": "./src/blocks/schemas.ts",
     "./sync": "./src/sync/index.ts"
@@ -83,9 +81,6 @@
       "inline/types": [
         "dist/inline/types.d.ts"
       ],
-      "presets": [
-        "dist/presets/index.d.ts"
-      ],
       "blocks": [
         "dist/blocks/index.d.ts"
       ],

blocksuite/affine/all/src/effects.ts

@@ -1,7 +1,5 @@
 import { effects as blocksEffects } from '@blocksuite/blocks/effects';
-import { effects as presetsEffects } from '@blocksuite/presets/effects';
 
 export function effects() {
   blocksEffects();
-  presetsEffects();
 }

blocksuite/affine/all/src/presets/index.ts

@@ -1 +0,0 @@
-export * from '@blocksuite/presets';

blocksuite/affine/all/tsconfig.json

@@ -11,7 +11,6 @@
     { "path": "../../blocks" },
     { "path": "../../framework/global" },
     { "path": "../../framework/inline" },
-    { "path": "../../presets" },
     { "path": "../../framework/store" },
     { "path": "../../framework/sync" }
   ]

blocksuite/affine/block-attachment/package.json

@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.7",
+    "@toeverything/theme": "^1.1.11",
     "file-type": "^20.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -3,7 +3,7 @@ import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import { HoverController } from '@blocksuite/affine-components/hover';
 import {
   AttachmentIcon16,
-  getAttachmentFileIcons,
+  getAttachmentFileIcon,
 } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
@@ -11,13 +11,12 @@ import {
   type AttachmentBlockModel,
   AttachmentBlockStyles,
 } from '@blocksuite/affine-model';
-import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { humanFileSize } from '@blocksuite/affine-shared/utils';
 import {
-  BlockSelection,
-  SurfaceSelection,
-  TextSelection,
-} from '@blocksuite/block-std';
+  FileSizeLimitService,
+  ThemeProvider,
+} from '@blocksuite/affine-shared/services';
+import { humanFileSize } from '@blocksuite/affine-shared/utils';
+import { BlockSelection, TextSelection } from '@blocksuite/block-std';
 import { Slice } from '@blocksuite/store';
 import { flip, offset } from '@floating-ui/dom';
 import { html, nothing } from 'lit';
@@ -26,25 +25,19 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { AttachmentBlockService } from './attachment-service.js';
 import { AttachmentOptionsTemplate } from './components/options.js';
 import { AttachmentEmbedProvider } from './embed.js';
 import { styles } from './styles.js';
 import { checkAttachmentBlob, downloadAttachmentBlob } from './utils.js';
 
 @Peekable()
-export class AttachmentBlockComponent extends CaptionedBlockComponent<
-  AttachmentBlockModel,
-  AttachmentBlockService
-> {
+export class AttachmentBlockComponent extends CaptionedBlockComponent<AttachmentBlockModel> {
   static override styles = styles;
 
   protected _isDragging = false;
 
   protected _isResizing = false;
 
-  protected _isSelected = false;
-
   protected _whenHover: HoverController | null = new HoverController(
     this,
     ({ abortController }) => {
@@ -90,10 +83,14 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<
     margin: '18px 0px',
   });
 
+  private get _maxFileSize() {
+    return this.std.store.get(FileSizeLimitService).maxFileSize;
+  }
+
   convertTo = () => {
     return this.std
       .get(AttachmentEmbedProvider)
-      .convertTo(this.model, this.service.maxFileSize);
+      .convertTo(this.model, this._maxFileSize);
   };
 
   copy = () => {
@@ -109,7 +106,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<
   embedded = () => {
     return this.std
       .get(AttachmentEmbedProvider)
-      .embedded(this.model, this.service.maxFileSize);
+      .embedded(this.model, this._maxFileSize);
   };
 
   open = () => {
@@ -126,7 +123,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<
   protected get embedView() {
     return this.std
       .get(AttachmentEmbedProvider)
-      .render(this.model, this.blobUrl, this.service.maxFileSize);
+      .render(this.model, this.blobUrl, this._maxFileSize);
   }
 
   private _selectBlock() {
@@ -170,26 +167,21 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<
 
     // this is required to prevent iframe from capturing pointer events
     this.disposables.add(
-      this.std.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.selected?.is(BlockSelection) ||
-          !!this.selected?.is(SurfaceSelection);
-
-        this._showOverlay =
-          this._isResizing || this._isDragging || !this._isSelected;
+      this.selected$.subscribe(selected => {
+        this._showOverlay = this._isResizing || this._isDragging || !selected;
       })
     );
     // this is required to prevent iframe from capturing pointer events
     this.handleEvent('dragStart', () => {
       this._isDragging = true;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
 
     this.handleEvent('dragEnd', () => {
       this._isDragging = false;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
   }
 
@@ -226,7 +218,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<
     const infoText = this.error ? 'File loading failed.' : humanFileSize(size);
 
     const fileType = name.split('.').pop() ?? '';
-    const FileTypeIcon = getAttachmentFileIcons(fileType);
+    const FileTypeIcon = getAttachmentFileIcon(fileType);
 
     const embedView = this.embedView;
 

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

@@ -35,7 +35,7 @@ export class AttachmentEdgelessBlockComponent extends toGfxBlockComponent(
       this.slots.elementResizeEnd.on(() => {
         this._isResizing = false;
         this._showOverlay =
-          this._isResizing || this._isDragging || !this._isSelected;
+          this._isResizing || this._isDragging || !this.selected$.peek();
       })
     );
   }

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

@@ -1,24 +1,18 @@
-import { FileDropConfigExtension } from '@blocksuite/affine-components/drag-indicator';
+import { SurfaceBlockModel } from '@blocksuite/affine-block-surface';
+import { FileDropConfigExtension } from '@blocksuite/affine-components/drop-indicator';
 import { AttachmentBlockSchema } from '@blocksuite/affine-model';
-import { TelemetryProvider } from '@blocksuite/affine-shared/services';
+import {
+  FileSizeLimitService,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
 import {
   isInsideEdgelessEditor,
-  matchFlavours,
+  matchModels,
 } from '@blocksuite/affine-shared/utils';
-import { BlockService } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 
 import { addAttachments, addSiblingAttachmentBlocks } from './utils.js';
 
-// bytes.parse('2GB')
-const maxFileSize = 2147483648;
-
-export class AttachmentBlockService extends BlockService {
-  static override readonly flavour = AttachmentBlockSchema.model.flavour;
-
-  maxFileSize = maxFileSize;
-}
-
 export const AttachmentDropOption = FileDropConfigExtension({
   flavour: AttachmentBlockSchema.model.flavour,
   onDrop: ({ files, targetModel, placement, point, std }) => {
@@ -28,11 +22,12 @@ export const AttachmentDropOption = FileDropConfigExtension({
     );
     if (!attachmentFiles.length) return false;
 
-    if (targetModel && !matchFlavours(targetModel, ['affine:surface'])) {
+    const maxFileSize = std.store.get(FileSizeLimitService).maxFileSize;
+
+    if (targetModel && !matchModels(targetModel, [SurfaceBlockModel])) {
       addSiblingAttachmentBlocks(
         std.host,
         attachmentFiles,
-        // TODO: use max file size from service
         maxFileSize,
         targetModel,
         placement

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

@@ -3,10 +3,7 @@ import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { AttachmentBlockNotionHtmlAdapterExtension } from './adapters/notion-html.js';
-import {
-  AttachmentBlockService,
-  AttachmentDropOption,
-} from './attachment-service.js';
+import { AttachmentDropOption } from './attachment-service.js';
 import {
   AttachmentEmbedConfigExtension,
   AttachmentEmbedService,
@@ -14,7 +11,6 @@ import {
 
 export const AttachmentBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:attachment'),
-  AttachmentBlockService,
   BlockViewExtension('affine:attachment', model => {
     return model.parent?.flavour === 'affine:surface'
       ? literal`affine-edgeless-attachment`

blocksuite/affine/block-attachment/src/components/options.ts

@@ -2,8 +2,6 @@ import {
   CaptionIcon,
   DownloadIcon,
   EditIcon,
-  MoreVerticalIcon,
-  SmallArrowDownIcon,
 } from '@blocksuite/affine-components/icons';
 import { createLitPortal } from '@blocksuite/affine-components/portal';
 import {
@@ -21,6 +19,7 @@ import {
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { Bound } from '@blocksuite/global/utils';
+import { ArrowDownSmallIcon, MoreVerticalIcon } from '@blocksuite/icons/lit';
 import { flip, offset } from '@floating-ui/dom';
 import { html, nothing } from 'lit';
 import { join } from 'lit/directives/join.js';
@@ -88,7 +87,7 @@ export function attachmentViewToggleMenu({
             <span style="text-transform: capitalize">${viewType}</span>
             view
           </div>
-          ${SmallArrowDownIcon}
+          ${ArrowDownSmallIcon({ width: '16px', height: '16px' })}
         </editor-icon-button>
       `}
     >
@@ -200,8 +199,12 @@ export function AttachmentOptionsTemplate({
       <editor-menu-button
         .contentPadding=${'8px'}
         .button=${html`
-          <editor-icon-button aria-label="More" .tooltip=${'More'}>
-            ${MoreVerticalIcon}
+          <editor-icon-button
+            aria-label="More"
+            .tooltip=${'More'}
+            .iconSize=${'20px'}
+          >
+            ${MoreVerticalIcon()}
           </editor-icon-button>
         `}
       >

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

@@ -1,6 +1,5 @@
 import { AttachmentBlockComponent } from './attachment-block';
 import { AttachmentEdgelessBlockComponent } from './attachment-edgeless-block';
-import type { AttachmentBlockService } from './attachment-service';
 
 export function effects() {
   customElements.define(
@@ -9,11 +8,3 @@ export function effects() {
   );
   customElements.define('affine-attachment', AttachmentBlockComponent);
 }
-
-declare global {
-  namespace BlockSuite {
-    interface BlockServices {
-      'affine:attachment': AttachmentBlockService;
-    }
-  }
-}

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

@@ -1,18 +1,25 @@
-import type {
-  AttachmentBlockModel,
-  ImageBlockProps,
-} from '@blocksuite/affine-model';
 import {
+  type AttachmentBlockModel,
+  type ImageBlockProps,
+  MAX_IMAGE_WIDTH,
+} from '@blocksuite/affine-model';
+import { FileSizeLimitService } from '@blocksuite/affine-shared/services';
+import {
+  readImageSize,
   transformModel,
   withTempBlobData,
 } from '@blocksuite/affine-shared/utils';
+import { type BlockStdScope, StdIdentifier } from '@blocksuite/block-std';
 import type { Container } from '@blocksuite/global/di';
 import { createIdentifier } from '@blocksuite/global/di';
+import { Bound } from '@blocksuite/global/utils';
 import type { ExtensionType } from '@blocksuite/store';
 import { Extension } from '@blocksuite/store';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
+import { getAttachmentBlob } from './utils';
+
 export type AttachmentEmbedConfig = {
   name: string;
   /**
@@ -22,7 +29,10 @@ export type AttachmentEmbedConfig = {
   /**
    * The action will be executed when the 「Turn into embed view」 button is clicked.
    */
-  action?: (model: AttachmentBlockModel) => Promise<void> | void;
+  action?: (
+    model: AttachmentBlockModel,
+    std: BlockStdScope
+  ) => Promise<void> | void;
   /**
    * The template will be used to render the embed view.
    */
@@ -57,8 +67,9 @@ export const AttachmentEmbedProvider = createIdentifier<AttachmentEmbedService>(
 );
 
 export class AttachmentEmbedService extends Extension {
-  // 10MB
-  static MAX_EMBED_SIZE = 10 * 1024 * 1024;
+  private get _maxFileSize() {
+    return this.std.store.get(FileSizeLimitService).maxFileSize;
+  }
 
   get keys() {
     return this.configs.keys();
@@ -68,7 +79,11 @@ export class AttachmentEmbedService extends Extension {
     return this.configs.values();
   }
 
-  constructor(private readonly configs: Map<string, AttachmentEmbedConfig>) {
+  get configs(): Map<string, AttachmentEmbedConfig> {
+    return this.std.get(AttachmentEmbedConfigMapIdentifier);
+  }
+
+  constructor(private readonly std: BlockStdScope) {
     super();
   }
 
@@ -76,35 +91,27 @@ export class AttachmentEmbedService extends Extension {
     di.addImpl(AttachmentEmbedConfigMapIdentifier, provider =>
       provider.getAll(AttachmentEmbedConfigIdentifier)
     );
-    di.addImpl(AttachmentEmbedProvider, AttachmentEmbedService, [
-      AttachmentEmbedConfigMapIdentifier,
-    ]);
+    di.addImpl(AttachmentEmbedProvider, this, [StdIdentifier]);
   }
 
   // Converts to embed view.
-  convertTo(
-    model: AttachmentBlockModel,
-    maxFileSize = AttachmentEmbedService.MAX_EMBED_SIZE
-  ) {
+  convertTo(model: AttachmentBlockModel, maxFileSize = this._maxFileSize) {
     const config = this.values.find(config => config.check(model, maxFileSize));
-    if (!config || !config.action) {
+    if (!config?.action) {
       model.doc.updateBlock(model, { embed: true });
       return;
     }
-    config.action(model)?.catch(console.error);
+    config.action(model, this.std)?.catch(console.error);
   }
 
-  embedded(
-    model: AttachmentBlockModel,
-    maxFileSize = AttachmentEmbedService.MAX_EMBED_SIZE
-  ) {
+  embedded(model: AttachmentBlockModel, maxFileSize = this._maxFileSize) {
     return this.values.some(config => config.check(model, maxFileSize));
   }
 
   render(
     model: AttachmentBlockModel,
     blobUrl?: string,
-    maxFileSize = AttachmentEmbedService.MAX_EMBED_SIZE
+    maxFileSize = this._maxFileSize
   ) {
     if (!model.embed || !blobUrl) return;
 
@@ -124,7 +131,12 @@ const embedConfig: AttachmentEmbedConfig[] = [
     check: model =>
       model.doc.schema.flavourSchemaMap.has('affine:image') &&
       model.type.startsWith('image/'),
-    action: model => turnIntoImageBlock(model),
+    async action(model, std) {
+      const component = std.view.getBlock(model.id);
+      if (!component) return;
+
+      await turnIntoImageBlock(model);
+    },
   },
   {
     name: 'pdf',
@@ -152,7 +164,13 @@ const embedConfig: AttachmentEmbedConfig[] = [
     check: (model, maxFileSize) =>
       model.type.startsWith('video/') && model.size <= maxFileSize,
     template: (_, blobUrl) =>
-      html`<video width="100%;" height="480" controls src=${blobUrl}></video>`,
+      html`<video
+        style="max-height: max-content;"
+        width="100%;"
+        height="480"
+        controls
+        src=${blobUrl}
+      ></video>`,
   },
   {
     name: 'audio',
@@ -166,7 +184,7 @@ const embedConfig: AttachmentEmbedConfig[] = [
 /**
  * Turn the attachment block into an image block.
  */
-export function turnIntoImageBlock(model: AttachmentBlockModel) {
+export async function turnIntoImageBlock(model: AttachmentBlockModel) {
   if (!model.doc.schema.flavourSchemaMap.has('affine:image')) {
     console.error('The image flavour is not supported!');
     return;
@@ -178,15 +196,37 @@ export function turnIntoImageBlock(model: AttachmentBlockModel) {
   const { saveAttachmentData, getImageData } = withTempBlobData();
   saveAttachmentData(sourceId, { name: model.name });
 
-  const imageConvertData = model.sourceId
-    ? getImageData(model.sourceId)
+  let imageSize = model.sourceId ? getImageData(model.sourceId) : undefined;
+
+  const bounds = model.xywh
+    ? Bound.fromXYWH(model.deserializedXYWH)
     : undefined;
 
+  if (bounds) {
+    if (!imageSize?.width || !imageSize?.height) {
+      const blob = await getAttachmentBlob(model);
+      if (blob) {
+        imageSize = await readImageSize(blob);
+      }
+    }
+
+    if (imageSize?.width && imageSize?.height) {
+      const p = imageSize.height / imageSize.width;
+      imageSize.width = Math.min(imageSize.width, MAX_IMAGE_WIDTH);
+      imageSize.height = imageSize.width * p;
+      bounds.w = imageSize.width;
+      bounds.h = imageSize.height;
+    }
+  }
+
+  const others = bounds ? { xywh: bounds.serialize() } : undefined;
+
   const imageProp: Partial<ImageBlockProps> = {
     sourceId,
     caption: model.caption,
     size: model.size,
-    ...imageConvertData,
+    ...imageSize,
+    ...others,
   };
   transformModel(model, 'affine:image', imageProp);
 }

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

@@ -1,7 +1,3 @@
-import type * as SurfaceEffects from '@blocksuite/affine-block-surface/effects';
-
-declare type _GLOBAL_ = typeof SurfaceEffects;
-
 export * from './adapters/notion-html';
 export * from './attachment-block';
 export * from './attachment-service';

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

@@ -1,7 +1,3 @@
-import {
-  EMBED_CARD_HEIGHT,
-  EMBED_CARD_WIDTH,
-} from '@blocksuite/affine-shared/consts';
 import { css } from 'lit';
 
 export const styles = css`
@@ -12,7 +8,7 @@ export const styles = css`
     gap: 12px;
 
     width: 100%;
-    height: ${EMBED_CARD_HEIGHT.horizontalThin}px;
+    height: 100%;
 
     padding: 12px;
     border-radius: 8px;
@@ -121,9 +117,6 @@ export const styles = css`
   }
 
   .affine-attachment-card.cubeThick {
-    width: ${EMBED_CARD_WIDTH.cubeThick}px;
-    height: ${EMBED_CARD_HEIGHT.cubeThick}px;
-
     flex-direction: column-reverse;
 
     .affine-attachment-content {

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

@@ -8,7 +8,10 @@ import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
-import { TelemetryProvider } from '@blocksuite/affine-shared/services';
+import {
+  FileSizeLimitService,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
 import { humanFileSize } from '@blocksuite/affine-shared/utils';
 import type { BlockStdScope, EditorHost } from '@blocksuite/block-std';
 import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
@@ -94,7 +97,7 @@ export async function uploadAttachmentBlob(
   }
 }
 
-async function getAttachmentBlob(model: AttachmentBlockModel) {
+export async function getAttachmentBlob(model: AttachmentBlockModel) {
   const sourceId = model.sourceId;
   if (!sourceId) {
     return null;
@@ -212,7 +215,8 @@ export async function addSiblingAttachmentBlocks(
   files: File[],
   maxFileSize: number,
   targetModel: BlockModel,
-  place: 'before' | 'after' = 'after'
+  place: 'before' | 'after' = 'after',
+  isEmbed?: boolean
 ) {
   if (!files.length) {
     return;
@@ -242,6 +246,7 @@ export async function addSiblingAttachmentBlocks(
     name: file.name,
     size: file.size,
     type: types[index],
+    embed: isEmbed,
   }));
 
   const blockIds = doc.addSiblingBlocks(
@@ -261,18 +266,13 @@ export async function addSiblingAttachmentBlocks(
 export async function addAttachments(
   std: BlockStdScope,
   files: File[],
-  point?: IVec
+  point?: IVec,
+  transformPoint?: boolean // determines whether we should use `toModelCoord` to convert the point
 ): Promise<string[]> {
   if (!files.length) return [];
 
-  const attachmentService = std.getService('affine:attachment');
   const gfx = std.get(GfxControllerIdentifier);
-
-  if (!attachmentService) {
-    console.error('Attachment service not found');
-    return [];
-  }
-  const maxFileSize = attachmentService.maxFileSize;
+  const maxFileSize = std.store.get(FileSizeLimitService).maxFileSize;
   const isSizeExceeded = files.some(file => file.size > maxFileSize);
   if (isSizeExceeded) {
     toast(
@@ -287,7 +287,14 @@ export async function addAttachments(
   }
 
   let { x, y } = gfx.viewport.center;
-  if (point) [x, y] = gfx.viewport.toModelCoord(...point);
+  if (point) {
+    let transform = transformPoint ?? true;
+    if (transform) {
+      [x, y] = gfx.viewport.toModelCoord(...point);
+    } else {
+      [x, y] = point;
+    }
+  }
 
   const CARD_STACK_GAP = 32;
 

blocksuite/affine/block-bookmark/package.json

@@ -14,7 +14,6 @@
   "license": "MIT",
   "dependencies": {
     "@blocksuite/affine-block-embed": "workspace:*",
-    "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
@@ -26,7 +25,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.7",
+    "@toeverything/theme": "^1.1.11",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"

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

@@ -4,10 +4,10 @@ import {
 } from '@blocksuite/affine-components/caption';
 import type { BookmarkBlockModel } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
-import { BlockSelection } from '@blocksuite/block-std';
+import { computed, type ReadonlySignal } from '@preact/signals-core';
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import { refreshBookmarkUrlData } from './utils.js';
@@ -15,6 +15,12 @@ import { refreshBookmarkUrlData } from './utils.js';
 export const BOOKMARK_MIN_WIDTH = 450;
 
 export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBlockModel> {
+  selectedStyle$: ReadonlySignal<ClassInfo> | null = computed<ClassInfo>(
+    () => ({
+      'selected-style': this.selected$.value,
+    })
+  );
+
   private _fetchAbortController?: AbortController;
 
   blockDraggable = true;
@@ -70,13 +76,12 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
   }
 
   override renderBlock() {
-    const selected = !!this.selected?.is(BlockSelection);
     return html`
       <div
         draggable="${this.blockDraggable ? 'true' : 'false'}"
         class=${classMap({
           'affine-bookmark-container': true,
-          'selected-style': selected,
+          ...this.selectedStyle$?.value,
         })}
         style=${this.containerStyleMap}
       >

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

@@ -3,13 +3,15 @@ import {
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { toGfxBlockComponent } from '@blocksuite/block-std';
-import { styleMap } from 'lit/directives/style-map.js';
+import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 import { BookmarkBlockComponent } from './bookmark-block.js';
 
 export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
   BookmarkBlockComponent
 ) {
+  override selectedStyle$ = null;
+
   override blockDraggable = false;
 
   override getRenderingRect() {
@@ -43,7 +45,9 @@ export class BookmarkEdgelessBlockComponent extends toGfxBlockComponent(
     return this.renderPageContent();
   }
 
-  protected override accessor blockContainerStyles = {};
+  protected override accessor blockContainerStyles: StyleInfo = {
+    height: '100%',
+  };
 }
 
 declare global {

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

@@ -1,17 +1,11 @@
-import {
-  BlockViewExtension,
-  CommandExtension,
-  FlavourExtension,
-} from '@blocksuite/block-std';
+import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { BookmarkBlockAdapterExtensions } from './adapters/extension.js';
-import { commands } from './commands/index.js';
 
 export const BookmarkBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:bookmark'),
-  CommandExtension(commands),
   BlockViewExtension('affine:bookmark', model => {
     return model.parent?.flavour === 'affine:surface'
       ? literal`affine-edgeless-bookmark`

blocksuite/affine/block-bookmark/src/commands/index.ts

@@ -1,9 +1,2 @@
-import type { BlockCommands } from '@blocksuite/block-std';
-
-import { insertBookmarkCommand } from './insert-bookmark.js';
-import { insertLinkByQuickSearchCommand } from './insert-link-by-quick-search.js';
-
-export const commands: BlockCommands = {
-  insertBookmark: insertBookmarkCommand,
-  insertLinkByQuickSearch: insertLinkByQuickSearchCommand,
-};
+export { insertBookmarkCommand } from './insert-bookmark.js';
+export { insertLinkByQuickSearchCommand } from './insert-link-by-quick-search.js';

blocksuite/affine/block-bookmark/src/commands/insert-bookmark.ts

@@ -5,11 +5,7 @@ import type { EmbedCardStyle } from '@blocksuite/affine-model';
 import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
 import type { Command } from '@blocksuite/block-std';
 
-export const insertBookmarkCommand: Command<
-  never,
-  'insertedLinkType',
-  { url: string }
-> = (ctx, next) => {
+export const insertBookmarkCommand: Command<{ url: string }> = (ctx, next) => {
   const { url, std } = ctx;
   const embedOptions = std.get(EmbedOptionProvider).getEmbedBlockOptions(url);
 

blocksuite/affine/block-bookmark/src/commands/insert-link-by-quick-search.ts

@@ -1,10 +1,15 @@
-import type { InsertedLinkType } from '@blocksuite/affine-block-embed';
+import {
+  type InsertedLinkType,
+  insertEmbedLinkedDocCommand,
+} from '@blocksuite/affine-block-embed';
 import { QuickSearchProvider } from '@blocksuite/affine-shared/services';
 import type { Command } from '@blocksuite/block-std';
 
+import { insertBookmarkCommand } from './insert-bookmark';
+
 export const insertLinkByQuickSearchCommand: Command<
-  never,
-  'insertedLinkType'
+  {},
+  { insertedLinkType: Promise<InsertedLinkType> }
 > = (ctx, next) => {
   const { std } = ctx;
   const quickSearchService = std.getOptional(QuickSearchProvider);
@@ -20,7 +25,7 @@ export const insertLinkByQuickSearchCommand: Command<
 
       // add linked doc
       if ('docId' in result) {
-        std.command.exec('insertEmbedLinkedDoc', {
+        std.command.exec(insertEmbedLinkedDocCommand, {
           docId: result.docId,
           params: result.params,
         });
@@ -31,7 +36,7 @@ export const insertLinkByQuickSearchCommand: Command<
 
       // add normal link;
       if ('externalUrl' in result) {
-        std.command.exec('insertBookmark', { url: result.externalUrl });
+        std.command.exec(insertBookmarkCommand, { url: result.externalUrl });
         return {
           flavour: 'affine:bookmark',
         };

blocksuite/affine/block-bookmark/src/components/bookmark-card.ts

@@ -2,15 +2,11 @@ import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
 import { WebIcon16 } from '@blocksuite/affine-components/icons';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { getHostName } from '@blocksuite/affine-shared/utils';
-import {
-  BlockSelection,
-  ShadowlessElement,
-  SurfaceSelection,
-} from '@blocksuite/block-std';
+import { BlockSelection, ShadowlessElement } from '@blocksuite/block-std';
 import { WithDisposable } from '@blocksuite/global/utils';
 import { OpenInNewIcon } from '@blocksuite/icons/lit';
 import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 
 import type { BookmarkBlockComponent } from '../bookmark-block.js';
@@ -55,14 +51,6 @@ export class BookmarkCard extends WithDisposable(ShadowlessElement) {
         .get(ThemeProvider)
         .theme$.subscribe(() => this.requestUpdate())
     );
-
-    this.disposables.add(
-      this.bookmark.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.bookmark.selected?.is(BlockSelection) ||
-          !!this.bookmark.selected?.is(SurfaceSelection);
-      })
-    );
   }
 
   override render() {
@@ -72,7 +60,7 @@ export class BookmarkCard extends WithDisposable(ShadowlessElement) {
       loading: this.loading,
       error: this.error,
       [style]: true,
-      selected: this._isSelected,
+      selected: this.bookmark.selected$.value,
     });
 
     const domainName = url.match(
@@ -148,9 +136,6 @@ export class BookmarkCard extends WithDisposable(ShadowlessElement) {
     `;
   }
 
-  @state()
-  private accessor _isSelected = false;
-
   @property({ attribute: false })
   accessor bookmark!: BookmarkBlockComponent;
 

blocksuite/affine/block-bookmark/src/components/embed-card-modal/index.ts

@@ -1,4 +0,0 @@
-export * from './embed-card-caption-edit-modal';
-export * from './embed-card-create-modal';
-export * from './embed-card-edit-modal';
-export * from './type';

blocksuite/affine/block-bookmark/src/components/index.ts

@@ -1,2 +1 @@
 export * from './bookmark-card';
-export * from './embed-card-modal';

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

@@ -1,13 +1,6 @@
 import { BookmarkBlockComponent } from './bookmark-block';
 import { BookmarkEdgelessBlockComponent } from './bookmark-edgeless-block';
-import type { insertBookmarkCommand } from './commands/insert-bookmark';
-import type { insertLinkByQuickSearchCommand } from './commands/insert-link-by-quick-search';
 import { BookmarkCard } from './components/bookmark-card';
-import {
-  EmbedCardCreateModal,
-  EmbedCardEditCaptionEditModal,
-  EmbedCardEditModal,
-} from './components/embed-card-modal';
 
 export function effects() {
   customElements.define(
@@ -16,20 +9,4 @@ export function effects() {
   );
   customElements.define('affine-bookmark', BookmarkBlockComponent);
   customElements.define('bookmark-card', BookmarkCard);
-
-  customElements.define('embed-card-create-modal', EmbedCardCreateModal);
-  customElements.define('embed-card-edit-modal', EmbedCardEditModal);
-  customElements.define(
-    'embed-card-caption-edit-modal',
-    EmbedCardEditCaptionEditModal
-  );
-}
-
-declare global {
-  namespace BlockSuite {
-    interface Commands {
-      insertBookmark: typeof insertBookmarkCommand;
-      insertLinkByQuickSearch: typeof insertLinkByQuickSearchCommand;
-    }
-  }
 }

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

@@ -1,4 +1,5 @@
 export * from './adapters';
 export * from './bookmark-block';
 export * from './bookmark-spec';
+export * from './commands';
 export * from './components';

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

@@ -1,19 +1,20 @@
-import {
-  EMBED_CARD_HEIGHT,
-  EMBED_CARD_WIDTH,
-} from '@blocksuite/affine-shared/consts';
 import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
 import { baseTheme } from '@toeverything/theme';
 import { css, unsafeCSS } from 'lit';
 
 export const styles = css`
+  bookmark-card {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
   .affine-bookmark-card {
     container: affine-bookmark-card / inline-size;
     margin: 0 auto;
     box-sizing: border-box;
     display: flex;
     width: 100%;
-    height: ${EMBED_CARD_HEIGHT.horizontal}px;
 
     border-radius: 8px;
     border: 1px solid var(--affine-background-tertiary-color);
@@ -187,8 +188,6 @@ export const styles = css`
   }
 
   .affine-bookmark-card.list {
-    height: ${EMBED_CARD_HEIGHT.list}px;
-
     .affine-bookmark-content {
       width: 100%;
       flex-direction: row;
@@ -215,9 +214,8 @@ export const styles = css`
   }
 
   .affine-bookmark-card.vertical {
-    width: ${EMBED_CARD_WIDTH.vertical}px;
-    height: ${EMBED_CARD_HEIGHT.vertical}px;
     flex-direction: column-reverse;
+    height: 100%;
 
     .affine-bookmark-content {
       width: 100%;
@@ -248,9 +246,6 @@ export const styles = css`
   }
 
   .affine-bookmark-card.cube {
-    width: ${EMBED_CARD_WIDTH.cube}px;
-    height: ${EMBED_CARD_HEIGHT.cube}px;
-
     .affine-bookmark-content {
       width: 100%;
       flex-direction: column;

blocksuite/affine/block-bookmark/tsconfig.json

@@ -8,7 +8,6 @@
   "include": ["./src"],
   "references": [
     { "path": "../block-embed" },
-    { "path": "../block-surface" },
     { "path": "../components" },
     { "path": "../model" },
     { "path": "../shared" },

blocksuite/affine/block-code/package.json

@@ -18,12 +18,13 @@
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.3",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.7",
+    "@toeverything/theme": "^1.1.11",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/block-code/src/adapters/html.ts

@@ -2,6 +2,7 @@ import { CodeBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockHtmlAdapterExtension,
   type BlockHtmlAdapterMatcher,
+  CODE_BLOCK_WRAP_KEY,
   HastUtils,
 } from '@blocksuite/affine-shared/adapters';
 import type { DeltaInsert } from '@blocksuite/inline';
@@ -37,7 +38,8 @@ export const codeBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
           ? codeLang.replace('code-', '')
           : undefined;
 
-      const { walkerContext, deltaConverter } = context;
+      const { walkerContext, deltaConverter, configs } = context;
+      const wrap = configs.get(CODE_BLOCK_WRAP_KEY) === 'true';
       walkerContext
         .openNode(
           {
@@ -46,6 +48,7 @@ export const codeBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
             flavour: 'affine:code',
             props: {
               language: codeLang ?? 'Plain Text',
+              wrap,
               text: {
                 '$blocksuite:internal:text$': true,
                 delta: deltaConverter.astToDelta(codeText, {

blocksuite/affine/block-code/src/adapters/markdown.ts

@@ -2,6 +2,7 @@ import { CodeBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockMarkdownAdapterExtension,
   type BlockMarkdownAdapterMatcher,
+  CODE_BLOCK_WRAP_KEY,
   type MarkdownAST,
 } from '@blocksuite/affine-shared/adapters';
 import type { DeltaInsert } from '@blocksuite/inline';
@@ -19,7 +20,8 @@ export const codeBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
       if (!isCodeNode(o.node)) {
         return;
       }
-      const { walkerContext } = context;
+      const { walkerContext, configs } = context;
+      const wrap = configs.get(CODE_BLOCK_WRAP_KEY) === 'true';
       walkerContext
         .openNode(
           {
@@ -28,6 +30,7 @@ export const codeBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
             flavour: 'affine:code',
             props: {
               language: o.node.lang ?? 'Plain Text',
+              wrap,
               text: {
                 '$blocksuite:internal:text$': true,
                 delta: [

blocksuite/affine/block-code/src/adapters/notion-html.ts

@@ -2,6 +2,7 @@ import { CodeBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockNotionHtmlAdapterExtension,
   type BlockNotionHtmlAdapterMatcher,
+  CODE_BLOCK_WRAP_KEY,
   HastUtils,
 } from '@blocksuite/affine-shared/adapters';
 import { nanoid } from '@blocksuite/store';
@@ -20,7 +21,8 @@ export const codeBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
         if (!code) {
           return;
         }
-        const { walkerContext, deltaConverter } = context;
+        const { walkerContext, deltaConverter, configs } = context;
+        const wrap = configs.get(CODE_BLOCK_WRAP_KEY) === 'true';
         const codeText =
           code.children.length === 1 && code.children[0].type === 'text'
             ? code.children[0]
@@ -33,6 +35,7 @@ export const codeBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
               flavour: CodeBlockSchema.model.flavour,
               props: {
                 language: 'Plain Text',
+                wrap,
                 text: {
                   '$blocksuite:internal:text$': true,
                   delta: deltaConverter.astToDelta(codeText, {

blocksuite/affine/block-code/src/clipboard/index.ts

@@ -1,8 +1,14 @@
+import { deleteTextCommand } from '@blocksuite/affine-components/rich-text';
 import {
   HtmlAdapter,
   pasteMiddleware,
   PlainTextAdapter,
 } from '@blocksuite/affine-shared/adapters';
+import {
+  getBlockIndexCommand,
+  getBlockSelectionsCommand,
+  getTextSelectionCommand,
+} from '@blocksuite/affine-shared/commands';
 import {
   type BlockComponent,
   Clipboard,
@@ -40,13 +46,13 @@ export class CodeClipboardController {
     this._std.command
       .chain()
       .try(cmd => [
-        cmd.getTextSelection().inline<'currentSelectionPath'>((ctx, next) => {
+        cmd.pipe(getTextSelectionCommand).pipe((ctx, next) => {
           const textSelection = ctx.currentTextSelection;
           if (!textSelection) return;
           const end = textSelection.to ?? textSelection.from;
           next({ currentSelectionPath: end.blockId });
         }),
-        cmd.getBlockSelections().inline<'currentSelectionPath'>((ctx, next) => {
+        cmd.pipe(getBlockSelectionsCommand).pipe((ctx, next) => {
           const currentBlockSelections = ctx.currentBlockSelections;
           if (!currentBlockSelections) return;
           const blockSelection = currentBlockSelections.at(-1);
@@ -54,9 +60,9 @@ export class CodeClipboardController {
           next({ currentSelectionPath: blockSelection.blockId });
         }),
       ])
-      .getBlockIndex()
-      .try(cmd => [cmd.getTextSelection().deleteText()])
-      .inline((ctx, next) => {
+      .pipe(getBlockIndexCommand)
+      .try(cmd => [cmd.pipe(getTextSelectionCommand).pipe(deleteTextCommand)])
+      .pipe((ctx, next) => {
         if (!ctx.parentBlock) {
           return;
         }

blocksuite/affine/block-code/src/code-block-config.ts

@@ -1,3 +1,4 @@
+import { ConfigExtensionFactory } from '@blocksuite/block-std';
 import type { BundledLanguageInfo, ThemeInput } from 'shiki';
 
 export interface CodeBlockConfig {
@@ -13,3 +14,6 @@ export interface CodeBlockConfig {
    */
   showLineNumbers?: boolean;
 }
+
+export const CodeBlockConfigExtension =
+  ConfigExtensionFactory<CodeBlockConfig>('affine:code');

blocksuite/affine/block-code/src/code-block-service.ts

@@ -12,6 +12,7 @@ import {
 } from 'shiki';
 import getWasm from 'shiki/wasm';
 
+import { CodeBlockConfigExtension } from './code-block-config.js';
 import {
   CODE_BLOCK_DEFAULT_DARK_THEME,
   CODE_BLOCK_DEFAULT_LIGHT_THEME,
@@ -27,7 +28,10 @@ export class CodeBlockService extends BlockService {
   highlighter$: Signal<HighlighterCore | null> = signal(null);
 
   get langs() {
-    return this.std.getConfig('affine:code')?.langs ?? bundledLanguagesInfo;
+    return (
+      this.std.getOptional(CodeBlockConfigExtension.identifier)?.langs ??
+      bundledLanguagesInfo
+    );
   }
 
   get themeKey() {
@@ -46,7 +50,9 @@ export class CodeBlockService extends BlockService {
       engine: createOnigurumaEngine(() => getWasm),
     })
       .then(async highlighter => {
-        const config = this.std.getConfig('affine:code');
+        const config = this.std.getOptional(
+          CodeBlockConfigExtension.identifier
+        );
         const darkTheme = config?.theme?.dark ?? CODE_BLOCK_DEFAULT_DARK_THEME;
         const lightTheme =
           config?.theme?.light ?? CODE_BLOCK_DEFAULT_LIGHT_THEME;

blocksuite/affine/block-code/src/code-block-spec.ts

@@ -1,7 +1,7 @@
 import {
   BlockViewExtension,
   FlavourExtension,
-  WidgetViewMapExtension,
+  WidgetViewExtension,
 } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';
@@ -14,13 +14,17 @@ import {
 import { CodeBlockService } from './code-block-service.js';
 import { AFFINE_CODE_TOOLBAR_WIDGET } from './code-toolbar/index.js';
 
+export const codeToolbarWidget = WidgetViewExtension(
+  'affine:code',
+  AFFINE_CODE_TOOLBAR_WIDGET,
+  literal`${unsafeStatic(AFFINE_CODE_TOOLBAR_WIDGET)}`
+);
+
 export const CodeBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:code'),
   CodeBlockService,
   BlockViewExtension('affine:code', literal`affine-code`),
-  WidgetViewMapExtension('affine:code', {
-    codeToolbar: literal`${unsafeStatic(AFFINE_CODE_TOOLBAR_WIDGET)}`,
-  }),
+  codeToolbarWidget,
   CodeBlockInlineManagerExtension,
   CodeBlockUnitSpecExtension,
   CodeBlockAdapterExtensions,

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

@@ -32,6 +32,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import type { ThemedToken } from 'shiki';
 
 import { CodeClipboardController } from './clipboard/index.js';
+import { CodeBlockConfigExtension } from './code-block-config.js';
 import { CodeBlockInlineManagerExtension } from './code-block-inline.js';
 import type { CodeBlockService } from './code-block-service.js';
 import { codeBlockStyles } from './styles.js';
@@ -383,7 +384,8 @@ export class CodeBlockComponent extends CaptionedBlockComponent<
 
   override renderBlock(): TemplateResult<1> {
     const showLineNumbers =
-      this.std.getConfig('affine:code')?.showLineNumbers ?? true;
+      this.std.getOptional(CodeBlockConfigExtension.identifier)
+        ?.showLineNumbers ?? true;
 
     return html`
       <div

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

@@ -1,4 +1,3 @@
-import { MoreVerticalIcon } from '@blocksuite/affine-components/icons';
 import { createLitPortal } from '@blocksuite/affine-components/portal';
 import type {
   EditorIconButton,
@@ -6,6 +5,7 @@ import type {
 } from '@blocksuite/affine-components/toolbar';
 import { renderGroups } from '@blocksuite/affine-components/toolbar';
 import { noop, WithDisposable } from '@blocksuite/global/utils';
+import { MoreVerticalIcon } from '@blocksuite/icons/lit';
 import { flip, offset } from '@floating-ui/dom';
 import { css, html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
@@ -132,7 +132,7 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
           ?disabled=${this.context.doc.readonly}
           @click=${() => this._toggleMoreMenu()}
         >
-          ${MoreVerticalIcon}
+          ${MoreVerticalIcon()}
         </editor-icon-button>
       </editor-toolbar>
     `;

blocksuite/affine/block-code/src/effects.ts

@@ -1,7 +1,4 @@
-import type * as CommandsType from '@blocksuite/affine-shared/commands';
-
 import { CodeBlockComponent } from './code-block';
-import type { CodeBlockConfig } from './code-block-config';
 import {
   AFFINE_CODE_TOOLBAR_WIDGET,
   AffineCodeToolbarWidget,
@@ -18,15 +15,7 @@ export function effects() {
   customElements.define('affine-code', CodeBlockComponent);
 }
 
-declare type _GLOBAL_ = typeof CommandsType;
-
 declare global {
-  namespace BlockSuite {
-    interface BlockConfigs {
-      'affine:code': CodeBlockConfig;
-    }
-  }
-
   interface HTMLElementTagNameMap {
     'language-list-button': LanguageListButton;
     'affine-code-toolbar': AffineCodeToolbar;

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

@@ -20,12 +20,13 @@
     "@blocksuite/block-std": "workspace:*",
     "@blocksuite/data-view": "workspace:*",
     "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.3",
     "@blocksuite/inline": "workspace:*",
     "@blocksuite/store": "workspace:*",
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.7",
+    "@toeverything/theme": "^1.1.11",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/block-data-view/src/data-view-block.ts

@@ -9,11 +9,7 @@ import {
   popMenu,
   popupTargetFromElement,
 } from '@blocksuite/affine-components/context-menu';
-import {
-  CopyIcon,
-  DeleteIcon,
-  MoreHorizontalIcon,
-} from '@blocksuite/affine-components/icons';
+import { CopyIcon, DeleteIcon } from '@blocksuite/affine-components/icons';
 import { PeekViewProvider } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
 import { NOTE_SELECTOR } from '@blocksuite/affine-shared/consts';
@@ -42,6 +38,7 @@ import {
   uniMap,
 } from '@blocksuite/data-view';
 import { widgetPresets } from '@blocksuite/data-view/widget-presets';
+import { MoreHorizontalIcon } from '@blocksuite/icons/lit';
 import { Slice } from '@blocksuite/store';
 import { computed, signal } from '@preact/signals-core';
 import { css, nothing, unsafeCSS } from 'lit';
@@ -244,7 +241,7 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
       return nothing;
     }
     return html` <div class="database-ops" @click="${this._clickDatabaseOps}">
-      ${MoreHorizontalIcon}
+      ${MoreHorizontalIcon()}
     </div>`;
   }
 

blocksuite/affine/block-data-view/src/effects.ts

@@ -1,14 +1,5 @@
 import { DataViewBlockComponent } from './data-view-block';
-import type { DataViewBlockModel } from './data-view-model';
 
 export function effects() {
   customElements.define('affine-data-view', DataViewBlockComponent);
 }
-
-declare global {
-  namespace BlockSuite {
-    interface BlockModels {
-      'affine:data-view': DataViewBlockModel;
-    }
-  }
-}

blocksuite/affine/block-database/package.json

@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.7",
+    "@toeverything/theme": "^1.1.11",
     "@types/mdast": "^4.0.4",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",

blocksuite/affine/block-database/src/adapters/html.ts

@@ -6,162 +6,17 @@ import {
 import {
   BlockHtmlAdapterExtension,
   type BlockHtmlAdapterMatcher,
-  HastUtils,
   type InlineHtmlAST,
-  TextUtils,
 } from '@blocksuite/affine-shared/adapters';
-import { nanoid } from '@blocksuite/store';
 import type { Element } from 'hast';
 
 import { processTable } from './utils';
 
-const DATABASE_NODE_TYPES = new Set(['table', 'thead', 'tbody', 'th', 'tr']);
-
 export const databaseBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
   flavour: DatabaseBlockSchema.model.flavour,
-  toMatch: o =>
-    HastUtils.isElement(o.node) && DATABASE_NODE_TYPES.has(o.node.tagName),
+  toMatch: () => false,
   fromMatch: o => o.node.flavour === DatabaseBlockSchema.model.flavour,
-  toBlockSnapshot: {
-    enter: (o, context) => {
-      if (!HastUtils.isElement(o.node)) {
-        return;
-      }
-      const { walkerContext } = context;
-      if (o.node.tagName === 'table') {
-        const tableHeader = HastUtils.querySelector(o.node, 'thead');
-        if (!tableHeader) {
-          return;
-        }
-        const tableHeaderRow = HastUtils.querySelector(tableHeader, 'tr');
-        if (!tableHeaderRow) {
-          return;
-        }
-        // Table header row as database header row
-        const viewsColumns = tableHeaderRow.children.map(() => {
-          return {
-            id: nanoid(),
-            hide: false,
-            width: 180,
-          };
-        });
-
-        // Build database cells from table body rows
-        const cells = Object.create(null);
-        const tableBody = HastUtils.querySelector(o.node, 'tbody');
-        tableBody?.children.forEach(row => {
-          const rowId = nanoid();
-          cells[rowId] = Object.create(null);
-          (row as Element).children.forEach((cell, index) => {
-            const column = viewsColumns[index];
-            if (!column) {
-              return;
-            }
-            cells[rowId][column.id] = {
-              columnId: column.id,
-              value: TextUtils.createText(
-                (cell as Element).children
-                  .map(child => ('value' in child ? child.value : ''))
-                  .join('')
-              ),
-            };
-          });
-        });
-
-        // Build database columns from table header row
-        const columns = tableHeaderRow.children.flatMap((_child, index) => {
-          const column = viewsColumns[index];
-          if (!column) {
-            return [];
-          }
-          return {
-            type: index === 0 ? 'title' : 'rich-text',
-            name: (_child as Element).children
-              .map(child => ('value' in child ? child.value : ''))
-              .join(''),
-            data: {},
-            id: column.id,
-          };
-        });
-
-        walkerContext.openNode(
-          {
-            type: 'block',
-            id: nanoid(),
-            flavour: 'affine:database',
-            props: {
-              views: [
-                {
-                  id: nanoid(),
-                  name: 'Table View',
-                  mode: 'table',
-                  columns: [],
-                  filter: {
-                    type: 'group',
-                    op: 'and',
-                    conditions: [],
-                  },
-                  header: {
-                    titleColumn: viewsColumns[0]?.id,
-                    iconColumn: 'type',
-                  },
-                },
-              ],
-              title: {
-                '$blocksuite:internal:text$': true,
-                delta: [],
-              },
-              cells,
-              columns,
-            },
-            children: [],
-          },
-          'children'
-        );
-        walkerContext.setNodeContext('affine:table:rowid', Object.keys(cells));
-        walkerContext.skipChildren(1);
-      }
-
-      // The first child of each table body row is the database title cell
-      if (o.node.tagName === 'tr') {
-        const { deltaConverter } = context;
-        const firstChild = o.node.children[0];
-        if (!firstChild) {
-          return;
-        }
-        walkerContext
-          .openNode({
-            type: 'block',
-            id:
-              (
-                walkerContext.getNodeContext(
-                  'affine:table:rowid'
-                ) as Array<string>
-              ).shift() ?? nanoid(),
-            flavour: 'affine:paragraph',
-            props: {
-              text: {
-                '$blocksuite:internal:text$': true,
-                delta: deltaConverter.astToDelta(firstChild),
-              },
-              type: 'text',
-            },
-            children: [],
-          })
-          .closeNode();
-        walkerContext.skipAllChildren();
-      }
-    },
-    leave: (o, context) => {
-      if (!HastUtils.isElement(o.node)) {
-        return;
-      }
-      const { walkerContext } = context;
-      if (o.node.tagName === 'table') {
-        walkerContext.closeNode();
-      }
-    },
-  },
+  toBlockSnapshot: {},
   fromBlockSnapshot: {
     enter: (o, context) => {
       const { walkerContext } = context;

blocksuite/affine/block-database/src/adapters/markdown.ts

@@ -7,9 +7,7 @@ import {
   BlockMarkdownAdapterExtension,
   type BlockMarkdownAdapterMatcher,
   type MarkdownAST,
-  TextUtils,
 } from '@blocksuite/affine-shared/adapters';
-import { nanoid } from '@blocksuite/store';
 import type { TableRow } from 'mdast';
 
 import { processTable } from './utils';
@@ -24,123 +22,7 @@ export const databaseBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher =
     flavour: DatabaseBlockSchema.model.flavour,
     toMatch: o => isDatabaseNode(o.node),
     fromMatch: o => o.node.flavour === DatabaseBlockSchema.model.flavour,
-    toBlockSnapshot: {
-      enter: (o, context) => {
-        const { walkerContext } = context;
-        if (o.node.type === 'table') {
-          const viewsColumns = o.node.children[0]?.children.map(() => {
-            return {
-              id: nanoid(),
-              hide: false,
-              width: 180,
-            };
-          });
-          const cells = Object.create(null);
-          o.node.children.slice(1).forEach(row => {
-            const rowId = nanoid();
-            cells[rowId] = Object.create(null);
-            row.children.slice(1).forEach((cell, index) => {
-              const column = viewsColumns?.[index + 1];
-              if (!column) {
-                return;
-              }
-              cells[rowId][column.id] = {
-                columnId: column.id,
-                value: TextUtils.createText(
-                  cell.children
-                    .map(child => ('value' in child ? child.value : ''))
-                    .join('')
-                ),
-              };
-            });
-          });
-          const columns = o.node.children[0]?.children.map((_child, index) => {
-            return {
-              type: index === 0 ? 'title' : 'rich-text',
-              name: _child.children
-                .map(child => ('value' in child ? child.value : ''))
-                .join(''),
-              data: {},
-              id: viewsColumns?.[index]?.id,
-            };
-          });
-          walkerContext.openNode(
-            {
-              type: 'block',
-              id: nanoid(),
-              flavour: 'affine:database',
-              props: {
-                views: [
-                  {
-                    id: nanoid(),
-                    name: 'Table View',
-                    mode: 'table',
-                    columns: [],
-                    filter: {
-                      type: 'group',
-                      op: 'and',
-                      conditions: [],
-                    },
-                    header: {
-                      titleColumn: viewsColumns?.[0]?.id,
-                      iconColumn: 'type',
-                    },
-                  },
-                ],
-                title: {
-                  '$blocksuite:internal:text$': true,
-                  delta: [],
-                },
-                cells,
-                columns,
-              },
-              children: [],
-            },
-            'children'
-          );
-          walkerContext.setNodeContext(
-            'affine:table:rowid',
-            Object.keys(cells)
-          );
-          walkerContext.skipChildren(1);
-        }
-
-        if (o.node.type === 'tableRow') {
-          const { deltaConverter } = context;
-          const firstChild = o.node.children[0];
-          if (!firstChild) {
-            return;
-          }
-          walkerContext
-            .openNode({
-              type: 'block',
-              id:
-                (
-                  walkerContext.getNodeContext(
-                    'affine:table:rowid'
-                  ) as Array<string>
-                ).shift() ?? nanoid(),
-              flavour: 'affine:paragraph',
-              props: {
-                text: {
-                  '$blocksuite:internal:text$': true,
-                  delta: deltaConverter.astToDelta(firstChild),
-                },
-                type: 'text',
-              },
-              children: [],
-            })
-            .closeNode();
-          walkerContext.skipAllChildren();
-        }
-      },
-      leave: (o, context) => {
-        const { walkerContext } = context;
-        if (o.node.type === 'table') {
-          walkerContext.closeNode();
-        }
-      },
-    },
+    toBlockSnapshot: {},
     fromBlockSnapshot: {
       enter: (o, context) => {
         const { walkerContext, deltaConverter } = context;

blocksuite/affine/block-database/src/adapters/notion-html.ts

@@ -1,9 +1,9 @@
 import { DatabaseBlockSchema } from '@blocksuite/affine-model';
 import {
+  AdapterTextUtils,
   BlockNotionHtmlAdapterExtension,
   type BlockNotionHtmlAdapterMatcher,
   HastUtils,
-  TextUtils,
 } from '@blocksuite/affine-shared/adapters';
 import { getTagColor } from '@blocksuite/data-view';
 import { type BlockSnapshot, nanoid } from '@blocksuite/store';
@@ -219,7 +219,7 @@ export const databaseBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatche
                     column.type = 'rich-text';
                     row[column.id] = {
                       columnId: column.id,
-                      value: TextUtils.createText(text),
+                      value: AdapterTextUtils.createText(text),
                     };
                   } else {
                     row[column.id] = {
@@ -235,11 +235,11 @@ export const databaseBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatche
                 }
                 if (
                   column.type === 'rich-text' &&
-                  !TextUtils.isText(row[column.id].value)
+                  !AdapterTextUtils.isText(row[column.id].value)
                 ) {
                   row[column.id] = {
                     columnId: column.id,
-                    value: TextUtils.createText(row[column.id].value),
+                    value: AdapterTextUtils.createText(row[column.id].value),
                   };
                 }
               });

blocksuite/affine/block-database/src/commands.ts

@@ -1,5 +1,5 @@
 import type { DatabaseBlockModel } from '@blocksuite/affine-model';
-import type { BlockCommands, Command } from '@blocksuite/block-std';
+import type { Command } from '@blocksuite/block-std';
 import type { BlockModel, Store } from '@blocksuite/store';
 
 import {
@@ -8,12 +8,14 @@ import {
 } from './data-source';
 
 export const insertDatabaseBlockCommand: Command<
-  'selectedModels',
-  'insertedDatabaseBlockId',
   {
+    selectedModels?: BlockModel[];
     viewType: string;
     place?: 'after' | 'before';
     removeEmptyLine?: boolean;
+  },
+  {
+    insertedDatabaseBlockId: string;
   }
 > = (ctx, next) => {
   const { selectedModels, viewType, place, removeEmptyLine, std } = ctx;
@@ -65,7 +67,3 @@ export const initDatabaseBlock = (
     doc.addBlock('affine:paragraph', {}, parent.id);
   }
 };
-
-export const commands: BlockCommands = {
-  insertDatabaseBlock: insertDatabaseBlockCommand,
-};

blocksuite/affine/block-database/src/config.ts

@@ -1,6 +1,10 @@
 import type { MenuOptions } from '@blocksuite/affine-components/context-menu';
 import { type DatabaseBlockModel } from '@blocksuite/affine-model';
+import { ConfigExtensionFactory } from '@blocksuite/block-std';
 
 export interface DatabaseOptionsConfig {
   configure: (model: DatabaseBlockModel, options: MenuOptions) => MenuOptions;
 }
+
+export const DatabaseConfigExtension =
+  ConfigExtensionFactory<DatabaseOptionsConfig>('affine:database');

blocksuite/affine/block-database/src/data-source.ts

@@ -3,6 +3,7 @@ import type {
   ColumnUpdater,
   DatabaseBlockModel,
 } from '@blocksuite/affine-model';
+import { getSelectedModelsCommand } from '@blocksuite/affine-shared/commands';
 import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import {
   insertPositionToIndex,
@@ -33,8 +34,6 @@ import {
 } from './properties/index.js';
 import {
   addProperty,
-  applyCellsUpdate,
-  applyPropertyUpdate,
   copyCellsByProperty,
   deleteRows,
   deleteView,
@@ -168,7 +167,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
         columnId: propertyId,
         value: newValue,
       });
-      applyCellsUpdate(this._model);
     }
   }
 
@@ -198,7 +196,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
       insertToPosition,
       property.create(this.newPropertyName())
     );
-    applyPropertyUpdate(this._model);
     return result;
   }
 
@@ -282,7 +279,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   propertyDataSet(propertyId: string, data: Record<string, unknown>): void {
     this._runCapture();
     this.updateProperty(propertyId, () => ({ data }));
-    applyPropertyUpdate(this._model);
   }
 
   propertyDataTypeGet(propertyId: string): TypeInstance | undefined {
@@ -336,7 +332,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
       schema
     );
     copyCellsByProperty(this._model, copyId, id);
-    applyPropertyUpdate(this._model);
     return id;
   }
 
@@ -365,7 +360,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
   propertyNameSet(propertyId: string, name: string): void {
     this.doc.captureSync();
     this.updateProperty(propertyId, () => ({ name }));
-    applyPropertyUpdate(this._model);
   }
 
   override propertyReadonlyGet(propertyId: string): boolean {
@@ -420,7 +414,6 @@ export class DatabaseBlockDataSource extends DataSourceBase {
       }
     });
     updateCells(this._model, propertyId, cells);
-    applyPropertyUpdate(this._model);
   }
 
   rowAdd(insertPosition: InsertToPosition | number): string {
@@ -517,12 +510,9 @@ export const databaseViewInitTemplate = (
   datasource.viewManager.viewAdd(viewType);
 };
 export const convertToDatabase = (host: EditorHost, viewType: string) => {
-  const [_, ctx] = host.std.command
-    .chain()
-    .getSelectedModels({
-      types: ['block', 'text'],
-    })
-    .run();
+  const [_, ctx] = host.std.command.exec(getSelectedModelsCommand, {
+    types: ['block', 'text'],
+  });
   const { selectedModels } = ctx;
   const firstModel = selectedModels?.[0];
   if (!firstModel) return;

blocksuite/affine/block-database/src/database-block.ts

@@ -4,7 +4,7 @@ import {
   popMenu,
   popupTargetFromElement,
 } from '@blocksuite/affine-components/context-menu';
-import { DragIndicator } from '@blocksuite/affine-components/drag-indicator';
+import { DropIndicator } from '@blocksuite/affine-components/drop-indicator';
 import { PeekViewProvider } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
 import type { DatabaseBlockModel } from '@blocksuite/affine-model';
@@ -48,7 +48,10 @@ import { computed, signal } from '@preact/signals-core';
 import { css, html, nothing, unsafeCSS } from 'lit';
 
 import { popSideDetail } from './components/layout.js';
-import type { DatabaseOptionsConfig } from './config.js';
+import {
+  DatabaseConfigExtension,
+  type DatabaseOptionsConfig,
+} from './config.js';
 import { HostContextKey } from './context/host-context.js';
 import { DatabaseBlockDataSource } from './data-source.js';
 import { BlockRenderer } from './detail-panel/block-renderer.js';
@@ -241,7 +244,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     }
   );
 
-  indicator = new DragIndicator();
+  indicator = new DropIndicator();
 
   onDrag = (evt: MouseEvent, id: string): (() => void) => {
     const result = getDropResult(evt);
@@ -334,11 +337,6 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
       this._dataSource.contextSet(HostContextKey, this.host);
       const id = currentViewStorage.getCurrentView(this.model.id);
       if (id && this.dataSource.viewManager.viewGet(id)) {
-        console.log(
-          'set current view',
-          id,
-          this._dataSource.viewManager.viewGet(id)
-        );
         this.dataSource.viewManager.setCurrentView(id);
       }
     }
@@ -348,7 +346,7 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
   get optionsConfig(): DatabaseOptionsConfig {
     return {
       configure: (_model, options) => options,
-      ...this.std.getConfig('affine:database'),
+      ...this.std.getOptional(DatabaseConfigExtension.identifier),
     };
   }
 

blocksuite/affine/block-database/src/database-dnd-preview-block.ts

@@ -0,0 +1,58 @@
+import type { DatabaseBlockModel } from '@blocksuite/affine-model';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { BlockComponent } from '@blocksuite/block-std';
+import { DatabaseListViewIcon } from '@blocksuite/icons/lit';
+import { css, html } from 'lit';
+
+export class DatabaseDndPreviewBlockComponent extends BlockComponent<DatabaseBlockModel> {
+  static override styles = css`
+    .affine-database-preview-container {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 4px;
+      box-sizing: border-box;
+
+      border-radius: 8px;
+      background-color: ${unsafeCSSVarV2(
+        'layer/background/overlayPanel',
+        '#FBFBFC'
+      )};
+    }
+
+    .database-preview-content {
+      padding: 4px 16px;
+      display: flex;
+      gap: 8px;
+    }
+
+    .database-preview-content > svg {
+      color: ${unsafeCSSVarV2('icon/primary', '#77757D')};
+    }
+
+    .database-preview-content > .text {
+      color: var(--affine-text-primary-color);
+      color: ${unsafeCSSVarV2('text/primary', '#121212')};
+      font-size: 14px;
+      line-height: 24px;
+    }
+  `;
+
+  override renderBlock() {
+    return html`<div
+      class="affine-database-preview-container"
+      contenteditable="false"
+    >
+      <div class="database-preview-content">
+        ${DatabaseListViewIcon({ width: '24px', height: '24px' })}
+        <span class="text">Database Block</span>
+      </div>
+    </div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-dnd-preview-database': DatabaseDndPreviewBlockComponent;
+  }
+}

blocksuite/affine/block-database/src/database-spec.ts

@@ -1,17 +1,11 @@
-import {
-  BlockViewExtension,
-  CommandExtension,
-  FlavourExtension,
-} from '@blocksuite/block-std';
+import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
 import { DatabaseBlockAdapterExtensions } from './adapters/extension.js';
-import { commands } from './commands.js';
 
 export const DatabaseBlockSpec: ExtensionType[] = [
   FlavourExtension('affine:database'),
-  CommandExtension(commands),
   BlockViewExtension('affine:database', literal`affine-database`),
   DatabaseBlockAdapterExtensions,
 ].flat();

blocksuite/affine/block-database/src/detail-panel/block-renderer.ts

@@ -76,10 +76,6 @@ export class BlockRenderer
     return this.host?.doc.getBlock(this.rowId)?.model;
   }
 
-  get service() {
-    return this.host.std.getService('affine:database');
-  }
-
   override connectedCallback() {
     super.connectedCallback();
     if (this.model && this.model.text) {
@@ -131,7 +127,7 @@ export class BlockRenderer
         .attributesSchema=${this.attributesSchema}
         .attributeRenderer=${this.attributeRenderer}
         .embedChecker=${this.inlineManager.embedChecker}
-        .markdownShortcutHandler=${this.inlineManager.markdownShortcutHandler}
+        .markdownMatches=${this.inlineManager.markdownMatches}
         class="inline-editor"
       ></rich-text>
     `;

blocksuite/affine/block-database/src/detail-panel/note-renderer.ts

@@ -1,14 +1,14 @@
-import type {
-  DatabaseBlockModel,
-  RootBlockModel,
+import {
+  CodeBlockModel,
+  type DatabaseBlockModel,
+  ListBlockModel,
+  ParagraphBlockModel,
+  type RootBlockModel,
 } from '@blocksuite/affine-model';
 import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
 import { TelemetryProvider } from '@blocksuite/affine-shared/services';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
-import {
-  createDefaultDoc,
-  matchFlavours,
-} from '@blocksuite/affine-shared/utils';
+import { createDefaultDoc, matchModels } from '@blocksuite/affine-shared/utils';
 import { type EditorHost, ShadowlessElement } from '@blocksuite/block-std';
 import type { DetailSlotProps, SingleView } from '@blocksuite/data-view';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
@@ -72,10 +72,10 @@ export class NoteRenderer
         note.root.children
           .find(child => child.flavour === 'affine:note')
           ?.children.find(block =>
-            matchFlavours(block, [
-              'affine:paragraph',
-              'affine:list',
-              'affine:code',
+            matchModels(block, [
+              ParagraphBlockModel,
+              ListBlockModel,
+              CodeBlockModel,
             ])
           );
       }

blocksuite/affine/block-database/src/effects.ts

@@ -1,8 +1,7 @@
-import type { insertDatabaseBlockCommand } from './commands';
 import { CenterPeek } from './components/layout';
 import { DatabaseTitle } from './components/title';
-import type { DatabaseOptionsConfig } from './config';
 import { DatabaseBlockComponent } from './database-block';
+import { DatabaseDndPreviewBlockComponent } from './database-dnd-preview-block';
 import { BlockRenderer } from './detail-panel/block-renderer';
 import { NoteRenderer } from './detail-panel/note-renderer';
 import { LinkCell, LinkCellEditing } from './properties/link/cell-renderer';
@@ -37,27 +36,9 @@ export function effects() {
   customElements.define('database-datasource-block-renderer', BlockRenderer);
   customElements.define('affine-database-link-node', LinkNode);
   customElements.define('affine-database', DatabaseBlockComponent);
-}
-
-declare global {
-  namespace BlockSuite {
-    interface BlockConfigs {
-      'affine:database': Partial<DatabaseOptionsConfig>;
-    }
-
-    interface CommandContext {
-      insertedDatabaseBlockId?: string;
-    }
-
-    interface Commands {
-      /**
-       * insert a database block after or before the current block selection
-       * @param latex the LaTeX content. A input dialog will be shown if not provided
-       * @param removeEmptyLine remove the current block if it is empty
-       * @param place where to insert the LaTeX block
-       * @returns the id of the inserted LaTeX block
-       */
-      insertDatabaseBlock: typeof insertDatabaseBlockCommand;
-    }
-  }
+
+  customElements.define(
+    'affine-dnd-preview-database',
+    DatabaseDndPreviewBlockComponent
+  );
 }

blocksuite/affine/block-database/src/index.ts

@@ -1,9 +1,6 @@
-import type * as CommandType from '@blocksuite/affine-shared/commands';
-
-declare type _GLOBAL_ = typeof CommandType;
-
 export * from './adapters';
-export type { DatabaseOptionsConfig } from './config';
+export * from './commands';
+export * from './config';
 export * from './data-source';
 export * from './database-block';
 export * from './database-spec';

blocksuite/affine/block-database/src/properties/rich-text/cell-renderer.ts

@@ -221,7 +221,7 @@ export class RichTextCell extends BaseRichTextCell {
         .attributesSchema=${this.attributesSchema}
         .attributeRenderer=${this.attributeRenderer}
         .embedChecker=${this.inlineManager?.embedChecker}
-        .markdownShortcutHandler=${this.inlineManager?.markdownShortcutHandler}
+        .markdownMatches=${this.inlineManager?.markdownMatches}
         .readonly=${true}
         class="affine-database-rich-text inline-editor"
       ></rich-text>`
@@ -518,12 +518,14 @@ export class RichTextCellEditing extends BaseRichTextCell {
 
   override render() {
     return html`<rich-text
+      data-disable-ask-ai
+      data-not-block-text
       .yText=${this.value}
       .inlineEventSource=${this.topContenteditableElement}
       .attributesSchema=${this.attributesSchema}
       .attributeRenderer=${this.attributeRenderer}
       .embedChecker=${this.inlineManager?.embedChecker}
-      .markdownShortcutHandler=${this.inlineManager?.markdownShortcutHandler}
+      .markdownMatches=${this.inlineManager?.markdownMatches}
       .verticalScrollContainerGetter=${() =>
         this.topContenteditableElement?.host
           ? getViewportElement(this.topContenteditableElement.host)

blocksuite/affine/block-database/src/properties/title/text.ts

@@ -123,10 +123,6 @@ abstract class BaseTextCell extends BaseCellRenderer<Text> {
     return this.host?.std.get(DefaultInlineManagerExtension.identifier);
   }
 
-  get service() {
-    return this.host?.std.getService('affine:database');
-  }
-
   get topContenteditableElement() {
     const databaseBlock =
       this.closest<DatabaseBlockComponent>('affine-database');
@@ -191,7 +187,7 @@ export class HeaderAreaTextCell extends BaseTextCell {
       .attributesSchema="${this.attributesSchema}"
       .attributeRenderer="${this.attributeRenderer}"
       .embedChecker="${this.inlineManager?.embedChecker}"
-      .markdownShortcutHandler="${this.inlineManager?.markdownShortcutHandler}"
+      .markdownMatches="${this.inlineManager?.markdownMatches}"
       .readonly="${true}"
       class="data-view-header-area-rich-text"
     ></rich-text>`;
@@ -388,12 +384,14 @@ export class HeaderAreaTextCellEditing extends BaseTextCell {
 
   override renderBlockText() {
     return html` <rich-text
+      data-disable-ask-ai
+      data-not-block-text
       .yText="${this.value}"
       .inlineEventSource="${this.topContenteditableElement}"
       .attributesSchema="${this.attributesSchema}"
       .attributeRenderer="${this.attributeRenderer}"
       .embedChecker="${this.inlineManager?.embedChecker}"
-      .markdownShortcutHandler="${this.inlineManager?.markdownShortcutHandler}"
+      .markdownMatches="${this.inlineManager?.markdownMatches}"
       .readonly="${this.readonly}"
       .enableClipboard="${false}"
       .verticalScrollContainerGetter="${() =>
@@ -407,6 +405,8 @@ export class HeaderAreaTextCellEditing extends BaseTextCell {
 
   override renderLinkedDoc(): TemplateResult {
     return html` <rich-text
+      data-disable-ask-ai
+      data-not-block-text
       .yText="${this.linkedDocTitle$.value}"
       .inlineEventSource="${this.topContenteditableElement}"
       .readonly="${this.readonly}"

blocksuite/affine/block-database/src/selection.ts

@@ -65,12 +65,4 @@ export class DatabaseSelection extends BaseSelection {
   }
 }
 
-declare global {
-  namespace BlockSuite {
-    interface Selection {
-      database: typeof DatabaseSelection;
-    }
-  }
-}
-
 export const DatabaseSelectionExtension = SelectionExtension(DatabaseSelection);

blocksuite/affine/block-database/src/utils/block-utils.ts

@@ -37,24 +37,6 @@ export function addProperty(
   return id;
 }
 
-export function applyCellsUpdate(model: DatabaseBlockModel) {
-  model.doc.updateBlock(model, {
-    cells: model.cells,
-  });
-}
-
-export function applyPropertyUpdate(model: DatabaseBlockModel) {
-  model.doc.updateBlock(model, {
-    columns: model.columns,
-  });
-}
-
-export function applyViewsUpdate(model: DatabaseBlockModel) {
-  model.doc.updateBlock(model, {
-    views: model.views,
-  });
-}
-
 export function copyCellsByProperty(
   model: DatabaseBlockModel,
   fromId: Column['id'],
@@ -156,7 +138,6 @@ export function moveViewTo(
       arr => insertPositionToIndex(position, arr)
     );
   });
-  applyViewsUpdate(model);
 }
 
 export function updateCell(
@@ -255,6 +236,5 @@ export const updateView = <ViewData extends ViewBasicDataType>(
       return { ...v, ...update(v as ViewData) };
     });
   });
-  applyViewsUpdate(model);
 };
 export const DATABASE_CONVERT_WHITE_LIST = ['affine:list', 'affine:paragraph'];

blocksuite/affine/block-divider/package.json

@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.7",
+    "@toeverything/theme": "^1.1.11",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.7",
+    "@toeverything/theme": "^1.1.11",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "zod": "^3.23.8"

blocksuite/affine/block-edgeless-text/src/commands/index.ts

@@ -1,7 +1 @@
-import type { BlockCommands } from '@blocksuite/block-std';
-
-import { insertEdgelessTextCommand } from './insert-edgeless-text.js';
-
-export const commands: BlockCommands = {
-  insertEdgelessText: insertEdgelessTextCommand,
-};
+export { insertEdgelessTextCommand } from './insert-edgeless-text.js';

blocksuite/affine/block-edgeless-text/src/commands/insert-edgeless-text.ts

@@ -14,11 +14,12 @@ import {
 } from '../edgeless-text-block.js';
 
 export const insertEdgelessTextCommand: Command<
-  never,
-  'textId',
   {
     x: number;
     y: number;
+  },
+  {
+    textId: string;
   }
 > = (ctx, next) => {
   const { std, x, y } = ctx;

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

@@ -1,7 +1,12 @@
 import { TextUtils } from '@blocksuite/affine-block-surface';
-import type { EdgelessTextBlockModel } from '@blocksuite/affine-model';
+import { formatBlockCommand } from '@blocksuite/affine-components/rich-text';
+import {
+  type EdgelessTextBlockModel,
+  ListBlockModel,
+  ParagraphBlockModel,
+} from '@blocksuite/affine-model';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
-import { matchFlavours } from '@blocksuite/affine-shared/utils';
+import { matchModels } from '@blocksuite/affine-shared/utils';
 import type { BlockComponent } from '@blocksuite/block-std';
 import {
   BlockSelection,
@@ -98,21 +103,21 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
             );
 
             if (key === 'fontStyle') {
-              command.exec('formatBlock', {
+              command.exec(formatBlockCommand, {
                 blockSelections,
                 styles: {
                   italic: null,
                 },
               });
             } else if (key === 'color') {
-              command.exec('formatBlock', {
+              command.exec(formatBlockCommand, {
                 blockSelections,
                 styles: {
                   color: null,
                 },
               });
             } else if (key === 'fontWeight') {
-              command.exec('formatBlock', {
+              command.exec(formatBlockCommand, {
                 blockSelections,
                 styles: {
                   bold: null,
@@ -157,7 +162,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
         const firstChild = this.model.firstChild();
         if (
           !firstChild ||
-          !matchFlavours(firstChild, ['affine:list', 'affine:paragraph'])
+          !matchModels(firstChild, [ListBlockModel, ParagraphBlockModel])
         ) {
           newParagraphId = this.doc.addBlock(
             'affine:paragraph',
@@ -170,7 +175,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
         const lastChild = this.model.lastChild();
         if (
           !lastChild ||
-          !matchFlavours(lastChild, ['affine:list', 'affine:paragraph'])
+          !matchModels(lastChild, [ListBlockModel, ParagraphBlockModel])
         ) {
           newParagraphId = this.doc.addBlock(
             'affine:paragraph',
@@ -263,6 +268,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
       boxShadow: editing ? '0px 0px 0px 2px rgba(30, 150, 235, 0.3)' : 'none',
       fontWeight: '400',
       lineHeight: 'var(--affine-line-height)',
+      minWidth: !hasMaxWidth ? '220px' : undefined,
     };
 
     return html`

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

@@ -1,10 +1,7 @@
-import { BlockViewExtension, CommandExtension } from '@blocksuite/block-std';
+import { BlockViewExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { commands } from './commands/index.js';
-
 export const EdgelessTextBlockSpec: ExtensionType[] = [
-  CommandExtension(commands),
   BlockViewExtension('affine:edgeless-text', literal`affine-edgeless-text`),
 ];

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

@@ -1,17 +1,5 @@
-import type { insertEdgelessTextCommand } from './commands/insert-edgeless-text';
 import { EdgelessTextBlockComponent } from './edgeless-text-block';
 
 export function effects() {
   customElements.define('affine-edgeless-text', EdgelessTextBlockComponent);
 }
-
-declare global {
-  namespace BlockSuite {
-    interface CommandContext {
-      textId?: string;
-    }
-    interface Commands {
-      insertEdgelessText: typeof insertEdgelessTextCommand;
-    }
-  }
-}

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

@@ -1,6 +1,3 @@
-import type * as CommandType from '@blocksuite/affine-shared/commands';
-
-declare type _GLOBAL_ = typeof CommandType;
-
+export * from './commands';
 export * from './edgeless-text-block.js';
 export * from './edgeless-text-spec.js';

blocksuite/affine/block-embed/package.json

@@ -25,14 +25,14 @@
     "@floating-ui/dom": "^1.6.10",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.7",
+    "@toeverything/theme": "^1.1.11",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "yjs": "^13.6.21",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "vitest": "3.0.2"
+    "vitest": "3.0.6"
   },
   "exports": {
     ".": "./src/index.ts",

blocksuite/affine/block-embed/src/common/embed-block-element.ts

@@ -9,13 +9,14 @@ import {
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
-import { BlockSelection, type BlockService } from '@blocksuite/block-std';
+import type { BlockService } from '@blocksuite/block-std';
 import type { GfxCompatibleProps } from '@blocksuite/block-std/gfx';
 import type { BlockModel } from '@blocksuite/store';
+import { computed, type ReadonlySignal } from '@preact/signals-core';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 import { query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 export class EmbedBlockComponent<
@@ -23,6 +24,12 @@ export class EmbedBlockComponent<
   Service extends BlockService = BlockService,
   WidgetName extends string = string,
 > extends CaptionedBlockComponent<Model, Service, WidgetName> {
+  selectedStyle$: ReadonlySignal<ClassInfo> | null = computed<ClassInfo>(
+    () => ({
+      'selected-style': this.selected$.value,
+    })
+  );
+
   private _fetchAbortController = new AbortController();
 
   _cardStyle: EmbedCardStyle = 'horizontal';
@@ -50,19 +57,17 @@ export class EmbedBlockComponent<
     ) {
       this.style.display = 'block';
 
-      const mode = this.std.get(DocModeProvider).getEditorMode();
-      if (mode === 'edgeless') {
+      if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
         this.style.minWidth = `${EMBED_CARD_MIN_WIDTH}px`;
       }
     }
 
-    const selected = !!this.selected?.is(BlockSelection);
     return html`
       <div
         draggable="${this.blockDraggable ? 'true' : 'false'}"
         class=${classMap({
           'embed-block-container': true,
-          'selected-style': selected,
+          ...this.selectedStyle$?.value,
         })}
         style=${styleMap({
           height: `${this._cardHeight}px`,

blocksuite/affine/block-embed/src/common/render-linked-doc.ts

@@ -1,12 +1,15 @@
 import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
 import {
   type DocMode,
-  type ImageBlockModel,
+  ImageBlockModel,
+  ListBlockModel,
+  NoteBlockModel,
   NoteDisplayMode,
+  ParagraphBlockModel,
 } from '@blocksuite/affine-model';
 import { EMBED_CARD_HEIGHT } from '@blocksuite/affine-shared/consts';
 import { NotificationProvider } from '@blocksuite/affine-shared/services';
-import { matchFlavours, SpecProvider } from '@blocksuite/affine-shared/utils';
+import { matchModels, SpecProvider } from '@blocksuite/affine-shared/utils';
 import { BlockStdScope } from '@blocksuite/block-std';
 import { assertExists } from '@blocksuite/global/utils';
 import {
@@ -68,7 +71,7 @@ async function renderPageAsBanner(card: EmbedSyncedDocCard) {
   }
 
   const target = notes.flatMap(note =>
-    note.children.filter(child => matchFlavours(child, ['affine:image']))
+    note.children.filter(child => matchModels(child, [ImageBlockModel]))
   )[0];
 
   if (target) {
@@ -135,13 +138,11 @@ async function renderNoteContent(
 
   const cardStyle = card.model.style;
   const isHorizontal = cardStyle === 'horizontal';
-  const allowFlavours: (keyof BlockSuite.BlockModels)[] = isHorizontal
-    ? []
-    : ['affine:image'];
+  const allowFlavours = isHorizontal ? [] : [ImageBlockModel];
 
   const noteChildren = notes.flatMap(note =>
     note.children.filter(model => {
-      if (matchFlavours(model, allowFlavours)) {
+      if (matchModels(model, allowFlavours)) {
         return true;
       }
       return filterTextModel(model);
@@ -196,7 +197,7 @@ async function renderNoteContent(
     match: ids.map(id => ({ id, viewType: 'display' })),
   };
   const previewDoc = doc.doc.getStore({ query });
-  const previewSpec = SpecProvider.getInstance().getSpec('page:preview');
+  const previewSpec = SpecProvider._.getSpec('preview:page');
   const previewStd = new BlockStdScope({
     store: previewDoc,
     extensions: previewSpec.value,
@@ -214,7 +215,7 @@ async function renderNoteContent(
 }
 
 function filterTextModel(model: BlockModel) {
-  if (matchFlavours(model, ['affine:paragraph', 'affine:list'])) {
+  if (matchModels(model, [ParagraphBlockModel, ListBlockModel])) {
     return !!model.text?.toString().length;
   }
   return false;
@@ -223,7 +224,7 @@ function filterTextModel(model: BlockModel) {
 export function getNotesFromDoc(doc: Store) {
   const notes = doc.root?.children.filter(
     child =>
-      matchFlavours(child, ['affine:note']) &&
+      matchModels(child, [NoteBlockModel]) &&
       child.displayMode !== NoteDisplayMode.EdgelessOnly
   );
 
@@ -304,7 +305,7 @@ export function getDocContentWithMaxLength(doc: Store, maxlength = 500) {
 export function getTitleFromSelectedModels(selectedModels: DraftModel[]) {
   const firstBlock = selectedModels[0];
   if (
-    matchFlavours(firstBlock, ['affine:paragraph']) &&
+    matchModels(firstBlock, [ParagraphBlockModel]) &&
     firstBlock.type.startsWith('h')
   ) {
     return firstBlock.text.toString();
@@ -403,7 +404,6 @@ export function createLinkedDocFromSlice(
   snapshots: BlockSnapshot[],
   docTitle?: string
 ) {
-  // const modelsWithChildren = (list:BlockModel[]):BlockModel[]=>list.flatMap(model=>[model,...modelsWithChildren(model.children)])
   const linkedDoc = doc.workspace.createDoc({});
   linkedDoc.load(() => {
     const rootId = linkedDoc.addBlock('affine:page', {

blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts

@@ -22,12 +22,12 @@ export function toEdgelessEmbedBlock<
   B extends typeof EmbedBlockComponent<Model, Service, WidgetName>,
 >(block: B) {
   return class extends toGfxBlockComponent(block) {
+    override selectedStyle$ = null;
+
     _isDragging = false;
 
     _isResizing = false;
 
-    _isSelected = false;
-
     _showOverlay = false;
 
     override [blockComponentSymbol] = true;
@@ -42,10 +42,6 @@ export function toEdgelessEmbedBlock<
       return Bound.deserialize(this.model.xywh);
     }
 
-    get rootService() {
-      return this.std.getService('affine:page');
-    }
-
     _handleClick(_: MouseEvent): void {
       return;
     }
@@ -68,7 +64,7 @@ export function toEdgelessEmbedBlock<
         this.edgelessSlots.elementResizeEnd.on(() => {
           this._isResizing = false;
           this._showOverlay =
-            this._isResizing || this._isDragging || !this._isSelected;
+            this._isResizing || this._isDragging || !this.selected$.peek();
         })
       );
     }

blocksuite/affine/block-embed/src/effects.ts

@@ -1,34 +1,18 @@
-import type * as SurfaceEffects from '@blocksuite/affine-block-surface/effects';
-
 import { EmbedFigmaBlockComponent } from './embed-figma-block';
 import { EmbedEdgelessBlockComponent } from './embed-figma-block/embed-edgeless-figma-block';
-import type { EmbedFigmaBlockService } from './embed-figma-block/embed-figma-service';
-import {
-  EmbedGithubBlockComponent,
-  type EmbedGithubBlockService,
-} from './embed-github-block';
+import { EmbedGithubBlockComponent } from './embed-github-block';
 import { EmbedEdgelessGithubBlockComponent } from './embed-github-block/embed-edgeless-github-block';
 import { EmbedHtmlBlockComponent } from './embed-html-block';
 import { EmbedHtmlFullscreenToolbar } from './embed-html-block/components/fullscreen-toolbar';
 import { EmbedEdgelessHtmlBlockComponent } from './embed-html-block/embed-edgeless-html-block';
 import { EmbedLinkedDocBlockComponent } from './embed-linked-doc-block';
-import type {
-  InsertedLinkType,
-  insertEmbedLinkedDocCommand,
-} from './embed-linked-doc-block/commands/insert-embed-linked-doc';
 import { EmbedEdgelessLinkedDocBlockComponent } from './embed-linked-doc-block/embed-edgeless-linked-doc-block';
-import {
-  EmbedLoomBlockComponent,
-  type EmbedLoomBlockService,
-} from './embed-loom-block';
+import { EmbedLoomBlockComponent } from './embed-loom-block';
 import { EmbedEdgelessLoomBlockComponent } from './embed-loom-block/embed-edgeless-loom-bock';
 import { EmbedSyncedDocBlockComponent } from './embed-synced-doc-block';
 import { EmbedSyncedDocCard } from './embed-synced-doc-block/components/embed-synced-doc-card';
 import { EmbedEdgelessSyncedDocBlockComponent } from './embed-synced-doc-block/embed-edgeless-synced-doc-block';
-import {
-  EmbedYoutubeBlockComponent,
-  type EmbedYoutubeBlockService,
-} from './embed-youtube-block';
+import { EmbedYoutubeBlockComponent } from './embed-youtube-block';
 import { EmbedEdgelessYoutubeBlockComponent } from './embed-youtube-block/embed-edgeless-youtube-block';
 
 export function effects() {
@@ -90,8 +74,6 @@ export function effects() {
   );
 }
 
-declare type _GLOBAL = typeof SurfaceEffects;
-
 declare global {
   interface HTMLElementTagNameMap {
     'affine-embed-figma-block': EmbedFigmaBlockComponent;
@@ -111,20 +93,4 @@ declare global {
     'affine-embed-linked-doc-block': EmbedLinkedDocBlockComponent;
     'affine-embed-edgeless-linked-doc-block': EmbedEdgelessLinkedDocBlockComponent;
   }
-
-  namespace BlockSuite {
-    interface BlockServices {
-      'affine:embed-figma': EmbedFigmaBlockService;
-      'affine:embed-github': EmbedGithubBlockService;
-      'affine:embed-loom': EmbedLoomBlockService;
-      'affine:embed-youtube': EmbedYoutubeBlockService;
-    }
-    interface CommandContext {
-      insertedLinkType?: Promise<InsertedLinkType>;
-    }
-
-    interface Commands {
-      insertEmbedLinkedDoc: typeof insertEmbedLinkedDocCommand;
-    }
-  }
 }

blocksuite/affine/block-embed/src/embed-figma-block/embed-figma-block.ts

@@ -3,8 +3,8 @@ import type {
   EmbedFigmaModel,
   EmbedFigmaStyles,
 } from '@blocksuite/affine-model';
-import { BlockSelection, SurfaceSelection } from '@blocksuite/block-std';
-import { html } from 'lit';
+import { BlockSelection } from '@blocksuite/block-std';
+import { html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -57,11 +57,10 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
     super.connectedCallback();
     this._cardStyle = this.model.style;
 
-    if (!this.model.description && !this.model.title) {
+    if (!this.model.title) {
       this.doc.withoutTransact(() => {
         this.doc.updateBlock(this.model, {
           title: 'Figma',
-          description: this.model.url,
         });
       });
     }
@@ -76,40 +75,34 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
 
     // this is required to prevent iframe from capturing pointer events
     this.disposables.add(
-      this.std.selection.slots.changed.on(() => {
-        this._isSelected =
-          !!this.selected?.is(BlockSelection) ||
-          !!this.selected?.is(SurfaceSelection);
-
-        this._showOverlay =
-          this._isResizing || this._isDragging || !this._isSelected;
+      this.selected$.subscribe(selected => {
+        this._showOverlay = this._isResizing || this._isDragging || !selected;
       })
     );
     // this is required to prevent iframe from capturing pointer events
     this.handleEvent('dragStart', () => {
       this._isDragging = true;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
 
     this.handleEvent('dragEnd', () => {
       this._isDragging = false;
       this._showOverlay =
-        this._isResizing || this._isDragging || !this._isSelected;
+        this._isResizing || this._isDragging || !this.selected$.peek();
     });
   }
 
   override renderBlock() {
     const { title, description, url } = this.model;
     const titleText = title ?? 'Figma';
-    const descriptionText = description ?? url;
 
     return this.renderEmbed(
       () => html`
         <div
           class=${classMap({
             'affine-embed-figma-block': true,
-            selected: this._isSelected,
+            selected: this.selected$.value,
           })}
           style=${styleMap({
             transform: `scale(${this._scale})`,
@@ -145,9 +138,11 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
               </div>
             </div>
 
-            <div class="affine-embed-figma-content-description">
-              ${descriptionText}
-            </div>
+            ${description
+              ? html`<div class="affine-embed-figma-content-description">
+                  ${description}
+                </div>`
+              : nothing}
 
             <div class="affine-embed-figma-content-url" @click=${this.open}>
               <span>www.figma.com</span>
@@ -160,9 +155,6 @@ export class EmbedFigmaBlockComponent extends EmbedBlockComponent<
     );
   }
 
-  @state()
-  protected accessor _isSelected = false;
-
   @state()
   protected accessor _showOverlay = true;
 }

blocksuite/affine/block-embed/src/embed-figma-block/styles.ts

@@ -1,16 +1,14 @@
-import {
-  EMBED_CARD_HEIGHT,
-  EMBED_CARD_WIDTH,
-} from '@blocksuite/affine-shared/consts';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html } from 'lit';
 
 export const styles = css`
   .affine-embed-figma-block {
-    width: ${EMBED_CARD_WIDTH.figma}px;
     display: flex;
     flex-direction: column;
     gap: 20px;
     padding: 12px;
+    width: 100%;
+    height: 100%;
 
     border-radius: 8px;
     border: 1px solid var(--affine-background-tertiary-color);
@@ -18,8 +16,6 @@ export const styles = css`
     opacity: var(--add, 1);
     background: var(--affine-background-primary-color);
     user-select: none;
-
-    aspect-ratio: ${EMBED_CARD_WIDTH.figma} / ${EMBED_CARD_HEIGHT.figma};
   }
 
   .affine-embed-figma {
@@ -161,7 +157,7 @@ export const styles = css`
     white-space: normal;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--affine-text-secondary-color);
+    color: ${unsafeCSSVarV2('icon/primary')};
 
     font-family: var(--affine-font-family);
     font-size: var(--affine-font-xs);
@@ -183,10 +179,10 @@ export const styles = css`
     width: 12px;
     height: 12px;
   }
-  .affine-embed-figma-content-url-icon .open-icon {
+  .affine-embed-figma-content-url-icon svg {
     height: 12px;
     width: 12px;
-    fill: var(--affine-text-secondary-color);
+    fill: ${unsafeCSSVarV2('icon/primary')};
   }
 
   .affine-embed-figma-block.selected {