Commit Graph

12 Commits

Author SHA1 Message Date
congzhou09 478138493a fix(editor): invalid caret in note-edgeless-block on focus (#14229)
### Problem
●In edgeless mode, when starting to edit, `note-block` exhibits two
types of invalid caret behavior:
(1)**Title Region Misalignment**: Clicking on the title region
incorrectly generates the caret in the first line of the note content,
rather than in the title itself.
(2)**Vanishing Caret at Line End**: When clicking in the empty space
beyond the end of a text section, the caret appears momentarily at the
line's end but disappears immediately.
●The following video demonstrates these issues:


https://github.com/user-attachments/assets/db9c2c50-709f-4d32-912c-0f01841d2024


### Solution
●**Title Click Interception**: Added a check to determine if the click
coordinates fall in the title region. If so, the caret positioning is
now handled by a dedicated logic path. Otherwise, it falls back to the
existing note-content logic as before.
●**Range Normalization**: When the generated `range.startContainer` is
not a `TextNode`, try to find a most appropriate `TextNode` and update
the `range` accordingly.

### After
●The video below shows the behavior after this fix.


https://github.com/user-attachments/assets/b2f70b64-1fc6-4049-8379-8bcf3a488a05



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Clicking a page block title no longer creates unwanted paragraphs and
reliably focuses the title.
* Paragraph creation now occurs only when needed and focus is applied
only after successful creation.
* Click coordinates are clamped to container bounds to prevent misplaced
cursors or focus.

* **Improvements**
* Caret normalization: clicks place the caret at the last meaningful
text position for consistent single-cursor behavior.

* **Tests**
  * Added end-to-end coverage for caret placement and focus transitions.
* New ratio-based click/double-click test utilities and a helper for
double-clicking note bodies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-03-02 18:51:23 +08:00
Peng Xiao 056f2c1161 fix: should allow affine.pro to be embedded (#14285) 2026-01-20 23:33:28 +08:00
德布劳外 · 贾贵 6fd9524521 feat: ai apply ui (#12962)
## New Features
* **Block Meta Markdown Adapter**:Inject the Block's metadata into
Markdown.
* **UI**:Apply interaction
   * **Widget**
* Block-Level Widget: Displays the diffs of individual blocks within the
main content and supports accepting/rejecting individual diffs.
* Page-Level Widget: Displays global options (Accept all/Reject all).
   * **Block Diff Service**:Bridge widget and diff data
* Widget subscribes to DiffMap(RenderDiff) data, refreshing the view
when the data changes.
* Widget performs operations such as Accept/Reject via methods provided
by Service.
   * **Doc Edit Tool Card**:
     * Display apply preview of semantic doc edit
     * Support apply & accept/reject to the main content
* **Apply Playground**:A devtool for testing apply new content to
current

> CLOSE AI-274 AI-275 AI-276  AI-278 

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Introduced block-level markdown diffing with accept/reject controls
for insertions, deletions, and updates.
* Added block diff widgets for individual blocks and pages, featuring
navigation and bulk accept/reject actions.
* Provided a block diff playground for testing and previewing markdown
changes (development mode only).
* Added a new document editing AI tool component with interactive diff
viewing and change application.
* Supported rendering of the document editing tool within AI chat
content streams.

* **Improvements**
* Enhanced widget rendering in list, paragraph, data view, and database
blocks for improved extensibility.
* Improved widget flavour matching with hierarchical wildcard support
for more flexible UI integration.

* **Chores**
* Updated the "@toeverything/theme" dependency to version ^1.1.16 across
multiple packages.
* Added new workspace dependencies for core frontend packages to improve
module linkage.
* Extended global styles with visual highlights for deleted blocks in AI
block diff feature.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-07-08 03:44:44 +00:00
L-Sun f8587af001 fix(editor): incorrect height calculation of folded embed doc (#12348)
Fix [BS-3418](https://linear.app/affine-design/issue/BS-3418/折叠的embed-doc调整宽度时,会出现一个最小高度,不需要这个)

This PR keeps the content of embed-synced-doc rendered (but clipped) when it is collapsed, to ensure accuracy in height calculation of content.

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Bug Fixes**
  - Improved the display logic for embedded synced document editors, ensuring the editor and overlay are always rendered regardless of the folded state.

- **Tests**
  - Updated test assertions to more accurately check whether embedded editor content is within the viewport, enhancing reliability of visibility checks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-19 16:20:29 +00:00
L-Sun 6fabc0eb1f fix(editor): adjustment of scaled and folded synced doc (#12294)
Close [BS-3418](https://linear.app/affine-design/issue/BS-3418/折叠的embed-doc调整宽度时,会出现一个最小高度,不需要这个)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added support for dynamically scaling the height of embedded synced document blocks, including proper handling when folding and unfolding.
  - Introduced a new property to track the scaled height of folded synced document blocks.

- **Bug Fixes**
  - Improved accuracy of height calculations for synced document blocks by accounting for both viewport zoom and block scale.

- **Tests**
  - Enhanced end-to-end tests to consistently apply scaling before running size adjustment checks.
  - Added a utility function to simulate scaling elements with keyboard shortcuts during test execution.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-15 03:56:03 +00:00
L-Sun 3ebed1d5a8 chore(editor): adjust size of synced doc (#12163)
Close [BS-3418](https://linear.app/affine-design/issue/BS-3418/折叠的embed-doc调整宽度时,会出现一个最小高度,不需要这个)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Improved resizing and folding interactions for embedded synced documents in edgeless mode, including dynamic height calculation and enhanced drag-handle styling.
- **Bug Fixes**
  - Adjusted minimum height for synced document embeds to allow more compact display.
  - Ensured consistent width settings across embed cards.
- **Tests**
  - Added end-to-end tests covering folding, unfolding, and resizing behaviors for edgeless synced document embeds.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-14 05:17:42 +00:00
L-Sun 11dfc1d1df feat(editor): insert embed doc with quick search by default (#12165)
Close [BS-3404](https://linear.app/affine-design/issue/BS-3404/通过embed-doc时,插入的doc还是card-view,应该要默认embed-view)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added the ability to insert and display embedded synced documents, supporting different link types based on editor mode and user preferences.
  - Introduced new UI interactions and view options for embedded synced documents in edgeless mode.

- **Bug Fixes**
  - Updated UI selectors and preference keys to ensure consistent behavior and correct application of user settings.

- **Tests**
  - Added and updated end-to-end tests for embedding synced documents, including header interactions and viewport fitting.
  - Improved test coverage for quick search insertion and edgeless embed synced doc features.

- **Chores**
  - Renamed settings and updated exports to align with new embedding functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-08 10:21:33 +00:00
L-Sun 9baef237f2 test(core): add missing await for expect (#11900) 2025-04-23 04:55:18 +00:00
donteatfriedrice b8e7ca3214 test(editor): fix flaky embed iframe e2e test (#11530) 2025-04-08 08:37:12 +00:00
donteatfriedrice 43809838ef test(editor): add embed iframe block e2e tests (#11502)
Close [BS-2669](https://linear.app/affine-design/issue/BS-2669/iframe-embed-block-添加测试)
2025-04-07 09:43:36 +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
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