refactor(core): add CustomEditorWrapper

packages/frontend/core/package.json

@@ -34,6 +34,7 @@
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-popover": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-toolbar": "^1.1.1",
     "@sentry/react": "^8.44.0",
     "@toeverything/pdf-viewer": "^0.1.1",

packages/frontend/core/src/components/affine/page-history-modal/history-modal.tsx

@@ -33,7 +33,10 @@ import {
 import { encodeStateAsUpdate } from 'yjs';
 
 import { pageHistoryModalAtom } from '../../atoms/page-history';
-import { BlockSuiteEditor } from '../../blocksuite/block-suite-editor';
+import {
+  BlockSuiteEditor,
+  CustomEditorWrapper,
+} from '../../blocksuite/block-suite-editor';
 import { PureEditorModeSwitch } from '../../blocksuite/block-suite-mode-switch';
 import { AffineErrorBoundary } from '../affine-error-boundary';
 import {
@@ -131,11 +134,13 @@ const HistoryEditorPreview = ({
           <AffineErrorBoundary>
             <Scrollable.Root>
               <Scrollable.Viewport className="affine-page-viewport">
-                <BlockSuiteEditor
+                <CustomEditorWrapper>
-                  className={styles.editor}
+                  <BlockSuiteEditor
-                  mode={mode}
+                    className={styles.editor}
-                  page={snapshotPage}
+                    mode={mode}
-                />
+                    page={snapshotPage}
+                  />
+                </CustomEditorWrapper>
               </Scrollable.Viewport>
               <Scrollable.Scrollbar />
             </Scrollable.Root>

packages/frontend/core/src/components/blocksuite/block-suite-editor/custom-editor-wrapper.tsx

@@ -0,0 +1,43 @@
+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>
+  );
+};

packages/frontend/core/src/components/blocksuite/block-suite-editor/index.ts

@@ -10,3 +10,4 @@ edgelessEffects();
 registerBlocksuitePresetsCustomComponents();
 
 export * from './blocksuite-editor';
+export * from './custom-editor-wrapper';

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -2,18 +2,15 @@ import './page-detail-editor.css';
 
 import type { AffineEditorContainer } from '@blocksuite/affine/presets';
 import { useLiveData, useService } from '@toeverything/infra';
-import { cssVar } from '@toeverything/theme';
 import clsx from 'clsx';
-import type { CSSProperties } from 'react';
-import { useMemo } from 'react';
 
 import { DocService } from '../modules/doc';
 import { EditorService } from '../modules/editor';
+import { EditorSettingService } from '../modules/editor-setting';
 import {
-  EditorSettingService,
+  BlockSuiteEditor as Editor,
-  fontStyleOptions,
+  CustomEditorWrapper,
-} from '../modules/editor-setting';
+} from './blocksuite/block-suite-editor';
-import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
 import * as styles from './page-detail-editor.css';
 
 declare global {
@@ -50,36 +47,19 @@ export const PageDetailEditor = ({ onLoad }: PageDetailEditorProps) => {
     ? pageWidth === 'fullWidth'
     : settings.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 (
-    <Editor
+    <CustomEditorWrapper>
-      className={clsx(styles.editor, {
+      <Editor
-        'full-screen': !isSharedMode && fullWidthLayout,
+        className={clsx(styles.editor, {
-        'is-public': isSharedMode,
+          'full-screen': !isSharedMode && fullWidthLayout,
-      })}
+          'is-public': isSharedMode,
-      style={
+        })}
-        {
+        mode={mode}
-          '--affine-font-family': value,
+        defaultOpenProperty={defaultOpenProperty}
-        } as CSSProperties
+        page={editor.doc.blockSuiteDoc}
-      }
+        shared={isSharedMode}
-      mode={mode}
+        onEditorReady={onLoad}
-      defaultOpenProperty={defaultOpenProperty}
+      />
-      page={editor.doc.blockSuiteDoc}
+    </CustomEditorWrapper>
-      shared={isSharedMode}
-      onEditorReady={onLoad}
-    />
   );
 };

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

@@ -2,14 +2,13 @@ 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 } from '@affine/core/components/blocksuite/block-suite-editor';
+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';
-import {
-  EditorSettingService,
-  fontStyleOptions,
-} from '@affine/core/modules/editor-setting';
 import { DebugLogger } from '@affine/debug';
 import {
   type EdgelessRootService,
@@ -23,9 +22,8 @@ import {
   useService,
   useServices,
 } from '@toeverything/infra';
-import { cssVar } from '@toeverything/theme';
 import clsx from 'clsx';
-import { type CSSProperties, useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { WorkbenchService } from '../../../workbench';
 import type { DocReferenceInfo } from '../../entities/peek-view';
@@ -90,14 +88,6 @@ function DocPeekPreviewEditor({
   const workbench = useService(WorkbenchService).workbench;
   const peekView = useService(PeekViewService).peekView;
   const editorElement = useLiveData(editor.editorContainer$);
-  const editorSetting = useService(EditorSettingService).editorSetting;
-  const settings = useLiveData(
-    editorSetting.settings$.selector(s => ({
-      fontFamily: s.fontFamily,
-      customFontFamily: s.customFontFamily,
-      fullWidthLayout: s.fullWidthLayout,
-    }))
-  );
 
   const handleOnEditorReady = useCallback(
     (editorContainer: AffineEditorContainer) => {
@@ -156,38 +146,21 @@ function DocPeekPreviewEditor({
     peekView.close();
   }, [doc, peekView, workbench]);
 
-  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 (
     <AffineErrorBoundary>
       <Scrollable.Root>
         <Scrollable.Viewport
           className={clsx('affine-page-viewport', styles.affineDocViewport)}
         >
-          <BlockSuiteEditor
+          <CustomEditorWrapper>
-            className={styles.editor}
+            <BlockSuiteEditor
-            mode={mode}
+              className={styles.editor}
-            page={doc.blockSuiteDoc}
+              mode={mode}
-            onEditorReady={handleOnEditorReady}
+              page={doc.blockSuiteDoc}
-            defaultOpenProperty={defaultOpenProperty}
+              onEditorReady={handleOnEditorReady}
-            style={
+              defaultOpenProperty={defaultOpenProperty}
-              {
+            />
-                '--affine-font-family': value,
+          </CustomEditorWrapper>
-              } as CSSProperties
-            }
-          />
         </Scrollable.Viewport>
         <Scrollable.Scrollbar />
       </Scrollable.Root>

yarn.lock

@@ -370,6 +370,7 @@ __metadata:
     "@radix-ui/react-dialog": "npm:^1.1.3"
     "@radix-ui/react-popover": "npm:^1.1.3"
     "@radix-ui/react-scroll-area": "npm:^1.2.2"
+    "@radix-ui/react-slot": "npm:^1.1.1"
     "@radix-ui/react-toolbar": "npm:^1.1.1"
     "@sentry/react": "npm:^8.44.0"
     "@swc/core": "npm:^1.10.1"