JSFiddle - React, Tailwind, and code Playground

HTML

<div class="editable">
    Hello world! 進撃の巨人 What isn't reality? 
</div>

<div class="clickme">
CLICK ME
</div>

CSS

.editable {
    cursor: pointer;
}

span {
  background:yellow;
}

JavaScript

jQuery(document).ready(function() {
    jQuery('.clickme').bind("mouseup", function() {

        // find the bullet content stored in p tag inside li
        var bulletcontent = jQuery(this).parent().find(".editable");

        // split content into words
        var words = jQuery(bulletcontent).text().split(" ");

        // empty p tag
        jQuery(bulletcontent).empty();

        // wrap words in p tag into span tags
        jQuery.each(words, function(i, v) {
            jQuery(bulletcontent).append(jQuery("<span>").text(v)).append(' ');
        });

        // hide editb .js-trigger-editb button
        jQuery(this).hide();

    });
});



jQuery(document).ready(function() {
    jQuery('.editable span').bind("mousedown", function() {
    
       // don't add full stop at the end of sentence if it already ends with
       var endChars = [".", "?", "!"];
    
       jQuery(this).fadeOut(function(){
          var parentObj = jQuery(this).parent();
          jQuery(this).remove();
          var text = parentObj.find("span").first().html();
          parentObj.find("span").first().html(ta_capitalizeFirstLetter(text)); 
          text = parentObj.find("span").last().html();
          if ( endChars.indexOf(text.slice(-1))  == -1 )
          {
            parentObj.find("span").last().html(text+"."); 
          }
       });
    
    });
});

function ta_capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}