Commit Graph

90 Commits

Author SHA1 Message Date
doodlewind
7b1dfb7ee8 refactor(editor): reduce dom query per refresh (#10319) 2025-02-20 10:01:13 +00:00
fundon
adc003862b fix(editor): image size and xywh when converting attachment to image (#10200)
In Edgeless, the image size should be read when converting attachment to image:

* fix `size`
* fix `xywh`
2025-02-20 05:16:21 +00:00
doodlewind
b38abcb59c perf(editor): avoid recreation of Intl.Segmenter (#10295)
<img width="537" alt="image" src="https://github.com/user-attachments/assets/43e54d94-6228-4c26-b3d0-cf4725b251e4" />
2025-02-20 03:55:57 +00:00
zzj3720
ba91b36cc3 feat(editor): add block creation tracking (#10294)
fix: PD-2090
2025-02-20 02:25:29 +00:00
doodlewind
676ccc9094 refactor(editor): allow force refresh in worker renderer (#10289) 2025-02-19 14:23:45 +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
Oleg
b20d316d60 fix(editor): ui bugs in linked document embed view (#10105)
Co-authored-by: Mirone <Saul-Mirone@outlook.com>
2025-02-18 23:29:58 +08:00
Saul-Mirone
2f04e3180c refactor: move utils and cleanup test helpers (#10261) 2025-02-18 14:03:51 +00:00
L-Sun
e639f08b71 chore(editor): remove page block feature flag (#10251) 2025-02-18 09:25:05 +00:00
doouding
88095a87a8 fix: create linked-doc block when content can't be drop as gfx block (#10250) 2025-02-18 08:40:57 +00:00
L-Sun
85e413f8c8 chore(editor): add telemetry track to display mode of note (#10192)
Close [BS-2468](https://linear.app/affine-design/issue/BS-2468/analytics-for-page-block-polish)
2025-02-17 03:23:55 +00:00
doodlewind
1476ca922b refactor(editor): simplify worker renderer message and canvas transfer (#10199)
- Fixed frame delay on panning.
- Removed redundant worker message.
- Removed redundant offscreen bitmap transfer.
- Refactored logic using a clearer `refresh` method entry.
- Extracted plain utils.
2025-02-17 02:35:28 +00:00
Alexey Lysenko
769547c2d5 fix(editor): support more divider markdown shortcut (#10139) 2025-02-14 10:13:40 +08:00
L-Sun
9a17422d36 fix(editor): wrong position of remote selection and at menu in edgeless (#10137)
Close [BS-2552](https://linear.app/affine-design/issue/BS-2552/menu-loading-时滚动,定位错误), [BS-2490](https://linear.app/affine-design/issue/BS-2490/note-block-的menu的输入阴影错位), [BS-2300](https://linear.app/affine-design/issue/BS-2300/at-menu的输入阴影在暗黑模式看不见)

### What  Changes
- fix the position of remote selection mask and @ menu input mask in edgeless
- fix the position of @ menu is no updated during edgeless viewport change
- update @ menu mask color in dark mode

### Before
https://github.com/user-attachments/assets/f44f618e-a791-497a-9f53-74824fe48dea

### After
https://github.com/user-attachments/assets/5d87b999-deae-4435-9b8b-4cdf55393395
2025-02-13 01:56:01 +00:00
donteatfriedrice
30612de1ad fix(core): wrap code in ai chat (#10108)
[BS-2540](https://linear.app/affine-design/issue/BS-2540/ai-chat-中-code-block-需要默认换行)
2025-02-12 09:43:52 +00:00
doodlewind
d021e4cddc refactor(editor): mount worker renderer in editor host (#10055)
This would allow for easier integration with current test runner, since the two column layout is removed.

The `ViewportTurboRender` canvas and its debug UI are only enabled if the extension is added, which won't affect the AFFiNE entry.

<img width="945" alt="image" src="https://github.com/user-attachments/assets/dc82daa4-cbed-4eb9-9660-28c3f7d35722" />
2025-02-11 14:12:41 +00:00
doodlewind
3062bd0771 refactor(editor): migrate viewport renderer to extension (#10094)
This removes `renderer.setHost(host)`
2025-02-11 11:37:31 +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
Yifeng Wang
53e5726d36 refactor(editor): move worker renderer to affine shared (#10081) 2025-02-11 14:16:17 +08:00
zzj3720
c78d6b81c6 feat(editor): table block supports drag-and-drop sorting (#10065)
close: BS-2477
2025-02-10 14:14:53 +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
L-Sun
459972fe6c fix(editor): add missing zod schema for edgeless frame (#10024)
Related to https://github.com/toeverything/AFFiNE/pull/9970#discussion_r1944971309

### What changes:
- Add missing zod shcema for edgeless basic props
- Change `applyLastProps` to generic function for better return type inference of
- Fix: add `ZodIntersection` case to `makeDeepOptional`
2025-02-07 12:49:59 +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
Saul-Mirone
f3f6e8c6ac refactor(editor): remove attachment and image block service (#9909) 2025-01-28 20:53:23 +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
Oleg
e3fac97b9b fix(web): minor bug fixes (#9696)
Co-authored-by: Mirone <Saul-Mirone@outlook.com>
2025-01-27 14:21:41 +09:00
zzj3720
5a5779c05a feat(editor): simple table block (#9740)
close: BS-2122, BS-2125, BS-2124, BS-2420, PD-2073, BS-2126, BS-2469, BS-2470, BS-2478, BS-2471
2025-01-24 10:07:57 +00:00
doodlewind
872a578bf7 refactor(editor): move zod schema with model for non surface blocks (#9876) 2025-01-23 10:57:49 +00:00
donteatfriedrice
bf797c7a0c feat(editor): support footnote adapter (#9844)
[BS-2373](https://linear.app/affine-design/issue/BS-2373/适配-footnote-adapter)
2025-01-22 06:42:35 +00:00
doouding
1560880abd fix: drag embed block preview (#9791)
Fixes [BS-1518](https://linear.app/affine-design/issue/BS-1518/拖拽一个-embed-view-的-linked-doc,其-indicator-是错误的)
2025-01-20 09:25:05 +00:00
donteatfriedrice
4bd43a698c refactor(editor): refactor linkPreviewer as an extension and remove bookmark service (#9754)
[BS-2427](https://linear.app/affine-design/issue/BS-2427/移除-bookmark-block-service) [BS-2418](https://linear.app/affine-design/issue/BS-2418/linkpreviewer-重构成插件)
2025-01-20 04:18:00 +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
L-Sun
ad814a0f4f feat(editor): add sidebar service (#9761) 2025-01-17 23:42:50 +08:00
donteatfriedrice
df910d7013 feat(editor): add affine inline footnote (#9745)
[BS-2369](https://linear.app/affine-design/issue/BS-2369/新增-affinetextattribute-footnote)  [BS-2370](https://linear.app/affine-design/issue/BS-2370/支持-footnote-自定义渲染行内内容) [BS-2372](https://linear.app/affine-design/issue/BS-2372/提供-footnoteconfigextension) [BS-2375](https://linear.app/affine-design/issue/BS-2375/footnote-自定义渲染-popup)

### Add new AffineTextAttribute: footnote

```
/**
 * FootNote is used to reference a doc, attachment or url.
 */
export interface AffineTextAttributes {
  ...
  footnote?: {
    label: string; // label of the footnote
    reference: {
      type: 'doc' | 'attachment' | 'url'; // type of reference
      docId?: string; // the id of the reference doc
      url?: string; //  the url of the reference network resource
      blobId?: string; // the id of the reference attachment
      fileName?: string; // the name of the reference attachment
      fileType?: string; // the type of the reference attachment
    }
  } | null
}
```

### FootNoteNodeConfigProvider Extension

#### FootNoteNodeConfig Type Definition

```
type FootNoteNodeRenderer = (
  footnote: FootNote,
  std: BlockStdScope
) => TemplateResult<1>;

type FootNotePopupRenderer = (
  footnote: FootNote,
  std: BlockStdScope,
  abortController: AbortController
) => TemplateResult<1>;

export interface FootNoteNodeConfig {
  customNodeRenderer?: FootNoteNodeRenderer;
  customPopupRenderer?: FootNotePopupRenderer;
  interactive?: boolean;
  hidePopup?: boolean;
}
```

#### FootNoteNodeConfigProvider Class

```
export class FootNoteNodeConfigProvider {
  private _customNodeRenderer?: FootNoteNodeRenderer;
  private _customPopupRenderer?: FootNotePopupRenderer;
  private _hidePopup: boolean;
  private _interactive: boolean;

  get customNodeRenderer() {
    return this._customNodeRenderer;
  }

  get customPopupRenderer() {
    return this._customPopupRenderer;
  }

  get doc() {
    return this.std.store;
  }

  get hidePopup() {
    return this._hidePopup;
  }

  get interactive() {
    return this._interactive;
  }

  constructor(
    config: FootNoteNodeConfig,
    readonly std: BlockStdScope
  ) {
    this._customNodeRenderer = config.customNodeRenderer;
    this._customPopupRenderer = config.customPopupRenderer;
    this._hidePopup = config.hidePopup ?? false;
    this._interactive = config.interactive ?? true;
  }

  setCustomNodeRenderer(renderer: FootNoteNodeRenderer) {
    this._customNodeRenderer = renderer;
  }

  setCustomPopupRenderer(renderer: FootNotePopupRenderer) {
    this._customPopupRenderer = renderer;
  }

  setHidePopup(hidePopup: boolean) {
    this._hidePopup = hidePopup;
  }

  setInteractive(interactive: boolean) {
    this._interactive = interactive;
  }
}
```

#### FootNoteNodeConfigProvider Extension

```
export const FootNoteNodeConfigIdentifier =
  createIdentifier<FootNoteNodeConfigProvider>('AffineFootNoteNodeConfig');

export function FootNoteNodeConfigExtension(
  config: FootNoteNodeConfig
): ExtensionType {
  return {
    setup: di => {
      di.addImpl(
        FootNoteNodeConfigIdentifier,
        provider =>
          new FootNoteNodeConfigProvider(config, provider.get(StdIdentifier))
      );
    },
  };
}
```

The footnote node can be extended by this extension.

### FootnoteInlineSpec

```
export const FootNoteInlineSpecExtension = InlineSpecExtension(
  'footnote',
  provider => {
    const std = provider.get(StdIdentifier);
    const config =
      provider.getOptional(FootNoteNodeConfigIdentifier) ?? undefined;
    return {
      name: 'footnote',
      schema: FootNoteSchema.optional().nullable().catch(undefined),
      match: delta => {
        return !!delta.attributes?.footnote;
      },
      renderer: ({ delta }) => {
        return html`<affine-footnote-node
          .delta=${delta}
          .std=${std}
          .config=${config}
        ></affine-footnote-node>`;
      },
      embed: true,
    };
  }
);
```
2025-01-17 09:38:43 +00: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
L-Sun
94c9717a35 feat(editor): edgeless page block toolbar (#9707)
Close [BS-2315](https://linear.app/affine-design/issue/BS-2315/page-block-header)

### What Changes
- Add header toolbar to page block (the first note in canvas)
- Add e2e tests
- Add some edgeless e2e test utils.  **The package `@blocksuite/affine` was added to `"@affine-test/kit"`**
2025-01-15 12:04:44 +00:00
donteatfriedrice
4f421efb22 fix(editor): init default theme observer value according to data-theme (#9698) 2025-01-15 04:04:06 +00: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
Mirone
446b31b621 refactor(editor): rename job to transformer (#9639) 2025-01-11 12:04:07 +08:00
fundon
0b3dba614d perf(editor): optimize the search for the closest element (#9587)
Closes: [BS-2275](https://linear.app/affine-design/issue/BS-2275/拖拽-indicator-查找优化)
2025-01-10 08:21:10 +00:00
Saul-Mirone
126ab18967 feat(editor): selection as store extension (#9605) 2025-01-09 11:49:23 +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
d21ef47ae8 chore(editor): rename std.doc to std.store (#9596) 2025-01-09 04:16:28 +00:00
Saul-Mirone
3683297ccf feat(editor): add feature flag service (#9592) 2025-01-08 15:46:31 +00:00
Saul-Mirone
5842d45ab1 feat(editor): merge store and blocks (#9591) 2025-01-08 13:01:19 +00:00
L-Sun
440239809c refactor(editor): refactor page note empty checker (#9570)
Close [BS-2320](https://linear.app/affine-design/issue/BS-2320/内容为空的状态判断)
2025-01-07 11:24:40 +00:00
donteatfriedrice
52f2e8d5d5 refactor(editor): surface markdown adapter extensionalize (#9560)
[BS-2212](https://linear.app/affine-design/issue/BS-2212/adapter-extension化修复)
2025-01-07 03:14:08 +00:00
donteatfriedrice
69e9aa087e refactor(editor): extract mix-text adapter to shared (#9559) 2025-01-07 03:14:07 +00:00
fundon
69e73af2a8 refactor(editor): add native clipboard extension (#9502)
Closes: [BS-2239](https://linear.app/affine-design/issue/BS-2239/不应该通过window注入affine的api)
2025-01-06 15:36:43 +00:00