feat(core): selector for editorSetting hooks (#8108)

packages/frontend/core/src/components/affine/page-properties/table.tsx

@@ -603,7 +603,9 @@ export const PagePropertiesTableHeader = ({
   const docBacklinks = docLinksServices.backlinks;
   const backlinks = useLiveData(docBacklinks.backlinks$);
 
-  const settings = useLiveData(editorSettingService.editorSetting.settings$);
+  const displayDocInfo = useLiveData(
+    editorSettingService.editorSetting.settings$.selector(s => s.displayDocInfo)
+  );
 
   const { syncing, retrying, serverClock } = useLiveData(
     workspaceService.workspace.engine.doc.docState$(docService.doc.id)
@@ -696,7 +698,7 @@ export const PagePropertiesTableHeader = ({
         {dTimestampElement}
       </div>
       <Divider />
-      {settings.displayDocInfo ? (
+      {displayDocInfo ? (
         <div className={styles.tableHeaderSecondaryRow}>
           <div className={clsx(!open ? styles.pageInfoDimmed : null)}>
             {t['com.affine.page-properties.page-info']()}

packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -191,7 +191,11 @@ export const BlocksuiteDocEditor = forwardRef<
 
   const [specs, portals] = usePatchSpecs(page, !!shared, 'page');
 
-  const settings = useLiveData(editorSettingService.editorSetting.settings$);
+  const displayBiDirectionalLink = useLiveData(
+    editorSettingService.editorSetting.settings$.selector(
+      s => s.displayBiDirectionalLink
+    )
+  );
 
   return (
     <>
@@ -210,7 +214,7 @@ export const BlocksuiteDocEditor = forwardRef<
           hasViewport={false}
         />
         <div className={styles.docEditorGap} onClick={onClickBlank}></div>
-        {!shared && settings.displayBiDirectionalLink ? (
+        {!shared && displayBiDirectionalLink ? (
           <BiDirectionalLinkPanel />
         ) : null}
       </div>

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

@@ -92,7 +92,9 @@ export const PeekViewModalContainer = forwardRef<
   const controlsRef = useRef<HTMLDivElement>(null);
   const prevAnimeMap = useRef<Record<string, AnimeInstance | undefined>>({});
   const editorSettings = useService(EditorSettingService).editorSetting;
-  const settings = useLiveData(editorSettings.settings$);
+  const fullWidthLayout = useLiveData(
+    editorSettings.settings$.selector(s => s.fullWidthLayout)
+  );
 
   const animateControls = useCallback((animateIn = false) => {
     const controls = controlsRef.current;
@@ -322,7 +324,7 @@ export const PeekViewModalContainer = forwardRef<
           >
             <div
               data-anime-state={animeState}
-              data-full-width-layout={settings.fullWidthLayout}
+              data-full-width-layout={fullWidthLayout}
               ref={contentClipRef}
               className={styles.modalContentContainer}
             >

packages/frontend/core/src/providers/modal-provider.tsx

@@ -187,8 +187,8 @@ export const SignOutConfirmModal = () => {
 export const AIReloadConfirmModal = () => {
   const editorSettingService = useService(EditorSettingService);
   const enableAI = useLiveData(
-    editorSettingService.editorSetting.settings$
+    editorSettingService.editorSetting.settings$.selector(s => s.enableAI)
-  ).enableAI;
+  );
   const [aiState] = useState(enableAI);
   const [open, setOpen] = useState(false);
 

packages/frontend/mobile/src/views/settings/appearance/font.tsx

@@ -13,7 +13,9 @@ import { RowLayout } from '../row.layout';
 export const FontStyleSetting = () => {
   const t = useI18n();
   const editorSetting = useService(EditorSettingService).editorSetting;
-  const settings = useLiveData(editorSetting.settings$);
+  const fontFamily = useLiveData(
+    editorSetting.settings$.selector(s => s.fontFamily)
+  );
 
   const options = useMemo(() => getBaseFontStyleOptions(t), [t]);
   const handleEdit = useCallback(
@@ -27,7 +29,7 @@ export const FontStyleSetting = () => {
     <RowLayout label={t['com.affine.mobile.setting.appearance.font']()}>
       <SettingDropdownSelect<FontFamily>
         options={options}
-        value={settings.fontFamily}
+        value={fontFamily}
         onChange={handleEdit}
       />
     </RowLayout>