JSFiddle - React, Tailwind, and code Playground

by frank david

HTML

<div id="edit" contenteditable="true">
  <div id="ctxMenu">
      <ul>
          <li>One</li>
          <li>Two</li>`
          <li>Three</li>
          <li>Four</li>
      </ul>
  </div>

CSS

#edit{
         border:1px solid red;
         width:500px;
            height:300px;
        }
        #ctxMenu{
         display: none;
         position: absolute;
         border: 1px solid #000000;
        }
        #ctxMenu ul li{
           list-style: none;
        }

JavaScript

$(document).ready(function(){
  $('#edit').on('keydown', function(e){
    var $this = $(this);
    var a = $this.data('mousepos').x;
    var b = $this.data('mousepos').y;
    if (e.ctrlKey && e.keyCode == 32) {  
        $('#ctxMenu').show().css({left:a,top:b});
    }else{
        $('#ctxMenu').hide();
    }
  });
  
  $('#edit').on('mousemove', function(e){
    $(e.target).data('mousepos', {x: e.pageX, y: e.pageY});
  });
});