JSFiddle - React, Tailwind, and code Playground

by Neil Kalman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p contenteditable="true">
  This content should be edtiable,<br>
  and when selecting text and clicking the button,<br>
  the text should get colored and NOT mess up newlines
</p>

<button>
color selection and keep linebreaks
</button>

CSS

p {
  background: #212121;
  color: white;
  padding: 10px;
}

JavaScript

$('button').click(() => {
  var sel = window.getSelection();

  var range = sel.getRangeAt(0);

  var selectedText = getSelection().toString();

  document.execCommand("delete");

  var newNode = document.createElement("span");

  newNode.innerHTML = selectedText.replace(/(?:\r\n|\r|\n)/g, '<br />');
  newNode.style.color = 'purple';

  range.insertNode(newNode);

  range.setStart(newNode, 0)
  range.setEnd(newNode, newNode.childNodes.length);

  sel.removeAllRanges;
  sel.addRange(range);
});