feat: add image proxy for crepe (#1586)

* feat: add image proxy for crepe

* chore: f

Author: Saul-Mirone

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 = {

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
 

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 = {

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
       }