feat(editor): adjust attachment block UI (#11763)

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 -->
This commit is contained in:
fundon
2025-04-29 01:00:56 +00:00
parent df565f2fbf
commit 362f89b669
9 changed files with 336 additions and 272 deletions

View File

@@ -481,10 +481,12 @@ export async function addImages(
// If maxWidth is provided, limit the width of the image to maxWidth
// Otherwise, use the original width
const width = maxWidth ? Math.min(props.width, maxWidth) : props.width;
const height = maxWidth
? (props.height / props.width) * width
: props.height;
if (maxWidth) {
const p = props.height / props.width;
props.width = Math.min(props.width, maxWidth);
props.height = props.width * p;
}
const { width, height } = props;
const xywh = calcBoundByOrigin(
center,