add auto detection for languages

components/Carbon.js

@@ -1,10 +1,11 @@
 import { EOL } from 'os'
+import * as hljs from 'highlight.js'
 import React from 'react'
 import domtoimage from 'dom-to-image'
 import CodeMirror from 'react-codemirror'
 import Spinner from 'react-spinner'
 import WindowControls from '../components/WindowControls'
-import { COLORS, DEFAULT_LANGUAGE } from '../lib/constants'
+import { COLORS, DEFAULT_LANGUAGE, LANGUAGE_HASH } from '../lib/constants'
 
 const DEFAULT_SETTINGS = {
   paddingVertical: '50px',
@@ -21,35 +22,47 @@ class Carbon extends React.Component {
     super(props)
 
     this.state = {
-      loading: true
+      loading: true,
+      language: props.config.language
     }
 
-    this.detectLanguage = this.detectLanguage.bind(this)
+    this.handleLanguageChange = this.handleLanguageChange.bind(this)
   }
 
   componentDidMount() {
     this.setState({
       loading: false
     })
+
+    this.handleLanguageChange(this.props.children)
   }
 
-  detectLanguage () {
-    return 'javascript'
+  componentWillReceiveProps (newProps) {
+    this.handleLanguageChange(newProps.children, { customProps: newProps })
   }
 
-  render () {
-    const config = Object.assign(DEFAULT_SETTINGS, this.props.config)
+  handleLanguageChange(newCode, config) {
+    const props = (config && config.customProps) || this.props
+
+    if (props.config.language.name === 'Auto') {
+      // try to set the language
+      const detectedLanguage = hljs.highlightAuto(newCode).language
+      const languageModule = LANGUAGE_HASH[detectedLanguage]
 
-    let language
-    if (config.language.name === 'Auto') {
-      language = this.detectLanguage(this.props.children)
+      if (languageModule) {
+        this.setState({ language: languageModule })
+      }
     } else {
-      language = config.language.module || 'plaintext'
+      this.setState({ language: props.config.language })
     }
+  }
+
+  render () {
+    const config = Object.assign(DEFAULT_SETTINGS, this.props.config)
 
     const options = {
       lineNumbers: false,
-      mode: language,
+      mode: this.state.language ? this.state.language.module : 'plaintext',
       theme: config.theme,
       scrollBarStyle: null,
       viewportMargin: Infinity,
@@ -80,6 +93,7 @@ class Carbon extends React.Component {
           { config.windowControls ? <WindowControls theme={config.windowTheme} /> : null }
           <CodeMirror
             className={`CodeMirror__container window-theme__${config.windowTheme} ${config.dropShadow ? 'dropshadow' : ''}`}
+            onChange={this.handleLanguageChange}
             value={this.props.children}
             options={options}
           />