Files
AFFiNE-Mirror/tests/affine-local/e2e/local-first-openpage-newtab.spec.ts
fundon ec9bd1f383 feat(editor): add toolbar registry extension (#9572)
### 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.
2025-03-06 06:46:03 +00:00

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 });
});