JSFiddle - React, Tailwind, and code Playground

by VivekVish

HTML

<html>
    <head>
    </head>
    <body>
        <p>Hello</p>
    </body>
</html>

JavaScript

var rangeTraverse =
{
    // DESC: returns current range
    // RETURNS: Range object
    getCurrentRange: function()
    {
        if(window.getSelection().rangeCount>0)
        {
            return window.getSelection().getRangeAt(0);
        }
    },
    
    // DESC: sets current range
    // PARAMETER: newRange is the new Range to be set as the current Range
    //            newRange should be a range object if opts.type=='range'
    //               newRange should be an object literal variables 'startContainer' (type: node),
    //            'startOffset' (type: integer),'endContainer' (type:node), and 'endOffset'
    //            (type: integer) if opts.type=='nodeOffset'
    // PARAMETER: opts.type = 'range' is default, opts.type sets input type for newRange
    // RETURNS: void
    setCurrentRange: function(newRange, opts)
    {
        opts = typeof(opts) == 'undefined' ? {'type':'range'} : opts;
        
        if(opts.type == 'range')
        {
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(newRange);
        }
        else if(opts.type == 'nodeOffset')
        {

            var sel = window.getSelection();
            var range = document.createRange();

            range.setStart(newRange.startContainer,newRange.startOffset);
            range.setEnd(newRange.endContainer,newRange.endOffset);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}

$(document).ready(function()
{
    $('p')[0].contentEditable=true;
    
    $('p').bind('keydown',function(e)
    {
        if(e.keyCode==109||e.keyCode==189)
        {
            var currentRange = rangeTraverse.getCurrentRange();

            if(currentRange.collapsed&&currentRange.startOffset>0)
            {
                var newRange = currentRange.cloneRange();
                var startNode = currentRange.startContainer;
                if(!$(startNode).is('*'))
                {
                    startNode =...