JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<button>
  Apply Bullet Point to Selected Text
</button>

<p contenteditable="true">
  Text Text
</p>

<br>

<p contenteditable="true">
  Text Text
</p>

JavaScript

$('button').on("click", function(e) {
  var selected = getSelection();
  var range = selected.getRangeAt(0);
  if (selected.toString().length > 1) {
    var newNode = document.createElement("li");
    //newNode.setAttribute("class", "red");
    range.surroundContents(newNode);
  }
  selected.removeAllRanges();
});

function getSelection() {
  var seltxt = '';
  if (window.getSelection) {
    seltxt = window.getSelection();
  } else if (document.getSelection) {
    seltxt = document.getSelection();
  } else if (document.selection) {
    seltxt = document.selection.createRange().text;
  } else return;
  return seltxt;
}