JSFiddle - React, Tailwind, and code Playground

by Sandeep Gupta

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<center>
            <div id="login-form">
               
<div id="text" contenteditable="true" placeholder="sample text here...">
    
</div>
<br />

<div class="autotext abs" style="display: none;">
	<ul id="autotextlist">
		<li><span style="color:purple">Music1</span></li>
		<li><span style="color:green">Music2</span></li>
		<li><span style="color:blue">Music3</span></li>
	</ul>
</div>
<div class="list2 abs" style="display: none;">
	<ul id="autotextlist2">
		<li><span style="color:purple">Music1-cat1</span></li>
		<li><span style="color:green">Music1-cat2</span></li>
		<li><span style="color:blue">Music1-cat3</span></li>
	</ul>
</div>

            </div>
        </center>

CSS

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block; /* For Firefox */
}

/* */

div[contenteditable=true] {
  border: 1px dashed #AAA;
  width: 290px;
  padding: 5px;
}
#text {
  border:1px solid black;
  text-align:left;
}
ul {
				list-style-type: none;
			}
			ul li {
				display: block;
			}
			.abs{
				position: absolute;
        z-index:9999;
        
			}
			
			ul#fb_inputs li {
				float: left;
				width: auto;
			}
			ul#fb_inputs li.fb_row {
				float: left;
				width: auto;
			}

JavaScript

var saveRange, savedsel, savedCords;
        
        $(document).ready(function () {
	$("#text").on('keyup', function (event) {
        	if (event.key == "#") {
        		var cords = getSelectionCoords();
        		savedCords = cords;
        		console.log(savedCords);
        		$('.autotext').css('top',cords.y).css('left',cords.x-50).show();
        	} else if (event.key == " "){
        		$('.autotext').hide();
        	}
        });
  
  $("#autotextlist li").on('click', function () {
		$('.autotext').hide();
		console.log(savedCords);
		var cords = savedCords;
       	$('.list2').css('top',cords.y).css('left',cords.x-50).show();
	});
    
    $("#autotextlist2 li").on('click', function () {
    	var currEl = $(this).html();
    	currEl = currEl+"&nbsp;";
    	console.log(currEl);
    	var editor = document.getElementById("text");
    	var range = saveRange;
    	var sel = savedsel;
    	
    	range.deleteContents();

        // Range.createContextualFragment() would be useful here but is
        // non-standard and not supported in all browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = currEl;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);
        
        // Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
          	 sel.removeAllRanges();
            sel.addRange(range);
        }
        $('.autotext').hide();
        $('.list2').hide();
	      return false;
    });
});
        
        function checkChar(event) {
        	 
        	if (event.key == "#") {
        		var cords = getSelectionCoords();
        		savedCords = cords;
        		console.log(savedCords);
        		$('.autotext').css('top',cords.y).css('left',cords.x-50).show();
       ...