component.hbs

<div class="input-container">
    {{content-editable value=message
                       placeholder="Type a message"
                       type="text"
                       maxlength=500
                       on-paste="paste"
                       on-input="input"
                       spellcheck=false}}
</div>

 
<button {{action "addMessage" message}} class="icon-message"></button>

component.js

import Ember from 'ember';

export default Ember.Component.extend({


  actions: {
    addMessage(message) {
      // Clear input.
      this.set('message', '');

      // Focus back to input.
      this.$('.ember-content-editable').focus();

      // Replace new lines with <br>.
      message = message.replace(/(?:\r\n|\r|\n)/g, '<br>');

      // Send action up to router.
      this.sendAction('addMessage', message);

    },


    // On content editable paste we check if we have text to send
    // and show the `send` button accordingly.
    paste(newContent) {
      this.send('input', newContent);
    },

    // Same thing for input change.
    input(newContent) {
      var isEmpty = newContent.match(/^\s+$/) || newContent === '';
      this.set('shouldShowSendButton', !isEmpty);
    },
  },
});