diff --git a/blocksuite/affine/blocks/image/src/configs/toolbar.ts b/blocksuite/affine/blocks/image/src/configs/toolbar.ts
index 67b64152ae..f75ebdcfd1 100644
--- a/blocksuite/affine/blocks/image/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/image/src/configs/toolbar.ts
@@ -1,6 +1,7 @@
 import { ImageBlockModel } from '@blocksuite/affine-model';
 import {
   ActionPlacement,
+  blockCommentToolbarButton,
   type ToolbarModuleConfig,
   ToolbarModuleExtension,
 } from '@blocksuite/affine-shared/services';
@@ -49,6 +50,10 @@ const builtinToolbarConfig = {
         });
       },
     },
+    {
+      id: 'c.comment',
+      ...blockCommentToolbarButton,
+    },
     {
       placement: ActionPlacement.More,
       id: 'a.clipboard',
diff --git a/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts b/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts
index a2fa08c075..78cef44b10 100644
--- a/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts
+++ b/blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts
@@ -634,9 +634,9 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
 
     const movedElements = new Set([
       ...selectedElements,
-      ...selectedElements
-        .map(el => (isGfxGroupCompatibleModel(el) ? el.descendantElements : []))
-        .flat(),
+      ...selectedElements.flatMap(el =>
+        isGfxGroupCompatibleModel(el) ? el.descendantElements : []
+      ),
     ]);
 
     movedElements.forEach(element => {
diff --git a/blocksuite/affine/blocks/surface-ref/src/configs/toolbar.ts b/blocksuite/affine/blocks/surface-ref/src/configs/toolbar.ts
index 6eb081cffd..1cd84bae5a 100644
--- a/blocksuite/affine/blocks/surface-ref/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/surface-ref/src/configs/toolbar.ts
@@ -5,6 +5,7 @@ import {
 } from '@blocksuite/affine-shared/commands';
 import {
   ActionPlacement,
+  blockCommentToolbarButton,
   type ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
 import { CaptionIcon, CopyIcon, DeleteIcon } from '@blocksuite/icons/lit';
@@ -61,6 +62,10 @@ export const surfaceRefToolbarModuleConfig: ToolbarModuleConfig = {
         surfaceRefBlock.captionElement.show();
       },
     },
+    {
+      id: 'e.comment',
+      ...blockCommentToolbarButton,
+    },
     {
       id: 'a.clipboard',
       placement: ActionPlacement.More,
diff --git a/blocksuite/affine/fragments/outline/src/utils/query.ts b/blocksuite/affine/fragments/outline/src/utils/query.ts
index c5230d45ce..51b59da41c 100644
--- a/blocksuite/affine/fragments/outline/src/utils/query.ts
+++ b/blocksuite/affine/fragments/outline/src/utils/query.ts
@@ -68,5 +68,5 @@ export function getHeadingBlocksFromDoc(
   ignoreEmpty = false
 ) {
   const notes = getNotesFromStore(store, modes);
-  return notes.map(note => getHeadingBlocksFromNote(note, ignoreEmpty)).flat();
+  return notes.flatMap(note => getHeadingBlocksFromNote(note, ignoreEmpty));
 }
diff --git a/blocksuite/affine/inlines/comment/src/inline-comment-manager.ts b/blocksuite/affine/inlines/comment/src/inline-comment-manager.ts
index f3ed63d5ed..7c75dc48dc 100644
--- a/blocksuite/affine/inlines/comment/src/inline-comment-manager.ts
+++ b/blocksuite/affine/inlines/comment/src/inline-comment-manager.ts
@@ -103,54 +103,52 @@ export class InlineCommentManager extends LifeCycleWatcher {
     id: CommentId,
     selections: BaseSelection[]
   ) => {
-    const needCommentTexts = selections
-      .map(selection => {
-        if (!selection.is(TextSelection)) return [];
-        const [_, { selectedBlocks }] = this.std.command
-          .chain()
-          .pipe(getSelectedBlocksCommand, {
-            textSelection: selection,
-          })
-          .run();
+    const needCommentTexts = selections.flatMap(selection => {
+      if (!selection.is(TextSelection)) return [];
+      const [_, { selectedBlocks }] = this.std.command
+        .chain()
+        .pipe(getSelectedBlocksCommand, {
+          textSelection: selection,
+        })
+        .run();
 
-        if (!selectedBlocks) return [];
+      if (!selectedBlocks) return [];
 
-        type MakeRequired<T, K extends keyof T> = T & {
-          [key in K]: NonNullable<T[key]>;
-        };
+      type MakeRequired<T, K extends keyof T> = T & {
+        [key in K]: NonNullable<T[key]>;
+      };
 
-        return selectedBlocks
-          .map(
-            ({ model }) =>
-              [model, getInlineEditorByModel(this.std, model)] as const
-          )
-          .filter(
-            (
-              pair
-            ): pair is [MakeRequired<BlockModel, 'text'>, AffineInlineEditor] =>
-              !!pair[0].text && !!pair[1]
-          )
-          .map(([model, inlineEditor]) => {
-            let from: TextRangePoint;
-            let to: TextRangePoint | null;
-            if (model.id === selection.from.blockId) {
-              from = selection.from;
-              to = null;
-            } else if (model.id === selection.to?.blockId) {
-              from = selection.to;
-              to = null;
-            } else {
-              from = {
-                blockId: model.id,
-                index: 0,
-                length: model.text.yText.length,
-              };
-              to = null;
-            }
-            return [new TextSelection({ from, to }), inlineEditor] as const;
-          });
-      })
-      .flat();
+      return selectedBlocks
+        .map(
+          ({ model }) =>
+            [model, getInlineEditorByModel(this.std, model)] as const
+        )
+        .filter(
+          (
+            pair
+          ): pair is [MakeRequired<BlockModel, 'text'>, AffineInlineEditor] =>
+            !!pair[0].text && !!pair[1]
+        )
+        .map(([model, inlineEditor]) => {
+          let from: TextRangePoint;
+          let to: TextRangePoint | null;
+          if (model.id === selection.from.blockId) {
+            from = selection.from;
+            to = null;
+          } else if (model.id === selection.to?.blockId) {
+            from = selection.to;
+            to = null;
+          } else {
+            from = {
+              blockId: model.id,
+              index: 0,
+              length: model.text.yText.length,
+            };
+            to = null;
+          }
+          return [new TextSelection({ from, to }), inlineEditor] as const;
+        });
+    });
 
     if (needCommentTexts.length === 0) return;
 
diff --git a/blocksuite/affine/shared/src/services/comment-service/utils.ts b/blocksuite/affine/shared/src/services/comment-service/utils.ts
index 9ee16b2bd9..90ec149053 100644
--- a/blocksuite/affine/shared/src/services/comment-service/utils.ts
+++ b/blocksuite/affine/shared/src/services/comment-service/utils.ts
@@ -64,7 +64,7 @@ export const blockCommentToolbarButton: Omit<ToolbarAction, 'id'> = {
 
     // may be hover on a block or element, in this case
     // the selection is empty, so we need to get the current model
-    if (model && selections.length === 0) {
+    if (model) {
       if (model instanceof BlockModel) {
         commentProvider.addComment([
           new BlockSelection({
diff --git a/blocksuite/affine/shared/src/utils/edgeless.ts b/blocksuite/affine/shared/src/utils/edgeless.ts
index 88eabc7748..e86ba8f17d 100644
--- a/blocksuite/affine/shared/src/utils/edgeless.ts
+++ b/blocksuite/affine/shared/src/utils/edgeless.ts
@@ -11,14 +11,12 @@ export function getSelectedRect(selected: GfxModel[]): DOMRect {
     return new DOMRect();
   }
 
-  const lockedElementsByFrame = selected
-    .map(selectable => {
-      if (selectable instanceof FrameBlockModel && selectable.isLocked()) {
-        return selectable.descendantElements;
-      }
-      return [];
-    })
-    .flat();
+  const lockedElementsByFrame = selected.flatMap(selectable => {
+    if (selectable instanceof FrameBlockModel && selectable.isLocked()) {
+      return selectable.descendantElements;
+    }
+    return [];
+  });
 
   selected = [...new Set([...selected, ...lockedElementsByFrame])];
 
diff --git a/blocksuite/affine/widgets/linked-doc/src/linked-doc-popover.ts b/blocksuite/affine/widgets/linked-doc/src/linked-doc-popover.ts
index f230a95af2..f62f1faba8 100644
--- a/blocksuite/affine/widgets/linked-doc/src/linked-doc-popover.ts
+++ b/blocksuite/affine/widgets/linked-doc/src/linked-doc-popover.ts
@@ -113,11 +113,9 @@ export class LinkedDocPopover extends SignalWatcher(
   }
 
   private get _flattenActionList() {
-    return this._actionGroup
-      .map(group =>
-        group.items.map(item => ({ ...item, groupName: group.name }))
-      )
-      .flat();
+    return this._actionGroup.flatMap(group =>
+      group.items.map(item => ({ ...item, groupName: group.name }))
+    );
   }
 
   private get _query() {
diff --git a/blocksuite/affine/widgets/slash-menu/src/slash-menu-popover.ts b/blocksuite/affine/widgets/slash-menu/src/slash-menu-popover.ts
index f9ebc4976d..9c473eef9c 100644
--- a/blocksuite/affine/widgets/slash-menu/src/slash-menu-popover.ts
+++ b/blocksuite/affine/widgets/slash-menu/src/slash-menu-popover.ts
@@ -142,15 +142,13 @@ export class SlashMenu extends WithDisposable(LitElement) {
       // We search first and second layer
       if (this._filteredItems.length !== 0 && depth >= 1) break;
 
-      queue = queue
-        .map<typeof queue>(item => {
-          if (isSubMenuItem(item)) {
-            return item.subMenu;
-          } else {
-            return [];
-          }
-        })
-        .flat();
+      queue = queue.flatMap(item => {
+        if (isSubMenuItem(item)) {
+          return item.subMenu;
+        } else {
+          return [];
+        }
+      });
 
       depth++;
     }
diff --git a/blocksuite/affine/widgets/toolbar/src/toolbar.ts b/blocksuite/affine/widgets/toolbar/src/toolbar.ts
index 3d10946b0d..6414e4b483 100644
--- a/blocksuite/affine/widgets/toolbar/src/toolbar.ts
+++ b/blocksuite/affine/widgets/toolbar/src/toolbar.ts
@@ -418,9 +418,9 @@ export class AffineToolbarWidget extends WidgetComponent {
           return;
         }
 
-        const elementIds = selections
-          .map(s => (s.editing || s.inoperable ? [] : s.elements))
-          .flat();
+        const elementIds = selections.flatMap(s =>
+          s.editing || s.inoperable ? [] : s.elements
+        );
         const count = elementIds.length;
         const activated = context.activated && Boolean(count);
 
diff --git a/blocksuite/affine/widgets/toolbar/src/utils.ts b/blocksuite/affine/widgets/toolbar/src/utils.ts
index e6f624b317..d4688991f2 100644
--- a/blocksuite/affine/widgets/toolbar/src/utils.ts
+++ b/blocksuite/affine/widgets/toolbar/src/utils.ts
@@ -229,8 +229,7 @@ export function renderToolbar(
         ? module.config.when(context)
         : (module.config.when ?? true)
     )
-    .map<ToolbarActions>(module => module.config.actions)
-    .flat();
+    .flatMap(module => module.config.actions);
 
   const combined = combine(actions, context);
 
diff --git a/packages/backend/server/src/plugins/copilot/providers/gemini/gemini.ts b/packages/backend/server/src/plugins/copilot/providers/gemini/gemini.ts
index 936b07f210..5820e35e08 100644
--- a/packages/backend/server/src/plugins/copilot/providers/gemini/gemini.ts
+++ b/packages/backend/server/src/plugins/copilot/providers/gemini/gemini.ts
@@ -255,8 +255,7 @@ export abstract class GeminiProvider<T> extends CopilotProvider<T> {
       );
 
       return embeddings
-        .map(e => (e.status === 'fulfilled' ? e.value.embeddings : null))
-        .flat()
+        .flatMap(e => (e.status === 'fulfilled' ? e.value.embeddings : null))
         .filter((v): v is number[] => !!v && Array.isArray(v));
     } catch (e: any) {
       metrics.ai
diff --git a/packages/frontend/core/src/blocksuite/ai/extensions/ai-slash-menu.ts b/packages/frontend/core/src/blocksuite/ai/extensions/ai-slash-menu.ts
index e26db6fa76..423cae9b55 100644
--- a/packages/frontend/core/src/blocksuite/ai/extensions/ai-slash-menu.ts
+++ b/packages/frontend/core/src/blocksuite/ai/extensions/ai-slash-menu.ts
@@ -19,7 +19,7 @@ import {
 } from '../widgets/ai-panel/ai-panel';
 
 export function AiSlashMenuConfigExtension() {
-  const AIItems = pageAIGroups.map(group => group.items).flat();
+  const AIItems = pageAIGroups.flatMap(group => group.items);
 
   const iconWrapper = (icon: AIItemConfig['icon']) => {
     return html`<div style="color: var(--affine-primary-color)">
diff --git a/packages/frontend/core/src/modules/collection/entities/collection.ts b/packages/frontend/core/src/modules/collection/entities/collection.ts
index 21ff0db5a3..19ba1ddc04 100644
--- a/packages/frontend/core/src/modules/collection/entities/collection.ts
+++ b/packages/frontend/core/src/modules/collection/entities/collection.ts
@@ -66,7 +66,7 @@ export class Collection extends Entity<{ id: string }> {
               },
             ],
           })
-          .pipe(map(result => result.groups.map(group => group.items).flat()));
+          .pipe(map(result => result.groups.flatMap(group => group.items)));
       })
     );
   }
diff --git a/packages/frontend/templates/build-stickers.mjs b/packages/frontend/templates/build-stickers.mjs
index 4aba9e7dac..daa12b9a08 100644
--- a/packages/frontend/templates/build-stickers.mjs
+++ b/packages/frontend/templates/build-stickers.mjs
@@ -51,8 +51,7 @@ import stickerContent${id} from './stickers/${category}/Content/${sticker}';`,
 }
 
 const importStatements = Object.values(data)
-  .map(v => Object.values(v).map(v => v.importStatement))
-  .flat()
+  .flatMap(v => Object.values(v).map(v => v.importStatement))
   .join('\n');
 
 const templates = `const templates = {