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,30 +243,15 @@ 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,
-          backgroundImageSelection: null,
-          backgroundMode: 'image',
-          preset: null
-        })
-      } else {
-        this.updateState({ code: file.content, language: 'auto' })
-      }
-    }
-
     if (isImage(file)) {
-      reader.readAsDataURL(file)
+      this.updateState({
+        backgroundImage: file.content,
+        backgroundImageSelection: null,
+        backgroundMode: 'image',
+        preset: null
+      })
     } else {
-      reader.readAsText(file, 'UTF-8')
+      this.updateState({ code: file.content, language: 'auto' })
     }
   }
 
@@ -338,86 +323,82 @@ class Editor extends React.Component {
 
     return (
       <React.Fragment>
-        <Dropzone accept="image/*, text/*, application/*" onDrop={this.onDrop}>
+        <div className="editor">
-          {({ getRootProps, isDragAccept }) => {
+          <Toolbar>
-            const root = getRootProps()
+            <Themes key={theme} updateTheme={this.updateTheme} theme={theme} />
-            return (
+            <Dropdown
-              <div className="editor" {...root}>
+              icon={languageIcon}
-                <Toolbar>
+              selected={
-                  <Themes key={theme} updateTheme={this.updateTheme} theme={theme} />
+                LANGUAGE_NAME_HASH[language] ||
-                  <Dropdown
+                LANGUAGE_MIME_HASH[language] ||
-                    icon={languageIcon}
+                LANGUAGE_MODE_HASH[language] ||
-                    selected={
+                LANGUAGE_MODE_HASH[DEFAULT_LANGUAGE]
-                      LANGUAGE_NAME_HASH[language] ||
+              }
-                      LANGUAGE_MIME_HASH[language] ||
+              list={LANGUAGES}
-                      LANGUAGE_MODE_HASH[language] ||
+              onChange={this.updateLanguage}
-                      LANGUAGE_MODE_HASH[DEFAULT_LANGUAGE]
+            />
-                    }
+            <BackgroundSelect
-                    list={LANGUAGES}
+              onChange={this.updateBackground}
-                    onChange={this.updateLanguage}
+              mode={backgroundMode}
-                  />
+              color={backgroundColor}
-                  <BackgroundSelect
+              image={backgroundImage}
-                    onChange={this.updateBackground}
+              aspectRatio={aspectRatio}
-                    mode={backgroundMode}
+            />
-                    color={backgroundColor}
+            <Settings
-                    image={backgroundImage}
+              {...config}
-                    aspectRatio={aspectRatio}
+              onChange={this.updateSetting}
-                  />
+              resetDefaultSettings={this.resetDefaultSettings}
-                  <Settings
+              format={this.format}
-                    {...config}
+              applyPreset={this.applyPreset}
-                    onChange={this.updateSetting}
+              getCarbonImage={this.getCarbonImage}
-                    resetDefaultSettings={this.resetDefaultSettings}
+            />
-                    format={this.format}
+            <div className="buttons">
-                    applyPreset={this.applyPreset}
+              {this.props.api.tweet && online && (
-                    getCarbonImage={this.getCarbonImage}
+                <Button
-                  />
+                  border
-                  <div className="buttons">
+                  large
-                    {this.props.api.tweet && online && (
+                  padding="0 16px"
-                      <Button
+                  margin="0 8px 0 0"
-                        border
+                  onClick={this.upload}
-                        large
+                  color="#57b5f9"
-                        padding="0 16px"
-                        margin="0 8px 0 0"
-                        onClick={this.upload}
-                        color="#57b5f9"
-                      >
-                        {uploading ? 'Loading...' : 'Tweet'}
-                      </Button>
-                    )}
-                    <ExportMenu
-                      onChange={this.updateSetting}
-                      export={this.export}
-                      exportSize={exportSize}
-                      disablePNG={this.disablePNG}
-                    />
-                  </div>
-                </Toolbar>
-
-                <Overlay
-                  isOver={isDragAccept}
-                  title={`Drop your file here to import ${isDragAccept ? '✋' : '✊'}`}
                 >
-                  {/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
+                  {uploading ? 'Loading...' : 'Tweet'}
-                  <Carbon
+                </Button>
-                    key={language}
+              )}
-                    config={this.state}
+              <ExportMenu
-                    updateCode={this.updateCode}
+                onChange={this.updateSetting}
-                    onAspectRatioChange={this.updateAspectRatio}
+                export={this.export}
-                    titleBar={titleBar}
+                exportSize={exportSize}
-                    updateTitleBar={this.updateTitleBar}
+                disablePNG={this.disablePNG}
-                    innerRef={this.innerRef}
+              />
-                  >
+            </div>
-                    {code != null ? code : DEFAULT_CODE}
+          </Toolbar>
-                  </Carbon>
+
-                </Overlay>
+          <Dropzone accept="image/*, text/*, application/*" onDrop={this.onDrop}>
-              </div>
+            {({ canDrop }) => (
-            )
+              <Overlay
-          }}
+                isOver={canDrop}
-        </Dropzone>
+                title={`Drop your file here to import ${canDrop ? '✋' : '✊'}`}
+              >
+                {/*key ensures Carbon's internal language state is updated when it's changed by Dropdown*/}
+                <Carbon
+                  key={language}
+                  config={this.state}
+                  updateCode={this.updateCode}
+                  onAspectRatioChange={this.updateAspectRatio}
+                  titleBar={titleBar}
+                  updateTitleBar={this.updateTitleBar}
+                  innerRef={this.innerRef}
+                >
+                  {code != null ? code : DEFAULT_CODE}
+                </Carbon>
+              </Overlay>
+            )}
+          </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"