make carbon the file drop target

pages/editor.js

@@ -80,26 +80,27 @@ class Editor extends React.Component {
   render () {
     return (
         <Page enableHeroText>
-          <ReadFileDropContainer
+          <div id="editor">
-            onDrop={droppedContent => this.setState({ droppedContent })}
+            <Toolbar
-          >
+              save={this.save}
-            <div id="editor">
+              upload={this.upload}
-              <Toolbar
+              uploading={this.state.uploading}
-                save={this.save}
+              onBGChange={color => this.setState({ background: color })}
-                upload={this.upload}
+              onThemeChange={theme => this.setState({ theme: theme.id })}
-                uploading={this.state.uploading}
+              onLanguageChange={language => this.setState({ language: language.module })}
-                onBGChange={color => this.setState({ background: color })}
+              onSettingsChange={(key, value) => this.setState({ [key]: value })}
-                onThemeChange={theme => this.setState({ theme: theme.id })}
+              bg={this.state.background}
-                onLanguageChange={language => this.setState({ language: language.module })}
+              enabled={this.state}
-                onSettingsChange={(key, value) => this.setState({ [key]: value })}
+            />
-                bg={this.state.background}
+            <ReadFileDropContainer
-                enabled={this.state}
+              onDrop={droppedContent => this.setState({ droppedContent })}
-              />
+            >
               <Carbon config={this.state}>
                 {this.state.droppedContent || this.props.content || DEFAULT_CODE}
               </Carbon>
-            </div>
+            </ReadFileDropContainer>
-          </ReadFileDropContainer>
+          </div>
+
           <style jsx>{`
             #editor {
               background: ${COLORS.BLACK};