refactor(editor): improve query methods in toolbar context (#10714)

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

@@ -72,8 +72,6 @@ export class AffineToolbarWidget extends WidgetComponent {
     }
   `;
 
-  flavour$ = signal('affine:note');
-
   placement$ = signal<Placement>('top');
 
   sideOptions$ = signal<Partial<SideObject> | null>(null);
@@ -139,7 +137,6 @@ export class AffineToolbarWidget extends WidgetComponent {
     super.connectedCallback();
 
     const {
-      flavour$,
       placement$,
       sideOptions$,
       referenceElement$,
@@ -149,7 +146,7 @@ export class AffineToolbarWidget extends WidgetComponent {
       host,
       std,
     } = this;
-    const { flags, message$ } = toolbarRegistry;
+    const { flags, elementsMap$, flavour$, message$ } = toolbarRegistry;
     const context = new ToolbarContext(std);
 
     // TODO(@fundon): fix toolbar position shaking when the wheel scrolls
@@ -303,6 +300,7 @@ export class AffineToolbarWidget extends WidgetComponent {
         let elements: GfxModel[] = [];
         let hasLocked = false;
         let sideOptions = null;
+        let paired: [string, GfxModel[]][] = [];
 
         if (activated && surface) {
           elements = elementIds
@@ -326,7 +324,10 @@ export class AffineToolbarWidget extends WidgetComponent {
             e => e.flavour
           );
 
-          const paired = toPairs(grouped);
+          paired = toPairs(grouped).map(([flavour, items]) => [
+            flavour,
+            items.map(({ model }) => model),
+          ]);
 
           if (paired.length === 1) {
             flavour = paired[0][0];
@@ -350,6 +351,8 @@ export class AffineToolbarWidget extends WidgetComponent {
         batch(() => {
           flags.toggle(Flag.Surface, activated);
 
+          elementsMap$.value = new Map(paired);
+
           if (!activated || !flavour) return;
 
           this.setReferenceElementWithElements(gfx, elements);

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

@@ -42,7 +42,7 @@ export const sideMap = new Map([
   ['affine:surface:frame', { top: 28 }],
   // includes group element
   ['affine:surface:group', { top: 20 }],
-  // only one shape element
+  // has only one shape element
   ['affine:surface:shape', { top: 26, bottom: -26 }],
 ]);
 
@@ -196,6 +196,11 @@ export function renderToolbar(
     .flat()
     .map(key => toolbarRegistry.modules.get(key))
     .filter(module => !!module)
+    .filter(module =>
+      typeof module.config.when === 'function'
+        ? module.config.when(context)
+        : (module.config.when ?? true)
+    )
     .map<ToolbarActions>(module => module.config.actions)
     .flat();
 
@@ -220,7 +225,7 @@ export function renderToolbar(
     );
     // if (moreMenuItems.length) {
     // TODO(@fundon): edgeless case needs to be considered
-    const key = `${context.getCurrentModel()?.id ?? context.getCurrentElement()?.id}`;
+    const key = `${context.getCurrentModel()?.id}`;
 
     primaryActionGroup.push({
       id: 'more',