fix(editor): should not show inner toolbar of surface-ref in edgeless (#11453)

Closes: [BS-3015](https://linear.app/affine-design/issue/BS-3015/toolbar-有时会出现空状态且被显示) [BS-3023](https://linear.app/affine-design/issue/BS-3023/surface-ref-inner-toolbar-的标题圆角)

blocksuite/affine/blocks/block-surface-ref/src/components/surface-ref-toolbar-title.ts

@@ -4,7 +4,7 @@ import {
   MindmapElementModel,
   ShapeElementModel,
 } from '@blocksuite/affine-model';
-import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { unsafeCSSVar, unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
 import {
   EdgelessIcon,
   FrameIcon,
@@ -24,8 +24,10 @@ export class SurfaceRefToolbarTitle extends ShadowlessElement {
       margin-right: auto;
       align-items: center;
       gap: 4px;
-      border-radius: 2px;
+      border-radius: 4px;
-      background: ${unsafeCSSVarV2('button/iconButtonSolid')};
+      color: ${unsafeCSSVarV2('text/primary')};
+      box-shadow: ${unsafeCSSVar('buttonShadow')};
+      background: ${unsafeCSSVar('white')};
 
       svg {
         color: ${unsafeCSSVarV2('icon/primary')};

blocksuite/affine/blocks/block-surface-ref/src/surface-ref-spec.ts

@@ -11,24 +11,20 @@ import { literal } from 'lit/static-html.js';
 import { SurfaceRefSlashMenuConfigExtension } from './configs/slash-menu';
 import { surfaceRefToolbarModuleConfig } from './configs/toolbar';
 
+const flavour = SurfaceRefBlockSchema.model.flavour;
+
 export const PageSurfaceRefBlockSpec: ExtensionType[] = [
-  FlavourExtension(SurfaceRefBlockSchema.model.flavour),
+  FlavourExtension(flavour),
-  BlockViewExtension(
+  BlockViewExtension(flavour, literal`affine-surface-ref`),
-    SurfaceRefBlockSchema.model.flavour,
-    literal`affine-surface-ref`
-  ),
   ToolbarModuleExtension({
-    id: BlockFlavourIdentifier(SurfaceRefBlockSchema.model.flavour),
+    id: BlockFlavourIdentifier(flavour),
     config: surfaceRefToolbarModuleConfig,
   }),
   SurfaceRefSlashMenuConfigExtension,
 ];
 
 export const EdgelessSurfaceRefBlockSpec: ExtensionType[] = [
-  FlavourExtension(SurfaceRefBlockSchema.model.flavour),
+  FlavourExtension(flavour),
-  BlockViewExtension(
+  BlockViewExtension(flavour, literal`affine-edgeless-surface-ref`),
-    SurfaceRefBlockSchema.model.flavour,
-    literal`affine-edgeless-surface-ref`
-  ),
   SurfaceRefSlashMenuConfigExtension,
 ];

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

@@ -46,10 +46,14 @@ export class ToolbarRegistryExtension extends Extension {
     return this.std.provider.getAll(ToolbarModuleIdentifier);
   }
 
+  getModuleBy(flavour: string) {
+    return this.modules.get(flavour)?.config ?? null;
+  }
+
   getModulePlacement(flavour: string, fallback: ToolbarPlacement = 'top') {
     return (
-      this.modules.get(`custom:${flavour}`)?.config.placement ??
+      this.getModuleBy(`custom:${flavour}`)?.placement ??
-      this.modules.get(flavour)?.config.placement ??
+      this.getModuleBy(flavour)?.placement ??
       fallback
     );
   }

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

@@ -641,8 +641,6 @@ export class AffineToolbarWidget extends WidgetComponent {
         // 4. `Flag.Hovering`: inline links in note/database/table
         // 5. `Flag.Surface`: elements in edgeless
         renderToolbar(toolbar, context, flavour);
-        if (toolbar.dataset.open) return;
-        toolbar.dataset.open = 'true';
       })
     );
 

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

@@ -70,9 +70,8 @@ export function autoUpdatePosition(
           offset(({ rects }) => -rects.floating.height),
           size({
             apply: ({ elements }) => {
-              elements.floating.style.width = `${
+              const { width } = elements.reference.getBoundingClientRect();
-                elements.reference.getBoundingClientRect().width
+              elements.floating.style.width = `${width}px`;
-              }px`;
             },
           }),
         ],
@@ -126,12 +125,14 @@ export function autoUpdatePosition(
 
     toolbar.style.transform = `translate3d(${x}px, ${y}px, 0)`;
 
-    if (toolbar.dataset.open) {
+    if (middlewareData.hide) {
-      if (middlewareData.hide?.referenceHidden) {
+      if (toolbar.dataset.open) {
-        delete toolbar.dataset.open;
+        if (middlewareData.hide.referenceHidden) {
+          delete toolbar.dataset.open;
+        }
+      } else {
+        toolbar.dataset.open = 'true';
       }
-    } else {
-      toolbar.dataset.open = 'true';
     }
   };
 
@@ -239,6 +240,12 @@ export function renderToolbar(
     a => a.placement === ActionPlacement.More
   );
 
+  // Resets
+  if (primaryActionGroup.length === 0) {
+    context.reset();
+    return;
+  }
+
   const innerToolbar = context.placement$.value === 'inner';
 
   if (moreActionGroup.length) {
@@ -289,6 +296,9 @@ export function renderToolbar(
     ),
     toolbar
   );
+
+  if (toolbar.dataset.open) return;
+  toolbar.dataset.open = 'true';
 }
 
 function renderActions(

packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts

@@ -698,6 +698,8 @@ function createSurfaceRefToolbarConfig(baseUrl?: string): ToolbarModuleConfig {
         ],
       },
     ],
+
+    when: ctx => ctx.isPageMode,
   };
 }
 

tests/affine-local/e2e/blocksuite/toolbar.spec.ts

@@ -196,3 +196,39 @@ test('should not show toolbar when releasing spacebar and elements have been del
 
   await expect(toolbar).toBeHidden();
 });
+
+test('should not show inner toolbar of surface-ref in note under edgeless', async ({
+  page,
+}) => {
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('/frame');
+  await page.keyboard.press('Enter');
+
+  const toolbar = locateToolbar(page);
+
+  const surfaceRef = page.locator('affine-surface-ref');
+  await surfaceRef.hover();
+
+  await expect(toolbar).toBeVisible();
+
+  await clickEdgelessModeButton(page);
+
+  const note = page.locator('affine-edgeless-note');
+  await note.click();
+  await note.click();
+
+  const edgelessSurfaceRef = note.locator('affine-edgeless-surface-ref');
+  await edgelessSurfaceRef.hover();
+
+  await expect(toolbar).toBeHidden();
+
+  const dragHandler = page.locator('.affine-drag-handle-grabber');
+  await dragHandler.hover();
+  await dragHandler.click();
+
+  await expect(
+    edgelessSurfaceRef.locator('.affine-edgeless-surface-ref-container')
+  ).toHaveClass(/focused$/);
+
+  await expect(toolbar).toBeHidden();
+});