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

packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -97,17 +97,6 @@ export const AppearanceSettings = () => {
             />
           </SettingRow>
         ) : null}
-
-        <SettingRow
-          name={t['com.affine.appearanceSettings.fullWidth.title']()}
-          desc={t['com.affine.appearanceSettings.fullWidth.description']()}
-        >
-          <Switch
-            data-testid="full-width-layout-trigger"
-            checked={appSettings.fullWidthLayout}
-            onChange={checked => updateSettings('fullWidthLayout', checked)}
-          />
-        </SettingRow>
         {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
           <SettingRow
             name={t['com.affine.appearanceSettings.windowFrame.title']()}

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

@@ -13,19 +13,21 @@ import {
   SettingRow,
   SettingWrapper,
 } from '@affine/component/setting-components';
-import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
+import {
+  EditorSettingService,
+  type FontFamily,
+  fontStyleOptions,
+} from '@affine/core/modules/editor-settting';
 import {
   type FontData,
   SystemFontFamilyService,
 } from '@affine/core/modules/system-font-family';
 import { useI18n } from '@affine/i18n';
 import {
-  type AppSetting,
   type DocMode,
-  type FontFamily,
-  fontStyleOptions,
   useLiveData,
   useService,
+  useServices,
 } from '@toeverything/infra';
 import {
   type ChangeEvent,
@@ -43,7 +45,9 @@ import { menu, menuTrigger, searchInput, settingWrapper } from './style.css';
 
 const FontFamilySettings = () => {
   const t = useI18n();
-  const { appSettings, updateSettings } = useAppSettingHelper();
+  const { editorSettingService } = useServices({ EditorSettingService });
+  const settings = useLiveData(editorSettingService.editorSetting.settings$);
+
   const getLabel = useCallback(
     (fontKey: FontFamily) => {
       switch (fontKey) {
@@ -70,8 +74,8 @@ const FontFamilySettings = () => {
         }
         const label = getLabel(key);
         let fontFamily = value;
-        if (key === 'Custom' && appSettings.customFontFamily) {
-          fontFamily = `${appSettings.customFontFamily}, ${value}`;
+        if (key === 'Custom' && settings.customFontFamily) {
+          fontFamily = `${settings.customFontFamily}, ${value}`;
         }
         return {
           value: key,
@@ -83,20 +87,22 @@ const FontFamilySettings = () => {
         } satisfies RadioItem;
       })
       .filter(item => item !== null);
-  }, [appSettings.customFontFamily, getLabel]);
+  }, [getLabel, settings.customFontFamily]);
+
+  const handleFontFamilyChange = useCallback(
+    (value: FontFamily) => {
+      editorSettingService.editorSetting.set('fontFamily', value);
+    },
+    [editorSettingService.editorSetting]
+  );
 
   return (
     <RadioGroup
       items={radioItems}
-      value={appSettings.fontStyle}
+      value={settings.fontFamily}
       width={250}
       className={settingWrapper}
-      onChange={useCallback(
-        (value: AppSetting['fontStyle']) => {
-          updateSettings('fontStyle', value);
-        },
-        [updateSettings]
-      )}
+      onChange={handleFontFamilyChange}
     />
   );
 };
@@ -211,15 +217,17 @@ const FontMenuItem = ({
 
 const CustomFontFamilySettings = () => {
   const t = useI18n();
-  const { appSettings, updateSettings } = useAppSettingHelper();
-  const fontFamily = getFontFamily(appSettings.customFontFamily);
+  const { editorSettingService } = useServices({ EditorSettingService });
+  const settings = useLiveData(editorSettingService.editorSetting.settings$);
+
+  const fontFamily = getFontFamily(settings.customFontFamily);
   const onCustomFontFamilyChange = useCallback(
     (fontFamily: string) => {
-      updateSettings('customFontFamily', fontFamily);
+      editorSettingService.editorSetting.set('customFontFamily', fontFamily);
     },
-    [updateSettings]
+    [editorSettingService.editorSetting]
   );
-  if (appSettings.fontStyle !== 'Custom' || !environment.isDesktop) {
+  if (settings.fontFamily !== 'Custom' || !environment.isDesktop) {
     return null;
   }
   return (
@@ -239,7 +247,7 @@ const CustomFontFamilySettings = () => {
         }}
       >
         <MenuTrigger className={menuTrigger} style={{ fontFamily }}>
-          {appSettings.customFontFamily || 'Select a font'}
+          {settings.customFontFamily || 'Select a font'}
         </MenuTrigger>
       </Menu>
     </SettingRow>
@@ -291,37 +299,6 @@ export const General = () => {
         <FontFamilySettings />
       </SettingRow>
       <CustomFontFamilySettings />
-      <SettingRow
-        name={t[
-          'com.affine.settings.editorSettings.general.font-family.title'
-        ]()}
-        desc={t[
-          'com.affine.settings.editorSettings.general.font-family.description'
-        ]()}
-      >
-        <Menu items={<MenuItem>inter</MenuItem>}>
-          <MenuTrigger className={menuTrigger} disabled>
-            inter
-          </MenuTrigger>
-        </Menu>
-      </SettingRow>
-      <SettingRow
-        name={t['com.affine.settings.editorSettings.general.font-size.title']()}
-        desc={t[
-          'com.affine.settings.editorSettings.general.font-size.description'
-        ]()}
-      >
-        <Menu
-          contentOptions={{
-            className: menu,
-          }}
-          items={<MenuItem>15</MenuItem>}
-        >
-          <MenuTrigger className={menuTrigger} disabled>
-            15
-          </MenuTrigger>
-        </Menu>
-      </SettingRow>
       <SettingRow
         name={t[
           'com.affine.settings.editorSettings.general.default-new-doc.title'

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

@@ -3,12 +3,35 @@ import {
   SettingRow,
   SettingWrapper,
 } from '@affine/component/setting-components';
-import { useAppSettingHelper } from '@affine/core/hooks/affine/use-app-setting-helper';
+import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { useI18n } from '@affine/i18n';
+import { useLiveData, useService } from '@toeverything/infra';
+import { useCallback } from 'react';
 
 export const Page = () => {
   const t = useI18n();
-  const { appSettings, updateSettings } = useAppSettingHelper();
+  const editorSetting = useService(EditorSettingService).editorSetting;
+  const settings = useLiveData(editorSetting.settings$);
+
+  const handleFullWidthLayoutChange = useCallback(
+    (checked: boolean) => {
+      editorSetting.set('fullWidthLayout', checked);
+    },
+    [editorSetting]
+  );
+  const handleDisplayDocInfoChange = useCallback(
+    (checked: boolean) => {
+      editorSetting.set('displayDocInfo', checked);
+    },
+    [editorSetting]
+  );
+  const handleDisplayBiDirectionalLinkChange = useCallback(
+    (checked: boolean) => {
+      editorSetting.set('displayBiDirectionalLink', checked);
+    },
+    [editorSetting]
+  );
+
   return (
     <SettingWrapper title={t['com.affine.settings.editorSettings.page']()}>
       <SettingRow
@@ -19,8 +42,8 @@ export const Page = () => {
       >
         <Switch
           data-testid="full-width-layout-trigger"
-          checked={appSettings.fullWidthLayout}
-          onChange={checked => updateSettings('fullWidthLayout', checked)}
+          checked={settings.fullWidthLayout}
+          onChange={handleFullWidthLayoutChange}
         />
       </SettingRow>
       <SettingRow
@@ -31,7 +54,11 @@ export const Page = () => {
           'com.affine.settings.editorSettings.page.display-doc-info.description'
         ]()}
       >
-        <Switch />
+        <Switch
+          data-testid="display-doc-info-trigger"
+          checked={settings.displayDocInfo}
+          onChange={handleDisplayDocInfoChange}
+        />
       </SettingRow>
       <SettingRow
         name={t[
@@ -41,7 +68,11 @@ export const Page = () => {
           'com.affine.settings.editorSettings.page.display-bi-link.description'
         ]()}
       >
-        <Switch />
+        <Switch
+          data-testid="display-bi-link-trigger"
+          checked={settings.displayBiDirectionalLink}
+          onChange={handleDisplayBiDirectionalLinkChange}
+        />
       </SettingRow>
     </SettingWrapper>
   );

packages/frontend/core/src/components/page-detail-editor.tsx

@@ -4,20 +4,18 @@ import { useDocCollectionPage } from '@affine/core/hooks/use-block-suite-workspa
 import { DisposableGroup } from '@blocksuite/global/utils';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 import type { Doc as BlockSuiteDoc, DocCollection } from '@blocksuite/store';
-import {
-  type DocMode,
-  fontStyleOptions,
-  useLiveData,
-  useService,
-} from '@toeverything/infra';
+import { type DocMode, useLiveData, useService } from '@toeverything/infra';
 import { cssVar } from '@toeverything/theme';
 import clsx from 'clsx';
 import type { CSSProperties } from 'react';
 import { memo, Suspense, useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 
-import { useAppSettingHelper } from '../hooks/affine/use-app-setting-helper';
 import { EditorService } from '../modules/editor';
+import {
+  EditorSettingService,
+  fontStyleOptions,
+} from '../modules/editor-settting';
 import { BlockSuiteEditor as Editor } from './blocksuite/block-suite-editor';
 import * as styles from './page-detail-editor.css';
 
@@ -51,21 +49,22 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
   const mode = useLiveData(editor.mode$);
 
   const isSharedMode = editor.isSharedMode;
-  const { appSettings } = useAppSettingHelper();
+  const editorSetting = useService(EditorSettingService).editorSetting;
+  const settings = useLiveData(editorSetting.settings$);
 
   const value = useMemo(() => {
     const fontStyle = fontStyleOptions.find(
-      option => option.key === appSettings.fontStyle
+      option => option.key === settings.fontFamily
     );
     if (!fontStyle) {
       return cssVar('fontSansFamily');
     }
-    const customFontFamily = appSettings.customFontFamily;
+    const customFontFamily = settings.customFontFamily;
 
     return customFontFamily && fontStyle.key === 'Custom'
       ? `${customFontFamily}, ${fontStyle.value}`
       : fontStyle.value;
-  }, [appSettings.customFontFamily, appSettings.fontStyle]);
+  }, [settings.customFontFamily, settings.fontFamily]);
 
   const blockId = useRouterHash();
 
@@ -96,7 +95,7 @@ const PageDetailEditorMain = memo(function PageDetailEditorMain({
   return (
     <Editor
       className={clsx(styles.editor, {
-        'full-screen': !isSharedMode && appSettings.fullWidthLayout,
+        'full-screen': !isSharedMode && settings.fullWidthLayout,
         'is-public': isSharedMode,
       })}
       style={