From 29f8a627b66c47696d15c4b7c5f85251c8989b50 Mon Sep 17 00:00:00 2001 From: pengx17 Date: Wed, 19 Feb 2025 02:23:53 +0000 Subject: [PATCH] fix(core): center peek doc view circular deps (#10253) --- .../page-history-modal/history-modal.tsx | 19 +++----- .../block-suite-editor/blocksuite-editor.tsx | 44 ++++++++++++++++--- .../custom-editor-wrapper.tsx | 43 ------------------ .../blocksuite/block-suite-editor/index.ts | 1 - .../src/components/page-detail-editor.tsx | 31 ++++++------- .../view/doc-preview/doc-peek-view.tsx | 19 +++++--- .../peek-view/view/modal-container.tsx | 2 + .../frontend/core/src/utils/first-app-data.ts | 3 ++ 8 files changed, 75 insertions(+), 87 deletions(-) delete mode 100644 packages/frontend/core/src/components/blocksuite/block-suite-editor/custom-editor-wrapper.tsx diff --git 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 index daf2ba24c8..945603672a 100644 --- 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 = ({ - - - + diff --git 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 index ca6b6592e3..7bd7917538 100644 --- 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(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 ? ( - - ) : ( - + return ( + + {isLoading ? ( + + ) : ( + + )} + ); }; diff --git 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 deleted file mode 100644 index edc617ad91..0000000000 --- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/custom-editor-wrapper.tsx +++ /dev/null @@ -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 ( - - {children} - - ); -}; diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts index fe3efebcea..c5b3d3f00c 100644 --- 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'; diff --git a/packages/frontend/core/src/components/page-detail-editor.tsx b/packages/frontend/core/src/components/page-detail-editor.tsx index 44bd185867..7936db52f1 100644 --- 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 ( - - - + ); }; diff --git 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 index e5b4e92da5..73ab851391 100644 --- 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({ - + }> - + diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx index 28a7bf3e0f..9128fdc235 100644 --- 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<