chore: proxy image preview in frontend (#11957)

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

- **New Features**
	- Images and icons in bookmark cards are now loaded through an image proxy for improved reliability and consistency.
	- Embed blocks for GitHub, Loom, and YouTube now display banner and creator images via an image proxy service for enhanced image loading.

- **Refactor**
	- Simplified backend URL handling and proxy logic for images, resulting in more efficient processing and reduced complexity.
	- Consolidated image proxy middleware and services into a shared adapter module for streamlined imports and improved maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/bookmark/src/components/bookmark-card.ts

@@ -1,5 +1,6 @@
 import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
 import { WebIcon16 } from '@blocksuite/affine-components/icons';
+import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { getHostName } from '@blocksuite/affine-shared/utils';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
@@ -85,11 +86,12 @@ export class BookmarkCard extends SignalWatcher(
 
     const theme = this.bookmark.std.get(ThemeProvider).theme;
     const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
+    const imageProxyService = this.bookmark.doc.get(ImageProxyService);
 
     const titleIcon = this.loading
       ? LoadingIcon
       : icon
-        ? html`<img src=${icon} alt="icon" />`
+        ? html`<img src=${imageProxyService.buildUrl(icon)} alt="icon" />`
         : WebIcon16;
 
     const descriptionText = this.loading
@@ -102,7 +104,7 @@ export class BookmarkCard extends SignalWatcher(
 
     const bannerImage =
       !this.loading && image
-        ? html`<img src=${image} alt="banner" />`
+        ? html`<img src=${imageProxyService.buildUrl(image)} alt="banner" />`
         : EmbedCardBannerIcon;
 
     return html`

blocksuite/affine/blocks/embed/src/embed-github-block/embed-github-block.ts

@@ -3,6 +3,7 @@ import type {
   EmbedGithubModel,
   EmbedGithubStyles,
 } from '@blocksuite/affine-model';
+import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { BlockSelection, isGfxBlockComponent } from '@blocksuite/std';
 import { html, nothing } from 'lit';
@@ -131,6 +132,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
 
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
+    const imageProxyService = this.doc.get(ImageProxyService);
     const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
     const titleIcon = loading ? LoadingIcon : GithubIcon;
     const statusIcon = status
@@ -141,9 +143,7 @@ export class EmbedGithubBlockComponent extends EmbedBlockComponent<
     const descriptionText = loading ? '' : description;
     const bannerImage =
       !loading && image
-        ? html`<object type="image/webp" data=${image} draggable="false">
-            ${EmbedCardBannerIcon}
-          </object>`
+        ? html`<img src=${imageProxyService.buildUrl(image)} alt="banner" />`
         : EmbedCardBannerIcon;
 
     let dateText = '';

blocksuite/affine/blocks/embed/src/embed-loom-block/embed-loom-block.ts

@@ -1,5 +1,6 @@
 import { OpenIcon } from '@blocksuite/affine-components/icons';
 import type { EmbedLoomModel, EmbedLoomStyles } from '@blocksuite/affine-model';
+import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { BlockSelection } from '@blocksuite/std';
 import { html } from 'lit';
@@ -92,15 +93,14 @@ export class EmbedLoomBlockComponent extends EmbedBlockComponent<
 
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
+    const imageProxyService = this.doc.get(ImageProxyService);
     const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
     const titleIcon = loading ? LoadingIcon : LoomIcon;
     const titleText = loading ? 'Loading...' : title;
     const descriptionText = loading ? '' : description;
     const bannerImage =
       !loading && image
-        ? html`<object type="image/webp" data=${image} draggable="false">
-            ${EmbedCardBannerIcon}
-          </object>`
+        ? html`<img src=${imageProxyService.buildUrl(image)} alt="banner" />`
         : EmbedCardBannerIcon;
 
     return this.renderEmbed(

blocksuite/affine/blocks/embed/src/embed-youtube-block/embed-youtube-block.ts

@@ -3,6 +3,7 @@ import type {
   EmbedYoutubeModel,
   EmbedYoutubeStyles,
 } from '@blocksuite/affine-model';
+import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { BlockSelection } from '@blocksuite/std';
 import { html, nothing } from 'lit';
@@ -106,24 +107,22 @@ export class EmbedYoutubeBlockComponent extends EmbedBlockComponent<
 
     const loading = this.loading;
     const theme = this.std.get(ThemeProvider).theme;
+    const imageProxyService = this.doc.get(ImageProxyService);
     const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
     const titleIcon = loading ? LoadingIcon : YoutubeIcon;
     const titleText = loading ? 'Loading...' : title;
     const descriptionText = loading ? null : description;
     const bannerImage =
       !loading && image
-        ? html`<object type="image/webp" data=${image} draggable="false">
-            ${EmbedCardBannerIcon}
-          </object>`
+        ? html`<img src=${imageProxyService.buildUrl(image)} alt="banner" />`
         : EmbedCardBannerIcon;
 
     const creatorImageEl =
       !loading && creatorImage
-        ? html`<object
-            type="image/webp"
-            data=${creatorImage}
-            draggable="false"
-          ></object>`
+        ? html`<img
+            src=${imageProxyService.buildUrl(creatorImage)}
+            alt="creator"
+          />`
         : nothing;
 
     return this.renderEmbed(

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

@@ -1,4 +1,3 @@
 export * from './html.js';
 export * from './markdown.js';
-export * from './middleware.js';
 export * from './notion-html.js';

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

@@ -1,27 +0,0 @@
-import { DEFAULT_IMAGE_PROXY_ENDPOINT } from '@blocksuite/affine-shared/consts';
-import type { TransformerMiddleware } from '@blocksuite/store';
-
-export const customImageProxyMiddleware = (
-  imageProxyURL: string
-): TransformerMiddleware => {
-  return ({ adapterConfigs }) => {
-    adapterConfigs.set('imageProxy', imageProxyURL);
-  };
-};
-
-const imageProxyMiddlewareBuilder = () => {
-  let middleware = customImageProxyMiddleware(DEFAULT_IMAGE_PROXY_ENDPOINT);
-  return {
-    get: () => middleware,
-    set: (url: string) => {
-      middleware = customImageProxyMiddleware(url);
-    },
-  };
-};
-
-const defaultImageProxyMiddlewarBuilder = imageProxyMiddlewareBuilder();
-
-export const setImageProxyMiddlewareURL = defaultImageProxyMiddlewarBuilder.set;
-
-export const defaultImageProxyMiddleware =
-  defaultImageProxyMiddlewarBuilder.get();

blocksuite/affine/blocks/image/src/image-proxy-service.ts

@@ -1,20 +0,0 @@
-import { DEFAULT_IMAGE_PROXY_ENDPOINT } from '@blocksuite/affine-shared/consts';
-import { StoreExtension } from '@blocksuite/store';
-
-import { setImageProxyMiddlewareURL } from './adapters/middleware';
-
-// TODO(@mirone): this should be configured when setup instead of runtime
-export class ImageProxyService extends StoreExtension {
-  static override key = 'image-proxy';
-
-  private _imageProxyURL = DEFAULT_IMAGE_PROXY_ENDPOINT;
-
-  setImageProxyURL(url: string) {
-    this._imageProxyURL = url;
-    setImageProxyMiddlewareURL(url);
-  }
-
-  get imageProxyURL() {
-    return this._imageProxyURL;
-  }
-}

blocksuite/affine/blocks/image/src/image-spec.ts

@@ -6,7 +6,6 @@ import { literal } from 'lit/static-html.js';
 
 import { imageSlashMenuConfig } from './configs/slash-menu';
 import { createBuiltinToolbarConfigExtension } from './configs/toolbar';
-import { ImageProxyService } from './image-proxy-service';
 import { ImageDropOption } from './image-service';
 
 const flavour = ImageBlockSchema.model.flavour;
@@ -26,5 +25,3 @@ export const ImageBlockSpec: ExtensionType[] = [
   createBuiltinToolbarConfigExtension(flavour),
   SlashMenuConfigExtension(flavour, imageSlashMenuConfig),
 ].flat();
-
-export const ImageStoreSpec: ExtensionType[] = [ImageProxyService];

blocksuite/affine/blocks/image/src/index.ts

@@ -3,7 +3,6 @@ export * from './commands';
 export * from './edgeless-clipboard-config';
 export * from './image-block';
 export * from './image-edgeless-block';
-export { ImageProxyService } from './image-proxy-service';
 export * from './image-service';
 export * from './image-spec';
 export * from './styles';

blocksuite/affine/blocks/image/src/store.ts

@@ -4,30 +4,15 @@ import {
 } from '@blocksuite/affine-ext-loader';
 import { ImageBlockSchemaExtension } from '@blocksuite/affine-model';
 import { ImageSelectionExtension } from '@blocksuite/affine-shared/selection';
-import { z } from 'zod';
 
 import { ImageBlockAdapterExtensions } from './adapters/extension';
-import { ImageProxyService } from './image-proxy-service';
 
-const ImageStoreExtensionOptionsSchema = z.object({
-  imageProxyURL: z.string().optional(),
-});
-
-export class ImageStoreExtension extends StoreExtensionProvider<
-  z.infer<typeof ImageStoreExtensionOptionsSchema>
-> {
+export class ImageStoreExtension extends StoreExtensionProvider {
   override name = 'affine-image-block';
 
-  override schema = ImageStoreExtensionOptionsSchema;
-
   override setup(context: StoreExtensionContext) {
     super.setup(context);
-    context.register([
-      ImageBlockSchemaExtension,
-      ImageProxyService,
-      ImageSelectionExtension,
-    ]);
+    context.register([ImageBlockSchemaExtension, ImageSelectionExtension]);
     context.register(ImageBlockAdapterExtensions);
-    // TODO(@mirone): set image proxy url
   }
 }

blocksuite/affine/blocks/root/src/clipboard/readonly-clipboard.ts

@@ -1,8 +1,8 @@
-import { defaultImageProxyMiddleware } from '@blocksuite/affine-block-image';
 import {
   AttachmentAdapter,
   ClipboardAdapter,
   copyMiddleware,
+  defaultImageProxyMiddleware,
   HtmlAdapter,
   ImageAdapter,
   MixTextAdapter,