Merge branch 'master' into dnd-overlay

components/Carbon.js

@@ -1,10 +1,14 @@
 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 toHash from 'tohash'
 import WindowControls from '../components/WindowControls'
-import { COLORS } from '../lib/constants'
+import { COLORS, DEFAULT_LANGUAGE, LANGUAGES } from '../lib/constants'
+
+const LANGUAGE_HASH = toHash(LANGUAGES, 'module')
 
 const DEFAULT_SETTINGS = {
   paddingVertical: '50px',
@@ -13,7 +17,7 @@ const DEFAULT_SETTINGS = {
   marginHorizontal: '45px',
   background: '#fed0ec',
   theme: 'dracula',
-  language: 'javascript'
+  language: DEFAULT_LANGUAGE
 }
 
 class Carbon extends React.Component {
@@ -21,14 +25,45 @@ class Carbon extends React.Component {
     super(props)
 
     this.state = {
-      loading: true
+      loading: true,
+      language: props.config.language,
     }
+
+    this.handleLanguageChange = this.handleLanguageChange.bind(this)
+    this.codeUpdated = this.codeUpdated.bind(this)
   }
 
   componentDidMount() {
     this.setState({
       loading: false
     })
+
+    this.handleLanguageChange(this.props.children)
+  }
+
+  componentWillReceiveProps (newProps) {
+    this.handleLanguageChange(newProps.children, { customProps: newProps })
+  }
+
+  codeUpdated (newCode) {
+    this.handleLanguageChange(newCode)
+    this.props.updateCode(newCode)
+  }
+
+  handleLanguageChange(newCode, config) {
+    const props = (config && config.customProps) || this.props
+
+    if (props.config.language === 'auto') {
+      // try to set the language
+      const detectedLanguage = hljs.highlightAuto(newCode).language
+      const languageModule = LANGUAGE_HASH[detectedLanguage]
+
+      if (languageModule) {
+        this.setState({ language: languageModule.module })
+      }
+    } else {
+      this.setState({ language: props.config.language })
+    }
   }
 
   render () {
@@ -36,7 +71,7 @@ class Carbon extends React.Component {
 
     const options = {
       lineNumbers: false,
-      mode: config.language,
+      mode: this.state.language || 'plaintext',
       theme: config.theme,
       scrollBarStyle: null,
       viewportMargin: Infinity,
@@ -67,6 +102,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.codeUpdated}
             value={this.props.children}
             options={options}
           />

components/Overlay.js

@@ -1,6 +1,6 @@
 const Overlay = props => (
   <div className="dnd-container">
-    { props.isOver ? <div className="dnd-overlay">Drop your file here to import</div> : null }
+    { props.isOver ? <div className="dnd-overlay">{props.title}</div> : null }
     { props.children }
     <style jsx>{`
       .dnd-container {

lib/constants.js

@@ -55,6 +55,10 @@ export const LANGUAGES = [
   {
     name: 'Plain Text'
   },
+  {
+    name: 'C',
+    module: 'clike'
+  },
   {
     name: 'Clojure',
     module: 'clojure'
@@ -229,6 +233,8 @@ export const LANGUAGES = [
   }
 ]
 
+export const DEFAULT_LANGUAGE = 'auto'
+
 export const COLORS = {
   BLACK: '#121212',
   PRIMARY: '#F8E81C',

package.json

@@ -28,12 +28,13 @@
     "react-spinkit": "^3.0.0",
     "react-spinner": "^0.2.7",
     "react-syntax-highlight": "^0.0.6",
+    "tohash": "^1.0.0",
     "twitter": "^1.7.1"
   },
   "now": {
     "env": {
       "TWITTER_CONSUMER_KEY": "@twitter-consumer-key",
-      "TWITTER_CONSUMER_SECRET":"@twitter-consumer-secret",
+      "TWITTER_CONSUMER_SECRET": "@twitter-consumer-secret",
       "TWITTER_ACCESS_TOKEN_KEY": "@twitter-access-token-key",
       "TWITTER_ACCESS_TOKEN_SECRET": "@twitter-access-token-secret"
     }

pages/editor.js

@@ -9,7 +9,7 @@ import Toolbar from '../components/Toolbar'
 import Overlay from '../components/Overlay'
 import Carbon from '../components/Carbon'
 import api from '../lib/api'
-import { THEMES, LANGUAGES, COLORS, DEFAULT_CODE } from '../lib/constants'
+import { THEMES, DEFAULT_LANGUAGE, COLORS, DEFAULT_CODE } from '../lib/constants'
 
 class Editor extends React.Component {
   /* pathname, asPath, err, req, res */
@@ -25,21 +25,23 @@ class Editor extends React.Component {
     return {}
   }
 
-  constructor()  {
+  constructor(props)  {
-    super()
+    super(props)
     this.state = {
       background: '#ABB8C3',
       theme: THEMES[0].id,
-      language: 'javascript', // TODO LANGUAGES[0]
+      language: DEFAULT_LANGUAGE,
       dropShadow: true,
       windowControls: true,
       paddingVertical: '48px',
       paddingHorizontal: '32px',
-      uploading: false
+      uploading: false,
+      code: props.content || DEFAULT_CODE
     }
 
     this.save = this.save.bind(this)
     this.upload = this.upload.bind(this)
+    this.updateCode = this.updateCode.bind(this)
   }
 
   getCarbonImage () {
@@ -57,6 +59,10 @@ class Editor extends React.Component {
     return  domtoimage.toPng(node, config)
   }
 
+  updateCode (code) {
+    this.setState({ code })
+  }
+
   save () {
     this.getCarbonImage()
     .then((dataUrl) => {
@@ -94,16 +100,15 @@ class Editor extends React.Component {
               enabled={this.state}
             />
             <ReadFileDropContainer
-              onDrop={droppedContent => this.setState({ droppedContent })}
+              onDrop={droppedContent => this.setState({ code: droppedContent })}
             >
-              <Overlay>
+              <Overlay title="Drop your file here to import">
-                <Carbon config={this.state}>
+                <Carbon config={this.state} updateCode={this.updateCode}>
-                  {this.state.droppedContent || this.props.content || DEFAULT_CODE}
+                  {this.state.code}
                 </Carbon>
               </Overlay>
             </ReadFileDropContainer>
           </div>
-
           <style jsx>{`
             #editor {
               background: ${COLORS.BLACK};

yarn.lock

@@ -3526,6 +3526,10 @@ to-fast-properties@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
 
+tohash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tohash/-/tohash-1.0.0.tgz#cd740231ca16821e3744f2f18ff9727382eeb091"
+
 touch@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"