fix(server): exclude outdated doc id style in embedding count (#13269)

fix AI-392
fix AI-393

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

## Summary by CodeRabbit

* **New Features**
* Improved filtering of outdated document ID styles in embedding status
reporting, ensuring more accurate counts of embedded documents.
* Stricter rate limiting applied to workspace embedding status queries
for enhanced system reliability.

* **Bug Fixes**
* Resolved issues with duplicate or outdated document IDs affecting
embedding status totals.

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

.devcontainer/docker-compose.yml

@@ -25,7 +25,7 @@ services:
     image: redis
 
   indexer:
-    image: manticoresearch/manticore:${MANTICORE_VERSION:-9.3.2}
+    image: manticoresearch/manticore:${MANTICORE_VERSION:-10.1.0}
     ulimits:
       nproc: 65535
       nofile:

.docker/dev/.env.example

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

.docker/dev/README.md

@@ -15,13 +15,7 @@ yarn affine cert --install
 
 ```bash
 # certificates will be located at `./.docker/dev/certs/${domain}`
-yarn affine cert --domain dev.affine.fail
+yarn affine cert --domain affine.localhost
 ```
 
-### 3. Enable dns and nginx service in compose.yml
-
-### 4. Add custom dns server
-
-```bash
-echo "nameserver 127.0.0.1" | sudo tee /etc/resolver/dev.affine.fail
-```
+### 3. Enable nginx service in compose.yml

.docker/dev/compose.yml.example

@@ -26,7 +26,7 @@ services:
 
   # https://manual.manticoresearch.com/Starting_the_server/Docker
   manticoresearch:
-    image: manticoresearch/manticore:${MANTICORE_VERSION:-9.3.2}
+    image: manticoresearch/manticore:${MANTICORE_VERSION:-10.1.0}
     ports:
       - 9308:9308
     ulimits:
@@ -73,17 +73,6 @@ services:
   #     timeout: 10s
   #     retries: 120
 
-  # dns:
-  #   image: strm/dnsmasq
-  #   volumes:
-  #     - ./dnsmasq.conf:/etc/dnsmasq.d/local.conf
-  #   ports:
-  #     - "53:53/udp"
-  #   cap_add:
-  #     - NET_ADMIN
-  #   depends_on:
-  #     - nginx
-
   # nginx:
   #   image: nginx:alpine
   #   volumes:

.docker/dev/dnsmasq.conf

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

.docker/selfhost/schema.json

@@ -540,6 +540,11 @@
           "description": "Where the server get deployed(FQDN).\n@default \"localhost\"\n@environment `AFFINE_SERVER_HOST`",
           "default": "localhost"
         },
+        "hosts": {
+          "type": "array",
+          "description": "Multiple hosts the server will accept requests from.\n@default []",
+          "default": []
+        },
         "port": {
           "type": "number",
           "description": "Which port the server will listen on.\n@default 3010\n@environment `AFFINE_SERVER_PORT`",
@@ -560,6 +565,11 @@
           "type": "boolean",
           "description": "Only allow users with early access features to access the app\n@default false",
           "default": false
+        },
+        "allowGuestDemoWorkspace": {
+          "type": "boolean",
+          "description": "Whether allow guest users to create demo workspaces.\n@default true",
+          "default": true
         }
       }
     },
@@ -727,6 +737,11 @@
           },
           "default": {}
         },
+        "providers.morph": {
+          "type": "object",
+          "description": "The config for the morph provider.\n@default {}",
+          "default": {}
+        },
         "unsplash": {
           "type": "object",
           "description": "The config for the unsplash key.\n@default {\"key\":\"\"}",

.github/actions/deploy/deploy.mjs

@@ -126,7 +126,10 @@ const createHelmCommand = ({ isDryRun }) => {
         ? 'internal'
         : 'dev';
 
-  const host = DEPLOY_HOST || CANARY_DEPLOY_HOST;
+  const hosts = (DEPLOY_HOST || CANARY_DEPLOY_HOST)
+    .split(',')
+    .map(host => host.trim())
+    .filter(host => host);
   const deployCommand = [
     `helm upgrade --install affine .github/helm/affine`,
     `--namespace  ${namespace}`,
@@ -135,7 +138,9 @@ const createHelmCommand = ({ isDryRun }) => {
     `--set-string global.app.buildType="${buildType}"`,
     `--set        global.ingress.enabled=true`,
     `--set-json   global.ingress.annotations="{ \\"kubernetes.io/ingress.class\\": \\"gce\\", \\"kubernetes.io/ingress.allow-http\\": \\"true\\", \\"kubernetes.io/ingress.global-static-ip-name\\": \\"${STATIC_IP_NAME}\\" }"`,
-    `--set-string global.ingress.host="${host}"`,
+    ...hosts.map(
+      (host, index) => `--set global.ingress.hosts[${index}]=${host}`
+    ),
     `--set-string global.version="${APP_VERSION}"`,
     ...redisAndPostgres,
     ...indexerOptions,
@@ -143,14 +148,14 @@ const createHelmCommand = ({ isDryRun }) => {
     `--set-string web.image.tag="${imageTag}"`,
     `--set        graphql.replicaCount=${replica.graphql}`,
     `--set-string graphql.image.tag="${imageTag}"`,
-    `--set        graphql.app.host=${host}`,
+    `--set        graphql.app.host=${hosts[0]}`,
     `--set        sync.replicaCount=${replica.sync}`,
     `--set-string sync.image.tag="${imageTag}"`,
     `--set-string renderer.image.tag="${imageTag}"`,
-    `--set        renderer.app.host=${host}`,
+    `--set        renderer.app.host=${hosts[0]}`,
     `--set        renderer.replicaCount=${replica.renderer}`,
     `--set-string doc.image.tag="${imageTag}"`,
-    `--set        doc.app.host=${host}`,
+    `--set        doc.app.host=${hosts[0]}`,
     `--set        doc.replicaCount=${replica.doc}`,
     ...serviceAnnotations,
     ...resources,

.github/actions/prepare-release/action.yml

@@ -21,7 +21,7 @@ runs:
         if [ "${{ github.ref_type }}" == "tag" ]; then
           APP_VERSION=$(echo "${{ github.ref_name }}" | sed 's/^v//')
         else
-          APP_VERSION=$(date '+%Y.%-m.%-d-canary.%-H%-M')
+          APP_VERSION=$(date '+%Y.%-m.%-d-canary.%-H%M')
         fi
         if [[ "$APP_VERSION" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
           BUILD_TYPE=stable

.github/actions/setup-version/action.yml

@@ -4,9 +4,15 @@ inputs:
   app-version:
     description: 'App Version'
     required: true
+  ios-app-version:
+    description: 'iOS App Store Version (Optional, use App version if empty)'
+    required: false
+    type: string
 runs:
   using: 'composite'
   steps:
     - name: 'Write Version'
       shell: bash
+      env:
+        IOS_APP_VERSION: ${{ inputs.ios-app-version }}
       run: ./scripts/set-version.sh ${{ inputs.app-version }}

.github/deployment/node/Dockerfile

@@ -7,7 +7,10 @@ COPY ./packages/frontend/apps/mobile/dist /app/static/mobile
 WORKDIR /app
 
 RUN apt-get update && \
-  apt-get install -y --no-install-recommends openssl && \
+  apt-get install -y --no-install-recommends openssl libjemalloc2 && \
   rm -rf /var/lib/apt/lists/*
 
+# Enable jemalloc by preloading the library
+ENV LD_PRELOAD=libjemalloc.so.2
+
 CMD ["node", "./dist/main.js"]

.github/helm/affine/templates/ingress.yaml

@@ -36,7 +36,8 @@ spec:
     {{- end }}
   {{- end }}
   rules:
-    - host: "{{ .Values.global.ingress.host }}"
+    {{- range .Values.global.ingress.hosts }}
+    - host: {{ . | quote }}
       http:
         paths:
           - path: /socket.io
@@ -45,33 +46,34 @@ spec:
               service:
                 name: affine-sync
                 port:
-                  number: {{ .Values.sync.service.port }}
+                  number: {{ $.Values.sync.service.port }}
           - path: /graphql
             pathType: Prefix
             backend:
               service:
                 name: affine-graphql
                 port:
-                  number: {{ .Values.graphql.service.port }}
+                  number: {{ $.Values.graphql.service.port }}
           - path: /api
             pathType: Prefix
             backend:
               service:
                 name: affine-graphql
                 port:
-                  number: {{ .Values.graphql.service.port }}
+                  number: {{ $.Values.graphql.service.port }}
           - path: /workspace
             pathType: Prefix
             backend:
               service:
                 name: affine-renderer
                 port:
-                  number: {{ .Values.renderer.service.port }}
+                  number: {{ $.Values.renderer.service.port }}
           - path: /
             pathType: Prefix
             backend:
               service:
                 name: affine-web
                 port:
-                  number: {{ .Values.web.service.port }}
+                  number: {{ $.Values.web.service.port }}
+    {{- end }}
 {{- end }}

.github/helm/affine/values.yaml

@@ -4,7 +4,13 @@ global:
   ingress:
     enabled: false
     className: ''
-    host: affine.pro
+    # hosts for ingress rules
+    # e.g.
+    # hosts:
+    #  - affine.pro
+    #  - www.affine.pro
+    hosts:
+      - affine.pro
     tls: []
   secret:
     secretName: 'server-private-key'

.github/workflows/build-test.yml

@@ -972,8 +972,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
-        shardTotal: [8]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shardTotal: [10]
     needs:
       - build-server-native
     services:
@@ -1064,24 +1064,36 @@ jobs:
       fail-fast: false
       matrix:
         tests:
-          - name: 'Cloud E2E Test 1/6'
+          - name: 'Cloud E2E Test 1/10'
             shard: 1
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=1/6
-          - name: 'Cloud E2E Test 2/6'
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=1/10
+          - name: 'Cloud E2E Test 2/10'
             shard: 2
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=2/6
-          - name: 'Cloud E2E Test 3/6'
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=2/10
+          - name: 'Cloud E2E Test 3/10'
             shard: 3
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=3/6
-          - name: 'Cloud E2E Test 4/6'
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=3/10
+          - name: 'Cloud E2E Test 4/10'
             shard: 4
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=4/6
-          - name: 'Cloud E2E Test 5/6'
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=4/10
+          - name: 'Cloud E2E Test 5/10'
             shard: 5
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=5/6
-          - name: 'Cloud E2E Test 6/6'
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=5/10
+          - name: 'Cloud E2E Test 6/10'
             shard: 6
-            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=6/6
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=6/10
+          - name: 'Cloud E2E Test 7/10'
+            shard: 7
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=7/10
+          - name: 'Cloud E2E Test 8/10'
+            shard: 8
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=8/10
+          - name: 'Cloud E2E Test 9/10'
+            shard: 9
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=9/10
+          - name: 'Cloud E2E Test 10/10'
+            shard: 10
+            script: yarn affine @affine-test/affine-cloud e2e --forbid-only --shard=10/10
           - name: 'Cloud Desktop E2E Test'
             shard: desktop
             script: |

.github/workflows/copilot-test.yml

@@ -109,8 +109,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8]
-        shardTotal: [8]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shardTotal: [10]
     needs:
       - build-server-native
     services:

.github/workflows/release-desktop.yml

@@ -465,7 +465,7 @@ jobs:
           name: ${{ env.RELEASE_VERSION }}
           draft: ${{ inputs.build-type == 'stable' }}
           prerelease: ${{ inputs.build-type != 'stable' }}
-          tag_name: ${{ env.RELEASE_VERSION}}
+          tag_name: v${{ env.RELEASE_VERSION}}
           files: |
             ./release/*
             ./release/.env.example

.github/workflows/release-mobile.yml

@@ -12,6 +12,9 @@ on:
       build-type:
         type: string
         required: true
+      ios-app-version:
+        type: string
+        required: false
 
 env:
   BUILD_TYPE: ${{ inputs.build-type }}
@@ -78,7 +81,7 @@ jobs:
           path: packages/frontend/apps/android/dist
 
   ios:
-    runs-on: ${{ github.ref_name == 'canary' && 'macos-latest' || 'blaze/macos-14' }}
+    runs-on: 'macos-15'
     needs:
       - build-ios-web
     steps:
@@ -87,6 +90,7 @@ jobs:
         uses: ./.github/actions/setup-version
         with:
           app-version: ${{ inputs.app-version }}
+          ios-app-version: ${{ inputs.ios-app-version }}
       - name: 'Update Code Sign Identity'
         shell: bash
         run: ./packages/frontend/apps/ios/update_code_sign_identity.sh
@@ -106,7 +110,7 @@ jobs:
           enableScripts: false
       - uses: maxim-lobanov/setup-xcode@v1
         with:
-          xcode-version: 16.2
+          xcode-version: 16.4
       - name: Install Swiftformat
         run: brew install swiftformat
       - name: Cap sync
@@ -124,7 +128,6 @@ jobs:
           package: 'affine_mobile_native'
           no-build: 'true'
       - name: Testflight
-        if: ${{ env.BUILD_TYPE != 'stable' }}
         working-directory: packages/frontend/apps/ios/App
         run: |
           echo -n "${{ env.BUILD_PROVISION_PROFILE }}" | base64 --decode -o $PP_PATH
@@ -132,6 +135,7 @@ jobs:
           cp $PP_PATH ~/Library/MobileDevice/Provisioning\ Profiles
           fastlane beta
         env:
+          BUILD_TARGET: distribution
           BUILD_PROVISION_PROFILE: ${{ secrets.BUILD_PROVISION_PROFILE }}
           PP_PATH: ${{ runner.temp }}/build_pp.mobileprovision
           APPLE_STORE_CONNECT_API_KEY_ID: ${{ secrets.APPLE_STORE_CONNECT_API_KEY_ID }}

.github/workflows/release.yml

@@ -21,6 +21,10 @@ on:
         required: true
         type: boolean
         default: false
+      ios-app-version:
+        description: 'iOS App Store Version (Optional, use tag version if empty)'
+        required: false
+        type: string
 
 permissions:
   contents: write
@@ -30,6 +34,7 @@ permissions:
   packages: write
   security-events: write
   attestations: write
+  issues: write
 
 jobs:
   prepare:
@@ -70,6 +75,7 @@ jobs:
         with:
           secret: ${{ secrets.GITHUB_TOKEN }}
           approvers: forehalo,fengmk2
+          minimum-approvals: 1
           fail-on-denial: true
           issue-title: Please confirm to release docker image
           issue-body: |
@@ -117,3 +123,4 @@ jobs:
       build-type: ${{ needs.prepare.outputs.BUILD_TYPE }}
       app-version: ${{ needs.prepare.outputs.APP_VERSION }}
       git-short-hash: ${{ needs.prepare.outputs.GIT_SHORT_HASH }}
+      ios-app-version: ${{ inputs.ios-app-version }}

blocksuite/affine/all/package.json

@@ -48,6 +48,7 @@
     "@blocksuite/affine-gfx-template": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
+    "@blocksuite/affine-inline-comment": "workspace:*",
     "@blocksuite/affine-inline-footnote": "workspace:*",
     "@blocksuite/affine-inline-latex": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",
@@ -173,6 +174,7 @@
     "./inlines/footnote": "./src/inlines/footnote/index.ts",
     "./inlines/footnote/view": "./src/inlines/footnote/view.ts",
     "./inlines/footnote/store": "./src/inlines/footnote/store.ts",
+    "./inlines/comment": "./src/inlines/comment/index.ts",
     "./inlines/latex": "./src/inlines/latex/index.ts",
     "./inlines/latex/store": "./src/inlines/latex/store.ts",
     "./inlines/latex/view": "./src/inlines/latex/view.ts",
@@ -264,6 +266,7 @@
     "./components/toggle-button": "./src/components/toggle-button.ts",
     "./components/toggle-switch": "./src/components/toggle-switch.ts",
     "./components/toolbar": "./src/components/toolbar.ts",
+    "./components/tooltip": "./src/components/tooltip.ts",
     "./components/view-dropdown-menu": "./src/components/view-dropdown-menu.ts",
     "./components/tooltip-content-with-shortcut": "./src/components/tooltip-content-with-shortcut.ts",
     "./components/resource": "./src/components/resource.ts",
@@ -283,6 +286,7 @@
     "./sync": "./src/sync/index.ts",
     "./extensions/store": "./src/extensions/store.ts",
     "./extensions/view": "./src/extensions/view.ts",
+    "./foundation/clipboard": "./src/foundation/clipboard.ts",
     "./foundation/store": "./src/foundation/store.ts",
     "./foundation/view": "./src/foundation/view.ts"
   },

blocksuite/affine/all/src/components/tooltip.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-components/tooltip';

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

@@ -33,6 +33,7 @@ import { PointerViewExtension } from '@blocksuite/affine-gfx-pointer/view';
 import { ShapeViewExtension } from '@blocksuite/affine-gfx-shape/view';
 import { TemplateViewExtension } from '@blocksuite/affine-gfx-template/view';
 import { TextViewExtension } from '@blocksuite/affine-gfx-text/view';
+import { InlineCommentViewExtension } from '@blocksuite/affine-inline-comment/view';
 import { FootnoteViewExtension } from '@blocksuite/affine-inline-footnote/view';
 import { LatexViewExtension as InlineLatexViewExtension } from '@blocksuite/affine-inline-latex/view';
 import { LinkViewExtension } from '@blocksuite/affine-inline-link/view';
@@ -95,6 +96,7 @@ export function getInternalViewExtensions() {
     RootViewExtension,
 
     // Inline
+    InlineCommentViewExtension,
     FootnoteViewExtension,
     LinkViewExtension,
     ReferenceViewExtension,

blocksuite/affine/all/src/foundation/clipboard.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-foundation/clipboard';

blocksuite/affine/all/src/inlines/comment/index.ts

@@ -0,0 +1 @@
+export * from '@blocksuite/affine-inline-comment';

blocksuite/affine/all/tsconfig.json

@@ -45,6 +45,7 @@
     { "path": "../gfx/template" },
     { "path": "../gfx/text" },
     { "path": "../gfx/turbo-renderer" },
+    { "path": "../inlines/comment" },
     { "path": "../inlines/footnote" },
     { "path": "../inlines/latex" },
     { "path": "../inlines/link" },

blocksuite/affine/blocks/attachment/package.json

@@ -23,7 +23,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "file-type": "^21.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -17,6 +17,7 @@ import {
   AttachmentBlockStyles,
 } from '@blocksuite/affine-model';
 import {
+  BlockElementCommentManager,
   CitationProvider,
   DocModeProvider,
   FileSizeLimitProvider,
@@ -92,6 +93,14 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
     return this.citationService.isCitationModel(this.model);
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockElementCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   convertTo = () => {
     return this.std
       .get(AttachmentEmbedProvider)
@@ -499,6 +508,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<Attachment
         class=${classMap({
           'affine-attachment-container': true,
           focused: this.selected$.value,
+          'comment-highlighted': this.isCommentHighlighted,
         })}
         style=${this.containerStyleMap}
       >

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

@@ -15,6 +15,10 @@ export const styles = css`
     }
   }
 
+  .affine-attachment-container.comment-highlighted {
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
+
   .affine-attachment-card {
     display: flex;
     gap: 12px;

blocksuite/affine/blocks/bookmark/package.json

@@ -24,7 +24,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",

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

@@ -8,6 +8,7 @@ import type {
 } from '@blocksuite/affine-model';
 import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import {
+  BlockElementCommentManager,
   CitationProvider,
   DocModeProvider,
   LinkPreviewServiceIdentifier,
@@ -128,6 +129,14 @@ export class BookmarkBlockComponent extends CaptionedBlockComponent<BookmarkBloc
     return this.std.get(ImageProxyService);
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockElementCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   handleClick = (event: MouseEvent) => {
     event.stopPropagation();
 

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

@@ -45,6 +45,7 @@ export class BookmarkCard extends SignalWatcher(
       [style]: true,
       selected: this.bookmark.selected$.value,
       edgeless: isGfxBlockComponent(this.bookmark),
+      'comment-highlighted': this.bookmark.isCommentHighlighted,
     });
 
     const domainName = url.match(

blocksuite/affine/blocks/bookmark/src/configs/toolbar.ts

@@ -1,4 +1,5 @@
 import {
+  canEmbedAsEmbedBlock,
   canEmbedAsIframe,
   EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE,
   EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE,
@@ -149,13 +150,10 @@ const builtinToolbarConfig = {
             if (!model) return true;
 
             const url = model.props.url;
-            // check if the url can be embedded as iframe block or other embed blocks
-            const options = ctx.std
-              .get(EmbedOptionProvider)
-              .getEmbedBlockOptions(url);
 
             return (
-              !canEmbedAsIframe(ctx.std, url) && options?.viewType !== 'embed'
+              !canEmbedAsIframe(ctx.std, url) &&
+              !canEmbedAsEmbedBlock(ctx.std, url)
             );
           },
           run(ctx) {
@@ -169,15 +167,8 @@ const builtinToolbarConfig = {
 
             let blockId: string | undefined;
 
-            // first try to embed as iframe block
-            if (canEmbedAsIframe(ctx.std, url)) {
-              const embedIframeService = ctx.std.get(EmbedIframeService);
-              blockId = embedIframeService.addEmbedIframeBlock(
-                { url, caption, title, description },
-                parent.id,
-                index
-              );
-            } else {
+            // first try to embed as a custom embed block
+            if (canEmbedAsEmbedBlock(ctx.std, url)) {
               const options = ctx.std
                 .get(EmbedOptionProvider)
                 .getEmbedBlockOptions(url);
@@ -202,6 +193,13 @@ const builtinToolbarConfig = {
                 parent,
                 index
               );
+            } else if (canEmbedAsIframe(ctx.std, url)) {
+              const embedIframeService = ctx.std.get(EmbedIframeService);
+              blockId = embedIframeService.addEmbedIframeBlock(
+                { url, caption, title, description },
+                parent.id,
+                index
+              );
             }
 
             if (!blockId) return;
@@ -379,27 +377,8 @@ const builtinSurfaceToolbarConfig = {
 
             let newId: string | undefined;
 
-            // first try to embed as iframe block
-            if (canEmbedAsIframe(ctx.std, url)) {
-              const embedIframeService = ctx.std.get(EmbedIframeService);
-              const config = embedIframeService.getConfig(url);
-              if (!config) {
-                return;
-              }
-
-              const bound = Bound.deserialize(xywh);
-              const options = config.options;
-              const { widthInSurface, heightInSurface } = options ?? {};
-              bound.w = widthInSurface ?? EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE;
-              bound.h =
-                heightInSurface ?? EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE;
-
-              newId = ctx.store.addBlock(
-                'affine:embed-iframe',
-                { url, caption, title, description, xywh: bound.serialize() },
-                parent
-              );
-            } else {
+            // first try to embed as a custom embed block
+            if (canEmbedAsEmbedBlock(ctx.std, url)) {
               const options = ctx.std
                 .get(EmbedOptionProvider)
                 .getEmbedBlockOptions(url);
@@ -429,8 +408,29 @@ const builtinSurfaceToolbarConfig = {
                 },
                 parent
               );
+            } else if (canEmbedAsIframe(ctx.std, url)) {
+              const embedIframeService = ctx.std.get(EmbedIframeService);
+              const config = embedIframeService.getConfig(url);
+              if (!config) {
+                return;
+              }
+
+              const bound = Bound.deserialize(xywh);
+              const options = config.options;
+              const { widthInSurface, heightInSurface } = options ?? {};
+              bound.w = widthInSurface ?? EMBED_IFRAME_DEFAULT_WIDTH_IN_SURFACE;
+              bound.h =
+                heightInSurface ?? EMBED_IFRAME_DEFAULT_HEIGHT_IN_SURFACE;
+
+              newId = ctx.store.addBlock(
+                'affine:embed-iframe',
+                { url, caption, title, description, xywh: bound.serialize() },
+                parent
+              );
             }
 
+            if (!newId) return;
+
             ctx.command.exec(reassociateConnectorsCommand, { oldId, newId });
 
             ctx.store.deleteBlock(model);
@@ -449,13 +449,10 @@ const builtinSurfaceToolbarConfig = {
       when(ctx) {
         const model = ctx.getCurrentModelByType(BookmarkBlockModel);
         if (!model) return false;
-
         const { url } = model.props;
-        const options = ctx.std
-          .get(EmbedOptionProvider)
-          .getEmbedBlockOptions(url);
-
-        return canEmbedAsIframe(ctx.std, url) || options?.viewType === 'embed';
+        return (
+          canEmbedAsIframe(ctx.std, url) || canEmbedAsEmbedBlock(ctx.std, url)
+        );
       },
       content(ctx) {
         const model = ctx.getCurrentModelByType(BookmarkBlockModel);

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

@@ -1,4 +1,4 @@
-import { unsafeCSSVar } from '@blocksuite/affine-shared/theme';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { baseTheme } from '@toeverything/theme';
 import { css, unsafeCSS } from 'lit';
 
@@ -17,9 +17,9 @@ export const styles = css`
     width: 100%;
 
     border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
 
-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
     user-select: none;
   }
 
@@ -158,6 +158,10 @@ export const styles = css`
     border-radius: 4px;
   }
 
+  .affine-bookmark-card.comment-highlighted {
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
+
   .affine-bookmark-card.loading {
     .affine-bookmark-content-title-text {
       color: var(--affine-placeholder-color);

blocksuite/affine/blocks/callout/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.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/mdast": "^4.0.4",
     "emoji-mart": "^5.6.0",
     "lit": "^3.2.0",

blocksuite/affine/blocks/code/package.json

@@ -13,6 +13,7 @@
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
+    "@blocksuite/affine-inline-comment": "workspace:*",
     "@blocksuite/affine-inline-latex": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",
     "@blocksuite/affine-inline-preset": "workspace:*",
@@ -27,7 +28,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -1,3 +1,4 @@
+import { CommentInlineSpecExtension } from '@blocksuite/affine-inline-comment';
 import { LatexInlineSpecExtension } from '@blocksuite/affine-inline-latex';
 import { LinkInlineSpecExtension } from '@blocksuite/affine-inline-link';
 import {
@@ -20,7 +21,9 @@ import { z } from 'zod';
 export const CodeBlockUnitSpecExtension =
   InlineSpecExtension<AffineTextAttributes>({
     name: 'code-block-unit',
-    schema: z.undefined(),
+    schema: z.object({
+      'code-block-uint': z.undefined(),
+    }),
     match: () => true,
     renderer: ({ delta }) => {
       return html`<affine-code-unit .delta=${delta}></affine-code-unit>`;
@@ -42,5 +45,6 @@ export const CodeBlockInlineManagerExtension =
       LatexInlineSpecExtension.identifier,
       LinkInlineSpecExtension.identifier,
       CodeBlockUnitSpecExtension.identifier,
+      CommentInlineSpecExtension.identifier,
     ],
   });

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

@@ -19,8 +19,12 @@ import {
 export class CodeBlockHighlighter extends LifeCycleWatcher {
   static override key = 'code-block-highlighter';
 
-  private _darkThemeKey: string | undefined;
+  // Singleton highlighter instance
+  private static _sharedHighlighter: HighlighterCore | null = null;
+  private static _highlighterPromise: Promise<HighlighterCore> | null = null;
+  private static _refCount = 0;
 
+  private _darkThemeKey: string | undefined;
   private _lightThemeKey: string | undefined;
 
   highlighter$: Signal<HighlighterCore | null> = signal(null);
@@ -35,6 +39,13 @@ export class CodeBlockHighlighter extends LifeCycleWatcher {
   private readonly _loadTheme = async (
     highlighter: HighlighterCore
   ): Promise<void> => {
+    // It is possible that by the time the highlighter is ready all instances
+    // have already been unmounted. In that case there is no need to load
+    // themes or update state.
+    if (CodeBlockHighlighter._refCount === 0) {
+      return;
+    }
+
     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;
@@ -44,18 +55,58 @@ export class CodeBlockHighlighter extends LifeCycleWatcher {
     this.highlighter$.value = highlighter;
   };
 
+  private static async _getOrCreateHighlighter(): Promise<HighlighterCore> {
+    if (CodeBlockHighlighter._sharedHighlighter) {
+      return CodeBlockHighlighter._sharedHighlighter;
+    }
+
+    if (!CodeBlockHighlighter._highlighterPromise) {
+      CodeBlockHighlighter._highlighterPromise = createHighlighterCore({
+        engine: createOnigurumaEngine(() => getWasm),
+      }).then(highlighter => {
+        CodeBlockHighlighter._sharedHighlighter = highlighter;
+        return highlighter;
+      });
+    }
+
+    return CodeBlockHighlighter._highlighterPromise;
+  }
+
   override mounted(): void {
     super.mounted();
 
-    createHighlighterCore({
-      engine: createOnigurumaEngine(() => getWasm),
-    })
+    CodeBlockHighlighter._refCount++;
+
+    CodeBlockHighlighter._getOrCreateHighlighter()
       .then(this._loadTheme)
       .catch(console.error);
   }
 
   override unmounted(): void {
-    this.highlighter$.value?.dispose();
+    CodeBlockHighlighter._refCount--;
+
+    // Dispose the shared highlighter **after** any in-flight creation finishes.
+    if (CodeBlockHighlighter._refCount !== 0) {
+      return;
+    }
+
+    const doDispose = (highlighter: HighlighterCore | null) => {
+      if (highlighter) {
+        highlighter.dispose();
+      }
+      CodeBlockHighlighter._sharedHighlighter = null;
+      CodeBlockHighlighter._highlighterPromise = null;
+    };
+
+    if (CodeBlockHighlighter._sharedHighlighter) {
+      // Highlighter already created – dispose immediately.
+      doDispose(CodeBlockHighlighter._sharedHighlighter);
+    } else if (CodeBlockHighlighter._highlighterPromise) {
+      // Highlighter still being created – wait for it, then dispose.
+      CodeBlockHighlighter._highlighterPromise
+        .then(doDispose)
+        .catch(console.error);
+    }
   }
 }
 

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

@@ -6,6 +6,7 @@ import {
   EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
 } from '@blocksuite/affine-shared/consts';
 import {
+  BlockElementCommentManager,
   DocModeProvider,
   NotificationProvider,
 } from '@blocksuite/affine-shared/services';
@@ -390,6 +391,14 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
       });
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockElementCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   override async getUpdateComplete() {
     const result = await super.getUpdateComplete();
     await this._richTextElement?.updateComplete;
@@ -413,6 +422,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
       <div
         class=${classMap({
           'affine-code-block-container': true,
+          'highlight-comment': this.isCommentHighlighted,
           mobile: IS_MOBILE,
           wrap: this.model.props.wrap,
           'disable-line-numbers': !showLineNumbers,

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

@@ -7,9 +7,10 @@ import {
   WrapIcon,
 } from '@blocksuite/affine-components/icons';
 import type { MenuItemGroup } from '@blocksuite/affine-components/toolbar';
+import { CommentProviderIdentifier } from '@blocksuite/affine-shared/services';
 import { isInsidePageEditor } from '@blocksuite/affine-shared/utils';
 import { noop, sleep } from '@blocksuite/global/utils';
-import { NumberedListIcon } from '@blocksuite/icons/lit';
+import { CommentIcon, NumberedListIcon } from '@blocksuite/icons/lit';
 import { BlockSelection } from '@blocksuite/std';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -113,6 +114,47 @@ export const PRIMARY_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
           };
         },
       },
+      {
+        type: 'comment',
+        label: 'Comment',
+        tooltip: 'Comment',
+        icon: CommentIcon({
+          width: '20',
+          height: '20',
+        }),
+        when: ({ std }) => !!std.getOptional(CommentProviderIdentifier),
+        generate: ({ blockComponent }) => {
+          return {
+            action: () => {
+              const commentProvider = blockComponent.std.getOptional(
+                CommentProviderIdentifier
+              );
+              if (!commentProvider) return;
+
+              commentProvider.addComment([
+                new BlockSelection({
+                  blockId: blockComponent.model.id,
+                }),
+              ]);
+            },
+            render: item =>
+              html`<editor-icon-button
+                class="code-toolbar-button comment"
+                aria-label=${ifDefined(item.label)}
+                .tooltip=${item.label}
+                .tooltipOffset=${4}
+                .iconSize=${'16px'}
+                .iconContainerPadding=${4}
+                @click=${(e: MouseEvent) => {
+                  e.stopPropagation();
+                  item.action();
+                }}
+              >
+                ${item.icon}
+              </editor-icon-button>`,
+          };
+        },
+      },
     ],
   },
 ];

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

@@ -2,7 +2,9 @@ export * from './adapters';
 export * from './clipboard';
 export * from './code-block';
 export * from './code-block-config';
+export * from './code-block-service';
 export * from './code-preview-extension';
 export * from './code-toolbar';
+export * from './highlight/const';
 export * from './turbo/code-layout-handler';
 export * from './turbo/code-painter.worker';

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

@@ -1,4 +1,5 @@
 import { scrollbarStyle } from '@blocksuite/affine-shared/styles';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css } from 'lit';
 
 export const codeBlockStyles = css`
@@ -20,6 +21,10 @@ export const codeBlockStyles = css`
     padding: 12px;
   }
 
+  .affine-code-block-container.highlight-comment {
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
+
   ${scrollbarStyle('.affine-code-block-container rich-text')}
 
   .affine-code-block-container .inline-editor {

blocksuite/affine/blocks/code/tsconfig.json

@@ -10,6 +10,7 @@
     { "path": "../../components" },
     { "path": "../../ext-loader" },
     { "path": "../../gfx/turbo-renderer" },
+    { "path": "../../inlines/comment" },
     { "path": "../../inlines/latex" },
     { "path": "../../inlines/link" },
     { "path": "../../inlines/preset" },

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

@@ -24,7 +24,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -40,6 +40,7 @@ import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
 import { Slice } from '@blocksuite/store';
 import { computed, signal } from '@preact/signals-core';
 import { css, nothing, unsafeCSS } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
 import { html } from 'lit/static-html.js';
 
 import { BlockQueryDataSource } from './data-source.js';
@@ -303,9 +304,15 @@ export class DataViewBlockComponent extends CaptionedBlockComponent<DataViewBloc
     },
   });
   override renderBlock() {
+    const widgets = html`${repeat(
+      Object.entries(this.widgets),
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
+
     return html`
       <div contenteditable="false" style="position: relative">
-        ${this.dataViewRootLogic.render()}
+        ${this.dataViewRootLogic.render()} ${widgets}
       </div>
     `;
   }

blocksuite/affine/blocks/database/package.json

@@ -28,7 +28,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/mdast": "^4.0.4",
     "date-fns": "^4.0.0",
     "lit": "^3.2.0",

blocksuite/affine/blocks/database/src/components/title/index.ts

@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { stopPropagation } from '@blocksuite/affine-shared/utils';
 import type { DataViewUILogicBase } from '@blocksuite/data-view';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
@@ -72,6 +73,12 @@ export class DatabaseTitle extends SignalWatcher(
     .affine-database-title [data-title-focus='true']::before {
       color: var(--affine-placeholder-color);
     }
+
+    .affine-database-title.comment-highlighted {
+      border-bottom: 2px solid
+        ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+      background-color: ${unsafeCSSVarV2('block/comment/highlightActive')};
+    }
   `;
 
   private readonly compositionEnd = () => {
@@ -134,6 +141,7 @@ export class DatabaseTitle extends SignalWatcher(
     const classList = classMap({
       'affine-database-title': true,
       ellipsis: !this.isFocus$.value,
+      'comment-highlighted': this.database?.isCommentHighlighted ?? false,
     });
     const untitledStyle = styleMap({
       height: isEmpty ? 'auto' : 0,

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

@@ -10,6 +10,8 @@ import { toast } from '@blocksuite/affine-components/toast';
 import type { DatabaseBlockModel } from '@blocksuite/affine-model';
 import { EDGELESS_TOP_CONTENTEDITABLE_SELECTOR } from '@blocksuite/affine-shared/consts';
 import {
+  BlockElementCommentManager,
+  CommentProviderIdentifier,
   DocModeProvider,
   NotificationProvider,
   type TelemetryEventMap,
@@ -34,16 +36,18 @@ import {
 import { widgetPresets } from '@blocksuite/data-view/widget-presets';
 import { Rect } from '@blocksuite/global/gfx';
 import {
+  CommentIcon,
   CopyIcon,
   DeleteIcon,
   MoreHorizontalIcon,
 } from '@blocksuite/icons/lit';
-import { type BlockComponent } from '@blocksuite/std';
+import { type BlockComponent, BlockSelection } from '@blocksuite/std';
 import { RANGE_SYNC_EXCLUDE_ATTR } from '@blocksuite/std/inline';
 import { Slice } from '@blocksuite/store';
 import { autoUpdate } from '@floating-ui/dom';
 import { computed, signal } from '@preact/signals-core';
 import { html, nothing } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
 
 import { popSideDetail } from './components/layout.js';
 import { DatabaseConfigExtension } from './config.js';
@@ -82,6 +86,18 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
             );
           },
         }),
+        menu.action({
+          prefix: CommentIcon(),
+          name: 'Comment',
+          hide: () => !this.std.getOptional(CommentProviderIdentifier),
+          select: () => {
+            this.std.getOptional(CommentProviderIdentifier)?.addComment([
+              new BlockSelection({
+                blockId: this.blockId,
+              }),
+            ]);
+          },
+        }),
         menu.action({
           prefix: CopyIcon(),
           name: 'Copy',
@@ -297,6 +313,14 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
     };
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockElementCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
       return this.closest<BlockComponent>(
@@ -428,9 +452,15 @@ export class DatabaseBlockComponent extends CaptionedBlockComponent<DatabaseBloc
       })
   );
   override renderBlock() {
+    const widgets = html`${repeat(
+      Object.entries(this.widgets),
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
+
     return html`
       <div contenteditable="false" class="${databaseContentStyles}">
-        ${this.dataViewRootLogic.value.render()}
+        ${this.dataViewRootLogic.value.render()} ${widgets}
       </div>
     `;
   }

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

@@ -70,7 +70,7 @@ function toggleStyle(
         return [k, v];
       }
     })
-  );
+  ) as AffineTextAttributes;
 
   inlineEditor.formatText(inlineRange, newAttributes, {
     mode: 'merge',

blocksuite/affine/blocks/divider/package.json

@@ -21,7 +21,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",
     "rxjs": "^7.8.1",

blocksuite/affine/blocks/embed-doc/package.json

@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

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

@@ -338,6 +338,7 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke
       'note-empty': this.isNoteContentEmpty,
       'in-canvas': inCanvas,
       [this._cardStyle]: true,
+      'comment-highlighted': this.isCommentHighlighted,
     });
 
     const theme = this.std.get(ThemeProvider).theme;

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

@@ -5,3 +5,4 @@ export * from './edgeless-clipboard-config';
 export * from './embed-edgeless-linked-doc-block';
 export * from './embed-linked-doc-block';
 export * from './embed-linked-doc-spec';
+export { getEmbedLinkedDocIcons } from './utils';

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

@@ -9,12 +9,16 @@ export const styles = css`
     width: 100%;
     height: 100%;
     border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
     background: ${unsafeCSSVarV2('layer/background/primary')};
     user-select: none;
     position: relative;
   }
 
+  .affine-embed-linked-doc-block.comment-highlighted {
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
+
   .affine-embed-linked-doc-block.in-canvas {
     border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
     background: ${unsafeCSSVarV2('layer/background/linkedDocOnEdgeless')};
@@ -164,6 +168,7 @@ export const styles = css`
   .affine-embed-linked-doc-banner {
     margin: 12px 12px 0px 0px;
     width: 204px;
+    min-width: 204px;
     max-width: 100%;
     height: 102px;
     pointer-events: none;

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

@@ -232,6 +232,7 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
             surface: false,
             selected: this.selected$.value,
             'show-hover-border': true,
+            'comment-highlighted': this.isCommentHighlighted,
           })}
           @click=${this._handleClick}
           style=${containerStyleMap}

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

@@ -57,6 +57,9 @@ export const blockStyles = css`
     border-radius: 8px;
     overflow: hidden;
   }
+  .affine-embed-synced-doc-container.comment-highlighted {
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
   .affine-embed-synced-doc-container.show-hover-border:hover {
     border-color: var(--affine-border-color);
   }
@@ -194,8 +197,8 @@ export const cardStyles = css`
     width: 100%;
     height: ${EMBED_CARD_HEIGHT.horizontal}px;
     border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
-    background: var(--affine-background-primary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
+    background: ${unsafeCSSVarV2('layer/background/primary')};
     user-select: none;
   }
 

blocksuite/affine/blocks/embed/package.json

@@ -26,7 +26,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/lodash-es": "^4.17.12",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",

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

@@ -2,17 +2,20 @@ import {
   CaptionedBlockComponent,
   SelectedStyle,
 } from '@blocksuite/affine-components/caption';
-import type { EmbedCardStyle } from '@blocksuite/affine-model';
+import type { EmbedCardStyle, EmbedProps } from '@blocksuite/affine-model';
 import {
   EMBED_CARD_HEIGHT,
   EMBED_CARD_MIN_WIDTH,
   EMBED_CARD_WIDTH,
 } from '@blocksuite/affine-shared/consts';
-import { DocModeProvider } from '@blocksuite/affine-shared/services';
+import {
+  BlockElementCommentManager,
+  DocModeProvider,
+} from '@blocksuite/affine-shared/services';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { findAncestorModel } from '@blocksuite/affine-shared/utils';
 import type { BlockService } from '@blocksuite/std';
 import {
-  type GfxCompatibleProps,
   GfxViewInteractionExtension,
   type ResizeConstraint,
 } from '@blocksuite/std/gfx';
@@ -25,7 +28,7 @@ import { type ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
 
 export class EmbedBlockComponent<
-  Model extends BlockModel<GfxCompatibleProps> = BlockModel<GfxCompatibleProps>,
+  Model extends BlockModel<EmbedProps> = BlockModel<EmbedProps>,
   Service extends BlockService = BlockService,
   WidgetName extends string = string,
 > extends CaptionedBlockComponent<Model, Service, WidgetName> {
@@ -59,6 +62,14 @@ export class EmbedBlockComponent<
    */
   protected embedContainerStyle: StyleInfo = {};
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockElementCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   renderEmbed = (content: () => TemplateResult) => {
     if (
       this._cardStyle === 'horizontal' ||
@@ -90,6 +101,11 @@ export class EmbedBlockComponent<
         style=${styleMap({
           height: `${this._cardHeight}px`,
           width: '100%',
+          ...(this.isCommentHighlighted
+            ? {
+                border: `2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')}`,
+              }
+            : {}),
           ...this.embedContainerStyle,
         })}
       >

blocksuite/affine/blocks/embed/src/common/embed-note-content-styles.ts

@@ -57,6 +57,11 @@ export const embedNoteContentStyles = css`
     font-weight: 600;
   }
 
+  .affine-embed-doc-content-note-blocks inline-comment {
+    background-color: unset !important;
+    border-bottom: unset !important;
+  }
+
   .affine-embed-linked-doc-block.horizontal {
     affine-paragraph,
     affine-list {

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

@@ -1,4 +1,5 @@
 import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
+import type { EmbedProps } from '@blocksuite/affine-model';
 import { Bound } from '@blocksuite/global/gfx';
 import {
   blockComponentSymbol,
@@ -7,16 +8,13 @@ import {
   GfxElementSymbol,
   toGfxBlockComponent,
 } from '@blocksuite/std';
-import type {
-  GfxBlockElementModel,
-  GfxCompatibleProps,
-} from '@blocksuite/std/gfx';
+import type { GfxBlockElementModel } from '@blocksuite/std/gfx';
 import type { StyleInfo } from 'lit/directives/style-map.js';
 
 import type { EmbedBlockComponent } from './embed-block-element.js';
 
 export function toEdgelessEmbedBlock<
-  Model extends GfxBlockElementModel<GfxCompatibleProps>,
+  Model extends GfxBlockElementModel<EmbedProps>,
   Service extends BlockService,
   WidgetName extends string,
   B extends typeof EmbedBlockComponent<Model, Service, WidgetName>,

blocksuite/affine/blocks/embed/src/common/utils.ts

@@ -11,6 +11,8 @@ import {
   EmbedCardLightVerticalIcon,
 } from '@blocksuite/affine-components/icons';
 import { ColorScheme } from '@blocksuite/affine-model';
+import { EmbedOptionProvider } from '@blocksuite/affine-shared/services';
+import type { BlockStdScope } from '@blocksuite/std';
 import type { TemplateResult } from 'lit';
 
 type EmbedCardIcons = {
@@ -40,3 +42,8 @@ export function getEmbedCardIcons(theme: ColorScheme): EmbedCardIcons {
     };
   }
 }
+
+export function canEmbedAsEmbedBlock(std: BlockStdScope, url: string) {
+  const options = std.get(EmbedOptionProvider).getEmbedBlockOptions(url);
+  return options?.viewType === 'embed';
+}

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

@@ -11,9 +11,9 @@ export const styles = css`
     height: 100%;
 
     border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
 
-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
     user-select: none;
   }
 

blocksuite/affine/blocks/embed/src/embed-github-block/styles.ts

@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html } from 'lit';
 
 export const styles = css`
@@ -9,9 +10,9 @@ export const styles = css`
     height: 100%;
 
     border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
 
-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
     user-select: none;
     overflow: hidden;
   }

blocksuite/affine/blocks/embed/src/embed-html-block/styles.ts

@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html } from 'lit';
 
 export const EMBED_HTML_MIN_WIDTH = 370;
@@ -15,9 +16,9 @@ export const styles = css`
     gap: 20px;
 
     border-radius: 12px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
 
-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
     user-select: none;
   }
 

blocksuite/affine/blocks/embed/src/embed-iframe-block/configs/providers/generic.ts

@@ -0,0 +1,75 @@
+import { EmbedIframeConfigExtension } from '@blocksuite/affine-shared/services';
+
+const GENERIC_DEFAULT_WIDTH_IN_SURFACE = 800;
+const GENERIC_DEFAULT_HEIGHT_IN_SURFACE = 600;
+const GENERIC_DEFAULT_WIDTH_PERCENT = 100;
+const GENERIC_DEFAULT_HEIGHT_IN_NOTE = 400;
+
+/**
+ * AFFiNE domains that should be excluded from generic embedding
+ * These are based on the centralized cloud constants and known AFFiNE domains
+ */
+const AFFINE_DOMAINS = [
+  'affine.pro', // Main AFFiNE domain
+  'app.affine.pro', // Stable cloud domain
+  'insider.affine.pro', // Beta/internal cloud domain
+  'affine.fail', // Canary cloud domain
+  'toeverything.app', // Safety measure for potential future use
+  'apple.getaffineapp.com', // Cloud domain for Apple app
+];
+
+/**
+ * Validates if a URL is suitable for generic iframe embedding
+ * Allows HTTPS URLs but excludes AFFiNE domains
+ * @param url The URL to validate
+ * @returns Boolean indicating if the URL can be generically embedded
+ */
+function isValidGenericEmbedUrl(url: string): boolean {
+  try {
+    const parsedUrl = new URL(url);
+
+    // Only allow HTTPS for security
+    if (parsedUrl.protocol !== 'https:') {
+      return false;
+    }
+
+    // Exclude AFFiNE domains
+    const hostname = parsedUrl.hostname.toLowerCase();
+    if (
+      AFFINE_DOMAINS.some(
+        domain => hostname === domain || hostname.endsWith(`.${domain}`)
+      )
+    ) {
+      return false;
+    }
+
+    return true;
+  } catch {
+    // Invalid URL
+    return false;
+  }
+}
+
+const genericConfig = {
+  name: 'generic',
+  match: (url: string) => isValidGenericEmbedUrl(url),
+  buildOEmbedUrl: (url: string) => {
+    if (!isValidGenericEmbedUrl(url)) {
+      return undefined;
+    }
+    return url;
+  },
+  useOEmbedUrlDirectly: true,
+  options: {
+    widthInSurface: GENERIC_DEFAULT_WIDTH_IN_SURFACE,
+    heightInSurface: GENERIC_DEFAULT_HEIGHT_IN_SURFACE,
+    widthPercent: GENERIC_DEFAULT_WIDTH_PERCENT,
+    heightInNote: GENERIC_DEFAULT_HEIGHT_IN_NOTE,
+    allowFullscreen: true,
+    style: 'border: none; border-radius: 8px;',
+    allow: 'clipboard-read; clipboard-write; picture-in-picture;',
+    referrerpolicy: 'no-referrer-when-downgrade',
+  },
+};
+
+export const GenericEmbedConfig = EmbedIframeConfigExtension(genericConfig);

blocksuite/affine/blocks/embed/src/embed-iframe-block/configs/providers/index.ts

@@ -1,4 +1,5 @@
 import { ExcalidrawEmbedConfig } from './excalidraw';
+import { GenericEmbedConfig } from './generic';
 import { GoogleDocsEmbedConfig } from './google-docs';
 import { GoogleDriveEmbedConfig } from './google-drive';
 import { MiroEmbedConfig } from './miro';
@@ -10,4 +11,5 @@ export const EmbedIframeConfigExtensions = [
   MiroEmbedConfig,
   ExcalidrawEmbedConfig,
   GoogleDocsEmbedConfig,
+  GenericEmbedConfig,
 ];

blocksuite/affine/blocks/embed/src/embed-iframe-block/embed-iframe-block.ts

@@ -11,6 +11,7 @@ import {
   type IframeOptions,
   LinkPreviewServiceIdentifier,
   NotificationProvider,
+  VirtualKeyboardProvider,
 } from '@blocksuite/affine-shared/services';
 import { matchModels } from '@blocksuite/affine-shared/utils';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
@@ -213,9 +214,33 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
       this._linkInputAbortController.abort();
     }
 
+    const keyboard = this.host.std.getOptional(VirtualKeyboardProvider);
+    const computePosition = keyboard
+      ? {
+          referenceElement: document.body,
+          placement: 'top' as const,
+          middleware: [
+            offset(({ rects }) => ({
+              mainAxis:
+                -rects.floating.height -
+                (window.innerHeight -
+                  rects.floating.height -
+                  keyboard.height$.value) /
+                  2,
+            })),
+          ],
+          autoUpdate: { animationFrame: true },
+        }
+      : {
+          referenceElement: this._blockContainer,
+          placement: 'bottom' as const,
+          middleware: [flip(), offset(LINK_CREATE_POPUP_OFFSET), shift()],
+          autoUpdate: { animationFrame: true },
+        };
+
     this._linkInputAbortController = new AbortController();
 
-    createLitPortal({
+    const { update } = createLitPortal({
       template: html`<embed-iframe-link-input-popup
         .model=${this.model}
         .abortController=${this._linkInputAbortController}
@@ -224,15 +249,19 @@ export class EmbedIframeBlockComponent extends CaptionedBlockComponent<EmbedIfra
         .options=${options}
       ></embed-iframe-link-input-popup>`,
       container: document.body,
-      computePosition: {
-        referenceElement: this._blockContainer,
-        placement: 'bottom',
-        middleware: [flip(), offset(LINK_CREATE_POPUP_OFFSET), shift()],
-        autoUpdate: { animationFrame: true },
-      },
+      computePosition,
       abortController: this._linkInputAbortController,
       closeOnClickAway: true,
     });
+
+    if (keyboard) {
+      this._linkInputAbortController.signal.addEventListener(
+        'abort',
+        keyboard.height$.subscribe(() => {
+          update();
+        })
+      );
+    }
   };
 
   /**

blocksuite/affine/blocks/embed/src/embed-loom-block/styles.ts

@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css, html } from 'lit';
 
 export const styles = css`
@@ -12,9 +13,9 @@ export const styles = css`
     height: 100%;
 
     border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
 
-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
     user-select: none;
   }
 

blocksuite/affine/blocks/embed/src/embed-youtube-block/styles.ts

@@ -13,9 +13,9 @@ export const styles = css`
     padding: 12px;
 
     border-radius: 8px;
-    border: 1px solid var(--affine-background-tertiary-color);
+    border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
 
-    background: var(--affine-background-primary-color);
+    background: ${unsafeCSSVarV2('layer/background/primary')};
     user-select: none;
   }
 

blocksuite/affine/blocks/frame/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

blocksuite/affine/blocks/image/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "file-type": "^21.0.0",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -18,6 +18,7 @@ import type { BaseSelection } from '@blocksuite/store';
 import { computed } from '@preact/signals-core';
 import { css, html, type PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 
@@ -76,6 +77,10 @@ export class ImageBlockPageComponent extends SignalWatcher(
       width: 100%;
       height: 100%;
     }
+
+    affine-page-image .comment-highlighted {
+      outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+    }
   `;
 
   resizeable$ = computed(() => this.block.resizeable$.value);
@@ -364,7 +369,13 @@ export class ImageBlockPageComponent extends SignalWatcher(
     const { loading, error, icon, description, needUpload } = this.state;
 
     return html`
-      <div class="resizable-img" style=${styleMap(imageSize)}>
+      <div
+        class=${classMap({
+          'resizable-img': true,
+          'comment-highlighted': this.block.isCommentHighlighted,
+        })}
+        style=${styleMap(imageSize)}
+      >
         <img
           class="drag-target"
           draggable="false"

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

@@ -5,7 +5,10 @@ import { Peekable } from '@blocksuite/affine-components/peek';
 import { ResourceController } from '@blocksuite/affine-components/resource';
 import type { ImageBlockModel } from '@blocksuite/affine-model';
 import { ImageSelection } from '@blocksuite/affine-shared/selection';
-import { ToolbarRegistryIdentifier } from '@blocksuite/affine-shared/services';
+import {
+  BlockElementCommentManager,
+  ToolbarRegistryIdentifier,
+} from '@blocksuite/affine-shared/services';
 import { formatSize } from '@blocksuite/affine-shared/utils';
 import { IS_MOBILE } from '@blocksuite/global/env';
 import { BrokenImageIcon, ImageIcon } from '@blocksuite/icons/lit';
@@ -65,6 +68,14 @@ export class ImageBlockComponent extends CaptionedBlockComponent<ImageBlockModel
     return this.pageImage?.resizeImg;
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockElementCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   private _handleClick(event: MouseEvent) {
     // the peek view need handle shift + click
     if (event.defaultPrevented) return;

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

@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { toGfxBlockComponent } from '@blocksuite/std';
 import { css } from 'lit';
 
@@ -9,7 +10,7 @@ export class ImageEdgelessPlaceholderBlockComponent extends toGfxBlockComponent(
   static override styles = css`
     affine-edgeless-placeholder-preview-image
       .affine-placeholder-preview-container {
-      border: 1px solid var(--affine-background-tertiary-color);
+      border: 1px solid ${unsafeCSSVarV2('layer/background/tertiary')};
     }
   `;
 

blocksuite/affine/blocks/latex/package.json

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/katex": "^0.16.7",
     "@types/mdast": "^4.0.4",
     "katex": "^0.16.11",

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

@@ -116,7 +116,7 @@ export class LatexBlockComponent extends CaptionedBlockComponent<LatexBlockModel
 
     this.selection.setGroup('note', []);
 
-    const portal = createLitPortal({
+    const { portal } = createLitPortal({
       template: html`<latex-editor-menu
         .std=${this.std}
         .latexSignal=${this.model.props.latex$}

blocksuite/affine/blocks/list/package.json

@@ -24,7 +24,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/mdast": "^4.0.4",
     "lit": "^3.2.0",
     "minimatch": "^10.0.1",

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

@@ -23,6 +23,7 @@ import { effect } from '@preact/signals-core';
 import { html, nothing, type TemplateResult } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 import { correctNumberedListsOrderToPrev } from './commands/utils.js';
@@ -138,6 +139,11 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
 
   override renderBlock(): TemplateResult<1> {
     const { model, _onClickIcon } = this;
+    const widgets = html`${repeat(
+      Object.entries(this.widgets),
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
     const collapsed = this.store.readonly
       ? this._readonlyCollapsed
       : model.props.collapsed;
@@ -199,7 +205,7 @@ export class ListBlockComponent extends CaptionedBlockComponent<ListBlockModel>
           ></rich-text>
         </div>
 
-        ${children}
+        ${children} ${widgets}
       </div>
     `;
   }

blocksuite/affine/blocks/note/package.json

@@ -27,7 +27,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/lodash-es": "^4.17.12",
     "@types/mdast": "^4.0.4",
     "@vanilla-extract/css": "^1.17.0",

blocksuite/affine/blocks/paragraph/package.json

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

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

@@ -8,6 +8,7 @@ import {
   EDGELESS_TOP_CONTENTEDITABLE_SELECTOR,
 } from '@blocksuite/affine-shared/consts';
 import {
+  BlockElementCommentManager,
   CitationProvider,
   DocModeProvider,
 } from '@blocksuite/affine-shared/services';
@@ -26,6 +27,7 @@ import { computed, effect, signal } from '@preact/signals-core';
 import { html, nothing, type TemplateResult } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
@@ -107,6 +109,14 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
     );
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockElementCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   override get topContenteditableElement() {
     if (this.std.get(DocModeProvider).getEditorMode() === 'edgeless') {
       return this.closest<BlockComponent>(
@@ -227,6 +237,12 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
   }
 
   override renderBlock(): TemplateResult<1> {
+    const widgets = html`${repeat(
+      Object.entries(this.widgets),
+      ([id]) => id,
+      ([_, widget]) => widget
+    )}`;
+
     const { type$ } = this.model.props;
     const collapsed = this.store.readonly
       ? this._readonlyCollapsed
@@ -268,7 +284,10 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
         }
       </style>
       <div
-        class="affine-paragraph-block-container"
+        class=${classMap({
+          'affine-paragraph-block-container': true,
+          'highlight-comment': this.isCommentHighlighted,
+        })}
         data-has-collapsed-siblings="${collapsedSiblings.length > 0}"
       >
         <div
@@ -340,7 +359,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
               `}
         </div>
 
-        ${children}
+        ${children} ${widgets}
       </div>
     `;
   }

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

@@ -1,3 +1,4 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import { css } from 'lit';
 
 export const paragraphBlockStyles = css`
@@ -15,6 +16,11 @@ export const paragraphBlockStyles = css`
     position: relative;
   }
 
+  .affine-paragraph-block-container.highlight-comment {
+    background-color: ${unsafeCSSVarV2('block/comment/highlightActive')};
+    outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+  }
+
   affine-paragraph code {
     font-size: calc(var(--affine-font-base) - 3px);
     padding: 0px 4px 2px;

blocksuite/affine/blocks/root/package.json

@@ -44,7 +44,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/lodash-es": "^4.17.12",
     "dompurify": "^3.2.4",
     "html2canvas": "^1.4.1",

blocksuite/affine/blocks/root/src/configs/toolbar.ts

@@ -9,6 +9,7 @@ import {
   promptDocTitle,
 } from '@blocksuite/affine-block-embed';
 import { updateBlockType } from '@blocksuite/affine-block-note';
+import type { HighlightType } from '@blocksuite/affine-components/highlight-dropdown-menu';
 import { toast } from '@blocksuite/affine-components/toast';
 import { EditorChevronDown } from '@blocksuite/affine-components/toolbar';
 import {
@@ -19,6 +20,10 @@ import {
   isFormatSupported,
   textFormatConfigs,
 } from '@blocksuite/affine-inline-preset';
+import {
+  EmbedLinkedDocBlockSchema,
+  EmbedSyncedDocBlockSchema,
+} from '@blocksuite/affine-model';
 import { textConversionConfigs } from '@blocksuite/affine-rich-text';
 import {
   copySelectedModelsCommand,
@@ -37,8 +42,10 @@ import type {
   ToolbarActionGroup,
   ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
-import { ActionPlacement } from '@blocksuite/affine-shared/services';
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import {
+  ActionPlacement,
+  blockCommentToolbarButton,
+} from '@blocksuite/affine-shared/services';
 import { tableViewMeta } from '@blocksuite/data-view/view-presets';
 import {
   CopyIcon,
@@ -47,7 +54,11 @@ import {
   DuplicateIcon,
   LinkedPageIcon,
 } from '@blocksuite/icons/lit';
-import { type BlockComponent, BlockSelection } from '@blocksuite/std';
+import {
+  type BlockComponent,
+  BlockSelection,
+  BlockViewIdentifier,
+} from '@blocksuite/std';
 import { toDraftModel } from '@blocksuite/store';
 import { html } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
@@ -140,7 +151,7 @@ const highlightActionGroup = {
   id: 'c.highlight',
   when: ({ chain }) => isFormatSupported(chain).run()[0],
   content({ chain }) {
-    const updateHighlight = (styles: AffineTextAttributes) => {
+    const updateHighlight = (styles: HighlightType) => {
       const payload = { styles };
       chain
         .try(chain => [
@@ -161,7 +172,7 @@ const highlightActionGroup = {
 } as const satisfies ToolbarAction;
 
 const turnIntoDatabase = {
-  id: 'd.convert-to-database',
+  id: 'e.convert-to-database',
   tooltip: 'Create Table',
   icon: DatabaseTableViewIcon(),
   when({ chain }) {
@@ -208,10 +219,21 @@ const turnIntoDatabase = {
 } as const satisfies ToolbarAction;
 
 const turnIntoLinkedDoc = {
-  id: 'e.convert-to-linked-doc',
+  id: 'f.convert-to-linked-doc',
   tooltip: 'Create Linked Doc',
   icon: LinkedPageIcon(),
-  when({ chain }) {
+  when({ chain, std }) {
+    const supportFlavours = [
+      EmbedLinkedDocBlockSchema,
+      EmbedSyncedDocBlockSchema,
+    ].map(schema => schema.model.flavour);
+    if (
+      supportFlavours.some(
+        flavour => !std.getOptional(BlockViewIdentifier(flavour))
+      )
+    )
+      return false;
+
     const [ok, { selectedModels }] = chain
       .pipe(getSelectedModelsCommand, {
         types: ['block', 'text'],
@@ -273,6 +295,10 @@ export const builtinToolbarConfig = {
     highlightActionGroup,
     turnIntoDatabase,
     turnIntoLinkedDoc,
+    {
+      id: 'g.comment',
+      ...blockCommentToolbarButton,
+    },
     {
       placement: ActionPlacement.More,
       id: 'a.clipboard',

blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/misc.ts

@@ -17,6 +17,7 @@ import {
 } from '@blocksuite/affine-model';
 import {
   ActionPlacement,
+  blockCommentToolbarButton,
   type ElementLockEvent,
   type ToolbarAction,
   type ToolbarContext,
@@ -305,6 +306,12 @@ export const builtinMiscToolbarConfig = {
       },
     },
 
+    {
+      placement: ActionPlacement.End,
+      id: 'c.comment',
+      ...blockCommentToolbarButton,
+    },
+
     // More actions
     ...moreActions.map(action => ({
       ...action,

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

@@ -305,7 +305,10 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
       );
 
       // make sure there is a block can be focused
-      if (notes.length === 0 || notes[notes.length - 1].children.length === 0) {
+      if (
+        !this.store.readonly$.value &&
+        (notes.length === 0 || notes[notes.length - 1].children.length === 0)
+      ) {
         this.std.command.exec(appendParagraphCommand);
         return;
       }
@@ -322,7 +325,7 @@ export class PageRootBlockComponent extends BlockComponent<RootBlockModel> {
         parseFloat(paddingLeft),
         parseFloat(paddingRight)
       );
-      if (!isClickOnBlankArea) {
+      if (!isClickOnBlankArea && !this.store.readonly$.value) {
         const lastBlock = notes[notes.length - 1].lastChild();
         if (
           !lastBlock ||

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

@@ -25,7 +25,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/lodash-es": "^4.17.12",
     "fractional-indexing": "^3.2.0",
     "lit": "^3.2.0",

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

@@ -13,6 +13,7 @@ import {
   type SurfaceRefBlockModel,
 } from '@blocksuite/affine-model';
 import {
+  BlockElementCommentManager,
   DocModeProvider,
   EditPropsStore,
   type OpenDocMode,
@@ -76,6 +77,10 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
       border-color: ${unsafeCSSVarV2('edgeless/frame/border/active')};
     }
 
+    .affine-surface-ref.comment-highlighted {
+      outline: 2px solid ${unsafeCSSVarV2('block/comment/highlightUnderline')};
+    }
+
     @media print {
       .affine-surface-ref {
         outline: none !important;
@@ -137,6 +142,14 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
     return this._referencedModel;
   }
 
+  get isCommentHighlighted() {
+    return (
+      this.std
+        .getOptional(BlockElementCommentManager)
+        ?.isBlockCommentHighlighted(this.model) ?? false
+    );
+  }
+
   private readonly _handleClick = () => {
     this.selection.update(() => {
       return [this.selection.create(BlockSelection, { blockId: this.blockId })];
@@ -456,6 +469,7 @@ export class SurfaceRefBlockComponent extends BlockComponent<SurfaceRefBlockMode
         class=${classMap({
           'affine-surface-ref': true,
           focused: this.selected$.value,
+          'comment-highlighted': this.isCommentHighlighted,
         })}
         @click=${this._handleClick}
       >

blocksuite/affine/blocks/surface/package.json

@@ -20,7 +20,7 @@
     "@blocksuite/store": "workspace:*",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/lodash-es": "^4.17.12",
     "fractional-indexing": "^3.2.0",
     "html2canvas": "^1.4.1",

blocksuite/affine/components/package.json

@@ -21,7 +21,7 @@
     "@lit/context": "^1.1.2",
     "@lottiefiles/dotlottie-wc": "^0.5.0",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/hast": "^3.0.4",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",
@@ -73,7 +73,8 @@
     "./edgeless-line-styles-panel": "./src/edgeless-line-styles-panel/index.ts",
     "./edgeless-shape-color-picker": "./src/edgeless-shape-color-picker/index.ts",
     "./open-doc-dropdown-menu": "./src/open-doc-dropdown-menu/index.ts",
-    "./slider": "./src/slider/index.ts"
+    "./slider": "./src/slider/index.ts",
+    "./tooltip": "./src/tooltip/index.ts"
   },
   "files": [
     "src",

blocksuite/affine/components/src/context-menu/sub-menu.ts

@@ -85,6 +85,8 @@ export class MenuSubMenu extends MenuFocusable {
         .catch(err => console.error(err));
     });
     this.menu.openSubMenu(menu);
+    // in case that the menu is not closed, but the component is removed,
+    this.disposables.add(unsub);
   }
 
   protected override render(): unknown {

blocksuite/affine/components/src/highlight-dropdown-menu/dropdown-menu.ts

@@ -1,4 +1,4 @@
-import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import type { AffineTextStyleAttributes } from '@blocksuite/affine-shared/types';
 import { PropTypes, requiredProperties } from '@blocksuite/std';
 import { LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -20,7 +20,10 @@ const colors = [
   'grey',
 ] as const;
 
-type HighlightType = 'color' | 'background';
+export type HighlightType = Pick<
+  AffineTextStyleAttributes,
+  'color' | 'background'
+>;
 
 // TODO(@fundon): these recent settings should be added to the dropdown menu
 // tests/blocksutie/e2e/format-bar.spec.ts#253
@@ -33,13 +36,13 @@ type HighlightType = 'color' | 'background';
 })
 export class HighlightDropdownMenu extends LitElement {
   @property({ attribute: false })
-  accessor updateHighlight!: (styles: AffineTextAttributes) => void;
+  accessor updateHighlight!: (styles: HighlightType) => void;
 
-  private readonly _update = (value: string | null, type: HighlightType) => {
+  private readonly _update = (style: HighlightType) => {
     // latestHighlightColor = value;
     // latestHighlightType = type;
 
-    this.updateHighlight({ [`${type}`]: value });
+    this.updateHighlight(style);
   };
 
   override render() {
@@ -71,7 +74,7 @@ export class HighlightDropdownMenu extends LitElement {
             return html`
               <editor-menu-action
                 data-testid="foreground-${color}"
-                @click=${() => this._update(value, 'color')}
+                @click=${() => this._update({ color: value })}
               >
                 <affine-text-duotone-icon
                   style=${styleMap({
@@ -92,7 +95,7 @@ export class HighlightDropdownMenu extends LitElement {
             return html`
               <editor-menu-action
                 data-testid="background-${color}"
-                @click=${() => this._update(value, 'background')}
+                @click=${() => this._update({ background: value })}
               >
                 <affine-text-duotone-icon
                   style=${styleMap({

blocksuite/affine/components/src/hover/controller.ts

@@ -179,7 +179,7 @@ export class HoverController implements ReactiveController {
       this._portal = createLitPortal({
         ...portalOptions,
         abortController: this._abortController,
-      });
+      }).portal;
 
       const transition = this._hoverOptions.transition;
       if (transition) {

blocksuite/affine/components/src/icons/loading.ts

@@ -18,6 +18,7 @@ export const LoadingIcon = ({
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
+    style="fill: none;"
   >
     <style>
       .spinner {

blocksuite/affine/components/src/peek/peekable.ts

@@ -1,7 +1,14 @@
+import { NoteBlockModel } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
-import { isInsideEdgelessEditor } from '@blocksuite/affine-shared/utils';
+import {
+  isInsideEdgelessEditor,
+  matchModels,
+} from '@blocksuite/affine-shared/utils';
 import type { Constructor } from '@blocksuite/global/utils';
-import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
+import {
+  GfxBlockElementModel,
+  GfxControllerIdentifier,
+} from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 import type { LitElement, TemplateResult } from 'lit';
 
@@ -72,6 +79,20 @@ export const Peekable =
         );
 
         if (hitTarget && hitTarget !== model) {
+          // Check if hitTarget is a GfxBlockElementModel (which extends BlockModel)
+          // and if it's a NoteBlockModel, then check if current model is inside it
+          if (
+            hitTarget instanceof GfxBlockElementModel &&
+            matchModels(hitTarget, [NoteBlockModel])
+          ) {
+            let curModel: BlockModel | null = model;
+            while (curModel) {
+              if (curModel === hitTarget) {
+                return true; // Model is inside the NoteBlockModel, allow peek
+              }
+              curModel = curModel.parent;
+            }
+          }
           return false;
         }
 

blocksuite/affine/components/src/portal/helper.ts

@@ -161,7 +161,7 @@ export function createLitPortal({
   }
 
   if (!positionConfigOrFn) {
-    return portalRoot;
+    return { portal: portalRoot, update: () => {} };
   }
 
   const visibility = portalRoot.style.visibility;
@@ -221,5 +221,5 @@ export function createLitPortal({
     });
   }
 
-  return portalRoot;
+  return { portal: portalRoot, update };
 }

blocksuite/affine/components/src/toolbar/index.ts

@@ -1,3 +1,4 @@
+import { effects as tooltipEffects } from '../tooltip/effect.js';
 import { EditorIconButton } from './icon-button.js';
 import {
   EditorMenuAction,
@@ -6,7 +7,6 @@ import {
 } from './menu-button.js';
 import { EditorToolbarSeparator } from './separator.js';
 import { EditorToolbar } from './toolbar.js';
-import { Tooltip } from './tooltip.js';
 
 export { EditorChevronDown } from './chevron-down.js';
 export { ToolbarMoreMenuConfigExtension } from './config.js';
@@ -20,7 +20,6 @@ export { MenuContext } from './menu-context.js';
 export { EditorToolbarSeparator } from './separator.js';
 export { darkToolbarStyles, lightToolbarStyles } from './styles.js';
 export { EditorToolbar } from './toolbar.js';
-export { Tooltip } from './tooltip.js';
 export type {
   AdvancedMenuItem,
   FatMenuItems,
@@ -38,11 +37,12 @@ export {
 } from './utils.js';
 
 export function effects() {
+  tooltipEffects();
+
   customElements.define('editor-toolbar-separator', EditorToolbarSeparator);
   customElements.define('editor-toolbar', EditorToolbar);
   customElements.define('editor-icon-button', EditorIconButton);
   customElements.define('editor-menu-button', EditorMenuButton);
   customElements.define('editor-menu-content', EditorMenuContent);
   customElements.define('editor-menu-action', EditorMenuAction);
-  customElements.define('affine-tooltip', Tooltip);
 }

blocksuite/affine/components/src/tooltip/effect.ts

@@ -0,0 +1,7 @@
+import { Tooltip } from './tooltip.js';
+
+export function effects() {
+  if (!customElements.get('affine-tooltip')) {
+    customElements.define('affine-tooltip', Tooltip);
+  }
+}

blocksuite/affine/components/src/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { effects } from './effect.js';
+export { Tooltip } from './tooltip.js';

blocksuite/affine/components/src/tooltip/tooltip.ts

@@ -190,7 +190,10 @@ export class Tooltip extends LitElement {
             middleware: [
               this.autoFlip && flip({ padding: AUTO_FLIP_PADDING }),
               this.autoShift && shift({ padding: AUTO_SHIFT_PADDING }),
-              offset((this.arrow ? TRIANGLE_HEIGHT : 0) + this.offset),
+              offset({
+                mainAxis: (this.arrow ? TRIANGLE_HEIGHT : 0) + this.offsetY,
+                crossAxis: this.offsetX,
+              }),
               arrow({
                 element: portalRoot.shadowRoot!.querySelector('.arrow')!,
               }),
@@ -264,7 +267,7 @@ export class Tooltip extends LitElement {
    * Show a triangle arrow pointing to the reference element.
    */
   @property({ attribute: false })
-  accessor arrow = true;
+  accessor arrow = false;
 
   /**
    * changes the placement of the floating element in order to keep it in view,
@@ -303,7 +306,10 @@ export class Tooltip extends LitElement {
    * See https://floating-ui.com/docs/offset
    */
   @property({ attribute: false })
-  accessor offset = 4;
+  accessor offsetY = 6;
+
+  @property({ attribute: false })
+  accessor offsetX = 0;
 
   @property({ attribute: 'tip-position' })
   accessor placement: Placement = 'top';

blocksuite/affine/data-view/package.json

@@ -21,7 +21,7 @@
     "@floating-ui/dom": "^1.6.13",
     "@lit/context": "^1.1.2",
     "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
     "@types/lodash-es": "^4.17.12",
     "clsx": "^2.1.1",
     "date-fns": "^4.0.0",

blocksuite/affine/data-view/src/property-presets/date/cell-renderer.ts

@@ -78,7 +78,7 @@ export class DateCell extends BaseCellRenderer<number, number> {
         },
       });
     } else {
-      const root = createLitPortal({
+      const { portal } = createLitPortal({
         abortController,
         closeOnClickAway: true,
         computePosition: {
@@ -107,7 +107,7 @@ export class DateCell extends BaseCellRenderer<number, number> {
       //       for now the slide-layout-modal's z-index is `1001`
       //       the z-index of popover should be higher than it
       // root.style.zIndex = 'var(--affine-z-index-popover)';
-      root.style.zIndex = '1002';
+      portal.style.zIndex = '1002';
     }
   };