Commit Graph

289 Commits

Author SHA1 Message Date
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
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
fundon 1f2caca3f5 fix(editor): should not show toolbar when elements have been deleted (#11026)
Closes: [BS-2691](https://linear.app/affine-design/issue/BS-2691/[bug]-当-edgeless-为空的时候,点击-space-会在左上角出现一个莫名的-toolbar)
2025-03-20 06:01:57 +00:00
Saul-Mirone 92d76ba571 refactor(editor): merge inline to std (#11025) 2025-03-20 05:46:56 +00:00
fundon 8b995ea420 chore(editor): remove edgeless element toolbar (#10900) 2025-03-20 02:08:21 +00:00
fundon a8ac3bdb3e fix(editor): adjust creation position to avoid being blocked by banner (#10992)
![Screenshot 2025-03-19 at 16.25.57.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/8ypiIKZXudF5a0tIgIzf/c06e5d3c-40c3-4277-bb6d-57aa75a6fb1f.png)
2025-03-19 10:01:53 +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
L-Sun 7ba1c1b271 chore(editor): use at menu to insert linked doc (#10808)
Close [BS-2799](https://linear.app/affine-design/issue/BS-2799/区分linked-doc入口)

This PR removes the patch for `Linked Doc` action in the slash menu via the `QuickSearch`, reverting it to use the at menu for inserting.
2025-03-13 08:01:59 +00:00
L-Sun 8ac687628c chore(editor): at menu stays open when left right arrow keys are pressed (#10806)
Close [BS-2644](https://linear.app/affine-design/issue/BS-2644/menu-support)
2025-03-13 06:14:35 +00:00
zzj3720 db707dff7f refactor(editor): remove edit view of database block properties (#10748) 2025-03-10 16:24:44 +00:00
Saul-Mirone ec709925ee refactor(editor): orgnize exports (#10709) 2025-03-10 02:04:01 +00:00
fundon befb795935 fix(editor): should show toolbar after mouse is released (#10698) 2025-03-08 04:16:02 +00:00
Flrande 264f0dd2be fix(editor): improve backspace ux for callout block (#10696) 2025-03-07 08:50:31 +00:00
Flrande b85812d8dd fix(editor): disable slash menu in callout (#10656) 2025-03-06 11:07:10 +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
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 66d9d576e0 refactor(editor): add gfx entry in bs global package (#10612) 2025-03-04 12:46:50 +00:00
L-Sun 37fbfbcf3e fix(editor): zindex of frame child not updated (#10580)
Close [BS-2689](https://linear.app/affine-design/issue/BS-2689/[bug]-%E5%BD%93%E5%B1%82%E7%BA%A7%E4%BD%8E%E4%BA%8E-frame-%E7%9A%84yuan%E7%B4%A0%E8%A2%AB%E6%8B%96%E5%85%A5-frame-%E6%97%B6%E5%B1%82%E7%BA%A7%E5%BA%94%E8%AF%A5%E8%A2%AB%E8%87%AA%E5%8A%A8%E6%8B%89%E9%AB%98%E5%B5%8C%E5%85%A5-frame)
2025-03-03 10:51:27 +00:00
zzj3720 5c5c9f8dcd fix(editor): insertion position of new rows and columns is incorrect in table block (#10516)
fix: BS-2714
2025-02-28 12:06:28 +00:00
L-Sun 90b37ce65c fix(core): editor blur unexpectedly when clicking blank area (#10501)
### Before

https://github.com/user-attachments/assets/3c4b20e1-6d89-4dc7-a51f-04b6e9a89486

### After

https://github.com/user-attachments/assets/86b93403-597e-4dbb-ab65-90908342c230
2025-02-28 07:05:06 +00:00
Saul-Mirone 1d865ad883 test(editor): collab table test (#10506)
1. **Table UI Enhancements - Test IDs Added**
   - Added `data-testid` attributes to several table components for better testability:
     - `add-column-button` for the column addition button
     - `add-row-button` for the row addition button
     - `drag-column-handle` for column drag handles
     - `drag-row-handle` for row drag handles

2. **New Test Infrastructure**
   - Added new testing utilities in `tests/kit/src/bs/`:
     - `misc.ts`: Added `waitNextFrame` utility function for handling animation frame timing in tests
     - `table.ts`: Added comprehensive table testing utilities including:
       - `createTable`: Creates a new table with initial cells
       - `getCellText`: Retrieves text from a specific table cell
       - `inputToCell`: Inputs text into a specific table cell
       - `clickDeleteButtonInTableMenu`: Handles table deletion operations

3. **New Collaboration Test**
   - Added a new test file `tests/affine-local/e2e/blocksuite/table/collab.spec.ts` that tests table collaboration features:
     - Tests synchronization between two pages (A and B)
     - Verifies table operations sync correctly:
       - Adding columns and rows
       - Inputting cell content
       - Deleting columns and rows
     - Validates cell content consistency across both pages
     - Tests the complete table manipulation workflow in a collaborative setting

4. **Package Configuration Update**
   - Modified `tests/kit/package.json` to expose new test utilities:
     - Added new export mapping: `"./bs/*": "./src/bs/*.ts"` to make the new table testing utilities accessible

This PR primarily focuses on improving table testing infrastructure and adding comprehensive collaboration tests for the table functionality, while also enhancing component testability through data-test-ids.
2025-02-28 04:37:12 +00:00
pengx17 cd0bec5d31 fix(core): at menu ux (#10485)
fix AF-2285

1. loading icon will be rendered to the group name
2. make the focused item more stable
2025-02-28 02:34:29 +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
L-Sun 2732b96d00 fix(editor): overflow of embed github card in edgeless note (#10442)
This PR fixes the overflow of the `embed-github-card` inside edgeless notes.

https://github.com/user-attachments/assets/21775d0f-e4c8-4fcc-86d8-aafb27033358
2025-02-26 09:33:57 +00:00
fundon c058f94e15 chore(editor): improve color formatting tests (#10429) 2025-02-26 08:19:54 +00:00
CatsJuice e1fd8f5d80 fix(core): correctly toggle visibility of starter-bar based on doc.isEmpty (#10439) 2025-02-26 07:49:51 +00:00
Cats Juice 09cc5c392b refactor(core): new workspace selector and create dialog (#10323) 2025-02-21 17:16:38 +08:00
Saul-Mirone adcc6b578c refactor(editor): move editor components to frontend core (#10335)
### TL;DR
Moved editor components from BlockSuite presets to AFFiNE core and updated imports accordingly.

### What changed?
- Relocated `EdgelessEditor` and `PageEditor` components from BlockSuite presets to AFFiNE core
- Removed basic editor examples from playground
- Updated import paths across the codebase to reference new component locations
- Added editor effects registration in AFFiNE core
- Removed editor exports from BlockSuite presets

### How to test?
1. Launch the application
2. Verify both page and edgeless editors load correctly
3. Confirm editor functionality remains intact including:
   - Document editing
   - Mode switching
   - Editor toolbars and controls
   - Multiple editor instances

### Why make this change?
This change better aligns with AFFiNE's architecture by moving editor components closer to where they are used. It reduces coupling with BlockSuite presets and gives AFFiNE more direct control over editor customization and implementation.
2025-02-21 04:28:54 +00:00
Saul-Mirone 90b0982dd3 fix(editor): hide edgeless only note in synced doc block (#10277)
Closes: [BS-2616](https://linear.app/affine-design/issue/BS-2616/embed-view-%E5%B1%95%E7%A4%BA%E4%B8%8D%E8%AF%A5%E5%87%BA%E7%8E%B0%E7%9A%84-note-%E5%86%85%E5%AE%B9)
2025-02-19 08:40:26 +00:00
donteatfriedrice 319d909ac8 fix(editor): paste surface-ref block to another doc as embed-linked-doc block (#10274)
[BS-2155](https://linear.app/affine-design/issue/BS-2155/复制-insert-frame-group-粘贴后,应当变为-block-ref-link)
2025-02-19 07:02:27 +00:00
donteatfriedrice 15e9acefc2 fix(editor): paste when select multiple block texts (#10227)
[BS-2512](https://linear.app/affine-design/issue/BS-2512/选中多段粘贴,多段只有第一段会被replace,这个bug还在)
2025-02-18 12:13:55 +00:00
Flrande cedee0a1b2 fix(editor): split at the start of list with children (#10244) 2025-02-18 09:10:00 +00:00
L-Sun 011c18de8b fix(editor): hide collpased content during dragging note (#10133)
Close [BS-2531](https://linear.app/affine-design/issue/BS-2531/%E6%8B%96%E5%8A%A8%E6%8A%98%E5%8F%A0%E7%9A%84note%E6%97%B6%EF%BC%8C%E4%B8%8D%E6%98%BE%E7%A4%BA%E9%9A%90%E8%97%8F%E5%86%85%E5%AE%B9), [BS-2536](https://linear.app/affine-design/issue/BS-2536/page-block%E9%A1%B6%E9%83%A8toolbar)
2025-02-13 04:18:11 +00:00
L-Sun 54d194afe7 fix(editor): set edgeless note style will override collapse state (#10098)
Close [BS-2489](https://linear.app/affine-design/issue/BS-2489/%E6%94%B9%E5%8F%98note-style%E4%BC%9A%E9%87%8D%E7%BD%AEcollapse%E7%8A%B6%E6%80%81)
2025-02-11 14:29:25 +00:00
L-Sun 0b3c7a578e fix(editor): collapsed page block visibility (#10097)
This PR fixed that doc title is not hidden when page block is collapsed
2025-02-11 14:29:24 +00:00
L-Sun 42bdae16fb fix(editor): only render emoji in page block header (#10096) 2025-02-11 14:29:23 +00:00
pengx17 fd25cd875b feat: focus the create page item when query returns no result in at menu (#10060)
fix AF-2191
2025-02-10 15:51:56 +00:00
CatsJuice f774868f0e feat(core): make some tabs in sidebar persistent for all docs page (#10014)
close AF-2164

![CleanShot 2025-02-07 at 14.23.36.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/deb15a06-32e9-40bf-8a15-07a3c2fa8227.gif)
2025-02-10 14:58:27 +00:00
L-Sun 9f56a21d8a feat(editor): add animation for switching to edgeless mode firstly (#10021)
Close [BS-2327](https://linear.app/affine-design/issue/BS-2327/page-block-%E5%9C%A8-edgeless-%E5%88%87%E6%8D%A2%E7%BC%A9%E6%94%BE%E5%8A%A8%E7%94%BB)

### What Changes:
- Add a zoom animation when switching to edgeless mode firstly
- Move viewport record from `sessionStorage` to `localStorage`

https://github.com/user-attachments/assets/dac11aab-76bd-44b1-8c0e-4a8a10919841
2025-02-10 07:41:10 +00:00
EYHN 92f4f0c2d9 feat(core): guard service (#9816) 2025-02-09 23:26:38 +00:00
pengx17 9fd547d484 chore(core): upload flaky test traces (#9974) 2025-02-07 15:15:45 +08:00
JimmFly e68bdbde3e feat(core): add self host team plan (#9569) 2025-02-07 03:35:24 +00:00
L-Sun 891d9df0b1 feat(editor): show doc title in page block (#9975)
Close [BS-2392](https://linear.app/affine-design/issue/BS-2392/page-block-需要显示文章title)

### What Changes
- Add `<doc-title>` to edgeless page block (a.k.a the first page visible note block)
- Refactors:
  - Move `<doc-title>` to `@blocksuite/affine-component`, but you can aslo import it from `@blocksuite/preset`
  - Extract `<edgeless-note-mask>` and `<edgeless-note-background>` from `<affine-edgeless-note>` to a seperate file
  - Rewrite styles of `<affine-edgeless-note>` with `@vanilla-extract/css`

https://github.com/user-attachments/assets/a0c03239-803e-4bfa-b30e-33b919213b12
2025-02-06 21:18:28 +00:00
pengx17 d7da12597a fix(core): use divider component to replace height dividers (#9986) 2025-02-06 10:37:05 +00:00
Oleg e3fac97b9b fix(web): minor bug fixes (#9696)
Co-authored-by: Mirone <Saul-Mirone@outlook.com>
2025-01-27 14:21:41 +09:00
L-Sun 829980bace refactor(editor): toc dragging with std.dnd (#9883)
Close [BS-2458](https://linear.app/affine-design/issue/BS-2458/toc-dnd重构)

### What Changes
- Refactor toc note card dnd with `std.dnd`
- Extract note display mode change to command `changeNoteDisplayMode`
  - It will reorder notes when the display mode changed from `EdgelessOnly` to page mode visible (a.k.a `DocOnly` or `Both`)
2025-01-24 13:27:17 +00:00
L-Sun 02bcecde72 refactor(editor): simplify TOC implementation with signal and context (#9873)
### What Changes
1. Used `@preact/signal` and `@lit/context` to simplify repetitive passing of properties of TOC components,
2. Fixed TOC invalid when editor changed, such as click new page button.
2025-01-23 17:01:04 +08:00
L-Sun 4839f0f369 refactor(editor): shadowless TOC with valilla extract css (#9856)
Close [BS-2474](https://linear.app/affine-design/issue/BS-2474/使用shadowlesselement重构toc)

This PR refactor TOC with `ShadowlessElement` and  `@valilla-extract/css`
2025-01-22 16:24:31 +00:00
L-Sun 16d4430ec9 test(editor): move tests of toc to affine (#9833) 2025-01-21 13:34:59 +00:00
Flrande b6a8d644f8 test(editor): add tests for heading toggle (#9820) 2025-01-21 09:35:33 +00:00