fixes mm-1250 mention highlights should now align in textbox

web/react/components/mention_list.jsx

@@ -14,7 +14,7 @@ module.exports = React.createClass({
         PostStore.addMentionDataChangeListener(this._onChange);
 
         var self = this;
-        $('#'+this.props.id).on('keypress.mentionlist',
+        $('body').on('keypress.mentionlist', '#'+this.props.id,
             function(e) {
                 if (!self.isEmpty() && self.state.mentionText != '-1' && e.which === 13) {
                     e.stopPropagation();
@@ -26,7 +26,7 @@ module.exports = React.createClass({
     },
     componentWillUnmount: function() {
         PostStore.removeMentionDataChangeListener(this._onChange);
-        $('#'+this.props.id).off('keypress.mentionlist');
+        $('body').off('keypress.mentionlist', '#'+this.props.id);
     },
     _onChange: function(id, mentionText, excludeList) {
         if (id !== this.props.id) return;

web/react/components/textbox.jsx

@@ -78,6 +78,8 @@ module.exports = React.createClass({
             var re = new RegExp('( |^)@' + m + '( |$|\n)', 'm');
             html = html.replace(re, '$1<span class="mention">@'+m+'</span>$2');
         }
+        var re2 = new RegExp('(^$)(?![.\n])', 'gm');
+        html = html.replace(re2, '<br/><br/>');
         $(this.refs.textdiv.getDOMNode()).html(html);
     },
     handleChange: function() {
@@ -262,6 +264,8 @@ module.exports = React.createClass({
             $(d).css({'height':'auto','overflow-y':'scroll'}).height(167);
             $(w).css({'height':'auto'}).height(167);
         }
+
+        $(d).scrollTop($(e).scrollTop());
     },
     handleFocus: function() {
         var elm = this.refs.message.getDOMNode();