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);