From c34143822d8a2fdc1a9891c7d4b51df77a57a315 Mon Sep 17 00:00:00 2001
From: Mirone <Saul-Mirone@outlook.com>
Date: Sun, 15 Dec 2024 15:14:41 +0800
Subject: [PATCH] feat: add image proxy for crepe (#1586)

* feat: add image proxy for crepe

* chore: f
---
 packages/components/src/image-block/config.ts     |  1 +
 packages/components/src/image-block/view/index.ts | 14 +++++++++++++-
 packages/components/src/image-inline/config.ts    |  1 +
 packages/components/src/image-inline/view.ts      | 14 +++++++++++++-
 4 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/image-block/config.ts b/packages/components/src/image-block/config.ts
index e8e2a795ad9..45c9a40102a 100644
--- a/packages/components/src/image-block/config.ts
+++ b/packages/components/src/image-block/config.ts
@@ -10,6 +10,7 @@ export interface ImageBlockConfig {
   uploadPlaceholderText: string
   captionPlaceholderText: string
   onUpload: (file: File) => Promise<string>
+  proxyDomURL?: (url: string) => Promise<string> | string
 }
 
 export const defaultImageBlockConfig: ImageBlockConfig = {
diff --git a/packages/components/src/image-block/view/index.ts b/packages/components/src/image-block/view/index.ts
index 925b1e88d84..3c4a8aec874 100644
--- a/packages/components/src/image-block/view/index.ts
+++ b/packages/components/src/image-block/view/index.ts
@@ -17,8 +17,20 @@ export const imageBlockView = $view(
         'milkdown-image-block'
       ) as HTMLElement & ImageComponentProps
       const config = ctx.get(imageBlockConfig.key)
+      const proxyDomURL = config.proxyDomURL
       const bindAttrs = (node: Node) => {
-        dom.src = node.attrs.src
+        if (!proxyDomURL) {
+          dom.src = node.attrs.src
+        } else {
+          const proxiedURL = proxyDomURL(node.attrs.src)
+          if (typeof proxiedURL === 'string') {
+            dom.src = proxiedURL
+          } else {
+            proxiedURL.then((url) => {
+              dom.src = url
+            })
+          }
+        }
         dom.ratio = node.attrs.ratio
         dom.caption = node.attrs.caption
 
diff --git a/packages/components/src/image-inline/config.ts b/packages/components/src/image-inline/config.ts
index 64c67922409..c9b0fe793e9 100644
--- a/packages/components/src/image-inline/config.ts
+++ b/packages/components/src/image-inline/config.ts
@@ -8,6 +8,7 @@ export interface InlineImageConfig {
   confirmButton: () => ReturnType<typeof html>
   uploadPlaceholderText: string
   onUpload: (file: File) => Promise<string>
+  proxyDomURL?: (url: string) => Promise<string> | string
 }
 
 export const defaultInlineImageConfig: InlineImageConfig = {
diff --git a/packages/components/src/image-inline/view.ts b/packages/components/src/image-inline/view.ts
index 4fc59552c3f..c67f2a6683a 100644
--- a/packages/components/src/image-inline/view.ts
+++ b/packages/components/src/image-inline/view.ts
@@ -17,8 +17,20 @@ export const inlineImageView = $view(
         'milkdown-image-inline'
       ) as HTMLElement & InlineImageComponentProps
       const config = ctx.get(inlineImageConfig.key)
+      const proxyDomURL = config.proxyDomURL
       const bindAttrs = (node: Node) => {
-        dom.src = node.attrs.src
+        if (!proxyDomURL) {
+          dom.src = node.attrs.src
+        } else {
+          const proxiedURL = proxyDomURL(node.attrs.src)
+          if (typeof proxiedURL === 'string') {
+            dom.src = proxiedURL
+          } else {
+            proxiedURL.then((url) => {
+              dom.src = url
+            })
+          }
+        }
         dom.alt = node.attrs.alt
         dom.title = node.attrs.title
       }