Pass config into codeimage;

components/dropdown.js

@@ -14,8 +14,11 @@ class Dropdown extends React.Component {
   }
 
   select(item) {
+    if (this.state.selected !== item) {
+      this.props.onChange(item)
       this.setState({ selected: item })
     }
+  }
 
   toggle() {
     this.setState({ isVisible: !this.state.isVisible })

components/toolbar.js

@@ -7,8 +7,8 @@ import { THEMES, LANGUAGES } from '../lib/constants'
 
 const Toolbar = (props) => (
   <div id="toolbar">
-    <Dropdown list={THEMES} />
+    <Dropdown list={THEMES} onChange={props.onThemeChange}/>
-    <Dropdown list={LANGUAGES} />
+    <Dropdown list={LANGUAGES} onChange={props.onLanguageChange}/>
     <ColorPicker
       onChange={props.onBGChange}
       bg={props.bg}

lib/constants.js

@@ -191,3 +191,16 @@ export const LANGUAGES = [
     name: 'YAML'
   }
 ]
+
+export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
+
+const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
+
+const unfold = (f, seed) => {
+  const go = (f, seed, acc) => {
+    const res = f(seed)
+    return res ? go(f, res[1], acc.concat([res[0]])) : acc
+  }
+  return go(f, seed, [])
+}
+  `

pages/index.js

@@ -4,24 +4,11 @@ import { DragDropContext } from 'react-dnd'
 import Axios from 'axios'
 import domtoimage from 'dom-to-image'
 
-
 import Meta from '../components/meta'
 import Toolbar from '../components/toolbar'
 import CodeImage from '../components/codeImage'
 import api from '../lib/api'
-
+import { THEMES, LANGUAGES, DEFAULT_CODE } from '../lib/constants'
-const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
-
-const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res)
-
-const unfold = (f, seed) => {
-  const go = (f, seed, acc) => {
-    const res = f(seed)
-    return res ? go(f, res[1], acc.concat([res[0]])) : acc
-  }
-  return go(f, seed, [])
-}
-  `
 
 class Index extends React.Component {
   /* pathname, asPath, err, req, res */
@@ -38,7 +25,9 @@ class Index extends React.Component {
   constructor()  {
     super()
     this.state = {
-      bgColor: '#111111'
+      bgColor: '#111111',
+      theme: THEMES[0],
+      language: LANGUAGES[0]
     }
   }
 
@@ -71,10 +60,12 @@ class Index extends React.Component {
               save={this.save}
               upload={this.upload}
               onBGChange={color => this.setState({ bgColor: color })}
+              onThemeChange={theme => this.setState({ theme })}
+              onLanguageChange={language => this.setState({ language })}
               bg={this.state.bgColor}
             />
-            <CodeImage config={{ bg: this.state.bgColor}}>
+            <CodeImage config={this.state}>
-              {this.props.content || DEFAULT_CODE}
+              {this.droppedContent || this.props.content || DEFAULT_CODE}
             </CodeImage>
           </div>
           <style jsx>{`