feat: add font size adjustment in editor settings #13549
Conversation
|
|
WalkthroughAdds a new editor font-size setting (12–24, default 16) with a slider UI, persists it via EditorSettingService, and applies it by updating the --affine-font-base CSS variable on mount and when changed. Integrates settings into the custom theme page and adds English i18n strings. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant UI as Settings UI (General)
participant S as EditorSettingService
participant DOM as Document Root (CSS vars)
participant T as CustomThemeModifier
U->>UI: Adjust font size (Slider)
UI->>S: set({ fontSize })
Note right of S: settings$ emits updated state
S-->>UI: settings$ (fontSize)
UI->>DOM: set --affine-font-base = fontSize + "px"
S-->>T: settings$ (fontSize)
T->>DOM: set --affine-font-base = fontSize + "px"
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/frontend/core/src/desktop/pages/root/custom-theme/index.tsx (1)
28-43: Prevent theme updates from wiping --affine-font-base.
document.documentElement.style.cssText = ''clears all inline vars, so switching themes can drop the font-size until the setting changes again. Re-apply the var inside the theme subscription and includesettings.fontSizein the effect deps. Also avoid the truthy guard so future0values won’t be skipped.Apply:
const sub = themeEditorService.customTheme$.subscribe(themeObj => { if (!themeObj) return; const mode = resolvedTheme === 'dark' ? 'dark' : 'light'; const valueMap = themeObj[mode]; // remove previous style // TOOD(@CatsJuice): find better way to remove previous style document.documentElement.style.cssText = ''; // recover color scheme set by next-themes document.documentElement.style.colorScheme = mode; Object.entries(valueMap).forEach(([key, value]) => { value && document.documentElement.style.setProperty(key, value); }); + // keep editor base font size after clearing cssText + document.documentElement.style.setProperty( + '--affine-font-base', + `${settings.fontSize}px` + ); }); @@ -}, [resolvedTheme, enableThemeEditor, themeEditorService]); +}, [resolvedTheme, enableThemeEditor, themeEditorService, settings.fontSize]); @@ - useEffect(() => { - if (settings.fontSize) { - document.documentElement.style.setProperty('--affine-font-base', `${settings.fontSize}px`); - } - }, [settings.fontSize]); + useEffect(() => { + document.documentElement.style.setProperty( + '--affine-font-base', + `${settings.fontSize}px` + ); + }, [settings.fontSize]);Also applies to: 49-49, 51-56
🧹 Nitpick comments (3)
packages/frontend/core/src/modules/editor-setting/schema.ts (1)
22-22: Constrain to integers and accept coerced input.Avoid accidental decimals and tolerate stringified values from storage/imports.
- fontSize: z.number().min(12).max(24).default(16), + fontSize: z.coerce.number().int().min(12).max(24).default(16),packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/style.css.ts (1)
167-183: Make slider row fluid to avoid cramped layouts.Using a fixed 250px width may clip on narrower containers. Prefer 100% with a max.
export const fontSizeContainer = style({ display: 'flex', alignItems: 'center', gap: '12px', - width: '250px', + width: '100%', + maxWidth: '250px', });packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/general.tsx (1)
312-351: Persist on commit; update CSS live to reduce writes.Write to settings on slider commit (or throttled) to avoid persisting every pixel change. Keep live CSS updates for instant feedback.
Verify
SliderexposesonValueCommit(Radix-compatible). If yes:- const onFontSizeChange = useCallback( - (fontSize: number[]) => { - const size = fontSize[0]; - editorSettingService.editorSetting.set('fontSize', size); - // Update CSS variable immediately - document.documentElement.style.setProperty('--affine-font-base', `${size}px`); - }, - [editorSettingService.editorSetting] - ); + const onFontSizeChange = useCallback((fontSize: number[]) => { + const size = fontSize[0]; + // live preview only + document.documentElement.style.setProperty('--affine-font-base', `${size}px`); + }, []); + + const onFontSizeCommit = useCallback( + (fontSize: number[]) => { + const size = fontSize[0]; + editorSettingService.editorSetting.set('fontSize', size); + }, + [editorSettingService.editorSetting] + ); @@ <Slider value={[settings.fontSize]} - onValueChange={onFontSizeChange} + onValueChange={onFontSizeChange} + onValueCommit={onFontSizeCommit} min={12} max={24} step={1} className={styles.fontSizeSlider} />If not supported, consider debouncing
set('fontSize')withsetTimeout(~150ms).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/general.tsx(3 hunks)packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/style.css.ts(1 hunks)packages/frontend/core/src/desktop/pages/root/custom-theme/index.tsx(3 hunks)packages/frontend/core/src/modules/editor-setting/schema.ts(1 hunks)packages/frontend/i18n/src/resources/en.json(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/general.tsx (3)
packages/common/infra/src/framework/react/index.tsx (1)
useServices(29-45)packages/frontend/core/src/components/properties/table.css.ts (1)
fontSize(6-6)packages/frontend/component/src/components/setting-components/setting-row.tsx (1)
SettingRow(17-49)
packages/frontend/core/src/desktop/pages/root/custom-theme/index.tsx (1)
packages/common/infra/src/framework/react/index.tsx (1)
useServices(29-45)
🔇 Additional comments (4)
packages/frontend/core/src/desktop/pages/root/custom-theme/index.tsx (1)
2-2: LGTM: service wiring and settings subscription look correct.Also applies to: 11-15, 19-19
packages/frontend/i18n/src/resources/en.json (1)
1329-1331: LGTM: new i18n keys read well and match existing tone.packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/general.tsx (2)
12-12: LGTM: Slider import.
566-566: LGTM: placement in General settings is consistent with existing rows.
2 participants
🎯 Feature Overview
This PR adds a font size adjustment setting in Settings → Editor → General to improve readability and accessibility.
✨ What's New
🔧 Implementation Details
fontSizefield toEditorSettingSchemaFontSizeSettingscomponent with slider control--affine-font-base)🧪 Testing
📸 Screenshots
(You can add screenshots of the font size slider in action)
Addresses user requests for customizable font sizes to improve the AFFiNE user experience.
Summary by CodeRabbit
New Features
Localization