JSFiddle - React, Tailwind, and code Playground

HTML

<div id="selectable">
  <p>Hello world, <b>Attack on Titan</b> season two!</p>
  <p>Another paragraph with sample text.</p>
</div>
<div id="notSelectable">
  <p>The selection will behave normally on this div.</p>
</div>

JavaScript

(function(el){
	el.addEventListener('mouseup',function(evt){
		if (document.createRange) { // Works on all browsers, including IE 9+
			var selected = window.getSelection();
			/* if(selected.toString().length){ */
				var	d = document,
					nA = selected.anchorNode,
					oA = selected.anchorOffset,
					nF = selected.focusNode,
					oF = selected.focusOffset,
					range = d.createRange();
				
				range.setStart(nA,oA);
				range.setEnd(nF,oF);
				
				// Check if direction of selection is right to left
				if(range.startContainer !== nA || (nA === nF && oF < oA)){
					range.setStart(nF,oF);
					range.setEnd(nA,oA);
				}
				
				// Extend range to the next space or end of node
				while(range.endOffset < range.endContainer.textContent.length && !/\s$/.test(range.toString())){
					range.setEnd(range.endContainer, range.endOffset + 1);
				}
				// Extend range to the previous space or start of node
				while(range.startOffset > 0 && !/^\s/.test(range.toString())){
					range.setStart(range.startContainer, range.startOffset - 1);
				}
				
				// Remove spaces
				if(/\s$/.test(range.toString()) && range.endOffset > 0)
					range.setEnd(range.endContainer, range.endOffset - 1);
				if(/^\s/.test(range.toString()))
					range.setStart(range.startContainer, range.startOffset + 1);
				
				// Assign range to selection
				selected.addRange(range);
        
        el.style.MozUserSelect = '-moz-none';
			/* } */
		} else { 
		   // Fallback for Internet Explorer 8 and earlier
		   // (if you think it still is worth the effort of course)
		}
	});
  
  /* This part is necessary to eliminate a FF specific dragging behavior */
  el.addEventListener('mousedown',function(){
  	if (window.getSelection) {  // Works on all browsers, including IE 9+
     	 var selection = window.getSelection ();
       selection.collapse (selection.anchorNode, selection.anchorOffset);
    } else {
       // Fallback for Internet Explorer 8 and earlier
		   // (if you think it still is...