mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 20:38:52 +00:00
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`](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.
81 lines
2.8 KiB
JSON
81 lines
2.8 KiB
JSON
{
|
|
"name": "@blocksuite/affine-components",
|
|
"description": "Default BlockSuite editable blocks.",
|
|
"type": "module",
|
|
"scripts": {
|
|
"build": "tsc",
|
|
"test:unit": "nx vite:test --run --passWithNoTests",
|
|
"test:unit:coverage": "nx vite:test --run --coverage",
|
|
"test:e2e": "playwright test"
|
|
},
|
|
"sideEffects": false,
|
|
"keywords": [],
|
|
"author": "toeverything",
|
|
"license": "MIT",
|
|
"dependencies": {
|
|
"@blocksuite/affine-model": "workspace:*",
|
|
"@blocksuite/affine-shared": "workspace:*",
|
|
"@blocksuite/block-std": "workspace:*",
|
|
"@blocksuite/global": "workspace:*",
|
|
"@blocksuite/icons": "^2.2.1",
|
|
"@blocksuite/inline": "workspace:*",
|
|
"@blocksuite/store": "workspace:*",
|
|
"@floating-ui/dom": "^1.6.13",
|
|
"@lit/context": "^1.1.2",
|
|
"@lottiefiles/dotlottie-wc": "^0.4.0",
|
|
"@preact/signals-core": "^1.8.0",
|
|
"@toeverything/theme": "^1.1.12",
|
|
"@types/hast": "^3.0.4",
|
|
"@types/katex": "^0.16.7",
|
|
"@types/lodash-es": "^4.17.12",
|
|
"@types/mdast": "^4.0.4",
|
|
"collapse-white-space": "^2.1.0",
|
|
"date-fns": "^4.0.0",
|
|
"katex": "^0.16.11",
|
|
"lit": "^3.2.0",
|
|
"lit-html": "^3.2.1",
|
|
"lodash-es": "^4.17.21",
|
|
"remark-math": "^6.0.0",
|
|
"shiki": "^3.0.0",
|
|
"yjs": "^13.6.21",
|
|
"zod": "^3.23.8"
|
|
},
|
|
"exports": {
|
|
".": "./src/index.ts",
|
|
"./color-picker": "./src/color-picker/index.ts",
|
|
"./icons": "./src/icons/index.ts",
|
|
"./peek": "./src/peek/index.ts",
|
|
"./portal": "./src/portal/index.ts",
|
|
"./hover": "./src/hover/index.ts",
|
|
"./icon-button": "./src/icon-button/index.ts",
|
|
"./toolbar": "./src/toolbar/index.ts",
|
|
"./toast": "./src/toast/index.ts",
|
|
"./rich-text": "./src/rich-text/index.ts",
|
|
"./smooth-corner": "./src/smooth-corner/index.ts",
|
|
"./caption": "./src/caption/index.ts",
|
|
"./context-menu": "./src/context-menu/index.ts",
|
|
"./date-picker": "./src/date-picker/index.ts",
|
|
"./drop-indicator": "./src/drop-indicator/index.ts",
|
|
"./filterable-list": "./src/filterable-list/index.ts",
|
|
"./toggle-button": "./src/toggle-button/index.ts",
|
|
"./toggle-switch": "./src/toggle-switch/index.ts",
|
|
"./notification": "./src/notification/index.ts",
|
|
"./block-zero-width": "./src/block-zero-width/index.ts",
|
|
"./block-selection": "./src/block-selection/index.ts",
|
|
"./doc-title": "./src/doc-title/index.ts",
|
|
"./embed-card-modal": "./src/embed-card-modal/index.ts",
|
|
"./link-preview": "./src/link-preview/index.ts",
|
|
"./linked-doc-title": "./src/linked-doc-title/index.ts",
|
|
"./view-dropdown-menu": "./src/view-dropdown-menu/index.ts",
|
|
"./card-style-dropdown-menu": "./src/card-style-dropdown-menu/index.ts",
|
|
"./highlight-dropdown-menu": "./src/highlight-dropdown-menu/index.ts"
|
|
},
|
|
"files": [
|
|
"src",
|
|
"dist",
|
|
"!src/__tests__",
|
|
"!dist/__tests__"
|
|
],
|
|
"version": "0.20.0"
|
|
}
|