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

fix(core): should sync name after renaming in pdf embed view (#9398)

Browse Source 
https://github.com/user-attachments/assets/f6a3d7b8-9ae3-4d8f-833f-d7aca1e0fffa
This commit is contained in:
fundon
2024-12-30 09:56:02 +00:00
parent 580e3eb13c
commit 569e63377d
2 changed files with 85 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/core/src/components/attachment-viewer/pdf-viewer-embedded-inner.tsx
+6 -1
View File
@@ -67,6 +67,7 @@ export function PDFViewerEmbeddedInner({ model }: PDFViewerProps) {
useMemo(() => (pageEntity ? pageEntity.page.bitmap$ : null), [pageEntity])
);
const [name, setName] = useState(model.name);
const [cursor, setCursor] = useState(0);
const [isLoading, setIsLoading] = useState(true);
const [visibility, setVisibility] = useState(false);
@@ -107,6 +108,8 @@ export function PDFViewerEmbeddedInner({ model }: PDFViewerProps) {
};
}, [cursor, meta, peek]);
useEffect(() => model.name$.subscribe(val => setName(val)), [model]);
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
@@ -244,7 +247,9 @@ export function PDFViewerEmbeddedInner({ model }: PDFViewerProps) {
className={clsx([embeddedStyles.pdfFooterItem, { truncate: true }])}
>
<AttachmentIcon />
<span className={embeddedStyles.pdfTitle}>{model.name}</span>
<span className={clsx([embeddedStyles.pdfTitle, 'pdf-name'])}>
{name}
</span>
</div>
<div
className={clsx([
tests/affine-local/e2e/attachment-preview.spec.ts
+79 -17
View File
@@ -21,6 +21,26 @@ async function clickPeekViewControl(page: Page, n = 0) {
await page.waitForTimeout(500);
}
async function enablePDFEmbedView(page: Page) {
// Opens settings panel
await openEditorSetting(page);
await openExperimentalFeaturesPanel(page);
await confirmExperimentalPrompt(page);
const settingModal = page.locator('[data-testid=setting-modal-content]');
const item = settingModal.locator('div').getByText('PDF embed preview');
await item.waitFor({ state: 'attached' });
await expect(item).toBeVisible();
const button = item.locator('label');
const isChecked = await button.locator('input').isChecked();
if (!isChecked) {
await button.click();
}
// Closes settings panel
await page.keyboard.press('Escape');
}
async function insertAttachment(page: Page, filepath: string) {
await page.evaluate(() => {
// Force fallback to input[type=file] in tests
@@ -131,23 +151,7 @@ test('should preview PDF in embed view', async ({ page }) => {
await title.click();
await page.keyboard.type('PDF preview');
// Opens settings panel
await openEditorSetting(page);
await openExperimentalFeaturesPanel(page);
await confirmExperimentalPrompt(page);
const settingModal = page.locator('[data-testid=setting-modal-content]');
const item = settingModal.locator('div').getByText('PDF embed preview');
await item.waitFor({ state: 'attached' });
await expect(item).toBeVisible();
const button = item.locator('label');
const isChecked = await button.locator('input').isChecked();
if (!isChecked) {
await button.click();
}
// Closes settings panel
await page.keyboard.press('Escape');
await enablePDFEmbedView(page);
await clickNewPageButton(page);
await waitForEmptyEditor(page);
@@ -257,3 +261,61 @@ test('should preview PDF in embed view', async ({ page }) => {
expect(await pageCursor.textContent()).toBe('2');
expect(await pageCount.textContent()).toBe('3');
});
test('should sync name in pdf embed view', async ({ page }) => {
await openHomePage(page);
await waitForEditorLoad(page);
await enablePDFEmbedView(page);
await clickNewPageButton(page);
const title = getBlockSuiteEditorTitle(page);
await title.click();
await page.keyboard.press('Enter');
await insertAttachment(
page,
path.join(__dirname, '../../fixtures/lorem-ipsum.pdf')
);
const attachment = page.locator('affine-attachment');
await attachment.hover();
const attachmentToolbar = page.locator('.affine-attachment-toolbar');
await expect(attachmentToolbar).toBeVisible();
const attachmentTitle = attachment.locator(
'.affine-attachment-content-title-text'
);
await expect(attachmentTitle).toHaveText('lorem-ipsum.pdf');
// Renames
await attachmentToolbar.getByRole('button', { name: 'Rename' }).click();
const input = page
.locator('.affine-attachment-rename-input-wrapper')
.locator('input');
await input.fill('What is Lorem Ipsum');
await page.keyboard.press('Enter');
await expect(attachmentTitle).toHaveText('What is Lorem Ipsum.pdf');
await attachment.hover();
// Switches to embed view
await attachmentToolbar.getByRole('button', { name: 'Switch view' }).click();
await attachmentToolbar.getByRole('button', { name: 'Embed view' }).click();
await page.waitForTimeout(500);
const portal = attachment.locator('lit-react-portal');
const portalName = portal.locator('.pdf-name');
await expect(portal).toBeVisible();
await page.waitForTimeout(500);
await expect(portalName).toHaveText('What is Lorem Ipsum.pdf');
await attachment.hover();
// Renames
await attachmentToolbar.getByRole('button', { name: 'Rename' }).click();
await input.fill('lorem-ipsum');
await page.keyboard.press('Enter');
await expect(portalName).toHaveText('lorem-ipsum.pdf');
});