JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="sillyTextarea"></textarea>

CSS

textarea { font-family:Tahoma; width:500px; height:500px; background:#f1f1f1; }

JavaScript

$('#sillyTextarea').keydown(function (e) {
        
        if (e.keyCode === 10 || e.keyCode  == 13 && e.ctrlKey) {
            // Ctrl-Enter pressed
            // keyCode 10 is actually for Chrome (whacky I know...)
            
            var el = document.getElementById('sillyTextarea'),
                allText = $(this).val(),
                currentPos = getCaret(el),
                beforeText = allText.substr(0, currentPos),
                afterText = allText.substr(currentPos);
            
            $(this).val(beforeText + '\n' + afterText);
            
            setCaretPosition(el, currentPos);
        }
    });



function getCaret(el) { 
    if (el.selectionStart) { 
        return el.selectionStart; 
    } 
    
    // ^ Above doesn't work in IE - Fix below
    else if (document.selection) { 
        el.focus(); 
    
        var r = document.selection.createRange(); 
        if (r == null) { 
          return 0; 
        } 
    
        var re = el.createTextRange(), 
            rc = re.duplicate(); 
        re.moveToBookmark(r.getBookmark()); 
        rc.setEndPoint('EndToStart', re); 
    
        return rc.text.length; 
    }  
    
    return 0; 
}


function setCaretPosition(el, caretPos) {

    if(el != null) {
        if(el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(el.selectionStart) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
            }
            else
                el.focus();
        }
    }
}