JSFiddle - React, Tailwind, and code Playground

HTML

<p>Some text for testing this thing. I want to remove the dependency on this div#selection but cannot figure out how to do it!</p>

CSS

#element {
    width: 20px;
    height: 20px;
    background-color: #CCC;
    display: inline-block;
}

JavaScript

var selectionchange=function(a){function e(b){var c=b.onselectionchange;if(c!==a)try{return b.onselectionchange=0,null===b.onselectionchange}finally{b.onselectionchange=c}return!1}function f(){return"undefined"!=typeof WeakMap?new WeakMap:(console.error("selectionchange: WeakMap not supported"),null)}function g(a){var b=a.getSelection();return b.rangeCount?b.getRangeAt(0):null}function h(a,b,c){a.addEventListener(b,c,!0)}function i(a,b,c){a.removeEventListener(b,c,!0)}function j(a){var c=a.keyCode;(65===c&&a[b]&&!a.shiftKey&&!a.altKey||40>=c&&c>=37&&a.shiftKey)&&setTimeout(o.bind(null,this),0)}function k(a){0===a.button&&(h(this,"mousemove",l),setTimeout(o.bind(null,this),0))}function l(a){1&a.buttons?o(this):i(this,"mousemove",l)}function m(a){0===a.button?setTimeout(o.bind(null,this),0):i(this,"mousemove",l)}function n(){setTimeout(o.bind(null,this.document),0)}function o(a){var b=d.get(a),c=g(a);p(c,b)||(d.set(a,c),setTimeout(a.dispatchEvent.bind(a,new Event("selectionchange")),0))}function p(a,b){return a===b||a&&b&&c.every(function(c){return a[c]===b[c]})}var d,b=/^Mac/.test(navigator.platform)?"metaKey":"ctrlKey",c=["startContainer","startOffset","endContainer","endOffset"];return{start:function(a){var b=a||document;(d||!e(b)&&(d=f()))&&(d.has(b)||(d.set(b,g(b)),h(b,"keydown",j),h(b,"mousedown",k),h(b,"mousemove",l),h(b,"mouseup",m),h(b.defaultView,"focus",n)))},stop:function(a){var b=a||document;d&&d.has(b)&&(d.delete(b),i(b,"keydown",j),i(b,"mousedown",k),i(b,"mousemove",l),i(b,"mouseup",m),i(b.defaultView,"focus",n))}}}();

selectionchange.start();

document.addEventListener('selectionchange', function (event) {
    var sel = this.getSelection();


    // If text is being selected by drag, to wait for them to finish selecting.
    jQuery("body").mouseup(function() {
      // Ensure there is some text selected and that it is more than one character.
      if (sel.toString().length > 1) {
        // We only want one #element on the page at a time.
       ...