Add/preferences/line height (codesandbox#86)

* add preferences for line height

* add style and step to PreferenceNumber

* remove editors from preferences label

Author: viankakrisna

src/app/components/Preference/PreferenceNumber.js

@@ -24,10 +24,11 @@ export default class PreferenceInput extends React.PureComponent {
   };
 
   render() {
-    const { value } = this.props;
+    const { value, style, step } = this.props;
     return (
       <StyledInput
-        style={{ width: '3rem' }}
+        step={step}
+        style={{ width: '3rem', ...style }}
         type="number"
         value={value}
         onChange={this.handleChange}

src/app/components/sandbox/CodeEditor/index.js

@@ -54,6 +54,7 @@ const CodeContainer = styled.div`
   .CodeMirror {
     font-family: ${props =>
       fontFamilies(props.fontFamily, 'Source Code Pro', 'monospace')};
+    line-height: ${props => props.lineHeight};
     background: ${theme.background2()};
     color: #e0e0e0;
     height: 100%;
@@ -475,7 +476,10 @@ export default class CodeEditor extends React.PureComponent {
           title={title}
           path={modulePath}
         />
-        <CodeContainer fontFamily={preferences.fontFamily}>
+        <CodeContainer
+          fontFamily={preferences.fontFamily}
+          lineHeight={preferences.lineHeight}
+        >
           <div
             style={{ height: '100%', fontSize: preferences.fontSize || 14 }}
             ref={this.getCodeMirror}

src/app/containers/Preferences/EditorPageSettings/EditorSettings/Preferences.js

@@ -65,17 +65,26 @@ const Preferences = ({ preferences, preferencesActions }: Props) => {
         />
         <Rule />
         <PaddedPreference
-          title="Editor font size"
+          title="Font size"
           type="number"
           {...bindValue('fontSize')}
         />
         <Rule />
         <PaddedPreference
-          title="Editor font family"
+          title="Font family"
           type="string"
           placeholder="Source Code Pro"
           {...bindValue('fontFamily')}
         />
+        <Rule />
+        <PaddedPreference
+          title="Line height"
+          type="number"
+          placeholder="1.15"
+          step="0.05"
+          style={{ width: '4rem' }}
+          {...bindValue('lineHeight')}
+        />
       </PreferenceContainer>
     </Container>
   );

src/app/store/preferences/reducer.js

@@ -30,6 +30,7 @@ const initialState: Preferences = Object.keys(keys).reduce(
     instantPreviewEnabled: false,
     fontSize: 14,
     fontFamily: '',
+    lineHeight: 1.15,
     clearConsoleEnabled: false,
     prettierConfig: DEFAULT_PRETTIER_CONFIG,
   },