feat: support opening in peek view

packages/frontend/component/src/components/attachment-viewer/styles.css.ts

@@ -6,6 +6,7 @@ export const viewerContainer = style({
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
+  height: '100%',
 });
 
 export const titlebar = style({
@@ -61,9 +62,6 @@ export const body = style({
       backgroundSize: '20px 20px',
       backgroundImage: `linear-gradient(${cssVarV2('button/grabber/default')} 1px, transparent 1px), linear-gradient(to right, ${cssVarV2('button/grabber/default')} 1px, transparent 1px)`,
     },
-    '&.scrollable': {
-      overflowY: 'auto',
-    },
   },
 });
 

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

@@ -1,5 +1,6 @@
 import type { BlockComponent, EditorHost } from '@blocksuite/affine/block-std';
 import type {
+  AttachmentBlockModel,
   DocMode,
   EmbedLinkedDocModel,
   EmbedSyncedDocModel,
@@ -44,6 +45,12 @@ export type ImagePeekViewInfo = {
   blockIds: [string];
 };
 
+export type AttachmentPeekViewInfo = {
+  type: 'attachment';
+  docId: string;
+  blockIds: [string];
+};
+
 export type AIChatBlockPeekViewInfo = {
   type: 'ai-chat-block';
   docId: string;
@@ -61,6 +68,7 @@ export type ActivePeekView = {
   info:
     | DocPeekViewInfo
     | ImagePeekViewInfo
+    | AttachmentPeekViewInfo
     | CustomTemplatePeekViewInfo
     | AIChatBlockPeekViewInfo;
 };
@@ -83,6 +91,12 @@ const isImageBlockModel = (
   return blockModel.flavour === 'affine:image';
 };
 
+const isAttachmentBlockModel = (
+  blockModel: BlockModel
+): blockModel is AttachmentBlockModel => {
+  return blockModel.flavour === 'affine:attachment';
+};
+
 const isSurfaceRefModel = (
   blockModel: BlockModel
 ): blockModel is SurfaceRefBlockModel => {
@@ -147,6 +161,12 @@ function resolvePeekInfoFromPeekTarget(
             xywh: refModel.xywh,
           };
         }
+      } else if (isAttachmentBlockModel(blockModel)) {
+        return {
+          type: 'attachment',
+          docId: blockModel.doc.id,
+          blockIds: [blockModel.id],
+        };
       } else if (isImageBlockModel(blockModel)) {
         return {
           type: 'image',

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

@@ -0,0 +1,37 @@
+import { AttachmentViewer } from '@affine/component/attachment-viewer';
+import type { PropsWithChildren } from 'react';
+import { Suspense, useEffect, useState } from 'react';
+import type { FallbackProps } from 'react-error-boundary';
+import { ErrorBoundary } from 'react-error-boundary';
+
+const ErrorLogger = (props: FallbackProps) => {
+  console.error('image preview modal error', props.error);
+  return null;
+};
+
+export const AttachmentPreviewErrorBoundary = (props: PropsWithChildren) => {
+  return (
+    <ErrorBoundary fallbackRender={ErrorLogger}>{props.children}</ErrorBoundary>
+  );
+};
+
+export type AttachmentPreviewModalProps = {
+  docId: string;
+  blockId: string;
+};
+
+export const AttachmentPreviewPeekView = (
+  props: AttachmentPreviewModalProps
+) => {
+  const [blockId, setBlockId] = useState<string | null>(props.blockId);
+
+  useEffect(() => {
+    setBlockId(props.blockId);
+  }, [props.blockId]);
+
+  return (
+    <AttachmentPreviewErrorBoundary>
+      <Suspense>{blockId ? <AttachmentViewer /> : null}</Suspense>
+    </AttachmentPreviewErrorBoundary>
+  );
+};

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

@@ -6,6 +6,7 @@ import { useEffect, useMemo } from 'react';
 
 import type { ActivePeekView } from '../entities/peek-view';
 import { PeekViewService } from '../services/peek-view';
+import { AttachmentPreviewPeekView } from './attachment-preview';
 import { DocPeekPreview } from './doc-preview';
 import { ImagePreviewPeekView } from './image-preview';
 import {
@@ -33,6 +34,15 @@ function renderPeekView({ info }: ActivePeekView) {
     );
   }
 
+  if (info.type === 'attachment') {
+    return (
+      <AttachmentPreviewPeekView
+        docId={info.docId}
+        blockId={info.blockIds[0]}
+      />
+    );
+  }
+
   if (info.type === 'image') {
     return (
       <ImagePreviewPeekView docId={info.docId} blockId={info.blockIds[0]} />
@@ -59,6 +69,8 @@ const renderControls = ({ info }: ActivePeekView) => {
     );
   }
 
+  // TODO(@fundon): attachment's controls
+
   if (info.type === 'image') {
     return null; // image controls are rendered in the image preview
   }