Commit Graph

31 Commits

Author SHA1 Message Date
Saul-Mirone fe5f0f62ec feat(editor): rich text package (#10689)
This PR performs a significant architectural refactoring by extracting rich text functionality into a dedicated package. Here are the key changes:

1. **New Package Creation**
- Created a new package `@blocksuite/affine-rich-text` to house rich text related functionality
- Moved rich text components, utilities, and types from `@blocksuite/affine-components` to this new package

2. **Dependency Updates**
- Updated multiple block packages to include the new `@blocksuite/affine-rich-text` as a direct dependency:
  - block-callout
  - block-code
  - block-database
  - block-edgeless-text
  - block-embed
  - block-list
  - block-note
  - block-paragraph

3. **Import Path Updates**
- Refactored all imports that previously referenced rich text functionality from `@blocksuite/affine-components/rich-text` to now use `@blocksuite/affine-rich-text`
- Updated imports for components like:
  - DefaultInlineManagerExtension
  - RichText types and interfaces
  - Text manipulation utilities (focusTextModel, textKeymap, etc.)
  - Reference node components and providers

4. **Build Configuration Updates**
- Added references to the new rich text package in the `tsconfig.json` files of all affected packages
- Maintained workspace dependencies using the `workspace:*` version specifier

The primary motivation appears to be:
1. Better separation of concerns by isolating rich text functionality
2. Improved maintainability through more modular package structure
3. Clearer dependencies between packages
4. Potential for better tree-shaking and bundle optimization

This is primarily an architectural improvement that should make the codebase more maintainable and better organized.
2025-03-07 04:08:47 +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`](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 2b30d756e2 refactor(editor): replace debounce and throttle with lodash (#10639) 2025-03-06 04:46:52 +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 f23f29610c refactor(editor): remove stable feature flags (#10547) 2025-03-02 08:41:12 +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
Saul-Mirone faf6e2c79f refactor(editor): optimize store map (#10246) 2025-02-18 13:30:09 +00:00
Flrande 5748591bc5 fix(editor): width and height of embed block (#10223) 2025-02-17 10:37:05 +00:00
Saul-Mirone 6b78d2dcf2 refactor(editor): reduce getService (#10100) 2025-02-11 12:26:02 +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
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
pengx17 4c665594d6 fix(editor): ref on click slots should not be global (#9830)
fix AF-2129
2025-01-22 05:20:55 +00:00
fundon 7436c139ab fix(core): improve doc title and icon display (#9755)
Closes: [AF-2132](https://linear.app/affine-design/issue/AF-2132/优化-emoji-title-和-icon-显示)
2025-01-18 17:29:15 +08:00
donteatfriedrice 5c4e87ddb5 feat(editor): support text highlight html adapter (#9632)
[BS-2061](https://linear.app/affine-design/issue/BS-2061/html-adapter-支持-text-highlight-样式)
2025-01-13 02:20:58 +00:00
pengx17 f78857bb11 feat(editor): add more open doc options to editor toolbar (#9588)
fix AF-2036, AF-2092
2025-01-09 08:04:21 +00:00
Saul-Mirone 3683297ccf feat(editor): add feature flag service (#9592) 2025-01-08 15:46:31 +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 c773982ced refactor(editor): rename store api (#9518) 2025-01-04 12:51:56 +00:00
Saul-Mirone dcf4993265 refactor(core): move block collection to affine and implement as doc (#9514) 2025-01-04 06:28:55 +00:00
Saul-Mirone 897c7d4284 refactor(editor): should not rely on doc collection type (#9501) 2025-01-03 06:30:27 +00:00
Saul-Mirone 8b6c81f76d refactor(editor): reduce dependency to doc collection (#9492) 2025-01-03 01:59:25 +00:00
Saul-Mirone cbfe38b189 refactor(editor): add middlewares in shared adapter (#9395) 2024-12-27 12:32:44 +00:00
Saul-Mirone 1fbb462389 fix(editor): move insert link command to bookmark to remove ts ignore (#9370) 2024-12-27 09:09:29 +00:00
donteatfriedrice 835e7c434e fix(editor): throttle render linked doc card when blockUpdated (#9361)
[BS-2223](https://linear.app/affine-design/issue/BS-2223/性能问题:linked-doc-card-view加载西藏的文档,app-直接挂了)
2024-12-27 07:24:56 +00:00
Saul-Mirone 2b27d62b0e refactor(editor): cleanup ts-expect-error (#9369) 2024-12-27 05:14:23 +00:00
Mirone 37747369bc fix(editor): missing edgeless crud piece (#9347) 2024-12-26 11:06:06 +00:00
donteatfriedrice a187f23452 chore: each block maintain its own adapter extension (#9224) 2024-12-23 07:54:59 +00:00
Saul-Mirone 3a82da0e5b chore: fix eslint in blocksuite (#9232) 2024-12-20 16:48:10 +00:00
Mirone 30200ff86d chore: merge blocksuite source code (#9213) 2024-12-20 15:38:06 +08:00