Fix drop issue

[laysent]

Summary

I have created a demo to illustrate this issue, feel free to look at here

If you look at src/component/base/DraftEditor.react.js, there is a problem with _dragCount:

When you drag a file into editor and drop it, onDragEnter will be triggered to increase this._dragCount. However, onDragLeave will not be triggered when dropping, thus this._dragCount will not be decreased back to 0.

Thus, after dragging and dropping, when user drags another file and NOT drop it, both onDragEnter and onDragLeave will be triggered. This time, this._dragCount will be increased then decreased. However, since it's initial value after dropping is not 0, it will not be decreased back to 0 after dragLeave, thus it will not trigger this.exitCurrentMode() in onDragLeave. Editor remains in "drag" mode.

To resolve this issue, simply set _dragCount back to 0 when dropping the file.

Test Plan

I don't think one is necessary for this issue. But would be happy to provide one if required.

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[laysent]

@flarnie Hi, Flarnie, may I know if we could merge this fix? If you have any question about the fix or repro steps, feel free to let me know.

[niveditc]

@laysent - thanks for submitting this PR! It looks safe to merge as far as I can tell. Could you possibly include a video of the issue & fix in the test plan? Basically, this would just be a screen recording in the demo that you linked to, making it easier to quickly understand the issue & fix :)

[laysent]

@niveditc Thanks for the feedback.
Following is a screen record of the demo in this repo: https://github.com/laysent/draft-js-drag-and-drop-issue

The main problem is, when dropped a file first and not dropping a file second time, it will not come back to "edit" mode and thus will not handle enter correctly anymore.
Following is the code related to draft.js for this demo:

<Editor
  editorState={this.state.editorState}
  onChange={this.onChange /* to update this.state.editorState */}
  handleReturn={() => 'handled'}
  handleDroppedFiles={() => 'handled'}
/>     

I have simplified some code above and only kept the necessary for illustration. All code can be found in this demo repo: https://github.com/laysent/draft-js-drag-and-drop-issue/blob/master/src/App.js

[niveditc]

Looks good, thanks!

[niveditc]

Next steps are that:

• I'll import this and run FB's test stack.
• Do a few sanity checks in the browser.
• Provided the steps above are successful I'll merge it in tomorrow (Monday). In the slim chance that something breaks it's better to do a risky merge on a weekday than a weekend.

[facebook-github-bot]

niveditc has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[laysent]

@niveditc Sounds great. Let me know if there is anything further I could help :-)