refactor(editor): edgeless element toolbar with new pattern (#10511)

2025-03-18 15:36:25 +00:00
parent 3939cc1c52
commit cb37d25d7b
31 changed files with 838 additions and 367 deletions
--- a/blocksuite/affine/blocks/block-attachment/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-attachment/src/configs/toolbar.ts
@@ -136,7 +136,6 @@ export const builtinToolbarConfig = {
      id: 'a.rename',
      content(cx) {
        const component = cx.getCurrentBlockComponentBy(
-          BlockSelection,
          AttachmentBlockComponent
        );
        if (!component) return null;
@@ -178,7 +177,6 @@ export const builtinToolbarConfig = {
      icon: DownloadIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          AttachmentBlockComponent
        );
        component?.download();
@@ -190,7 +188,6 @@ export const builtinToolbarConfig = {
      icon: CaptionIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          AttachmentBlockComponent
        );
        component?.captionEditor?.show();
@@ -212,7 +209,6 @@ export const builtinToolbarConfig = {
          run(ctx) {
            // TODO(@fundon): unify `clone` method
            const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
              AttachmentBlockComponent
            );
            component?.copy();
@@ -224,7 +220,6 @@ export const builtinToolbarConfig = {
          icon: DuplicateIcon(),
          run(ctx) {
            const model = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
              AttachmentBlockComponent
            )?.model;
            if (!model) return;
@@ -247,7 +242,6 @@ export const builtinToolbarConfig = {
      icon: ResetIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          AttachmentBlockComponent
        );
        component?.refreshData();
@@ -260,7 +254,7 @@ export const builtinToolbarConfig = {
      icon: DeleteIcon(),
      variant: 'destructive',
      run(ctx) {
-        const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+        const model = ctx.getCurrentModel();
        if (!model) return;

        ctx.store.deleteBlock(model);
--- a/blocksuite/affine/blocks/block-bookmark/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-bookmark/src/configs/toolbar.ts
@@ -276,7 +276,6 @@ export const builtinToolbarConfig = {
      icon: CaptionIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          BookmarkBlockComponent
        );
        component?.captionEditor?.show();
@@ -296,7 +295,7 @@ export const builtinToolbarConfig = {
          label: 'Copy',
          icon: CopyIcon(),
          run(ctx) {
-            const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+            const model = ctx.getCurrentModel();
            if (!model) return;

            const slice = Slice.fromModels(ctx.store, [model]);
@@ -311,7 +310,7 @@ export const builtinToolbarConfig = {
          label: 'Duplicate',
          icon: DuplicateIcon(),
          run(ctx) {
-            const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+            const model = ctx.getCurrentModel();
            if (!model) return;

            const { flavour, parent } = model;
@@ -330,7 +329,6 @@ export const builtinToolbarConfig = {
      icon: ResetIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          BookmarkBlockComponent
        );
        component?.refreshData();
@@ -343,7 +341,7 @@ export const builtinToolbarConfig = {
      icon: DeleteIcon(),
      variant: 'destructive',
      run(ctx) {
-        const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+        const model = ctx.getCurrentModel();
        if (!model) return;

        ctx.store.deleteBlock(model);
--- a/blocksuite/affine/blocks/block-embed/src/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/configs/toolbar.ts
@@ -52,7 +52,7 @@ export function createBuiltinToolbarConfigForExternal(
      {
        id: 'a.preview',
        content(ctx) {
-          const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+          const model = ctx.getCurrentModel();
          if (!model || !isExternalEmbedModel(model)) return null;

          const { url } = model.props;
@@ -72,7 +72,7 @@ export function createBuiltinToolbarConfigForExternal(
            id: 'inline',
            label: 'Inline view',
            run(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
              if (!model || !isExternalEmbedModel(model)) return;

              const { title, caption, url: link } = model.props;
@@ -105,7 +105,7 @@ export function createBuiltinToolbarConfigForExternal(
            id: 'card',
            label: 'Card view',
            disabled(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
              if (!model || !isExternalEmbedModel(model)) return true;

              const { url } = model.props;
@@ -116,7 +116,7 @@ export function createBuiltinToolbarConfigForExternal(
              return options?.viewType === 'card';
            },
            run(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
              if (!model || !isExternalEmbedModel(model)) return;

              const { url, caption } = model.props;
@@ -165,7 +165,7 @@ export function createBuiltinToolbarConfigForExternal(
            id: 'embed',
            label: 'Embed view',
            disabled(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
              if (!model || !isExternalEmbedModel(model)) return false;

              const { url } = model.props;
@@ -176,7 +176,7 @@ export function createBuiltinToolbarConfigForExternal(
              return options?.viewType === 'embed';
            },
            when(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
              if (!model || !isExternalEmbedModel(model)) return false;

              const { url } = model.props;
@@ -187,7 +187,7 @@ export function createBuiltinToolbarConfigForExternal(
              return options?.viewType === 'embed';
            },
            run(ctx) {
-              const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+              const model = ctx.getCurrentModel();
              if (!model || !isExternalEmbedModel(model)) return;

              const { url, caption } = model.props;
@@ -231,7 +231,7 @@ export function createBuiltinToolbarConfigForExternal(
          },
        ],
        content(ctx) {
-          const model = ctx.getCurrentBlockBy(BlockSelection)?.model;
+          const model = ctx.getCurrentModel();
          if (!model || !isExternalEmbedModel(model)) return null;

          const { url } = model.props;
@@ -322,10 +322,7 @@ export function createBuiltinToolbarConfigForExternal(
        tooltip: 'Caption',
        icon: CaptionIcon(),
        run(ctx) {
-          const component = ctx.getCurrentBlockComponentBy(
-            BlockSelection,
-            klass
-          );
+          const component = ctx.getCurrentBlockComponentBy(klass);
          if (!component) return;

          component.captionEditor?.show();
@@ -378,10 +375,7 @@ export function createBuiltinToolbarConfigForExternal(
        label: 'Reload',
        icon: ResetIcon(),
        run(ctx) {
-          const component = ctx.getCurrentBlockComponentBy(
-            BlockSelection,
-            klass
-          );
+          const component = ctx.getCurrentBlockComponentBy(klass);
          component?.refreshData();
        },
      },
--- a/blocksuite/affine/blocks/block-embed/src/embed-html-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-html-block/configs/toolbar.ts
@@ -37,7 +37,6 @@ export const builtinToolbarConfig = {
      tooltip: 'Open this doc',
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          EmbedHtmlBlockComponent
        );
        component?.open();
@@ -99,7 +98,6 @@ export const builtinToolbarConfig = {
      icon: CaptionIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          EmbedHtmlBlockComponent
        );
        component?.captionEditor?.show();
--- a/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-iframe-block/configs/toolbar.ts
@@ -27,9 +27,6 @@ import * as Y from 'yjs';
 import { EmbedIframeBlockComponent } from '../embed-iframe-block';

 const trackBaseProps = {
-  segment: 'doc',
-  page: 'doc editor',
-  module: 'toolbar',
  category: 'bookmark',
  type: 'card view',
 };
@@ -156,7 +153,6 @@ export const builtinToolbarConfig = {
      icon: CaptionIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          EmbedIframeBlockComponent
        );
        component?.captionEditor?.show();
@@ -210,7 +206,6 @@ export const builtinToolbarConfig = {
      icon: ResetIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          EmbedIframeBlockComponent
        );
        component?.refreshData().catch(console.error);
--- a/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-linked-doc-block/configs/toolbar.ts
@@ -38,7 +38,6 @@ export const builtinToolbarConfig = {
      id: 'a.doc-title',
      content(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          EmbedLinkedDocBlockComponent
        );
        if (!component) return null;
@@ -63,7 +62,6 @@ export const builtinToolbarConfig = {
          label: 'Inline view',
          run(ctx) {
            const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
              EmbedLinkedDocBlockComponent
            );
            component?.covertToInline();
@@ -89,7 +87,6 @@ export const builtinToolbarConfig = {
          label: 'Embed view',
          disabled(ctx) {
            const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
              EmbedLinkedDocBlockComponent
            );
            if (!component) return true;
@@ -108,7 +105,6 @@ export const builtinToolbarConfig = {
          },
          run(ctx) {
            const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
              EmbedLinkedDocBlockComponent
            );
            component?.convertToEmbed();
@@ -208,7 +204,6 @@ export const builtinToolbarConfig = {
      icon: CaptionIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          EmbedLinkedDocBlockComponent
        );
        component?.captionEditor?.show();
--- a/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
+++ b/blocksuite/affine/blocks/block-embed/src/embed-synced-doc-block/configs/toolbar.ts
@@ -50,7 +50,6 @@ export const builtinToolbarConfig = {
      ],
      content(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          EmbedSyncedDocBlockComponent
        );
        if (!component) return null;
@@ -117,14 +116,13 @@ export const builtinToolbarConfig = {
          label: 'Inline view',
          run(ctx) {
            const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
              EmbedSyncedDocBlockComponent
            );
            component?.covertToInline();

            // Clears
-            ctx.reset();
            ctx.select('note');
+            ctx.reset();

            ctx.track('SelectedView', {
              ...trackBaseProps,
@@ -138,7 +136,6 @@ export const builtinToolbarConfig = {
          label: 'Card view',
          run(ctx) {
            const component = ctx.getCurrentBlockComponentBy(
-              BlockSelection,
              EmbedSyncedDocBlockComponent
            );
            component?.convertToCard();
@@ -192,7 +189,6 @@ export const builtinToolbarConfig = {
      icon: CaptionIcon(),
      run(ctx) {
        const component = ctx.getCurrentBlockComponentBy(
-          BlockSelection,
          EmbedSyncedDocBlockComponent
        );
        component?.captionEditor?.show();
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/attachment.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/attachment.ts
@@ -0,0 +1,11 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+
+export const builtinAttachmentToolbarConfig = {
+  actions: [
+    {
+      id: 'a.test',
+      label: 'Attachment',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/bookmark.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/bookmark.ts
@@ -0,0 +1,11 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+
+export const builtinBookmarkToolbarConfig = {
+  actions: [
+    {
+      id: 'a.test',
+      label: 'Bookmark',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts
@@ -0,0 +1,11 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+
+export const builtinBrushToolbarConfig = {
+  actions: [
+    {
+      id: 'a.test',
+      label: 'Brush',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts
@@ -0,0 +1,51 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+import {
+  AddTextIcon,
+  ConnectorCIcon,
+  FlipDirectionIcon,
+  StartPointIcon,
+} from '@blocksuite/icons/lit';
+
+export const builtinConnectorToolbarConfig = {
+  actions: [
+    {
+      id: 'a.stroke-color',
+      tooltip: 'Stroke style',
+      run() {},
+    },
+    {
+      id: 'b.style',
+      tooltip: 'Style',
+      run() {},
+    },
+    {
+      id: 'c.start-point-style',
+      icon: StartPointIcon(),
+      tooltip: 'Start point style',
+      run() {},
+    },
+    {
+      id: 'd.flip-direction',
+      icon: FlipDirectionIcon(),
+      tooltip: 'Flip direction',
+      run() {},
+    },
+    {
+      id: 'e.end-point-style',
+      icon: StartPointIcon(),
+      tooltip: 'End point style',
+      run() {},
+    },
+    {
+      id: 'f.connector-shape',
+      icon: ConnectorCIcon(),
+      tooltip: 'Connector shape',
+      run() {},
+    },
+    {
+      id: 'g.add-text',
+      icon: AddTextIcon(),
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/embed.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/embed.ts
@@ -0,0 +1,11 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+
+export const builtinEmbedToolbarConfig = {
+  actions: [
+    {
+      id: 'a.test',
+      label: 'Embed',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/frame.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/frame.ts
@@ -0,0 +1,11 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+
+export const builtinFrameToolbarConfig = {
+  actions: [
+    {
+      id: 'a.test',
+      label: 'Frame',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/group.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/group.ts
@@ -0,0 +1,11 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+
+export const builtinGroupToolbarConfig = {
+  actions: [
+    {
+      id: 'a.test',
+      label: 'Group',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/image.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/image.ts
@@ -0,0 +1,11 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+
+export const builtinImageToolbarConfig = {
+  actions: [
+    {
+      id: 'a.test',
+      label: 'Image',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
@@ -0,0 +1,84 @@
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
+import { BlockFlavourIdentifier } from '@blocksuite/block-std';
+import type { ExtensionType } from '@blocksuite/store';
+
+import { builtinAttachmentToolbarConfig } from './attachment';
+import { builtinBookmarkToolbarConfig } from './bookmark';
+import { builtinBrushToolbarConfig } from './brush';
+import { builtinConnectorToolbarConfig } from './connector';
+import { builtinEmbedToolbarConfig } from './embed';
+import { builtinFrameToolbarConfig } from './frame';
+import { builtinGroupToolbarConfig } from './group';
+import { builtinImageToolbarConfig } from './image';
+import { builtinMindmapToolbarConfig } from './mindmap';
+import { builtinMiscToolbarConfig } from './misc';
+import { builtinNoteToolbarConfig } from './note';
+import { builtinShapeToolbarConfig } from './shape';
+import { builtinTextToolbarConfig } from './text';
+
+export const EdgelessElementToolbarExtension: ExtensionType[] = [
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:attachment'),
+    config: builtinAttachmentToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:bookmark'),
+    config: builtinBookmarkToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:image'),
+    config: builtinImageToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:brush'),
+    config: builtinBrushToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:connector'),
+    config: builtinConnectorToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:embed'),
+    config: builtinEmbedToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:frame'),
+    config: builtinFrameToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:group'),
+    config: builtinGroupToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:mindmap'),
+    config: builtinMindmapToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:note'),
+    config: builtinNoteToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:shape'),
+    config: builtinShapeToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:text'),
+    config: builtinTextToolbarConfig,
+  }),
+
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:*'),
+    config: builtinMiscToolbarConfig,
+  }),
+];
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/mindmap.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/mindmap.ts
@@ -0,0 +1,11 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+
+export const builtinMindmapToolbarConfig = {
+  actions: [
+    {
+      id: 'a.test',
+      label: 'Mindmap',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/misc.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/misc.ts
@@ -0,0 +1,41 @@
+import {
+  ActionPlacement,
+  type ToolbarModuleConfig,
+} from '@blocksuite/affine-shared/services';
+import {
+  ConnectorCIcon,
+  LockIcon,
+  ReleaseFromGroupIcon,
+} from '@blocksuite/icons/lit';
+
+export const builtinMiscToolbarConfig = {
+  actions: [
+    {
+      placement: ActionPlacement.Start,
+      id: 'a.release-from-group',
+      tooltip: 'Release from group',
+      icon: ReleaseFromGroupIcon(),
+      run() {},
+    },
+    {
+      placement: ActionPlacement.Start,
+      id: 'a.misc',
+      label: 'Misc',
+      run() {},
+    },
+    {
+      placement: ActionPlacement.End,
+      id: 'a.draw-connector',
+      icon: ConnectorCIcon(),
+      tooltip: 'Draw connector',
+      run() {},
+    },
+    {
+      placement: ActionPlacement.End,
+      id: 'b.lock',
+      icon: LockIcon(),
+      tooltip: 'Lock',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/note.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/note.ts
@@ -0,0 +1,11 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+
+export const builtinNoteToolbarConfig = {
+  actions: [
+    {
+      id: 'a.test',
+      label: 'Note',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts
@@ -0,0 +1,39 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+import {
+  AddTextIcon,
+  ShapeIcon,
+  StyleGeneralIcon,
+} from '@blocksuite/icons/lit';
+
+export const builtinShapeToolbarConfig = {
+  actions: [
+    {
+      id: 'a.switch-type',
+      icon: ShapeIcon(),
+      tooltip: 'Switch type',
+      run() {},
+    },
+    {
+      id: 'b.style',
+      icon: StyleGeneralIcon(),
+      tooltip: 'Style',
+      run() {},
+    },
+    {
+      id: 'c.fill-color',
+      label: 'Fill color',
+      run() {},
+    },
+    {
+      id: 'd.border-style',
+      label: 'Border style',
+      run() {},
+    },
+    {
+      id: 'e.text',
+      icon: AddTextIcon(),
+      tooltip: 'Show add button or text menu',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text.ts
@@ -0,0 +1,11 @@
+import type { ToolbarModuleConfig } from '@blocksuite/affine-shared/services';
+
+export const builtinTextToolbarConfig = {
+  actions: [
+    {
+      id: 'a.test',
+      label: 'Text',
+      run() {},
+    },
+  ],
+} as const satisfies ToolbarModuleConfig;
--- a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts
@@ -3,6 +3,7 @@ import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
 import { TextTool } from '@blocksuite/affine-gfx-text';
 import type { ExtensionType } from '@blocksuite/store';

+import { EdgelessElementToolbarExtension } from './configs/toolbar';
 import { EdgelessRootBlockSpec } from './edgeless-root-spec.js';
 import { BrushTool } from './gfx-tool/brush-tool.js';
 import { ConnectorTool } from './gfx-tool/connector-tool.js';
@@ -40,7 +41,8 @@ export const EdgelessBuiltInManager: ExtensionType[] = [
  MindMapIndicatorOverlay,
  SnapManager,
  EditPropsMiddlewareBuilder,
-];
+  EdgelessElementToolbarExtension,
+].flat();

 export const EdgelessBuiltInSpecs: ExtensionType[] = [
  EdgelessRootBlockSpec,
--- a/blocksuite/affine/blocks/block-root/src/edgeless/utils/text.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/utils/text.ts
@@ -27,13 +27,6 @@ export function mountShapeTextEditor(
    );
  }

-  if (!shapeElement.text) {
-    const text = new Y.Text();
-    edgeless.std
-      .get(EdgelessCRUDIdentifier)
-      .updateElement(shapeElement.id, { text });
-  }
-
  const updatedElement = edgeless.service.crud.getElementById(shapeElement.id);

  if (!(updatedElement instanceof ShapeElementModel)) {
@@ -41,17 +34,25 @@ export function mountShapeTextEditor(
    return;
  }

+  edgeless.gfx.tool.setTool('default');
+  edgeless.gfx.selection.set({
+    elements: [shapeElement.id],
+    editing: true,
+  });
+
+  if (!shapeElement.text) {
+    const text = new Y.Text();
+    edgeless.std
+      .get(EdgelessCRUDIdentifier)
+      .updateElement(shapeElement.id, { text });
+  }
+
  const shapeEditor = new EdgelessShapeTextEditor();
  shapeEditor.element = updatedElement;
  shapeEditor.edgeless = edgeless;
  shapeEditor.mountEditor = mountShapeTextEditor;

  edgeless.mountElm.append(shapeEditor);
-  edgeless.gfx.tool.setTool('default');
-  edgeless.gfx.selection.set({
-    elements: [shapeElement.id],
-    editing: true,
-  });
 }

 export function mountFrameTitleEditor(
@@ -65,16 +66,17 @@ export function mountFrameTitleEditor(
    );
  }

-  const frameEditor = new EdgelessFrameTitleEditor();
-  frameEditor.frameModel = frame;
-  frameEditor.edgeless = edgeless;
-
-  edgeless.mountElm.append(frameEditor);
  edgeless.gfx.tool.setTool('default');
  edgeless.gfx.selection.set({
    elements: [frame.id],
    editing: true,
  });
+
+  const frameEditor = new EdgelessFrameTitleEditor();
+  frameEditor.frameModel = frame;
+  frameEditor.edgeless = edgeless;
+
+  edgeless.mountElm.append(frameEditor);
 }

 export function mountGroupTitleEditor(
@@ -88,16 +90,17 @@ export function mountGroupTitleEditor(
    );
  }

-  const groupEditor = new EdgelessGroupTitleEditor();
-  groupEditor.group = group;
-  groupEditor.edgeless = edgeless;
-
-  edgeless.mountElm.append(groupEditor);
  edgeless.gfx.tool.setTool('default');
  edgeless.gfx.selection.set({
    elements: [group.id],
    editing: true,
  });
+
+  const groupEditor = new EdgelessGroupTitleEditor();
+  groupEditor.group = group;
+  groupEditor.edgeless = edgeless;
+
+  edgeless.mountElm.append(groupEditor);
 }

 export function mountConnectorLabelEditor(
@@ -112,6 +115,12 @@ export function mountConnectorLabelEditor(
    );
  }

+  edgeless.gfx.tool.setTool('default');
+  edgeless.gfx.selection.set({
+    elements: [connector.id],
+    editing: true,
+  });
+
  if (!connector.text) {
    const text = new Y.Text();
    const labelOffset = connector.labelOffset;
@@ -143,9 +152,4 @@ export function mountConnectorLabelEditor(
      editor.inlineEditor?.focusEnd();
    })
    .catch(console.error);
-  edgeless.gfx.tool.setTool('default');
-  edgeless.gfx.selection.set({
-    elements: [connector.id],
-    editing: true,
-  });
 }