Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00: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

59
tests/affine-cloud/e2e/share-page.spec.ts
View File

@@ -1,4 +1,5 @@
import { skipOnboarding, test } from '@affine-test/kit/playwright';
import { importAttachment } from '@affine-test/kit/utils/attachment';
import {
createRandomUser,
enableCloudWorkspaceFromShareButton,
@@ -8,6 +9,7 @@ import {
import {
clickEdgelessModeButton,
getParagraphIds,
locateToolbar,
} from '@affine-test/kit/utils/editor';
import { importImage } from '@affine-test/kit/utils/image';
import { copyByKeyboard } from '@affine-test/kit/utils/keyboard';
@@ -455,3 +457,60 @@ test('share page should support copying content', async ({ page, browser }) => {
expect(copiedText).toContain('Hello World');
}
});
test('should disable opening peek view with pdf viewer in readonly and sharing modes', async ({
page,
browser,
}) => {
await page.reload();
await waitForEditorLoad(page);
await createLocalWorkspace(
{
name: 'test',
},
page
);
await enableCloudWorkspaceFromShareButton(page);
const title = getBlockSuiteEditorTitle(page);
await title.click();
await page.keyboard.press('Enter');
await importAttachment(page, 'lorem-ipsum.pdf');
const toolbar = locateToolbar(page);
const switchViewButton = toolbar.getByLabel('Switch view');
const embedViewButton = toolbar.getByLabel('Embed view');
const attachment = page.locator('affine-attachment');
await attachment.click();
await switchViewButton.click();
await embedViewButton.click();
await expect(attachment.locator('iframe')).toBeVisible();
// enable share page and copy page link
await enableShare(page);
await page.getByTestId('share-menu-copy-link-button').click();
await page.getByTestId('share-link-menu-copy-page').click();
// check share page is accessible
{
const context = await browser.newContext();
await skipOnboarding(context);
const url: string = await page.evaluate(() =>
navigator.clipboard.readText()
);
const page2 = await context.newPage();
await page2.goto(url);
await waitForEditorLoad(page2);
const attachment = page2.locator('affine-attachment');
await expect(attachment.locator('iframe')).toBeVisible();
await attachment.dblclick();
const pdfViewer = page2.getByTestId('pdf-viewer');
await expect(pdfViewer).not.toBeVisible();
}
});

96
tests/affine-local/e2e/attachment-preview.spec.ts
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();
});

21
tests/kit/src/utils/attachment.ts Normal file
View File

@@ -0,0 +1,21 @@
import type { Page } from '@playwright/test';
import { Path } from '../playwright';
const fixturesDir = Path.dir(import.meta.url).join('../../../fixtures');
export async function importAttachment(page: Page, file: 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(fixturesDir.join(file).value);
}