Make carbon a stateless component, move highlight.js calc into render (#479)

* make carbon a stateless component, move highlight.js calc into render

* remove unneeded class function

* inline handleLanguageChange

components/Carbon.js

@@ -9,34 +9,7 @@ import WindowControls from '../components/WindowControls'
 import Watermark from '../components/svg/Watermark'
 import { COLORS, LANGUAGE_MODE_HASH, LANGUAGE_NAME_HASH, DEFAULT_SETTINGS } from '../lib/constants'
 
-const handleLanguageChange = (newCode, props) => {
-  if (props.config.language === 'auto') {
-    // try to set the language
-    const detectedLanguage = hljs.highlightAuto(newCode).language
-    const languageMode =
-      LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage]
-
-    if (languageMode) {
-      return { language: languageMode.mime || languageMode.mode }
-    }
-  }
-  return { language: props.config.language }
-}
-
 class Carbon extends React.PureComponent {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      ...handleLanguageChange(this.props.children, this.props)
-    }
-
-    this.handleTitleBarChange = this.handleTitleBarChange.bind(this)
-    this.codeUpdated = this.codeUpdated.bind(this)
-    this.onBeforeChange = this.onBeforeChange.bind(this)
-    this.handleLanguageChange = this.handleLanguageChange.bind(this)
-  }
-
   componentDidMount() {
     const ro = new ResizeObserver(entries => {
       const cr = entries[0].contentRect
@@ -45,30 +18,38 @@ class Carbon extends React.PureComponent {
     ro.observe(this.exportContainerNode)
   }
 
-  codeUpdated(newCode) {
-    this.handleLanguageChange(newCode, this.props)
-    this.props.updateCode(newCode)
-  }
+  handleLanguageChange = debounce(
+    (newCode, language) => {
+      if (language === 'auto') {
+        // try to set the language
+        const detectedLanguage = hljs.highlightAuto(newCode).language
+        const languageMode =
+          LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage]
 
-  handleTitleBarChange(newTitle) {
-    this.props.updateTitleBar(newTitle)
+        if (languageMode) {
+          return languageMode.mime || languageMode.mode
+        }
       }
 
-  handleLanguageChange = debounce(
-    (...args) => this.setState(handleLanguageChange(...args)),
+      return language
+    },
     ms('300ms'),
-    { trailing: true }
+    {
+      leading: true,
+      trailing: true
+    }
   )
 
-  onBeforeChange(editor, meta, code) {
-    return this.codeUpdated(code)
-  }
+  onBeforeChange = (editor, meta, code) => this.props.updateCode(code)
 
   render() {
     const config = { ...DEFAULT_SETTINGS, ...this.props.config }
+
+    const languageMode = this.handleLanguageChange(this.props.children, config.language)
+
     const options = {
       lineNumbers: config.lineNumbers,
-      mode: this.state.language || 'plaintext',
+      mode: languageMode || 'plaintext',
       theme: config.theme,
       scrollBarStyle: null,
       viewportMargin: Infinity,
@@ -87,7 +68,7 @@ class Carbon extends React.PureComponent {
           <WindowControls
             titleBar={this.props.titleBar}
             theme={config.windowTheme}
-            handleTitleBarChange={this.handleTitleBarChange}
+            handleTitleBarChange={this.props.updateTitleBar}
           />
         ) : null}
         <CodeMirror