Support other files extensions (#418)

* pass file extension to Editor to support other files

* add html & css snippets

* importing mode & snippets based on extension

Author: sadakchap

src/components/B4ACloudCodeView/B4ACloudCodeView.react.js

@@ -94,7 +94,7 @@ export default class B4ACloudCodeView extends React.Component {
           </form>
         }
         </div>:
-        <CodeEditor code={this.props.source} onCodeChange={ value => this.props.onCodeChange(value) } />
+        <CodeEditor code={this.props.source} onCodeChange={ value => this.props.onCodeChange(value) } mode={this.extensionDecoder()}/>
       }
     </div>;
   }

src/components/CodeEditor/CodeEditor.react.js

@@ -25,6 +25,8 @@ export default class CodeEditor extends React.Component {
     if (this.state.code !== props.code) {
       this.setState({ code: props.code });
     }
+    require(`ace-builds/src-noconflict/mode-${props.mode}`);
+    require(`ace-builds/src-noconflict/snippets/${props.mode}`);
   }
 
   get value() {
@@ -36,12 +38,12 @@ export default class CodeEditor extends React.Component {
   }
 
   render() {
-    const { placeHolder, fontSize = 18 } = this.props;
+    const { placeHolder, fontSize = 18, mode } = this.props;
     const { code } = this.state;
 
     return (
       <Editor
-        mode="javascript"
+        mode={mode}
         theme="solarized_dark"
         onChange={value => {
           this.setState({ code: value });