[FIX] web_editor: drop an image in the editable area

Issue: can't drop a image if the editor is not focused or if the editor is
empty

2 files changed, 21 insertions, 1 deletions

diff --git a/addons/web_editor/static/src/js/wysiwyg/plugin/dropzone.js b/addons/web_editor/static/src/js/wysiwyg/plugin/dropzone.js
index 8727a6aa8a1..3990ce4208e 100644
--- a/addons/web_editor/static/src/js/wysiwyg/plugin/dropzone.js
+++ b/addons/web_editor/static/src/js/wysiwyg/plugin/dropzone.js
@@ -19,6 +19,7 @@ var DropzonePlugin = Plugins.dropzone.extend({
     attachDragAndDropEvent: function () {
         this._super.apply(this, arguments);
         this.$dropzone.off('drop');
+        this.$dropzone.on('dragenter', this._onDragenter.bind(this));
         this.$dropzone.on('drop', this._onDrop.bind(this));
     },
 
@@ -71,7 +72,7 @@ var DropzonePlugin = Plugins.dropzone.extend({
                 if (range.so >= dom.nodeLength(range.sc)) {
                     $(range.sc).append(spinner);
                 } else {
-                    $(range.sc).before(range.sc.childNodes[range.so]);
+                    $(range.sc.childNodes[range.so]).before(spinner);
                 }
             } else {
                 range.sc.splitText(range.so);
@@ -159,9 +160,26 @@ var DropzonePlugin = Plugins.dropzone.extend({
      * @private
      * @param {JQueryEvent} e
      */
+    _onDragenter: function (e) {
+        var range = this.context.invoke('editor.createRange');
+        if (!this.editable.contains(range.sc)) {
+            var node = this.editable;
+            if (node && node.firstChild) {
+                node = node.firstChild;
+            }
+            range = this.context.invoke('editor.setRange', node, 0, node, 0);
+            range.select();
+        }
+    },
+    /**
+     * @private
+     * @param {JQueryEvent} e
+     */
     _onDrop: function (e) {
         e.preventDefault();
 
+        this.$editor.removeClass('dragover');
+
         if (this.options.disableDragAndDrop) {
             return;
         }
diff --git a/addons/web_editor/static/src/js/wysiwyg/plugin/media.js b/addons/web_editor/static/src/js/wysiwyg/plugin/media.js
index 1509a6412df..9ac36b2158a 100644
--- a/addons/web_editor/static/src/js/wysiwyg/plugin/media.js
+++ b/addons/web_editor/static/src/js/wysiwyg/plugin/media.js
@@ -43,6 +43,8 @@ var MediaPlugin = AbstractPlugin.extend({
         'dblclick .note-editable': '_onDblclick',
     },
 
+    mousePosition: {},
+
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------