refactor(core): move fontFamily and fullWidthLayout to editor settings (#7988)

packages/frontend/core/src/modules/editor-settting/index.ts

@@ -4,6 +4,9 @@ import { EditorSetting } from './entities/editor-setting';
 import { GlobalStateEditorSettingProvider } from './impls/global-state';
 import { EditorSettingProvider } from './provider/editor-setting-provider';
 import { EditorSettingService } from './services/editor-setting';
+export type { FontFamily } from './schema';
+export { EditorSettingSchema, fontStyleOptions } from './schema';
+export { EditorSettingService } from './services/editor-setting';
 
 export function configureEditorSettingModule(framework: Framework) {
   framework

packages/frontend/core/src/modules/editor-settting/schema.ts

@@ -1,5 +1,17 @@
 import { z } from 'zod';
 
+export type FontFamily = 'Sans' | 'Serif' | 'Mono' | 'Custom';
+
+export const fontStyleOptions = [
+  { key: 'Sans', value: 'var(--affine-font-sans-family)' },
+  { key: 'Serif', value: 'var(--affine-font-serif-family)' },
+  { key: 'Mono', value: 'var(--affine-font-mono-family)' },
+  { key: 'Custom', value: 'var(--affine-font-sans-family)' },
+] satisfies {
+  key: FontFamily;
+  value: string;
+}[];
+
 const BSEditorSettingSchema = z.object({
   // TODO: import from bs
   connector: z.object({
@@ -14,9 +26,14 @@ const BSEditorSettingSchema = z.object({
       .default('#000000'),
   }),
 });
-
 const AffineEditorSettingSchema = z.object({
   fontFamily: z.enum(['Sans', 'Serif', 'Mono', 'Custom']).default('Sans'),
+  customFontFamily: z.string().default(''),
+  newDocDefaultMode: z.enum(['edgeless', 'page']).default('page'),
+  spellCheck: z.boolean().default(false),
+  fullWidthLayout: z.boolean().default(false),
+  displayDocInfo: z.boolean().default(true),
+  displayBiDirectionalLink: z.boolean().default(true),
 });
 
 type UnionToIntersection<U> = (U extends any ? (x: U) => void : never) extends (

packages/frontend/core/src/modules/peek-view/view/modal-container.tsx

@@ -1,5 +1,5 @@
-import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
 import * as Dialog from '@radix-ui/react-dialog';
+import { useLiveData, useService } from '@toeverything/infra';
 import anime, { type AnimeInstance, type AnimeParams } from 'animejs';
 import clsx from 'clsx';
 import {
@@ -13,6 +13,7 @@ import {
   useState,
 } from 'react';
 
+import { EditorSettingService } from '../../editor-settting';
 import type { PeekViewAnimation } from '../entities/peek-view';
 import * as styles from './modal-container.css';
 
@@ -90,7 +91,8 @@ export const PeekViewModalContainer = forwardRef<
   const overlayRef = useRef<HTMLDivElement>(null);
   const controlsRef = useRef<HTMLDivElement>(null);
   const prevAnimeMap = useRef<Record<string, AnimeInstance | undefined>>({});
-  const { appSettings } = useAppSettingHelper();
+  const editorSettings = useService(EditorSettingService).editorSetting;
+  const settings = useLiveData(editorSettings.settings$);
 
   const animateControls = useCallback((animateIn = false) => {
     const controls = controlsRef.current;
@@ -320,7 +322,7 @@ export const PeekViewModalContainer = forwardRef<
           >
             <div
               data-anime-state={animeState}
-              data-full-width-layout={appSettings.fullWidthLayout}
+              data-full-width-layout={settings.fullWidthLayout}
               ref={contentClipRef}
               className={styles.modalContentContainer}
             >