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/all/src/__tests__/utils/create-job.ts

@@ -1,4 +1,4 @@
-import { defaultImageProxyMiddleware } from '@blocksuite/affine-block-image';
+import { defaultImageProxyMiddleware } from '@blocksuite/affine-shared/adapters';
 import {
   Schema,
   Transformer,

blocksuite/affine/all/src/extensions/migrating-store.ts

@@ -14,6 +14,7 @@ import {
 } from '@blocksuite/affine-model';
 import {
   HtmlAdapterFactoryExtension,
+  ImageProxyService,
   MarkdownAdapterFactoryExtension,
   MixTextAdapterFactoryExtension,
   NotionHtmlAdapterFactoryExtension,
@@ -83,9 +84,12 @@ const MigratingStoreExtensions: ExtensionType[] = [
   getAdapterFactoryExtensions(),
 
   FeatureFlagService,
+  BlockMetaService,
+
+  // TODO(@mirone): maybe merge these services into a file setting service
   LinkPreviewerService,
   FileSizeLimitService,
-  BlockMetaService,
+  ImageProxyService,
 ].flat();
 
 export class MigratingStoreExtension extends StoreExtensionProvider {

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/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,

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

@@ -3,6 +3,7 @@ export * from './copy';
 export * from './doc-link';
 export * from './file-name';
 export * from './paste';
+export * from './proxy';
 export * from './replace-id';
 export * from './surface-ref-to-embed';
 export * from './title';

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

@@ -1,5 +1,7 @@
-import { DEFAULT_IMAGE_PROXY_ENDPOINT } from '@blocksuite/affine-shared/consts';
 import type { TransformerMiddleware } from '@blocksuite/store';
+import { StoreExtension } from '@blocksuite/store';
+
+import { DEFAULT_IMAGE_PROXY_ENDPOINT } from '../../consts';
 
 export const customImageProxyMiddleware = (
   imageProxyURL: string
@@ -25,3 +27,27 @@ export const setImageProxyMiddlewareURL = defaultImageProxyMiddlewarBuilder.set;
 
 export const defaultImageProxyMiddleware =
   defaultImageProxyMiddlewarBuilder.get();
+
+// 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);
+  }
+
+  buildUrl(imageUrl: string) {
+    if (imageUrl.startsWith(this.imageProxyURL)) {
+      return imageUrl;
+    }
+
+    return `${this.imageProxyURL}?url=${encodeURIComponent(imageUrl)}`;
+  }
+
+  get imageProxyURL() {
+    return this._imageProxyURL;
+  }
+}

blocksuite/affine/widgets/linked-doc/src/transformers/html.ts

@@ -1,5 +1,5 @@
-import { defaultImageProxyMiddleware } from '@blocksuite/affine-block-image';
 import {
+  defaultImageProxyMiddleware,
   docLinkBaseURLMiddleware,
   fileNameMiddleware,
   HtmlAdapter,

blocksuite/affine/widgets/linked-doc/src/transformers/markdown.ts

@@ -1,5 +1,5 @@
-import { defaultImageProxyMiddleware } from '@blocksuite/affine-block-image';
 import {
+  defaultImageProxyMiddleware,
   docLinkBaseURLMiddleware,
   fileNameMiddleware,
   MarkdownAdapter,

blocksuite/affine/widgets/linked-doc/src/transformers/notion-html.ts

@@ -1,5 +1,7 @@
-import { defaultImageProxyMiddleware } from '@blocksuite/affine-block-image';
-import { NotionHtmlAdapter } from '@blocksuite/affine-shared/adapters';
+import {
+  defaultImageProxyMiddleware,
+  NotionHtmlAdapter,
+} from '@blocksuite/affine-shared/adapters';
 import { Container } from '@blocksuite/global/di';
 import { sha } from '@blocksuite/global/utils';
 import {

blocksuite/playground/apps/_common/components/adapters-panel.ts

@@ -1,9 +1,9 @@
 /* eslint-disable @typescript-eslint/no-restricted-imports */
 import '@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js';
 
-import { defaultImageProxyMiddleware } from '@blocksuite/affine/blocks/image';
 import { WithDisposable } from '@blocksuite/affine/global/lit';
 import {
+  defaultImageProxyMiddleware,
   docLinkBaseURLMiddlewareBuilder,
   embedSyncedDocMiddleware,
   type HtmlAdapter,

blocksuite/playground/apps/_common/components/starter-debug-menu.ts

@@ -16,7 +16,6 @@ import '@shoelace-style/shoelace/dist/themes/light.css';
 import '@shoelace-style/shoelace/dist/themes/dark.css';
 import './left-side-panel.js';
 
-import { defaultImageProxyMiddleware } from '@blocksuite/affine/blocks/image';
 import { ExportManager } from '@blocksuite/affine/blocks/surface';
 import { toast } from '@blocksuite/affine/components/toast';
 import { StoreExtensionManagerIdentifier } from '@blocksuite/affine/ext-loader';
@@ -27,6 +26,7 @@ import {
 import type { SerializedXYWH } from '@blocksuite/affine/global/gfx';
 import { ColorScheme, type DocMode } from '@blocksuite/affine/model';
 import {
+  defaultImageProxyMiddleware,
   docLinkBaseURLMiddleware,
   HtmlAdapterFactoryIdentifier,
   MarkdownAdapterFactoryIdentifier,