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