feat(component): support image preview by double click (#2198)

packages/component/src/components/block-suite-editor/index.tsx

@@ -1,3 +1,4 @@
+import { config } from '@affine/env';
 import { editorContainerModuleAtom } from '@affine/jotai';
 import type { BlockHub } from '@blocksuite/blocks';
 import type { EditorContainer } from '@blocksuite/editor';
@@ -6,7 +7,8 @@ import type { Page } from '@blocksuite/store';
 import { Skeleton } from '@mui/material';
 import { useAtomValue } from 'jotai';
 import type { CSSProperties, ReactElement } from 'react';
-import { memo, Suspense, useCallback, useEffect, useRef } from 'react';
+import { lazy, memo, Suspense, useCallback, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -31,6 +33,12 @@ declare global {
   var currentEditor: EditorContainer | undefined;
 }
 
+const ImagePreviewModal = lazy(() =>
+  import('../image-preview-modal').then(module => ({
+    default: module.ImagePreviewModal,
+  }))
+);
+
 const BlockSuiteEditorImpl = (props: EditorProps): ReactElement => {
   const JotaiEditorContainer = useAtomValue(
     editorContainerModuleAtom
@@ -152,6 +160,17 @@ export const BlockSuiteEditor = memo(function BlockSuiteEditor(
       <Suspense fallback={<BlockSuiteFallback />}>
         <BlockSuiteEditorImpl {...props} />
       </Suspense>
+      {config.enableImagePreviewModal && props.page && (
+        <Suspense fallback={null}>
+          {createPortal(
+            <ImagePreviewModal
+              workspace={props.page.workspace}
+              pageId={props.page.id}
+            />,
+            document.body
+          )}
+        </Suspense>
+      )}
     </ErrorBoundary>
   );
 });