<NME> Handle.js
<BEF> define([
  'materialnote/base/core/dom'
], function (dom) {
  var Handle = function (context) {
    var self = this;

    var $document = $(document);
    var $editingArea = context.layoutInfo.editingArea;
    var options = context.options;

    this.events = {
      'materialnote.mousedown': function (we, e) {
        if (self.update(e.target)) {
          e.preventDefault();
        }
      },
      'materialnote.keyup materialnote.scroll materialnote.change materialnote.dialog.shown': function () {
        self.update();
      },
      'materialnote.disable': function () {
        self.hide();
      }
    };

    this.initialize = function () {
      this.$handle = $([
        '<div class="note-handle">',
        '<div class="note-control-selection">',
        '<div class="note-control-selection-bg"></div>',
        '<div class="note-control-holder note-control-nw"></div>',
        '<div class="note-control-holder note-control-ne"></div>',
        '<div class="note-control-holder note-control-sw"></div>',
        '<div class="',
        (options.disableResizeImage ? 'note-control-holder' : 'note-control-sizing'),
        ' note-control-se"></div>',
        (options.disableResizeImage ? '' : '<div class="note-control-selection-info"></div>'),
        '</div>',
        '</div>'
      ].join('')).prependTo($editingArea);

      this.$handle.on('mousedown', function (event) {
        if (dom.isControlSizing(event.target)) {
          event.preventDefault();
          event.stopPropagation();

          var $target = self.$handle.find('.note-control-selection').data('target'),
              posStart = $target.offset(),
              scrollTop = $document.scrollTop();

          var onMouseMove = function (event) {
            context.invoke('editor.resizeTo', {
              x: event.clientX - posStart.left,
              y: event.clientY - (posStart.top - scrollTop)
            }, $target, !event.shiftKey);

            self.update($target[0]);
          };

          $document
            .on('mousemove', onMouseMove)
            .one('mouseup', function (e) {
              e.preventDefault();
              $document.off('mousemove', onMouseMove);
              context.invoke('editor.afterCommand');
            });

          if (!$target.data('ratio')) { // original ratio.
            $target.data('ratio', $target.height() / $target.width());
          }
        }
      });
    };

    this.destroy = function () {
      this.$handle.remove();
    };

    this.update = function (target) {
      if (context.isDisabled()) {
        return false;
      }

      var isImage = dom.isImg(target);
      var $selection = this.$handle.find('.note-control-selection');

      context.invoke('imagePopover.update', target);

      if (isImage) {
        var $image = $(target);
        var pos = $image.position();

        // include margin
        var imageSize = {
          w: $image.outerWidth(true),
          h: $image.outerHeight(true)
        };

        $selection.css({
          display: 'block',
          left: pos.left,
          top: pos.top,
          width: imageSize.w,
          height: imageSize.h
        }).data('target', $image); // save current image element.

        var sizingText = imageSize.w + 'x' + imageSize.h;
        $selection.find('.note-control-selection-info').text(sizingText);
        context.invoke('editor.saveTarget', target);
      } else {
        this.hide();
      }

      return isImage;
    };

    /**
     * hide
     *
     * @param {jQuery} $handle
     */
    this.hide = function () {
      context.invoke('editor.clearTarget');
      this.$handle.children().hide();
    };
  };

  return Handle;
});

    return Handle;
});

<MSG> fixed imagePopover position to avoid displaying it outside of note-editable area

<DFF> @@ -1,128 +1,128 @@
 define([
-  'materialnote/base/core/dom'
+    'materialnote/base/core/dom'
 ], function (dom) {
-  var Handle = function (context) {
-    var self = this;
-
-    var $document = $(document);
-    var $editingArea = context.layoutInfo.editingArea;
-    var options = context.options;
-
-    this.events = {
-      'materialnote.mousedown': function (we, e) {
-        if (self.update(e.target)) {
-          e.preventDefault();
-        }
-      },
-      'materialnote.keyup materialnote.scroll materialnote.change materialnote.dialog.shown': function () {
-        self.update();
-      },
-      'materialnote.disable': function () {
-        self.hide();
-      }
-    };
+    var Handle = function (context) {
+        var self = this;
+
+        var $document = $(document);
+        var $editingArea = context.layoutInfo.editingArea;
+        var options = context.options;
+
+        this.events = {
+            'materialnote.mousedown': function (we, e) {
+                if (self.update(e.target)) {
+                    e.preventDefault();
+                }
+            },
+            'materialnote.keyup materialnote.scroll materialnote.change materialnote.dialog.shown': function () {
+                self.update();
+            },
+            'materialnote.disable': function () {
+                self.hide();
+            }
+        };
 
-    this.initialize = function () {
-      this.$handle = $([
-        '<div class="note-handle">',
-        '<div class="note-control-selection">',
-        '<div class="note-control-selection-bg"></div>',
-        '<div class="note-control-holder note-control-nw"></div>',
-        '<div class="note-control-holder note-control-ne"></div>',
-        '<div class="note-control-holder note-control-sw"></div>',
-        '<div class="',
-        (options.disableResizeImage ? 'note-control-holder' : 'note-control-sizing'),
-        ' note-control-se"></div>',
-        (options.disableResizeImage ? '' : '<div class="note-control-selection-info"></div>'),
-        '</div>',
-        '</div>'
-      ].join('')).prependTo($editingArea);
-
-      this.$handle.on('mousedown', function (event) {
-        if (dom.isControlSizing(event.target)) {
-          event.preventDefault();
-          event.stopPropagation();
-
-          var $target = self.$handle.find('.note-control-selection').data('target'),
-              posStart = $target.offset(),
-              scrollTop = $document.scrollTop();
-
-          var onMouseMove = function (event) {
-            context.invoke('editor.resizeTo', {
-              x: event.clientX - posStart.left,
-              y: event.clientY - (posStart.top - scrollTop)
-            }, $target, !event.shiftKey);
-
-            self.update($target[0]);
-          };
-
-          $document
-            .on('mousemove', onMouseMove)
-            .one('mouseup', function (e) {
-              e.preventDefault();
-              $document.off('mousemove', onMouseMove);
-              context.invoke('editor.afterCommand');
+        this.initialize = function () {
+            this.$handle = $([
+                '<div class="note-handle">',
+                '<div class="note-control-selection">',
+                '<div class="note-control-selection-bg"></div>',
+                '<div class="note-control-holder note-control-nw"></div>',
+                '<div class="note-control-holder note-control-ne"></div>',
+                '<div class="note-control-holder note-control-sw"></div>',
+                '<div class="',
+                (options.disableResizeImage ? 'note-control-holder' : 'note-control-sizing'),
+                ' note-control-se"></div>',
+                (options.disableResizeImage ? '' : '<div class="note-control-selection-info"></div>'),
+                '</div>',
+                '</div>'
+            ].join('')).prependTo($editingArea);
+
+            this.$handle.on('mousedown', function (event) {
+                if (dom.isControlSizing(event.target)) {
+                    event.preventDefault();
+                    event.stopPropagation();
+
+                    var $target = self.$handle.find('.note-control-selection').data('target'),
+                    posStart = $target.offset(),
+                    scrollTop = $document.scrollTop();
+
+                    var onMouseMove = function (event) {
+                        context.invoke('editor.resizeTo', {
+                            x: event.clientX - posStart.left,
+                            y: event.clientY - (posStart.top - scrollTop)
+                        }, $target, !event.shiftKey);
+
+                        self.update($target[0]);
+                    };
+
+                    $document
+                    .on('mousemove', onMouseMove)
+                    .one('mouseup', function (e) {
+                        e.preventDefault();
+                        $document.off('mousemove', onMouseMove);
+                        context.invoke('editor.afterCommand');
+                    });
+
+                    if (!$target.data('ratio')) { // original ratio.
+                        $target.data('ratio', $target.height() / $target.width());
+                    }
+                }
             });
+        };
 
-          if (!$target.data('ratio')) { // original ratio.
-            $target.data('ratio', $target.height() / $target.width());
-          }
-        }
-      });
-    };
-
-    this.destroy = function () {
-      this.$handle.remove();
-    };
-
-    this.update = function (target) {
-      if (context.isDisabled()) {
-        return false;
-      }
-
-      var isImage = dom.isImg(target);
-      var $selection = this.$handle.find('.note-control-selection');
-
-      context.invoke('imagePopover.update', target);
-
-      if (isImage) {
-        var $image = $(target);
-        var pos = $image.position();
-
-        // include margin
-        var imageSize = {
-          w: $image.outerWidth(true),
-          h: $image.outerHeight(true)
+        this.destroy = function () {
+            this.$handle.remove();
         };
 
-        $selection.css({
-          display: 'block',
-          left: pos.left,
-          top: pos.top,
-          width: imageSize.w,
-          height: imageSize.h
-        }).data('target', $image); // save current image element.
-
-        var sizingText = imageSize.w + 'x' + imageSize.h;
-        $selection.find('.note-control-selection-info').text(sizingText);
-        context.invoke('editor.saveTarget', target);
-      } else {
-        this.hide();
-      }
-
-      return isImage;
-    };
+        this.update = function (target) {
+            if (context.isDisabled()) {
+                return false;
+            }
+            
+            var isImage = dom.isImg(target);
+            var $selection = this.$handle.find('.note-control-selection');
+
+            context.invoke('imagePopover.update', target);
+
+            if (isImage) {
+                var $image = $(target);
+                var pos = $image.position();
+
+                // include margin
+                var imageSize = {
+                    w: $image.outerWidth(true),
+                    h: $image.outerHeight(true)
+                };
+
+                $selection.css({
+                    display: 'block',
+                    left: pos.left,
+                    top: pos.top,
+                    width: imageSize.w,
+                    height: imageSize.h
+                }).data('target', $image); // save current image element.
+
+                var sizingText = imageSize.w + 'x' + imageSize.h;
+                $selection.find('.note-control-selection-info').text(sizingText);
+                context.invoke('editor.saveTarget', target);
+            } else {
+                this.hide();
+            }
+
+            return isImage;
+        };
 
-    /**
-     * hide
-     *
-     * @param {jQuery} $handle
-     */
-    this.hide = function () {
-      context.invoke('editor.clearTarget');
-      this.$handle.children().hide();
+        /**
+        * hide
+        *
+        * @param {jQuery} $handle
+        */
+        this.hide = function () {
+            context.invoke('editor.clearTarget');
+            this.$handle.children().hide();
+        };
     };
-  };
 
-  return Handle;
+    return Handle;
 });

fixed imagePopover position to avoid displaying it outside of note-editable area