Fix for mouseleave not being triggered during resize

[MAILPOET-1819]

assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js

@@ -10,11 +10,28 @@ BL.HighlightEditingBehavior = Marionette.Behavior.extend({
   modelEvents: {
     startEditing: 'onStartEditing',
     stopEditing: 'onStopEditing',
+    resizeMove: 'onResizeMove',
   },
   events: {
     mouseenter: 'onMouseEnter',
     mouseleave: 'onMouseLeave',
   },
+  // mouseleave event is not always triggered during resizing
+  // so we have to check if the pointer is still inside using resize event coordinates
+  onResizeMove: function onResizeMove(event) {
+    var offset = this.view.$el.offset();
+    var height = this.view.$el.height();
+    var width = this.view.$el.width();
+    if (event.pageX < offset.left
+      || event.pageX > offset.left + width
+      || event.pageY < offset.top
+      || event.pageY > offset.top + height
+    ) {
+      this.isFocusedByPointer = false;
+    } else {
+      this.isFocusedByPointer = true;
+    }
+  },
   onMouseEnter: function onMouseEnter(mouseEvent) {
     this.isFocusedByPointer = true;
     // Ignore mouse events when dragging

assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js

@@ -59,6 +59,7 @@ BL.ResizableBehavior = Marionette.Behavior.extend({
         that.$el.addClass('mailpoet_resize_active');
       }).on('resizemove', function resizemove(event) {
         var onResize = that.options.onResize.bind(that);
+        that.view.model.trigger('resizeMove', event);
         return onResize(event);
       })
       .on('resizeend', function resizeend() {