Allow line breaks in messages. Closes issue #291

Line breaks can now be insterted into message box using Shift+Enter or Alt+Enter. Messages with new lines are properly displayed in the conversation view (but only there, to keep inbox clean). The template was modified to allow HTML, but the message itself is sanitized before new line handling is run.

background.html

@@ -65,7 +65,7 @@
       {{> avatar }}
       <div class="bubble">
           <div class='attachments'></div>
-          <p class="content">{{ message }}</p>
+          <p class="content">{{& message }}</p>
           <div class='meta'>
             <span class='timestamp'>{{ timestamp }}</span>
             <span class='checkmark hide'>✓</span>

js/views/conversation_view.js

@@ -210,7 +210,7 @@
         updateMessageFieldSize: function (event) {
             var keyCode = event.which || event.keyCode;
 
-            if (keyCode === 13) {
+            if (keyCode === 13 && !event.altKey && !event.shiftKey) {
                 // enter pressed - submit the form now
                 event.preventDefault();
                 return this.$('.bottom-bar form').submit();

js/views/message_view.js

@@ -55,11 +55,16 @@
         autoLink: function(text) {
             return text.replace(/(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi, "$1<a href='$2' target='_blank'>$2</a>");
         },
+        sanitizeMessage: function (message) {
+            var element = document.createElement('span');
+            element.innerText = message;
+            return element.innerHTML.trim().replace(/\n/g, '<br>');
+        },
         render: function() {
             var contact = this.model.getContact();
             this.$el.html(
                 Mustache.render(this.template, {
-                    message: this.model.get('body'),
+                    message: this.sanitizeMessage(this.model.get('body')),
                     timestamp: moment(this.model.get('sent_at')).fromNow(),
                     sender: (contact && contact.getTitle()) || '',
                     avatar: (contact && contact.getAvatar())