fix(editor): improve image block upload and download states (#12017)

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 -->

tests/blocksuite/e2e/image/load.spec.ts

@@ -13,7 +13,7 @@ import { test } from '../utils/playwright.js';
 const mockImageId = '_e2e_test_image_id_';
 
 async function initMockImage(page: Page) {
-  await page.evaluate(() => {
+  await page.evaluate(sourceId => {
     const { doc } = window;
     doc.captureSync();
     const rootId = doc.addBlock('affine:page');
@@ -21,20 +21,20 @@ async function initMockImage(page: Page) {
     doc.addBlock(
       'affine:image',
       {
-        sourceId: '_e2e_test_image_id_',
+        sourceId,
         width: 200,
         height: 180,
       },
       noteId
     );
     doc.captureSync();
-  });
+  }, mockImageId);
 }
 
 test('image loading but failed', async ({ page }) => {
   expectConsoleMessage(
     page,
-    'Error: Failed to fetch blob _e2e_test_image_id_',
+    `Error: Failed to fetch blob ${mockImageId}`,
     'warning'
   );
   expectConsoleMessage(
@@ -65,26 +65,25 @@ test('image loading but failed', async ({ page }) => {
 
   await initMockImage(page);
 
-  const loadingContent = await page
-    .locator(
-      '.affine-image-fallback-card .affine-image-fallback-card-title-text'
-    )
-    .innerText();
-  expect(loadingContent).toBe('Loading image...');
+  const title = page.locator(
+    '.affine-image-fallback-card .affine-image-fallback-card-title-text'
+  );
+
+  await expect(title).toHaveText('Image');
 
   await page.waitForTimeout(3 * timeout);
 
-  await expect(
-    page.locator(
-      '.affine-image-fallback-card .affine-image-fallback-card-title-text'
-    )
-  ).toContainText('Image loading failed.');
+  const desc = page.locator(
+    '.affine-image-fallback-card .affine-image-fallback-card-description'
+  );
+
+  await expect(desc).toContainText('Image not found');
 });
 
 test('image loading but success', async ({ page }) => {
   expectConsoleMessage(
     page,
-    'Error: Failed to fetch blob _e2e_test_image_id_',
+    `Error: Failed to fetch blob ${mockImageId}`,
     'warning'
   );
   expectConsoleMessage(
@@ -118,21 +117,18 @@ test('image loading but success', async ({ page }) => {
           body: imageBuffer,
         });
       }
-      // broken image
-      return route.fulfill({
-        status: 404,
-      });
+
+      return route.continue();
     }
   );
 
   await initMockImage(page);
 
-  const loadingContent = await page
-    .locator(
-      '.affine-image-fallback-card .affine-image-fallback-card-title-text'
-    )
-    .innerText();
-  expect(loadingContent).toBe('Loading image...');
+  const title = page.locator(
+    '.affine-image-fallback-card .affine-image-fallback-card-title-text'
+  );
+
+  await expect(title).toHaveText('Image');
 
   await page.waitForTimeout(3 * timeout);