fix(editor): support copying single image from edgeless and pasting to page (#12709)

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

blocksuite/affine/blocks/image/src/utils.ts

@@ -11,6 +11,7 @@ import {
   NativeClipboardProvider,
 } from '@blocksuite/affine-shared/services';
 import {
+  convertToPng,
   formatSize,
   getBlockProps,
   isInsidePageEditor,
@@ -111,28 +112,6 @@ export async function resetImageSize(
   block.store.updateBlock(model, props);
 }
 
-function convertToPng(blob: Blob): Promise<Blob | null> {
-  return new Promise(resolve => {
-    const reader = new FileReader();
-    reader.addEventListener('load', _ => {
-      const img = new Image();
-      img.onload = () => {
-        const c = document.createElement('canvas');
-        c.width = img.width;
-        c.height = img.height;
-        const ctx = c.getContext('2d');
-        if (!ctx) return;
-        ctx.drawImage(img, 0, 0);
-        c.toBlob(resolve, 'image/png');
-      };
-      img.onerror = () => resolve(null);
-      img.src = reader.result as string;
-    });
-    reader.addEventListener('error', () => resolve(null));
-    reader.readAsDataURL(blob);
-  });
-}
-
 export async function copyImageBlob(
   block: ImageBlockComponent | ImageEdgelessBlockComponent
 ) {