Close [BS-3480](https://linear.app/affine-design/issue/BS-3480/event-tracking)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added telemetry tracking to toolbar actions for embedding documents, duplicating notes, and toggling note display modes.
- Telemetry events now track when new note blocks are created from drag-and-drop actions on the whiteboard.
- **Chores**
- Improved event tracking for user interactions to enhance analytics and usage insights.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a new slider component for line width selection, providing a more interactive and streamlined UI.
- Added support for using the slider component across relevant panels.
- **Improvements**
- Simplified the line width selection panel for easier use and improved maintainability.
- Enhanced event handling to prevent dropdowns from closing when interacting with the panel.
- **Bug Fixes**
- Improved event propagation control within the line styles panel.
- **Chores**
- Updated package exports to include the new slider component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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 -->
Close [BS-3400](https://linear.app/affine-design/issue/BS-3400/ui-issues)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- The "View in Page" button has been renamed to "Open in Page" and now uses a new icon for improved clarity.
- The menu for embedded synced documents is now integrated directly into the Open button for a more streamlined interface.
- **Style**
- Improved spacing and visual alignment in edgeless block headers, including dedicated styling for title icons and buttons.
- Updated toolbar icon for better visual consistency.
- Added background styling for embedded linked document blocks.
- **Localization**
- Updated translation keys and text to reflect the "Open in Page" terminology across all supported languages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR make out-of-viewport but selected edgeless block keep active, since the selected block may still have some user interactions on the DOM. For example, when hover on a selected note and scroll viewport by wheel to view its hidden content, the note should not be hidden (a.k.a idel).
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Updated viewport logic to keep selected items visible instead of only those being edited. Visibility now depends on selection status rather than editing state.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Bug Fixes**
- Improved stability of the toolbar menu by preventing errors when user information is unavailable.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [BS-3388](https://linear.app/affine-design/issue/BS-3388/embed-doc-拖入后的初始高度不要超过800，不要限制用户随后的调整空间)
This PR impl a extension which initialize the height of added `affine-embed-edgeless-synced-doc-block` to fit its content
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Improved handling of embedded synced document block height to better fit content within edgeless mode.
- **Tests**
- Added an end-to-end test to verify correct height adjustment for embedded synced documents in edgeless mode.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [BS-3288](https://linear.app/affine-design/issue/BS-3288/从note转换-linked-doc-时，默认把note的第一行填入doc拟定的标题)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- When converting a note block to a linked document, the initial document title now uses the first paragraph in the note (if available) as a placeholder.
- **Tests**
- Updated tests to verify that the linked document creation modal pre-fills the title with the note's first paragraph and checks for correct paragraph order.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [BS-3268](https://linear.app/affine-design/issue/BS-3268/edgeless-下，-dark-mode-embed的配色应该更加清晰)
Close [BS-3067](https://linear.app/affine-design/issue/BS-3067/在embed上，添加split-view等相关的操作入口，基本接近page-block（见设计稿）)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced an interactive header for embedded synced documents with fold/unfold toggle, document opening, and multiple view options.
- Added info and copy link buttons for embedded synced documents and notes to improve document management and sharing.
- **Enhancements**
- Updated styles for embedded synced document blocks and headers for better visual consistency.
- Added new localization entries for header actions: "Fold", "Unfold", and "Open".
- Disabled redundant open document actions in toolbars, centralizing controls in the header.
- **Refactor**
- Unified header button components for notes and embedded synced documents into reusable components.
- Simplified header components by delegating button behaviors to shared components.
- **Bug Fixes**
- Fixed conditional rendering of editor content in embedded synced documents when folded.
- **Chores**
- Upgraded theme dependency version from "^1.1.12" to "^1.1.14" across multiple packages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [BS-3066](https://linear.app/affine-design/issue/BS-3066/优化长note的展示和折叠)
- Enhanced the visibility behavior of hidden content in edgeless notes by:
- Showing hidden content when a note is being edited, even when it's outside the viewport
- Improving hover behavior with a delay when leaving from the bottom of the note
- Adding proper cleanup of hover timeouts when the component is disconnected
- Optimizing the viewport element to keep editing blocks or elements visible
## Testing
- Added new E2E test cases covering:
- Hover behavior on selected notes
- Content visibility during editing
- Viewport scrolling behavior
- Edge cases for content visibility
## Impact
This change improves the user experience when working with collapsed notes in edgeless mode by making the content more accessible and preventing accidental content hiding during editing.
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Bug Fixes**
- Improved visibility of hidden content in edgeless notes when hovering near the bottom edge or editing the note, especially after resizing or clipping.
- **New Features**
- Enhanced hover behavior with delayed clearing based on mouse position to improve user experience.
- **Tests**
- Added new tests verifying hidden content visibility in edgeless notes during hover and editing, simulating diverse user interactions.
- **Chores**
- Added utilities to get and set viewport center for improved test control.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [BS-3175](https://linear.app/affine-design/issue/BS-3175/剪刀剪出来的段落，排序应该紧跟原段落，而不是排到所有段落最后)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Bug Fixes**
- Improved the accuracy of new note insertion, ensuring new notes are added immediately after the anchor note in the correct order.
- **Tests**
- Enhanced end-to-end tests for note slicing, including more interactions and assertions to verify correct note order and display modes after slicing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [BS-3339](https://linear.app/affine-design/issue/BS-3339/一个frame插入到page之后大的离谱)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Improvements**
- Enhanced the accuracy and responsiveness of viewport and reference content rendering for surface references.
- Adjusted padding for a more consistent viewing experience.
- Improved handling of referenced elements to ensure smoother updates and display.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Close [BS-3357](https://linear.app/affine-design/issue/BS-3357/duplicate-note-注意设置z轴的数据)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Duplicating an edgeless note now ensures the new note appears above other elements in the stacking order.
- **Tests**
- Added a test to verify that duplicated edgeless notes are rendered above existing elements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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.
### What Changes
- Refactors the `notify` function call with undo button. It is called `notifyWithUndo`, which can associate the visibility of the `NotificationCard` with the top undo item in history stack, such as undo by shortcut `Cmd+Z`.
- change icon of the "Insert into page" button. Close [BS-3267](https://linear.app/affine-design/issue/BS-3267/frame和group的insert-into-page图标也更换一下)
### What Changes
- fixed keyboard service can not be initialized since a anonymous `BSKeyboardWithActionService` class was provider to di
- fixed tool panel was not closed when focus on other pragraph by clicking
- optimized code structure of fallback `show` and `hide` of keyboard
This PR addresses an issue where queries cannot be performed in the mobile menu, particularly on Android devices. The root cause was that the `event.key` of keypress returns 'Unidentified' on Android, which prevented proper query handling.
Changes made:
- Replaced the keydown event observer with a beforeinput event listener
- Removed unnecessary keyboard event handling code that was causing issues
Close [BS-3029](https://linear.app/affine-design/issue/BS-3029/frame-里面的-shape-没办法进入文本编辑模式)
Close [BS-3082](https://linear.app/affine-design/issue/BS-3082/按s切换至shape工具，在白板上点击会创建两个shape)
Close [BS-3091](https://linear.app/affine-design/issue/BS-3082/按s切换至shape工具，在白板上点击会创建两个shape)
## Fix Shape Tool Issues
This PR addresses several issues with the shape and mindmap tools functionality in the editor:
1. **Fix text editing after mode switching**: Resolves an issue where users couldn't edit text in shapes after switching editor modes. The fix ensures the edgeless block is properly retrieved when double-clicking on a shape.
2. **Improve tool switching behavior**: Fixes issues with tool overlays not showing or being repeated when switching between tools. This includes:
- Properly handling tool overlay visibility
- Ensuring only one tool is active at a time when using keyboard shortcuts
- Adding proper cleanup when switching tools
3. **Add comprehensive tests**: Adds new test cases to verify:
- Shape creation with keyboard shortcuts
- Shape text editing after mode switching
- Tool switching behavior with keyboard shortcuts
Close [BS-2917](https://linear.app/affine-design/issue/BS-2917/【移动端】ios-唤起键盘的edge-case)
This PR fixes an issue where the keyboard cannot be re-triggered on iOS devices after the keyboard toolbar is hidden or executing some actions in keyboard toolbar.
Key changes:
- Preserve and restore the initial input mode when keyboard toolbar shows/hides
- Improve virtual keyboard service interface to better handle keyboard state
- Add proper cleanup of input mode state in component lifecycle
Close [BS-2866](https://linear.app/affine-design/issue/BS-2866/presentation-mode中的note消失)
## Problem
When using RequestAnimationFrame (RAF) for GFX block updates, there was a timing issue where the transform update would lag behind the RAF callback, causing the block to display with the previous frame's transform state.
## Solution
1. Refactored the block state management to use signals for better reactivity
2. Moved block visibility state management from `viewport-element.ts` to `gfx-block-component.ts`
3. Added `transformState$` signal to track block state
4. Synchronized transform updates with RAF using `effect` to ensure updates happen in the correct frame
5. Added test case to verify note visibility in presentation mode
### 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
Close [BS-2744](https://linear.app/affine-design/issue/BS-2744/slash-menu%E6%8F%92%E4%BB%B6%E5%8C%96%EF%BC%9Aaction%E6%B3%A8%E5%86%8C%E5%85%A5%E5%8F%A3)
This PR mainly focus on providing an entry point for configuring the SlashMenu feature. Therefore, it strives to retain the original code to ensure that the modifications are simple and easy to review. Subsequent PRs will focus on moving different configurations into separate blocks.
### How to use?
Here is the type definition for the slash menu configuration. An important change is the new field `group`, which indicates the sorting and grouping of the menu item. See the comments for details.
```ts
// types.ts
export type SlashMenuContext = {
std: BlockStdScope;
model: BlockModel;
};
export type SlashMenuItemBase = {
name: string;
description?: string;
icon?: TemplateResult;
/**
* This field defines sorting and grouping of menu items like VSCode.
* The first number indicates the group index, the second number indicates the item index in the group.
* The group name is the string between `_` and `@`.
* You can find an example figure in https://code.visualstudio.com/api/references/contribution-points#menu-example
*/
group?: `${number}_${string}@${number}`;
/**
* The condition to show the menu item.
*/
when?: (ctx: SlashMenuContext) => boolean;
};
export type SlashMenuActionItem = SlashMenuItemBase & {
action: (ctx: SlashMenuContext) => void;
tooltip?: SlashMenuTooltip;
/**
* The alias of the menu item for search.
*/
searchAlias?: string[];
};
export type SlashMenuSubMenu = SlashMenuItemBase & {
subMenu: SlashMenuItem[];
};
export type SlashMenuItem = SlashMenuActionItem | SlashMenuSubMenu;
export type SlashMenuConfig = {
/**
* The items in the slash menu. It can be generated dynamically with the context.
*/
items: SlashMenuItem[] | ((ctx: SlashMenuContext) => SlashMenuItem[]);
/**
* Slash menu will not be triggered when the condition is true.
*/
disableWhen?: (ctx: SlashMenuContext) => boolean;
};
// extensions.ts
/**
* The extension to add a slash menu items or configure.
*/
export function SlashMenuConfigExtension(ext: {
id: string;
config: SlashMenuConfig;
}): ExtensionType {
return {
setup: di => {
di.addImpl(SlashMenuConfigIdentifier(ext.id), ext.config);
},
};
}
```
Here is an example, `XXXSlashMenuConfig` adds a `Delete` action to the slash menu, which is assigned to the 8th group named `Actions` at position 0.
```ts
import { SlashMenuConfigExtension, type SlashMenuConfig } from '@blocksuite/affine-widget-slash-menu';
const XXXSlashMenuConfig = SlashMenuConfigExtension({
id: 'XXX',
config: {
items: [
{
name: 'Delete',
description: 'Remove a block.',
searchAlias: ['remove'],
icon: DeleteIcon,
group: '8_Actions@0',
action: ({ std, model }) => {
std.host.doc.deleteBlock(model);
},
},
],
},
});
```
L-Sun
