refactor(editor): edgeless toolbar add frame action (#10880)

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

@@ -13,8 +13,10 @@ import {
   type ToolbarModuleConfig,
 } from '@blocksuite/affine-shared/services';
 import type { GfxModel } from '@blocksuite/block-std/gfx';
+import { Bound } from '@blocksuite/global/gfx';
 import {
   ConnectorCIcon,
+  FrameIcon,
   GroupingIcon,
   LockIcon,
   ReleaseFromGroupIcon,
@@ -57,6 +59,48 @@ export const builtinMiscToolbarConfig = {
         }
       },
     },
+    {
+      placement: ActionPlacement.Start,
+      id: 'b.add-frame',
+      label: 'Frame',
+      tooltip: 'Frame',
+      icon: FrameIcon(),
+      when(ctx) {
+        const models = ctx.getSurfaceModels();
+        if (models.length < 2) return false;
+        if (
+          models.some(model => ctx.matchModel(model.group, MindmapElementModel))
+        )
+          return false;
+
+        return true;
+      },
+      run(ctx) {
+        const models = ctx.getSurfaceModels();
+        if (models.length < 2) return;
+
+        const rootModel = ctx.store.root;
+        if (!rootModel) return;
+
+        // TODO(@fundon): it should be simple
+        const edgeless = ctx.view.getBlock(rootModel.id);
+        if (!ctx.matchBlock(edgeless, EdgelessRootBlockComponent)) {
+          console.error('edgeless view is not found.');
+          return;
+        }
+
+        const frame = edgeless.service.frame.createFrameOnSelected();
+        if (!frame) return;
+
+        // TODO(@fundon): should be a command
+        edgeless.surface.fitToViewport(Bound.deserialize(frame.xywh));
+
+        ctx.track('CanvasElementAdded', {
+          control: 'context-menu',
+          type: 'frame',
+        });
+      },
+    },
     {
       placement: ActionPlacement.Start,
       id: 'c.add-group',

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

@@ -35,6 +35,7 @@ export class SizeDropdownMenu extends SignalWatcher(LitElement) {
 
     editor-menu-action {
       justify-content: space-between;
+      color: var(--affine-icon-color);
     }
 
     :host([data-type='check']) editor-menu-action[data-selected] {