From 03dd073cb4b8ec5079469a5502e340a497679114 Mon Sep 17 00:00:00 2001 From: fundon Date: Thu, 3 Apr 2025 02:06:14 +0000 Subject: [PATCH] fix(editor): add recent open doc with mode button (#11419) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes: [BS-3013](https://linear.app/affine-design/issue/BS-3013/open-doc-分开两个按钮：一个快捷按钮和一个菜单) Split into two buttons: `recent open doc with mode button` and `open doc with dropdown menu`. --- .../open-doc-dropdown-menu/dropdown-menu.ts | 44 +++++++++++++------ .../extensions/editor-config/toolbar/index.ts | 14 +++--- .../blocksuite/outline/outline-viewer.spec.ts | 2 +- tests/affine-local/e2e/links.spec.ts | 29 +++++++----- tests/affine-local/e2e/peek-view.spec.ts | 2 +- 5 files changed, 58 insertions(+), 33 deletions(-) diff --git a/blocksuite/affine/components/src/open-doc-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/open-doc-dropdown-menu/dropdown-menu.ts index 7531c6269e..8e78114a1c 100644 --- a/blocksuite/affine/components/src/open-doc-dropdown-menu/dropdown-menu.ts +++ b/blocksuite/affine/components/src/open-doc-dropdown-menu/dropdown-menu.ts @@ -6,7 +6,7 @@ import { import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit'; import { PropTypes, requiredProperties } from '@blocksuite/std'; -import type { ReadonlySignal } from '@preact/signals-core'; +import { computed, type ReadonlySignal } from '@preact/signals-core'; import { css, html, LitElement } from 'lit'; import { property } from 'lit/decorators.js'; import { ifDefined } from 'lit-html/directives/if-defined.js'; @@ -24,6 +24,17 @@ export class OpenDocDropdownMenu extends SignalWatcher( WithDisposable(LitElement) ) { static override styles = css` + :host { + display: flex; + gap: unset !important; + } + + editor-icon-button { + .label { + font-weight: 400; + } + } + div[data-orientation] { width: 264px; gap: 4px; @@ -59,31 +70,36 @@ export class OpenDocDropdownMenu extends SignalWatcher( @property({ attribute: false }) accessor updateOpenDocMode!: (mode: OpenDocMode) => void; + currentAction$ = computed(() => { + const currentOpenDocMode = this.openDocMode$.value; + return ( + this.actions.find(a => a.mode === currentOpenDocMode) ?? this.actions[0] + ); + }); + override render() { const { actions, context, - openDocMode$: { value: openDocMode }, updateOpenDocMode, + currentAction$: { value: currentAction }, } = this; - const currentAction = - actions.find(a => a.mode === openDocMode) ?? actions[0]; return html` + currentAction.run?.(context)} + > + ${currentAction.icon} + Open + - ${currentAction.icon} - Open ${EditorChevronDown} + + ${EditorChevronDown} `} > 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 c5eec6bc4f..8ff44020ea 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 @@ -716,18 +716,20 @@ function renderOpenDocMenu( })); if (!actions.length) return null; + const openDocMode = computed( + () => settings.settingSignal.value.openDocMode ?? 'open-in-active-view' + ); + const updateOpenDocMode = (mode: OpenDocMode) => + settings.openDocMode.set(mode); + return html`${keyed( target, html` - settings.settingSignal.value.openDocMode ?? 'open-in-active-view' - )} - .updateOpenDocMode=${(mode: OpenDocMode) => - settings.openDocMode.set(mode)} + .openDocMode$=${openDocMode} + .updateOpenDocMode=${updateOpenDocMode} > ` diff --git a/tests/affine-local/e2e/blocksuite/outline/outline-viewer.spec.ts b/tests/affine-local/e2e/blocksuite/outline/outline-viewer.spec.ts index 328c8725c4..77710dc4e2 100644 --- a/tests/affine-local/e2e/blocksuite/outline/outline-viewer.spec.ts +++ b/tests/affine-local/e2e/blocksuite/outline/outline-viewer.spec.ts @@ -190,7 +190,7 @@ test('outline viewer should be useable in doc peek preview', async ({ const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); await expect(toolbar).toBeVisible(); - await toolbar.getByLabel(/^Open doc$/).click(); + await toolbar.getByLabel(/^Open doc with$/).click(); await toolbar .getByLabel('Open doc menu') .getByLabel('Open in center peek') diff --git a/tests/affine-local/e2e/links.spec.ts b/tests/affine-local/e2e/links.spec.ts index 94403020f8..6483dc7101 100644 --- a/tests/affine-local/e2e/links.spec.ts +++ b/tests/affine-local/e2e/links.spec.ts @@ -1054,11 +1054,18 @@ test('should save open doc mode of internal links', async ({ page }) => { const inlineLink = page.locator('affine-reference'); await inlineLink.hover(); - const openDocBtn = toolbar.getByLabel(/^Open doc$/); - await expect(openDocBtn).toHaveAttribute( - 'data-open-doc-mode', + const recentOpenModeBtn = toolbar.locator( + 'editor-icon-button:has-text("Open")' + ); + await expect(recentOpenModeBtn).toHaveAttribute( + 'aria-label', 'Open this doc' ); + await expect( + recentOpenModeBtn.locator('span.label:has-text("Open")') + ).toBeVisible(); + + const openDocBtn = toolbar.getByLabel(/^Open doc with$/); await openDocBtn.click(); const openDocMenu = toolbar.getByLabel('Open doc menu'); @@ -1081,8 +1088,8 @@ test('should save open doc mode of internal links', async ({ page }) => { await inlineLink.hover(); await expect(toolbar).toBeVisible(); - await expect(openDocBtn).toHaveAttribute( - 'data-open-doc-mode', + await expect(recentOpenModeBtn).toHaveAttribute( + 'aria-label', 'Open in center peek' ); @@ -1090,8 +1097,8 @@ test('should save open doc mode of internal links', async ({ page }) => { await cardViewBtn.click(); await expect(toolbar).toBeVisible(); - await expect(openDocBtn).toHaveAttribute( - 'data-open-doc-mode', + await expect(recentOpenModeBtn).toHaveAttribute( + 'aria-label', 'Open in center peek' ); @@ -1099,8 +1106,8 @@ test('should save open doc mode of internal links', async ({ page }) => { await embedViewBtn.click(); await expect(toolbar).toBeVisible(); - await expect(openDocBtn).toHaveAttribute( - 'data-open-doc-mode', + await expect(recentOpenModeBtn).toHaveAttribute( + 'aria-label', 'Open in center peek' ); @@ -1112,8 +1119,8 @@ test('should save open doc mode of internal links', async ({ page }) => { await page.waitForTimeout(250); await expect(toolbar).toBeVisible(); - await expect(openDocBtn).toHaveAttribute( - 'data-open-doc-mode', + await expect(recentOpenModeBtn).toHaveAttribute( + 'aria-label', 'Open in center peek' ); }); diff --git a/tests/affine-local/e2e/peek-view.spec.ts b/tests/affine-local/e2e/peek-view.spec.ts index 4124a5f3a0..440ddbf26e 100644 --- a/tests/affine-local/e2e/peek-view.spec.ts +++ b/tests/affine-local/e2e/peek-view.spec.ts @@ -28,7 +28,7 @@ test('can open peek view via link popover', async ({ page }) => { const toolbar = page.locator('affine-toolbar-widget editor-toolbar'); await expect(toolbar).toBeVisible(); - await toolbar.getByLabel(/^Open doc$/).click(); + await toolbar.getByLabel(/^Open doc with$/).click(); await toolbar .getByLabel('Open doc menu') .getByLabel('Open in center peek')