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,

packages/backend/server/src/__tests__/__snapshots__/worker.e2e.ts.md

@@ -67,10 +67,10 @@ Generated by [AVA](https://avajs.dev).
     {
       description: 'Test Description',
       favicons: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Ffavicon.ico',
+        'http://example.com/favicon.ico',
       ],
       images: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Fimage.png',
+        'http://example.com/image.png',
       ],
       title: 'Test Title',
       url: 'http://example.com/page',
@@ -82,7 +82,7 @@ Generated by [AVA](https://avajs.dev).
     {
       charset: 'gbk',
       favicons: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Ffavicon.ico',
+        'http://example.com/favicon.ico',
       ],
       images: [],
       title: '你好，世界。',
@@ -95,7 +95,7 @@ Generated by [AVA](https://avajs.dev).
     {
       charset: 'shift_jis',
       favicons: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Ffavicon.ico',
+        'http://example.com/favicon.ico',
       ],
       images: [],
       title: 'こんにちは、世界。',
@@ -108,7 +108,7 @@ Generated by [AVA](https://avajs.dev).
     {
       charset: 'big5',
       favicons: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Ffavicon.ico',
+        'http://example.com/favicon.ico',
       ],
       images: [],
       title: '你好，世界。',
@@ -121,7 +121,7 @@ Generated by [AVA](https://avajs.dev).
     {
       charset: 'euc-kr',
       favicons: [
-        'http://localhost:3010/api/worker/image-proxy?url=https%3A%2F%2Fexample.com%2Ffavicon.ico',
+        'http://example.com/favicon.ico',
       ],
       images: [],
       title: '안녕하세요, 세계.',

packages/backend/server/src/plugins/worker/controller.ts

@@ -209,7 +209,6 @@ export class WorkerController {
         videos: [],
         favicons: [],
       };
-      const baseUrl = new URL(request.url, this.url.baseUrl).toString();
 
       if (response.body) {
         const resp = await decodeWithCharset(response, res);
@@ -276,7 +275,7 @@ export class WorkerController {
 
         await rewriter.transform(resp).text();
 
-        res.images = await reduceUrls(baseUrl, res.images);
+        res.images = await reduceUrls(res.images);
 
         this.logger.debug('Processed response with HTMLRewriter', {
           origin,
@@ -293,7 +292,7 @@ export class WorkerController {
           appendUrl(faviconUrl.toString(), res.favicons);
         }
 
-        res.favicons = await reduceUrls(baseUrl, res.favicons);
+        res.favicons = await reduceUrls(res.favicons);
       }
 
       const json = JSON.stringify(res);

packages/backend/server/src/plugins/worker/utils/index.ts

@@ -1,5 +1,4 @@
 export * from './headers';
-export * from './proxy';
 export * from './url';
 
 export function parseJson<T>(data: string): T | null {

packages/backend/server/src/plugins/worker/utils/proxy.ts

@@ -1,54 +0,0 @@
-const IMAGE_PROXY = '/api/worker/image-proxy';
-
-const httpsDomain = new Set();
-
-async function checkHttpsSupport(url: URL): Promise<boolean> {
-  const httpsUrl = new URL(url.toString());
-  httpsUrl.protocol = 'https:';
-  try {
-    const response = await fetch(httpsUrl, {
-      method: 'HEAD',
-      redirect: 'manual',
-    });
-
-    if (response.ok || (response.status >= 400 && response.status < 600)) {
-      return true;
-    }
-  } catch {}
-  return false;
-}
-
-async function fixProtocol(url: string): Promise<URL> {
-  const targetUrl = new URL(url);
-  if (targetUrl.protocol !== 'http:') {
-    return targetUrl;
-  } else if (httpsDomain.has(targetUrl.hostname)) {
-    targetUrl.protocol = 'https:';
-    return targetUrl;
-  } else if (await checkHttpsSupport(targetUrl)) {
-    httpsDomain.add(targetUrl.hostname);
-    targetUrl.protocol = 'https:';
-    return targetUrl;
-  }
-  return targetUrl;
-}
-
-export function imageProxyBuilder(
-  url: string
-): (url: string) => Promise<string | undefined> {
-  try {
-    const proxy = new URL(url);
-    proxy.pathname = IMAGE_PROXY;
-
-    return async url => {
-      try {
-        const targetUrl = await fixProtocol(url);
-        proxy.searchParams.set('url', targetUrl.toString());
-        return proxy.toString();
-      } catch {}
-      return;
-    };
-  } catch {
-    return async url => url.toString();
-  }
-}

packages/backend/server/src/plugins/worker/utils/url.ts

@@ -1,7 +1,5 @@
 import { getDomain, getSubdomain } from 'tldts';
 
-import { imageProxyBuilder } from './proxy';
-
 const localhost = new Set(['localhost', '127.0.0.1']);
 
 const URL_FIXERS: Record<string, (url: URL) => URL> = {
@@ -58,11 +56,6 @@ export function appendUrl(url: string | null, array?: string[]) {
   }
 }
 
-export async function reduceUrls(baseUrl: string, urls?: string[]) {
-  if (urls && urls.length > 0) {
-    const imageProxy = imageProxyBuilder(baseUrl);
-    const newUrls = await Promise.all(urls.map(imageProxy));
-    return newUrls.filter((x): x is string => !!x);
-  }
-  return [];
+export async function reduceUrls(urls: string[] = []) {
+  return Array.from(new Set(urls.filter(Boolean) as string[]));
 }

packages/frontend/core/src/blocksuite/ai/components/text-renderer.ts

@@ -1,11 +1,11 @@
 import { createReactComponentFromLit } from '@affine/component';
-import {
-  defaultImageProxyMiddleware,
-  ImageProxyService,
-} from '@blocksuite/affine/blocks/image';
 import { Container, type ServiceProvider } from '@blocksuite/affine/global/di';
 import { WithDisposable } from '@blocksuite/affine/global/lit';
-import { codeBlockWrapMiddleware } from '@blocksuite/affine/shared/adapters';
+import {
+  codeBlockWrapMiddleware,
+  defaultImageProxyMiddleware,
+  ImageProxyService,
+} from '@blocksuite/affine/shared/adapters';
 import {
   LinkPreviewerService,
   ThemeProvider,

packages/frontend/core/src/blocksuite/ai/utils/editor-actions.ts

@@ -1,5 +1,5 @@
-import { defaultImageProxyMiddleware } from '@blocksuite/affine/blocks/image';
 import { deleteTextCommand } from '@blocksuite/affine/inlines/preset';
+import { defaultImageProxyMiddleware } from '@blocksuite/affine/shared/adapters';
 import { isInsideEdgelessEditor } from '@blocksuite/affine/shared/utils';
 import {
   type BlockComponent,

packages/frontend/core/src/blocksuite/block-suite-editor/blocksuite-editor.tsx

@@ -10,14 +10,14 @@ import {
 } from '@affine/core/modules/editor-setting';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import track from '@affine/track';
-import {
-  customImageProxyMiddleware,
-  ImageProxyService,
-} from '@blocksuite/affine/blocks/image';
 import { appendParagraphCommand } from '@blocksuite/affine/blocks/paragraph';
 import type { DocTitle } from '@blocksuite/affine/fragments/doc-title';
 import { DisposableGroup } from '@blocksuite/affine/global/disposable';
 import type { DocMode, RootBlockModel } from '@blocksuite/affine/model';
+import {
+  customImageProxyMiddleware,
+  ImageProxyService,
+} from '@blocksuite/affine/shared/adapters';
 import { focusBlockEnd } from '@blocksuite/affine/shared/commands';
 import { LinkPreviewerService } from '@blocksuite/affine/shared/services';
 import { getLastNoteBlock } from '@blocksuite/affine/shared/utils';

packages/frontend/core/src/blocksuite/utils/markdown-utils.ts

@@ -1,7 +1,7 @@
 import { WorkspaceImpl } from '@affine/core/modules/workspace/impls/workspace';
-import { defaultImageProxyMiddleware } from '@blocksuite/affine/blocks/image';
 import type { ServiceProvider } from '@blocksuite/affine/global/di';
 import {
+  defaultImageProxyMiddleware,
   embedSyncedDocMiddleware,
   MarkdownAdapter,
   MixTextAdapter,

packages/frontend/core/src/mobile/pages/workspace/detail/mobile-detail-page.tsx

@@ -21,12 +21,12 @@ import { WorkbenchService } from '@affine/core/modules/workbench';
 import { ViewService } from '@affine/core/modules/workbench/services/view';
 import { WorkspaceService } from '@affine/core/modules/workspace';
 import { i18nTime } from '@affine/i18n';
+import { DisposableGroup } from '@blocksuite/affine/global/disposable';
+import { RefNodeSlotsProvider } from '@blocksuite/affine/inlines/reference';
 import {
   customImageProxyMiddleware,
   ImageProxyService,
-} from '@blocksuite/affine/blocks/image';
-import { DisposableGroup } from '@blocksuite/affine/global/disposable';
-import { RefNodeSlotsProvider } from '@blocksuite/affine/inlines/reference';
+} from '@blocksuite/affine/shared/adapters';
 import { LinkPreviewerService } from '@blocksuite/affine/shared/services';
 import {
   FrameworkScope,