Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-09-22 03:33:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): improve pdf embed viewer UX (#11641)

Browse Source 
Closes: [BS-3101](https://linear.app/affine-design/issue/BS-3101/pdf-embed-模式的选中框选-和点开看详情有比较大的问题)

### What's Changed!

* Fixed disable pointer event in native pdf viewer by dragging
* Disable opening peek view with pdf viewer in readonly and sharing modes
This commit is contained in:
fundon
2025-04-15 08:51:02 +00:00
parent 0df584bd5e
commit 8ca675b2ec
8 changed files with 203 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/affine-local/e2e/attachment-preview.spec.ts
+67 -29
View File
@@ -1,4 +1,6 @@
import { Path, test } from '@affine-test/kit/playwright';
import { test } from '@affine-test/kit/playwright';
import { importAttachment } from '@affine-test/kit/utils/attachment';
import { locateToolbar } from '@affine-test/kit/utils/editor';
import { openHomePage } from '@affine-test/kit/utils/load-page';
import {
clickNewPageButton,
@@ -14,8 +16,6 @@ import {
import type { Page } from '@playwright/test';
import { expect } from '@playwright/test';
const fixturesDir = Path.dir(import.meta.url).join('../../fixtures');
async function clickPeekViewControl(page: Page, n = 0) {
await page.getByTestId('peek-view-control').nth(n).click();
await page.waitForTimeout(500);
@@ -41,22 +41,6 @@ async function enablePDFEmbedView(page: Page) {
await page.keyboard.press('Escape');
}
async function insertAttachment(page: Page, filepath: string) {
await page.evaluate(() => {
// Force fallback to input[type=file] in tests
// See https://github.com/microsoft/playwright/issues/8850
window.showOpenFilePicker = undefined;
});
const fileChooser = page.waitForEvent('filechooser');
// open slash menu
await page.keyboard.type('/attachment', { delay: 50 });
await page.keyboard.press('Enter');
await (await fileChooser).setFiles(filepath);
}
test('attachment preview should be shown', async ({ page }) => {
await openHomePage(page);
await waitForEditorLoad(page);
@@ -65,7 +49,7 @@ test('attachment preview should be shown', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await insertAttachment(page, fixturesDir.join('lorem-ipsum.pdf').value);
await importAttachment(page, 'lorem-ipsum.pdf');
await page.locator('affine-attachment').first().dblclick();
@@ -103,7 +87,7 @@ test('attachment preview can be expanded', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await insertAttachment(page, fixturesDir.join('lorem-ipsum.pdf').value);
await importAttachment(page, 'lorem-ipsum.pdf');
await page.locator('affine-attachment').first().dblclick();
@@ -154,17 +138,17 @@ test('should preview PDF in embed view', async ({ page }) => {
await page.keyboard.press('Enter');
await insertAttachment(page, fixturesDir.join('lorem-ipsum.pdf').value);
await importAttachment(page, 'lorem-ipsum.pdf');
const attachment = page.locator('affine-attachment');
await attachment.click();
const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
const toolbar = locateToolbar(page);
await expect(toolbar).toBeVisible();
// Switches to embed view
await toolbar.getByRole('button', { name: 'Switch view' }).click();
await toolbar.getByRole('button', { name: 'Embed view' }).click();
await toolbar.getByLabel('Switch view').click();
await toolbar.getByLabel('Embed view').click();
await page.waitForTimeout(500);
@@ -260,12 +244,12 @@ test('should sync name in pdf embed view', async ({ page }) => {
await title.click();
await page.keyboard.press('Enter');
await insertAttachment(page, fixturesDir.join('lorem-ipsum.pdf').value);
await importAttachment(page, 'lorem-ipsum.pdf');
const attachment = page.locator('affine-attachment');
await attachment.click();
const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
const toolbar = locateToolbar(page);
await expect(toolbar).toBeVisible();
const attachmentTitle = attachment.locator(
@@ -285,8 +269,8 @@ test('should sync name in pdf embed view', async ({ page }) => {
await attachment.click();
// Switches to embed view
await toolbar.getByRole('button', { name: 'Switch view' }).click();
await toolbar.getByRole('button', { name: 'Embed view' }).click();
await toolbar.getByLabel('Switch view').click();
await toolbar.getByLabel('Embed view').click();
await page.waitForTimeout(500);
@@ -305,3 +289,57 @@ test('should sync name in pdf embed view', async ({ page }) => {
await page.keyboard.press('Enter');
await expect(portalName).toHaveText('lorem-ipsum.pdf');
});
test('should enable pointer event in pdf viewer', async ({ page }) => {
await openHomePage(page);
await clickNewPageButton(page);
await waitForEmptyEditor(page);
const title = getBlockSuiteEditorTitle(page);
await title.click();
await page.keyboard.type('PDF preview');
await page.keyboard.press('Enter');
await importAttachment(page, 'lorem-ipsum.pdf');
const attachment = page.locator('affine-attachment');
await attachment.click();
const attachmentSelection = attachment.locator('affine-block-selection');
const toolbar = locateToolbar(page);
// Switches to embed view
await toolbar.getByLabel('Switch view').click();
await toolbar.getByLabel('Embed view').click();
await attachment.locator('iframe').waitFor({ state: 'visible' });
const rect = await attachment.boundingBox();
expect(rect).not.toBeNull();
const { x, y, width, height } = rect!;
const startPoint = [x - 10, y - 10];
const endPoint = [x + width / 2, y + height / 2];
await page.mouse.move(startPoint[0], startPoint[1]);
await page.mouse.down();
await page.mouse.move(endPoint[0], endPoint[1]);
await page.mouse.move(
endPoint[0] + width / 2 + 10,
endPoint[1] + height / 2 + 10
);
await expect(attachmentSelection).toBeVisible();
await page.mouse.move(startPoint[0], startPoint[1]);
await expect(attachmentSelection).toBeHidden();
await page.mouse.move(startPoint[0] - 50, startPoint[1] - 50);
await page.mouse.up();
await expect(attachmentSelection).toBeHidden();
});