Fixes some drag-n-drop problems (#1599)

Summary:
**Summary**
Fixes issue #1383. Fixes problem which is: onDrop breaks onSelect/onChange events.
Fixes issue #1454 (partial). Fixes problem which is: after first internal drop dragged text will not be moved to target position, but copied.
The solution is to set `editor._internalDrag` to false not during onDragOver events, but after end of drag-n-drop.

**Test Plan**
Attached reproducable videos (on Chrome for Linux)
Issue #1383 before and after:
![1383-before](https://user-images.githubusercontent.com/3238637/46585340-68ec4100-ca78-11e8-9c2f-c98e7cb381ff.gif)
![1383-after](https://user-images.githubusercontent.com/3238637/46585344-6c7fc800-ca78-11e8-9c2e-fdac5594d1d0.gif)
Issue #1454 before and after:
![1454-before](https://user-images.githubusercontent.com/3238637/46585364-9e912a00-ca78-11e8-9c17-5dfcec5a2e16.gif)
![1454-after](https://user-images.githubusercontent.com/3238637/46585361-9a650c80-ca78-11e8-8b7f-dac6c6af4b23.gif)
Pull Request resolved: #1599

Differential Revision: D10236073

fbshipit-source-id: 3b7b816630f3b5b15931cb53782a1d5b9e9d5121

src/component/handlers/drag/DraftEditorDragHandler.js

@@ -19,6 +19,7 @@ import type SelectionState from 'SelectionState';
 const DataTransfer = require('DataTransfer');
 const DraftModifier = require('DraftModifier');
 const EditorState = require('EditorState');
+const ReactDOM = require('ReactDOM');
 
 const findAncestorOffsetKey = require('findAncestorOffsetKey');
 const getTextContentFromFiles = require('getTextContentFromFiles');
@@ -69,6 +70,7 @@ const DraftEditorDragHandler = {
    */
   onDragEnd: function(editor: DraftEditor): void {
     editor.exitCurrentMode();
+    endDrag(editor);
   },
 
   /**
@@ -114,20 +116,36 @@ const DraftEditorDragHandler = {
       editor.props.handleDrop &&
       isEventHandled(editor.props.handleDrop(dropSelection, data, dragType))
     ) {
-      return;
-    }
-
-    if (editor._internalDrag) {
+      // handled
+    } else if (editor._internalDrag) {
       editor.update(moveText(editorState, dropSelection));
-      return;
+    } else {
+      editor.update(
+        insertTextAtSelection(editorState, dropSelection, data.getText()),
+      );
     }
-
-    editor.update(
-      insertTextAtSelection(editorState, dropSelection, data.getText()),
-    );
+    endDrag(editor);
   },
 };
 
+function endDrag(editor) {
+  editor._internalDrag = false;
+
+  // Fix issue #1383
+  // Prior to React v16.5.0 onDrop breaks onSelect event:
+  // https://github.com/facebook/react/issues/11379.
+  // Dispatching a mouseup event on DOM node will make it go back to normal.
+  const editorNode = ReactDOM.findDOMNode(editor);
+  if (editorNode) {
+    const mouseUpEvent = new MouseEvent('mouseup', {
+      view: window,
+      bubbles: true,
+      cancelable: true,
+    });
+    editorNode.dispatchEvent(mouseUpEvent);
+  }
+}
+
 function moveText(
   editorState: EditorState,
   targetSelection: SelectionState,

src/component/handlers/edit/editOnDragOver.js

@@ -19,7 +19,6 @@ import type DraftEditor from 'DraftEditor.react';
  * Drag behavior has begun from outside the editor element.
  */
 function editOnDragOver(editor: DraftEditor, e: SyntheticDragEvent<>): void {
-  editor._internalDrag = false;
   editor.setMode('drag');
   e.preventDefault();
 }