Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-25 18:26:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): image toolbar config extension (#11329)

Browse Source 
Closes: [BS-2378](https://linear.app/affine-design/issue/BS-2378/image-toolbar-迁移)
This commit is contained in:
fundon
2025-04-01 10:04:28 +00:00
parent 032244ae61
commit 7af5e53838
26 changed files with 267 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
tests/blocksuite/e2e/image/image.spec.ts
View File

@@ -9,6 +9,7 @@ import {
dragEmbedResizeByTopLeft,
dragEmbedResizeByTopRight,
enterPlaygroundRoom,
getEditorHostLocator,
initImageState,
moveToImage,
pasteByKeyboard,
@@ -21,7 +22,6 @@ import {
waitNextFrame,
} from '../utils/actions/index.js';
import {
assertImageOption,
assertImageSize,
assertRichDragButton,
assertRichImage,
@@ -31,9 +31,8 @@ import {
import { test } from '../utils/playwright.js';
async function focusCaption(page: Page) {
await page.click(
'.affine-image-toolbar-container .image-toolbar-button.caption'
);
const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
await toolbar.getByLabel('Caption').click();
}
test('can drag resize image by left menu', async ({ page }) => {
@@ -115,11 +114,12 @@ test('enter shortcut on focusing embed block and its caption', async ({
await initImageState(page);
await assertRichImage(page, 1);
await getEditorHostLocator(page).focus();
await moveToImage(page);
await assertImageOption(page);
await focusCaption(page);
const caption = page.locator('affine-image block-caption-editor textarea');
await focusCaption(page);
await type(page, '123');
test.info().annotations.push({
@@ -139,11 +139,12 @@ test('should support the enter key of image caption', async ({ page }) => {
await initImageState(page);
await assertRichImage(page, 1);
await getEditorHostLocator(page).focus();
await moveToImage(page);
await assertImageOption(page);
await focusCaption(page);
const caption = page.locator('affine-image block-caption-editor textarea');
await focusCaption(page);
await type(page, 'abc123');
await pressArrowLeft(page, 3);
await pressEnter(page);

57
tests/blocksuite/e2e/image/menu.spec.ts
View File

@@ -1,70 +1,13 @@
import { expect } from '@playwright/test';
import {
activeEmbed,
dragBetweenCoords,
enterPlaygroundRoom,
initImageState,
insertThreeLevelLists,
pressEnter,
scrollToTop,
} from '../utils/actions/index.js';
import { assertRichImage } from '../utils/asserts.js';
import { test } from '../utils/playwright.js';
// FIXME(@fundon): This behavior is not meeting the design spec
test.skip('popup menu should follow position of image when scrolling', async ({
page,
}) => {
await enterPlaygroundRoom(page);
await initImageState(page);
await activeEmbed(page);
await pressEnter(page);
await insertThreeLevelLists(page, 0);
await pressEnter(page);
await insertThreeLevelLists(page, 3);
await pressEnter(page);
await insertThreeLevelLists(page, 6);
await pressEnter(page);
await insertThreeLevelLists(page, 9);
await pressEnter(page);
await insertThreeLevelLists(page, 12);
await scrollToTop(page);
const rect = await page.locator('.affine-image-container img').boundingBox();
if (!rect) throw new Error('image not found');
await page.mouse.move(rect.x + rect.width / 2, rect.y + rect.height / 2);
await page.waitForTimeout(150);
const menu = page.locator('.affine-image-toolbar-container');
await expect(menu).toBeVisible();
await page.evaluate(
([rect]) => {
const viewport = document.querySelector('.affine-page-viewport');
if (!viewport) {
throw new Error();
}
// const distance = viewport.scrollHeight - viewport.clientHeight;
viewport.scrollTo(0, (rect.height + rect.y) / 2);
},
[rect]
);
await page.waitForTimeout(150);
const image = page.locator('.affine-image-container img');
const imageRect = await image.boundingBox();
const menuRect = await menu.boundingBox();
if (!imageRect) throw new Error('image not found');
if (!menuRect) throw new Error('menu not found');
expect(imageRect.y).toBeCloseTo((rect.y - rect.height) / 2, 172);
expect(menuRect.y).toBeCloseTo(65, -0.325);
});
test('select image should not show format bar', async ({ page }) => {
await enterPlaygroundRoom(page);
await initImageState(page);

10
tests/blocksuite/e2e/selection/block.spec.ts
View File

@@ -1132,14 +1132,14 @@ test('should blur rich-text first on starting block selection', async ({
await expect(page.locator('*:focus')).toHaveCount(0);
});
test('should not show option menu of image on block selection', async ({
page,
}) => {
test('should show toolbar of image on block selection', async ({ page }) => {
await enterPlaygroundRoom(page);
await initImageState(page);
await activeEmbed(page);
await expect(page.locator('.affine-image-toolbar-container')).toHaveCount(1);
const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
await expect(toolbar).toBeHidden();
await pressEnter(page);
@@ -1162,7 +1162,7 @@ test('should not show option menu of image on block selection', async ({
await page.waitForTimeout(50);
await expect(page.locator('.affine-image-toolbar-container')).toHaveCount(0);
await expect(toolbar).toBeVisible();
await expect(
page.locator('affine-block-selection').locator('visible=true')
).toHaveCount(1);

8
tests/blocksuite/e2e/selection/native.spec.ts
View File

@@ -1338,14 +1338,16 @@ test('should keep native range selection when scrolling forward with the scroll
assertClipItems(page, 'text/plain', '123456789');
});
test('should not show option menu of image on native selection', async ({
test('should not show toolbar of image on native selection', async ({
page,
}) => {
await enterPlaygroundRoom(page);
await initImageState(page);
await activeEmbed(page);
await expect(page.locator('.affine-image-toolbar-container')).toHaveCount(1);
const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
await expect(toolbar).toBeVisible();
await pressEscape(page);
await pressEnter(page);
@@ -1381,7 +1383,7 @@ test('should not show option menu of image on native selection', async ({
await copyByKeyboard(page);
assertClipItems(page, 'text/plain', '123');
await expect(page.locator('.affine-image-toolbar-container')).toHaveCount(0);
await expect(toolbar).toBeHidden();
});
test('should select with shift-click', async ({ page }) => {

37
tests/blocksuite/e2e/utils/actions/drag.ts
View File

@@ -1,6 +1,5 @@
import type { Page } from '@playwright/test';
import { assertImageOption } from '../asserts.js';
import { getIndexCoordinate, waitNextFrame } from './misc.js';
export async function dragBetweenCoords(
@@ -201,42 +200,22 @@ export async function dragBlockToPoint(
}
export async function moveToImage(page: Page) {
const { x, y } = await page.evaluate(() => {
const bottomRightButton = document.querySelector(
'affine-image img'
) as HTMLElement;
const imageClient = bottomRightButton.getBoundingClientRect();
const y = imageClient.top;
return {
x: imageClient.left + 30,
y: y + 30,
};
});
await page.mouse.move(x, y);
await page.locator('affine-image').hover({ timeout: 500 });
}
export async function popImageMoreMenu(page: Page) {
await moveToImage(page);
await assertImageOption(page);
const moreButton = page.locator('.image-toolbar-button.more');
await moreButton.click();
const menu = page.locator('.image-more-popup-menu');
const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
const menu = toolbar.getByLabel('More menu');
await menu.click();
const turnIntoCardButton = page.locator('editor-menu-action', {
hasText: 'Turn into card view',
});
const turnIntoCardButton = menu.getByLabel('Turn into card view');
const copyButton = page.locator('editor-menu-action', {
hasText: 'Copy',
});
const copyButton = menu.getByLabel('Copy');
const duplicateButton = page.locator('editor-menu-action', {
hasText: 'Duplicate',
});
const duplicateButton = page.getByLabel('Duplicate');
const deleteButton = page.locator('editor-menu-action', {
hasText: 'Delete',
});
const deleteButton = page.getByLabel('Delete');
return {
menu,

7
tests/blocksuite/e2e/utils/asserts.ts
View File

@@ -217,13 +217,6 @@ export async function assertImageSize(
});
}
export async function assertImageOption(page: Page) {
// const actual = await page.locator('.embed-editing-state').count();
// expect(actual).toEqual(1);
const locator = page.locator('.affine-image-toolbar-container');
await expect(locator).toBeVisible();
}
export async function assertDocTitleFocus(page: Page) {
const locator = page.locator('doc-title .inline-editor').nth(0);
await expect(locator).toBeFocused();