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/shared/src/utils/image.ts

@@ -26,3 +26,34 @@ export function readImageSize(file: File | Blob) {
     img.src = sanitizedURL;
   });
 }
+
+export 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) {
+          resolve(null);
+          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);
+  });
+}