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="description" contenteditable="true">
    Here is some sample text
</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

#description {
  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;
var matchKeywords=[], desckeywords=[], categories=[];
var autosearch = false;
        
        $(document).ready(function () {
        
	$("#description").on('keyup', function (event) {
  	//alert();
    var inputChar = showCaretPos();
       console.log("inputChar: "+ inputChar);
       if (!inputChar) {
        inputChar = e.key;
       }
        	if (inputChar == "#") {
          autosearch = true;
          console.log('here+++++');
          var cords = getSelectionCoords();
              var tempEl = "<span id='keym' class='keymarker'>"+inputChar+"</span>";
              
              pasteKeywordHtml(tempEl);
              savedCords = cords;
              var contentEditable = document.getElementById('description');
    var lastItem = document.getElementById('keym');
              contentEditable.focus();
                selectElementText(lastItem, window);
           
        	} 
         else if (inputChar == " ") {
          autosearch = false;
          autosearchtext = '';
          $('.autotext').hide();
          
        }
        if (autosearch) {
          
         var inputKeyword = $(".keymarker").text();
         var searchKeyword = inputKeyword;
         if (searchKeyword == "") {
            $('.autotext').hide(); 
            $('.list2').hide();
         //   $(".keymarker").remove();
         } else {
             updateKeywordListByStr(searchKeyword);
             var postCss = getAutoListPos();
             $('.autotext').css('left', 'auto').css('right', 'auto');
             $('.autotext').css('top', that.savedCords.y+18).css(postCss.pos, postCss.x).show();
         }
        }
        });
  
  $("#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 =...