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

2026-02-11 20:08:37 +00:00 · 2024-08-28 02:35:24 +00:00
parent 3e810eb043
commit 03b2cda845
13 changed files with 131 additions and 135 deletions
--- a/packages/frontend/core/src/commands/affine-settings.tsx
+++ b/packages/frontend/core/src/commands/affine-settings.tsx
@@ -1,12 +1,12 @@
 import type { useI18n } from '@affine/i18n';
 import { SettingsIcon } from '@blocksuite/icons/rc';
-import type { AffineEditorContainer } from '@blocksuite/presets';
 import { appSettingAtom } from '@toeverything/infra';
 import type { createStore } from 'jotai';
 import type { useTheme } from 'next-themes';

 import type { useLanguageHelper } from '../hooks/affine/use-language-helper';
 import { track } from '../mixpanel';
+import type { EditorSettingService } from '../modules/editor-settting';
 import { registerAffineCommand } from './registry';

 export function registerAffineSettingsCommands({
@@ -14,15 +14,20 @@ export function registerAffineSettingsCommands({
  store,
  theme,
  languageHelper,
+  editorSettingService,
 }: {
  t: ReturnType<typeof useI18n>;
  store: ReturnType<typeof createStore>;
  theme: ReturnType<typeof useTheme>;
  languageHelper: ReturnType<typeof useLanguageHelper>;
-  editor: AffineEditorContainer | null;
+  editorSettingService: EditorSettingService;
 }) {
  const unsubs: Array<() => void> = [];
  const { onLanguageChange, languagesList, currentLanguage } = languageHelper;
+  const updateSettings = editorSettingService.editorSetting.set.bind(
+    editorSettingService.editorSetting
+  );
+  const settings$ = editorSettingService.editorSetting.settings$;

  // color modes
  unsubs.push(
@@ -91,18 +96,14 @@ export function registerAffineSettingsCommands({
      ]()}`,
      category: 'affine:settings',
      icon: <SettingsIcon />,
-      preconditionStrategy: () =>
-        store.get(appSettingAtom).fontStyle !== 'Sans',
+      preconditionStrategy: () => settings$.value.fontFamily !== 'Sans',
      run() {
        track.$.cmdk.settings.changeAppSetting({
          key: 'fontStyle',
          value: 'Sans',
        });

-        store.set(appSettingAtom, prev => ({
-          ...prev,
-          fontStyle: 'Sans',
-        }));
+        updateSettings('fontFamily', 'Sans');
      },
    })
  );
@@ -115,18 +116,14 @@ export function registerAffineSettingsCommands({
      ]()}`,
      category: 'affine:settings',
      icon: <SettingsIcon />,
-      preconditionStrategy: () =>
-        store.get(appSettingAtom).fontStyle !== 'Serif',
+      preconditionStrategy: () => settings$.value.fontFamily !== 'Serif',
      run() {
        track.$.cmdk.settings.changeAppSetting({
          key: 'fontStyle',
          value: 'Serif',
        });

-        store.set(appSettingAtom, prev => ({
-          ...prev,
-          fontStyle: 'Serif',
-        }));
+        updateSettings('fontFamily', 'Serif');
      },
    })
  );
@@ -139,18 +136,14 @@ export function registerAffineSettingsCommands({
      ]()}`,
      category: 'affine:settings',
      icon: <SettingsIcon />,
-      preconditionStrategy: () =>
-        store.get(appSettingAtom).fontStyle !== 'Mono',
+      preconditionStrategy: () => settings$.value.fontFamily !== 'Mono',
      run() {
        track.$.cmdk.settings.changeAppSetting({
          key: 'fontStyle',
          value: 'Mono',
        });

-        store.set(appSettingAtom, prev => ({
-          ...prev,
-          fontStyle: 'Mono',
-        }));
+        updateSettings('fontFamily', 'Mono');
      },
    })
  );
@@ -209,7 +202,7 @@ export function registerAffineSettingsCommands({
      id: `affine:change-full-width-layout`,
      label: () =>
        `${t['com.affine.cmdk.affine.full-width-layout.to']()} ${t[
-          store.get(appSettingAtom).fullWidthLayout
+          settings$.value.fullWidthLayout
            ? 'com.affine.cmdk.affine.switch-state.off'
            : 'com.affine.cmdk.affine.switch-state.on'
        ]()}`,
@@ -218,13 +211,9 @@ export function registerAffineSettingsCommands({
      run() {
        track.$.cmdk.settings.changeAppSetting({
          key: 'fullWidthLayout',
-          value: store.get(appSettingAtom).fullWidthLayout ? 'off' : 'on',
+          value: settings$.value.fullWidthLayout ? 'off' : 'on',
        });
-
-        store.set(appSettingAtom, prev => ({
-          ...prev,
-          fullWidthLayout: !prev.fullWidthLayout,
-        }));
+        updateSettings('fullWidthLayout', !settings$.value.fullWidthLayout);
      },
    })
  );
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/appearance/index.tsx
+++ b/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']()}
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/general.tsx
+++ b/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'
--- a/packages/frontend/core/src/components/affine/setting-modal/general-setting/editor/page.tsx
+++ b/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>
  );
--- a/packages/frontend/core/src/components/page-detail-editor.tsx
+++ b/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={
--- a/packages/frontend/core/src/hooks/use-register-workspace-commands.ts
+++ b/packages/frontend/core/src/hooks/use-register-workspace-commands.ts
@@ -16,6 +16,7 @@ import {
  registerAffineUpdatesCommands,
 } from '../commands';
 import { usePageHelper } from '../components/blocksuite/block-suite-page-list/utils';
+import { EditorSettingService } from '../modules/editor-settting';
 import { CMDKQuickSearchService } from '../modules/quicksearch/services/cmdk';
 import { useLanguageHelper } from './affine/use-language-helper';
 import { useActiveBlocksuiteEditor } from './use-block-suite-editor';
@@ -67,6 +68,7 @@ export function useRegisterWorkspaceCommands() {
  const navigationHelper = useNavigateHelper();
  const [editor] = useActiveBlocksuiteEditor();
  const cmdkQuickSearchService = useService(CMDKQuickSearchService);
+  const editorSettingService = useService(EditorSettingService);

  useEffect(() => {
    const unsub = registerCMDKCommand(cmdkQuickSearchService, editor);
@@ -109,13 +111,13 @@ export function useRegisterWorkspaceCommands() {
      t,
      theme,
      languageHelper,
-      editor,
+      editorSettingService,
    });

    return () => {
      unsub();
    };
-  }, [store, t, theme, languageHelper, editor]);
+  }, [editorSettingService, languageHelper, store, t, theme]);

  // register AffineLayoutCommands
  useEffect(() => {
--- a/packages/frontend/core/src/modules/editor-settting/index.ts
+++ b/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
--- a/packages/frontend/core/src/modules/editor-settting/schema.ts
+++ b/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 (
--- a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
+++ b/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}
            >