mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-15 21:41:52 +08:00
### What's Changed! #### Added Manage various types of toolbars uniformly in one place. * `affine-toolbar-widget` * `ToolbarRegistryExtension` The toolbar currently supports and handles several scenarios: 1. Select blocks: `BlockSelection` 2. Select text: `TextSelection` or `NativeSelection` 3. Hover a link: `affine-link` and `affine-reference` #### Removed Remove redundant toolbar implementations. * `attachment` toolbar * `bookmark` toolbar * `embed` toolbar * `formatting` toolbar * `affine-link` toolbar * `affine-reference` toolbar ### How to migrate? Here is an example that can help us migrate some unrefactored toolbars: Check out the more detailed types of [`ToolbarModuleConfig`](c178debf2d/blocksuite/affine/shared/src/services/toolbar-service/config.ts). 1. Add toolbar configuration file to a block type, such as bookmark block: [`config.ts`](c178debf2d/blocksuite/affine/block-bookmark/src/configs/toolbar.ts) ```ts export const builtinToolbarConfig = { actions: [ { id: 'a.preview', content(ctx) { const model = ctx.getCurrentModelBy(BlockSelection, BookmarkBlockModel); if (!model) return null; const { url } = model; return html`<affine-link-preview .url=${url}></affine-link-preview>`; }, }, { id: 'b.conversions', actions: [ { id: 'inline', label: 'Inline view', run(ctx) { }, }, { id: 'card', label: 'Card view', disabled: true, }, { id: 'embed', label: 'Embed view', disabled(ctx) { }, run(ctx) { }, }, ], content(ctx) { }, } satisfies ToolbarActionGroup<ToolbarAction>, { id: 'c.style', actions: [ { id: 'horizontal', label: 'Large horizontal style', }, { id: 'list', label: 'Small horizontal style', }, ], content(ctx) { }, } satisfies ToolbarActionGroup<ToolbarAction>, { id: 'd.caption', tooltip: 'Caption', icon: CaptionIcon(), run(ctx) { }, }, { placement: ActionPlacement.More, id: 'a.clipboard', actions: [ { id: 'copy', label: 'Copy', icon: CopyIcon(), run(ctx) { }, }, { id: 'duplicate', label: 'Duplicate', icon: DuplicateIcon(), run(ctx) { }, }, ], }, { placement: ActionPlacement.More, id: 'b.refresh', label: 'Reload', icon: ResetIcon(), run(ctx) { }, }, { placement: ActionPlacement.More, id: 'c.delete', label: 'Delete', icon: DeleteIcon(), variant: 'destructive', run(ctx) { }, }, ], } as const satisfies ToolbarModuleConfig; ``` 2. Add configuration extension to a block spec: [bookmark's spec](c178debf2d/blocksuite/affine/block-bookmark/src/bookmark-spec.ts) ```ts const flavour = BookmarkBlockSchema.model.flavour; export const BookmarkBlockSpec: ExtensionType[] = [ ..., ToolbarModuleExtension({ id: BlockFlavourIdentifier(flavour), config: builtinToolbarConfig, }), ].flat(); ``` 3. If the bock type already has a toolbar configuration built in, we can customize it in the following ways: Check out the [editor's config](c178debf2d/packages/frontend/core/src/blocksuite/extensions/editor-config/index.ts (L51C4-L54C8)) file. ```ts // Defines a toolbar configuration for the bookmark block type const customBookmarkToolbarConfig = { actions: [ ... ] } as const satisfies ToolbarModuleConfig; // Adds it into the editor's config ToolbarModuleExtension({ id: BlockFlavourIdentifier('custom:affine:bookmark'), config: customBookmarkToolbarConfig, }), ``` 4. If we want to extend the global: ```ts // Defines a toolbar configuration const customWildcardToolbarConfig = { actions: [ ... ] } as const satisfies ToolbarModuleConfig; // Adds it into the editor's config ToolbarModuleExtension({ id: BlockFlavourIdentifier('custom:affine:*'), config: customWildcardToolbarConfig, }), ``` Currently, only most toolbars in page mode have been refactored. Next is edgeless mode.
147 lines
4.1 KiB
TypeScript
147 lines
4.1 KiB
TypeScript
import { test } from '@affine-test/kit/playwright';
|
|
import { openHomePage } from '@affine-test/kit/utils/load-page';
|
|
import {
|
|
clickNewPageButton,
|
|
getBlockSuiteEditorTitle,
|
|
getPageOperationButton,
|
|
waitForEditorLoad,
|
|
} from '@affine-test/kit/utils/page-logic';
|
|
import { getCurrentDocIdFromUrl } from '@affine-test/kit/utils/url';
|
|
import { expect } from '@playwright/test';
|
|
|
|
test('click btn new page and open in tab', async ({ page, workspace }) => {
|
|
await openHomePage(page);
|
|
await waitForEditorLoad(page);
|
|
await clickNewPageButton(page);
|
|
await getBlockSuiteEditorTitle(page).click();
|
|
await getBlockSuiteEditorTitle(page).fill('this is a new page');
|
|
const newPageUrl = page.url();
|
|
const newPageId = getCurrentDocIdFromUrl(page);
|
|
|
|
await page.getByTestId('all-pages').click();
|
|
|
|
await getPageOperationButton(page, newPageId).click();
|
|
const [newTabPage] = await Promise.all([
|
|
page.waitForEvent('popup'),
|
|
page.getByRole('menuitem', { name: 'Open in new tab' }).click(),
|
|
]);
|
|
|
|
await expect(newTabPage).toHaveURL(newPageUrl, { timeout: 15000 });
|
|
|
|
const currentWorkspace = await workspace.current();
|
|
|
|
expect(currentWorkspace.meta.flavour).toContain('local');
|
|
});
|
|
|
|
test('switch between new page and all page', async ({ page }) => {
|
|
await openHomePage(page);
|
|
await waitForEditorLoad(page);
|
|
|
|
const title = 'this is a new page';
|
|
|
|
await clickNewPageButton(page, title);
|
|
await page.getByTestId('all-pages').click();
|
|
|
|
const cell = page.getByTestId('page-list-item').getByText(title);
|
|
await expect(cell).toBeVisible();
|
|
|
|
await cell.click();
|
|
await expect(getBlockSuiteEditorTitle(page)).toHaveText(title);
|
|
|
|
await page.getByTestId('all-pages').click();
|
|
await expect(cell).toBeVisible();
|
|
});
|
|
|
|
test('ctrl click all page and open in new tab', async ({ page }) => {
|
|
await openHomePage(page);
|
|
await waitForEditorLoad(page);
|
|
|
|
const [newTabPage] = await Promise.all([
|
|
page.waitForEvent('popup'),
|
|
page.getByTestId('all-pages').click({
|
|
modifiers: ['ControlOrMeta'],
|
|
}),
|
|
]);
|
|
|
|
await expect(newTabPage).toHaveURL(/\/all/, {
|
|
timeout: 15000,
|
|
});
|
|
});
|
|
|
|
test('mid click all page and open in new tab', async ({ page }) => {
|
|
await openHomePage(page);
|
|
await waitForEditorLoad(page);
|
|
|
|
const [newTabPage] = await Promise.all([
|
|
page.waitForEvent('popup'),
|
|
page.getByTestId('all-pages').click({
|
|
button: 'middle',
|
|
}),
|
|
]);
|
|
|
|
await expect(newTabPage).toHaveURL(/\/all/, {
|
|
timeout: 15000,
|
|
});
|
|
});
|
|
|
|
test('ctrl click embedded doc link and open in new tab', async ({ page }) => {
|
|
await openHomePage(page);
|
|
await clickNewPageButton(page);
|
|
|
|
await getBlockSuiteEditorTitle(page).click();
|
|
await getBlockSuiteEditorTitle(page).fill('this is a new page');
|
|
const newPageUrl = page.url();
|
|
|
|
await clickNewPageButton(page);
|
|
await page.keyboard.press('Enter'); // goto main content
|
|
|
|
// paste new page url to create linked page
|
|
await page.evaluate(
|
|
async ([url]) => {
|
|
const clipData = {
|
|
'text/plain': url,
|
|
};
|
|
const e = new ClipboardEvent('paste', {
|
|
clipboardData: new DataTransfer(),
|
|
});
|
|
Object.defineProperty(e, 'target', {
|
|
writable: false,
|
|
value: document,
|
|
});
|
|
Object.entries(clipData).forEach(([key, value]) => {
|
|
e.clipboardData?.setData(key, value);
|
|
});
|
|
document.dispatchEvent(e);
|
|
},
|
|
[newPageUrl]
|
|
);
|
|
|
|
const referenceNode = page.locator(
|
|
'affine-reference:has-text("this is a new page")'
|
|
);
|
|
|
|
// hover on the reference node and change it to embedded card mode
|
|
await referenceNode.hover();
|
|
|
|
const toolbar = page.locator('affine-toolbar-widget editor-toolbar');
|
|
|
|
await expect(toolbar).toBeVisible();
|
|
await toolbar.getByRole('button', { name: 'Switch view' }).click();
|
|
await page.getByRole('button', { name: 'Card view' }).click();
|
|
|
|
const embededDocBlock = page.locator('affine-embed-linked-doc-block');
|
|
|
|
await expect(embededDocBlock).toBeVisible();
|
|
|
|
// open in new tab
|
|
const [newTabPage] = await Promise.all([
|
|
page.waitForEvent('popup'),
|
|
embededDocBlock.click({
|
|
button: 'left',
|
|
modifiers: ['ControlOrMeta'],
|
|
}),
|
|
]);
|
|
|
|
await expect(newTabPage).toHaveURL(newPageUrl, { timeout: 15000 });
|
|
});
|