JSFiddle - React, Tailwind, and code Playground

by icaca

HTML

<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor veniam asperiores laudantium repudiandae doloremque sed perferendis obcaecati delectus autem perspiciatis aut excepturi et nesciunt error ad incidunt impedit quia dolores rerum animi provident
  dolore corporis libero sunt enim. Ad magnam omnis quidem qui voluptas ut minima similique obcaecati doloremque atque!
  <br><br> Type some stuff, hit ENTER a few times, then press the button.
</div>
<pre></pre>
<button>Show Source</button>

CSS

div {
  background: skyblue;
}

pre {
  white-space: pre-wrap;
  background: #EEE;
}

JavaScript

$('button').click(function() {
  $('pre').text($('div')[0].outerHTML)
});


$('div[contenteditable="true"]').keypress(function(e) {

  console.log(e.keyCode)

  if (e.keyCode == 13 && !e.ctrlKey) {
    console.log("enter")
    e.preventDefault();
    return false;
  } else if (e.keyCode == 10 || (e.keyCode == 13 && e.ctrlKey)) {
    console.log("ctrl + enter");
    e.preventDefault();


    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;
  }
}).keyup(function() {
  if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
    this.appendChild(document.createElement("br"));
  }
})