fix: missing font in text preview of editor settings (#8213)

Close issue [BS-1394](https://linear.app/affine-design/issue/BS-1394).

Add `FontConfigExtension` to `edgeless:preview` spec.

Author: akumatus

packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx

@@ -1,4 +1,5 @@
 import { Skeleton } from '@affine/component';
+import { getFontConfigExtension } from '@affine/core/components/blocksuite/block-suite-editor';
 import type { EditorSettingSchema } from '@affine/core/modules/editor-settting';
 import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import type { EditorHost } from '@blocksuite/block-std';
@@ -71,7 +72,10 @@ export const EdgelessSnapshot = (props: Props) => {
 
     const editorHost = new BlockStdScope({
       doc,
-      extensions: SpecProvider.getInstance().getSpec('edgeless:preview').value,
+      extensions: [
+        ...SpecProvider.getInstance().getSpec('edgeless:preview').value,
+        getFontConfigExtension(),
+      ],
     }).render();
     docRef.current = doc;
     editorHostRef.current = editorHost;

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

@@ -1,4 +1,5 @@
 export * from './blocksuite-editor';
+export { getFontConfigExtension } from './specs/font-extension';
 
 import './ai/setup-provider';
 import './specs/preview';

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts

@@ -6,35 +6,19 @@ import { mixpanel } from '@affine/core/mixpanel';
 import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { ConfigExtension, type ExtensionType } from '@blocksuite/block-std';
 import {
-  AffineCanvasTextFonts,
   EdgelessRootBlockSpec,
   EditorSettingExtension,
   FontLoaderService,
   PageRootBlockSpec,
 } from '@blocksuite/blocks';
-import {
-  FontConfigExtension,
-  type TelemetryEventMap,
-  TelemetryProvider,
-} from '@blocksuite/blocks';
+import { type TelemetryEventMap, TelemetryProvider } from '@blocksuite/blocks';
 import { type FrameworkProvider } from '@toeverything/infra';
 
+import { getFontConfigExtension } from '../font-extension';
 import { createDatabaseOptionsConfig } from './database-block';
 import { createLinkedWidgetConfig } from './widgets/linked';
 import { createToolbarMoreMenuConfig } from './widgets/toolbar';
 
-function getFontConfigExtension() {
-  return FontConfigExtension(
-    runtimeConfig.isSelfHosted
-      ? AffineCanvasTextFonts.map(font => ({
-          ...font,
-          // self-hosted fonts are served from /assets
-          url: '/assets/' + new URL(font.url).pathname.split('/').pop(),
-        }))
-      : AffineCanvasTextFonts
-  );
-}
-
 function getTelemetryExtension(): ExtensionType {
   return {
     setup: di => {

packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/font-extension.ts

@@ -0,0 +1,13 @@
+import { AffineCanvasTextFonts, FontConfigExtension } from '@blocksuite/blocks';
+
+export function getFontConfigExtension() {
+  return FontConfigExtension(
+    runtimeConfig.isSelfHosted
+      ? AffineCanvasTextFonts.map(font => ({
+          ...font,
+          // self-hosted fonts are served from /assets
+          url: '/assets/' + new URL(font.url).pathname.split('/').pop(),
+        }))
+      : AffineCanvasTextFonts
+  );
+}