refactor(editor): optimize pasting process of attachments and images (#12276)

Related to: [BS-3146](https://linear.app/affine-design/issue/BS-3146/import-paste-接口改进优化)

blocksuite/affine/shared/src/adapters/attachment.ts

@@ -1,5 +1,5 @@
+import { AttachmentBlockSchema } from '@blocksuite/affine-model';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
-import { sha } from '@blocksuite/global/utils';
 import {
   type AssetsManager,
   BaseAdapter,
@@ -88,40 +88,49 @@ export class AttachmentAdapter extends BaseAdapter<Attachment> {
     );
   }
 
-  override async toSliceSnapshot(
-    payload: AttachmentToSliceSnapshotPayload
-  ): Promise<SliceSnapshot | null> {
+  override async toSliceSnapshot({
+    assets,
+    file: files,
+    pageId,
+    workspaceId,
+  }: AttachmentToSliceSnapshotPayload): Promise<SliceSnapshot | null> {
+    if (files.length === 0) return null;
+
     const content: SliceSnapshot['content'] = [];
-    for (const item of payload.file) {
-      const blobId = await sha(await item.arrayBuffer());
-      payload.assets?.getAssets().set(blobId, item);
-      await payload.assets?.writeToBlob(blobId);
+    const flavour = AttachmentBlockSchema.model.flavour;
+
+    for (const blob of files) {
+      const id = nanoid();
+      const { name, size, type } = blob;
+
+      assets?.uploadingAssetsMap.set(id, {
+        blob,
+        mapInto: sourceId => ({ sourceId }),
+      });
+
       content.push({
         type: 'block',
-        flavour: 'affine:attachment',
-        id: nanoid(),
+        flavour,
+        id,
         props: {
-          name: item.name,
-          size: item.size,
-          type: item.type,
+          name,
+          size,
+          type,
           embed: false,
           style: 'horizontalThin',
           index: 'a0',
           xywh: '[0,0,0,0]',
           rotate: 0,
-          sourceId: blobId,
         },
         children: [],
       });
     }
-    if (content.length === 0) {
-      return null;
-    }
+
     return {
       type: 'slice',
       content,
-      workspaceId: payload.workspaceId,
-      pageId: payload.pageId,
+      pageId,
+      workspaceId,
     };
   }
 }

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

@@ -1,5 +1,5 @@
+import { ImageBlockSchema } from '@blocksuite/affine-model';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
-import { sha } from '@blocksuite/global/utils';
 import {
   type AssetsManager,
   BaseAdapter,
@@ -88,33 +88,40 @@ export class ImageAdapter extends BaseAdapter<Image> {
     );
   }
 
-  override async toSliceSnapshot(
-    payload: ImageToSliceSnapshotPayload
-  ): Promise<SliceSnapshot | null> {
+  override async toSliceSnapshot({
+    assets,
+    file: files,
+    pageId,
+    workspaceId,
+  }: ImageToSliceSnapshotPayload): Promise<SliceSnapshot | null> {
+    if (files.length === 0) return null;
+
     const content: SliceSnapshot['content'] = [];
-    for (const item of payload.file) {
-      const blobId = await sha(await item.arrayBuffer());
-      payload.assets?.getAssets().set(blobId, item);
-      await payload.assets?.writeToBlob(blobId);
+    const flavour = ImageBlockSchema.model.flavour;
+
+    for (const blob of files) {
+      const id = nanoid();
+      const { size } = blob;
+
+      assets?.uploadingAssetsMap.set(id, {
+        blob,
+        mapInto: sourceId => ({ sourceId }),
+      });
+
       content.push({
         type: 'block',
-        flavour: 'affine:image',
-        id: nanoid(),
-        props: {
-          size: item.size,
-          sourceId: blobId,
-        },
+        flavour,
+        id,
+        props: { size },
         children: [],
       });
     }
-    if (content.length === 0) {
-      return null;
-    }
+
     return {
       type: 'slice',
       content,
-      workspaceId: payload.workspaceId,
-      pageId: payload.pageId,
+      pageId,
+      workspaceId,
     };
   }
 }

blocksuite/affine/shared/src/adapters/middlewares/index.ts

@@ -9,3 +9,4 @@ export * from './proxy';
 export * from './replace-id';
 export * from './surface-ref-to-embed';
 export * from './title';
+export * from './upload';

blocksuite/affine/shared/src/adapters/middlewares/replace-id.ts

@@ -19,7 +19,7 @@ import { matchModels } from '../../utils';
 
 export const replaceIdMiddleware =
   (idGenerator: () => string): TransformerMiddleware =>
-  ({ slots, docCRUD }) => {
+  ({ slots, docCRUD, assetsManager }) => {
     const idMap = new Map<string, string>();
 
     // After Import
@@ -169,6 +169,16 @@ export const replaceIdMiddleware =
         }
         snapshot.id = newId;
 
+        // Should be re-paired.
+        if (['affine:attachment', 'affine:image'].includes(snapshot.flavour)) {
+          if (!assetsManager.uploadingAssetsMap.has(original)) return;
+
+          const data = assetsManager.uploadingAssetsMap.get(original)!;
+          assetsManager.uploadingAssetsMap.set(newId, data);
+          assetsManager.uploadingAssetsMap.delete(original);
+          return;
+        }
+
         if (snapshot.flavour === 'affine:surface') {
           // Generate new IDs for images and frames in advance.
           snapshot.children.forEach(child => {

blocksuite/affine/shared/src/adapters/middlewares/upload.ts

@@ -0,0 +1,114 @@
+import { sha } from '@blocksuite/global/utils';
+import type { BlockStdScope } from '@blocksuite/std';
+import type {
+  BlockModel,
+  BlockProps,
+  TransformerMiddleware,
+} from '@blocksuite/store';
+import { filter, from, map, mergeMap } from 'rxjs';
+
+const ALLOWED_FLAVOURS = new Set(['affine:attachment', 'affine:image']);
+
+export const uploadMiddleware = (
+  std: BlockStdScope,
+  concurrent = 5
+): TransformerMiddleware => {
+  const blockView$ = std.view.viewUpdated.pipe(
+    filter(payload => payload.type === 'block'),
+    filter(payload => ALLOWED_FLAVOURS.has(payload.view.model.flavour))
+  );
+
+  return ({ assetsManager }) => {
+    async function upload(
+      model: BlockModel,
+      {
+        blob,
+        mapInto,
+        abortController,
+      }: {
+        blob: Blob;
+        mapInto: (blobId: string) => Partial<BlockProps>;
+        abortController?: AbortController;
+      }
+    ) {
+      if (!abortController) return null;
+
+      const signal = abortController.signal;
+      if (signal.aborted) return null;
+
+      // Double check
+      if (!model.store.hasBlock(model.id)) return null;
+
+      try {
+        signal.throwIfAborted();
+
+        const blobId = await Promise.race([
+          (async function processUpload() {
+            const blobId = await sha(await blob.arrayBuffer());
+
+            assetsManager.getAssets().set(blobId, blob);
+
+            await assetsManager.writeToBlob(blobId);
+
+            return await new Promise<string | null>(resolve => {
+              model.store.withoutTransact(() => {
+                if (signal.aborted) return resolve(null);
+
+                model.store.updateBlock(model, mapInto(blobId));
+
+                resolve(blobId);
+              });
+            });
+          })(),
+          // If the signal is not aborted, it will be in the pending state.
+          new Promise<null>(resolve => {
+            signal.addEventListener('abort', () => resolve(null), {
+              once: true,
+            });
+            if (signal.aborted) {
+              resolve(null);
+            }
+          }),
+        ]);
+
+        return blobId;
+      } catch (err) {
+        console.error(err);
+
+        return null;
+      }
+    }
+
+    blockView$
+      .pipe(
+        map(payload => {
+          if (assetsManager.uploadingAssetsMap.size === 0) return null;
+
+          const model = payload.view.model;
+          if (!assetsManager.uploadingAssetsMap.has(model.id)) return null;
+
+          const state = assetsManager.uploadingAssetsMap.get(model.id)!;
+
+          if (payload.method === 'add') {
+            state.abortController = new AbortController();
+            return { model, state };
+          } else {
+            state.abortController?.abort();
+            assetsManager.uploadingAssetsMap.delete(model.id);
+            return null;
+          }
+        }),
+        filter(Boolean),
+        mergeMap(
+          ({ model, state }) =>
+            from(
+              upload(model, state).then(() => {
+                assetsManager.uploadingAssetsMap.delete(model.id);
+              })
+            ),
+          concurrent
+        )
+      )
+      .subscribe();
+  };
+};