feat(core): add custom font family setting (#7924)

close AF-1255

https://github.com/user-attachments/assets/d44359b6-b75c-4883-a57b-1f226586feec

packages/frontend/core/src/modules/index.ts

@@ -16,6 +16,7 @@ import { configurePermissionsModule } from './permissions';
 import { configureWorkspacePropertiesModule } from './properties';
 import { configureQuickSearchModule } from './quicksearch';
 import { configureShareDocsModule } from './share-doc';
+import { configureSystemFontFamilyModule } from './system-font-family';
 import { configureTagModule } from './tag';
 import { configureTelemetryModule } from './telemetry';
 import { configureThemeEditorModule } from './theme-editor';
@@ -41,4 +42,5 @@ export function configureCommonModules(framework: Framework) {
   configureExplorerModule(framework);
   configureThemeEditorModule(framework);
   configureEditorModule(framework);
+  configureSystemFontFamilyModule(framework);
 }

packages/frontend/core/src/modules/system-font-family/entities/system-font-family.ts

@@ -0,0 +1,69 @@
+import {
+  effect,
+  Entity,
+  fromPromise,
+  LiveData,
+  mapInto,
+  onComplete,
+  onStart,
+} from '@toeverything/infra';
+import { exhaustMap } from 'rxjs';
+
+export type FontData = {
+  family: string;
+  fullName: string;
+  postscriptName: string;
+  style: string;
+};
+
+export class SystemFontFamily extends Entity {
+  constructor() {
+    super();
+  }
+
+  readonly searchText$ = new LiveData<string | null>(null);
+  readonly isLoading$ = new LiveData<boolean>(false);
+  readonly fontList$ = new LiveData<FontData[]>([]);
+  readonly result$ = LiveData.computed(get => {
+    const fontList = get(this.fontList$);
+    const searchText = get(this.searchText$);
+    if (!searchText) {
+      return fontList;
+    }
+
+    const filteredFonts = fontList.filter(font =>
+      font.fullName.toLowerCase().includes(searchText.toLowerCase())
+    );
+    return filteredFonts;
+  }).throttleTime(500);
+
+  loadFontList = effect(
+    exhaustMap(() => {
+      return fromPromise(async () => {
+        if (!(window as any).queryLocalFonts) {
+          return [];
+        }
+        const fonts = await (window as any).queryLocalFonts();
+
+        return fonts;
+      }).pipe(
+        mapInto(this.fontList$),
+        // TODO: catchErrorInto(this.error$),
+        onStart(() => {
+          this.isLoading$.next(true);
+        }),
+        onComplete(() => {
+          this.isLoading$.next(false);
+        })
+      );
+    })
+  );
+
+  search(searchText: string) {
+    this.searchText$.next(searchText);
+  }
+
+  clearSearch() {
+    this.searchText$.next(null);
+  }
+}

packages/frontend/core/src/modules/system-font-family/index.ts

@@ -0,0 +1,11 @@
+import type { Framework } from '@toeverything/infra';
+
+import { SystemFontFamily } from './entities/system-font-family';
+import { SystemFontFamilyService } from './services/system-font-family';
+
+export type { FontData } from './entities/system-font-family';
+export { SystemFontFamilyService } from './services/system-font-family';
+
+export function configureSystemFontFamilyModule(framework: Framework) {
+  framework.service(SystemFontFamilyService).entity(SystemFontFamily);
+}

packages/frontend/core/src/modules/system-font-family/services/system-font-family.ts

@@ -0,0 +1,8 @@
+import { Service } from '@toeverything/infra';
+
+import { SystemFontFamily } from '../entities/system-font-family';
+
+export class SystemFontFamilyService extends Service {
+  public readonly systemFontFamily =
+    this.framework.createEntity(SystemFontFamily);
+}