From 180ef74ff542656d8cc345cae6228c2a6b3419bc Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Fri, 15 Apr 2016 22:51:04 +0200
Subject: [PATCH] Clear the dropzone indicator on cell render. Change the
 dropzone CSS effect to be on the input_area

---
 bower.json                                  |  2 +-
 notebook/static/notebook/js/textcell.js     | 29 +++++++++++++++------
 notebook/static/notebook/less/textcell.less |  5 ++--
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/bower.json b/bower.json
index 82b552ec7..201fcdcce 100644
--- a/bower.json
+++ b/bower.json
@@ -5,7 +5,7 @@
     "backbone": "components/backbone#~1.2",
     "bootstrap": "components/bootstrap#~3.3",
     "bootstrap-tour": "0.9.0",
-    "codemirror": "julienr/CodeMirror#fix_dragleave",
+    "codemirror": "codemirror/CodeMirror#master",
     "es6-promise": "~1.0",
     "font-awesome": "components/font-awesome#~4.2.0",
     "google-caja": "5669",
diff --git a/notebook/static/notebook/js/textcell.js b/notebook/static/notebook/js/textcell.js
index b9b376a24..259453e6c 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/notebook/static/notebook/js/textcell.js
@@ -367,6 +367,11 @@ define([
      * @method render
      */
     MarkdownCell.prototype.render = function () {
+        // We clear the dropzone here just in case the dragenter/leave
+        // logic of bind_events wasn't 100% successful.
+        this.drag_counter = 0;
+        this.inner_cell.removeClass('dropzone');
+
         var cont = TextCell.prototype.render.apply(this);
         if (cont) {
             var that = this;
@@ -465,26 +470,34 @@ define([
             return true;
         });
 
+
         // We want to display a visual indicator that the drop is possible.
         // The dragleave event is fired when we hover a child element (which
         // is often immediatly after we got the dragenter), so we keep track
         // of the number of dragenter/dragleave we got, as discussed here :
         // http://stackoverflow.com/q/7110353/116067
+        // This doesn't seem to be 100% reliable, so we clear the dropzone
+        // class when the cell is rendered as well
         this.code_mirror.on("dragenter", function(cm, evt) {
-          that.drag_counter++;
-          that.inner_cell.addClass('droppable');
-          evt.preventDefault();
+            that.drag_counter++;
+            that.inner_cell.addClass('dropzone');
+            // prevent default to allow drop
+            evt.stopPropagation();
+            evt.preventDefault();
         });
 
         this.code_mirror.on("dragleave", function(cm, evt) {
-          that.drag_counter--;
-          if (that.drag_counter === 0) {
-            that.inner_cell.removeClass('droppable');
-          }
+            that.drag_counter--;
+            if (that.drag_counter === 0) {
+                that.inner_cell.removeClass('dropzone');
+            }
+            evt.stopPropagation();
+            evt.preventDefault();
         });
 
         this.code_mirror.on("drop", function(cm, evt) {
-          that.inner_cell.removeClass('droppable');
+            that.drag_counter = 0;
+            that.inner_cell.removeClass('dropzone');
             var files = evt.dataTransfer.files;
             for (var i = 0; i < files.length; ++i) {
                 var file = files[i];
diff --git a/notebook/static/notebook/less/textcell.less b/notebook/static/notebook/less/textcell.less
index d7e355bad..0c5450092 100644
--- a/notebook/static/notebook/less/textcell.less
+++ b/notebook/static/notebook/less/textcell.less
@@ -48,8 +48,9 @@ h1,h2,h3,h4,h5,h6 {
     display:none;
 }
 
-.text_cell .droppable{
-  border: 1px solid #ff0000;
+.text_cell .dropzone .input_area {
+  border-color: #FCFF1E;
+  background-color: #FCFFE3;
 }
 
 .cm-header-1,