feat: adjust code editor font size (#2204)

* add font-size setting for code editor

* add code font size to remaining editors

* align font-size after font-family

* changed default font size to 14

* fixed className typo

* set inherit mode if unset

* add code font size schema validation

* add font size to folder settings

---------

Co-authored-by: Anoop M D <anoop.md1421@gmail.com>

packages/bruno-app/src/components/CodeEditor/StyledWrapper.js

@@ -5,6 +5,7 @@ const StyledWrapper = styled.div`
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
     font-family: ${(props) => (props.font ? props.font : 'default')};
+    font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : 'inherit')};
     line-break: anywhere;
     flex: 1 1 0;
   }

packages/bruno-app/src/components/CodeEditor/index.js

@@ -333,6 +333,7 @@ export default class CodeEditor extends React.Component {
         className="h-full w-full flex flex-col relative"
         aria-label="Code Editor"
         font={this.props.font}
+        fontSize={this.props.fontSize}
         ref={(node) => {
           this._node = node;
         }}

packages/bruno-app/src/components/CollectionSettings/Docs/index.js

@@ -46,6 +46,7 @@ const Docs = ({ collection }) => {
           onSave={onSave}
           mode="application/text"
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
         />
       ) : (
         <Markdown collectionPath={collection.pathname} onDoubleClick={toggleViewMode} content={docs} />

packages/bruno-app/src/components/CollectionSettings/Script/index.js

@@ -52,6 +52,7 @@ const Script = ({ collection }) => {
           mode="javascript"
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
         />
       </div>
       <div className="flex-1 mt-6">
@@ -64,6 +65,7 @@ const Script = ({ collection }) => {
           mode="javascript"
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
         />
       </div>
 

packages/bruno-app/src/components/CollectionSettings/Tests/index.js

@@ -36,6 +36,7 @@ const Tests = ({ collection }) => {
         mode="javascript"
         onSave={handleSave}
         font={get(preferences, 'font.codeFont', 'default')}
+        fontSize={get(preferences, 'font.codeFontSize')}
       />
 
       <div className="mt-6">

packages/bruno-app/src/components/Documentation/index.js

@@ -47,6 +47,7 @@ const Documentation = ({ item, collection }) => {
           collection={collection}
           theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
           value={docs || ''}
           onEdit={onEdit}
           onSave={onSave}

packages/bruno-app/src/components/FolderSettings/Script/index.js

@@ -54,6 +54,7 @@ const Script = ({ collection, folder }) => {
           mode="javascript"
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
         />
       </div>
       <div className="flex flex-col flex-1 mt-2 gap-y-2">
@@ -66,6 +67,7 @@ const Script = ({ collection, folder }) => {
           mode="javascript"
           onSave={handleSave}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
         />
       </div>
 

packages/bruno-app/src/components/FolderSettings/Tests/index.js

@@ -37,6 +37,7 @@ const Tests = ({ collection, folder }) => {
         mode="javascript"
         onSave={handleSave}
         font={get(preferences, 'font.codeFont', 'default')}
+        fontSize={get(preferences, 'font.codeFontSize')}
       />
 
       <div className="mt-6">

packages/bruno-app/src/components/Preferences/Font/index.js

@@ -9,17 +9,25 @@ const Font = ({ close }) => {
   const preferences = useSelector((state) => state.app.preferences);
 
   const [codeFont, setCodeFont] = useState(get(preferences, 'font.codeFont', 'default'));
+  const [codeFontSize, setCodeFontSize] = useState(get(preferences, 'font.codeFontSize', '14'));
 
-  const handleInputChange = (event) => {
+  const handleCodeFontChange = (event) => {
     setCodeFont(event.target.value);
   };
 
+  const handleCodeFontSizeChange = (event) => {
+    // Restrict to min/max value
+    const clampedSize = Math.max(1, Math.min(event.target.value, 32));
+    setCodeFontSize(clampedSize);
+  };
+
   const handleSave = () => {
     dispatch(
       savePreferences({
         ...preferences,
         font: {
-          codeFont
+          codeFont,
+          codeFontSize
         }
       })
     ).then(() => {
@@ -29,17 +37,33 @@ const Font = ({ close }) => {
 
   return (
     <StyledWrapper>
-      <label className="block font-medium">Code Editor Font</label>
+      <div className="flex flex-row gap-2 w-full">
-      <input
+        <div className="w-4/5">
-        type="text"
+          <label className="block font-medium">Code Editor Font</label>
-        className="block textbox mt-2 w-full"
+          <input
-        autoComplete="off"
+            type="text"
-        autoCorrect="off"
+            className="block textbox mt-2 w-full"
-        autoCapitalize="off"
+            autoComplete="off"
-        spellCheck="false"
+            autoCorrect="off"
-        onChange={handleInputChange}
+            autoCapitalize="off"
-        defaultValue={codeFont}
+            spellCheck="false"
-      />
+            onChange={handleCodeFontChange}
+            defaultValue={codeFont}
+          />
+        </div>
+        <div className="w-1/5">
+          <label className="block font-medium">Font Size</label>
+          <input
+            type="number"
+            className="block textbox mt-2 w-full"
+            autoComplete="off"
+            autoCorrect="off"
+            inputMode="numeric"
+            onChange={handleCodeFontSizeChange}
+            defaultValue={codeFontSize}
+          />
+        </div>
+      </div>
 
       <div className="mt-10">
         <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>

packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js

@@ -31,6 +31,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
     : get(item, 'request.body.graphql.variables');
   const { displayedTheme } = useTheme();
   const [schema, setSchema] = useState(null);
+  const preferences = useSelector((state) => state.app.preferences);
 
   useEffect(() => {
     onSchemaLoad(schema);
@@ -71,6 +72,8 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
             onRun={onRun}
             onEdit={onQueryChange}
             onClickReference={handleGqlClickReference}
+            font={get(preferences, 'font.codeFont', 'default')}
+            fontSize={get(preferences, 'font.codeFontSize')}
           />
         );
       }

packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js

@@ -33,6 +33,7 @@ const GraphQLVariables = ({ variables, item, collection }) => {
         value={variables || ''}
         theme={displayedTheme}
         font={get(preferences, 'font.codeFont', 'default')}
+        fontSize={get(preferences, 'font.codeFontSize')}
         onEdit={onEdit}
         mode="javascript"
         onRun={onRun}

packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js

@@ -4,6 +4,8 @@ const StyledWrapper = styled.div`
   div.CodeMirror {
     background: ${(props) => props.theme.codemirror.bg};
     border: solid 1px ${(props) => props.theme.codemirror.border};
+    font-family: ${(props) => (props.font ? props.font : 'default')};
+    font-size: ${(props) => (props.fontSize ? `${props.fontSize}px` : 'inherit')};
     flex: 1 1 0;
   }
 

packages/bruno-app/src/components/RequestPane/QueryEditor/index.js

@@ -211,6 +211,8 @@ export default class QueryEditor extends React.Component {
         <StyledWrapper
           className="h-full w-full  flex flex-col relative"
           aria-label="Query Editor"
+          font={this.props.font}
+          fontSize={this.props.fontSize}
           ref={(node) => {
             this._node = node;
           }}

packages/bruno-app/src/components/RequestPane/RequestBody/index.js

@@ -50,6 +50,7 @@ const RequestBody = ({ item, collection }) => {
           collection={collection}
           theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
           value={bodyContent[bodyMode] || ''}
           onEdit={onEdit}
           onRun={onRun}

packages/bruno-app/src/components/RequestPane/Script/index.js

@@ -47,6 +47,7 @@ const Script = ({ item, collection }) => {
           value={requestScript || ''}
           theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
           onEdit={onRequestScriptEdit}
           mode="javascript"
           onRun={onRun}
@@ -60,6 +61,7 @@ const Script = ({ item, collection }) => {
           value={responseScript || ''}
           theme={displayedTheme}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
           onEdit={onResponseScriptEdit}
           mode="javascript"
           onRun={onRun}

packages/bruno-app/src/components/RequestPane/Tests/index.js

@@ -34,6 +34,7 @@ const Tests = ({ item, collection }) => {
         value={tests || ''}
         theme={displayedTheme}
         font={get(preferences, 'font.codeFont', 'default')}
+        fontSize={get(preferences, 'font.codeFontSize')}
         onEdit={onEdit}
         mode="javascript"
         onRun={onRun}

packages/bruno-app/src/components/ResponsePane/QueryResult/QueryResultPreview/index.js

@@ -81,6 +81,7 @@ const QueryResultPreview = ({
         <CodeEditor
           collection={collection}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
           theme={displayedTheme}
           onRun={onRun}
           value={formattedData}

packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js

@@ -53,6 +53,7 @@ const CodeView = ({ language, item }) => {
           collection={collection}
           value={snippet}
           font={get(preferences, 'font.codeFont', 'default')}
+          fontSize={get(preferences, 'font.codeFontSize')}
           theme={displayedTheme}
           mode={lang}
         />

packages/bruno-electron/src/store/preferences.js

@@ -23,7 +23,8 @@ const defaultPreferences = {
     timeout: 0
   },
   font: {
-    codeFont: 'default'
+    codeFont: 'default',
+    codeFontSize: 14
   },
   proxy: {
     enabled: false,
@@ -54,7 +55,8 @@ const preferencesSchema = Yup.object().shape({
     timeout: Yup.number()
   }),
   font: Yup.object().shape({
-    codeFont: Yup.string().nullable()
+    codeFont: Yup.string().nullable(),
+    codeFontSize: Yup.number().min(1).max(32).nullable()
   }),
   proxy: Yup.object({
     enabled: Yup.boolean(),