Commit Graph

30 Commits

Author SHA1 Message Date
L-Sun
4e80ecd591 refactor(editor): image slash menu config extension (#10674) 2025-03-07 05:48:40 +00:00
L-Sun
98d44d5be5 refactor(editor): move focus block commands to blocksuite/shared (#10671) 2025-03-07 03:07:49 +00:00
Saul-Mirone
84e2dda3f8 refactor(editor): separate lit and slot in global (#10666) 2025-03-06 10:24:59 +00:00
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
Saul-Mirone
b8ecfbdae6 refactor(editor): remove assertExists (#10615) 2025-03-05 00:13:08 +00:00
Saul-Mirone
66d9d576e0 refactor(editor): add gfx entry in bs global package (#10612) 2025-03-04 12:46:50 +00:00
Saul-Mirone
22e4bd8c20 refactor: move image proxy middleware and adapter extensions (#10345)
### TL;DR
Moved image proxy middleware and adapter extensions to their respective packages and introduced a new spec provider for adapter registration.

### What changed?
- Relocated `defaultImageProxyMiddleware` from blocks to `@blocksuite/affine-block-image`
- Moved `PresentTool` from fragment-frame-panel to block-frame
- Created new adapter extension specs for HTML, Markdown, and Notion HTML
- Introduced a spec provider pattern for adapter registration
- Removed direct transformer references from RootService
- Updated imports across affected files to use new locations

### How to test?
1. Verify image proxy functionality works in exports and imports
2. Test HTML, Markdown, and Notion HTML adapters still function correctly
3. Confirm presentation mode works with the relocated PresentTool
4. Check that all file import/export operations continue to work as expected

### Why make this change?
This reorganization improves code modularity by placing features in their logical packages and introduces a more maintainable pattern for adapter registration. The spec provider pattern makes it easier to manage and extend adapter functionality while reducing coupling between components.
2025-02-21 09:01:57 +00:00
fundon
adc003862b fix(editor): image size and xywh when converting attachment to image (#10200)
In Edgeless, the image size should be read when converting attachment to image:

* fix `size`
* fix `xywh`
2025-02-20 05:16:21 +00:00
doouding
dad39d1129 fix: handle unsupported image upload (#10272) 2025-02-19 03:47:48 +00:00
Saul-Mirone
2f04e3180c refactor: move utils and cleanup test helpers (#10261) 2025-02-18 14:03:51 +00:00
doouding
8ece812017 feat: dnd image preview && edgeless dnd preview issue (#10177)
### Changed
- Add new image block to render dnd preview
- Fixed the bug that dragging uploaded image does not have width and height
- Fixed the bug that drag image block from page to edgeless does not have width and height
- Better edgeless dnd preview
2025-02-14 16:02:03 +00:00
Saul-Mirone
d111f8ac88 feat(editor): add WidgetViewExtension (#10180)
Closes: [BS-2282](https://linear.app/affine-design/issue/BS-2282/replace-widgetviewmapextension-with-widgetextension)
2025-02-14 11:00:01 +00:00
Saul-Mirone
e7cc710f8e refactor(editor): remove service global type (#10129)
Closes: [BS-2566](https://linear.app/affine-design/issue/BS-2566/remove-global-types-in-service)
2025-02-12 11:46:10 +00:00
Saul-Mirone
39eb8625d6 refactor(editor): remove block models global type (#10086) 2025-02-11 11:00:57 +00:00
Saul-Mirone
652865c7cf refactor(editor): remove global types in model (#10082)
Closes: [BS-2249](https://linear.app/affine-design/issue/BS-2249/remove-global-types-in-model)

```ts
// before
matchFlavours(model, ['affine:page']);
// after
matchFlavours(model, [PageBlockModel]);
```
2025-02-11 08:18:57 +00:00
Flrande
7eb1ed170c feat(editor): add edgeless media entry (#9949) 2025-02-07 06:10:11 +00:00
Saul-Mirone
f3f6e8c6ac refactor(editor): remove attachment and image block service (#9909) 2025-01-28 20:53:23 +00:00
Saul-Mirone
17bf75e843 refactor(editor): remove dependency of command global types (#9903)
Closes: [BS-2216](https://linear.app/affine-design/issue/BS-2216/remove-global-types-in-command)
2025-01-27 12:28:46 +00:00
doouding
73b4437081 chore: dnd cleanup (#9899) 2025-01-27 04:29:14 +00:00
Saul-Mirone
f744002808 refactor(editor): add schema on block model (#9815) 2025-01-21 03:56:10 +00:00
Mirone
446b31b621 refactor(editor): rename job to transformer (#9639) 2025-01-11 12:04:07 +08:00
fundon
0b3dba614d perf(editor): optimize the search for the closest element (#9587)
Closes: [BS-2275](https://linear.app/affine-design/issue/BS-2275/拖拽-indicator-查找优化)
2025-01-10 08:21:10 +00:00
Saul-Mirone
126ab18967 feat(editor): selection as store extension (#9605) 2025-01-09 11:49:23 +00:00
Saul-Mirone
d21ef47ae8 chore(editor): rename std.doc to std.store (#9596) 2025-01-09 04:16:28 +00:00
fundon
69e73af2a8 refactor(editor): add native clipboard extension (#9502)
Closes: [BS-2239](https://linear.app/affine-design/issue/BS-2239/不应该通过window注入affine的api)
2025-01-06 15:36:43 +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
Saul-Mirone
a9f890017e fix(editor): missing dependencies (#9436) 2024-12-30 14:10:37 +00:00
Saul-Mirone
2b27d62b0e refactor(editor): cleanup ts-expect-error (#9369) 2024-12-27 05:14:23 +00:00
Saul-Mirone
5274441e14 refactor(editor): extract image block (#9309) 2024-12-25 13:26:29 +00:00