JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<div id="context">
      <ul>
        <li class="click" id="delete">Entitate</li>
      </ul>

    </div>
    <div id="textarea">
      <textarea id="box" name="text">
At W3Schools you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP.
</textarea> 
    </div>

CSS

ul li {
        list-style: none;
        text-align: left;
        margin: 0 -30px 0 -30px;
      }
      ul li{
        width: 70px;
      }
      ul li:hover {
        background-color: #0000ff;
        color: #f0f0f0;
        cursor: default;
      }
      #context {
        width: 100px;
        height: 100px;
        position: absolute;
        border: 1px solid #000;
        background-color: #fff;
      }
      #textarea{
        width: 400px;
        display: block;
      }
      textarea{
        width: 100%;
        max-width: 400px;
        height: auto;
      }

JavaScript

function disable(){
    $("#context").hide();
    //var pos = $(this).position();
    $("textarea").bind("contextmenu", function(e) {
      e.preventDefault();
      e.stopPropagation();
      $("#context").css({
        top: (e.pageY) + "px",
        left: (e.pageX) + "px"}).show(500);
        return false;
    });
    $(this).click(function(e){
      if(e.button == 0)
        {
            if(e.pageX < $("#context").position().left ||
              e.pageX > $("#context").position().left + 100 ||
              e.pageY < $("#context").position().top ||
              e.pageY > $("#context").position().top + 100)
                {
                  $("#context").hide(500);
                }
        }
    });
    $(".click").click(function(e){
      var pos = this.id;
      
      console.log(this.id);
      if(pos == "copy"){
          alert("Element copiat in memorie si pregatit de copiat!");
          $("#context").hide(500);
          e.stopPropagation();
      } else if(pos == "cut") {
          alert("Element copiat in memorie si pregatit de mutat!");
          $("#context").hide(500);
          e.stopPropagation();
      } else if(pos == "delete"){
          var len = $("textarea")[0].length;
          var start = $("textarea")[0].selectionStart;
          var end = $("textarea")[0].selectionEnd;
          var selectedText = $("textarea").val().substring(start, end);
          var replace = "<entitate id=\"1\">" + selectedText + "</entitate>";
          $("textarea").val( $("textarea").val().substring(0, start) + replace + $("textarea").val().substring(end, len));
          $("#context").hide(500);
          e.stopPropagation();
      } else if(pos == "about"){
          alert("Despre aplicatie!");
          $("#context").hide(500);
          e.stopPropagation();
      }
          
    });
  }
  function showMessage(title, message, type){
    
  }
  $(disable);