JSFiddle - React, Tailwind, and code Playground

by Udit Bhardwaj

HTML

<div id="edit" contenteditable="true">&nbsp;</div>

CSS

div#edit{
    border: lightgreen 1px solid;
    padding: 5px;
}
.facebook {
    background: lightgray;
    color: cornflowerblue;
}
.reddit {
    background: lightblue;
    color: red;
    /*padding-left: 3px;
    padding-right: 3px;*/
}

JavaScript

var t
$('#edit').focus(function (e) {
    var that = $(this);
    
    

    t = setInterval(function () {
        that.attr('contenteditable','true')
        var onlyDivText = that.clone()
        onlyDivText.children('span').each(function () {
            $(this).remove()
        })



        if (onlyDivText.text().toLowerCase().indexOf("facebook") != -1) {

            var copy = that.html();
            that.empty()

            var copy2 = copy.replace("facebook", "")
            if (that.children('span').length > 0) {
                var temp = $("<div id='temp' contenteditable='true'><span class='facebook' contenteditable = 'true'>Facebook</span></div>")
                that.html(copy2).prepend(temp)
                
              
                
                

               that.find('#temp').click(function (e) {
                    e.stopPropagation()
                    
                   
                    var sp = $(this).children('span').detach();
                   
                    $(this).replaceWith(sp)
                    
                    sp.focus()
                    
                    placeCaretAtEnd(sp.get(0))
                });
                
                that.find('#temp').trigger('click');
            } else {

                var temp = $("<div id='temp' contenteditable='true'><span class='facebook' contenteditable = 'true'>Facebook</span></div>")
                that.html(copy2).append(temp)
                
                
                
                that.find('#temp').click(function (e) {
                    e.stopPropagation()
                    
                    var sp = $(this).children('span').detach();
                 
                    $(this).replaceWith(sp)
                    sp.focus()
                    placeCaretAtEnd(sp.get(0))
                });
                
                that.find('#temp').trigger('click');
            }


        }

        if...