fix(core): center peek and history dialog does not display custom fonts (#9274)

close AF-1806

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';