Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-31 00:59:57 +08:00
Code Issues Packages Projects Releases Wiki Activity
8,594 Commits 63 Branches 754 Tags
ea20751b9be04962090f9eccaea28b363670d8f5
Commit Graph

11 Commits

Author SHA1 Message Date
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`](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.
 2025-03-06 06:46:03 +00:00
Saul-Mirone 6353e72078 feat(editor): add embed option config extension (#10540) 
This PR implements a significant refactoring of the embed block services across multiple components (Figma, GitHub, Loom, and YouTube) in the BlockSuite codebase. Here are the key changes:

1. **Architecture Change**:
   - Moves from a dynamic registration pattern to a more declarative configuration approach
   - Replaces `EmbedOptionProvider.registerEmbedBlockOptions()` calls with a new `EmbedOptionConfig` factory function

2. **Service Refactoring**:
   - For each embed block type (Figma, GitHub, Loom, YouTube):
     - Separates configuration from service logic
     - Creates new `EmbedBlockOptionConfig` constants using the new `EmbedOptionConfig` factory
     - Removes the `mounted()` lifecycle hook from services where it was only used for registration

3. **Core Changes**:
   - In `embed-option-service.ts`:
     - Introduces new `EmbedOptionConfigIdentifier` for dependency injection
     - Adds `EmbedOptionConfig` factory function for creating embed configurations
     - Updates `EmbedOptionService` constructor to automatically register configurations
     - Modifies DI setup to include `StdIdentifier` dependency

4. **Spec Updates**:
   - Updates all block specs to include the new configuration objects
   - Maintains existing functionality while using the new pattern

The main benefit of this refactoring is:
- More declarative configuration approach
- Better separation of concerns
- Reduced runtime registration code
- More predictable initialization of embed options
 2025-03-01 16:40:18 +00:00
Flrande 5748591bc5 fix(editor): width and height of embed block (#10223) 2025-02-17 10:37:05 +00:00
Flrande e3691850ad fix(editor): figma ui issues (#10123) 2025-02-12 09:10:08 +00:00
fundon ffd54c6620 refactor(editor): use selected signal in block component (#9849) 2025-01-27 02:56:10 +00:00
Saul-Mirone f778d1a28a refactor(editor): move extension to store (#9552) 2025-01-06 15:15:14 +00:00
Saul-Mirone fc863e484c refactor(editor): remove selection global types (#9532) 
Closes: [BS-2217](https://linear.app/affine-design/issue/BS-2217/remove-global-types-in-selection)
 2025-01-06 03:45:11 +00:00
donteatfriedrice 3996f96368 refactor(editor): extensionalize notion html adapter (#9318) 
Part of [BS-2212](https://linear.app/affine-design/issue/BS-2212/adapter-extension化修复)
 2024-12-26 03:22:09 +00:00
donteatfriedrice 62b930f336 fix(editor): notion html adapter for embed link block (#9279) 
[BS-1745](https://linear.app/affine-design/issue/BS-1745/[bug]-导入的notion-youtube-embed-错误)
 2024-12-25 07:20:26 +00:00
donteatfriedrice a187f23452 chore: each block maintain its own adapter extension (#9224) 2024-12-23 07:54:59 +00:00
Mirone 30200ff86d chore: merge blocksuite source code (#9213) 2024-12-20 15:38:06 +08:00