Add a visual indicator that a drop is possible when dragging an image on a markdown cells

bower.json

@@ -5,7 +5,7 @@
     "backbone": "components/backbone#~1.2",
     "bootstrap": "components/bootstrap#~3.3",
     "bootstrap-tour": "0.9.0",
-    "codemirror": "~5.8",
+    "codemirror": "julienr/CodeMirror#fix_dragleave",
     "es6-promise": "~1.0",
     "font-awesome": "components/font-awesome#~4.2.0",
     "google-caja": "5669",

notebook/static/notebook/js/textcell.js

@@ -110,6 +110,7 @@ define([
         inner_cell.append(input_area).append(render_area);
         cell.append(inner_cell);
         this.element = cell;
+        this.inner_cell = inner_cell;
     };
 
 
@@ -282,6 +283,9 @@ define([
         TextCell.apply(this, [$.extend({}, options, {config: config})]);
 
         this.cell_type = 'markdown';
+
+        // Used to keep track of drag events
+        this.drag_counter = 0;
     };
 
     MarkdownCell.options_default = {
@@ -461,7 +465,26 @@ 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.code_mirror.on("dragenter", function(cm, evt) {
+          that.drag_counter++;
+          that.inner_cell.addClass('droppable');
+          evt.preventDefault();
+        });
+
+        this.code_mirror.on("dragleave", function(cm, evt) {
+          that.drag_counter--;
+          if (that.drag_counter === 0) {
+            that.inner_cell.removeClass('droppable');
+          }
+        });
+
         this.code_mirror.on("drop", function(cm, evt) {
+          that.inner_cell.removeClass('droppable');
             var files = evt.dataTransfer.files;
             for (var i = 0; i < files.length; ++i) {
                 var file = files[i];

notebook/static/notebook/less/textcell.less

@@ -48,6 +48,10 @@ h1,h2,h3,h4,h5,h6 {
     display:none;
 }
 
+.text_cell .droppable{
+  border: 1px solid #ff0000;
+}
+
 .cm-header-1,
 .cm-header-2,
 .cm-header-3,