JSFiddle - React, Tailwind, and code Playground

by Znarkus

HTML

<h1>Click in the text</h1>
<textarea rows=10 cols=50>aliwdjiwaold
awdoiuaweoiuawe
awoeuowaiue
awoieuqiljwelqwekqwjeli qwjilejiqlwje</textarea>

JavaScript

// http://stackoverflow.com/questions/11076975/insert-text-into-textarea-at-cursor-position-javascript

function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    //MOZILLA and others
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
        myField.selectionStart = startPos + myValue.length;
        myField.selectionEnd = startPos + myValue.length;
    } else {
        myField.value += myValue;
    }
}

$('textarea').click(function () {
    var $t = $(this);
    insertAtCursor(this, '[INSERTED]');
});