JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>Replace selection example</title>
  </head>

  <body>
    <div>AA BB CC</div>
    <div class="editable" contenteditable="true">
      [[ another editable area ]]
    </div>
    <div class="editable" contenteditable="true">
      [[ editable area ]]
    </div>
    <input type="button" value="Repalce" id="btn-replace" />
    <script type="text/javascript">
      document.getElementById('btn-replace').onclick = function() {
        var sel = window.getSelection();
        var range = sel.getRangeAt(0);
        range.insertNode(document.createTextNode("bordertest "));
      };

    </script>
  </body>

</html>

CSS

.editable {
  margin: 5px;
  padding: 5px;
  border: 1px solid #999;
}