feat(editor): add toolbar registry extension

blocksuite/affine/block-image/src/image-spec.ts

@@ -1,5 +1,7 @@
 import { ImageSelectionExtension } from '@blocksuite/affine-shared/selection';
+import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import {
+  BlockFlavourIdentifier,
   BlockViewExtension,
   CommandExtension,
   FlavourExtension,
@@ -12,8 +14,10 @@ import { ImageBlockAdapterExtensions } from './adapters/extension.js';
 import { commands } from './commands/index.js';
 import { ImageBlockService, ImageDropOption } from './image-service.js';
 
+const Id = FlavourExtension('affine:image');
+
 export const ImageBlockSpec: ExtensionType[] = [
-  FlavourExtension('affine:image'),
+  Id,
   ImageBlockService,
   CommandExtension(commands),
   BlockViewExtension('affine:image', model => {
@@ -31,4 +35,7 @@ export const ImageBlockSpec: ExtensionType[] = [
   ImageDropOption,
   ImageSelectionExtension,
   ImageBlockAdapterExtensions,
+  ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:image'),
+  }),
 ].flat();

blocksuite/affine/shared/src/services/index.ts

@@ -13,3 +13,4 @@ export * from './parse-url-service';
 export * from './quick-search-service';
 export * from './telemetry-service';
 export * from './theme-service';
+export * from './toolbar-service';

blocksuite/affine/shared/src/services/toolbar-service/index.ts

@@ -0,0 +1,2 @@
+export * from './module';
+export * from './registry';

blocksuite/affine/shared/src/services/toolbar-service/module.ts

@@ -0,0 +1,5 @@
+import type { BlockFlavourIdentifier } from '@blocksuite/block-std';
+
+export abstract class ToolbarModule {
+  constructor(public readonly id: ReturnType<typeof BlockFlavourIdentifier>) {}
+}

blocksuite/affine/shared/src/services/toolbar-service/registry.ts

@@ -0,0 +1,59 @@
+import {
+  type BlockStdScope,
+  LifeCycleWatcher,
+  StdIdentifier,
+} from '@blocksuite/block-std';
+import {
+  type Container,
+  createIdentifier,
+  createScope,
+} from '@blocksuite/global/di';
+import type { ExtensionType } from '@blocksuite/store';
+
+import type { ToolbarModule } from './module';
+
+export const ToolbarModuleIdentifier = createIdentifier<ToolbarModule>(
+  'AffineToolbarModuleIdentifier'
+);
+
+export const ToolbarModulesIdentifier = createIdentifier<
+  Map<string, ToolbarModule>
+>('AffineToolbarModulesIdentifier');
+
+export const ToolbarRegistryScope = createScope('AffineToolbarRegistryScope');
+
+export const ToolbarRegistryIdentifier =
+  createIdentifier<ToolbarRegistryExtension>('AffineToolbarRegistryIdentifier');
+
+export function ToolbarModuleExtension(module: ToolbarModule): ExtensionType {
+  return {
+    setup: di => {
+      di.scope(ToolbarRegistryScope).addImpl(
+        ToolbarModuleIdentifier(module.id.variant),
+        module
+      );
+    },
+  };
+}
+
+export class ToolbarRegistryExtension extends LifeCycleWatcher {
+  constructor(
+    std: BlockStdScope,
+    readonly modules: Map<string, ToolbarModule>
+  ) {
+    super(std);
+  }
+
+  static override readonly key = 'toolbar-registry';
+
+  static override setup(di: Container) {
+    di.scope(ToolbarRegistryScope)
+      .addImpl(ToolbarModulesIdentifier, provider =>
+        provider.getAll(ToolbarModuleIdentifier)
+      )
+      .addImpl(ToolbarRegistryIdentifier, this, [
+        StdIdentifier,
+        ToolbarModulesIdentifier,
+      ]);
+  }
+}

blocksuite/affine/widget-toolbar/src/toolbar.ts

@@ -1,5 +1,18 @@
+import {
+  ToolbarRegistryIdentifier,
+  ToolbarRegistryScope,
+} from '@blocksuite/affine-shared/services';
 import { WidgetComponent } from '@blocksuite/block-std';
 
 export const AFFINE_TOOLBAR_WIDGET = 'affine-toolbar-widget';
 
-export class AffineToolbarWidget extends WidgetComponent {}
+export class AffineToolbarWidget extends WidgetComponent {
+  override connectedCallback() {
+    super.connectedCallback();
+
+    const toolbarRegistry = this.std.container
+      .provider(ToolbarRegistryScope, this.std.provider)
+      .get(ToolbarRegistryIdentifier);
+    console.log(toolbarRegistry);
+  }
+}

blocksuite/blocks/src/effects.ts

@@ -34,6 +34,7 @@ import { effects as widgetDragHandleEffects } from '@blocksuite/affine-widget-dr
 import { effects as widgetFrameTitleEffects } from '@blocksuite/affine-widget-frame-title/effects';
 import { effects as widgetRemoteSelectionEffects } from '@blocksuite/affine-widget-remote-selection/effects';
 import { effects as widgetScrollAnchoringEffects } from '@blocksuite/affine-widget-scroll-anchoring/effects';
+import { effects as widgetToolbarEffects } from '@blocksuite/affine-widget-toolbar/effects';
 import type { BlockComponent } from '@blocksuite/block-std';
 import { effects as stdEffects } from '@blocksuite/block-std/effects';
 import { effects as dataViewEffects } from '@blocksuite/data-view/effects';
@@ -223,6 +224,7 @@ export function effects() {
   widgetEdgelessElementToolbarEffects();
   widgetRemoteSelectionEffects();
   widgetDragHandleEffects();
+  widgetToolbarEffects();
   dataViewEffects();
 
   customElements.define('affine-page-root', PageRootBlockComponent);

blocksuite/blocks/src/root-block/edgeless/edgeless-root-spec.ts

@@ -5,6 +5,7 @@ import {
   EmbedOptionService,
   PageViewportServiceExtension,
   ThemeService,
+  ToolbarRegistryExtension,
 } from '@blocksuite/affine-shared/services';
 import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
 import { AFFINE_FRAME_TITLE_WIDGET } from '@blocksuite/affine-widget-frame-title';
@@ -102,6 +103,7 @@ const EdgelessCommonExtension: ExtensionType[] = [
   PageViewportServiceExtension,
   RootBlockAdapterExtensions,
   FileDropExtension,
+  ToolbarRegistryExtension,
 ].flat();
 
 export const EdgelessRootBlockSpec: ExtensionType[] = [

blocksuite/blocks/src/root-block/page/page-root-spec.ts

@@ -5,6 +5,7 @@ import {
   EmbedOptionService,
   PageViewportServiceExtension,
   ThemeService,
+  ToolbarRegistryExtension,
 } from '@blocksuite/affine-shared/services';
 import { AFFINE_DRAG_HANDLE_WIDGET } from '@blocksuite/affine-widget-drag-handle';
 import { AFFINE_DOC_REMOTE_SELECTION_WIDGET } from '@blocksuite/affine-widget-remote-selection';
@@ -83,6 +84,7 @@ export const PageRootBlockSpec: ExtensionType[] = [
   DNDAPIExtension,
   RootBlockAdapterExtensions,
   FileDropExtension,
+  ToolbarRegistryExtension,
 ].flat();
 
 export const PreviewPageRootBlockSpec: ExtensionType[] = [

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/common.ts

@@ -21,6 +21,7 @@ import {
   ParagraphBlockSpec,
   RefNodeSlotsExtension,
   RichTextExtensions,
+  ToolbarRegistryExtension,
 } from '@blocksuite/affine/blocks';
 import type { ExtensionType } from '@blocksuite/affine/store';
 
@@ -38,6 +39,7 @@ const CommonBlockSpecs: ExtensionType[] = [
   AttachmentBlockSpec,
   AdapterFactoryExtensions,
   FontLoaderService,
+  ToolbarRegistryExtension,
 ].flat();
 
 export const DefaultBlockSpecs: ExtensionType[] = [