feat(editor): insert a blank frame slash menu action (#10899)

Close [BS-2517](https://linear.app/affine-design/issue/BS-2517/%E6%B7%BB%E5%8A%A0frame%E5%85%A5%E5%8F%A3)

### What changes:
- add a insert blank frame action to slash menu
- move `EdgelessFrameManager` and `FrameOverlay` extensions to `FrameBlockSpec`
- make `FrameBlockSpec` as a part of `CommonBlockSpecs` such that we can use `EdgelessFrameManager` to create a frame more easily

https://github.com/user-attachments/assets/ddff5866-8933-4ce5-aaf4-873661407ee4

blocksuite/affine/blocks/block-surface-ref/src/configs/slash-menu.ts

@@ -1,11 +1,16 @@
+import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame';
 import { getSurfaceBlock } from '@blocksuite/affine-block-surface';
-import type { FrameBlockModel } from '@blocksuite/affine-model';
+import { type FrameBlockModel, NoteBlockModel } from '@blocksuite/affine-model';
 import { getSelectedModelsCommand } from '@blocksuite/affine-shared/commands';
+import { matchModels } from '@blocksuite/affine-shared/utils';
 import {
   type SlashMenuActionItem,
   type SlashMenuConfig,
   SlashMenuConfigExtension,
+  type SlashMenuItem,
 } from '@blocksuite/affine-widget-slash-menu';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import { Bound } from '@blocksuite/global/gfx';
 import { FrameIcon, GroupingIcon } from '@blocksuite/icons/lit';
 
 import { insertSurfaceRefBlockCommand } from '../commands';
@@ -15,6 +20,54 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = {
   items: ({ std }) => {
     let index = 0;
 
+    const insertBlankFrameItem: SlashMenuItem = {
+      name: 'Frame',
+      description: 'Insert a blank frame',
+      icon: FrameIcon(),
+      tooltip: {
+        figure: EdgelessTooltip,
+        caption: 'Edgeless',
+      },
+      group: `5_Edgeless Element@${index++}`,
+      action: ({ std, model }) => {
+        const { root } = std.store;
+        if (!root) return;
+
+        const pageBlock = root.children.find(
+          (model): model is NoteBlockModel =>
+            matchModels(model, [NoteBlockModel]) && model.isPageBlock()
+        );
+        if (!pageBlock) return;
+
+        const top = pageBlock.x;
+        const right = pageBlock.x + pageBlock.w;
+        const padding = 20;
+
+        let frameBound = Bound.fromXYWH([right + padding, top, 1600, 900]);
+        const gfx = std.get(GfxControllerIdentifier);
+
+        // Find a space to insert the frame
+        let elementInFrameBound = gfx.grid.search(frameBound);
+        while (elementInFrameBound.length > 0) {
+          const rightElement = elementInFrameBound.reduce((a, b) => {
+            return a.x + a.w > b.x + b.w ? a : b;
+          });
+          frameBound.x = rightElement.x + rightElement.w + padding;
+          elementInFrameBound = gfx.grid.search(frameBound);
+        }
+
+        const frameMgr = std.get(EdgelessFrameManagerIdentifier);
+        const frame = frameMgr.createFrameOnBound(frameBound);
+
+        std.command.exec(insertSurfaceRefBlockCommand, {
+          reference: frame.id,
+          place: 'after',
+          removeEmptyLine: true,
+          selectedModels: [model],
+        });
+      },
+    };
+
     const surfaceModel = getSurfaceBlock(std.store);
     if (!surfaceModel) return [];
 
@@ -25,7 +78,7 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = {
     const frameItems = frameModels.map<SlashMenuActionItem>(frameModel => ({
       name: 'Frame: ' + frameModel.props.title,
       icon: FrameIcon(),
-      group: `5_Document Group & Frame@${index++}`,
+      group: `5_Edgeless Element@${index++}`,
       tooltip: {
         figure: EdgelessTooltip,
         caption: 'Edgeless',
@@ -47,7 +100,7 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = {
     const groupItems = groupElements.map<SlashMenuActionItem>(group => ({
       name: 'Group: ' + group.title.toString(),
       icon: GroupingIcon(),
-      group: `5_Document Group & Frame@${index++}`,
+      group: `5_Edgeless Element@${index++}`,
       tooltip: {
         figure: EdgelessTooltip,
         caption: 'Edgeless',
@@ -65,7 +118,7 @@ const surfaceRefSlashMenuConfig: SlashMenuConfig = {
       },
     }));
 
-    return [...frameItems, ...groupItems];
+    return [insertBlankFrameItem, ...frameItems, ...groupItems];
   },
 };