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

feat(editor): add toolbar registry extension (#9572)

Browse Source 
### 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.
This commit is contained in:
fundon
2025-03-06 06:46:03 +00:00
parent 06e4bd9aed
commit ec9bd1f383
147 changed files with 6389 additions and 5156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/components/src/toolbar/icon-button.ts
+11 -3
View File
@@ -25,6 +25,7 @@ export class EditorIconButton extends LitElement {
white-space: nowrap;
box-sizing: border-box;
width: var(--icon-container-width, unset);
height: var(--icon-container-height, unset);
justify-content: var(--justify, unset);
user-select: none;
}
@@ -33,6 +34,10 @@ export class EditorIconButton extends LitElement {
color: var(--affine-primary-color);
}
:host([active]) .icon-container.active-mode-border {
border: 1px solid var(--affine-brand-color);
}
:host([active]) .icon-container.active-mode-background {
background: var(--affine-hover-color);
}
@@ -44,8 +49,7 @@ export class EditorIconButton extends LitElement {
::slotted(svg) {
flex-shrink: 0;
width: var(--icon-size, unset);
height: var(--icon-size, unset);
font-size: var(--icon-size, 20px);
}
::slotted(.label) {
@@ -116,6 +120,7 @@ export class EditorIconButton extends LitElement {
const padding = this.iconContainerPadding;
const iconContainerStyles = styleMap({
'--icon-container-width': this.iconContainerWidth,
'--icon-container-height': this.iconContainerHeight,
'--icon-container-padding': Array.isArray(padding)
? padding.map(v => `${v}px`).join(' ')
: `${padding}px`,
@@ -156,7 +161,7 @@ export class EditorIconButton extends LitElement {
accessor active = false;
@property({ attribute: false })
accessor activeMode: 'color' | 'background' = 'color';
accessor activeMode: 'color' | 'border' | 'background' = 'color';
@property({ attribute: false })
accessor arrow = true;
@@ -179,6 +184,9 @@ export class EditorIconButton extends LitElement {
@property({ attribute: false })
accessor iconContainerWidth: string | undefined = undefined;
@property({ attribute: false })
accessor iconContainerHeight: string | undefined = undefined;
@property({ attribute: false })
accessor iconSize: string | undefined = undefined;
blocksuite/affine/components/src/toolbar/menu-button.ts
+11 -4
View File
@@ -44,6 +44,7 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
{
mainAxis: 12,
ignoreShift: true,
offsetHeight: 6 * 4,
}
);
this._disposables.addFromEvent(this, 'keydown', (e: KeyboardEvent) => {
@@ -54,9 +55,6 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
});
this._disposables.addFromEvent(this._trigger, 'click', (_: MouseEvent) => {
this._popper.toggle();
if (this._popper.state === 'show') {
this._content.focus({ preventScroll: true });
}
});
this._disposables.add(this._popper);
}
@@ -91,7 +89,7 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
private accessor _trigger!: EditorIconButton;
@property({ attribute: false })
accessor button!: string | TemplateResult<1>;
accessor button!: TemplateResult;
@property({ attribute: false })
accessor contentPadding: string | undefined = undefined;
@@ -104,6 +102,7 @@ export class EditorMenuContent extends LitElement {
--offset-height: calc(-1 * var(--packed-height));
display: none;
outline: none;
overscroll-behavior: contain;
}
:host::before,
@@ -154,6 +153,7 @@ export class EditorMenuContent extends LitElement {
align-items: stretch;
gap: unset;
min-height: unset;
overflow-y: auto;
}
`;
@@ -206,6 +206,13 @@ export class EditorMenuAction extends LitElement {
color: var(--affine-icon-color);
font-size: 20px;
}
::slotted(.label) {
color: inherit !important;
}
::slotted(.label.capitalize) {
text-transform: capitalize !important;
}
`;
override connectedCallback() {
blocksuite/affine/components/src/toolbar/utils.ts
+4 -2
View File
@@ -106,8 +106,10 @@ export function renderGroups<T>(groups: MenuItemGroup<T>[], context: T) {
return renderActions(groupsToActions(groups, context));
}
export function renderToolbarSeparator() {
return html`<editor-toolbar-separator></editor-toolbar-separator>`;
export function renderToolbarSeparator(orientation?: 'horizontal') {
return html`<editor-toolbar-separator
data-orientation=${ifDefined(orientation)}
></editor-toolbar-separator>`;
}
export function getMoreMenuConfig(std: BlockStdScope): ToolbarMoreMenuConfig {