From 7b974946ffc21d94dc65a4654b3d325fdbec8411 Mon Sep 17 00:00:00 2001
From: Julien Rebetez <julien@fhtagn.net>
Date: Fri, 11 Mar 2016 20:17:34 +0100
Subject: [PATCH] Add a visual indicator that a drop is possible when dragging
 an image on a markdown cells

---
 bower.json                                  |  2 +-
 notebook/static/notebook/js/textcell.js     | 23 +++++++++++++++++++++
 notebook/static/notebook/less/textcell.less |  4 ++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index 114b4ab1a..82b552ec7 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": "~5.8",
+    "codemirror": "julienr/CodeMirror#fix_dragleave",
     "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 c6772b9fc..b9b376a24 100644
--- a/notebook/static/notebook/js/textcell.js
+++ b/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];
diff --git a/notebook/static/notebook/less/textcell.less b/notebook/static/notebook/less/textcell.less
index 6e3f6ee85..d7e355bad 100644
--- a/notebook/static/notebook/less/textcell.less
+++ b/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,