Use new version of dropperx

components/Editor.js

@@ -4,7 +4,7 @@ import React from 'react'
 import domtoimage from 'dom-to-image'
 import Spinner from 'react-spinner'
 import dynamic from 'next/dynamic'
-import Dropzone from 'react-dropzone'
+import Dropzone from 'dropperx'
 
 // Ours
 import Button from './Button'
@@ -243,14 +243,6 @@ class Editor extends React.Component {
   }
 
   onDrop([file]) {
-    if (!file) return
-
-    const reader = new FileReader()
-
-    // TODO abstract this into Dropperx
-    reader.onload = event => {
-      file.content = event.target.result
-
     if (isImage(file)) {
       this.updateState({
         backgroundImage: file.content,
@@ -263,13 +255,6 @@ class Editor extends React.Component {
     }
   }
 
-    if (isImage(file)) {
-      reader.readAsDataURL(file)
-    } else {
-      reader.readAsText(file, 'UTF-8')
-    }
-  }
-
   updateTheme(theme) {
     this.updateSetting('theme', theme)
   }
@@ -338,11 +323,7 @@ class Editor extends React.Component {
 
     return (
       <React.Fragment>
-        <Dropzone accept="image/*, text/*, application/*" onDrop={this.onDrop}>
+        <div className="editor">
-          {({ getRootProps, isDragAccept }) => {
-            const root = getRootProps()
-            return (
-              <div className="editor" {...root}>
           <Toolbar>
             <Themes key={theme} updateTheme={this.updateTheme} theme={theme} />
             <Dropdown
@@ -393,9 +374,11 @@ class Editor extends React.Component {
             </div>
           </Toolbar>
 
+          <Dropzone accept="image/*, text/*, application/*" onDrop={this.onDrop}>
+            {({ canDrop }) => (
               <Overlay
-                  isOver={isDragAccept}
+                isOver={canDrop}
-                  title={`Drop your file here to import ${isDragAccept ? '✋' : '✊'}`}
+                title={`Drop your file here to import ${canDrop ? '✋' : '✊'}`}
               >
                 {/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
                 <Carbon
@@ -410,14 +393,12 @@ class Editor extends React.Component {
                   {code != null ? code : DEFAULT_CODE}
                 </Carbon>
               </Overlay>
-              </div>
+            )}
-            )
-          }}
           </Dropzone>
+        </div>
         <style jsx>
           {`
             .editor {
-              outline: none;
               background: ${COLORS.BLACK};
               border: 3px solid ${COLORS.SECONDARY};
               border-radius: 8px;

package.json

@@ -26,6 +26,7 @@
     "cross-env": "^5.2.0",
     "dom-to-image": "^2.5.2",
     "downshift": "^3.1.12",
+    "dropperx": "^1.0.1",
     "escape-goat": "^1.3.0",
     "graphql": "^14.1.1",
     "highlight.js": "^9.13.1",
@@ -43,7 +44,6 @@
     "react-color": "^2.17.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.7.0",
-    "react-dropzone": "^8.0.3",
     "react-image-crop": "6.0.0",
     "react-spinner": "^0.2.7",
     "react-syntax-highlight": "^15.3.1",

yarn.lock

@@ -2645,6 +2645,13 @@ downshift@^3.1.12:
     prop-types "^15.6.0"
     react-is "^16.5.2"
 
+dropperx@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dropperx/-/dropperx-1.0.1.tgz#1babe42121fa8f4d8855ab515d9d078b4c41a9c5"
+  integrity sha512-xycbCU3uYxWjoa4ZGJQtqC1YheSvpJDkRk44WSK5EJq39fQVXDbY9ZLeCcG0XgQvg2UHB3/sB0VQ+CvZqZ3MMw==
+  dependencies:
+    react-dropzone "^8.0.3"
+
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.1.tgz#b1a7a29c4abfd639585efaecce80d666b1e34125"