Commit Graph

58 Commits

Author SHA1 Message Date
L-Sun
a9ad01491c test(core): enable no-floating-promises rule for tests (#11915)
Sometimes, missing `await` in the test code can cause timing issues, leading to test failures. This PR enables the `no-floating-promises` rule for the test code to ensure that such errors do not occur.
2025-04-23 08:17:41 +00:00
Brooooooklyn
bfd3c64615 test: add mutex to clipboard copy & paste operation to reduce flaky (#11884) 2025-04-22 11:02:30 +00:00
EYHN
dd51180acb feat(core): replace onboarding template (#11768) 2025-04-18 02:31:13 +00:00
fundon
a46bb446e2 fix(editor): should keep color on custom color button (#11773)
Closes: [BS-3167](https://linear.app/affine-design/issue/BS-3167/自定义按钮显示错误)
2025-04-17 12:21:39 +00:00
fundon
8ca675b2ec fix(editor): improve pdf embed viewer UX (#11641)
Closes: [BS-3101](https://linear.app/affine-design/issue/BS-3101/pdf-embed-模式的选中框选-和点开看详情有比较大的问题)

### What's Changed!

* Fixed disable pointer event in native pdf viewer by dragging
* Disable opening peek view with pdf viewer in readonly and sharing modes
2025-04-15 08:51:02 +00:00
yoyoyohamapi
d494394c8d test(core): common setup for ai tests (#11644)
### TL:DR

By sharing initialization logic, accelerate test case execution.

### What Changed

* Global setup for copilot e2e
  * Login
  * Create Workspace
* Enable fully parallel for ci

### Optimization Comparison​

Comparing with PR [fix(core): ask AI input box in the whiteboard is blocked by the menu …](https://github.com/toeverything/AFFiNE/pull/11634):

|           |    Shard 1   |2|3|4|5|6|7|8|
| ------|----|----|----|----|----|---|---|--|
|Before|15min|14min|14min|14min|14min|13min|15min|10min|
|After|8min|11min|8min|8min|8min|8min|8min|7min|

### Trade-Off

Since all copilot use cases currently share a single user and workspace, some test cases need to focus on **isolation** and **independence**.
For example, when testing Embedding-related workflows:
* Different document contents should be used to avoid interference.
* After each test case execution, **cleanup** operations are also required.
* Some tests should be configured to **serial** mode.

```ts
test.describe.configure({ mode: 'serial' });

test.describe('AIChatWith/Collections', () => {
  test.beforeEach(async ({ loggedInPage: page, utils }) => {
    await utils.testUtils.setupTestEnvironment(page);
    await utils.chatPanel.openChatPanel(page);
    await utils.editor.clearAllCollections(page);

    await utils.testUtils.createNewPage(page);
  });

  test.afterEach(async ({ loggedInPage: page, utils }) => {
    // clear all collections
    await utils.editor.clearAllCollections(page);
  });

  test('should support chat with collection', async ({
    loggedInPage: page,
    utils,
  }) => {
    // Create two collections
    await utils.editor.createCollectionAndDoc(
      page,
      'Collection 1',
      'CollectionAAaa is a cute dog'
    );

    await utils.chatPanel.chatWithCollections(page, ['Collection 1']);
    await utils.chatPanel.makeChat(page, 'What is CollectionAAaa(Use English)');
    // ...
  });

  test('should support chat with multiple collections', async ({
    loggedInPage: page,
    utils,
  }) => {
    // Create two collections
    await utils.editor.createCollectionAndDoc(
      page,
      'Collection 2',
      'CollectionEEee is a cute cat'
    );

    await utils.editor.createCollectionAndDoc(
      page,
      'Collection 3',
      'CollectionFFff is a cute dog'
    );

    await utils.chatPanel.chatWithCollections(page, [
      'Collection 2',
      'Collection 3',
    ]);
    await utils.chatPanel.makeChat(
      page,
      'What is CollectionEEee? What is CollectionFFff?(Use English)'
    );
    // ...
  });
});

```

> CLOSE AI-51
2025-04-14 02:42:06 +00:00
fundon
afdc40b510 feat(editor): add shortcut to highlighter tool (#11604)
Closes: [BS-3092](https://linear.app/affine-design/issue/BS-3092/highlighter-快捷键)

### What's Changed!

* Added shortcut `⇧ P` to highlighter tool

[Screen Recording 2025-04-10 at 16.33.30.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/38aadc08-ed18-4b48-9d91-b4876d14a2d3.mov" />](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/38aadc08-ed18-4b48-9d91-b4876d14a2d3.mov)
2025-04-11 13:08:59 +00:00
L-Sun
aabb09b31f fix(editor): ime input error at empty line (#11636)
Close [BS-3106](https://linear.app/affine-design/issue/BS-3106/mac-chrom在空行使用ime输入,文档卡住)
2025-04-11 10:39:16 +00:00
donteatfriedrice
dbb8451adb test(core): add e2e test for share page copy function (#11555)
related pr https://github.com/toeverything/AFFiNE/pull/11538
To close [BS-1915](https://linear.app/affine-design/issue/BS-1915/public-page-页面应该允许选中和复制内容)
2025-04-10 06:34:15 +00:00
L-Sun
06497773a7 fix(editor): can not move carte at the end of inline element (#11558)
Close [BS-2922](https://linear.app/affine-design/issue/BS-2922/【移动端-ios】文档添加linked-page后,无法删除)
2025-04-09 08:07:02 +00:00
Saul-Mirone
780c35eabe fix(editor): prevent Tab key propagation outside editor (#11531)
Closes: BS-2964
2025-04-08 10:03:06 +00:00
Saul-Mirone
854569af2d refactor(editor): remove lasso tool (#11481) 2025-04-07 01:12:28 +00:00
forehalo
c8d22d97d5 refactor: webpack config (#11421) 2025-04-03 11:55:56 +00:00
Brooooooklyn
d31e0c0e71 ci: run some optimize on CI e2e (#11330) 2025-03-31 15:23:21 +00:00
EYHN
baf1aad412 fix(core): fix flaky e2e test (#11308) 2025-03-31 09:10:54 +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
L-Sun
c23b8f604b fix(editor): incorrect edgeless viewport in peek view (#11040)
### What Changes
- Fixed incorrect edgeless viewport display in peek view
  - Moved page block viewport fit animation logic from `EdgelessRootBlockComponent` to note config extension
  - Disabled page block viewport fit animation in peek view, using default `fitToScreen` instead
  - @doodlewind Fixed viewport resizing issues by adding a immediate update mechanism to ensure proper rendering during peek view operations.  The setViewportByBound is only called once during peek view initialization, so there are barely perf overhead.
- Updated related test cases
  - Refactored peek view test cases to make them clearer and more reliable
  - Added new test helper function `getViewportBound` for getting viewport boundary information
2025-03-26 09:29:05 +00:00
fundon
8b995ea420 chore(editor): remove edgeless element toolbar (#10900) 2025-03-20 02:08:21 +00:00
doouding
1c8d25bc29 feat: add ElementTransformManager for edgeless element basic manipulation (#10824)
### Overview:
We've been working with some legacy code in the default-tool and edgeless-selected-rect modules, which are responsible for fundamental operations like moving, resizing, and rotating elements. Currently, these operations are hardcoded, making it challenging to extend functionalities without diving deep into the code.

### What's Changing:
Introducing `ElementTransformManager` to streamline the handling of basic transformations (move, resize, rotate) while allowing the business logic to dictate when these actions occur.

Providing two ways to extend the transformations behaviour:
- Extends inside element view definition: Elements can decide how to handle move/resize events, such as enforcing size constraints.
- Extension mechanism provided by this manager: Adjust or completely override default drag behaviors, like snapping elements into alignment.

### Code Examples:
Delegate element movement to TransformManager:
```typescript
class DefaultTool {
  override dragStart(event) {
    if(this.dragType === DragType.ContentMoving) {
      const transformManager = this.std.get(TransformManagerIdentifier);
      transformManager.startDrag({ selectedElements, event });
    }
  }
}
```

 Enforce minimum width inside view definition:
```typescript
class EdgelessNoteBlock extends GfxBlockComponent {
  onResizeDelta({ dw, dh }) {
    const bound = this.model.elementBound;
    bound.w = Math.min(MAX_WIDTH, bound.w + dw);
    bound.h = Math.min(MAX_HEIGHT, bound.h + dh);
    this.model.xywh = bound.serialize();
  }
}
```

Use extension to implement element snapping:
```typescript
import { TransformerExtension } from '@blocksuite/std/gfx';

// Just extends the TransformerExtension
class SnapManager extends TransformerExtension {
  static override key = 'snap-manager';
  onDragInitialize() {
    return {
      onDragMove(context) {
        const { dx, dy } = this.getAlignmentMoveDistance(context.elements);
        context.dx = dx;
        context.dy = dy;
      }
    }
  }
}
```

### Others

The migration will be divided into several PRs. This PR mostly focus on refactoring elements movement part of `default-tool`.
- Delegate elements movement to `TransformManager`
- Rewrite the default tool extension into `TransformManager` extension
- Add drag handler interface to gfx view (both `GfxBlockComponent` and `GfxElementModelView`) to allow element to define how it gonna react on drag
2025-03-19 15:30:06 +00:00
pengx17
a016630a82 feat(electron): create recording through tray (#10526)
- added tray menu for controlling recording status
- recording watcher for monitoring system audio input events
2025-03-18 04:12:30 +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
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`](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
liuyi
61162c59fc refactor(server): permission (#10449) 2025-03-05 15:57:00 +08:00
Saul-Mirone
66d9d576e0 refactor(editor): add gfx entry in bs global package (#10612) 2025-03-04 12:46:50 +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
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
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
fengmk2
320875425c fix: replace all CRLF in email token (#10271) 2025-02-19 04:07:43 +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
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
pengx17
9fd547d484 chore(core): upload flaky test traces (#9974) 2025-02-07 15:15:45 +08:00
forehalo
7826e2b7c8 refactor(server): use feature model (#9932) 2025-02-05 10:27:26 +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
pengx17
699da97879 chore(electron): speed up electron tests (#9871) 2025-01-24 04:52:26 +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
pengx17
088ae0ac0a feat(electron): backup panel (#9738)
fix PD-2071, PD-2059, PD-2069, PD-2068
2025-01-22 22:52:31 +08:00
L-Sun
16d4430ec9 test(editor): move tests of toc to affine (#9833) 2025-01-21 13:34:59 +00:00
L-Sun
7400cf225f refactor(editor): highlight selected cards of TOC based on signal (#9807)
Close [BS-2314](https://linear.app/affine-design/issue/BS-2314/添加打开toc时,将note-block-高亮), [BS-1868](https://linear.app/affine-design/issue/BS-1868/toc-里面-note之间顺序可拖动性,在page和edgeless里面是不同的,这个是设计的行为么?)

This PR refactor the highlight logic of note cards of TOC panel:
- notes block selected in edgeless note
- notes block covered by text or block selection in page mode
- note cards selected in TOC for dragging

Other changes:
- remove not used codes
- add tests for highlight note cards
2025-01-21 07:50:57 +00:00
L-Sun
6ba802fb17 feat(editor): append note to page button (#9762)
Close [BS-2310](https://linear.app/affine-design/issue/BS-2310/note-display-in-page-%E7%9A%84%E8%A1%8C%E4%B8%BA), [BS-2312](https://linear.app/affine-design/issue/BS-2312/edgeless-note-%E7%9A%84-element-toolbar-%E6%B7%BB%E5%8A%A0display-in-page%E6%8C%89%E9%92%AE) and [BS-2313](https://linear.app/affine-design/issue/BS-2313/添加display-in-page的toast提示,以及打开toc的按钮)
2025-01-19 08:35:02 +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
doouding
99717196c5 refactor: rewrite blocksuite dnd (#9595)
### Changed

- Refactored BlockSuite drag-and-drop using @atlaskit/pragmatic-drag-and-drop/element/adapter.
- Updated block dragging to use the new drag-and-drop infrastructure.

### BlockSuite DND API

Access the BlockSuite drag-and-drop API via `std.dnd`. This is a lightweight wrapper around pragmatic-drag-and-drop, offering convenient generic types and more intuitive option names.

#### Drag payload structure
There's some constrain about drag payload. The whole drag payload looks like this:

```typescript
type DragPayload = {
  entity: {
    type: string
  },
  from: {
    at: 'blocksuite',
    docId: string
  }
}
```
- The `from` field is auto-generated—no need for manual handling.
- The `entity` field is customizable, but it must include a `type`.

All drag-and-drop methods accept a generic type for entity, ensuring more accurate payloads in event handlers.

```typescript
type BlockEntity = {
  type: 'blocks',
  blockIds: string[]
}

dnd.draggable<BlockEntity>({
  element: someElement,
  setDragData: () => {
    // the return type must satisfy the generic type
    // in this case, it's BlockEntity
    return {
      type: 'blocks',
      blockIds: []
    }
  }
});

dnd.monitor<BlockEntity>({
  // the arguments is same for other event handler
  onDrag({ source }) {
    // the type of this is BlockEntity
    source.data.entity
  }
})
```

#### Drop payload
When hover on droppable target. You can set drop payload as well. All drag-and-drop methods accept a second generic type for drop payload.

The drop payload is customizable. Additionally, the DND system will add an `edge` field to the final payload object, indicating the nearest edge of the drop target relative to the current drag position.

```typescript
type DropPayload = {
  blockId: string;
}

dnd.dropTarget<BlockEntity, DropPayload>({
  getData() {
    // the type should be DropPayload
    return {
      blockId: 'someId'
    }
  }
});

dnd.monitor<BlockEntity, DropPayload>({
  // drag over on drop target
  onDrag({ location }) {
    const target = location.current.dropTargets[0];

    // the type is DropPayload
    target.data;
    // retrieve the nearest edge of the drop target relative to the current drop position.
    target.data.edge;
  }
})
```
2025-01-16 12:36:58 +00:00