Skip to content

Commit 92e039f

Browse files
beNativebeNative
authored
Merge pull request #36 from beNative/codex/add-default-font-size-setting-for-editor
Add configurable Monaco editor font size
2 parents 23b23f0 + 8ded973 commit 92e039f

8 files changed

Lines changed: 58 additions & 12 deletions

File tree

‎App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1037,6 +1037,7 @@ const MainApp: React.FC = () => {
10371037
document={activeNode}
10381038
onBackToEditor={() => setDocumentView('editor')}
10391039
onRestore={(content) => handleRestoreDocumentVersion(activeNode.id, content)}
1040+
settings={settings}
10401041
/>
10411042
);
10421043
}

‎components/CodeEditor.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ interface CodeEditorProps {
1313
onScroll?: (scrollInfo: { scrollTop: number; scrollHeight: number; clientHeight: number; }) => void;
1414
customShortcuts?: Record<string, string[]>;
1515
fontFamily?: string;
16+
fontSize?: number;
1617
}
1718

1819
export interface CodeEditorHandle {
@@ -110,7 +111,7 @@ const toMonacoKeybinding = (monacoApi: any, keys: string[]): number | null => {
110111
return keybinding | primaryKey;
111112
};
112113

113-
const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({ content, language, onChange, onScroll, customShortcuts = {}, fontFamily }, ref) => {
114+
const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({ content, language, onChange, onScroll, customShortcuts = {}, fontFamily, fontSize }, ref) => {
114115
const editorRef = useRef<HTMLDivElement>(null);
115116
const monacoInstanceRef = useRef<any>(null);
116117
const { theme } = useTheme();
@@ -121,6 +122,13 @@ const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({ content, lan
121122
const candidate = (fontFamily ?? '').trim();
122123
return candidate || DEFAULT_SETTINGS.editorFontFamily;
123124
}, [fontFamily]);
125+
const computedFontSize = useMemo(() => {
126+
const candidate = typeof fontSize === 'number' ? fontSize : Number(fontSize);
127+
if (Number.isFinite(candidate) && candidate > 0) {
128+
return Math.min(Math.max(candidate, 8), 64);
129+
}
130+
return DEFAULT_SETTINGS.editorFontSize;
131+
}, [fontSize]);
124132

125133
useImperativeHandle(ref, () => ({
126134
format() {
@@ -232,7 +240,7 @@ const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({ content, lan
232240
language: language || 'plaintext',
233241
theme: theme === 'dark' ? 'vs-dark' : 'vs',
234242
automaticLayout: true,
235-
fontSize: 12,
243+
fontSize: computedFontSize,
236244
fontFamily: computedFontFamily,
237245
minimap: {
238246
enabled: true,
@@ -275,7 +283,7 @@ const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({ content, lan
275283
monacoInstanceRef.current = null;
276284
}
277285
};
278-
}, [onChange, onScroll, applyEditorShortcuts, disposeEditorShortcuts, computedFontFamily]);
286+
}, [onChange, onScroll, applyEditorShortcuts, disposeEditorShortcuts, computedFontFamily, computedFontSize]);
279287

280288
// Effect to update content from props if it changes externally
281289
useEffect(() => {
@@ -298,9 +306,9 @@ const CodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(({ content, lan
298306

299307
useEffect(() => {
300308
if (monacoInstanceRef.current) {
301-
monacoInstanceRef.current.updateOptions({ fontFamily: computedFontFamily });
309+
monacoInstanceRef.current.updateOptions({ fontFamily: computedFontFamily, fontSize: computedFontSize });
302310
}
303-
}, [computedFontFamily]);
311+
}, [computedFontFamily, computedFontSize]);
304312

305313
// Effect to update language
306314
useEffect(() => {

‎components/MonacoDiffEditor.tsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,10 @@ interface MonacoDiffEditorProps {
1414
onChange?: (value: string) => void;
1515
onScroll?: (scrollInfo: { scrollTop: number; scrollHeight: number; clientHeight: number }) => void;
1616
fontFamily?: string;
17+
fontSize?: number;
1718
}
1819

19-
const MonacoDiffEditor: React.FC<MonacoDiffEditorProps> = ({ oldText, newText, language, renderMode = 'side-by-side', readOnly = false, onChange, onScroll, fontFamily }) => {
20+
const MonacoDiffEditor: React.FC<MonacoDiffEditorProps> = ({ oldText, newText, language, renderMode = 'side-by-side', readOnly = false, onChange, onScroll, fontFamily, fontSize }) => {
2021
const editorRef = useRef<HTMLDivElement>(null);
2122
const editorInstanceRef = useRef<any>(null);
2223
const { theme } = useTheme();
@@ -27,6 +28,13 @@ const MonacoDiffEditor: React.FC<MonacoDiffEditorProps> = ({ oldText, newText, l
2728
const candidate = (fontFamily ?? '').trim();
2829
return candidate || DEFAULT_SETTINGS.editorFontFamily;
2930
}, [fontFamily]);
31+
const computedFontSize = useMemo(() => {
32+
const candidate = typeof fontSize === 'number' ? fontSize : Number(fontSize);
33+
if (Number.isFinite(candidate) && candidate > 0) {
34+
return Math.min(Math.max(candidate, 8), 64);
35+
}
36+
return DEFAULT_SETTINGS.editorFontSize;
37+
}, [fontSize]);
3038

3139
const disposeListeners = useCallback(() => {
3240
if (changeListenerRef.current) {
@@ -54,7 +62,7 @@ const MonacoDiffEditor: React.FC<MonacoDiffEditorProps> = ({ oldText, newText, l
5462
originalEditable: false,
5563
readOnly,
5664
automaticLayout: true,
57-
fontSize: 12,
65+
fontSize: computedFontSize,
5866
fontFamily: computedFontFamily,
5967
wordWrap: 'on',
6068
renderSideBySide: renderMode !== 'inline',
@@ -69,6 +77,7 @@ const MonacoDiffEditor: React.FC<MonacoDiffEditorProps> = ({ oldText, newText, l
6977
renderSideBySide: renderMode !== 'inline',
7078
diffWordWrap: 'on',
7179
fontFamily: computedFontFamily,
80+
fontSize: computedFontSize,
7281
});
7382

7483
monaco.editor.setTheme(theme === 'dark' ? 'vs-dark' : 'vs');
@@ -110,13 +119,13 @@ const MonacoDiffEditor: React.FC<MonacoDiffEditorProps> = ({ oldText, newText, l
110119
return () => {
111120
isCancelled = true;
112121
};
113-
}, [oldText, newText, language, theme, renderMode, readOnly, onChange, onScroll, disposeListeners, computedFontFamily]);
122+
}, [oldText, newText, language, theme, renderMode, readOnly, onChange, onScroll, disposeListeners, computedFontFamily, computedFontSize]);
114123

115124
useEffect(() => {
116125
if (editorInstanceRef.current) {
117-
editorInstanceRef.current.updateOptions({ fontFamily: computedFontFamily });
126+
editorInstanceRef.current.updateOptions({ fontFamily: computedFontFamily, fontSize: computedFontSize });
118127
}
119-
}, [computedFontFamily]);
128+
}, [computedFontFamily, computedFontSize]);
120129

121130
// Final cleanup on unmount
122131
useEffect(() => {

‎components/PromptEditor.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,7 @@ const DocumentEditor: React.FC<DocumentEditorProps> = ({ documentNode, onSave, o
420420
onChange={setContent}
421421
onScroll={handleEditorScroll}
422422
fontFamily={settings.editorFontFamily}
423+
fontSize={settings.editorFontSize}
423424
/>
424425
)
425426
: (
@@ -431,6 +432,7 @@ const DocumentEditor: React.FC<DocumentEditorProps> = ({ documentNode, onSave, o
431432
onScroll={handleEditorScroll}
432433
customShortcuts={settings.customShortcuts}
433434
fontFamily={settings.editorFontFamily}
435+
fontSize={settings.editorFontSize}
434436
/>
435437
);
436438
const preview = <PreviewPane ref={previewScrollRef} content={content} language={language} onScroll={handlePreviewScroll} addLog={addLog} />;

‎components/PromptHistoryView.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
2-
import type { DocumentOrFolder } from '../types';
2+
import type { DocumentOrFolder, Settings } from '../types';
33
import { useDocumentHistory } from '../hooks/usePromptHistory';
44
import Button from './Button';
55
import MonacoDiffEditor from './MonacoDiffEditor';
@@ -12,13 +12,14 @@ interface DocumentHistoryViewProps {
1212
document: DocumentOrFolder;
1313
onBackToEditor: () => void;
1414
onRestore: (content: string) => void;
15+
settings: Settings;
1516
}
1617

1718
const MIN_VERSIONS_PANEL_WIDTH = 240;
1819
const MIN_COMPARISON_PANEL_WIDTH = 300;
1920
const DEFAULT_VERSIONS_PANEL_WIDTH = 320;
2021

21-
const DocumentHistoryView: React.FC<DocumentHistoryViewProps> = ({ document, onBackToEditor, onRestore }) => {
22+
const DocumentHistoryView: React.FC<DocumentHistoryViewProps> = ({ document, onBackToEditor, onRestore, settings }) => {
2223
const { versions, deleteVersions } = useDocumentHistory(document.id);
2324
const [isCopied, setIsCopied] = useState(false);
2425
const [focusedIndex, setFocusedIndex] = useState(0);
@@ -338,6 +339,8 @@ const DocumentHistoryView: React.FC<DocumentHistoryViewProps> = ({ document, onB
338339
language={document.language_hint || 'plaintext'}
339340
renderMode={diffRenderMode}
340341
readOnly
342+
fontFamily={settings.editorFontFamily}
343+
fontSize={settings.editorFontSize}
341344
/>
342345
</div>
343346
</main>

‎components/SettingsView.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -744,6 +744,27 @@ const AppearanceSettingsSection: React.FC<Pick<SectionProps, 'settings' | 'setCu
744744
onChange={(font) => handleFontChange('markdownCodeFontFamily', font)}
745745
helperText="Also applies to the Markdown preview's code blocks."
746746
/>
747+
<SettingRow
748+
label="Editor Font Size"
749+
description="Set the default font size for the code editor."
750+
htmlFor="editorFontSize"
751+
>
752+
<div className="flex items-center gap-4 w-60">
753+
<input
754+
id="editorFontSize"
755+
type="range"
756+
min="10"
757+
max="32"
758+
step="1"
759+
value={settings.editorFontSize}
760+
onChange={(e) => setCurrentSettings((prev) => ({ ...prev, editorFontSize: Number(e.target.value) }))}
761+
className="w-full h-2 bg-border-color rounded-lg appearance-none cursor-pointer range-slider"
762+
/>
763+
<span className="font-semibold text-text-main tabular-nums min-w-[50px] text-right text-xs">
764+
{settings.editorFontSize}px
765+
</span>
766+
</div>
767+
</SettingRow>
747768
<FontFamilySelector
748769
id="editorFontFamily"
749770
label="Editor Font Family"

‎constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const DEFAULT_SETTINGS: Settings = {
3535
markdownHeadingFontFamily: 'Inter, sans-serif',
3636
markdownCodeFontFamily: '\'JetBrains Mono\', monospace',
3737
editorFontFamily: 'Consolas, "Courier New", monospace',
38+
editorFontSize: 12,
3839
markdownCodeBlockBackgroundLight: '#f5f5f5',
3940
markdownCodeBlockBackgroundDark: '#1f2933',
4041
markdownContentPadding: 48,

‎types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@ export interface Settings {
258258
markdownHeadingFontFamily: string;
259259
markdownCodeFontFamily: string;
260260
editorFontFamily: string;
261+
editorFontSize: number;
261262
markdownCodeBlockBackgroundLight: string;
262263
markdownCodeBlockBackgroundDark: string;
263264
markdownContentPadding: number;

0 commit comments

Comments
 (0)