fix(editor): image size and xywh when converting attachment to image (#10200)

In Edgeless, the image size should be read when converting attachment to image:

* fix `size`
* fix `xywh`

blocksuite/affine/shared/package.json

@@ -25,6 +25,7 @@
     "@toeverything/theme": "^1.1.11",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
+    "dompurify": "^3.2.4",
     "fractional-indexing": "^3.2.0",
     "lit": "^3.2.0",
     "lodash.clonedeep": "^4.5.0",

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

@@ -0,0 +1,28 @@
+import DOMPurify from 'dompurify';
+
+export function readImageSize(file: File | Blob) {
+  return new Promise<{ width: number; height: number }>(resolve => {
+    const size = { width: 0, height: 0 };
+    if (!file.type.startsWith('image/')) {
+      resolve(size);
+      return;
+    }
+
+    const img = new Image();
+
+    img.onload = () => {
+      size.width = img.width;
+      size.height = img.height;
+      URL.revokeObjectURL(img.src);
+      resolve(size);
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(img.src);
+      resolve(size);
+    };
+
+    const sanitizedURL = DOMPurify.sanitize(URL.createObjectURL(file));
+    img.src = sanitizedURL;
+  });
+}

blocksuite/affine/shared/src/utils/index.ts

@@ -8,6 +8,7 @@ export * from './edgeless';
 export * from './event';
 export * from './file';
 export * from './fractional-indexing';
+export * from './image';
 export * from './insert';
 export * from './is-abort-error';
 export * from './math';