詰まってしまって困っているので質問させてください；；

AngularJSで編集可能なフィールドをつくり、Todoリスト名とTodoの内容を更新できるようにしたく、Editableなライブラリとして、mkwidzinska/editablespan を採用しています。

editablespanタグで囲まれたテキストをクリックするとinputタグに置き換えられ変更可能になり、エンターキーで変更が確定されDBに保存させるところまでは実装できているのですが、できれば、inputタグではなくtextareaタグで同様のことを実現させたいです。

残念ながら仕様ではinputにしか対応しておらず、、配布元の、mkwidzinska/editablespanのドキュメントを読みJSFiddleでコードを変更しながらなんとか、テキストをクリックするとtextareaタグに置き換わるところまでは実現させることができたのですが、Enterを押すと改行になってしまい、変更が確定されません。

こちらの　test shift+enter with angularjs - CodePen も参考にしながら試行錯誤しているのですがどうしても実現させることがきなかったので質問させていただきました。どうかよろしくお願いいたします。

// directive code, scroll down for the controller!

/* mk.editablespan - v1.0.0 - 2013-08-26 */
var mod=angular.module("mk.editablespan",[]);mod.directive("editablespan",function(){return{restrict:"E",template:'<div><span ng-hide="editing" ng-class="spanClass">{{text}}</span><form ng-show="editing"><textarea  ng-class="inputClass"></textarea></form><div>',scope:{text:"=model",onReady:"&",spanClass:"@",inputClass:"@"},replace:!0,link:function(a,b){function c(){d(),h(!0),l[0].focus()}function d(){l.bind("blur",function(){f()}),l.bind("keyup",function(a){i(a)&&f()}),k.bind("submit",function(){l[0].value&&e(),f()})}function e(){a.text=l[0].value,a.$apply(),a.onReady()}function f(){g(),h(!1)}function g(){l.unbind(),k.unbind()}function h(b){a.editing=b,a.$apply()}function i(a){return a&&27==a.keyCode}var j=angular.element(b.children()[0]),k=angular.element(b.children()[1]),l=angular.element(b.children()[1][0]);j.bind("click",function(){l[0].value=a.text,c()})}}});

//---------------------------------------------------------

var app = angular.module('editApp', ['mk.editablespan']);

app.controller('editController', function($scope) {
  $scope.item = {description: "This is a new item"};
  $scope.message = "";

  $scope.onReady = function(item) {
    $scope.message = "controller: edit ready, item description: " + item.description;
  };
});