JSFiddle - React, Tailwind, and code Playground

by Gowtham Reddy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.8/angular-sanitize.min.js"></script>
<body ng-app="MyApp">

<div ng-controller="demo">
   <h4>Content Editable</h4>
  <div contenteditable ng-model="text"></div>
  <ul>
    <li ng-repeat="item in list" class="question_item" style="display: flex">
    <div style="display: flex">
       <span>{{$index+ 1}}) </span>
      <div  contenteditable ng-model="item.text"></div>
    </div>
      <button class="btn btn-primary" ng-click="useQuestion(item)">use</button>
    </li>
  </ul>
  
  <h4>
    Selected Questions
  </h4>
  
  <!-- <pre>{{selectedQuestions | json}}</pre> -->
  
  <ul>
    <li ng-repeat="question in selectedQuestions">
      <span ng-bind-html="question"></span>
    </li>
  </ul>
</div>
 
  <br>
</body>

SCSS

[contenteditable] {
  outline: none;
  padding-left: 5px;

  &:focus{
    border-bottom: 1px solid grey;
    min-width:200px;
    
  } 
}  
li{
  list-style : none;
  display: flex;
  justify-content: space-between;
  margin: 5px 0px;
}
input {
  border : none;
  border-bottom: 1px solid grey;
  outline: none;
}

JavaScript

var app = angular.module("MyApp", ['ngSanitize']);

app.directive("contenteditable", function() {
  return {
    restrict: "A",
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {

			

      function read() {
        ngModel.$setViewValue(element.html());
      }

      ngModel.$render = function() {
        element.html(ngModel.$viewValue || "");
      };

      element.bind("blur keyup change", function() {
        scope.$apply(read);
      });
    }
  };
});

app.controller('demo',function($scope, $sce){

		$scope.list = [
      {   
      "text" : 'Are you able to relocate <input  type"text" ng-model="name" name="name"/>'
            },
        {
				"text" : "Do you have any certification <b>bklnkdaf</b>"
				},{
				"text" : 'Do you have a valid passport'
				}]
        $scope.selectedQuestions = [];
        $scope.useQuestion = function(question){
        	var ele = $sce.trustAsHtml(question.text);
        		$scope.selectedQuestions.push(ele);
        }
})