JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul contenteditable="true" id="editor">
   <li>
     <div>
       Click on checbox and press enter
     </div>
   </li>
</ul>

CSS

li:before {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAABgCAMAAAA6hOw0AAAAaVBMVEX///8AAADIyMiUlJT29vbo6OgqKioFBQVgYGCcnJy4uLj8/Pz5+flkZGS7u7vx8fGxsbFvb29/f3+jo6Pc3NxBQUFpaWmJiYkjIyPBwcHT09M7OztQUFBWVlaqqqpGRkYzMzMVFRUcHBw1SfS9AAACI0lEQVRoge2a25aCMAxFC8Iocr/JiIjo/3/kwDC0KRZqJb7MynlrsGdrm+JaSRl7lh8XUdJ6RsqTY+0GCrNnxVF6sd7UI8xdnX9x2r9r/6cyWvOvbxvtR7WL65Oi+Pe61EqAvXV9oCoFwEP079U85VWGC+hXKv4woEdIvwJ5iUaVcJPnD69Zf0aNlLRV+D1zyTjAlx+VkbOU0OsK6tli28pNWMjlFyWfqW9/jLowqEpkI52hWz7G0ufQFhXw5P5GYhBYfKOYyAWI4xBoVZu/SSA1m2Ec8uHdxyGAdd/3/xeOACZIAOh57jeGDx5vHgOFxI/oczPigxANAExP8JWEkKmTxBG7MbaDS4al+D6ZXnxAsPUzX5XD33SP4EOEL+7qfJqwJwIRiEAEIhCBCEQgAhGIQAQiEIEIRCDCPybcYQULswr3mEw7H1QSUUrSo0QlsWQs4YMUj1Bz0wMcdFhFacYqbppJpXu8rRbV+6HS3fDRDQuQi29dMFjSxdpr0JTphrEorY/E7SqFofcbuCIjYIN4bAfUILL92MWwfz41ZRqIyLblbAK9rKk3KrXLLGsXr3qsKIg6yUlkTi4jrOvOLgrXTEXdnu6yTQPgofUJSWtR6j9vLDkvA5w7CFDz/qpz1c8xkuJkVfpZr+umzEf7Sz/zRXlL6YzUzD+sXG1xvHkn3lyp5t3m21mnd1nS/pBor+YMEPecV2l4MFJ4yrxjobpe9ANLKyWh2BCWAgAAAABJRU5ErkJggg==');
  display: block;
  float: left;
  content: "";
   width: 18px;
   height: 18px;
   background-size: 100%;
}
li {
  list-style: none;
  margin-bottom: 14px;
    height: 22px;
    position: relative;
    width: 99%;
}
li.checked:before {
  background-image:...

JavaScript

$(document).ready(function(){
   $(document).on('click', 'ul li',  function(){
     $(this).toggleClass('checked');
   })

   
     $("#editor").on('keyup keydown', function() {
    debugger;
    var $this = $(this);
    var test = $("#editor").has("li").length <= 0;
    var testOne = !$("#editor").has("li").length <= 0;
      if ((!$this.html()) || $("#editor").has("li").length <= 0) {
          $("#editor").html("");
          var $li = $('<li></li>');

          var sel = window.getSelection();

         var range = sel.getRangeAt(0);

          range.collapse(false);
          range.insertNode($li.get(0));
          range = range.cloneRange();
          range.selectNodeContents($li.get(0));
          range.collapse(false);
          sel.removeAllRanges();
          sel.addRange(range);

      } else {

          var $nonLI = $this.find(':not(li, div)');
 var testMe = $nonLI.length;
          if ($nonLI.length) {
              $this.contents().replaceWith(function() {
  return '<li>' + $('<div />').text($(this).text()).html().replace(/&nbsp;/g, ' ') + '</li>';
              });
          }
      }


  });
   
   
   
});