From 456aa047cb8f3971397d0d042a8fadb3375b73b1 Mon Sep 17 00:00:00 2001
From: akumatus <akumatus@gmail.com>
Date: Thu, 12 Sep 2024 04:40:17 +0000
Subject: [PATCH] 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.
---
 .../editor/edgeless/snapshot.tsx              |  6 +++++-
 .../blocksuite/block-suite-editor/index.tsx   |  1 +
 .../specs/custom/root-block.ts                | 20 ++-----------------
 .../specs/font-extension.ts                   | 13 ++++++++++++
 4 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/font-extension.ts

diff --git a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx b/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx
index 96380a9f93..23e89d4e17 100644
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/edgeless/snapshot.tsx
+++ b/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;
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.tsx
index a8d4c188c8..b69c729cff 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/index.tsx
+++ b/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';
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts
index d149579281..af4567c2ea 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/custom/root-block.ts
+++ b/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 => {
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/font-extension.ts b/packages/frontend/core/src/components/blocksuite/block-suite-editor/specs/font-extension.ts
new file mode 100644
index 0000000000..65ebbbb568
--- /dev/null
+++ b/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
+  );
+}