fix: the image lost after exporting (#3150)

Co-authored-by: Alex Yang <himself65@outlook.com>
(cherry picked from commit 4f88774999)

packages/component/src/components/page-list/operation-menu-items/export.tsx

@@ -1,7 +1,6 @@
 import { pushNotificationAtom } from '@affine/component/notification-center';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { PageBlockModel } from '@blocksuite/blocks';
-import { ContentParser } from '@blocksuite/blocks/content-parser';
 import {
   ArrowRightSmallIcon,
   ExportIcon,
@@ -11,16 +10,16 @@ import {
   ExportToPngIcon,
 } from '@blocksuite/icons';
 import { useSetAtom } from 'jotai';
-import { useCallback, useRef } from 'react';
+import { useCallback } from 'react';
 
 import { Menu, MenuItem } from '../../..';
+import { getContentParser } from './get-content-parser';
 import type { CommonMenuItemProps } from './types';
 
 export const ExportToPdfMenuItem = ({
   onSelect,
 }: CommonMenuItemProps<{ type: 'pdf' }>) => {
   const t = useAFFiNEI18N();
-  const contentParserRef = useRef<ContentParser>();
   const { currentEditor } = globalThis;
   const setPushNotification = useSetAtom(pushNotificationAtom);
 
@@ -53,9 +52,7 @@ export const ExportToPdfMenuItem = ({
           });
         });
     } else {
-      const contentParser =
-        contentParserRef.current ??
-        (contentParserRef.current = new ContentParser(currentEditor.page));
+      const contentParser = getContentParser(currentEditor.page);
 
       contentParser
         .exportPdf()
@@ -95,17 +92,14 @@ export const ExportToHtmlMenuItem = ({
   onSelect,
 }: CommonMenuItemProps<{ type: 'html' }>) => {
   const t = useAFFiNEI18N();
-  const contentParserRef = useRef<ContentParser>();
   const { currentEditor } = globalThis;
   const setPushNotification = useSetAtom(pushNotificationAtom);
   const onClickExportHtml = useCallback(() => {
     if (!currentEditor) {
       return;
     }
-    if (!contentParserRef.current) {
-      contentParserRef.current = new ContentParser(currentEditor.page);
-    }
-    contentParserRef.current
+    const contentParser = getContentParser(currentEditor.page);
+    contentParser
       .exportHtml()
       .then(() => {
         onSelect?.({ type: 'html' });
@@ -138,7 +132,6 @@ export const ExportToPngMenuItem = ({
   onSelect,
 }: CommonMenuItemProps<{ type: 'png' }>) => {
   const t = useAFFiNEI18N();
-  const contentParserRef = useRef<ContentParser>();
   const { currentEditor } = globalThis;
   const setPushNotification = useSetAtom(pushNotificationAtom);
 
@@ -146,9 +139,7 @@ export const ExportToPngMenuItem = ({
     if (!currentEditor) {
       return;
     }
-    const contentParser =
-      contentParserRef.current ??
-      (contentParserRef.current = new ContentParser(currentEditor.page));
+    const contentParser = getContentParser(currentEditor.page);
 
     contentParser
       .exportPng()
@@ -189,17 +180,14 @@ export const ExportToMarkdownMenuItem = ({
   onSelect,
 }: CommonMenuItemProps<{ type: 'markdown' }>) => {
   const t = useAFFiNEI18N();
-  const contentParserRef = useRef<ContentParser>();
   const { currentEditor } = globalThis;
   const setPushNotification = useSetAtom(pushNotificationAtom);
   const onClickExportMarkdown = useCallback(() => {
     if (!currentEditor) {
       return;
     }
-    if (!contentParserRef.current) {
-      contentParserRef.current = new ContentParser(currentEditor.page);
-    }
-    contentParserRef.current
+    const contentParser = getContentParser(currentEditor.page);
+    contentParser
       .exportMarkdown()
       .then(() => {
         onSelect?.({ type: 'markdown' });

packages/component/src/components/page-list/operation-menu-items/get-content-parser.ts

@@ -0,0 +1,18 @@
+import { ContentParser } from '@blocksuite/blocks/content-parser';
+import type { Page } from '@blocksuite/store';
+
+const contentParserWeakMap = new WeakMap<Page, ContentParser>();
+
+export function getContentParser(page: Page) {
+  if (!contentParserWeakMap.has(page)) {
+    contentParserWeakMap.set(
+      page,
+      new ContentParser(page, {
+        imageProxyEndpoint: !environment.isDesktop
+          ? runtimeConfig.imageProxyUrl
+          : undefined,
+      })
+    );
+  }
+  return contentParserWeakMap.get(page) as ContentParser;
+}