Merge pull request #11 from dannyhp1/develop

Added support for language highlighting.

Author: dannyhp1

src/components/Editor.js

@@ -2,11 +2,14 @@ import React, { Component } from 'react'
 import { Redirect } from 'react-router-dom';
 import axios from 'axios';
 import AceEditor from 'react-ace';
-import { Grid, Button, CircularProgress } from '@material-ui/core';
+import { Grid, Button, CircularProgress, Select, MenuItem } from '@material-ui/core';
 
 import 'ace-builds/src-noconflict/mode-java';
 import 'ace-builds/src-noconflict/mode-python';
 import 'ace-builds/src-noconflict/mode-c_cpp';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-sql';
+import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/mode-plain_text';
 import 'ace-builds/src-noconflict/theme-monokai';
 
@@ -34,13 +37,20 @@ class Editor extends Component {
     })
   }
 
-  onChange = (value) => {
+  onChangeText = (value) => {
     this.setState({
       ...this.state,
       text: value
     })
   }
 
+  onChangeType = (event) => {
+    this.setState({
+      ...this.state,
+      type: event.target.value
+    })
+  }
+
   setInProgress = () => {
     this.setState({
       ...this.state,
@@ -111,12 +121,12 @@ class Editor extends Component {
             <Grid item xs={12}>
               <AceEditor
                 name='editor'
-                mode={this.props.language}
+                mode={this.state.type}
                 theme={theme}
                 height={this.state.editorHeight}
                 width={this.state.editorWidth}
                 value={this.state.text}
-                onChange={this.onChange}
+                onChange={this.onChangeText}
                 showPrintMargin={false}
                 editorProps={{ $blockScrolling: true }}
                 setOptions={{
@@ -127,6 +137,21 @@ class Editor extends Component {
               />
             </Grid>
             <Grid item xs={12} style={{ textAlign: 'right', marginTop: '0.75%' }}>
+              <Select
+                labelId='select-language-label'
+                id='select-language'
+                value={this.state.type}
+                onChange={this.onChangeType}
+                style={{ color: '#ffffff', marginRight: '0.75%' }}
+              >
+                <MenuItem value='plaintext'>None</MenuItem>
+                <MenuItem value='python'>Python</MenuItem>
+                <MenuItem value='java'>Java</MenuItem>
+                <MenuItem value='c_cpp'>C++</MenuItem>
+                <MenuItem value='javascript'>Javascript</MenuItem>
+                <MenuItem value='sql'>SQL</MenuItem>
+                <MenuItem value='json'>JSON</MenuItem>
+              </Select>
               {this.renderSubmit()}
             </Grid>
           </Grid>

src/components/Paste.js

@@ -9,6 +9,9 @@ import { Grid, Button, Chip } from '@material-ui/core';
 import 'ace-builds/src-noconflict/mode-java';
 import 'ace-builds/src-noconflict/mode-python';
 import 'ace-builds/src-noconflict/mode-c_cpp';
+import 'ace-builds/src-noconflict/mode-javascript';
+import 'ace-builds/src-noconflict/mode-sql';
+import 'ace-builds/src-noconflict/mode-json';
 import 'ace-builds/src-noconflict/mode-plain_text';
 import 'ace-builds/src-noconflict/theme-dracula';