JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true">Lorem ipsum dolor sit amet</div>

CSS

div{
    background: skyblue;
    padding:10px;
}

JavaScript

$('div[contenteditable="true"]').keypress(function(event) {
	if ((event.which == 13 || event.which == 10) && !event.ctrlKey) {
  	event.preventDefault();
    return false;
  }
	else if ((event.which == 13 || event.which == 10) && event.ctrlKey) {
    var docFragment = document.createDocumentFragment();

    //add a new line
    var newEle = document.createTextNode('\n');
    docFragment.appendChild(newEle);

    //add the br, or p, or something else
    newEle = document.createElement('br');
    docFragment.appendChild(newEle);

    //make the br replace selection
    var range = window.getSelection().getRangeAt(0);
    range.deleteContents();
    range.insertNode(docFragment);

    //create a new range
    range = document.createRange();
    range.setStartAfter(newEle);
    range.collapse(true);

    //make the cursor there
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);

    return false;
  }
});