Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 21:27:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): should show toolbar after mouse is released (#10698)

Browse Source
This commit is contained in:
fundon
2025-03-08 04:16:02 +00:00
parent 8aedef0a36
commit befb795935
5 changed files with 64 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
tests/affine-local/e2e/blocksuite/paragraph.spec.ts
View File

@@ -1,5 +1,5 @@
import { test } from '@affine-test/kit/playwright';
import { locateFormatBar } from '@affine-test/kit/utils/editor';
import { locateToolbar } from '@affine-test/kit/utils/editor';
import {
pressEnter,
pressShiftTab,
@@ -33,16 +33,16 @@ test('heading icon should be updated after change heading level', async ({
const paragraph = page.locator('affine-note affine-paragraph').nth(0);
await selectAllByKeyboard(page);
const formatBar = locateFormatBar(page);
await formatBar.getByLabel('Conversions').click();
await formatBar.getByLabel('Heading 1').click();
const toolbar = locateToolbar(page);
await toolbar.getByLabel('Conversions').click();
await toolbar.getByLabel('Heading 1').click();
await paragraph.hover();
await expect(page.getByTestId('heading-icon-1')).toBeVisible();
await selectAllByKeyboard(page);
await formatBar.getByLabel('Conversions').click();
await formatBar.getByLabel('Heading 2').click();
await toolbar.getByLabel('Conversions').click();
await toolbar.getByLabel('Heading 2').click();
await paragraph.hover();
await expect(page.getByTestId('heading-icon-1')).toBeHidden();

46
tests/affine-local/e2e/blocksuite/toolbar.spec.ts
View File

@@ -1,5 +1,6 @@
import { test } from '@affine-test/kit/playwright';
import { locateFormatBar } from '@affine-test/kit/utils/editor';
import { locateToolbar } from '@affine-test/kit/utils/editor';
import { selectAllByKeyboard } from '@affine-test/kit/utils/keyboard';
import { openHomePage } from '@affine-test/kit/utils/load-page';
import {
clickNewPageButton,
@@ -34,6 +35,33 @@ test.beforeEach(async ({ page }) => {
await waitForEmptyEditor(page);
});
test('should toggle toolbar when dragging page area', async ({ page }) => {
await page.keyboard.press('Enter');
await page.keyboard.type('Roman');
await selectAllByKeyboard(page);
const toolbar = locateToolbar(page);
await expect(toolbar).toBeVisible();
await expect(toolbar).toBeInViewport();
const paragraph = page.locator('affine-note affine-paragraph').nth(0);
const bounds = await paragraph.boundingBox();
expect(bounds).toBeTruthy();
const { x, y, width } = bounds!;
await page.mouse.move(x + width + 10, y - 10, { steps: 2 });
await page.mouse.down();
await page.mouse.move(x + width - 10, y + 10, { steps: 2 });
await expect(toolbar).toBeHidden();
await page.mouse.up();
await expect(toolbar).toBeVisible();
});
test.describe('Formatting', () => {
test('should change text color', async ({ page }) => {
await page.keyboard.press('Enter');
@@ -43,12 +71,12 @@ test.describe('Formatting', () => {
await page.keyboard.press('Shift+ArrowLeft');
await page.keyboard.press('Shift+ArrowLeft');
const formatBar = locateFormatBar(page);
const highlightButton = formatBar.locator('affine-highlight-duotone-icon');
const toolbar = locateToolbar(page);
const highlightButton = toolbar.locator('affine-highlight-duotone-icon');
await highlightButton.click();
const fgGreenButton = formatBar.locator('[data-testid="foreground-green"]');
const fgGreenButton = toolbar.locator('[data-testid="foreground-green"]');
await fgGreenButton.click();
const fgColor = await fgGreenButton
.locator('affine-text-duotone-icon')
@@ -73,12 +101,12 @@ test.describe('Formatting', () => {
await page.keyboard.press('Shift+ArrowLeft');
await page.keyboard.press('Shift+ArrowLeft');
const formatBar = locateFormatBar(page);
const highlightButton = formatBar.locator('affine-highlight-duotone-icon');
const toolbar = locateToolbar(page);
const highlightButton = toolbar.locator('affine-highlight-duotone-icon');
await highlightButton.click();
const fgGreenButton = formatBar.locator('[data-testid="foreground-green"]');
const fgGreenButton = toolbar.locator('[data-testid="foreground-green"]');
await fgGreenButton.click();
await page.waitForTimeout(200);
@@ -104,9 +132,7 @@ test.describe('Formatting', () => {
await highlightButton.click();
const yellow = 'var(--affine-text-highlight-yellow)';
const bgYellowButton = formatBar.locator(
'[data-testid="background-yellow"]'
);
const bgYellowButton = toolbar.locator('[data-testid="background-yellow"]');
await bgYellowButton.click();
const textSpan2 = paragraph

2
tests/kit/src/utils/editor.ts
View File

@@ -64,7 +64,7 @@ export async function focusDocTitle(page: Page, editorIndex = 0) {
}
// ================== Page ==================
export function locateFormatBar(page: Page, editorIndex = 0) {
export function locateToolbar(page: Page, editorIndex = 0) {
return locateEditorContainer(page, editorIndex).locator(
'affine-toolbar-widget editor-toolbar'
);