From 565d7b2b1e0c738dc7a94a1d52386f7ec21fdb00 Mon Sep 17 00:00:00 2001 From: fundon Date: Thu, 3 Apr 2025 11:13:09 +0000 Subject: [PATCH] fix(editor): should not show inner toolbar of surface-ref in edgeless (#11453) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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-的标题圆角) --- .../components/surface-ref-toolbar-title.ts | 8 +++-- .../block-surface-ref/src/surface-ref-spec.ts | 18 ++++------ .../src/services/toolbar-service/registry.ts | 8 +++-- .../widgets/widget-toolbar/src/toolbar.ts | 2 -- .../widgets/widget-toolbar/src/utils.ts | 26 +++++++++----- .../extensions/editor-config/toolbar/index.ts | 2 ++ .../e2e/blocksuite/toolbar.spec.ts | 36 +++++++++++++++++++ 7 files changed, 74 insertions(+), 26 deletions(-) diff --git a/blocksuite/affine/blocks/block-surface-ref/src/components/surface-ref-toolbar-title.ts b/blocksuite/affine/blocks/block-surface-ref/src/components/surface-ref-toolbar-title.ts index cfca3549c1..c7f5c01dde 100644 --- a/blocksuite/affine/blocks/block-surface-ref/src/components/surface-ref-toolbar-title.ts +++ b/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; - background: ${unsafeCSSVarV2('button/iconButtonSolid')}; + border-radius: 4px; + color: ${unsafeCSSVarV2('text/primary')}; + box-shadow: ${unsafeCSSVar('buttonShadow')}; + background: ${unsafeCSSVar('white')}; svg { color: ${unsafeCSSVarV2('icon/primary')}; diff --git a/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-spec.ts b/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-spec.ts index 637d5bf82e..d5568bb74b 100644 --- a/blocksuite/affine/blocks/block-surface-ref/src/surface-ref-spec.ts +++ b/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), - BlockViewExtension( - SurfaceRefBlockSchema.model.flavour, - literal`affine-surface-ref` - ), + FlavourExtension(flavour), + BlockViewExtension(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), - BlockViewExtension( - SurfaceRefBlockSchema.model.flavour, - literal`affine-edgeless-surface-ref` - ), + FlavourExtension(flavour), + BlockViewExtension(flavour, literal`affine-edgeless-surface-ref`), SurfaceRefSlashMenuConfigExtension, ]; diff --git a/blocksuite/affine/shared/src/services/toolbar-service/registry.ts b/blocksuite/affine/shared/src/services/toolbar-service/registry.ts index f1742c0d40..12b66551c1 100644 --- a/blocksuite/affine/shared/src/services/toolbar-service/registry.ts +++ b/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.modules.get(flavour)?.config.placement ?? + this.getModuleBy(`custom:${flavour}`)?.placement ?? + this.getModuleBy(flavour)?.placement ?? fallback ); } diff --git a/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts b/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts index 8c72fc00c5..dd8f0ba345 100644 --- a/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts +++ b/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'; }) ); diff --git a/blocksuite/affine/widgets/widget-toolbar/src/utils.ts b/blocksuite/affine/widgets/widget-toolbar/src/utils.ts index eb8d6e2a4b..cfff88b6c7 100644 --- a/blocksuite/affine/widgets/widget-toolbar/src/utils.ts +++ b/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 = `${ - elements.reference.getBoundingClientRect().width - }px`; + const { width } = elements.reference.getBoundingClientRect(); + elements.floating.style.width = `${width}px`; }, }), ], @@ -126,12 +125,14 @@ export function autoUpdatePosition( toolbar.style.transform = `translate3d(${x}px, ${y}px, 0)`; - if (toolbar.dataset.open) { - if (middlewareData.hide?.referenceHidden) { - delete toolbar.dataset.open; + if (middlewareData.hide) { + if (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( 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 index 8ff44020ea..52cb1f7e7a 100644 --- a/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts +++ b/packages/frontend/core/src/blocksuite/extensions/editor-config/toolbar/index.ts @@ -698,6 +698,8 @@ function createSurfaceRefToolbarConfig(baseUrl?: string): ToolbarModuleConfig { ], }, ], + + when: ctx => ctx.isPageMode, }; } diff --git a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts b/tests/affine-local/e2e/blocksuite/toolbar.spec.ts index 8156f535ab..83455305a7 100644 --- a/tests/affine-local/e2e/blocksuite/toolbar.spec.ts +++ b/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(); +});