fix(editor): support relative image reference path when importing zip with images (#12264)

Closes: [BS-3385](https://linear.app/affine-design/issue/BS-3385/markdown类型的导入，支持media文件和md文件不在同目录的情况)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added utility functions to resolve and normalize image file paths in markdown and HTML imports.
  - Introduced middleware to provide full file path context during file import and transformation.
  - Added new types for improved asset and file management in zip imports.

- **Refactor**
  - Centralized and simplified image processing logic across HTML, Markdown, and Notion HTML adapters for improved maintainability.
  - Enhanced type safety and clarity in file and asset handling during zip imports.

- **Tests**
  - Added comprehensive tests for image file path resolution utility.

- **Documentation**
  - Improved inline code comments explaining file path resolution logic.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/image/src/adapters/html.ts

@@ -2,12 +2,11 @@ import { ImageBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockHtmlAdapterExtension,
   type BlockHtmlAdapterMatcher,
-  FetchUtils,
   HastUtils,
 } from '@blocksuite/affine-shared/adapters';
-import { getFilenameFromContentDisposition } from '@blocksuite/affine-shared/utils';
-import { sha } from '@blocksuite/global/utils';
-import { getAssetName, nanoid } from '@blocksuite/store';
+import { getAssetName } from '@blocksuite/store';
+
+import { processImageNodeToBlock } from './utils';
 
 export const imageBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
   flavour: ImageBlockSchema.model.flavour,
@@ -25,64 +24,10 @@ export const imageBlockHtmlAdapterMatcher: BlockHtmlAdapterMatcher = {
       const image = o.node;
       const imageURL =
         typeof image?.properties.src === 'string' ? image.properties.src : '';
-      if (imageURL) {
-        let blobId = '';
-        if (!FetchUtils.fetchable(imageURL)) {
-          const imageURLSplit = imageURL.split('/');
-          while (imageURLSplit.length > 0) {
-            const key = assets
-              .getPathBlobIdMap()
-              .get(decodeURIComponent(imageURLSplit.join('/')));
-            if (key) {
-              blobId = key;
-              break;
-            }
-            imageURLSplit.shift();
-          }
-        } else {
-          try {
-            const res = await FetchUtils.fetchImage(
-              imageURL,
-              undefined,
-              configs.get('imageProxy') as string
-            );
-            if (!res) {
-              return;
-            }
-            const clonedRes = res.clone();
-            const name =
-              getFilenameFromContentDisposition(
-                res.headers.get('Content-Disposition') ?? ''
-              ) ??
-              (imageURL.split('/').at(-1) ?? 'image') +
-                '.' +
-                (res.headers.get('Content-Type')?.split('/').at(-1) ?? 'png');
-            const file = new File([await res.blob()], name, {
-              type: res.headers.get('Content-Type') ?? '',
-            });
-            blobId = await sha(await clonedRes.arrayBuffer());
-            assets?.getAssets().set(blobId, file);
-            await assets?.writeToBlob(blobId);
-          } catch {
-            return;
-          }
-        }
-        walkerContext
-          .openNode(
-            {
-              type: 'block',
-              id: nanoid(),
-              flavour: 'affine:image',
-              props: {
-                sourceId: blobId,
-              },
-              children: [],
-            },
-            'children'
-          )
-          .closeNode();
-        walkerContext.skipAllChildren();
+      if (!imageURL) {
+        return;
       }
+      await processImageNodeToBlock(imageURL, walkerContext, assets, configs);
     },
   },
   fromBlockSnapshot: {

blocksuite/affine/blocks/image/src/adapters/markdown.ts

@@ -2,12 +2,11 @@ import { ImageBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockMarkdownAdapterExtension,
   type BlockMarkdownAdapterMatcher,
-  FetchUtils,
   type MarkdownAST,
 } from '@blocksuite/affine-shared/adapters';
-import { getFilenameFromContentDisposition } from '@blocksuite/affine-shared/utils';
-import { sha } from '@blocksuite/global/utils';
-import { getAssetName, nanoid } from '@blocksuite/store';
+import { getAssetName } from '@blocksuite/store';
+
+import { processImageNodeToBlock } from './utils';
 
 const isImageNode = (node: MarkdownAST) => node.type === 'image';
 
@@ -18,63 +17,11 @@ export const imageBlockMarkdownAdapterMatcher: BlockMarkdownAdapterMatcher = {
   toBlockSnapshot: {
     enter: async (o, context) => {
       const { configs, walkerContext, assets } = context;
-      let blobId = '';
       const imageURL = 'url' in o.node ? o.node.url : '';
       if (!assets || !imageURL) {
         return;
       }
-      if (!FetchUtils.fetchable(imageURL)) {
-        const imageURLSplit = imageURL.split('/');
-        while (imageURLSplit.length > 0) {
-          const key = assets
-            .getPathBlobIdMap()
-            .get(decodeURIComponent(imageURLSplit.join('/')));
-          if (key) {
-            blobId = key;
-            break;
-          }
-          imageURLSplit.shift();
-        }
-      } else {
-        const res = await FetchUtils.fetchImage(
-          imageURL,
-          undefined,
-          configs.get('imageProxy') as string
-        );
-        if (!res) {
-          return;
-        }
-        const clonedRes = res.clone();
-        const file = new File(
-          [await res.blob()],
-          getFilenameFromContentDisposition(
-            res.headers.get('Content-Disposition') ?? ''
-          ) ??
-            (imageURL.split('/').at(-1) ?? 'image') +
-              '.' +
-              (res.headers.get('Content-Type')?.split('/').at(-1) ?? 'png'),
-          {
-            type: res.headers.get('Content-Type') ?? '',
-          }
-        );
-        blobId = await sha(await clonedRes.arrayBuffer());
-        assets?.getAssets().set(blobId, file);
-        await assets?.writeToBlob(blobId);
-      }
-      walkerContext
-        .openNode(
-          {
-            type: 'block',
-            id: nanoid(),
-            flavour: 'affine:image',
-            props: {
-              sourceId: blobId,
-            },
-            children: [],
-          },
-          'children'
-        )
-        .closeNode();
+      await processImageNodeToBlock(imageURL, walkerContext, assets, configs);
     },
   },
   fromBlockSnapshot: {

blocksuite/affine/blocks/image/src/adapters/notion-html.ts

@@ -2,77 +2,10 @@ import { ImageBlockSchema } from '@blocksuite/affine-model';
 import {
   BlockNotionHtmlAdapterExtension,
   type BlockNotionHtmlAdapterMatcher,
-  FetchUtils,
   HastUtils,
 } from '@blocksuite/affine-shared/adapters';
-import { getFilenameFromContentDisposition } from '@blocksuite/affine-shared/utils';
-import { sha } from '@blocksuite/global/utils';
-import {
-  type AssetsManager,
-  type ASTWalkerContext,
-  type BlockSnapshot,
-  nanoid,
-} from '@blocksuite/store';
 
-async function processImageNode(
-  imageURL: string,
-  walkerContext: ASTWalkerContext<BlockSnapshot>,
-  assets: AssetsManager,
-  configs: Map<string, string>
-) {
-  let blobId = '';
-  if (!FetchUtils.fetchable(imageURL)) {
-    const imageURLSplit = imageURL.split('/');
-    while (imageURLSplit.length > 0) {
-      const key = assets
-        .getPathBlobIdMap()
-        .get(decodeURIComponent(imageURLSplit.join('/')));
-      if (key) {
-        blobId = key;
-        break;
-      }
-      imageURLSplit.shift();
-    }
-  } else {
-    const res = await FetchUtils.fetchImage(
-      imageURL,
-      undefined,
-      configs.get('imageProxy') as string
-    );
-    if (!res) {
-      return;
-    }
-    const clonedRes = res.clone();
-    const name =
-      getFilenameFromContentDisposition(
-        res.headers.get('Content-Disposition') ?? ''
-      ) ??
-      (imageURL.split('/').at(-1) ?? 'image') +
-        '.' +
-        (res.headers.get('Content-Type')?.split('/').at(-1) ?? 'png');
-    const file = new File([await res.blob()], name, {
-      type: res.headers.get('Content-Type') ?? '',
-    });
-    blobId = await sha(await clonedRes.arrayBuffer());
-    assets?.getAssets().set(blobId, file);
-    await assets?.writeToBlob(blobId);
-  }
-  walkerContext
-    .openNode(
-      {
-        type: 'block',
-        id: nanoid(),
-        flavour: ImageBlockSchema.model.flavour,
-        props: {
-          sourceId: blobId,
-        },
-        children: [],
-      },
-      'children'
-    )
-    .closeNode();
-  walkerContext.skipAllChildren();
-}
+import { processImageNodeToBlock } from './utils';
 
 export const imageBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
   {
@@ -107,7 +40,12 @@ export const imageBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
                 ? image.properties.src
                 : '';
             if (imageURL) {
-              await processImageNode(imageURL, walkerContext, assets, configs);
+              await processImageNodeToBlock(
+                imageURL,
+                walkerContext,
+                assets,
+                configs
+              );
             }
             break;
           }
@@ -125,7 +63,12 @@ export const imageBlockNotionHtmlAdapterMatcher: BlockNotionHtmlAdapterMatcher =
                   : '';
             }
             if (imageURL) {
-              await processImageNode(imageURL, walkerContext, assets, configs);
+              await processImageNodeToBlock(
+                imageURL,
+                walkerContext,
+                assets,
+                configs
+              );
             }
             break;
           }

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

@@ -0,0 +1,89 @@
+import { ImageBlockSchema } from '@blocksuite/affine-model';
+import {
+  FetchUtils,
+  FULL_FILE_PATH_KEY,
+  getImageFullPath,
+} from '@blocksuite/affine-shared/adapters';
+import { getFilenameFromContentDisposition } from '@blocksuite/affine-shared/utils';
+import { sha } from '@blocksuite/global/utils';
+import {
+  type AssetsManager,
+  type ASTWalkerContext,
+  type BlockSnapshot,
+  nanoid,
+} from '@blocksuite/store';
+
+export async function processImageNodeToBlock(
+  imageURL: string,
+  walkerContext: ASTWalkerContext<BlockSnapshot>,
+  assets: AssetsManager,
+  configs: Map<string, string>
+) {
+  let blobId = '';
+  if (!FetchUtils.fetchable(imageURL)) {
+    const fullFilePath = configs.get(FULL_FILE_PATH_KEY);
+    // When importing markdown file with assets in a zip file,
+    // the image URL is the relative path of the image file in the zip file
+    // If the full file path is provided, use it to get the image full path
+    if (fullFilePath) {
+      const decodedImageURL = decodeURIComponent(imageURL);
+      const imageFullPath = getImageFullPath(fullFilePath, decodedImageURL);
+      blobId = assets.getPathBlobIdMap().get(imageFullPath) ?? '';
+    } else {
+      const imageURLSplit = imageURL.split('/');
+      while (imageURLSplit.length > 0) {
+        const key = assets
+          .getPathBlobIdMap()
+          .get(decodeURIComponent(imageURLSplit.join('/')));
+        if (key) {
+          blobId = key;
+          break;
+        }
+        imageURLSplit.shift();
+      }
+    }
+  } else {
+    try {
+      const res = await FetchUtils.fetchImage(
+        imageURL,
+        undefined,
+        configs.get('imageProxy') as string
+      );
+      if (!res) {
+        return;
+      }
+      const clonedRes = res.clone();
+      const name =
+        getFilenameFromContentDisposition(
+          res.headers.get('Content-Disposition') ?? ''
+        ) ??
+        (imageURL.split('/').at(-1) ?? 'image') +
+          '.' +
+          (res.headers.get('Content-Type')?.split('/').at(-1) ?? 'png');
+      const file = new File([await res.blob()], name, {
+        type: res.headers.get('Content-Type') ?? '',
+      });
+      blobId = await sha(await clonedRes.arrayBuffer());
+      assets?.getAssets().set(blobId, file);
+      await assets?.writeToBlob(blobId);
+    } catch (err) {
+      console.error('Failed to process image:', err);
+      return;
+    }
+  }
+  walkerContext
+    .openNode(
+      {
+        type: 'block',
+        id: nanoid(),
+        flavour: ImageBlockSchema.model.flavour,
+        props: {
+          sourceId: blobId,
+        },
+        children: [],
+      },
+      'children'
+    )
+    .closeNode();
+  walkerContext.skipAllChildren();
+}