Commit Graph

127 Commits

Author SHA1 Message Date
L-Sun
f2646796fc refactor(editor): remove unused modal (#11428) 2025-04-03 04:21:20 +00:00
fundon
03dd073cb4 fix(editor): add recent open doc with mode button (#11419)
Closes: [BS-3013](https://linear.app/affine-design/issue/BS-3013/open-doc-分开两个按钮:一个快捷按钮和一个菜单)

Split into two buttons: `recent open doc with mode button` and `open doc with dropdown menu`.
2025-04-03 02:06:14 +00:00
L-Sun
b53b2acfe3 fix(ios): mobile modal occlusion issues (#11427)
Close [BS-2925](https://linear.app/affine-design/issue/BS-2925/移动端-dialog-遮挡相关)
2025-04-03 01:51:57 +00:00
fundon
2026f12daa fix(editor): improve color preview in custom tab of color picker (#11411)
Closes: [BS-3002](https://linear.app/affine-design/issue/BS-3002/color-picker-上-lightdark-按钮颜色丢失)

[Screen Recording 2025-04-02 at 17.19.34.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/13288c59-ef11-4cbb-aec7-934a8a689feb.mov" />](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/13288c59-ef11-4cbb-aec7-934a8a689feb.mov)
2025-04-03 01:38:27 +00:00
fundon
fde97dcf78 fix(editor): improve some experiences on note toolbar (#11413)
Closes: [BS-3004](https://linear.app/affine-design/issue/BS-3004/page-block-ui-adjust)
2025-04-02 13:11:33 +00:00
Saul-Mirone
7f98420061 chore: allow cursor in none-contenteditable blocks (#11366) 2025-04-01 13:20:08 +00:00
fundon
f374f2695f fix(core): add shortcuts to open doc dropdown menu (#11358)
Closes: [BS-2992](https://linear.app/affine-design/issue/BS-2992/走查toolbar上的open-in-button)

[Screen Recording 2025-04-01 at 16.37.57.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/cf4b1baf-aa2c-4f37-9c62-f7202d0f7c42.mov" />](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/cf4b1baf-aa2c-4f37-9c62-f7202d0f7c42.mov)
2025-04-01 12:39:13 +00:00
fundon
eac8f32f4c refactor(editor): basic styles of font and panel (#11290)
* Updated `border-radius` of panel to `8px`.  [BS-2901](https://linear.app/affine-design/issue/BS-2901/meta-info-ui-issue) [BS-2810](https://linear.app/affine-design/issue/BS-2810/toolbarpicker-圆角更新为-8px)
* Refactored basic styles of font and panel.

<img width="549" alt="Screenshot 2025-03-31 at 12 56 36" src="https://github.com/user-attachments/assets/4a827e1e-f802-4251-a563-4a34b891a5e3" />
2025-04-01 01:35:59 +00:00
doouding
51dddc10be fix: template panel tooltip overflow (#11304)
Close #10171
Fixes [BS-2577](https://linear.app/affine-design/issue/BS-2577/​title-overflow-in-edgeless-mode-in-web-interface)
2025-03-31 09:51:33 +00:00
Saul-Mirone
205cd7a86d refactor(editor): rename block-std to std (#11250)
Closes: BS-2946
2025-03-28 07:20:34 +00:00
L-Sun
e2c752d56f feat(editor): inner toolbar layout for block (#11243)
Close [BS-2808](https://linear.app/affine-design/issue/BS-2808/组件内-toolbar-重构)
2025-03-28 03:47:37 +00:00
fundon
2c4278058b feat(editor): add highlighter (#10573)
Closes: [BS-2909](https://linear.app/affine-design/issue/BS-2909/新增highlighter)

### What's Changed!

Currently the highlighter tool is very similar to brush, but for the future, it's a standalone module.

* Added `Highlighter` element model
* Added `Highlighter` tool
* Added `Highlighter` entry to the global toolbar
2025-03-27 08:53:26 +00:00
zzj3720
91876301bf refactor(editor): adjust min-width of context-menu (#11078)
fix: BS-2686
2025-03-26 07:48:17 +00:00
L-Sun
a2e3d318ba refactor(editor): adjust ui of surface-ref inner toolbar (#11129)
Close [BS-2803](https://linear.app/affine-design/issue/BS-2803/inserted-frame-ui%E8%B0%83%E6%95%B4)
Close [BS-2815](https://linear.app/affine-design/issue/BS-2815/inserted-group-ui调整)

### What Changes
- Add an inner toolbar for hovered `surface-ref-block`
- Simplify viewport related codes of `surface-ref-block`
- Expose popover floating options from `affine-menu-button`

https://github.com/user-attachments/assets/916b0a22-6271-4a6f-b338-6630e0426967
2025-03-25 03:48:12 +00:00
fundon
63762b75a1 feat(core): save recent open mode of internal links (#11086)
Closes: [BS-2865](https://linear.app/affine-design/issue/BS-2865/internal-links-保存用户最近的打开方式)

Added `openDocMode` in settings.

https://github.com/user-attachments/assets/a452da73-83e4-4ef5-9b57-58291fc22785
2025-03-24 06:12:47 +00:00
zzj3720
dd2e423112 fix(editor): add placeholder for input of database context menu (#11079)
fix: BS-2594
2025-03-21 12:27:18 +00:00
fundon
27a8afa33f chore(editor): remove redundant line styles components (#10980)
* Moved `edgeless-line-styles-panel` and `edgeless-line-width-panel` into components pkg
2025-03-20 09:48:02 +00:00
L-Sun
da63d51b7e refactor(editor): group and expose parameters of createButtonPopper (#10999) 2025-03-20 08:37:59 +00:00
fundon
8b995ea420 chore(editor): remove edgeless element toolbar (#10900) 2025-03-20 02:08:21 +00:00
fundon
831f290f84 refactor(editor): edgeless toolbar chevron down icon (#10898) 2025-03-20 02:08:20 +00:00
fundon
a7acd5c5b1 refactor(editor): fix edgeless toolbar theme (#10897) 2025-03-20 02:08:20 +00:00
fundon
e4b8b367ce refactor(editor): edgeless toolbar add frame action (#10880) 2025-03-20 02:08:17 +00:00
fundon
54bc60aa4d refactor(editor): edgeless shape toolbar config extension (#10821) 2025-03-20 02:08:16 +00:00
fundon
7f34667b78 refactor(editor): edgeless connector toolbar config extension (#10798) 2025-03-19 14:50:55 +00:00
fundon
e320552594 refactor(editor): edgeless note toolbar config extension (#10719) 2025-03-19 12:34:18 +00:00
fundon
e686a6aecc refactor(editor): edgeless internal embed card toolbar config extension (#10717) 2025-03-19 12:34:17 +00:00
fundon
d8567e669a refactor(editor): edgeless bookmark toolbar config extension (#10711) 2025-03-19 02:24:26 +00:00
fundon
251d1d8782 refactor(editor): edgeless attacment toolbar config extension (#10710) 2025-03-19 00:52:22 +00:00
fundon
cb37d25d7b refactor(editor): edgeless element toolbar with new pattern (#10511) 2025-03-18 15:36:25 +00:00
Saul-Mirone
d5a5df5e49 test(editor): move blocksuite test to tests folder (#10917) 2025-03-17 06:40:25 +00:00
Saul-Mirone
26285f7dcb feat(editor): unify block props api (#10888)
Closes: [BS-2707](https://linear.app/affine-design/issue/BS-2707/统一使用props获取和更新block-prop)
2025-03-16 05:48:34 +00:00
fundon
b238aa3182 fix(editor): clamp method in color picker (#10840)
Related to https://github.com/toeverything/AFFiNE/pull/10577
2025-03-13 19:37:37 +00:00
fundon
d823792f85 refactor(editor): simplify color picker (#10776)
### What's Changed!

* Added `enableCustomColor` property into `EdgelessColorPickerButton` component
* Removed redundant code
2025-03-12 05:17:04 +00:00
Mirone
cd63e0ed8b feat(editor): replace slot with rxjs subject (#10768) 2025-03-12 11:29:24 +09:00
fundon
006bdd29b8 fix(editor): clip content within menu (#10764)
Closes: [BS-2796](https://linear.app/affine-design/issue/BS-2796/menu-中内容被剪切的问题)
2025-03-11 12:39:59 +00:00
fundon
aa690e6c91 refactor(editor): move color panel into color picker (#10758) 2025-03-11 09:37:09 +00:00
fundon
6244bbbd11 refactor(editor): move getTooltipWithShortcut to affine-tooltip-content-with-shortcut (#10743)
I'm refactoring the edgeless note toolbar config extension and find that I need to move this.

cac05e720a/blocksuite/affine/blocks/block-root/src/widgets/element-toolbar/change-note-button.ts (L525)
2025-03-10 11:58:58 +00:00
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
Saul-Mirone
2e86bfffae feat(editor): life cycle ext (#10668) 2025-03-06 12:28:55 +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
2b30d756e2 refactor(editor): replace debounce and throttle with lodash (#10639) 2025-03-06 04:46:52 +00:00
Flrande
bd62634a76 feat(editor): add callout block (#10563)
- Add `CalloutBlockModel `
- Implement `CalloutBlockComponent `
- Integrate with slash menu (/)
2025-03-05 09:28:51 +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
5ad3d3c94a refactor(editor): move figma squircle to shared (#10610) 2025-03-04 10:26:58 +00:00
Saul-Mirone
fa5674166e refactor(editor): cleanup list icons (#10608) 2025-03-04 10:13:01 +00:00
Saul-Mirone
4c3c953a36 chore(editor): merge clamp functions (#10577)
Closes: [BS-2625](https://linear.app/affine-design/issue/BS-2625/合并clamp函数)
2025-03-03 10:33:38 +00:00
Flrande
5d3c365d97 fix(editor): format text in code block (#10575)
Closes: [BS-2724](https://linear.app/affine-design/issue/BS-2724/code-block%E9%87%8C%E4%B8%8D%E5%BA%94%E8%AF%A5%E6%98%BE%E7%A4%BAtoolbar)
2025-03-03 08:52:38 +00:00
Saul-Mirone
f23f29610c refactor(editor): remove stable feature flags (#10547) 2025-03-02 08:41:12 +00:00