fix(core): circular dependency in pdf embed view (#9331)

packages/frontend/core/src/components/attachment-viewer/index.tsx

@@ -1,16 +1,12 @@
 import { ViewBody, ViewHeader } from '@affine/core/modules/workbench';
-import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';
 
 import { AttachmentPreviewErrorBoundary, Error } from './error';
-import { PDFViewer, type PDFViewerProps } from './pdf-viewer';
+import { PDFViewer } from './pdf-viewer';
 import * as styles from './styles.css';
 import { Titlebar } from './titlebar';
+import type { AttachmentViewerProps, PDFViewerProps } from './types';
 import { buildAttachmentProps } from './utils';
 
-export type AttachmentViewerProps = {
-  model: AttachmentBlockModel;
-};
-
 // In Peek view
 export const AttachmentViewer = ({ model }: AttachmentViewerProps) => {
   const props = buildAttachmentProps(model);

packages/frontend/core/src/components/attachment-viewer/pdf-viewer-embedded-inner.tsx

@@ -28,9 +28,9 @@ import {
   useState,
 } from 'react';
 
-import type { PDFViewerProps } from './pdf-viewer';
 import * as styles from './styles.css';
 import * as embeddedStyles from './styles.embedded.css';
+import type { PDFViewerProps } from './types';
 
 function defaultMeta() {
   return {
@@ -40,9 +40,7 @@ function defaultMeta() {
   };
 }
 
-type PDFViewerEmbeddedInnerProps = PDFViewerProps;
+export function PDFViewerEmbeddedInner({ model }: PDFViewerProps) {
-
-export function PDFViewerEmbeddedInner({ model }: PDFViewerEmbeddedInnerProps) {
   const scale = window.devicePixelRatio;
   const peekView = useService(PeekViewService).peekView;
   const pdfService = useService(PDFService);

packages/frontend/core/src/components/attachment-viewer/pdf-viewer-embedded.tsx

@@ -1,14 +1,13 @@
-import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';
+import { AttachmentPreviewErrorBoundary } from './error';
-
 import { PDFViewerEmbeddedInner } from './pdf-viewer-embedded-inner';
+import type { AttachmentViewerProps } from './types';
+import { buildAttachmentProps } from './utils';
 
-export interface PDFViewerEmbeddedProps {
+// In Embed view
-  model: AttachmentBlockModel;
+export const AttachmentEmbedPreview = ({ model }: AttachmentViewerProps) => {
-  name: string;
+  return (
-  ext: string;
+    <AttachmentPreviewErrorBoundary key={model.id}>
-  size: string;
+      <PDFViewerEmbeddedInner {...buildAttachmentProps(model)} />
-}
+    </AttachmentPreviewErrorBoundary>
-
+  );
-export function PDFViewerEmbedded(props: PDFViewerEmbeddedProps) {
+};
-  return <PDFViewerEmbeddedInner {...props} />;
-}

packages/frontend/core/src/components/attachment-viewer/pdf-viewer.tsx

@@ -1,11 +1,11 @@
 import { type PDF, PDFService, PDFStatus } from '@affine/core/modules/pdf';
 import { LoadingSvg } from '@affine/core/modules/pdf/views';
 import track from '@affine/track';
-import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useEffect, useState } from 'react';
 
 import { PDFViewerInner } from './pdf-viewer-inner';
+import type { PDFViewerProps } from './types';
 
 function PDFViewerStatus({ pdf, ...props }: PDFViewerProps & { pdf: PDF }) {
   const state = useLiveData(pdf.state$);
@@ -23,13 +23,6 @@ function PDFViewerStatus({ pdf, ...props }: PDFViewerProps & { pdf: PDF }) {
   return <PDFViewerInner {...props} pdf={pdf} state={state} />;
 }
 
-export interface PDFViewerProps {
-  model: AttachmentBlockModel;
-  name: string;
-  ext: string;
-  size: string;
-}
-
 export function PDFViewer({ model, ...props }: PDFViewerProps) {
   const pdfService = useService(PDFService);
   const [pdf, setPdf] = useState<PDF | null>(null);

packages/frontend/core/src/components/attachment-viewer/types.ts

@@ -0,0 +1,12 @@
+import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';
+
+export type AttachmentViewerProps = {
+  model: AttachmentBlockModel;
+};
+
+export type PDFViewerProps = {
+  model: AttachmentBlockModel;
+  name: string;
+  ext: string;
+  size: string;
+};

packages/frontend/core/src/components/attachment-viewer/utils.ts

@@ -3,7 +3,7 @@ import type { AttachmentBlockModel } from '@blocksuite/affine/blocks';
 import { filesize } from 'filesize';
 
 import { downloadBlob } from '../../utils/resource';
-import type { PDFViewerProps } from './pdf-viewer';
+import type { PDFViewerProps } from './types';
 
 export async function getAttachmentBlob(model: AttachmentBlockModel) {
   const sourceId = model.sourceId;

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/spec-patchers.tsx

@@ -8,9 +8,6 @@ import {
   type useConfirmModal,
 } from '@affine/component';
 import { AIChatBlockSchema } from '@affine/core/blocksuite/blocks';
-import { AttachmentPreviewErrorBoundary } from '@affine/core/components/attachment-viewer/error';
-import { PDFViewerEmbedded } from '@affine/core/components/attachment-viewer/pdf-viewer-embedded';
-import { buildAttachmentProps } from '@affine/core/components/attachment-viewer/utils';
 import { WorkspaceServerService } from '@affine/core/modules/cloud';
 import { type DocService, DocsService } from '@affine/core/modules/doc';
 import type { EditorService } from '@affine/core/modules/editor';
@@ -74,6 +71,7 @@ import { literal } from 'lit/static-html.js';
 import { pick } from 'lodash-es';
 
 import type { DocProps } from '../../../../../blocksuite/initialization';
+import { AttachmentEmbedPreview } from '../../../../attachment-viewer/pdf-viewer-embedded';
 import { generateUrl } from '../../../../hooks/affine/use-share-url';
 import { createKeyboardToolbarConfig } from './widgets/keyboard-toolbar';
 
@@ -624,12 +622,7 @@ export function patchForAttachmentEmbedViews(
           });
         },
         template: (model, _blobUrl) =>
-          reactToLit(
+          reactToLit(<AttachmentEmbedPreview model={model} />, false),
-            <AttachmentPreviewErrorBoundary key={model.id}>
-              <PDFViewerEmbedded {...buildAttachmentProps(model)} />
-            </AttachmentPreviewErrorBoundary>,
-            false
-          ),
       }));
     },
   };