JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/js/jquery.autogrow.js"></script>
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.autogrow.js"></script>
<div class='editable'></div>
CSS
div.editable {
width: 100%;
min-height: 100px;
background-color: lightgray;
}
div.editable > textarea {
resize: none;
border: none;
outline: none;
height: 100%;
}
JavaScript
$(".editable").editable(function(content,settings){
content = content.replace(/\n/gi,"<br />");
return content;
},{
data: function(value, settings) {
return value.replace(/<br[\s\/]?>/gi, '\n');
},
type: "datepicker",
onblur: "submit"
});