From c46bd77b0ae6381297f01bb1cb6b3f18cabd1e32 Mon Sep 17 00:00:00 2001
From: Jimmfly <yangjinfei001@gmail.com>
Date: Tue, 24 Dec 2024 11:23:52 +0800
Subject: [PATCH] fix(core): center peek does not display custom fonts

---
 .../view/doc-preview/doc-peek-view.tsx        | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

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 6cba72caee78f..3b10c4a1d8ff1 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
@@ -6,6 +6,10 @@ import { BlockSuiteEditor } from '@affine/core/components/blocksuite/block-suite
 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,
@@ -19,8 +23,9 @@ import {
   useService,
   useServices,
 } from '@toeverything/infra';
+import { cssVar } from '@toeverything/theme';
 import clsx from 'clsx';
-import { useCallback, useEffect } from 'react';
+import { type CSSProperties, useCallback, useEffect, useMemo } from 'react';
 
 import { WorkbenchService } from '../../../workbench';
 import type { DocReferenceInfo } from '../../entities/peek-view';
@@ -85,6 +90,14 @@ 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) => {
@@ -143,6 +156,20 @@ 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>
@@ -155,6 +182,11 @@ function DocPeekPreviewEditor({
             page={doc.blockSuiteDoc}
             onEditorReady={handleOnEditorReady}
             defaultOpenProperty={defaultOpenProperty}
+            style={
+              {
+                '--affine-font-family': value,
+              } as CSSProperties
+            }
           />
         </Scrollable.Viewport>
         <Scrollable.Scrollbar />