refactor(core): image block use peek view workflow (#7329)

depends on https://github.com/toeverything/blocksuite/pull/7424

packages/frontend/core/package.json

@@ -19,13 +19,13 @@
     "@affine/graphql": "workspace:*",
     "@affine/i18n": "workspace:*",
     "@affine/templates": "workspace:*",
-    "@blocksuite/block-std": "0.15.0-canary-202406252341-172c4b8",
-    "@blocksuite/blocks": "0.15.0-canary-202406252341-172c4b8",
-    "@blocksuite/global": "0.15.0-canary-202406252341-172c4b8",
+    "@blocksuite/block-std": "0.15.0-canary-202406260417-3b9fb16",
+    "@blocksuite/blocks": "0.15.0-canary-202406260417-3b9fb16",
+    "@blocksuite/global": "0.15.0-canary-202406260417-3b9fb16",
     "@blocksuite/icons": "2.1.58",
-    "@blocksuite/inline": "0.15.0-canary-202406252341-172c4b8",
-    "@blocksuite/presets": "0.15.0-canary-202406252341-172c4b8",
-    "@blocksuite/store": "0.15.0-canary-202406252341-172c4b8",
+    "@blocksuite/inline": "0.15.0-canary-202406260417-3b9fb16",
+    "@blocksuite/presets": "0.15.0-canary-202406260417-3b9fb16",
+    "@blocksuite/store": "0.15.0-canary-202406260417-3b9fb16",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",

packages/frontend/core/src/modules/peek-view/entities/peek-view.ts

@@ -3,6 +3,7 @@ import {
   AffineReference,
   type EmbedLinkedDocModel,
   type EmbedSyncedDocModel,
+  type ImageBlockModel,
   type SurfaceRefBlockComponent,
   type SurfaceRefBlockModel,
 } from '@blocksuite/blocks';
@@ -12,6 +13,7 @@ import type { TemplateResult } from 'lit';
 import { firstValueFrom, map, race } from 'rxjs';
 
 import { resolveLinkToDoc } from '../../navigation';
+import type { WorkbenchService } from '../../workbench';
 
 export type PeekViewTarget =
   | HTMLElement
@@ -20,17 +22,28 @@ export type PeekViewTarget =
   | HTMLAnchorElement
   | { docId: string; blockId?: string };
 
-export type DocPeekViewInfo = {
+export interface DocPeekViewInfo {
+  type: 'doc';
   docId: string;
   blockId?: string;
   mode?: DocMode;
   xywh?: `[${number},${number},${number},${number}]`;
+}
+
+export type ImagePeekViewInfo = {
+  type: 'image';
+  docId: string;
+  blockId: string;
+};
+
+export type CustomTemplatePeekViewInfo = {
+  type: 'template';
+  template: TemplateResult;
 };
 
 export type ActivePeekView = {
   target: PeekViewTarget;
-  info?: DocPeekViewInfo;
-  template?: TemplateResult;
+  info: DocPeekViewInfo | ImagePeekViewInfo | CustomTemplatePeekViewInfo;
 };
 
 const EMBED_DOC_FLAVOURS = [
@@ -44,6 +57,12 @@ const isEmbedDocModel = (
   return EMBED_DOC_FLAVOURS.includes(blockModel.flavour);
 };
 
+const isImageBlockModel = (
+  blockModel: BlockModel
+): blockModel is ImageBlockModel => {
+  return blockModel.flavour === 'affine:image';
+};
+
 const isSurfaceRefModel = (
   blockModel: BlockModel
 ): blockModel is SurfaceRefBlockModel => {
@@ -51,12 +70,20 @@ const isSurfaceRefModel = (
 };
 
 function resolvePeekInfoFromPeekTarget(
-  peekTarget?: PeekViewTarget
-): DocPeekViewInfo | undefined {
-  if (!peekTarget) return;
+  peekTarget: PeekViewTarget,
+  template?: TemplateResult
+): ActivePeekView['info'] | undefined {
+  if (template) {
+    return {
+      type: 'template',
+      template,
+    };
+  }
+
   if (peekTarget instanceof AffineReference) {
     if (peekTarget.refMeta) {
       return {
+        type: 'doc',
         docId: peekTarget.refMeta.id,
       };
     }
@@ -64,6 +91,7 @@ function resolvePeekInfoFromPeekTarget(
     const blockModel = peekTarget.model;
     if (isEmbedDocModel(blockModel)) {
       return {
+        type: 'doc',
         docId: blockModel.pageId,
       };
     } else if (isSurfaceRefModel(blockModel)) {
@@ -73,22 +101,31 @@ function resolvePeekInfoFromPeekTarget(
         const docId =
           'doc' in refModel ? refModel.doc.id : refModel.surface.doc.id;
         return {
+          type: 'doc',
           docId,
           mode: 'edgeless',
           xywh: refModel.xywh,
         };
       }
+    } else if (isImageBlockModel(blockModel)) {
+      return {
+        type: 'image',
+        docId: blockModel.doc.id,
+        blockId: blockModel.id,
+      };
     }
   } else if (peekTarget instanceof HTMLAnchorElement) {
     const maybeDoc = resolveLinkToDoc(peekTarget.href);
     if (maybeDoc) {
       return {
+        type: 'doc',
         docId: maybeDoc.docId,
         blockId: maybeDoc.blockId,
       };
     }
   } else if ('docId' in peekTarget) {
     return {
+      type: 'doc',
       docId: peekTarget.docId,
       blockId: peekTarget.blockId,
     };
@@ -100,6 +137,10 @@ export class PeekViewEntity extends Entity {
   private readonly _active$ = new LiveData<ActivePeekView | null>(null);
   private readonly _show$ = new LiveData<boolean>(false);
 
+  constructor(private readonly workbenchService: WorkbenchService) {
+    super();
+  }
+
   active$ = this._active$.distinctUntilChanged();
   show$ = this._show$
     .map(show => show && this._active$.value !== null)
@@ -110,11 +151,20 @@ export class PeekViewEntity extends Entity {
     target: ActivePeekView['target'],
     template?: TemplateResult
   ) => {
-    const resolvedInfo = resolvePeekInfoFromPeekTarget(target);
-    if (!resolvedInfo && !template) {
+    const resolvedInfo = resolvePeekInfoFromPeekTarget(target, template);
+    if (!resolvedInfo) {
       return;
     }
-    this._active$.next({ target, info: resolvedInfo, template });
+
+    const active = this._active$.value;
+
+    // if there is an active peek view and it is a doc peek view, we will navigate it first
+    if (active?.info.type === 'doc' && this.show$.value) {
+      // TODO(@pengx17): scroll to the viewing position?
+      this.workbenchService.workbench.openPage(active.info.docId);
+    }
+
+    this._active$.next({ target, info: resolvedInfo });
     this._show$.next(true);
     return firstValueFrom(race(this._active$, this.show$).pipe(map(() => {})));
   };

packages/frontend/core/src/modules/peek-view/index.ts

@@ -1,10 +1,14 @@
-import type { Framework } from '@toeverything/infra';
+import { type Framework, WorkspaceScope } from '@toeverything/infra';
 
+import { WorkbenchService } from '../workbench';
 import { PeekViewEntity } from './entities/peek-view';
 import { PeekViewService } from './services/peek-view';
 
 export function configurePeekViewModule(framework: Framework) {
-  framework.service(PeekViewService).entity(PeekViewEntity);
+  framework
+    .scope(WorkspaceScope)
+    .service(PeekViewService)
+    .entity(PeekViewEntity, [WorkbenchService]);
 }
 
 export { PeekViewEntity, PeekViewService };

packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx

@@ -3,7 +3,6 @@ import { PageDetailSkeleton } from '@affine/component/page-detail-skeleton';
 import { AIProvider } from '@affine/core/blocksuite/presets/ai';
 import { AffineErrorBoundary } from '@affine/core/components/affine/affine-error-boundary';
 import { BlockSuiteEditor } from '@affine/core/components/blocksuite/block-suite-editor';
-import { ImagePreviewModal } from '@affine/core/components/image-preview';
 import { useNavigateHelper } from '@affine/core/hooks/use-navigate-helper';
 import { PageNotFound } from '@affine/core/pages/404';
 import { Bound, type EdgelessRootService } from '@blocksuite/blocks';
@@ -14,10 +13,10 @@ import { DocsService, FrameworkScope, useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 
-import { WorkbenchService } from '../../workbench';
-import { PeekViewService } from '../services/peek-view';
+import { WorkbenchService } from '../../../workbench';
+import { PeekViewService } from '../../services/peek-view';
+import { useDoc } from '../utils';
 import * as styles from './doc-peek-view.css';
-import { useDoc } from './utils';
 
 function fitViewport(
   editor: AffineEditorContainer,
@@ -160,13 +159,6 @@ export function DocPeekPreview({
               defaultSelectedBlockId={blockId}
               page={doc.blockSuiteDoc}
             />
-            {editor?.host ? (
-              <ImagePreviewModal
-                pageId={doc.id}
-                docCollection={doc.blockSuiteDoc.collection}
-                host={editor.host}
-              />
-            ) : null}
           </FrameworkScope>
         </Scrollable.Viewport>
         <Scrollable.Scrollbar />

packages/frontend/core/src/modules/peek-view/view/doc-preview/index.ts

@@ -0,0 +1 @@
+export { DocPeekPreview } from './doc-peek-view';

packages/frontend/core/src/modules/peek-view/view/image-preview/index.tsx

@@ -2,7 +2,6 @@ import { toast } from '@affine/component';
 import { Button, IconButton } from '@affine/component/ui/button';
 import { Tooltip } from '@affine/component/ui/tooltip';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { PeekViewModalContainer } from '@affine/core/modules/peek-view/view/modal-container';
 import type { ImageBlockModel } from '@blocksuite/blocks';
 import { assertExists } from '@blocksuite/global/utils';
 import {
@@ -16,7 +15,8 @@ import {
   PlusIcon,
   ViewBarIcon,
 } from '@blocksuite/icons/rc';
-import type { BlockModel, DocCollection } from '@blocksuite/store';
+import type { BlockModel } from '@blocksuite/store';
+import { useService } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useErrorBoundary } from 'foxact/use-error-boundary';
 import type { PropsWithChildren, ReactElement } from 'react';
@@ -24,7 +24,6 @@ import {
   Suspense,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -33,6 +32,8 @@ import type { FallbackProps } from 'react-error-boundary';
 import { ErrorBoundary } from 'react-error-boundary';
 import useSWR from 'swr';
 
+import { PeekViewService } from '../../services/peek-view';
+import { useDoc } from '../utils';
 import { useZoomControls } from './hooks/use-zoom';
 import * as styles from './index.css';
 
@@ -120,9 +121,8 @@ async function saveBufferToFile(url: string, filename: string) {
 }
 
 export type ImagePreviewModalProps = {
-  docCollection: DocCollection;
-  pageId: string;
-  host: HTMLElement;
+  docId: string;
+  blockId: string;
 };
 
 const ButtonWithTooltip = ({
@@ -149,24 +149,25 @@ const ButtonWithTooltip = ({
   }
 };
 
-const ImagePreviewModalImpl = (
-  props: ImagePreviewModalProps & {
-    blockId: string;
-    onBlockIdChange: (blockId: string | null) => void;
-    onClose: () => void;
-    animating: boolean;
-  }
-): ReactElement | null => {
-  const page = useMemo(() => {
-    return props.docCollection.getDoc(props.pageId);
-  }, [props.docCollection, props.pageId]);
+const ImagePreviewModalImpl = ({
+  docId,
+  blockId,
+  onBlockIdChange,
+  onClose,
+}: ImagePreviewModalProps & {
+  onBlockIdChange: (blockId: string) => void;
+  onClose: () => void;
+}): ReactElement | null => {
+  const { doc, workspace } = useDoc(docId);
+  const blocksuiteDoc = doc?.blockSuiteDoc;
+  const docCollection = workspace.docCollection;
   const blockModel = useMemo(() => {
-    const block = page?.getBlock(props.blockId);
+    const block = blocksuiteDoc?.getBlock(blockId);
     if (!block) {
       return null;
     }
     return block.model as ImageBlockModel;
-  }, [page, props.blockId]);
+  }, [blockId, blocksuiteDoc]);
   const caption = useMemo(() => {
     return blockModel?.caption ?? '';
   }, [blockModel?.caption]);
@@ -188,8 +189,7 @@ const ImagePreviewModalImpl = (
 
   const goto = useCallback(
     (index: number) => {
-      const workspace = props.docCollection;
-      const page = workspace.getDoc(props.pageId);
+      const page = docCollection.getDoc(docId);
       assertExists(page);
 
       const block = blocks[index];
@@ -197,18 +197,17 @@ const ImagePreviewModalImpl = (
       if (!block) return;
 
       setCursor(index);
-      props.onBlockIdChange(block.id);
+      onBlockIdChange(block.id);
       resetZoom();
     },
-    [props, blocks, resetZoom]
+    [docCollection, docId, blocks, onBlockIdChange, resetZoom]
   );
 
   const deleteHandler = useCallback(
     (index: number) => {
-      const { pageId, docCollection: workspace, onClose } = props;
-
-      const page = workspace.getDoc(pageId);
-      assertExists(page);
+      if (!blocksuiteDoc) {
+        return;
+      }
 
       let block = blocks[index];
 
@@ -216,7 +215,7 @@ const ImagePreviewModalImpl = (
       const newBlocks = blocks.toSpliced(index, 1);
       setBlocks(newBlocks);
 
-      page.deleteBlock(block);
+      blocksuiteDoc.deleteBlock(block);
 
       // next
       block = newBlocks[index];
@@ -234,11 +233,11 @@ const ImagePreviewModalImpl = (
         setCursor(index);
       }
 
-      props.onBlockIdChange(block.id);
+      onBlockIdChange(block.id);
 
       resetZoom();
     },
-    [props, blocks, setBlocks, setCursor, resetZoom]
+    [blocksuiteDoc, blocks, onBlockIdChange, resetZoom, onClose]
   );
 
   const downloadHandler = useAsyncCallback(async () => {
@@ -256,66 +255,58 @@ const ImagePreviewModalImpl = (
   }, []);
 
   useEffect(() => {
-    const page = props.docCollection.getDoc(props.pageId);
-    assertExists(page);
-
-    const block = page.getBlock(props.blockId);
-    if (!block) {
+    if (!blockModel || !blocksuiteDoc) {
       return;
     }
-    const blockModel = block.model as ImageBlockModel;
 
-    const prevs = page.getPrevs(blockModel).filter(filterImageBlock);
-    const nexts = page.getNexts(blockModel).filter(filterImageBlock);
+    const prevs = blocksuiteDoc.getPrevs(blockModel).filter(filterImageBlock);
+    const nexts = blocksuiteDoc.getNexts(blockModel).filter(filterImageBlock);
 
     const blocks = [...prevs, blockModel, ...nexts];
     setBlocks(blocks);
     setCursor(blocks.length ? prevs.length : 0);
-  }, [props.blockId, props.pageId, props.docCollection, setBlocks]);
+  }, [setBlocks, blockModel, blocksuiteDoc]);
 
-  const { data, error } = useSWR(
-    ['workspace', 'image', props.pageId, props.blockId],
-    {
-      fetcher: ([_, __, pageId, blockId]) => {
-        const page = props.docCollection.getDoc(pageId);
-        assertExists(page);
+  const { data, error } = useSWR(['workspace', 'image', docId, blockId], {
+    fetcher: ([_, __, pageId, blockId]) => {
+      const page = docCollection.getDoc(pageId);
+      assertExists(page);
 
-        const block = page.getBlock(blockId);
-        if (!block) {
-          return null;
-        }
-        const blockModel = block.model as ImageBlockModel;
-        return props.docCollection.blobSync.get(blockModel.sourceId as string);
-      },
-      suspense: true,
-    }
-  );
+      const block = page.getBlock(blockId);
+      if (!block) {
+        return null;
+      }
+      const blockModel = block.model as ImageBlockModel;
+      return docCollection.blobSync.get(blockModel.sourceId as string);
+    },
+    suspense: true,
+  });
 
   useEffect(() => {
     const handleKeyUp = (event: KeyboardEvent) => {
-      if (!page || !blockModel) {
+      if (!blocksuiteDoc || !blockModel) {
         return;
       }
 
       if (event.key === 'ArrowLeft') {
-        const prevBlock = page
+        const prevBlock = blocksuiteDoc
           .getPrevs(blockModel)
           .findLast(
             (block): block is ImageBlockModel =>
               block.flavour === 'affine:image'
           );
         if (prevBlock) {
-          props.onBlockIdChange(prevBlock.id);
+          onBlockIdChange(prevBlock.id);
         }
       } else if (event.key === 'ArrowRight') {
-        const nextBlock = page
+        const nextBlock = blocksuiteDoc
           .getNexts(blockModel)
           .find(
             (block): block is ImageBlockModel =>
               block.flavour === 'affine:image'
           );
         if (nextBlock) {
-          props.onBlockIdChange(nextBlock.id);
+          onBlockIdChange(nextBlock.id);
         }
       } else {
         return;
@@ -328,7 +319,7 @@ const ImagePreviewModalImpl = (
     return () => {
       document.removeEventListener('keyup', handleKeyUp);
     };
-  }, [blockModel, page, props]);
+  }, [blockModel, blocksuiteDoc, onBlockIdChange]);
 
   useErrorBoundary(error);
 
@@ -351,8 +342,11 @@ const ImagePreviewModalImpl = (
     return null;
   }
   return (
-    <div className={styles.imagePreviewModalStyle}>
-      <div className={styles.imagePreviewTrap} onClick={props.onClose} />
+    <div
+      data-testid="image-preview-modal"
+      className={styles.imagePreviewModalStyle}
+    >
+      <div className={styles.imagePreviewTrap} onClick={onClose} />
       <div className={styles.imagePreviewModalContainerStyle}>
         <div
           className={clsx('zoom-area', { 'zoomed-bigger': isZoomedBigger })}
@@ -360,7 +354,7 @@ const ImagePreviewModalImpl = (
         >
           <div className={styles.imagePreviewModalCenterStyle}>
             <img
-              data-blob-id={props.blockId}
+              data-blob-id={blockId}
               data-testid="image-content"
               src={url}
               alt={caption}
@@ -397,7 +391,7 @@ const ImagePreviewModalImpl = (
             data-testid="previous-image-button"
             tooltip="Previous"
             icon={<ArrowLeftSmallIcon />}
-            disabled={props.animating || cursor < 1}
+            disabled={cursor < 1}
             onClick={() => goto(cursor - 1)}
           />
           <div className={styles.cursorStyle}>
@@ -407,7 +401,7 @@ const ImagePreviewModalImpl = (
             data-testid="next-image-button"
             tooltip="Next"
             icon={<ArrowRightSmallIcon />}
-            disabled={props.animating || cursor + 1 === blocks.length}
+            disabled={cursor + 1 === blocks.length}
             onClick={() => goto(cursor + 1)}
           />
           <div className={styles.dividerStyle}></div>
@@ -415,21 +409,18 @@ const ImagePreviewModalImpl = (
             data-testid="fit-to-screen-button"
             tooltip="Fit to screen"
             icon={<ViewBarIcon />}
-            disabled={props.animating}
             onClick={() => resetZoom()}
           />
           <ButtonWithTooltip
             data-testid="zoom-out-button"
             tooltip="Zoom out"
             icon={<MinusIcon />}
-            disabled={props.animating}
             onClick={zoomOut}
           />
           <ButtonWithTooltip
             data-testid="reset-scale-button"
             tooltip="Reset scale"
             onClick={resetScale}
-            disabled={props.animating}
           >
             {`${(currentScale * 100).toFixed(0)}%`}
           </ButtonWithTooltip>
@@ -438,7 +429,6 @@ const ImagePreviewModalImpl = (
             data-testid="zoom-in-button"
             tooltip="Zoom in"
             icon={<PlusIcon />}
-            disabled={props.animating}
             onClick={zoomIn}
           />
           <div className={styles.dividerStyle}></div>
@@ -446,14 +436,12 @@ const ImagePreviewModalImpl = (
             data-testid="download-button"
             tooltip="Download"
             icon={<DownloadIcon />}
-            disabled={props.animating}
             onClick={downloadHandler}
           />
           <ButtonWithTooltip
             data-testid="copy-to-clipboard-button"
             tooltip="Copy to clipboard"
             icon={<CopyIcon />}
-            disabled={props.animating}
             onClick={copyHandler}
           />
           <div className={styles.dividerStyle}></div>
@@ -461,7 +449,7 @@ const ImagePreviewModalImpl = (
             data-testid="delete-button"
             tooltip="Delete"
             icon={<DeleteIcon />}
-            disabled={props.animating || blocks.length === 0}
+            disabled={blocks.length === 0}
             onClick={() => deleteHandler(cursor)}
           />
         </div>
@@ -483,67 +471,38 @@ export const ImagePreviewErrorBoundary = (
   );
 };
 
-export const ImagePreviewModal = (
+export const ImagePreviewPeekView = (
   props: ImagePreviewModalProps
 ): ReactElement | null => {
-  const [show, setShow] = useState(false);
-  const [blockId, setBlockId] = useState<string | null>(null);
-  const isOpen = show && !!blockId;
+  const [blockId, setBlockId] = useState<string | null>(props.blockId);
+  const peekView = useService(PeekViewService).peekView;
+  const onClose = peekView.close;
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
 
-  // todo: refactor this to use peek view service
-  useLayoutEffect(() => {
-    const handleDblClick = (event: MouseEvent) => {
-      const target = event.target as HTMLElement | null;
-      if (target?.tagName === 'IMG') {
-        const imageBlock = target.closest('affine-image');
-        if (imageBlock) {
-          const blockId = imageBlock.dataset.blockId;
-          if (!blockId) return;
-          setBlockId(blockId);
-          setShow(true);
-        }
-      }
-    };
-    props.host.addEventListener('dblclick', handleDblClick);
-    return () => {
-      props.host.removeEventListener('dblclick', handleDblClick);
-    };
-  }, [props.host]);
-
-  const [animating, setAnimating] = useState(false);
+  useEffect(() => {
+    setBlockId(props.blockId);
+  }, [props.blockId]);
 
   return (
-    <PeekViewModalContainer
-      padding={false}
-      onOpenChange={setShow}
-      open={isOpen}
-      animation="fade"
-      onAnimationStart={() => setAnimating(true)}
-      onAnimateEnd={() => setAnimating(false)}
-      testId="image-preview-modal"
-    >
-      <ImagePreviewErrorBoundary>
-        <Suspense>
-          {blockId ? (
-            <ImagePreviewModalImpl
-              {...props}
-              animating={animating}
-              blockId={blockId}
-              onBlockIdChange={setBlockId}
-              onClose={() => setShow(false)}
-            />
-          ) : null}
-          <button
-            data-testid="image-preview-close-button"
-            onClick={() => {
-              setShow(false);
-            }}
-            className={styles.imagePreviewModalCloseButtonStyle}
-          >
-            <CloseIcon />
-          </button>
-        </Suspense>
-      </ImagePreviewErrorBoundary>
-    </PeekViewModalContainer>
+    <ImagePreviewErrorBoundary>
+      <Suspense>
+        {blockId ? (
+          <ImagePreviewModalImpl
+            {...props}
+            onClose={onClose}
+            blockId={blockId}
+            onBlockIdChange={setBlockId}
+          />
+        ) : null}
+        <button
+          ref={buttonRef}
+          data-testid="image-preview-close-button"
+          onClick={onClose}
+          className={styles.imagePreviewModalCloseButtonStyle}
+        >
+          <CloseIcon />
+        </button>
+      </Suspense>
+    </ImagePreviewErrorBoundary>
   );
 };

packages/frontend/core/src/modules/peek-view/view/modal-container.css.ts

@@ -150,6 +150,11 @@ export const modalContent = style({
   // :focus-visible will set outline
   outline: 'none',
   position: 'relative',
+  selectors: {
+    '&[data-no-interaction=true]': {
+      pointerEvents: 'none',
+    },
+  },
 });
 
 export const modalControls = style({

packages/frontend/core/src/modules/peek-view/view/modal-container.tsx

@@ -3,6 +3,7 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import {
   createContext,
+  forwardRef,
   type PropsWithChildren,
   useContext,
   useEffect,
@@ -57,30 +58,38 @@ function getElementScreenPositionCenter(target: HTMLElement) {
   };
 }
 
-export const PeekViewModalContainer = ({
-  onOpenChange,
-  open,
-  target,
-  controls,
-  children,
-  hideOnEntering,
-  onAnimationStart,
-  onAnimateEnd,
-  animation = 'zoom',
-  padding = true,
-  testId,
-}: PropsWithChildren<{
-  open: boolean;
-  hideOnEntering?: boolean;
-  target?: HTMLElement;
+export type PeekViewModalContainerProps = PropsWithChildren<{
   onOpenChange: (open: boolean) => void;
+  open: boolean;
+  target?: HTMLElement;
   controls?: React.ReactNode;
+  hideOnEntering?: boolean;
   onAnimationStart?: () => void;
   onAnimateEnd?: () => void;
   padding?: boolean;
   animation?: 'fade' | 'zoom';
   testId?: string;
-}>) => {
+}>;
+
+export const PeekViewModalContainer = forwardRef<
+  HTMLDivElement,
+  PeekViewModalContainerProps
+>(function PeekViewModalContainer(
+  {
+    onOpenChange,
+    open,
+    target,
+    controls,
+    children,
+    hideOnEntering,
+    onAnimationStart,
+    onAnimateEnd,
+    animation = 'zoom',
+    padding = true,
+    testId,
+  },
+  ref
+) {
   const [{ status }, toggle] = useTransition({
     timeout: animationTimeout,
   });
@@ -112,6 +121,7 @@ export const PeekViewModalContainer = ({
             onAnimationEnd={onAnimateEnd}
           />
           <div
+            ref={ref}
             data-testid={testId}
             data-peek-view-wrapper
             className={styles.modalContentWrapper}
@@ -133,6 +143,7 @@ export const PeekViewModalContainer = ({
             >
               <Dialog.Content
                 {...contentOptions}
+                data-no-interaction={status !== 'entered'}
                 className={styles.modalContent}
               >
                 {hideOnEntering && status === 'entering' ? null : children}
@@ -148,4 +159,4 @@ export const PeekViewModalContainer = ({
       </Dialog.Root>
     </PeekViewContext.Provider>
   );
-};
+});

packages/frontend/core/src/modules/peek-view/view/peek-view-manager.tsx

@@ -5,34 +5,41 @@ import { useEffect, useMemo } from 'react';
 
 import type { ActivePeekView } from '../entities/peek-view';
 import { PeekViewService } from '../services/peek-view';
-import { DocPeekPreview } from './doc-peek-view';
-import { PeekViewModalContainer } from './modal-container';
+import { DocPeekPreview } from './doc-preview';
+import { ImagePreviewPeekView } from './image-preview';
+import {
+  PeekViewModalContainer,
+  type PeekViewModalContainerProps,
+} from './modal-container';
 import {
   DefaultPeekViewControls,
   DocPeekViewControls,
 } from './peek-view-controls';
 
-function renderPeekView({ info, template }: ActivePeekView) {
-  if (template) {
-    return toReactNode(template);
+function renderPeekView({ info }: ActivePeekView) {
+  if (info.type === 'template') {
+    return toReactNode(info.template);
+  }
+  if (info.type === 'doc') {
+    return (
+      <DocPeekPreview
+        mode={info.mode}
+        xywh={info.xywh}
+        docId={info.docId}
+        blockId={info.blockId}
+      />
+    );
   }
 
-  if (!info) {
-    return null;
+  if (info.type === 'image') {
+    return <ImagePreviewPeekView docId={info.docId} blockId={info.blockId} />;
   }
 
-  return (
-    <DocPeekPreview
-      mode={info.mode}
-      xywh={info.xywh}
-      docId={info.docId}
-      blockId={info.blockId}
-    />
-  );
+  return null; // unreachable
 }
 
 const renderControls = ({ info }: ActivePeekView) => {
-  if (info && 'docId' in info) {
+  if (info.type === 'doc') {
     return (
       <DocPeekViewControls
         mode={info.mode}
@@ -42,20 +49,44 @@ const renderControls = ({ info }: ActivePeekView) => {
     );
   }
 
+  if (info.type === 'image') {
+    return null; // image controls are rendered in the image preview
+  }
+
   return <DefaultPeekViewControls />;
 };
 
+const getRendererProps = (
+  activePeekView?: ActivePeekView
+): Partial<PeekViewModalContainerProps> | undefined => {
+  if (!activePeekView) {
+    return;
+  }
+
+  const preview = renderPeekView(activePeekView);
+  const controls = renderControls(activePeekView);
+  return {
+    children: preview,
+    controls,
+    target:
+      activePeekView?.target instanceof HTMLElement
+        ? activePeekView.target
+        : undefined,
+    padding: activePeekView.info.type === 'doc',
+    animation: activePeekView.info.type === 'image' ? 'fade' : 'zoom',
+  };
+};
+
 export const PeekViewManagerModal = () => {
   const peekViewEntity = useService(PeekViewService).peekView;
   const activePeekView = useLiveData(peekViewEntity.active$);
   const show = useLiveData(peekViewEntity.show$);
 
-  const preview = useMemo(() => {
-    return activePeekView ? renderPeekView(activePeekView) : null;
-  }, [activePeekView]);
-
-  const controls = useMemo(() => {
-    return activePeekView ? renderControls(activePeekView) : null;
+  const renderProps = useMemo(() => {
+    if (!activePeekView) {
+      return;
+    }
+    return getRendererProps(activePeekView);
   }, [activePeekView]);
 
   useEffect(() => {
@@ -72,20 +103,15 @@ export const PeekViewManagerModal = () => {
 
   return (
     <PeekViewModalContainer
-      open={show && !!preview}
-      target={
-        activePeekView?.target instanceof HTMLElement
-          ? activePeekView.target
-          : undefined
-      }
-      controls={controls}
+      {...renderProps}
+      open={show && !!renderProps}
       onOpenChange={open => {
         if (!open) {
           peekViewEntity.close();
         }
       }}
     >
-      {preview}
+      {renderProps?.children}
     </PeekViewModalContainer>
   );
 };

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

@@ -36,7 +36,6 @@ import type { Map as YMap } from 'yjs';
 
 import { AffineErrorBoundary } from '../../../components/affine/affine-error-boundary';
 import { GlobalPageHistoryModal } from '../../../components/affine/page-history-modal';
-import { ImagePreviewModal } from '../../../components/image-preview';
 import { PageDetailEditor } from '../../../components/page-detail-editor';
 import { TrashPageFooter } from '../../../components/pure/trash-page-footer';
 import { TopTip } from '../../../components/top-tip';
@@ -311,14 +310,6 @@ const DetailPageImpl = memo(function DetailPageImpl() {
           </MultiTabSidebarBody>
         }
       />
-
-      {editor?.host ? (
-        <ImagePreviewModal
-          pageId={doc.id}
-          docCollection={docCollection}
-          host={editor.host}
-        />
-      ) : null}
       <GlobalPageHistoryModal />
       <PageAIOnboarding />
     </>