Merge pull request #10708 from adobe/pflynn/dragdrop-file-cm-fix

Fix bug #10617 (File drop icon only shown when outside editor)

src/brackets.js

@@ -370,36 +370,10 @@ define(function (require, exports, module) {
 
         // Update title
         $("title").text(brackets.config.app_title);
-
-        // Prevent unhandled drag and drop of files into the browser from replacing 
-        // the entire Brackets app. This doesn't prevent children from choosing to
-        // handle drops.
-        $(window.document.body)
-            .on("dragover", function (event) {
-                var dropEffect = "none";
-                if (event.originalEvent.dataTransfer.files) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    // Don't allow drag-and-drop of files/folders when a modal dialog is showing.
-                    if ($(".modal.instance").length === 0 &&
-                            DragAndDrop.isValidDrop(event.originalEvent.dataTransfer.items)) {
-                        dropEffect = "copy";
-                    }
-                    event.originalEvent.dataTransfer.dropEffect = dropEffect;
-                }
-            })
-            .on("drop", function (event) {
-                var files = event.originalEvent.dataTransfer.files;
-                if (files && files.length) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    brackets.app.getDroppedFiles(function (err, paths) {
-                        if (!err) {
-                            DragAndDrop.openDroppedFiles(paths);
-                        }
-                    });
-                }
-            });
+
+        // Respond to dragging & dropping files/folders onto the window by opening them. If we don't respond
+        // to these events, the file would load in place of the Brackets UI
+        DragAndDrop.attachHandlers();
 
         // TODO: (issue 269) to support IE, need to listen to document instead (and even then it may not work when focus is in an input field?)
         $(window).focus(function () {

src/utils/DragAndDrop.js

@@ -23,7 +23,7 @@
 
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, $ */
+/*global define, brackets, $ */
 
 define(function (require, exports, module) {
     "use strict";
@@ -149,9 +149,73 @@ define(function (require, exports, module) {
             });
     }
 
+
+    /**
+     * Attaches global drag & drop handlers to this window. This enables dropping files/folders to open them, and also
+     * protects the Brackets app from being replaced by the browser trying to load the dropped file in its place.
+     */
+    function attachHandlers() {
+
+        function handleDragOver(event) {
+            event = event.originalEvent || event;
+
+            var files = event.dataTransfer.files;
+            if (files && files.length) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var dropEffect = "none";
+
+                // Don't allow drag-and-drop of files/folders when a modal dialog is showing.
+                if ($(".modal.instance").length === 0 && isValidDrop(event.dataTransfer.items)) {
+                    dropEffect = "copy";
+                }
+                event.dataTransfer.dropEffect = dropEffect;
+            }
+        }
+
+        function handleDrop(event) {
+            event = event.originalEvent || event;
+
+            var files = event.dataTransfer.files;
+            if (files && files.length) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                brackets.app.getDroppedFiles(function (err, paths) {
+                    if (!err) {
+                        openDroppedFiles(paths);
+                    }
+                });
+            }
+        }
+
+        // For most of the window, only respond if nothing more specific in the UI has already grabbed the event (e.g.
+        // the Extension Manager drop-to-install zone, or an extension with a drop-to-upload zone in its panel)
+        $(window.document.body)
+            .on("dragover", handleDragOver)
+            .on("drop", handleDrop);
+
+        // Over CodeMirror specifically, always pre-empt CodeMirror's drag event handling if files are being dragged - CM stops
+        // propagation on any drag event it sees, even when it's not a text drag/drop. But allow CM to handle all non-file drag
+        // events. See bug #10617.
+        window.document.body.addEventListener("dragover", function (event) {
+            if ($(event.target).closest(".CodeMirror").length) {
+                handleDragOver(event);
+            }
+        }, true);
+        window.document.body.addEventListener("drop", function (event) {
+            if ($(event.target).closest(".CodeMirror").length) {
+                handleDrop(event);
+            }
+        }, true);
+    }
+
+
     CommandManager.register(Strings.CMD_OPEN_DROPPED_FILES, Commands.FILE_OPEN_DROPPED_FILES, openDroppedFiles);
 
     // Export public API
+    exports.attachHandlers      = attachHandlers;
     exports.isValidDrop         = isValidDrop;
     exports.openDroppedFiles    = openDroppedFiles;
 });