JSFiddle - React, Tailwind, and code Playground

HTML

<br/><div class="editable" style=" border:dotted 1px #ccc; padding:4px;" contenteditable="true">01 some text...</div>

<br/><div class="editable" style=" border:dotted 1px #ccc; padding:4px;" contenteditable="true">02 some text...</div>

<br/><div class="editable" style=" border:dotted 1px #ccc; padding:4px;" contenteditable="true">03 some text...</div>

<br/><div class="editable" style=" border:dotted 1px #ccc; padding:4px;" contenteditable="true">04 some text...</div>

JavaScript

$.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    //console.log(this, element);
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$(".editable").on("focus", function () {
    $(this).selectText();
});
$(".editable").on("click", function () {
    $(this).selectText();
});
$('.editable').mouseup(function(e){
    e.stopPropagation();
    e.preventDefault();
    // maximize browser compatability
    e.returnValue = false;
    e.cancelBubble = true;
    return false; 
});