Merge pull request #51 from magjac/user-configuration-of-text-editor

User configuration of text editor

Author: magjac

src/SettingsDialog.js

@@ -45,8 +45,14 @@ const styles = theme => ({
     justifyContent: 'space-between',
   },
   holdOffInput: {
-    width: '7em',
-  }
+    width: '7.6em',
+  },
+  fontSizeInput: {
+    width: '5em',
+  },
+  tabSizeInput: {
+    width: '7.1em',
+  },
 });
 
 class SettingsDialog extends React.Component {
@@ -67,6 +73,14 @@ class SettingsDialog extends React.Component {
     this.props.onHoldOffChange(event.target.value);
   };
 
+  handleFontSizeChange = (event) => {
+    this.props.onFontSizeChange(event.target.value);
+  };
+
+  handleTabSizeChange = (event) => {
+    this.props.onTabSizeChange(event.target.value);
+  };
+
   render() {
     const { classes } = this.props;
     return (
@@ -127,13 +141,57 @@ class SettingsDialog extends React.Component {
               />
             </FormGroup>
           </DialogContent>
-          <DialogTitle id="form-dialog-title">Other</DialogTitle>
+          <DialogTitle id="form-dialog-title">Text Editor</DialogTitle>
+          <DialogContent classes={{root: classes.root}}>
+            <FormControl
+              className={classes.formControl}
+              aria-describedby="font-size-helper-text"
+            >
+              <InputLabel shrink={true}>Font size</InputLabel>
+              <Input
+                className={classes.fontSizeInput}
+                id="font-size"
+                type="number"
+                value={this.props.fontSize}
+                onChange={this.handleFontSizeChange}
+                endAdornment={<InputAdornment position="end"> px</InputAdornment>}
+                inputProps={{
+                  'aria-label': 'FontSize',
+                  min: 1,
+                  max: 99,
+                  step: 1,
+                }}
+              />
+            </FormControl>
+          </DialogContent>
+          <DialogContent classes={{root: classes.root}}>
+            <FormControl
+              className={classes.formControl}
+              aria-describedby="tab-size-helper-text"
+            >
+              <InputLabel shrink={true}>Tab size</InputLabel>
+              <Input
+                className={classes.tabSizeInput}
+                id="tab-size"
+                type="number"
+                value={this.props.tabSize}
+                onChange={this.handleTabSizeChange}
+                endAdornment={<InputAdornment position="end"> spaces</InputAdornment>}
+                inputProps={{
+                  'aria-label': 'TabSize',
+                  min: 1,
+                  max: 99,
+                  step: 1,
+                }}
+              />
+            </FormControl>
+          </DialogContent>
           <DialogContent classes={{root: classes.root}}>
             <FormControl
               className={classes.formControl}
               aria-describedby="holdoff-helper-text"
             >
-              <InputLabel shrink={true}>Editor hold-off time</InputLabel>
+              <InputLabel shrink={true}>Hold-off time</InputLabel>
               <Input
                 className={classes.holdOffInput}
                 id="holdoff"

src/TextEditor.js

@@ -98,6 +98,8 @@ class TextEditor extends React.Component {
         <AceEditor
           mode="dot"
           theme="github"
+          fontSize={this.props.fontSize + 'px'}
+          tabSize={this.props.tabSize}
           onChange={this.handleChange}
           onBeforeLoad={this.handleBeforeLoad}
           onLoad={this.handleLoad}

src/pages/index.js

@@ -59,6 +59,8 @@ class Index extends React.Component {
       defaultEdgeAttributes: JSON.parse(localStorage.getItem('defaultEdgeAttributes')) || {},
       error: null,
       holdOff: localStorage.getItem('holdOff') || 0.2,
+      fontSize: localStorage.getItem('fontSize') || 12,
+      tabSize: localStorage.getItem('tabSize') || 4,
       selectedGraphComponents: [],
     };
   }
@@ -184,6 +186,18 @@ class Index extends React.Component {
     });
   }
 
+  handleFontSizeChange = (fontSize) => {
+    this.setPersistentState({
+      fontSize: fontSize,
+    });
+  }
+
+  handleTabSizeChange = (tabSize) => {
+    this.setPersistentState({
+      tabSize: tabSize,
+    });
+  }
+
   handleNodeShapeClick = (shape) => {
     let x0 = null;
     let y0 = null;
@@ -389,6 +403,10 @@ class Index extends React.Component {
           onFitGraphSwitchChange={this.handleFitGraphSwitchChange}
           holdOff={this.state.holdOff}
           onHoldOffChange={this.handleHoldOffChange}
+          fontSize={this.state.fontSize}
+          onFontSizeChange={this.handleFontSizeChange}
+          tabSize={this.state.tabSize}
+          onTabSizeChange={this.handleTabSizeChange}
           onSettingsClose={this.handleSettingsClose}
         />
         <Grid container
@@ -428,6 +446,8 @@ class Index extends React.Component {
                     error={this.state.error}
                     selectedGraphComponents={this.state.selectedGraphComponents}
                     holdOff={this.state.holdOff}
+                    fontSize={this.state.fontSize}
+                    tabSize={this.state.tabSize}
                     registerUndo={this.registerUndo}
                     registerRedo={this.registerRedo}
                   />