Close
[BS-3624](https://linear.app/affine-design/issue/BS-3624/page模式单选图片的时候希望有comment-按钮)
#### PR Dependency Tree
* **PR #13304** 👈
This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a comment button to the image and surface reference block
toolbars for easier commenting.
* **Refactor**
* Simplified array flattening operations across multiple components and
utilities by replacing `.map(...).flat()` with `.flatMap(...)`,
improving code readability and maintainability.
* **Bug Fixes**
* Improved comment creation logic to allow adding comments even when
selections exist.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
#### PR Dependency Tree
* **PR #13098** 👈
This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added support for comments on graphical elements, allowing users to
comment on both blocks and graphical elements within surfaces.
* Enhanced comment previews to include graphical elements in selection
summaries.
* Improved editor navigation to focus on commented graphical elements in
addition to blocks and inline texts.
* **Bug Fixes**
* Updated comment highlighting and management to consistently use the
new comment manager across all block and element types.
* **Refactor**
* Renamed and extended the comment manager to handle both block and
element comments.
* Streamlined toolbar configurations by removing outdated comment button
entries and adding a consolidated comment button in the root toolbar.
* **Tests**
* Disabled the mock comment provider integration in the test editor
environment to refine testing setup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
#### PR Dependency Tree
* **PR #12995** 👈
This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Introduced a new clipboard module, making clipboard-related
functionality available for external use.
* Added a comprehensive extension system for the comment editor,
supporting rich text features, widgets, and configurable options.
* **Bug Fixes**
* Improved stability by ensuring comment highlighting features and
toolbar event subscriptions handle missing dependencies gracefully,
preventing potential runtime errors.
* **Refactor**
* Simplified comment editor view manager setup for easier configuration
and maintenance.
* **Chores**
* Updated package exports to expose new clipboard modules and
configurations.
* Removed confirm modal and portal-related logic from the comment editor
component.
* Adjusted temporary store creation to omit adding an extra surface
block under the root page.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: [BS-3586](https://linear.app/affine-design/issue/BS-3586/复制白板图片，然后粘贴到-page，图片失败)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Copying a single selected image in edgeless mode now places the image directly onto the system clipboard as a native image blob for smoother pasting.
- **Bug Fixes**
- Enhanced clipboard handling to better manage image and text data inclusion, with improved fallback for snapshot HTML.
- **Tests**
- Added an end-to-end test verifying image copy-paste functionality between edgeless and page editor modes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: [BS-3564](https://linear.app/affine-design/issue/BS-3564/ui-embed-view-报错-ui-加-title)
Closes: [BS-3454](https://linear.app/affine-design/issue/BS-3454/点击-reload-后应该隐藏-attachment-embed-view-左下角-status（待新状态）)
<img width="807" alt="Screenshot 2025-05-28 at 17 23 26" src="https://github.com/user-attachments/assets/9ecc29f8-73c6-4441-bc38-dfe9bd876542" />
<img width="820" alt="Screenshot 2025-05-28 at 17 45 37" src="https://github.com/user-attachments/assets/68e6db17-a814-4df4-a9fa-067ca03dec30" />
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added support for retrying failed uploads of attachments and images, allowing users to re-upload files directly from the error status interface.
- The error status dialog now dynamically displays "Retry" for upload failures and "Reload" for download failures, with appropriate actions for each.
- **Enhancements**
- Improved clarity and consistency in file type display and icon usage for attachments and citations.
- Button labels in the attachment interface now have capitalized text for better readability.
- **Bug Fixes**
- Streamlined error handling and status updates for attachment and image uploads/downloads, reducing redundant UI elements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Related to: [BS-3559](https://linear.app/affine-design/issue/BS-3559/ui-%E5%9B%BE%E7%89%87-loading-%E5%8F%98%E9%87%8F%E6%9B%B4%E6%96%B0)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Style**
- Improved the appearance of image loading indicators by updating background and ring colors for a more consistent visual experience.
- **New Features**
- Added customization options for the loading icon's ring color.
- **Chores**
- Updated the "@toeverything/theme" dependency to version ^1.1.15 across multiple packages for improved consistency and compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: [BS-3555](https://linear.app/affine-design/issue/BS-3555/ui-attachment-loading-变量更新)
Closes: [BS-3559](https://linear.app/affine-design/issue/BS-3559/ui-图片-loading-变量更新)
### Dark
<img width="625" alt="Screenshot 2025-05-26 at 20 32 36" src="https://github.com/user-attachments/assets/93501e3d-8fc6-45f9-84a0-ac147e5c5f9f" />
### Light
<img width="623" alt="Screenshot 2025-05-26 at 20 32 25" src="https://github.com/user-attachments/assets/7d5bc128-6667-45b5-982d-dab3a22706a7" />
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Loading icons are now invoked as functions, allowing for more flexible and customizable rendering with parameters like size and progress.
- **Refactor**
- Replaced theme-dependent and static loading icon references with a unified `LoadingIcon()` component across multiple components and blocks.
- Removed legacy icon variants and simplified icon import statements, centralizing icon rendering logic.
- **Style**
- Updated styles for loading and reload buttons to use theme-aware CSS variables.
- Enlarged and repositioned loading indicators in image blocks for better visibility.
- **Bug Fixes**
- Achieved consistent loading icon rendering across various blocks and components by standardizing icon invocation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: [BS-3385](https://linear.app/affine-design/issue/BS-3385/markdown类型的导入，支持media文件和md文件不在同目录的情况)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added utility functions to resolve and normalize image file paths in markdown and HTML imports.
- Introduced middleware to provide full file path context during file import and transformation.
- Added new types for improved asset and file management in zip imports.
- **Refactor**
- Centralized and simplified image processing logic across HTML, Markdown, and Notion HTML adapters for improved maintainability.
- Enhanced type safety and clarity in file and asset handling during zip imports.
- **Tests**
- Added comprehensive tests for image file path resolution utility.
- **Documentation**
- Improved inline code comments explaining file path resolution logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### Changed
This pr split the old `edgeless-selected-rect` into four focused modules:
- `edgeless-selected-rect`: Provide an entry point for user operation on view layer only, no further logic here.
- `GfxViewInteractionExtension`: Allow you to plug in custom resize/rotate behaviors for block or canvas element. If you don’t register an extension, it falls back to the default behaviours.
- `InteractivityManager`: Provide the API that accepts resize/rotate requests, invokes any custom behaviors you’ve registered, tracks the lifecycle and intermediate state, then hands off to the math engine.
- `ResizeController`: A pure math engine that listens for pointer moves and pointer ups and calculates new sizes, positions, and angles. It doesn’t call any business APIs.
### Customizing an element’s resize/rotate behavior
Call `GfxViewInteractionExtension` with the element’s flavour or type plus a config object. In the config you can define:
- `resizeConstraint` (min/max width & height, lock ratio)
- `handleResize(context)` method that returns an object containing `beforeResize`、`onResizeStart`、`onResizeMove`、`onResizeEnd`
- `handleRotate(context)` method that returns an object containing `beforeRotate`、`onRotateStart`、`onRotateMove`、`onRotateEnd`
```typescript
import { GfxViewInteractionExtension } from '@blocksuite/std/gfx';
GfxViewInteractionExtension(
flavourOrElementType,
{
resizeConstraint: {
minWidth,
maxWidth,
lockRatio,
minHeight,
maxHeight
},
handleResize(context) {
return {
beforeResize(context) {},
onResizeStart(context) {},
onResizeMove(context) {},
onResizeEnd(context) {}
};
},
handleRotate(context) {
return {
beforeRotate(context) {},
onRotateStart(context) {},
onRotateMove(context) {},
onRotateEnd(context) {}
};
}
}
);
```
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added interaction extensions for edgeless variants of attachment, bookmark, edgeless text, embedded docs, images, notes, frames, AI chat blocks, and various embed blocks (Figma, GitHub, HTML, iframe, Loom, YouTube).
- Introduced interaction extensions for graphical elements including connectors, groups, mind maps, shapes, and text, supporting constrained resizing and rotation disabling where applicable.
- Implemented a unified interaction extension framework enabling configurable resize and rotate lifecycle handlers.
- Enhanced autocomplete overlay behavior based on selection context.
- **Refactor**
- Removed legacy resize manager and element-specific resize/rotate logic, replacing with a centralized, extensible interaction system.
- Simplified resize handle rendering to a data-driven approach with improved cursor management.
- Replaced complex cursor rotation calculations with fixed-angle mappings for resize handles.
- Streamlined selection rectangle component to use interactivity services for resize and rotate handling.
- **Bug Fixes**
- Fixed connector update triggers to reduce unnecessary updates.
- Improved resize constraints enforcement and interaction state tracking.
- **Tests**
- Refined end-to-end tests to use higher-level resize utilities and added finer-grained assertions on element dimensions.
- Enhanced mouse movement granularity in drag tests for better simulation fidelity.
- **Chores**
- Added new workspace dependencies and project references for the interaction framework modules.
- Extended public API exports to include new interaction types and extensions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **Refactor**
- Unified internal data access by replacing all references from `doc` to `store` across all components, blocks, widgets, and utilities. This affects how readonly state, block operations, and service retrieval are handled throughout the application.
- **Tests**
- Updated all test utilities and test cases to use `store` instead of `doc` for document-related operations.
- **Chores**
- Updated context providers and property names to reflect the change from `doc` to `store` for improved consistency and maintainability.
No user-facing features or behaviors have changed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Related to: [BS-3143](https://linear.app/affine-design/issue/BS-3143/更新-loading-和错误样式)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Introduced a unified resource controller for managing image and attachment resources, providing improved loading, error, and state handling.
- Added a visual loading indicator overlay to image blocks for better feedback during image loading.
- **Improvements**
- Simplified and centralized image and attachment state management, reducing redundant properties and manual state tracking.
- Updated fallback UI for image blocks with clearer titles, descriptions, and improved layout.
- Enhanced batch image block creation and download handling for improved efficiency.
- Refined image block accessibility with improved alt text and streamlined rendering logic.
- Centralized target model selection for image insertion in AI actions.
- Reordered CSS declarations without affecting styling.
- Improved reactive state tracking for blob upload/download operations in mock server.
- **Bug Fixes**
- Improved cleanup of object URLs to prevent resource leaks.
- Adjusted toolbar logic to more accurately reflect available actions based on image state.
- **Tests**
- Updated end-to-end tests to match new UI text and behaviors for image loading and error states.
- **Chores**
- Refactored internal logic and updated comments for clarity and maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Unified loading icon
* Removed loading icon on image block
* Fixed color of circle on loading icon
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Icons in image fallback and loading states now automatically adapt to the current theme (light or dark mode) for a more consistent visual experience.
- **Style**
- Updated loading, success, and error icons to support theming and improved their color assignments for better visibility in different themes.
- **Refactor**
- Replaced static icon usage across several components with dynamic, theme-aware icons to ensure consistent appearance throughout the app.
- Removed static SVG icon exports and replaced them with theme-aware icon functions for improved maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: [BS-3359](https://linear.app/affine-design/issue/BS-3359/重构-filesizelimitservice-支持-handle-文件超出限制)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added an "Upgrade" button to attachment blocks that appears when file size limits are exceeded, enabling users to view storage plans and upgrade.
- **Refactor**
- Unified file size limit handling across attachments and images for consistency.
- Redesigned file size limit service with improved integration and dependency injection.
- **Chores**
- Updated service registrations and dependency management for file size limit enforcement.
- Integrated a new file size limit extension that triggers storage plan dialogs and tracking events on limit exceedance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: [BS-3143](https://linear.app/affine-design/issue/BS-3143/更新-attachment-错误样式)
Closes: [BS-3341](https://linear.app/affine-design/issue/BS-3341/attachment-select状态ui调整)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Improved attachment block with unified reactive state handling for loading, errors, and downloads.
- Enhanced card layouts with modular rendering and dynamic buttons based on state.
- **Bug Fixes**
- Fixed UI state for "Embed view" action, now correctly disabled when not embedded.
- Resolved attachment card styling issues and text overflow with new utility classes.
- **Refactor**
- Streamlined attachment block rendering and state management for better performance and maintainability.
- Updated toolbar configuration for consistent parameter naming.
- Simplified embedded and open methods for improved clarity.
- Made internal functions private to reduce exported API surface.
- **Chores**
- Removed unused icon export and legacy upload tracking functions.
- Updated attachment utilities to use reactive state, added data refresh, and improved error handling.
- Refined image dimension handling for consistent resizing behavior.
- Improved test selectors to target focused attachment containers for better reliability.
- Refactored CSS to separate container and card styling and adopt theme-based colors consistently.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes: [BS-3303](https://linear.app/affine-design/issue/BS-3303/改進-pack-attachment-props-流程)
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Enhanced attachment and image uploads with improved file size validation and clearer notifications.
- Upload telemetry tracking added for attachments to monitor upload success or failure.
- **Refactor**
- Streamlined and unified the process of adding attachments and images, making uploads more reliable and efficient.
- Parameter names updated for clarity across attachment and image insertion features.
- **Documentation**
- Updated API documentation to reflect parameter name changes for consistency.
<!-- 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 pointer graphics module with tools and quick tool integration for edgeless surfaces.
- Added a quick tool button for pointer interactions in edgeless mode.
- Exposed new extension points for pointer graphics and effects.
- **Improvements**
- Integrated pointer graphics as a dependency into related packages.
- Enhanced toolbar context to support additional surface alignment modes.
- Added conditional clipboard configuration registrations for edgeless contexts across multiple block types.
- **Removals**
- Removed legacy tool and effect definitions and related quick tool exports from edgeless components.
- Streamlined extension arrays and removed unused exports for a cleaner codebase.
- Deleted obsolete utility functions and component registrations.
- **Chores**
- Updated workspace and TypeScript project references to include the new pointer graphics module.
<!-- 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**
- Images and icons in bookmark cards are now loaded through an image proxy for improved reliability and consistency.
- Embed blocks for GitHub, Loom, and YouTube now display banner and creator images via an image proxy service for enhanced image loading.
- **Refactor**
- Simplified backend URL handling and proxy logic for images, resulting in more efficient processing and reduced complexity.
- Consolidated image proxy middleware and services into a shared adapter module for streamlined imports and improved maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixed compat error for new built-in template with test updated.
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Added an option to enable or disable bitmap rendering in the renderer settings.
- Introduced a cooldown period after zooming before block optimization resumes, improving rendering performance and stability.
- **Bug Fixes**
- Improved handling of cases where block components may be missing, preventing potential runtime errors.
- **Tests**
- Expanded and refined tests to verify zooming behavior, bitmap caching, and internal state transitions for enhanced reliability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
