Improved composer: content editable

Fixed stickers send delay

app/js/directives.js

@@ -1082,10 +1082,14 @@ angular.module('myApp.directives', ['myApp.filters'])
           });
         },
         onEmojiSelected: function (code) {
+          $scope.$apply(function () {
             composer.onEmojiSelected(code);
+          })
         },
         onStickerSelected: function (docID) {
+          $scope.$apply(function () {
             $scope.draftMessage.sticker = docID;
+          });
         }
       });
 

app/js/lib/utils.js

@@ -112,6 +112,51 @@ function getFieldSelection (field) {
   return len;
 }
 
+function getFieldValue(field) {
+  if (!field) {
+    return '';
+  }
+  if (field.tagName == 'INPUT' || field.tagName == 'TEXTAREA') {
+    return field.value;
+  }
+  var lines = [];
+  var line = [];
+  getFieldElementValue(field, lines, line);
+  if (line.length) {
+    lines.push(line.join(''));
+  }
+  return lines.join('\n');
+}
+
+function getFieldElementValue(node, lines, line) {
+  if (node.nodeType == 3) { // TEXT
+    line.push(node.nodeValue);
+    return;
+  }
+  if (node.nodeType != 1) { // NON-ELEMENT
+    return;
+  }
+  var isBlock = node.tagName == 'DIV' || node.tagName == 'P';
+  var curChild;
+  if (isBlock && line.length || node.tagName == 'BR') {
+    lines.push(line.join(''));
+    line.splice(0, line.length);
+  }
+  else if (node.tagName == 'IMG') {
+    if (node.alt) {
+      line.push(node.alt);
+    }
+  }
+  var curChild = node.firstChild;
+  while (curChild) {
+    getFieldElementValue(curChild, lines, line);
+    curChild = curChild.nextSibling;
+  }
+  if (isBlock && line.length) {
+    lines.push(line.join(''));
+    line.splice(0, line.length);
+  }
+}
 
 function onContentLoaded (cb) {
   setTimeout(cb, 0);

app/js/message_composer.js

@@ -380,8 +380,9 @@ EmojiPanel.prototype.update = function () {
 function MessageComposer (textarea, options) {
   this.textareaEl = $(textarea);
 
-  this.textareaEl.on('keyup keydown', this.onKeyEvent.bind(this));
-  this.textareaEl.on('focus blur', this.onFocusBlur.bind(this));
+  this.setUpInput();
+  // this.textareaEl.on('keyup keydown', this.onKeyEvent.bind(this));
+  // this.textareaEl.on('focus blur', this.onFocusBlur.bind(this));
 
   this.autoCompleteEl = $('<ul class="composer_dropdown dropdown-menu"></ul>').appendTo(document.body);
 
@@ -404,6 +405,29 @@ function MessageComposer (textarea, options) {
   this.isActive = false;
 }
 
+MessageComposer.prototype.setUpInput = function () {
+  if ('contentEditable' in document.body) {
+    this.setUpContenteditable();
+  } else {
+    this.setUpPlaintext();
+  }
+}
+
+MessageComposer.prototype.setUpContenteditable = function () {
+  this.textareaEl.hide();
+  this.contentEditableEl = $('<div class="composer_rich_textarea" contenteditable="true"></div>');
+
+  this.textareaEl[0].parentNode.insertBefore(this.contentEditableEl[0], this.textareaEl[0]);
+
+  this.contentEditableEl.on('keyup keydown', this.onKeyEvent.bind(this));
+  this.contentEditableEl.on('focus blur', this.onFocusBlur.bind(this));
+}
+
+MessageComposer.prototype.setUpPlaintext = function () {
+  this.textareaEl.on('keyup keydown', this.onKeyEvent.bind(this));
+  this.textareaEl.on('focus blur', this.onFocusBlur.bind(this));
+}
+
 MessageComposer.prototype.onKeyEvent = function (e) {
   var self = this;
   if (e.type == 'keyup') {
@@ -445,9 +469,12 @@ MessageComposer.prototype.onKeyEvent = function (e) {
 }
 
 MessageComposer.prototype.checkAutocomplete = function () {
-  var textarea = this.textareaEl[0];
+  var textarea = this.contentEditableEl ? this.contentEditableEl[0] : this.textareaEl;
   var pos = getFieldSelection(textarea);
-  var value = this.textareaEl[0].value.substr(0, pos);
+  var value = getFieldValue(textarea).substr(0, pos);
+
+  console.log(pos, value);
+
   var matches = value.match(/:([A-Za-z_0-z\+-]*)$/);
   if (matches) {
     if (this.previousQuery == matches[0]) {