JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<textarea rows="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at enim justo. Phasellus at nulla pharetra, lacinia metus ut, varius purus. Aliquam ligula enim, sagittis vitae volutpat vel, dictum vel dui. Nulla facilisi. Proin lacinia nunc ex, ac elementum velit vestibulum sit amet. Praesent facilisis, neque sed vehicula fermentum, justo nisl aliquet risus, facilisis lacinia ligula nibh eu dui. Sed eros ex, aliquam ac elit pretium, facilisis eleifend mi. Curabitur augue quam, facilisis in semper pulvinar, faucibus vitae nisl. Ut finibus fringilla magna vehicula sodales. Phasellus laoreet urna et lorem ultricies, sit amet porta dui placerat.

Nulla ut maximus enim, fermentum maximus sapien. Curabitur ut risus faucibus nulla vulputate consequat. Pellentesque egestas eu dui vitae vulputate. Sed a congue mauris. Nunc convallis imperdiet iaculis. Fusce ultricies justo sit amet enim imperdiet porttitor. Maecenas libero orci, cursus at nisi a, commodo egestas enim.</textarea>
<button type="text">Add Text</button>

CSS

body {
  padding: 20px;
}
textarea {
  border-radius: 4px;
  display: block;
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
}

JavaScript

!function (e, t) { e.fn.insertAtCaret = function (e) { return this.each(function () { var a, n, o, r, c = this, l = 0, s = 0, i = "selectionStart" in c && "selectionEnd" in c; (c.tagName && "textarea" === c.tagName.toLowerCase() || c.tagName && "input" === c.tagName.toLowerCase() && "text" === c.type.toLowerCase()) && (a = c.scrollTop, i ? (l = c.selectionStart, s = c.selectionEnd) : (c.focus(), (r = t.selection.createRange()).moveStart("character", -c.value.length), l = r.text.length), s < l && (s = l), n = c.value.substring(0, l), o = c.value.substring(s, c.value.length), c.value = n + e + o, l += e.length, i ? (c.selectionStart = l, c.selectionEnd = l) : ((r = t.selection.createRange()).moveStart("character", l), r.moveEnd("character", 0), r.select()), c.scrollTop = a) }) } }(jQuery, document, window);
jQuery(function($) {
  $(document).on('click', 'button', function(e) {
  	$('textarea').insertAtCaret('---test---');
  });
});