JSFiddle - React, Tailwind, and code Playground

by kritya

HTML

balaballalalalalblabla<br />
dlgnsklngvlksanlfnifwn <br />
<div id="hmm">
    <div class="container">
        <p>
            Once upon a time there was a man
            who lived in a pizza parlor. This
            man just loved pizza and ate it all 
            the time.  He went on to be the
            happiest man in the world.  The end.
        </p>
        <div class="status">
        </div>
        <div class="side-head" id="click">
            <div class="sidebar">Edit
            </div>
            <div class="drop">
                <div id="ed1" ed="0">Edit 1</div>
                <div id="ed2" ed="0">Edit 2</div>
            </div>
        </div>
    </div>
    <div id="before">oo</div>

CSS

.side-head {
    position:absolute;
    top:0px;
    right:0px;
    background:black;
    color:white;
    z-index:1;
}
.sidebar{
    width:50px;
    float:right;
}
.container {
    position:relative;
    padding-top:1.5em;
    background:cyan;
}
.drop {
    display:none;
}
.status {
    display:none;
    position:absolute;
    top:-20px;
    left:0px;
    z-index:1;
    background:#0000A0;
    color:white;
    margin-right:55px;
}

JavaScript

var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");

function edit1() {
    
    $(".drop").toggle();
    if ($(this).attr('ed') == '0') {
        $("#hmm").delegate("span", "click", singleed);
        $(this).attr('ed', '1');
        $(this).html("Done ?");
        $(".status").html("Click on a word to edit it. When done open the menu and click done or hit enter in the input box");
        $(".status").fadeIn(200).delay(2500).fadeOut(200)
    }
    else if ($(this).attr('ed') == '1') {
        $("#hmm").undelegate("span", "click");
        $(this).attr('ed', '0');
        $("#before").html($("p:first").text());
        $(this).html("Edit 1")
    }
}

function edit2() {
    var wdith = $("p").css('width')
    $("p:first").replaceWith("<textarea class='edit'>"+$("p:first").text()+"</textarea>")
        $(".edit").css("width",wdith)
}

function sinreplace() {
    var splitit = $(this).val().split(" ");
    var splitted = splitit.join("</span> <span>");
    $(this).parent().replaceWith("<span>" + splitted + "</span>");
    $(this).bind("click");
}

function singleed() {
    var target = $(this).text()
    $(this).html('<input class="mm" value="' + $(this).text() + '"/>');
    $(".mm").css("width", target.length + 2 + "ex")
    $(".mm").focus();
    $(this).unbind("click");
}
$("#hmm").delegate("span", "click", singleed);
$("#hmm").undelegate("span", "click");
$("#hmm").delegate(".mm", "blur", sinreplace);

$(".sidebar").click(function() {
    $(this).nextAll(".drop:first").toggle();
});
$("#ed1").click(edit1);
$("#ed2").click(edit2)