How to listen to a paste event on a textarea in emberjs

Question

I have a component that holds the following template:

<div>
  {{textarea value=content autofocus="autofocus"}}
  <button {{action 'cancel'}}>cancel</button>
</div>

How can I listen to a paste event on this textarea in my component?

I tried to create a paste action but this doesn't seem to work:

App.EditableTextComponent = Ember.Component.extend({

  templateName: 'components/editable-text',

  actions: {
    paste: function() {
      console.log(arguments);
    }
  }

});

Answer 1

As @wojciech-bednarski suggest in his comment, I have added the custom event listener to my app:

var App = Ember.Application.create({
  customEvents: {
    paste: "paste"
  }
});

and could then listen to it in my component

App.EditableTextComponent = Ember.Component.extend({

  paste: function(event) {
    console.log(event)
  }

});

Answer 2

You can try something like,

App.EditableTextComponent = Ember.Component.extend({
  didInsertElement:function(){
    this._super();
    var self = this;
    this.$('textarea').on("paste",function(e){
      alert('you just pasted something');

/*to be more accurate when calculating the pasted value, 
you may need to get the current value of the textarea here 
and then remove it from the value retrieved inside setTimeout*/

      setTimeout(function () { 
/*the paste event is fired before the value has already been set, 
so this is handled here. 
Also mentioned here as a hacky solution, http://stackoverflow.com/questions/9494283/jquery-how-to-get-the-pasted-content*/
        alert("pasted:"+self.$('textarea').val()); 
    }, 100);
    });
  },
  templateName: 'components/editable-text'
});

http://emberjs.jsbin.com/EHejUfuj/1/edit