From a5c1b64900ae6b018a22ea54a95f463de01221b6 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Mon, 23 Oct 2017 23:12:28 -0700
Subject: [PATCH] Fixes to document drag&drop

---
 frontend/components/Editor/Editor.js |   5 +-
 frontend/scenes/Document/Document.js | 151 ++++++++++-----------------
 2 files changed, 57 insertions(+), 99 deletions(-)

diff --git a/frontend/components/Editor/Editor.js b/frontend/components/Editor/Editor.js
index b73d77388..7d158112a 100644
--- a/frontend/components/Editor/Editor.js
+++ b/frontend/components/Editor/Editor.js
@@ -83,6 +83,7 @@ type KeyData = {
   };
 
   handleDrop = async (ev: SyntheticEvent) => {
+    if (this.props.readOnly) return;
     // check if this event was already handled by the Editor
     if (ev.isDefaultPrevented()) return;
 
@@ -92,7 +93,9 @@ type KeyData = {
 
     const files = getDataTransferFiles(ev);
     for (const file of files) {
-      await this.insertImageFile(file);
+      if (file.type.startsWith('image/')) {
+        await this.insertImageFile(file);
+      }
     }
   };
 
diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js
index d290ad791..ed517e30d 100644
--- a/frontend/scenes/Document/Document.js
+++ b/frontend/scenes/Document/Document.js
@@ -27,7 +27,6 @@ import DocumentMenu from 'menus/DocumentMenu';
 import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import Editor from 'components/Editor';
-import DropToImport from 'components/DropToImport';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
@@ -57,7 +56,6 @@ type Props = {
 
   @observable editCache: ?string;
   @observable newDocument: ?Document;
-  @observable isDragging = false;
   @observable isLoading = false;
   @observable isSaving = false;
   @observable notFound = false;
@@ -198,14 +196,6 @@ type Props = {
     this.props.history.push(url);
   };
 
-  onStartDragging = () => {
-    this.isDragging = true;
-  };
-
-  onStopDragging = () => {
-    this.isDragging = false;
-  };
-
   renderNotFound() {
     return <Search notFound />;
   }
@@ -226,11 +216,6 @@ type Props = {
     return (
       <Container column auto>
         {isMoving && document && <DocumentMove document={document} />}
-
-        {this.isDragging &&
-          <DropHere align="center" justify="center">
-            Drop files here to import into Atlas.
-          </DropHere>}
         {titleText && <PageTitle title={titleText} />}
         {this.isLoading && <LoadingIndicator />}
         {isFetching &&
@@ -239,73 +224,60 @@ type Props = {
           </CenteredContent>}
         {!isFetching &&
           document &&
-          <StyledDropToImport
-            documentId={document.id}
-            history={this.props.history}
-            onDragEnter={this.onStartDragging}
-            onDragLeave={this.onStopDragging}
-            onDrop={this.onStopDragging}
-            disabled={this.isEditing}
-          >
-            <Flex justify="center" auto>
-              <Prompt
-                when={document.hasPendingChanges}
-                message={DISCARD_CHANGES}
-              />
-              <Editor
-                key={document.id}
-                text={document.text}
-                emoji={document.emoji}
-                onImageUploadStart={this.onImageUploadStart}
-                onImageUploadStop={this.onImageUploadStop}
-                onChange={this.onChange}
-                onSave={this.onSave}
-                onCancel={this.onDiscard}
-                readOnly={!this.isEditing}
-              />
-              <Meta
-                align="center"
-                justify="flex-end"
-                readOnly={!this.isEditing}
-              >
-                <Flex align="center">
-                  {!isNew &&
-                    !this.isEditing &&
-                    <Collaborators document={document} />}
-                  <HeaderAction>
-                    {this.isEditing
-                      ? <SaveAction
-                          isSaving={this.isSaving}
-                          onClick={this.onSave.bind(this, true)}
-                          disabled={
-                            !(this.document && this.document.allowSave) ||
-                              this.isSaving
-                          }
-                          isNew={!!isNew}
-                        />
-                      : <a onClick={this.onClickEdit}>
-                          Edit
-                        </a>}
-                  </HeaderAction>
-                  {this.isEditing &&
-                    <HeaderAction>
-                      <a onClick={this.onDiscard}>Discard</a>
-                    </HeaderAction>}
-                  {!this.isEditing &&
-                    <HeaderAction>
-                      <DocumentMenu document={document} />
-                    </HeaderAction>}
-                  {!this.isEditing && <Separator />}
-                  <HeaderAction>
-                    {!this.isEditing &&
-                      <a onClick={this.onClickNew}>
-                        <NewDocumentIcon />
+          <Flex justify="center" auto>
+            <Prompt
+              when={document.hasPendingChanges}
+              message={DISCARD_CHANGES}
+            />
+            <Editor
+              key={document.id}
+              text={document.text}
+              emoji={document.emoji}
+              onImageUploadStart={this.onImageUploadStart}
+              onImageUploadStop={this.onImageUploadStop}
+              onChange={this.onChange}
+              onSave={this.onSave}
+              onCancel={this.onDiscard}
+              readOnly={!this.isEditing}
+            />
+            <Meta align="center" justify="flex-end" readOnly={!this.isEditing}>
+              <Flex align="center">
+                {!isNew &&
+                  !this.isEditing &&
+                  <Collaborators document={document} />}
+                <HeaderAction>
+                  {this.isEditing
+                    ? <SaveAction
+                        isSaving={this.isSaving}
+                        onClick={this.onSave.bind(this, true)}
+                        disabled={
+                          !(this.document && this.document.allowSave) ||
+                            this.isSaving
+                        }
+                        isNew={!!isNew}
+                      />
+                    : <a onClick={this.onClickEdit}>
+                        Edit
                       </a>}
-                  </HeaderAction>
-                </Flex>
-              </Meta>
-            </Flex>
-          </StyledDropToImport>}
+                </HeaderAction>
+                {this.isEditing &&
+                  <HeaderAction>
+                    <a onClick={this.onDiscard}>Discard</a>
+                  </HeaderAction>}
+                {!this.isEditing &&
+                  <HeaderAction>
+                    <DocumentMenu document={document} />
+                  </HeaderAction>}
+                {!this.isEditing && <Separator />}
+                <HeaderAction>
+                  {!this.isEditing &&
+                    <a onClick={this.onClickNew}>
+                      <NewDocumentIcon />
+                    </a>}
+                </HeaderAction>
+              </Flex>
+            </Meta>
+          </Flex>}
       </Container>
     );
   }
@@ -329,18 +301,6 @@ const HeaderAction = styled(Flex)`
   }
 `;
 
-const DropHere = styled(Flex)`
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  left: ${layout.sidebarWidth};
-  bottom: 0;
-  right: 0;
-  text-align: center;
-  background: rgba(255,255,255,.9);
-  z-index: 1;
-`;
-
 const Meta = styled(Flex)`
   align-items: flex-start;
   position: fixed;
@@ -361,11 +321,6 @@ const LoadingState = styled(LoadingPlaceholder)`
   margin: 90px 0;
 `;
 
-const StyledDropToImport = styled(DropToImport)`
-  display: flex;
-  flex: 1;
-`;
-
 export default withRouter(
   inject('ui', 'user', 'documents', 'collections')(DocumentScene)
 );