feat(core): block diff ui

feat(core): markdown-diff & patch apply
feat(server): add comment-attachment storage (#12911 )
2026-07-04 11:09:01 +08:00 · 2025-07-02 10:42:28 +08:00 · 2025-07-02 10:40:23 +08:00 · 2025-07-01 07:04:52 +00:00 · 2025-07-01 05:24:42 +00:00 · 2025-07-01 13:06:06 +08:00
321 changed files with 9000 additions and 1611 deletions
@@ -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
        }
      }
    },
@@ -587,6 +597,11 @@
          "type": "string",
          "description": "Allowed version range of the app that allowed to access the server. Requires 'client/versionControl.enabled' to be true to take effect.\n@default \">=0.20.0\"",
          "default": ">=0.20.0"
+        },
+        "allowGuestDemoWorkspace": {
+          "type": "boolean",
+          "description": "Allow guests to access demo workspace.\n@default true",
+          "default": true
        }
      }
    },
@@ -727,6 +742,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\":\"\"}",
@@ -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,
@@ -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 }}
@@ -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'
@@ -83,6 +83,13 @@ jobs:
      - build-ios-web
    steps:
      - uses: actions/checkout@v4
+      - name: Setup Version
+        uses: ./.github/actions/setup-version
+        with:
+          app-version: ${{ inputs.app-version }}
+      - name: 'Update Code Sign Identity'
+        shell: bash
+        run: ./packages/frontend/apps/ios/update_code_sign_identity.sh
      - name: Download mobile artifact
        uses: actions/download-artifact@v4
        with:
@@ -125,6 +132,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 }}
@@ -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",
@@ -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",
@@ -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);
@@ -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",
@@ -27,7 +27,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",
@@ -450,7 +450,7 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
          contenteditable="false"
          class="affine-code-block-preview"
        >
-          ${previewContext?.renderer(this.model)}
+          ${shouldRenderPreview && previewContext?.renderer(this.model)}
        </div>
        ${this.renderChildren(this.model)} ${Object.values(this.widgets)}
      </div>
@@ -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",
@@ -42,6 +42,7 @@ import { computed, signal } from '@preact/signals-core';
 import { css, nothing, unsafeCSS } from 'lit';
 import { html } from 'lit/static-html.js';

+import { repeat } from 'lit/directives/repeat.js';
 import { BlockQueryDataSource } from './data-source.js';
 import type { DataViewBlockModel } from './data-view-model.js';

@@ -303,9 +304,16 @@ 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()}
+        ${widgets}
      </div>
    `;
  }
@@ -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",
@@ -45,6 +45,7 @@ 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';
 import { EditorHostKey } from './context/host-context.js';
@@ -428,9 +429,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>
    `;
  }
@@ -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",
@@ -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",
@@ -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",
@@ -495,14 +495,6 @@ export class EmbedLinkedDocBlockComponent extends EmbedBlockComponent<EmbedLinke

    const linkedDoc = this.linkedDoc;
    if (linkedDoc) {
-      this.disposables.add(
-        linkedDoc.workspace.slots.docListUpdated.subscribe(() => {
-          this._load().catch(e => {
-            console.error(e);
-            this.isError = true;
-          });
-        })
-      );
      // Should throttle the blockUpdated event to avoid too many re-renders
      // Because the blockUpdated event is triggered too frequently at some cases
      this.disposables.add(
@@ -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",
@@ -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';
+}
@@ -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);
@@ -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,
 ];
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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>
    `;
  }
@@ -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",
@@ -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",
@@ -26,6 +26,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';

@@ -227,6 +228,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
@@ -340,7 +347,7 @@ export class ParagraphBlockComponent extends CaptionedBlockComponent<ParagraphBl
              `}
        </div>

-        ${children}
+        ${children} ${widgets}
      </div>
    `;
  }
@@ -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",
@@ -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",
@@ -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",
@@ -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",
@@ -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;
        }

@@ -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",
@@ -22,7 +22,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",
@@ -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",
    "lit": "^3.2.0",
    "rxjs": "^7.8.1"
  },
@@ -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",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
    "rxjs": "^7.8.1",
@@ -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/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -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",
    "@vanilla-extract/css": "^1.17.0",
    "lit": "^3.2.0",
    "minimatch": "^10.0.1",
@@ -23,7 +23,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",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -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",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -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",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -26,7 +26,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",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -30,7 +30,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",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -26,7 +26,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",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -23,7 +23,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",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -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",
    "@types/lodash-es": "^4.17.12",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -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",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -23,7 +23,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",
    "lit": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -22,7 +22,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",
    "collapse-white-space": "^2.1.0",
    "date-fns": "^4.0.0",
@@ -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/hast": "^3.0.4",
    "@types/katex": "^0.16.7",
    "@types/lodash-es": "^4.17.12",
@@ -22,7 +22,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",
    "collapse-white-space": "^2.1.0",
    "date-fns": "^4.0.0",
@@ -228,23 +228,20 @@ export const builtinInlineLinkToolbarConfig = {
            const props = { url };
            let blockId: string | undefined;

-            // first try to embed as iframe block
            const embedIframeService = ctx.std.get(EmbedIframeService);
-            if (embedIframeService.canEmbed(url)) {
+            const embedOptions = ctx.std
+              .get(EmbedOptionProvider)
+              .getEmbedBlockOptions(url);
+
+            if (embedOptions?.viewType === 'embed') {
+              const flavour = embedOptions.flavour;
+              blockId = ctx.store.addBlock(flavour, props, parent, index + 1);
+            } else if (embedIframeService.canEmbed(url)) {
              blockId = embedIframeService.addEmbedIframeBlock(
                props,
                parent.id,
                index + 1
              );
-            } else {
-              // if not, try to add as other embed link block
-              const options = ctx.std
-                .get(EmbedOptionProvider)
-                .getEmbedBlockOptions(url);
-              if (options?.viewType !== 'embed') return;
-
-              const flavour = options.flavour;
-              blockId = ctx.store.addBlock(flavour, props, parent, index + 1);
            }

            if (!blockId) return;
@@ -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",
    "collapse-white-space": "^2.1.0",
    "date-fns": "^4.0.0",
@@ -27,7 +27,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/hast": "^3.0.4",
    "@types/katex": "^0.16.7",
    "@types/lodash-es": "^4.17.12",
@@ -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",
    "collapse-white-space": "^2.1.0",
    "date-fns": "^4.0.0",
@@ -13,7 +13,7 @@
    "@blocksuite/global": "workspace:*",
    "@blocksuite/std": "workspace:*",
    "@blocksuite/store": "workspace:*",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@types/lodash-es": "^4.17.12",
    "fractional-indexing": "^3.2.0",
    "lodash-es": "^4.17.21",
@@ -20,7 +20,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",
    "collapse-white-space": "^2.1.0",
    "date-fns": "^4.0.0",
@@ -18,7 +18,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/bytes": "^3.1.5",
    "@types/hast": "^3.0.4",
    "@types/lodash-es": "^4.17.12",
@@ -63,7 +63,8 @@
    "./theme": "./src/theme/index.ts",
    "./styles": "./src/styles/index.ts",
    "./services": "./src/services/index.ts",
-    "./adapters": "./src/adapters/index.ts"
+    "./adapters": "./src/adapters/index.ts",
+    "./test-utils": "./src/test-utils/index.ts"
  },
  "files": [
    "src",
@@ -4,7 +4,7 @@
 import { describe, expect, it } from 'vitest';

 import { getFirstBlockCommand } from '../../../commands/block-crud/get-first-content-block';
-import { affine } from '../../helpers/affine-template';
+import { affine } from '../../../test-utils';

 describe('commands/block-crud', () => {
  describe('getFirstBlockCommand', () => {
@@ -4,7 +4,7 @@
 import { describe, expect, it } from 'vitest';

 import { getLastBlockCommand } from '../../../commands/block-crud/get-last-content-block';
-import { affine } from '../../helpers/affine-template';
+import { affine } from '../../../test-utils';

 describe('commands/block-crud', () => {
  describe('getLastBlockCommand', () => {
@@ -1,13 +1,11 @@
 /**
 * @vitest-environment happy-dom
 */
-import '../../helpers/affine-test-utils';
-
 import type { TextSelection } from '@blocksuite/std';
 import { describe, expect, it } from 'vitest';

 import { replaceSelectedTextWithBlocksCommand } from '../../../commands/model-crud/replace-selected-text-with-blocks';
-import { affine, block } from '../../helpers/affine-template';
+import { affine, block } from '../../../test-utils';

 describe('commands/model-crud', () => {
  describe('replaceSelectedTextWithBlocksCommand', () => {
@@ -6,7 +6,7 @@ import { describe, expect, it, vi } from 'vitest';

 import { isNothingSelectedCommand } from '../../../commands/selection/is-nothing-selected';
 import { ImageSelection } from '../../../selection';
-import { affine } from '../../helpers/affine-template';
+import { affine } from '../../../test-utils';

 describe('commands/selection', () => {
  describe('isNothingSelectedCommand', () => {
@@ -1,298 +0,0 @@
-import {
-  CodeBlockSchemaExtension,
-  DatabaseBlockSchemaExtension,
-  ImageBlockSchemaExtension,
-  ListBlockSchemaExtension,
-  NoteBlockSchemaExtension,
-  ParagraphBlockSchemaExtension,
-  RootBlockSchemaExtension,
-} from '@blocksuite/affine-model';
-import { TextSelection } from '@blocksuite/std';
-import { type Block, type Store } from '@blocksuite/store';
-import { Text } from '@blocksuite/store';
-import { TestWorkspace } from '@blocksuite/store/test';
-
-import { createTestHost } from './create-test-host';
-
-// Extensions array
-const extensions = [
-  RootBlockSchemaExtension,
-  NoteBlockSchemaExtension,
-  ParagraphBlockSchemaExtension,
-  ListBlockSchemaExtension,
-  ImageBlockSchemaExtension,
-  DatabaseBlockSchemaExtension,
-  CodeBlockSchemaExtension,
-];
-
-// Mapping from tag names to flavours
-const tagToFlavour: Record<string, string> = {
-  'affine-page': 'affine:page',
-  'affine-note': 'affine:note',
-  'affine-paragraph': 'affine:paragraph',
-  'affine-list': 'affine:list',
-  'affine-image': 'affine:image',
-  'affine-database': 'affine:database',
-  'affine-code': 'affine:code',
-};
-
-interface SelectionInfo {
-  anchorBlockId?: string;
-  anchorOffset?: number;
-  focusBlockId?: string;
-  focusOffset?: number;
-  cursorBlockId?: string;
-  cursorOffset?: number;
-}
-
-/**
- * Parse template strings and build BlockSuite document structure,
- * then create a host object with the document
- *
- * Example:
- * ```
- * const host = affine`
- *   <affine-page id="page">
- *     <affine-note id="note">
- *       <affine-paragraph id="paragraph-1">Hello, world<anchor /></affine-paragraph>
- *       <affine-paragraph id="paragraph-2">Hello, world<focus /></affine-paragraph>
- *     </affine-note>
- *   </affine-page>
- * `;
- * ```
- */
-export function affine(strings: TemplateStringsArray, ...values: any[]) {
-  // Merge template strings and values
-  let htmlString = '';
-  strings.forEach((str, i) => {
-    htmlString += str;
-    if (i < values.length) {
-      htmlString += values[i];
-    }
-  });
-
-  // Create a new doc
-  const workspace = new TestWorkspace({});
-  workspace.meta.initialize();
-  const doc = workspace.createDoc('test-doc');
-  const store = doc.getStore({ extensions });
-
-  let selectionInfo: SelectionInfo = {};
-
-  // Use DOMParser to parse HTML string
-  doc.load(() => {
-    const parser = new DOMParser();
-    const dom = parser.parseFromString(htmlString.trim(), 'text/html');
-    const root = dom.body.firstElementChild;
-
-    if (!root) {
-      throw new Error('Template must contain a root element');
-    }
-
-    buildDocFromElement(store, root, null, selectionInfo);
-  });
-
-  // Create host object
-  const host = createTestHost(store);
-
-  // Set selection if needed
-  if (selectionInfo.anchorBlockId && selectionInfo.focusBlockId) {
-    const anchorBlock = store.getBlock(selectionInfo.anchorBlockId);
-    const anchorTextLength = anchorBlock?.model?.text?.length ?? 0;
-    const focusOffset = selectionInfo.focusOffset ?? 0;
-    const anchorOffset = selectionInfo.anchorOffset ?? 0;
-
-    if (selectionInfo.anchorBlockId === selectionInfo.focusBlockId) {
-      const selection = host.selection.create(TextSelection, {
-        from: {
-          blockId: selectionInfo.anchorBlockId,
-          index: anchorOffset,
-          length: focusOffset,
-        },
-        to: null,
-      });
-      host.selection.setGroup('note', [selection]);
-    } else {
-      const selection = host.selection.create(TextSelection, {
-        from: {
-          blockId: selectionInfo.anchorBlockId,
-          index: anchorOffset,
-          length: anchorTextLength - anchorOffset,
-        },
-        to: {
-          blockId: selectionInfo.focusBlockId,
-          index: 0,
-          length: focusOffset,
-        },
-      });
-      host.selection.setGroup('note', [selection]);
-    }
-  } else if (selectionInfo.cursorBlockId) {
-    const selection = host.selection.create(TextSelection, {
-      from: {
-        blockId: selectionInfo.cursorBlockId,
-        index: selectionInfo.cursorOffset ?? 0,
-        length: 0,
-      },
-      to: null,
-    });
-    host.selection.setGroup('note', [selection]);
-  }
-
-  return host;
-}
-
-/**
- * Create a single block from template string
- *
- * Example:
- * ```
- * const block = block`<affine-note />`
- * ```
- */
-export function block(
-  strings: TemplateStringsArray,
-  ...values: any[]
-): Block | null {
-  // Merge template strings and values
-  let htmlString = '';
-  strings.forEach((str, i) => {
-    htmlString += str;
-    if (i < values.length) {
-      htmlString += values[i];
-    }
-  });
-
-  // Create a temporary doc to hold the block
-  const workspace = new TestWorkspace({});
-  workspace.meta.initialize();
-  const doc = workspace.createDoc('temp-doc');
-  const store = doc.getStore({ extensions });
-
-  let blockId: string | null = null;
-  const selectionInfo: SelectionInfo = {};
-
-  // Use DOMParser to parse HTML string
-  doc.load(() => {
-    const parser = new DOMParser();
-    const dom = parser.parseFromString(htmlString.trim(), 'text/html');
-    const root = dom.body.firstElementChild;
-
-    if (!root) {
-      throw new Error('Template must contain a root element');
-    }
-
-    // Create a root block if needed
-    const flavour = tagToFlavour[root.tagName.toLowerCase()];
-    if (
-      flavour === 'affine:paragraph' ||
-      flavour === 'affine:list' ||
-      flavour === 'affine:code'
-    ) {
-      const pageId = store.addBlock('affine:page', {});
-      const noteId = store.addBlock('affine:note', {}, pageId);
-      blockId = buildDocFromElement(store, root, noteId, selectionInfo);
-    } else {
-      blockId = buildDocFromElement(store, root, null, selectionInfo);
-    }
-  });
-
-  // Return the created block
-  return blockId ? (store.getBlock(blockId) ?? null) : null;
-}
-
-/**
- * Recursively build document structure
- * @param doc
- * @param element
- * @param parentId
- * @param selectionInfo
- * @returns
- */
-function buildDocFromElement(
-  doc: Store,
-  element: Element,
-  parentId: string | null,
-  selectionInfo: SelectionInfo
-): string {
-  const tagName = element.tagName.toLowerCase();
-
-  // Handle selection tags
-  if (tagName === 'anchor') {
-    if (!parentId) return '';
-    const parentBlock = doc.getBlock(parentId);
-    if (parentBlock) {
-      const textBeforeCursor = element.previousSibling?.textContent ?? '';
-      selectionInfo.anchorBlockId = parentId;
-      selectionInfo.anchorOffset = textBeforeCursor.length;
-    }
-    return parentId;
-  } else if (tagName === 'focus') {
-    if (!parentId) return '';
-    const parentBlock = doc.getBlock(parentId);
-    if (parentBlock) {
-      const textBeforeCursor = element.previousSibling?.textContent ?? '';
-      selectionInfo.focusBlockId = parentId;
-      selectionInfo.focusOffset = textBeforeCursor.length;
-    }
-    return parentId;
-  } else if (tagName === 'cursor') {
-    if (!parentId) return '';
-    const parentBlock = doc.getBlock(parentId);
-    if (parentBlock) {
-      const textBeforeCursor = element.previousSibling?.textContent ?? '';
-      selectionInfo.cursorBlockId = parentId;
-      selectionInfo.cursorOffset = textBeforeCursor.length;
-    }
-    return parentId;
-  }
-
-  const flavour = tagToFlavour[tagName];
-
-  if (!flavour) {
-    throw new Error(`Unknown tag name: ${tagName}`);
-  }
-
-  const props: Record<string, any> = {};
-
-  const customId = element.getAttribute('id');
-
-  // If ID is specified, add it to props
-  if (customId) {
-    props.id = customId;
-  }
-
-  // Process element attributes
-  Array.from(element.attributes).forEach(attr => {
-    if (attr.name !== 'id') {
-      // Skip id attribute, we already handled it
-      props[attr.name] = attr.value;
-    }
-  });
-
-  // Special handling for different block types based on their flavours
-  switch (flavour) {
-    case 'affine:paragraph':
-    case 'affine:list':
-      if (element.textContent) {
-        props.text = new Text(element.textContent);
-      }
-      break;
-  }
-
-  // Create block
-  const blockId = doc.addBlock(flavour, props, parentId);
-
-  // Process all child nodes, including text nodes
-  Array.from(element.children).forEach(child => {
-    if (child.nodeType === Node.ELEMENT_NODE) {
-      // Handle element nodes
-      buildDocFromElement(doc, child as Element, blockId, selectionInfo);
-    } else if (child.nodeType === Node.TEXT_NODE) {
-      // Handle text nodes
-      console.log('buildDocFromElement text node:', child.textContent);
-    }
-  });
-
-  return blockId;
-}
@@ -1,7 +1,7 @@
 import { TextSelection } from '@blocksuite/std';
 import { describe, expect, it } from 'vitest';

-import { affine } from './affine-template';
+import { affine } from '../../test-utils';

 describe('helpers/affine-template', () => {
  it('should create a basic document structure from template', () => {
@@ -21,7 +21,6 @@ export interface BlockSuiteFlags {
  enable_table_virtual_scroll: boolean;
  enable_turbo_renderer: boolean;
  enable_dom_renderer: boolean;
-  enable_web_container: boolean;
 }

 export class FeatureFlagService extends StoreExtension {
@@ -47,7 +46,6 @@ export class FeatureFlagService extends StoreExtension {
    enable_table_virtual_scroll: false,
    enable_turbo_renderer: false,
    enable_dom_renderer: false,
-    enable_web_container: false,
  });

  setFlag(key: keyof BlockSuiteFlags, value: boolean) {
@@ -7,7 +7,7 @@
 ### Basic Usage

 ```typescript
-import { affine } from '../__tests__/utils/affine-template';
+import { affine } from '@blocksuite/affine-shared/test-utils';

 // Create a simple document
 const doc = affine`
@@ -0,0 +1,316 @@
+import {
+  CodeBlockSchemaExtension,
+  DatabaseBlockSchemaExtension,
+  ImageBlockSchemaExtension,
+  ListBlockSchemaExtension,
+  NoteBlockSchemaExtension,
+  ParagraphBlockSchemaExtension,
+  RootBlockSchemaExtension,
+} from '@blocksuite/affine-model';
+import { Container } from '@blocksuite/global/di';
+import { TextSelection } from '@blocksuite/std';
+import {
+  type Block,
+  type ExtensionType,
+  type Store,
+  Text,
+} from '@blocksuite/store';
+import { TestWorkspace } from '@blocksuite/store/test';
+
+import { createTestHost } from './create-test-host';
+
+const DEFAULT_EXTENSIONS = [
+  RootBlockSchemaExtension,
+  NoteBlockSchemaExtension,
+  ParagraphBlockSchemaExtension,
+  ListBlockSchemaExtension,
+  ImageBlockSchemaExtension,
+  DatabaseBlockSchemaExtension,
+  CodeBlockSchemaExtension,
+];
+
+// Mapping from tag names to flavours
+const tagToFlavour: Record<string, string> = {
+  'affine-page': 'affine:page',
+  'affine-note': 'affine:note',
+  'affine-paragraph': 'affine:paragraph',
+  'affine-list': 'affine:list',
+  'affine-image': 'affine:image',
+  'affine-database': 'affine:database',
+  'affine-code': 'affine:code',
+};
+
+interface SelectionInfo {
+  anchorBlockId?: string;
+  anchorOffset?: number;
+  focusBlockId?: string;
+  focusOffset?: number;
+  cursorBlockId?: string;
+  cursorOffset?: number;
+}
+
+export function createAffineTemplate(
+  extensions: ExtensionType[] = DEFAULT_EXTENSIONS
+) {
+  /**
+   * Parse template strings and build BlockSuite document structure,
+   * then create a host object with the document
+   *
+   * Example:
+   * ```
+   * const host = affine`
+   *   <affine-page id="page">
+   *     <affine-note id="note">
+   *       <affine-paragraph id="paragraph-1">Hello, world<anchor /></affine-paragraph>
+   *       <affine-paragraph id="paragraph-2">Hello, world<focus /></affine-paragraph>
+   *     </affine-note>
+   *   </affine-page>
+   * `;
+   * ```
+   */
+  function affine(strings: TemplateStringsArray, ...values: any[]) {
+    // Merge template strings and values
+    let htmlString = '';
+    strings.forEach((str, i) => {
+      htmlString += str;
+      if (i < values.length) {
+        htmlString += values[i];
+      }
+    });
+
+    // Create a new doc
+    const workspace = new TestWorkspace({});
+    workspace.meta.initialize();
+    const doc = workspace.createDoc('test-doc');
+    const container = new Container();
+    extensions.forEach(extension => {
+      extension.setup(container);
+    });
+    const store = doc.getStore({ extensions, provider: container.provider() });
+    let selectionInfo: SelectionInfo = {};
+
+    // Use DOMParser to parse HTML string
+    doc.load(() => {
+      const parser = new DOMParser();
+      const dom = parser.parseFromString(htmlString.trim(), 'text/html');
+      const root = dom.body.firstElementChild;
+
+      if (!root) {
+        throw new Error('Template must contain a root element');
+      }
+
+      buildDocFromElement(store, root, null, selectionInfo);
+    });
+
+    // Create host object
+    const host = createTestHost(store);
+
+    // Set selection if needed
+    if (selectionInfo.anchorBlockId && selectionInfo.focusBlockId) {
+      const anchorBlock = store.getBlock(selectionInfo.anchorBlockId);
+      const anchorTextLength = anchorBlock?.model?.text?.length ?? 0;
+      const focusOffset = selectionInfo.focusOffset ?? 0;
+      const anchorOffset = selectionInfo.anchorOffset ?? 0;
+
+      if (selectionInfo.anchorBlockId === selectionInfo.focusBlockId) {
+        const selection = host.selection.create(TextSelection, {
+          from: {
+            blockId: selectionInfo.anchorBlockId,
+            index: anchorOffset,
+            length: focusOffset,
+          },
+          to: null,
+        });
+        host.selection.setGroup('note', [selection]);
+      } else {
+        const selection = host.selection.create(TextSelection, {
+          from: {
+            blockId: selectionInfo.anchorBlockId,
+            index: anchorOffset,
+            length: anchorTextLength - anchorOffset,
+          },
+          to: {
+            blockId: selectionInfo.focusBlockId,
+            index: 0,
+            length: focusOffset,
+          },
+        });
+        host.selection.setGroup('note', [selection]);
+      }
+    } else if (selectionInfo.cursorBlockId) {
+      const selection = host.selection.create(TextSelection, {
+        from: {
+          blockId: selectionInfo.cursorBlockId,
+          index: selectionInfo.cursorOffset ?? 0,
+          length: 0,
+        },
+        to: null,
+      });
+      host.selection.setGroup('note', [selection]);
+    }
+
+    return host;
+  }
+
+  /**
+   * Create a single block from template string
+   *
+   * Example:
+   * ```
+   * const block = block`<affine-note />`
+   * ```
+   */
+  function block(
+    strings: TemplateStringsArray,
+    ...values: any[]
+  ): Block | null {
+    // Merge template strings and values
+    let htmlString = '';
+    strings.forEach((str, i) => {
+      htmlString += str;
+      if (i < values.length) {
+        htmlString += values[i];
+      }
+    });
+
+    // Create a temporary doc to hold the block
+    const workspace = new TestWorkspace({});
+    workspace.meta.initialize();
+    const doc = workspace.createDoc('temp-doc');
+    const store = doc.getStore({ extensions });
+
+    let blockId: string | null = null;
+    const selectionInfo: SelectionInfo = {};
+
+    // Use DOMParser to parse HTML string
+    doc.load(() => {
+      const parser = new DOMParser();
+      const dom = parser.parseFromString(htmlString.trim(), 'text/html');
+      const root = dom.body.firstElementChild;
+
+      if (!root) {
+        throw new Error('Template must contain a root element');
+      }
+
+      // Create a root block if needed
+      const flavour = tagToFlavour[root.tagName.toLowerCase()];
+      if (
+        flavour === 'affine:paragraph' ||
+        flavour === 'affine:list' ||
+        flavour === 'affine:code'
+      ) {
+        const pageId = store.addBlock('affine:page', {});
+        const noteId = store.addBlock('affine:note', {}, pageId);
+        blockId = buildDocFromElement(store, root, noteId, selectionInfo);
+      } else {
+        blockId = buildDocFromElement(store, root, null, selectionInfo);
+      }
+    });
+
+    // Return the created block
+    return blockId ? (store.getBlock(blockId) ?? null) : null;
+  }
+
+  return {
+    affine,
+    block,
+  };
+}
+
+export const { affine, block } = createAffineTemplate();
+
+/**
+ * Recursively build document structure
+ * @param doc
+ * @param element
+ * @param parentId
+ * @param selectionInfo
+ * @returns
+ */
+function buildDocFromElement(
+  doc: Store,
+  element: Element,
+  parentId: string | null,
+  selectionInfo: SelectionInfo
+): string {
+  const tagName = element.tagName.toLowerCase();
+
+  // Handle selection tags
+  if (tagName === 'anchor') {
+    if (!parentId) return '';
+    const parentBlock = doc.getBlock(parentId);
+    if (parentBlock) {
+      const textBeforeCursor = element.previousSibling?.textContent ?? '';
+      selectionInfo.anchorBlockId = parentId;
+      selectionInfo.anchorOffset = textBeforeCursor.length;
+    }
+    return parentId;
+  } else if (tagName === 'focus') {
+    if (!parentId) return '';
+    const parentBlock = doc.getBlock(parentId);
+    if (parentBlock) {
+      const textBeforeCursor = element.previousSibling?.textContent ?? '';
+      selectionInfo.focusBlockId = parentId;
+      selectionInfo.focusOffset = textBeforeCursor.length;
+    }
+    return parentId;
+  } else if (tagName === 'cursor') {
+    if (!parentId) return '';
+    const parentBlock = doc.getBlock(parentId);
+    if (parentBlock) {
+      const textBeforeCursor = element.previousSibling?.textContent ?? '';
+      selectionInfo.cursorBlockId = parentId;
+      selectionInfo.cursorOffset = textBeforeCursor.length;
+    }
+    return parentId;
+  }
+
+  const flavour = tagToFlavour[tagName];
+
+  if (!flavour) {
+    throw new Error(`Unknown tag name: ${tagName}`);
+  }
+
+  const props: Record<string, any> = {};
+
+  const customId = element.getAttribute('id');
+
+  // If ID is specified, add it to props
+  if (customId) {
+    props.id = customId;
+  }
+
+  // Process element attributes
+  Array.from(element.attributes).forEach(attr => {
+    if (attr.name !== 'id') {
+      // Skip id attribute, we already handled it
+      props[attr.name] = attr.value;
+    }
+  });
+
+  // Special handling for different block types based on their flavours
+  switch (flavour) {
+    case 'affine:paragraph':
+    case 'affine:list':
+      if (element.textContent) {
+        props.text = new Text(element.textContent);
+      }
+      break;
+  }
+
+  // Create block
+  const blockId = doc.addBlock(flavour, props, parentId);
+
+  // Process all child nodes, including text nodes
+  Array.from(element.children).forEach(child => {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      // Handle element nodes
+      buildDocFromElement(doc, child as Element, blockId, selectionInfo);
+    } else if (child.nodeType === Node.TEXT_NODE) {
+      // Handle text nodes
+      console.log('buildDocFromElement text node:', child.textContent);
+    }
+  });
+
+  return blockId;
+}
@@ -63,10 +63,8 @@ function compareBlocks(
  if (JSON.stringify(actualProps) !== JSON.stringify(expectedProps))
    return false;

-  // eslint-disable-next-line @typescript-eslint/prefer-for-of
-  for (let i = 0; i < actual.children.length; i++) {
-    if (!compareBlocks(actual.children[i], expected.children[i], compareId))
-      return false;
+  for (const [i, child] of actual.children.entries()) {
+    if (!compareBlocks(child, expected.children[i], compareId)) return false;
  }

  return true;
@@ -240,7 +240,7 @@ export function createTestHost(doc: Store): EditorHost {
  std.selection = new MockSelectionStore();

  std.command = new CommandManager(std as any);
-  // @ts-expect-error
+  // @ts-expect-error dev-only
  host.command = std.command;
  host.selection = std.selection;

@@ -0,0 +1,3 @@
+export * from './affine-template';
+export * from './affine-test-utils';
+export * from './create-test-host';
@@ -27,7 +27,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",
@@ -20,7 +20,7 @@
    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "lit": "^3.2.0",
    "rxjs": "^7.8.1"
  },
@@ -21,7 +21,7 @@
    "@blocksuite/std": "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",
    "rxjs": "^7.8.1",
    "yjs": "^13.6.21"
@@ -25,7 +25,7 @@
    "@blocksuite/std": "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",
    "rxjs": "^7.8.1",
    "yjs": "^13.6.21"
@@ -22,7 +22,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",
@@ -20,7 +20,7 @@
    "@blocksuite/std": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
    "@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",
@@ -20,7 +20,7 @@
    "@blocksuite/std": "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",
    "rxjs": "^7.8.1"
  },
@@ -37,7 +37,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",
    "fflate": "^0.8.2",
    "lit": "^3.2.0",
@@ -23,7 +23,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",
    "fflate": "^0.8.2",
    "lit": "^3.2.0",
@@ -22,7 +22,7 @@
    "@blocksuite/std": "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",
    "rxjs": "^7.8.1",
    "yjs": "^13.6.21"
@@ -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",
    "fflate": "^0.8.2",
    "lit": "^3.2.0",
@@ -19,7 +19,7 @@
    "@blocksuite/icons": "^2.2.12",
    "@blocksuite/std": "workspace:*",
    "@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",
@@ -16,7 +16,7 @@
    "@blocksuite/global": "workspace:*",
    "@blocksuite/std": "workspace:*",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "lit": "^3.2.0",
    "rxjs": "^7.8.1"
  },
@@ -20,7 +20,7 @@
    "@blocksuite/store": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
    "@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",
@@ -22,7 +22,7 @@
    "@blocksuite/std": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
    "@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",
@@ -19,7 +19,7 @@
    "@blocksuite/std": "workspace:*",
    "@floating-ui/dom": "^1.6.13",
    "@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",
@@ -28,6 +28,21 @@ import { ShadowlessElement } from './shadowless-element.js';
 export const storeContext = createContext<Store>('store');
 export const stdContext = createContext<BlockStdScope>('std');

+function isMatchFlavour(widgetFlavour: string, block: BlockModel) {
+  if (widgetFlavour.endsWith('/*')) {
+    const path = widgetFlavour.slice(0, -2).split('/');
+    let current: BlockModel | null = block.parent;
+    for (let i = path.length - 1; i >= 0; i--) {
+      if (!current || current.flavour !== path[i]) {
+        return false;
+      }
+      current = current.parent;
+    }
+    return true;
+  }
+  return block.flavour === widgetFlavour;
+}
+
@requiredProperties({
  store: PropTypes.instanceOf(Store),
  std: PropTypes.object,
@@ -61,7 +76,7 @@ export class EditorHost extends SignalWatcher(
    const widgets = Array.from(widgetViews.entries()).reduce(
      (mapping, [key, tag]) => {
        const [widgetFlavour, id] = key.split('|');
-        if (widgetFlavour === flavour) {
+        if (isMatchFlavour(widgetFlavour, model)) {
          const template = html`<${tag} ${unsafeStatic(WIDGET_ID_ATTR)}=${id}></${tag}>`;
          mapping[id] = template;
        }
@@ -19,7 +19,7 @@
    "@lit/context": "^1.1.3",
    "@lottiefiles/dotlottie-wc": "^0.5.0",
    "@preact/signals-core": "^1.8.0",
-    "@toeverything/theme": "^1.1.15",
+    "@toeverything/theme": "^1.1.16",
    "@vanilla-extract/css": "^1.17.0",
    "lit": "^3.2.0",
    "rxjs": "^7.8.1",
@@ -0,0 +1,67 @@
+-- CreateTable
+CREATE TABLE "comments" (
+    "sid" INT GENERATED BY DEFAULT AS IDENTITY,
+    "id" VARCHAR NOT NULL,
+    "workspace_id" VARCHAR NOT NULL,
+    "doc_id" VARCHAR NOT NULL,
+    "user_id" VARCHAR NOT NULL,
+    "content" JSONB NOT NULL,
+    "created_at" TIMESTAMPTZ(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMPTZ(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "deleted_at" TIMESTAMPTZ(3),
+    "resolved" BOOLEAN NOT NULL DEFAULT false,
+
+    CONSTRAINT "comments_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "replies" (
+    "sid" INT GENERATED BY DEFAULT AS IDENTITY,
+    "id" VARCHAR NOT NULL,
+    "user_id" VARCHAR NOT NULL,
+    "comment_id" VARCHAR NOT NULL,
+    "workspace_id" VARCHAR NOT NULL,
+    "doc_id" VARCHAR NOT NULL,
+    "content" JSONB NOT NULL,
+    "created_at" TIMESTAMPTZ(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMPTZ(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "deleted_at" TIMESTAMPTZ(3),
+
+    CONSTRAINT "replies_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "comments_sid_key" ON "comments"("sid");
+
+-- CreateIndex
+CREATE INDEX "comments_workspace_id_doc_id_sid_idx" ON "comments"("workspace_id", "doc_id", "sid");
+
+-- CreateIndex
+CREATE INDEX "comments_workspace_id_doc_id_updated_at_idx" ON "comments"("workspace_id", "doc_id", "updated_at");
+
+-- CreateIndex
+CREATE INDEX "comments_user_id_idx" ON "comments"("user_id");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "replies_sid_key" ON "replies"("sid");
+
+-- CreateIndex
+CREATE INDEX "replies_comment_id_sid_idx" ON "replies"("comment_id", "sid");
+
+-- CreateIndex
+CREATE INDEX "replies_workspace_id_doc_id_updated_at_idx" ON "replies"("workspace_id", "doc_id", "updated_at");
+
+-- CreateIndex
+CREATE INDEX "replies_user_id_idx" ON "replies"("user_id");
+
+-- AddForeignKey
+ALTER TABLE "comments" ADD CONSTRAINT "comments_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "comments" ADD CONSTRAINT "comments_workspace_id_fkey" FOREIGN KEY ("workspace_id") REFERENCES "workspaces"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "replies" ADD CONSTRAINT "replies_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "replies" ADD CONSTRAINT "replies_comment_id_fkey" FOREIGN KEY ("comment_id") REFERENCES "comments"("id") ON DELETE CASCADE ON UPDATE CASCADE;
@@ -0,0 +1,23 @@
+-- CreateTable
+CREATE TABLE "comment_attachments" (
+    "sid" INT GENERATED BY DEFAULT AS IDENTITY,
+    "workspace_id" VARCHAR NOT NULL,
+    "doc_id" VARCHAR NOT NULL,
+    "key" VARCHAR NOT NULL,
+    "size" INTEGER NOT NULL,
+    "mime" VARCHAR NOT NULL,
+    "name" VARCHAR NOT NULL,
+    "created_at" TIMESTAMPTZ(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "created_by" VARCHAR,
+
+    CONSTRAINT "comment_attachments_pkey" PRIMARY KEY ("workspace_id","doc_id","key")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "comment_attachments_sid_key" ON "comment_attachments"("sid");
+
+-- AddForeignKey
+ALTER TABLE "comment_attachments" ADD CONSTRAINT "comment_attachments_workspace_id_fkey" FOREIGN KEY ("workspace_id") REFERENCES "workspaces"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "comment_attachments" ADD CONSTRAINT "comment_attachments_created_by_fkey" FOREIGN KEY ("created_by") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "ai_sessions_metadata" ADD COLUMN     "title" VARCHAR;
@@ -32,6 +32,7 @@
    "@ai-sdk/google": "^1.2.18",
    "@ai-sdk/google-vertex": "^2.2.23",
    "@ai-sdk/openai": "^1.3.22",
+    "@ai-sdk/openai-compatible": "^0.2.14",
    "@ai-sdk/perplexity": "^1.1.9",
    "@apollo/server": "^4.11.3",
    "@aws-sdk/client-s3": "^3.779.0",
@@ -46,6 +46,9 @@ model User {
  // receive notifications
  notifications                Notification[]                 @relation("user_notifications")
  settings                     UserSettings?
+  comments                     Comment[]
+  replies                      Reply[]
+  commentAttachments           CommentAttachment[]            @relation("createdCommentAttachments")

  @@index([email])
  @@map("users")
@@ -119,13 +122,15 @@ model Workspace {
  avatarKey          String?  @map("avatar_key") @db.VarChar
  indexed            Boolean  @default(false)

-  features       WorkspaceFeature[]
-  docs           WorkspaceDoc[]
-  permissions    WorkspaceUserRole[]
-  docPermissions WorkspaceDocUserRole[]
-  blobs          Blob[]
-  ignoredDocs    AiWorkspaceIgnoredDocs[]
-  embedFiles     AiWorkspaceFiles[]
+  features           WorkspaceFeature[]
+  docs               WorkspaceDoc[]
+  permissions        WorkspaceUserRole[]
+  docPermissions     WorkspaceDocUserRole[]
+  blobs              Blob[]
+  ignoredDocs        AiWorkspaceIgnoredDocs[]
+  embedFiles         AiWorkspaceFiles[]
+  comments           Comment[]
+  commentAttachments CommentAttachment[]

  @@map("workspaces")
 }
@@ -438,6 +443,7 @@ model AiSession {
  promptName      String    @map("prompt_name") @db.VarChar(32)
  promptAction    String?   @default("") @map("prompt_action") @db.VarChar(32)
  pinned          Boolean   @default(false)
+  title           String?   @db.VarChar
  // the session id of the parent session if this session is a forked session
  parentSessionId String?   @map("parent_session_id") @db.VarChar
  messageCost     Int       @default(0)
@@ -856,3 +862,70 @@ model UserSettings {

  @@map("user_settings")
 }
+
+model Comment {
+  // NOTE: manually set this column type to identity in migration file
+  sid         Int       @unique @default(autoincrement()) @db.Integer
+  id          String    @id @default(uuid()) @db.VarChar
+  workspaceId String    @map("workspace_id") @db.VarChar
+  docId       String    @map("doc_id") @db.VarChar
+  userId      String    @map("user_id") @db.VarChar
+  content     Json      @db.JsonB
+  createdAt   DateTime  @default(now()) @map("created_at") @db.Timestamptz(3)
+  updatedAt   DateTime  @default(now()) @updatedAt @map("updated_at") @db.Timestamptz(3)
+  deletedAt   DateTime? @map("deleted_at") @db.Timestamptz(3)
+  // whether the comment is resolved
+  resolved    Boolean   @default(false) @map("resolved")
+
+  user      User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+  workspace Workspace @relation(fields: [workspaceId], references: [id], onDelete: Cascade)
+  replies   Reply[]
+
+  @@index([workspaceId, docId, sid])
+  @@index([workspaceId, docId, updatedAt])
+  @@index([userId])
+  @@map("comments")
+}
+
+model Reply {
+  // NOTE: manually set this column type to identity in migration file
+  sid         Int       @unique @default(autoincrement()) @db.Integer
+  id          String    @id @default(uuid()) @db.VarChar
+  userId      String    @map("user_id") @db.VarChar
+  commentId   String    @map("comment_id") @db.VarChar
+  // query new replies by workspaceId and docId
+  workspaceId String    @map("workspace_id") @db.VarChar
+  docId       String    @map("doc_id") @db.VarChar
+  content     Json      @db.JsonB
+  createdAt   DateTime  @default(now()) @map("created_at") @db.Timestamptz(3)
+  updatedAt   DateTime  @default(now()) @updatedAt @map("updated_at") @db.Timestamptz(3)
+  deletedAt   DateTime? @map("deleted_at") @db.Timestamptz(3)
+
+  user    User    @relation(fields: [userId], references: [id], onDelete: Cascade)
+  comment Comment @relation(fields: [commentId], references: [id], onDelete: Cascade)
+
+  @@index([commentId, sid])
+  @@index([workspaceId, docId, updatedAt])
+  @@index([userId])
+  @@map("replies")
+}
+
+model CommentAttachment {
+  // NOTE: manually set this column type to identity in migration file
+  sid         Int      @unique @default(autoincrement())
+  workspaceId String   @map("workspace_id") @db.VarChar
+  docId       String   @map("doc_id") @db.VarChar
+  key         String   @db.VarChar
+  size        Int      @db.Integer
+  mime        String   @db.VarChar
+  name        String   @db.VarChar
+  createdAt   DateTime @default(now()) @map("created_at") @db.Timestamptz(3)
+  createdBy   String?  @map("created_by") @db.VarChar
+
+  workspace     Workspace @relation(fields: [workspaceId], references: [id], onDelete: Cascade)
+  // will delete creator record if creator's account is deleted
+  createdByUser User?     @relation(name: "createdCommentAttachments", fields: [createdBy], references: [id], onDelete: SetNull)
+
+  @@id([workspaceId, docId, key])
+  @@map("comment_attachments")
+}
@@ -330,3 +330,45 @@ Generated by [AVA](https://avajs.dev).
      ],
      {},
    ]
+
+## should handle generateSessionTitle correctly under various conditions
+
+> should generate title when conditions are met
+
+    {
+      chatWithPromptCalled: undefined,
+      exists: true,
+      title: 'What is Machine Learning?',
+    }
+
+> should not generate title when session already has title
+
+    {
+      chatWithPromptCalled: false,
+      exists: true,
+      title: 'Existing Title',
+    }
+
+> should not generate title when no user messages exist
+
+    {
+      chatWithPromptCalled: false,
+      exists: true,
+      title: null,
+    }
+
+> should not generate title when no assistant messages exist
+
+    {
+      chatWithPromptCalled: false,
+      exists: true,
+      title: null,
+    }
+
+> should use correct prompt for title generation
+
+    {
+      content: `[user]: Explain quantum computing briefly␊
+      [assistant]: Quantum computing uses quantum mechanics principles.`,
+      promptName: 'Summary as title',
+    }
@@ -11,7 +11,11 @@ import { EventBus, JobQueue } from '../base';
 import { ConfigModule } from '../base/config';
 import { AuthService } from '../core/auth';
 import { QuotaModule } from '../core/quota';
-import { ContextCategories, WorkspaceModel } from '../models';
+import {
+  ContextCategories,
+  CopilotSessionModel,
+  WorkspaceModel,
+} from '../models';
 import { CopilotModule } from '../plugins/copilot';
 import { CopilotContextService } from '../plugins/copilot/context';
 import {
@@ -57,12 +61,13 @@ import { MockCopilotProvider } from './mocks';
 import { createTestingModule, TestingModule } from './utils';
 import { WorkflowTestCases } from './utils/copilot';

-const test = ava as TestFn<{
+type Context = {
  auth: AuthService;
  module: TestingModule;
  db: PrismaClient;
  event: EventBus;
  workspace: WorkspaceModel;
+  copilotSession: CopilotSessionModel;
  context: CopilotContextService;
  prompt: PromptService;
  transcript: CopilotTranscriptionService;
@@ -78,7 +83,8 @@ const test = ava as TestFn<{
    html: CopilotCheckHtmlExecutor;
    json: CopilotCheckJsonExecutor;
  };
-}>;
+};
+const test = ava as TestFn<Context>;
 let userId: string;

 test.before(async t => {
@@ -119,6 +125,7 @@ test.before(async t => {
  const db = module.get(PrismaClient);
  const event = module.get(EventBus);
  const workspace = module.get(WorkspaceModel);
+  const copilotSession = module.get(CopilotSessionModel);
  const prompt = module.get(PromptService);
  const factory = module.get(CopilotProviderFactory);

@@ -136,6 +143,7 @@ test.before(async t => {
  t.context.db = db;
  t.context.event = event;
  t.context.workspace = workspace;
+  t.context.copilotSession = copilotSession;
  t.context.prompt = prompt;
  t.context.factory = factory;
  t.context.session = session;
@@ -1752,3 +1760,168 @@ test('should be able to manage workspace embedding', async t => {
    t.is(ret2.length, 0, 'should not match workspace context');
  }
 });
+
+test('should handle generateSessionTitle correctly under various conditions', async t => {
+  const { prompt, session, workspace, copilotSession } = t.context;
+
+  await prompt.set('test', 'model', [{ role: 'user', content: '{{content}}' }]);
+  const createSession = async (
+    options: {
+      userMessage?: string;
+      assistantMessage?: string;
+      existingTitle?: string;
+    } = {}
+  ) => {
+    const ws = await workspace.create(userId);
+    const sessionId = await session.create({
+      docId: 'test-doc',
+      workspaceId: ws.id,
+      userId,
+      promptName: 'test',
+      pinned: false,
+    });
+
+    if (options.existingTitle) {
+      await copilotSession.update({
+        userId,
+        sessionId,
+        title: options.existingTitle,
+      });
+    }
+
+    const chatSession = await session.get(sessionId);
+    if (chatSession) {
+      if (options.userMessage) {
+        chatSession.push({
+          role: 'user',
+          content: options.userMessage,
+          createdAt: new Date(),
+        });
+      }
+      if (options.assistantMessage) {
+        chatSession.push({
+          role: 'assistant',
+          content: options.assistantMessage,
+          createdAt: new Date(),
+        });
+      }
+      await chatSession.save();
+    }
+
+    return sessionId;
+  };
+
+  const testCases = [
+    {
+      name: 'should generate title when conditions are met',
+      setup: () =>
+        createSession({
+          userMessage: 'What is machine learning?',
+          assistantMessage:
+            'Machine learning is a subset of artificial intelligence.',
+        }),
+      mockFn: () => 'What is Machine Learning?',
+      expectSnapshot: true,
+    },
+    {
+      name: 'should not generate title when session already has title',
+      setup: () =>
+        createSession({
+          userMessage: 'Test message',
+          assistantMessage: 'Test response',
+          existingTitle: 'Existing Title',
+        }),
+      mockFn: () => 'New Title',
+      expectSnapshot: true,
+      expectNotCalled: true,
+    },
+    {
+      name: 'should not generate title when no user messages exist',
+      setup: () =>
+        createSession({ assistantMessage: 'Hello! How can I help you?' }),
+      mockFn: () => 'New Title',
+      expectSnapshot: true,
+      expectNotCalled: true,
+    },
+    {
+      name: 'should not generate title when no assistant messages exist',
+      setup: () => createSession({ userMessage: 'What is AI?' }),
+      mockFn: () => 'New Title',
+      expectSnapshot: true,
+      expectNotCalled: true,
+    },
+    {
+      name: 'should handle errors gracefully',
+      setup: () =>
+        createSession({
+          userMessage: 'Test question',
+          assistantMessage: 'Test answer',
+        }),
+      mockFn: () => {
+        throw new Error('Mock error for testing');
+      },
+      expectError: 'Mock error for testing',
+    },
+  ];
+
+  for (const testCase of testCases) {
+    const sessionId = await testCase.setup();
+    let chatWithPromptCalled = false;
+
+    const mockStub = Sinon.stub(session, 'chatWithPrompt').callsFake(
+      async () => {
+        chatWithPromptCalled = true;
+        return testCase.mockFn();
+      }
+    );
+
+    if (testCase.expectError) {
+      await t.throwsAsync(
+        () => session.generateSessionTitle({ sessionId }),
+        { message: testCase.expectError },
+        testCase.name
+      );
+    } else {
+      await session.generateSessionTitle({ sessionId });
+
+      if (testCase.expectSnapshot) {
+        const sessionState = await session.getSession(sessionId);
+        t.snapshot(
+          {
+            chatWithPromptCalled: testCase.expectNotCalled
+              ? chatWithPromptCalled
+              : undefined,
+            title: sessionState?.title,
+            exists: !!sessionState,
+          },
+          testCase.name
+        );
+      }
+    }
+
+    mockStub.restore();
+  }
+
+  {
+    const sessionId = await createSession({
+      userMessage: 'Explain quantum computing briefly',
+      assistantMessage: 'Quantum computing uses quantum mechanics principles.',
+    });
+
+    let capturedArgs: any[] = [];
+    Sinon.stub(session, 'chatWithPrompt').callsFake(async (...args) => {
+      capturedArgs = args;
+      return 'Quantum Computing Explained';
+    });
+
+    await session.generateSessionTitle({ sessionId });
+
+    t.snapshot(
+      {
+        promptName: capturedArgs[0],
+        content: capturedArgs[1]?.content,
+      },
+      'should use correct prompt for title generation'
+    );
+  }
+});
--- a/Show More
+++ b/Show More