mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-19 02:56:23 +08:00
fundon
ec9bd1f383
### 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`](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/blocksuite/affine/shared/src/services/toolbar-service/config.ts). 1. Add toolbar configuration file to a block type, such as bookmark block: [`config.ts`](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/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](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/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](https://github.com/toeverything/AFFiNE/blob/c178debf2d49c40b753e1bcaa6f07270bdde7401/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.
88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
import {
|
|
type EmbedCardStyle,
|
|
EmbedFigmaModel,
|
|
EmbedGithubModel,
|
|
EmbedHtmlModel,
|
|
EmbedLinkedDocModel,
|
|
EmbedLoomModel,
|
|
EmbedSyncedDocModel,
|
|
EmbedYoutubeModel,
|
|
} from '@blocksuite/affine-model';
|
|
|
|
export const BLOCK_CHILDREN_CONTAINER_PADDING_LEFT = 24;
|
|
export const EDGELESS_BLOCK_CHILD_PADDING = 24;
|
|
export const EDGELESS_BLOCK_CHILD_BORDER_WIDTH = 2;
|
|
|
|
// The height of the header, which is used to calculate the scroll offset
|
|
// In AFFiNE, to avoid the option element to be covered by the header, we need to reserve the space for the header
|
|
export const PAGE_HEADER_HEIGHT = 53;
|
|
|
|
export const EMBED_CARD_MIN_WIDTH = 450;
|
|
|
|
export const EMBED_CARD_WIDTH: Record<EmbedCardStyle, number> = {
|
|
horizontal: 752,
|
|
horizontalThin: 752,
|
|
list: 752,
|
|
vertical: 364,
|
|
cube: 170,
|
|
cubeThick: 170,
|
|
video: 752,
|
|
figma: 752,
|
|
html: 752,
|
|
syncedDoc: 800,
|
|
pdf: 537 + 24 + 2,
|
|
};
|
|
|
|
export const EMBED_CARD_HEIGHT: Record<EmbedCardStyle, number> = {
|
|
horizontal: 116,
|
|
horizontalThin: 80,
|
|
list: 46,
|
|
vertical: 390,
|
|
cube: 114,
|
|
cubeThick: 132,
|
|
video: 544,
|
|
figma: 544,
|
|
html: 544,
|
|
syncedDoc: 455,
|
|
pdf: 759 + 46 + 24 + 2,
|
|
};
|
|
|
|
export const EMBED_BLOCK_FLAVOUR_LIST = [
|
|
'affine:embed-github',
|
|
'affine:embed-youtube',
|
|
'affine:embed-figma',
|
|
'affine:embed-linked-doc',
|
|
'affine:embed-synced-doc',
|
|
'affine:embed-html',
|
|
'affine:embed-loom',
|
|
] as const;
|
|
|
|
export const EMBED_BLOCK_MODEL_LIST = [
|
|
EmbedGithubModel,
|
|
EmbedYoutubeModel,
|
|
EmbedFigmaModel,
|
|
EmbedLinkedDocModel,
|
|
EmbedSyncedDocModel,
|
|
EmbedHtmlModel,
|
|
EmbedLoomModel,
|
|
] as const;
|
|
|
|
export const DEFAULT_IMAGE_PROXY_ENDPOINT =
|
|
'https://affine-worker.toeverything.workers.dev/api/worker/image-proxy';
|
|
|
|
// https://github.com/toeverything/affine-workers/tree/main/packages/link-preview
|
|
export const DEFAULT_LINK_PREVIEW_ENDPOINT =
|
|
'https://affine-worker.toeverything.workers.dev/api/worker/link-preview';
|
|
|
|
// This constant is used to ignore tags when exporting using html2canvas
|
|
export const CANVAS_EXPORT_IGNORE_TAGS = [
|
|
'EDGELESS-TOOLBAR-WIDGET',
|
|
'AFFINE-DRAG-HANDLE-WIDGET',
|
|
'AFFINE-TOOLBAR-WIDGET',
|
|
'AFFINE-BLOCK-SELECTION',
|
|
];
|
|
|
|
export * from './bracket-pairs.js';
|
|
export * from './note.js';
|
|
export * from './text.js';
|