Commit Graph

115 Commits

Author SHA1 Message Date
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
L-Sun
d476d3b1df fix(editor): android keyboard can not be opened (#10502)
Close [BS-2674](https://linear.app/affine-design/issue/BS-2674/[android]-%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%8C%BA%E5%9F%9F%E7%82%B9%E5%87%BB%E5%90%8E%E6%97%A0%E6%B3%95%E6%BF%80%E6%B4%BB%E9%94%AE%E7%9B%98) [BS-2609](https://linear.app/affine-design/issue/BS-2609/[android]-%E8%BE%93%E5%85%A5%E7%9A%84-toolbar-%E6%B2%A1%E6%9C%89%E4%BA%86)
2025-02-28 08:23:26 +00:00
fundon
caa4dfedfc fix(editor): adjust black and white in shape text color palettes to pure black and pure white (#10450)
Closes: [BS-2697](https://linear.app/affine-design/issue/BS-2697/检查shape-text-color黑白不映射的pr合并状态)

https://github.com/user-attachments/assets/732612e9-5e43-453f-aef2-5f32f5a08614
2025-02-27 06:05:42 +00:00
doodlewind
589622043c fix(editor): list toggle position offset (#10448)
Before:

![image](https://github.com/user-attachments/assets/fbddc396-1078-4c1e-8e2c-c26c6e4a6d61)

After:

<img width="579" alt="image" src="https://github.com/user-attachments/assets/7b049b53-269b-484e-ba76-fa6f46a2004c" />

This centering approach won't affect heading blocks:

<img width="267" alt="image" src="https://github.com/user-attachments/assets/3f3217e3-7e23-43fc-a7e5-33b6eadccc88" />
2025-02-26 12:09:00 +00:00
donteatfriedrice
d63f16da5e fix(editor): affine preview root style (#10420)
Fix [BS-2677](https://linear.app/affine-design/issue/BS-2677/linked-doc-embed-view样式错误)

1. Only show the border of embed synced doc block (in note) when hover.
2. Fix affine preview root padding style, set padding only when affine preview root in embed synced doc block (in surface).
3. Only add the footnote config extension to the chat panel and chat block center peek. For footnotes in other page preview scenarios, such as footnote nodes within embed synced doc blocks or embed linked doc blocks, the hover effect should be maintained.
2025-02-26 04:25:24 +00:00
fundon
162b7adc1b fix(editor): should check text length and stop event propagation when adding a link (#10391) 2025-02-24 11:10:05 +00:00
donteatfriedrice
1b2a4377fd feat(editor): update footnote node style and config (#10392)
[BS-2581](https://linear.app/affine-design/issue/BS-2581/优化-footnote-node-正文样式)
2025-02-24 08:15:04 +00:00
Flrande
9fd1ca1c09 refactor(editor): remove inline editor keyboard utils and add markdown property in rich-text (#10375) 2025-02-23 19:57:56 +08:00
Saul-Mirone
f8cabe8bb1 refactor: move ai-item components to frontend core (#10369)
### TL;DR

Relocated AI item components from BlockSuite to the frontend codebase and updated related imports.

### What changed?

- Moved AI item components from `blocksuite/affine/components/src/ai-item` to `packages/frontend/core/src/blocksuite/presets/ai/_common/components/ai-item`
- Updated all imports referencing the old AI item component location to point to the new location
- Removed AI item exports from BlockSuite's package.json and effects registration
- Added AI item effects registration to frontend presets

### How to test?

1. Verify AI functionality works as expected in:
   - Chat panels
   - AI toolbars
   - Edgeless copilot
   - Slash menu
2. Confirm no AI-related console errors appear
3. Test error handling scenarios (unauthorized, payment required, network errors)

### Why make this change?

This change consolidates AI-related components into the frontend codebase where they are primarily used, rather than keeping them in BlockSuite. This improves code organization by placing components closer to their implementation and usage, while reducing unnecessary coupling between packages.
2025-02-22 17:03:07 +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
Flrande
50820482df fix(editor): auto focus after add inline latex (#10309)
https://github.com/user-attachments/assets/09e713ee-e600-464c-8614-d874d343cfb0

Close #10208
2025-02-20 05:52:06 +00:00
donteatfriedrice
e67fd67a3c fix(core): copy more button group style (#10240) 2025-02-18 04:07:59 +00:00
fundon
34472fdfa9 fix(editor): make std stable in affine-link and affine-reference (#10207) 2025-02-17 05:09:53 +00:00