refactor(editor): edgeless external embed card toolbar config extension

fundon · fundon · commit 625707ae4501 · 2025-03-13T21:20:37.000+08:00
diff --git a/blocksuite/affine/blocks/block-embed/src/configs/toolbar.ts b/blocksuite/affine/blocks/block-embed/src/configs/toolbar.ts
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-figma-block/embed-figma-spec.ts b/blocksuite/affine/blocks/block-embed/src/embed-figma-block/embed-figma-spec.ts
@@ -1,15 +1,10 @@
 import { EmbedFigmaBlockSchema } from '@blocksuite/affine-model';
-import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
-import {
-  BlockServiceIdentifier,
-  BlockViewExtension,
-  FlavourExtension,
-} from '@blocksuite/block-std';
+import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar';
+import { createBuiltinToolbarConfigExtension } from '../configs/toolbar';
 import { EmbedFigmaBlockAdapterExtensions } from './adapters/extension';
 import { embedFigmaSlashMenuConfig } from './configs/slash-menu';
 import { EmbedFigmaBlockComponent } from './embed-figma-block';
@@ -26,9 +21,6 @@ export const EmbedFigmaBlockSpec: ExtensionType[] = [
   }),
   EmbedFigmaBlockAdapterExtensions,
   EmbedFigmaBlockOptionConfig,
-  ToolbarModuleExtension({
-    id: BlockServiceIdentifier(flavour),
-    config: createBuiltinToolbarConfigForExternal(EmbedFigmaBlockComponent),
-  }),
+  createBuiltinToolbarConfigExtension(flavour, EmbedFigmaBlockComponent),
   SlashMenuConfigExtension(flavour, embedFigmaSlashMenuConfig),
 ].flat();
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-github-block/embed-github-spec.ts b/blocksuite/affine/blocks/block-embed/src/embed-github-block/embed-github-spec.ts
@@ -1,15 +1,10 @@
 import { EmbedGithubBlockSchema } from '@blocksuite/affine-model';
-import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
-import {
-  BlockServiceIdentifier,
-  BlockViewExtension,
-  FlavourExtension,
-} from '@blocksuite/block-std';
+import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar';
+import { createBuiltinToolbarConfigExtension } from '../configs/toolbar';
 import { EmbedGithubBlockAdapterExtensions } from './adapters/extension';
 import { embedGithubSlashMenuConfig } from './configs/slash-menu';
 import { EmbedGithubBlockComponent } from './embed-github-block';
@@ -30,9 +25,6 @@ export const EmbedGithubBlockSpec: ExtensionType[] = [
   }),
   EmbedGithubBlockAdapterExtensions,
   EmbedGithubBlockOptionConfig,
-  ToolbarModuleExtension({
-    id: BlockServiceIdentifier(flavour),
-    config: createBuiltinToolbarConfigForExternal(EmbedGithubBlockComponent),
-  }),
+  createBuiltinToolbarConfigExtension(flavour, EmbedGithubBlockComponent),
   SlashMenuConfigExtension(flavour, embedGithubSlashMenuConfig),
 ].flat();
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-loom-block/embed-loom-spec.ts b/blocksuite/affine/blocks/block-embed/src/embed-loom-block/embed-loom-spec.ts
@@ -1,15 +1,10 @@
 import { EmbedLoomBlockSchema } from '@blocksuite/affine-model';
-import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
-import {
-  BlockServiceIdentifier,
-  BlockViewExtension,
-  FlavourExtension,
-} from '@blocksuite/block-std';
+import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar';
+import { createBuiltinToolbarConfigExtension } from '../configs/toolbar';
 import { EmbedLoomBlockAdapterExtensions } from './adapters/extension';
 import { embedLoomSlashMenuConfig } from './configs/slash-menu';
 import { EmbedLoomBlockComponent } from './embed-loom-block';
@@ -30,9 +25,6 @@ export const EmbedLoomBlockSpec: ExtensionType[] = [
   }),
   EmbedLoomBlockAdapterExtensions,
   EmbedLoomBlockOptionConfig,
-  ToolbarModuleExtension({
-    id: BlockServiceIdentifier(flavour),
-    config: createBuiltinToolbarConfigForExternal(EmbedLoomBlockComponent),
-  }),
+  createBuiltinToolbarConfigExtension(flavour, EmbedLoomBlockComponent),
   SlashMenuConfigExtension(flavour, embedLoomSlashMenuConfig),
 ].flat();
diff --git a/blocksuite/affine/blocks/block-embed/src/embed-youtube-block/embed-youtube-spec.ts b/blocksuite/affine/blocks/block-embed/src/embed-youtube-block/embed-youtube-spec.ts
@@ -1,15 +1,10 @@
 import { EmbedYoutubeBlockSchema } from '@blocksuite/affine-model';
-import { ToolbarModuleExtension } from '@blocksuite/affine-shared/services';
 import { SlashMenuConfigExtension } from '@blocksuite/affine-widget-slash-menu';
-import {
-  BlockServiceIdentifier,
-  BlockViewExtension,
-  FlavourExtension,
-} from '@blocksuite/block-std';
+import { BlockViewExtension, FlavourExtension } from '@blocksuite/block-std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal } from 'lit/static-html.js';
 
-import { createBuiltinToolbarConfigForExternal } from '../configs/toolbar';
+import { createBuiltinToolbarConfigExtension } from '../configs/toolbar';
 import { EmbedYoutubeBlockAdapterExtensions } from './adapters/extension';
 import { embedYoutubeSlashMenuConfig } from './configs/slash-menu';
 import { EmbedYoutubeBlockComponent } from './embed-youtube-block';
@@ -30,9 +25,6 @@ export const EmbedYoutubeBlockSpec: ExtensionType[] = [
   }),
   EmbedYoutubeBlockAdapterExtensions,
   EmbedYoutubeBlockOptionConfig,
-  ToolbarModuleExtension({
-    id: BlockServiceIdentifier(flavour),
-    config: createBuiltinToolbarConfigForExternal(EmbedYoutubeBlockComponent),
-  }),
+  createBuiltinToolbarConfigExtension(flavour, EmbedYoutubeBlockComponent),
   SlashMenuConfigExtension('affine:embed-youtube', embedYoutubeSlashMenuConfig),
 ].flat();
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/embed.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/embed.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/index.ts
@@ -4,7 +4,6 @@ import type { ExtensionType } from '@blocksuite/store';
 
 import { builtinBrushToolbarConfig } from './brush';
 import { builtinConnectorToolbarConfig } from './connector';
-import { builtinEmbedToolbarConfig } from './embed';
 import { builtinFrameToolbarConfig } from './frame';
 import { builtinGroupToolbarConfig } from './group';
 import { builtinImageToolbarConfig } from './image';
@@ -30,11 +29,6 @@ export const EdgelessElementToolbarExtension: ExtensionType[] = [
     config: builtinConnectorToolbarConfig,
   }),
 
-  ToolbarModuleExtension({
-    id: BlockFlavourIdentifier('affine:surface:embed'),
-    config: builtinEmbedToolbarConfig,
-  }),
-
   ToolbarModuleExtension({
     id: BlockFlavourIdentifier('affine:surface:frame'),
     config: builtinFrameToolbarConfig,
diff --git a/blocksuite/affine/model/src/blocks/embed/types.ts b/blocksuite/affine/model/src/blocks/embed/types.ts
@@ -1,3 +1,4 @@
+import type { GfxModel } from '@blocksuite/block-std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 
 import { EmbedFigmaModel } from './figma';
@@ -34,7 +35,7 @@ export type LinkableEmbedModel = EmbedCardModel | EmbedIframeBlockModel;
 export type BuiltInEmbedModel = EmbedCardModel | EmbedHtmlModel;
 
 export function isExternalEmbedModel(
-  model: BlockModel
+  model: GfxModel | BlockModel
 ): model is InstanceType<ExternalEmbedModel> {
   return (
     model instanceof EmbedFigmaModel ||
@@ -45,7 +46,7 @@ export function isExternalEmbedModel(
 }
 
 export function isInternalEmbedModel(
-  model: BlockModel
+  model: GfxModel | BlockModel
 ): model is InstanceType<InternalEmbedModel> {
   return (
     model instanceof EmbedLinkedDocModel || model instanceof EmbedSyncedDocModel
diff --git a/blocksuite/affine/shared/src/services/toolbar-service/context.ts b/blocksuite/affine/shared/src/services/toolbar-service/context.ts
@@ -133,8 +133,8 @@ abstract class ToolbarContextBase {
     );
   }
 
-  getSurfaceModelsByType<M extends abstract new (...args: any) => any>(
-    klass: M
+  getSurfaceModelsByType<T extends abstract new (...args: any) => any>(
+    klass: T
   ) {
     if (this.hasSelectedSurfaceModels) {
       const elements = this.elementsMap$.peek().get(this.flavour$.peek());
@@ -145,6 +145,20 @@ abstract class ToolbarContextBase {
     return [];
   }
 
+  getSurfaceBlocksByType<T extends abstract new (...args: any) => any>(
+    klass: T
+  ) {
+    if (this.hasSelectedSurfaceModels) {
+      const elements = this.elementsMap$.peek().get(this.flavour$.peek());
+      if (elements?.length) {
+        return elements
+          .map(model => this.gfx.view.get(model.id))
+          .filter(block => block && this.matchBlock(block, klass));
+      }
+    }
+    return [];
+  }
+
   getCurrentBlockBy<T extends SelectionConstructor>(type: T) {
     const selection = this.selection.find(type);
     if (!selection) return null;
@@ -165,17 +179,17 @@ abstract class ToolbarContextBase {
       : this.getCurrentBlockBy(BlockSelection);
   }
 
-  getCurrentBlockByType<K extends abstract new (...args: any) => any>(
-    klass: K
+  getCurrentBlockByType<T extends abstract new (...args: any) => any>(
+    klass: T
   ) {
     const block = this.getCurrentBlock();
     return this.matchBlock(block, klass) ? block : null;
   }
 
-  matchBlock<K extends abstract new (...args: any) => any>(
+  matchBlock<T extends abstract new (...args: any) => any>(
     component: GfxElementModelView | BlockComponent | null,
-    klass: K
-  ): component is InstanceType<K> {
+    klass: T
+  ): component is InstanceType<T> {
     return component instanceof klass;
   }
 
@@ -189,23 +203,23 @@ abstract class ToolbarContextBase {
     return this.store.getBlock(selection.blockId)?.model ?? null;
   }
 
-  getCurrentModel() {
+  getCurrentModel(): GfxModel | BlockModel | null {
     return this.hasSelectedSurfaceModels
       ? this.getCurrentModelBy(SurfaceSelection)
       : this.getCurrentModelBy(BlockSelection);
   }
 
-  getCurrentModelByType<M extends abstract new (...args: any) => any>(
-    klass: M
+  getCurrentModelByType<T extends abstract new (...args: any) => any>(
+    klass: T
   ) {
     const model = this.getCurrentModel();
     return this.matchModel(model, klass) ? model : null;
   }
 
-  matchModel<K extends abstract new (...args: any) => any>(
+  matchModel<T extends abstract new (...args: any) => any>(
     model: GfxModel | BlockModel | null,
-    klass: K
-  ): model is InstanceType<K> {
+    klass: T
+  ): model is InstanceType<T> {
     return model instanceof klass;
   }
 
diff --git a/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts b/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts
@@ -392,23 +392,30 @@ export class AffineToolbarWidget extends WidgetComponent {
     // `card view` or `embed view`
     disposables.add(
       std.view.viewUpdated.subscribe(record => {
-        if (record.type !== 'block') return;
-        if (!flags.isBlock()) return;
-
-        const blockIds = std.selection
-          .filter$(BlockSelection)
-          .peek()
-          .map(s => s.blockId);
-
-        if (record.method === 'add' && blockIds.includes(record.id)) {
-          batch(() => {
-            this.setReferenceElementWithBlocks(
-              blockIds
-                .map(id => std.view.getBlock(id))
-                .filter(block => block !== null)
-            );
-            flags.refresh(Flag.Block);
-          });
+        const hasAddedBlock =
+          record.type === 'block' && record.method === 'add';
+        if (!hasAddedBlock) return;
+
+        if (flags.isBlock()) {
+          const blockIds = std.selection
+            .filter$(BlockSelection)
+            .peek()
+            .map(s => s.blockId);
+          if (blockIds.includes(record.id)) {
+            batch(() => {
+              this.setReferenceElementWithBlocks(
+                blockIds
+                  .map(id => std.view.getBlock(id))
+                  .filter(block => block !== null)
+              );
+              flags.refresh(Flag.Block);
+            });
+          }
+          return;
+        }
+
+        if (flags.isSurface()) {
+          flags.refresh(Flag.Surface);
           return;
         }
       })
@@ -462,8 +469,8 @@ export class AffineToolbarWidget extends WidgetComponent {
 
     // Handles elements when resizing
     const edgelessSlots = std.get(EdgelessLegacySlotIdentifier);
-    disposables.add(edgelessSlots.elementResizeStart.on(dragStart));
-    disposables.add(edgelessSlots.elementResizeEnd.on(dragEnd));
+    disposables.add(edgelessSlots.elementResizeStart.subscribe(dragStart));
+    disposables.add(edgelessSlots.elementResizeEnd.subscribe(dragEnd));
 
     // Handles elements when hovering
     disposables.add(
diff --git a/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts b/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts
