fix(core): center peek doc view circular deps (#10253)

2026-02-25 18:26:05 +08:00 · 2025-02-19 02:23:53 +00:00
parent 5a7ab880c1
commit 29f8a627b6
8 changed files with 75 additions and 87 deletions
--- a/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
+++ b/packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx
@@ -33,10 +33,7 @@ import {
 import { encodeStateAsUpdate } from 'yjs';

 import { pageHistoryModalAtom } from '../../atoms/page-history';
-import {
-  BlockSuiteEditor,
-  CustomEditorWrapper,
-} from '../../blocksuite/block-suite-editor';
+import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
 import { PureEditorModeSwitch } from '../../blocksuite/block-suite-mode-switch';
 import { AffineErrorBoundary } from '../affine-error-boundary';
 import {
@@ -134,14 +131,12 @@ const HistoryEditorPreview = ({
          <AffineErrorBoundary>
            <Scrollable.Root>
              <Scrollable.Viewport className="affine-page-viewport">
-                <CustomEditorWrapper>
-                  <BlockSuiteEditor
-                    className={styles.editor}
-                    mode={mode}
-                    page={snapshotPage}
-                    readonly={true}
-                  />
-                </CustomEditorWrapper>
+                <BlockSuiteEditor
+                  className={styles.editor}
+                  mode={mode}
+                  page={snapshotPage}
+                  readonly={true}
+                />
              </Scrollable.Viewport>
              <Scrollable.Scrollbar />
            </Scrollable.Root>
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/blocksuite-editor.tsx
@@ -1,6 +1,10 @@
 import { useRefEffect } from '@affine/component';
 import { EditorLoading } from '@affine/component/page-detail-skeleton';
 import { ServerService } from '@affine/core/modules/cloud';
+import {
+  EditorSettingService,
+  fontStyleOptions,
+} from '@affine/core/modules/editor-setting';
 import {
  customImageProxyMiddleware,
  type DocMode,
@@ -10,9 +14,11 @@ import {
 import { DisposableGroup } from '@blocksuite/affine/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/affine/presets';
 import type { Store } from '@blocksuite/affine/store';
-import { useService } from '@toeverything/infra';
+import { Slot } from '@radix-ui/react-slot';
+import { useLiveData, useService } from '@toeverything/infra';
+import { cssVar } from '@toeverything/theme';
 import type { CSSProperties } from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';

 import type { DefaultOpenProperty } from '../../doc-properties';
 import { BlocksuiteEditorContainer } from './blocksuite-editor-container';
@@ -126,6 +132,28 @@ export const BlockSuiteEditor = (props: EditorProps) => {
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

+  const editorSetting = useService(EditorSettingService).editorSetting;
+  const settings = useLiveData(
+    editorSetting.settings$.selector(s => ({
+      fontFamily: s.fontFamily,
+      customFontFamily: s.customFontFamily,
+      fullWidthLayout: s.fullWidthLayout,
+    }))
+  );
+  const fontFamily = useMemo(() => {
+    const fontStyle = fontStyleOptions.find(
+      option => option.key === settings.fontFamily
+    );
+    if (!fontStyle) {
+      return cssVar('fontSansFamily');
+    }
+    const customFontFamily = settings.customFontFamily;
+
+    return customFontFamily && fontStyle.key === 'Custom'
+      ? `${customFontFamily}, ${fontStyle.value}`
+      : fontStyle.value;
+  }, [settings.customFontFamily, settings.fontFamily]);
+
  useEffect(() => {
    if (props.page.root) {
      setIsLoading(false);
@@ -149,9 +177,13 @@ export const BlockSuiteEditor = (props: EditorProps) => {
    throw error;
  }

-  return isLoading ? (
-    <EditorLoading />
-  ) : (
-    <BlockSuiteEditorImpl key={props.page.id} {...props} />
+  return (
+    <Slot style={{ '--affine-font-family': fontFamily } as CSSProperties}>
+      {isLoading ? (
+        <EditorLoading />
+      ) : (
+        <BlockSuiteEditorImpl key={props.page.id} {...props} />
+      )}
+    </Slot>
  );
 };
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/custom-editor-wrapper.tsx
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/custom-editor-wrapper.tsx
@@ -1,43 +0,0 @@
-import {
-  EditorSettingService,
-  fontStyleOptions,
-} from '@affine/core/modules/editor-setting';
-import { Slot } from '@radix-ui/react-slot';
-import { useLiveData, useService } from '@toeverything/infra';
-import { cssVar } from '@toeverything/theme';
-import { type CSSProperties, type ReactNode, useMemo } from 'react';
-export const CustomEditorWrapper = ({ children }: { children: ReactNode }) => {
-  const editorSetting = useService(EditorSettingService).editorSetting;
-  const settings = useLiveData(
-    editorSetting.settings$.selector(s => ({
-      fontFamily: s.fontFamily,
-      customFontFamily: s.customFontFamily,
-      fullWidthLayout: s.fullWidthLayout,
-    }))
-  );
-  const value = useMemo(() => {
-    const fontStyle = fontStyleOptions.find(
-      option => option.key === settings.fontFamily
-    );
-    if (!fontStyle) {
-      return cssVar('fontSansFamily');
-    }
-    const customFontFamily = settings.customFontFamily;
-
-    return customFontFamily && fontStyle.key === 'Custom'
-      ? `${customFontFamily}, ${fontStyle.value}`
-      : fontStyle.value;
-  }, [settings.customFontFamily, settings.fontFamily]);
-
-  return (
-    <Slot
-      style={
-        {
-          '--affine-font-family': value,
-        } as CSSProperties
-      }
-    >
-      {children}
-    </Slot>
-  );
-};
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts
+++ b/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts
@@ -10,4 +10,3 @@ edgelessEffects();
 registerBlocksuitePresetsCustomComponents();

 export * from './blocksuite-editor';
-export * from './custom-editor-wrapper';
--- a/packages/frontend/core/src/components/page-detail-editor.tsx
+++ b/packages/frontend/core/src/components/page-detail-editor.tsx
@@ -8,10 +8,7 @@ import { useEffect } from 'react';
 import { DocService } from '../modules/doc';
 import { EditorService } from '../modules/editor';
 import { EditorSettingService } from '../modules/editor-setting';
-import {
-  BlockSuiteEditor as Editor,
-  CustomEditorWrapper,
-} from './blocksuite/block-suite-editor';
+import { BlockSuiteEditor } from './blocksuite/block-suite-editor';
 import * as styles from './page-detail-editor.css';

 declare global {
@@ -57,19 +54,17 @@ export const PageDetailEditor = ({
  }, [editor, readonly]);

  return (
-    <CustomEditorWrapper>
-      <Editor
-        className={clsx(styles.editor, {
-          'full-screen': !isSharedMode && fullWidthLayout,
-          'is-public': isSharedMode,
-        })}
-        mode={mode}
-        defaultOpenProperty={defaultOpenProperty}
-        page={editor.doc.blockSuiteDoc}
-        shared={isSharedMode}
-        readonly={readonly}
-        onEditorReady={onLoad}
-      />
-    </CustomEditorWrapper>
+    <BlockSuiteEditor
+      className={clsx(styles.editor, {
+        'full-screen': !isSharedMode && fullWidthLayout,
+        'is-public': isSharedMode,
+      })}
+      mode={mode}
+      defaultOpenProperty={defaultOpenProperty}
+      page={editor.doc.blockSuiteDoc}
+      shared={isSharedMode}
+      readonly={readonly}
+      onEditorReady={onLoad}
+    />
  );
 };
--- a/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/doc-preview/doc-peek-view.tsx
@@ -2,10 +2,6 @@ import { Scrollable } from '@affine/component';
 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,
-  CustomEditorWrapper,
-} from '@affine/core/components/blocksuite/block-suite-editor';
 import { EditorOutlineViewer } from '@affine/core/components/blocksuite/outline-viewer';
 import { PageNotFound } from '@affine/core/desktop/pages/404';
 import { EditorService } from '@affine/core/modules/editor';
@@ -26,7 +22,7 @@ import {
  useServices,
 } from '@toeverything/infra';
 import clsx from 'clsx';
-import { useCallback, useEffect } from 'react';
+import { lazy, Suspense, useCallback, useEffect } from 'react';

 import { WorkbenchService } from '../../../workbench';
 import type { DocReferenceInfo } from '../../entities/peek-view';
@@ -36,6 +32,15 @@ import * as styles from './doc-peek-view.css';

 const logger = new DebugLogger('doc-peek-view');

+// Lazy load BlockSuiteEditor to break circular dependency
+const BlockSuiteEditor = lazy(() =>
+  import('@affine/core/components/blocksuite/block-suite-editor').then(
+    module => ({
+      default: module.BlockSuiteEditor,
+    })
+  )
+);
+
 function fitViewport(
  editor: AffineEditorContainer,
  xywh?: `[${number},${number},${number},${number}]`
@@ -159,7 +164,7 @@ function DocPeekPreviewEditor({
        <Scrollable.Viewport
          className={clsx('affine-page-viewport', styles.affineDocViewport)}
        >
-          <CustomEditorWrapper>
+          <Suspense fallback={<PageDetailSkeleton />}>
            <BlockSuiteEditor
              className={styles.editor}
              mode={mode}
@@ -168,7 +173,7 @@ function DocPeekPreviewEditor({
              onEditorReady={handleOnEditorReady}
              defaultOpenProperty={defaultOpenProperty}
            />
-          </CustomEditorWrapper>
+          </Suspense>
        </Scrollable.Viewport>
        <Scrollable.Scrollbar />
      </Scrollable.Root>
--- a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
+++ b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
@@ -407,6 +407,8 @@ export const PeekViewModalContainer = forwardRef<
              <div className={styles.modalContentClip}>
                <Dialog.Content
                  {...contentOptions}
+                  // mute the radix-ui warning
+                  aria-describedby={undefined}
                  className={clsx({
                    [styles.modalContent]: true,
                    [styles.dialog]: dialogFrame,
--- a/packages/frontend/core/src/utils/first-app-data.ts
+++ b/packages/frontend/core/src/utils/first-app-data.ts
@@ -1,3 +1,6 @@
+// the following import is used to ensure the block suite editor effects are run
+import '../components/blocksuite/block-suite-editor';
+
 import { DebugLogger } from '@affine/debug';
 import { DEFAULT_WORKSPACE_NAME } from '@affine/env/constant';
 import onboardingUrl from '@affine/templates/onboarding.zip';