JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script>
<div id="content">
  Text:
  <div id="text" class="textDiv" contenteditable="true">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod <a href="#">duo dolores</a> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo.</div>
   
  Selection:    
  <div id="textcontent" class="textDiv"></div>    
    
  <input type="button" id="btn1" value="selectNode()">
  <input type="button" id="btn2" value="selectNodeContents()">  
</div>

CSS

#content { padding: 10px; }
.textDiv { border: 1px solid #000; padding: 2px; margin-bottom: 15px; min-height:50px; }
#textcontent { color: #999; }
input { margin-top: 10px; padding: 2px 10px; }

JavaScript

$(document).ready(function() {
  $("#text").click(function() { clearSelection(); });
  $("#btn1").click(function() { update(true); });
  $("#btn2").click(function() { update(false); });
});


function update(selectNode) {
  var selection = rangy.getSelection();

  if(selection.rangeCount) {
    var range = selection.getRangeAt(0);
    
    if(range.collapsed && $(range.startContainer.parentNode).is("a")) {
      
      if(selectNode)
        range.selectNode(range.startContainer.parentNode);
      else
        range.selectNodeContents(range.startContainer.parentNode);
      
      selection.setSingleRange(range);
    }
  }
    
  updateSelection(selection);
}

function updateSelection(sel) {
  var text = (sel != null) ? sel.toHtml() : "";
  $("#textcontent").text(text);
}

function clearSelection() {
  updateSelection();
}