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

fix(component): lit portal not re-rendering in inline links case (#9321)

Browse Source 
* uses `portal.key` in templates
* updates `portal.id`  for use in queries
This commit is contained in:
fundon
2024-12-26 13:11:31 +00:00
committed by Fangdun Tsai
parent 835e7c434e
commit 6fcdd015aa
7 changed files with 177 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/block-attachment/src/components/options.ts
+1
View File
@@ -98,6 +98,7 @@ export function attachmentViewToggleMenu({
button => button.type,
({ type, label, action, disabled }) => html`
<editor-menu-action
aria-label=${label}
data-testid=${`link-to-${type}`}
?data-selected=${type === viewType}
?disabled=${disabled}
packages/frontend/component/src/lit-react/lit-portal/index.ts
+1 -1
View File
@@ -2,4 +2,4 @@ export {
type ElementOrFactory,
useLitPortal,
useLitPortalFactory,
} from './lite-portal';
} from './lit-portal';
packages/frontend/component/src/lit-react/lit-portal/lite-portal.tsx → packages/frontend/component/src/lit-react/lit-portal/lit-portal.tsx
+14 -12
View File
@@ -13,10 +13,9 @@ type PortalEvent = {
type PortalListener = (event: PortalEvent) => void;
export function createLitPortalAnchor(callback: (event: PortalEvent) => void) {
const id = nanoid();
return html`<lit-react-portal
.notify=${callback}
portalId=${id}
portalId=${nanoid()}
></lit-react-portal>`;
}
@@ -119,24 +118,27 @@ export const useLitPortalFactory = () => {
}
const prevId = event.previousPortalId;
// Ignore first `willUpdate`
if (!prevId) {
return;
}
// No re-rendering allowed
// Used in `pdf embed view` scenario
if (!rerendering) {
// Ignores first `willUpdate`
if (!prevId) {
return;
}
setPortals(portals => {
const portal = portals.find(p => p.id === prevId);
if (!portal) return portals;
if (!portal) return [...portals];
// Updates `ID`
// Used for portal queries in `disconnectedCallback`
portal.id = id;
portal.portal.key = id;
portal.portal.children = element;
// Re-rendering
// true: `inline link`
// false: `pdf embed view`
if (rerendering) {
portal.portal = ReactDOM.createPortal(element, target, id);
}
return [...portals];
});
});
packages/frontend/core/src/components/attachment-viewer/pdf-viewer-embedded-inner.tsx
+9 -2
View File
@@ -219,6 +219,7 @@ export function PDFViewerEmbeddedInner({ model }: PDFViewerProps) {
icon={<ArrowUpSmallIcon />}
className={embeddedStyles.pdfControlButton}
onDoubleClick={stopPropagation}
aria-label="Prev"
{...navigator.prev}
/>
<IconButton
@@ -226,6 +227,7 @@ export function PDFViewerEmbeddedInner({ model }: PDFViewerProps) {
icon={<ArrowDownSmallIcon />}
className={embeddedStyles.pdfControlButton}
onDoubleClick={stopPropagation}
aria-label="Next"
{...navigator.next}
/>
<IconButton
@@ -250,8 +252,13 @@ export function PDFViewerEmbeddedInner({ model }: PDFViewerProps) {
embeddedStyles.pdfPageCount,
])}
>
<span>{meta.pageCount > 0 ? cursor + 1 : '-'}</span>/
<span>{meta.pageCount > 0 ? meta.pageCount : '-'}</span>
<span className="page-cursor">
{meta.pageCount > 0 ? cursor + 1 : '-'}
</span>
/
<span className="page-count">
{meta.pageCount > 0 ? meta.pageCount : '-'}
</span>
</div>
</footer>
</div>
packages/frontend/core/src/components/blocksuite/block-suite-editor/bi-directional-link-panel.tsx
+1 -1
View File
@@ -357,7 +357,7 @@ export const BiDirectionalLinkPanel = () => {
{
<>
{portals.map(p => (
<Fragment key={p.id}>{p.portal}</Fragment>
<Fragment key={p.portal.key}>{p.portal}</Fragment>
))}
</>
}
packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
+1 -1
View File
@@ -194,7 +194,7 @@ const usePatchSpecs = (shared: boolean, mode: DocMode) => {
() => (
<>
{portals.map(p => (
<Fragment key={p.id}>{p.portal}</Fragment>
<Fragment key={p.portal.key}>{p.portal}</Fragment>
))}
</>
),
tests/affine-local/e2e/attachment-preview.spec.ts
+150 -9
View File
@@ -1,4 +1,3 @@
/* eslint-disable unicorn/prefer-dom-node-dataset */
import path from 'node:path';
import { test } from '@affine-test/kit/playwright';
@@ -7,7 +6,13 @@ import {
clickNewPageButton,
getBlockSuiteEditorTitle,
waitForEditorLoad,
waitForEmptyEditor,
} from '@affine-test/kit/utils/page-logic';
import {
confirmExperimentalPrompt,
openEditorSetting,
openExperimentalFeaturesPanel,
} from '@affine-test/kit/utils/setting';
import type { Page } from '@playwright/test';
import { expect } from '@playwright/test';
@@ -53,10 +58,10 @@ test('attachment preview should be shown', async ({ page }) => {
await page.waitForTimeout(500);
const pageCount = attachmentViewer.locator('.page-cursor');
expect(await pageCount.textContent()).toBe('1');
const pageTotal = attachmentViewer.locator('.page-count');
expect(await pageTotal.textContent()).toBe('3');
const pageCursor = attachmentViewer.locator('.page-cursor');
expect(await pageCursor.textContent()).toBe('1');
const pageCount = attachmentViewer.locator('.page-count');
expect(await pageCount.textContent()).toBe('3');
const thumbnails = attachmentViewer.locator('.thumbnails');
await thumbnails.locator('button').click();
@@ -99,10 +104,10 @@ test('attachment preview can be expanded', async ({ page }) => {
await page.waitForTimeout(500);
const pageCount = attachmentViewer.locator('.page-cursor');
expect(await pageCount.textContent()).toBe('1');
const pageTotal = attachmentViewer.locator('.page-count');
expect(await pageTotal.textContent()).toBe('3');
const pageCursor = attachmentViewer.locator('.page-cursor');
expect(await pageCursor.textContent()).toBe('1');
const pageCount = attachmentViewer.locator('.page-count');
expect(await pageCount.textContent()).toBe('3');
const thumbnails = attachmentViewer.locator('.thumbnails');
await thumbnails.locator('button').click();
@@ -116,3 +121,139 @@ test('attachment preview can be expanded', async ({ page }) => {
.count()
).toBe(3);
});
test('should preview PDF in embed view', async ({ page }) => {
await openHomePage(page);
await clickNewPageButton(page);
await waitForEmptyEditor(page);
const title = getBlockSuiteEditorTitle(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 clickNewPageButton(page);
await waitForEmptyEditor(page);
await title.click();
await page.keyboard.type('PDF page');
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();
// 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');
await expect(portal).toBeVisible();
await attachment.click();
await page.waitForTimeout(500);
const pageCursor = portal.locator('.page-cursor');
expect(await pageCursor.textContent()).toBe('1');
const pageCount = portal.locator('.page-count');
expect(await pageCount.textContent()).toBe('3');
const prevButton = portal.getByRole('button', { name: 'Prev' });
const nextButton = portal.getByRole('button', { name: 'Next' });
await nextButton.click();
expect(await pageCursor.textContent()).toBe('2');
await nextButton.click();
expect(await pageCursor.textContent()).toBe('3');
await prevButton.click();
expect(await pageCursor.textContent()).toBe('2');
// Title alias
{
await page.keyboard.press('Enter');
await page.keyboard.press('@');
const doc0 = page.locator('.linked-doc-popover').getByText('PDF preview');
await doc0.click();
await page.keyboard.press('@');
const doc1 = page.locator('.linked-doc-popover').getByText('PDF page');
await doc1.click();
const inlineLink = page.locator('affine-reference').nth(0);
const inlineToolbar = page.locator('reference-popup');
const inlineTitle = inlineLink.locator('.affine-reference-title');
await expect(inlineTitle).toHaveText('PDF preview');
const bouding = await inlineLink.boundingBox();
expect(bouding).not.toBeNull();
await page.mouse.move(bouding!.x - 50, bouding!.y + bouding!.height / 2);
await page.waitForTimeout(500);
await page.mouse.click(bouding!.x - 50, bouding!.y + bouding!.height / 2);
await inlineLink.hover({ timeout: 500 });
// Edits title
await inlineToolbar.getByRole('button', { name: 'Edit' }).click();
// Title alias
await page.keyboard.type('PDF embed preview');
await page.keyboard.press('Enter');
await expect(inlineTitle).toHaveText('PDF embed preview');
}
// PDF embed view should not be re-rendered
expect(await pageCursor.textContent()).toBe('2');
expect(await pageCount.textContent()).toBe('3');
// Chagnes origin title
{
const inlineLink = page.locator('affine-reference').nth(1);
const inlineTitle = inlineLink.locator('.affine-reference-title');
await expect(inlineTitle).toHaveText('PDF page');
await title.click();
await page.keyboard.type(' preview');
await expect(inlineTitle).toHaveText('PDF page preview');
}
// PDF embed view should not be re-rendered
expect(await pageCursor.textContent()).toBe('2');
expect(await pageCount.textContent()).toBe('3');
});