Introducing editor font size UI parameter.

Author: krulis-martin

src/components/forms/EditUserUIDataForm/EditUserUIDataForm.js

@@ -8,7 +8,7 @@ import Callout from '../../widgets/Callout';
 import FormBox from '../../widgets/FormBox';
 import { SaveIcon } from '../../icons';
 import SubmitButton from '../SubmitButton';
-import { CheckboxField, SelectField } from '../Fields';
+import { CheckboxField, SelectField, NumericTextField } from '../Fields';
 
 const defaultPagesCaptions = defineMessages({
   dashboard: {
@@ -32,6 +32,10 @@ const getDefaultPages = defaultMemoize(formatMessage =>
   }))
 );
 
+export const EDITOR_FONT_SIZE_MIN = 5;
+export const EDITOR_FONT_SIZE_MAX = 50;
+export const EDITOR_FONT_SIZE_DEFAULT = 16;
+
 const EditUserUIDataForm = ({
   submitting,
   handleSubmit,
@@ -96,6 +100,14 @@ const EditUserUIDataForm = ({
       }
     />
 
+    <NumericTextField
+      name="editorFontSize"
+      maxLength={2}
+      validateMin={EDITOR_FONT_SIZE_MIN}
+      validateMax={EDITOR_FONT_SIZE_MAX}
+      label={<FormattedMessage id="app.editUserUIData.editorFontSize" defaultMessage="Code editor font size:" />}
+    />
+
     <Field
       name="vimMode"
       component={CheckboxField}

src/components/forms/EditUserUIDataForm/index.js

@@ -1,2 +1,7 @@
-import EditUserUIDataForm from './EditUserUIDataForm';
+import EditUserUIDataForm, {
+  EDITOR_FONT_SIZE_MIN,
+  EDITOR_FONT_SIZE_MAX,
+  EDITOR_FONT_SIZE_DEFAULT,
+} from './EditUserUIDataForm';
 export default EditUserUIDataForm;
+export { EDITOR_FONT_SIZE_MIN, EDITOR_FONT_SIZE_MAX, EDITOR_FONT_SIZE_DEFAULT };

src/components/forms/Fields/SourceCodeField.js

@@ -27,7 +27,7 @@ const SourceCodeField = ({
     {canUseDOM && (
       <div className={readOnly ? 'noselection' : ''}>
         <UserUIDataContext.Consumer>
-          {({ vimMode = false, darkTheme = true }) => (
+          {({ vimMode = false, darkTheme = true, editorFontSize = 16 }) => (
             <AceEditor
               {...props}
               {...input}
@@ -41,7 +41,7 @@ const SourceCodeField = ({
               minLines={5}
               maxLines={20}
               readOnly={readOnly}
-              fontSize={16}
+              fontSize={editorFontSize}
               onBlur={
                 () => input.onBlur() // this is a hack that will ensure blur call without distorting the contents
               }

src/components/helpers/SourceCodeViewer/SourceCodeViewer.js

@@ -9,7 +9,7 @@ const AceEditor = canUseDOM ? require('react-ace').default : null;
 const SourceCodeViewer = ({ name, content = '' }) =>
   canUseDOM ? (
     <UserUIDataContext.Consumer>
-      {({ vimMode = false, darkTheme = true }) => (
+      {({ vimMode = false, darkTheme = true, editorFontSize = 16 }) => (
         <AceEditor
           value={content}
           mode={getAceModeFromExtension(name.split('.').pop())}
@@ -18,7 +18,7 @@ const SourceCodeViewer = ({ name, content = '' }) =>
           name="source-code-viewer"
           width="100%"
           height="100%"
-          fontSize={16}
+          fontSize={editorFontSize}
           editorProps={{ $blockScrolling: true, $autoScrollEditorIntoView: true }}
         />
       )}

src/pages/EditUser/EditUser.js

@@ -26,19 +26,39 @@ import AllowUserButtonContainer from '../../containers/AllowUserButtonContainer'
 
 import EditUserProfileForm from '../../components/forms/EditUserProfileForm';
 import EditUserSettingsForm from '../../components/forms/EditUserSettingsForm';
-import EditUserUIDataForm from '../../components/forms/EditUserUIDataForm';
+import EditUserUIDataForm, {
+  EDITOR_FONT_SIZE_MIN,
+  EDITOR_FONT_SIZE_MAX,
+  EDITOR_FONT_SIZE_DEFAULT,
+} from '../../components/forms/EditUserUIDataForm';
 import GenerateTokenForm from '../../components/forms/GenerateTokenForm';
 import EditUserRoleForm from '../../components/forms/EditUserRoleForm';
 import { generateToken, takeOver } from '../../redux/modules/auth';
 import { lastGeneratedToken, loggedInUserIdSelector } from '../../redux/selectors/auth';
 
+const prepareNumber = (number, min, max, defaultValue) => {
+  number = Number(number);
+  if (isNaN(number)) {
+    return defaultValue;
+  }
+  return Math.max(Math.min(number, max), min);
+};
+
 const prepareUserUIDataInitialValues = defaultMemoize(
-  ({ darkTheme = true, vimMode = false, openedSidebar = true, useGravatar = true, defaultPage = null }) => ({
+  ({
+    darkTheme = true,
+    vimMode = false,
+    openedSidebar = true,
+    useGravatar = true,
+    defaultPage = null,
+    editorFontSize = EDITOR_FONT_SIZE_DEFAULT,
+  }) => ({
     darkTheme,
     vimMode,
     openedSidebar,
     useGravatar,
     defaultPage: defaultPage || '',
+    editorFontSize: prepareNumber(editorFontSize, EDITOR_FONT_SIZE_MIN, EDITOR_FONT_SIZE_MAX, EDITOR_FONT_SIZE_DEFAULT),
   })
 );
 
@@ -237,7 +257,22 @@ export default connect(
     loadAsync: () => EditUser.loadAsync({ userId }, dispatch),
     refreshUser: () => dispatch(fetchUser(userId)),
     updateSettings: data => dispatch(updateSettings(userId, data)),
-    updateUIData: data => dispatch(updateUIData(userId, data, false)),
+    updateUIData: ({ editorFontSize, ...data }) =>
+      dispatch(
+        updateUIData(
+          userId,
+          {
+            editorFontSize: prepareNumber(
+              editorFontSize,
+              EDITOR_FONT_SIZE_MIN,
+              EDITOR_FONT_SIZE_MAX,
+              EDITOR_FONT_SIZE_DEFAULT
+            ),
+            ...data,
+          },
+          false
+        )
+      ),
     updateProfile: data => dispatch(updateProfile(userId, data)),
     makeLocalLogin: () => dispatch(makeLocalLogin(userId)),
     generateToken: formData =>