From 691bfed1855b2602e4ce1ef8b4e182fdb85f071d Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Thu, 5 Sep 2024 08:44:10 +0000
Subject: [PATCH] feat(core): selector for editorSetting hooks (#8108)

---
 .../core/src/components/affine/page-properties/table.tsx  | 6 ++++--
 .../blocksuite/block-suite-editor/lit-adaper.tsx          | 8 ++++++--
 .../core/src/modules/peek-view/view/modal-container.tsx   | 6 ++++--
 packages/frontend/core/src/providers/modal-provider.tsx   | 4 ++--
 .../mobile/src/views/settings/appearance/font.tsx         | 6 ++++--
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/core/src/components/affine/page-properties/table.tsx b/packages/frontend/core/src/components/affine/page-properties/table.tsx
index aca0bcd3ac..9dbb51615b 100644
--- a/packages/frontend/core/src/components/affine/page-properties/table.tsx
+++ b/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']()}
diff --git a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
index 65cec65462..db41cbb47c 100644
--- a/packages/frontend/core/src/components/blocksuite/block-suite-editor/lit-adaper.tsx
+++ b/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>
diff --git a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx b/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
index 17331e5239..ee2251bf62 100644
--- a/packages/frontend/core/src/modules/peek-view/view/modal-container.tsx
+++ b/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}
             >
diff --git a/packages/frontend/core/src/providers/modal-provider.tsx b/packages/frontend/core/src/providers/modal-provider.tsx
index 680c66699d..c89f6a1704 100644
--- a/packages/frontend/core/src/providers/modal-provider.tsx
+++ b/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$
-  ).enableAI;
+    editorSettingService.editorSetting.settings$.selector(s => s.enableAI)
+  );
   const [aiState] = useState(enableAI);
   const [open, setOpen] = useState(false);
 
diff --git a/packages/frontend/mobile/src/views/settings/appearance/font.tsx b/packages/frontend/mobile/src/views/settings/appearance/font.tsx
index a9afea52f5..75fe6c608c 100644
--- a/packages/frontend/mobile/src/views/settings/appearance/font.tsx
+++ b/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>