JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html ng-app="demo">
 <script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
    
 <script>
  angular.module('demo',[]).
     directive('clickToggle', function($parse, $document) {;;
       return function(scope, element, attrs) {
         var setter = $parse(attrs.clickToggle).assign;
     
           setter(scope, false);
     
         element.bind('click', toggleOn);
         element.bind('$destroy', function(){
           element.unbind('click', toggleOn);
           $document.unbind('click', toggleOff);
         });
     
         function toggleOn(event) {
           scope.$apply(function(){
               setter(scope, true);
               element.unbind('click', toggleOn);
               $document.bind('click', toggleOff);
               event.stopPropagation();
           });
         }
     
         function toggleOff(event) {
           scope.$apply(function(){
               setter(scope, false);
               element.bind('click', toggleOn);
               $document.unbind('click', toggleOff);
           });
         }
       }
     });
     
  function XCtrl($scope) {
    $scope.messages = [{name:"aaa"},{name:"bbb"}];
  }
 </script>
    
 <body>

 <div ng-controller="XCtrl">
  <div ng-repeat="m in messages">
        {{editorEnabled}}
      <div ng-switch="editorEnabled" click-toggle="editorEnabled">
        <div ng-switch-when="false">{{m.name}}</div>
        <textarea ng-switch-when="true" ng-model="m.name"></textarea>
     </div>
  </div>
 </div>
</body>
</html>