feat(core): temporarily add page mode editor settings to appearance settings (#8090)

Will remove it when editor settings is released.

![CleanShot 2024-09-04 at 18 19 29@2x](https://github.com/user-attachments/assets/2b2b75ff-acbf-4ca9-ae60-292e73663e13)

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

@@ -13,6 +13,7 @@ import { useCallback, useMemo } from 'react';
 
 import { useAppSettingHelper } from '../../../../../hooks/affine/use-app-setting-helper';
 import { LanguageMenu } from '../../../language-menu';
+import { Page } from '../editor/page';
 import { DateFormatSetting } from './date-format-setting';
 import { settingWrapper } from './style.css';
 import { ThemeEditorSetting } from './theme-editor-setting';
@@ -119,6 +120,8 @@ export const AppearanceSettings = () => {
         ) : null}
         {runtimeConfig.enableThemeEditor ? <ThemeEditorSetting /> : null}
       </SettingWrapper>
+      {/* //TODO(@JimmFly): remove Page component when stable release */}
+      <Page />
       {runtimeConfig.enableNewSettingUnstableApi ? (
         <SettingWrapper title={t['com.affine.appearanceSettings.date.title']()}>
           <SettingRow

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

@@ -11,6 +11,7 @@ import { useI18n } from '@affine/i18n';
 import {
   ConnectorMode,
   LineColor,
+  LineColorMap,
   PointStyle,
   StrokeStyle,
 } from '@blocksuite/blocks';
@@ -19,6 +20,7 @@ import { useCallback, useMemo } from 'react';
 
 import { DropdownMenu } from '../menu';
 import { menuTrigger, settingWrapper } from '../style.css';
+import { useColor } from '../utils';
 import { Point } from './point';
 import { EdgelessSnapshot } from './snapshot';
 
@@ -32,6 +34,7 @@ export const ConnectorSettings = () => {
   const framework = useFramework();
   const { editorSetting } = framework.get(EditorSettingService);
   const settings = useLiveData(editorSetting.settings$);
+  const getColorFromMap = useColor();
 
   const connecterStyleItems = useMemo<RadioItem[]>(
     () => [
@@ -133,8 +136,8 @@ export const ConnectorSettings = () => {
 
   const currentColor = useMemo(() => {
     const color = settings.connector.stroke;
-    return Object.entries(LineColor).find(([, value]) => value === color);
+    return getColorFromMap(color, LineColorMap);
-  }, [settings]);
+  }, [getColorFromMap, settings.connector.stroke]);
 
   const colorItems = useMemo(() => {
     const { stroke } = settings.connector;
@@ -206,9 +209,9 @@ export const ConnectorSettings = () => {
             trigger={
               <MenuTrigger
                 className={menuTrigger}
-                prefix={<Point color={currentColor[1]} />}
+                prefix={<Point color={currentColor.value} />}
               >
-                {currentColor[0]}
+                {currentColor.key}
               </MenuTrigger>
             }
           />

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

@@ -11,6 +11,7 @@ import { useI18n } from '@affine/i18n';
 import {
   createEnumMap,
   NoteBackgroundColor,
+  NoteBackgroundColorMap,
   NoteShadow,
   NoteShadowMap,
   StrokeStyle,
@@ -20,6 +21,7 @@ import { useCallback, useMemo } from 'react';
 
 import { DropdownMenu } from '../menu';
 import { menuTrigger, settingWrapper } from '../style.css';
+import { useColor } from '../utils';
 import { Point } from './point';
 import { EdgelessSnapshot } from './snapshot';
 
@@ -46,6 +48,7 @@ export const NoteSettings = () => {
   const framework = useFramework();
   const { editorSetting } = framework.get(EditorSettingService);
   const settings = useLiveData(editorSetting.settings$);
+  const getColorFromMap = useColor();
 
   const borderStyleItems = useMemo<RadioItem[]>(
     () => [
@@ -160,10 +163,8 @@ export const NoteSettings = () => {
 
   const currentColor = useMemo(() => {
     const { background } = settings['affine:note'];
-    return Object.entries(NoteBackgroundColor).find(
+    return getColorFromMap(background, NoteBackgroundColorMap);
-      ([, value]) => value === background
+  }, [getColorFromMap, settings]);
-    );
-  }, [settings]);
 
   return (
     <>
@@ -185,9 +186,9 @@ export const NoteSettings = () => {
             trigger={
               <MenuTrigger
                 className={menuTrigger}
-                prefix={<Point color={currentColor[1]} />}
+                prefix={<Point color={currentColor.value} />}
               >
-                {currentColor[0]}
+                {currentColor.key}
               </MenuTrigger>
             }
           />

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

@@ -2,12 +2,14 @@ import { MenuItem, MenuTrigger, Slider } from '@affine/component';
 import { SettingRow } from '@affine/component/setting-components';
 import { EditorSettingService } from '@affine/core/modules/editor-settting';
 import { useI18n } from '@affine/i18n';
-import { LineColor } from '@blocksuite/blocks';
+import { LineColor, LineColorMap } from '@blocksuite/blocks';
 import { useFramework, useLiveData } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
 import { DropdownMenu } from '../menu';
 import { menuTrigger } from '../style.css';
+import { useColor } from '../utils';
+import { Point } from './point';
 import { EdgelessSnapshot } from './snapshot';
 
 export const PenSettings = () => {
@@ -15,6 +17,11 @@ export const PenSettings = () => {
   const framework = useFramework();
   const { editorSetting } = framework.get(EditorSettingService);
   const settings = useLiveData(editorSetting.settings$);
+  const getColorFromMap = useColor();
+
+  const currentColor = useMemo(() => {
+    return getColorFromMap(settings.brush.color, LineColorMap);
+  }, [getColorFromMap, settings.brush.color]);
 
   const colorItems = useMemo(() => {
     const { color } = settings.brush;
@@ -24,12 +31,17 @@ export const PenSettings = () => {
       };
       const isSelected = color === value;
       return (
-        <MenuItem key={name} onSelect={handler} selected={isSelected}>
+        <MenuItem
+          key={name}
+          onSelect={handler}
+          selected={isSelected}
+          prefix={<Point color={value} />}
+        >
           {name}
         </MenuItem>
       );
     });
-  }, [editorSetting, settings]);
+  }, [editorSetting, settings.brush]);
 
   const borderThickness = settings.brush.lineWidth;
   const setBorderThickness = useCallback(
@@ -52,14 +64,19 @@ export const PenSettings = () => {
         name={t['com.affine.settings.editorSettings.edgeless.pen.color']()}
         desc={''}
       >
-        <DropdownMenu
+        {currentColor ? (
-          items={colorItems}
+          <DropdownMenu
-          trigger={
+            items={colorItems}
-            <MenuTrigger className={menuTrigger}>
+            trigger={
-              {String(settings.brush.color)}
+              <MenuTrigger
-            </MenuTrigger>
+                className={menuTrigger}
-          }
+                prefix={<Point color={currentColor.value} />}
-        />
+              >
+                {currentColor.key}
+              </MenuTrigger>
+            }
+          />
+        ) : null}
       </SettingRow>
       <SettingRow
         name={t['com.affine.settings.editorSettings.edgeless.pen.thickness']()}

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

@@ -14,6 +14,7 @@ import {
   FontWeight,
   FontWeightMap,
   LineColor,
+  LineColorMap,
   TextAlign,
 } from '@blocksuite/blocks';
 import { useFramework, useLiveData } from '@toeverything/infra';
@@ -21,6 +22,7 @@ import { useCallback, useMemo } from 'react';
 
 import { DropdownMenu } from '../menu';
 import { menuTrigger, settingWrapper } from '../style.css';
+import { useColor } from '../utils';
 import { Point } from './point';
 import { EdgelessSnapshot } from './snapshot';
 
@@ -29,6 +31,7 @@ export const TextSettings = () => {
   const framework = useFramework();
   const { editorSetting } = framework.get(EditorSettingService);
   const settings = useLiveData(editorSetting.settings$);
+  const getColorFromMap = useColor();
 
   const alignItems = useMemo<RadioItem[]>(
     () => [
@@ -134,8 +137,8 @@ export const TextSettings = () => {
 
   const currentColor = useMemo(() => {
     const { color } = settings['affine:edgeless-text'];
-    return Object.entries(LineColor).find(([, value]) => value === color);
+    return getColorFromMap(color, LineColorMap);
-  }, [settings]);
+  }, [getColorFromMap, settings]);
   return (
     <>
       <EdgelessSnapshot
@@ -154,9 +157,9 @@ export const TextSettings = () => {
             trigger={
               <MenuTrigger
                 className={menuTrigger}
-                prefix={<Point color={currentColor[1]} />}
+                prefix={<Point color={currentColor.value} />}
               >
-                {currentColor[0]}
+                {currentColor.key}
               </MenuTrigger>
             }
           />

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

@@ -0,0 +1,45 @@
+import { useTheme } from 'next-themes';
+
+function getColorFromMap(
+  color: string | { normal: string } | { light: string; dark: string },
+  colorMap: { [key: string]: string },
+  theme: 'light' | 'dark' = 'light'
+):
+  | {
+      value: string;
+      key: string;
+    }
+  | undefined {
+  if (typeof color === 'string') {
+    return { value: color, key: colorMap[color] };
+  }
+
+  if ('normal' in color) {
+    return {
+      value: color.normal,
+      key: colorMap[color.normal],
+    };
+  }
+
+  if ('light' in color && 'dark' in color) {
+    return {
+      value: color[theme],
+      key: colorMap[color[theme]],
+    };
+  }
+
+  return undefined;
+}
+
+export const useColor = () => {
+  const { resolvedTheme } = useTheme();
+  return (
+    color: string | { normal: string } | { light: string; dark: string },
+    colorMap: { [key: string]: string }
+  ) =>
+    getColorFromMap(
+      color,
+      colorMap,
+      resolvedTheme as 'light' | 'dark' | undefined
+    );
+};