feat(editor): add replace action in attachment toolbar (#12512)

Closes:
[BS-3549](https://linear.app/affine-design/issue/BS-3549/附件-toolbar-上添加-replace-action)

[Screen Recording 2025-06-04 at 15.37.40.mov <span
class="graphite__hidden">(uploaded via Graphite)</span> <img
class="graphite__hidden"
src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/8ypiIKZXudF5a0tIgIzf/480c8690-7ec9-4188-92fd-ee3339afb558.mov"
/>](https://app.graphite.dev/media/video/8ypiIKZXudF5a0tIgIzf/480c8690-7ec9-4188-92fd-ee3339afb558.mov)



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

- **New Features**
- Added the ability to replace attachments directly from the toolbar,
allowing users to select and update files seamlessly.
- **Bug Fixes**
- Improved handling when replacing embedded attachments with unsupported
file types, ensuring the view falls back to a card view as needed.
- **Tests**
- Introduced end-to-end tests to verify attachment replacement and
correct UI behavior in both standard and edgeless editing modes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/widgets/toolbar/src/utils.ts

@@ -369,14 +369,22 @@ function renderActionItem(action: ToolbarAction, context: ToolbarContext) {
   const innerToolbar = context.placement$.value === 'inner';
   const ids = action.id.split('.');
   const id = ids[ids.length - 1];
+  const label = action.label ?? action.tooltip ?? id;
+  const actived =
+    typeof action.active === 'function'
+      ? action.active(context)
+      : action.active;
+  const disabled =
+    typeof action.disabled === 'function'
+      ? action.disabled(context)
+      : action.disabled;
+
   return html`
     <editor-icon-button
       data-testid=${ifDefined(id)}
-      aria-label=${ifDefined(action.label ?? action.tooltip ?? id)}
-      ?active=${typeof action.active === 'function'
-        ? action.active(context)
-        : action.active}
-      ?disabled=${action.disabled}
+      aria-label=${ifDefined(label)}
+      ?active=${actived}
+      ?disabled=${disabled}
       .tooltip=${action.tooltip}
       .iconContainerPadding=${innerToolbar ? 4 : 2}
       .iconSize=${innerToolbar ? '16px' : undefined}
@@ -394,17 +402,24 @@ function renderMenuActionItem(action: ToolbarAction, context: ToolbarContext) {
   const innerToolbar = context.placement$.value === 'inner';
   const ids = action.id.split('.');
   const id = ids[ids.length - 1];
+  const label = action.label ?? action.tooltip ?? id;
+  const actived =
+    typeof action.active === 'function'
+      ? action.active(context)
+      : action.active;
+  const disabled =
+    typeof action.disabled === 'function'
+      ? action.disabled(context)
+      : action.disabled;
+  const destructive = action.variant === 'destructive' ? 'delete' : undefined;
+
   return html`
     <editor-menu-action
       data-testid=${ifDefined(id)}
-      aria-label=${ifDefined(action.label ?? action.tooltip ?? id)}
-      class="${ifDefined(
-        action.variant === 'destructive' ? 'delete' : undefined
-      )}"
-      ?active=${typeof action.active === 'function'
-        ? action.active(context)
-        : action.active}
-      ?disabled=${action.disabled}
+      aria-label=${ifDefined(label)}
+      class="${ifDefined(destructive)}"
+      ?active=${actived}
+      ?disabled=${disabled}
       .tooltip=${ifDefined(action.tooltip)}
       .iconContainerPadding=${innerToolbar ? 4 : 2}
       .iconSize=${innerToolbar ? '16px' : undefined}