Add TabSize preference

Author: Ives van Hoorne

packages/app/src/app/components/sandbox/CodeEditor/Monaco.js

@@ -792,7 +792,7 @@ export default class CodeEditor extends React.Component<Props, State> {
       new this.monaco.Uri().with({ path, scheme: 'file' })
     );
 
-    model.updateOptions({ tabSize: 2 });
+    model.updateOptions({ tabSize: this.props.preferences.tabSize });
 
     modelCache[module.id] = modelCache[module.id] || {
       model: null,

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

@@ -80,6 +80,12 @@ const Preferences = ({ preferences, preferencesActions }: Props) => {
           {...bindValue('fontSize')}
         />
         <Rule />
+        <PaddedPreference
+          title="Tab size"
+          type="number"
+          {...bindValue('tabSize')}
+        />
+        <Rule />
         <PaddedPreference
           title="Font family"
           type="string"

packages/app/src/app/store/preferences/keys.js

@@ -13,4 +13,5 @@ export const codeMirror = 'settings.codemirror';
 export const autoDownloadTypes = 'settings.autoDownloadTypes';
 export const newPackagerExperiment = 'settings.newPackagerExperiment';
 export const zenMode = 'settings.zenMode';
+export const tabSize = 'settings.tabSize';
 export const keybindings = 'settings.keybindings';

packages/app/src/app/store/preferences/reducer.js

@@ -29,6 +29,7 @@ const initialState: Preferences = Object.keys(keys).reduce(
     lintEnabled: true,
     instantPreviewEnabled: false,
     fontSize: 14,
+    tabSize: 2,
     fontFamily: '',
     lineHeight: 1.15,
     clearConsoleEnabled: true,