JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<div class="ed-wrapper" dir="ltr">

<div class="ed-wrapper-editor" tabindex="1">
    
    
<div class="ed-inner">
    <div class="kix-paragraphrenderer">
        
    <div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left; ">
        
        <span class="inline-block text-block" style="width: 216px; padding-left: 0px; ">
            <span style="font-size:15px;font-family:Arial;">Line Number 1
            </span>
        </span>
    </div>
    <div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left; ">
        
        <span class="inline-block text-block" style="width: 216px; padding-left: 0px; ">
            <span style="font-size:15px;font-family:Arial;">Line Number 2
            </span>
        </span>
        
    </div>
    <div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left; ">
        
        <span class="inline-block text-block" style="width: 216px; padding-left: 0px; ">
            <span style="font-size:15px;font-family:Arial;">Resolutions&nbsp;/&nbsp;Responsive&nbsp;Design
            </span>
        </span>
        
    </div>
    
    </div>
    
</div>
    
</div>

</div>

<!-- 

    <div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left; ">
        
        <span class="inline-block text-block" style="width: 216px; padding-left: 0px; ">
            <span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">Resolutions&nbsp;/&nbsp;Responsive&nbsp;Design
            </span>
        </span>
        
    </div>
-->

CSS

.ed-wrapper-editor {
    -moz-user-select: -moz-none;
    position: relative;
    white-space: normal;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ed-wrapper-editor ::selection {
    background: transparent;
    color: inherit;
}

.cursor {
    cursor: text;
    position: absolute;
    z-index: 40;
}
.cursor-caret {
    position: absolute;
    width: 0px;
    border-left: 2px solid;
    font-size: 0;
}
.cursor-caret {
    border-color: black;
    height: 18px;
    display: none;    
}

.ed-wrapper {
    border-top: 1px solid #E5E5E5;
    overflow: hidden;
}

.kix-paragraphrenderer {
    position: relative;
}
.kix-lineview {
    position: relative;
}

.selection-overlay-mac.htmloverlay-under-text, .selection-overlay.htmloverlay-under-text {
    z-index: 10;
}
.selection-overlay {
    pointer-events: none;
    background-color: #36C;
    border-top: 1px solid #36C;
    border-bottom: 1px solid #36C;
    opacity: 0.20;
    -moz-opacity: 0.20;
    filter: alpha(opacity=20);
    z-index: 20;
}
.htmloverlay-under-text {
    z-index: 10;
}
.htmloverlay {
    position: absolute;
    z-index: 20;
    top: 0;
}

.kix-lineview-content {
    white-space: nowrap;
}
.kix-lineview-text-block {
    white-space: nowrap;
}
.inline-block {
    position: relative;
    display: -moz-inline-box;
    display: inline-block;
}

JavaScript

window.log = function f(){ log.history = log.history || []; log.history.push(arguments); if(this.console) { var args = arguments, newarr; try { args.callee = f.caller } catch(e) {}; newarr = [].slice.call(args); if (typeof console.log === 'object') log.apply.call(console.log, console, newarr); else console.log.apply(console, newarr);}};


var Caret = {
    markup: '<div class="cursor docstext-unprintable"><div class="cursor-caret"></div></div>',
    _el: null,
    _elInner: null,
    
    move: function(el) {
        if (!Caret._el || !Caret._elInner) {
           return;   
        }
        Select.removeHighlight();
        Caret._el.offset($(el).offset());
    },
    moveToCoords: function(x, y) {
        if (!Caret._el || !Caret._elInner) {
           return;   
        }
        Select.removeHighlight();
        Caret._el.offset({top: y, left: x});
        
    },
    bump: function(dir) {
        log("bumping", dir);
        
        var offset = Caret._el.offset();
        var top = offset.top;
        var left = offset.left;
        if (dir === "up"){
                top -= 20;
        }
        if (dir === "left") {
                left -= 12;
        }
        if (dir === "right"){
                left += 12;
        }
        if (dir === "down"){
                top += 20;
        }
        
        Select.removeHighlight();
        Caret._el.offset({ top: top, left: left });
    },
    init: function(editor) {
                
        var editorFocused = false;
        $(editor).on("focus", function() {
            editorFocused = true;
        });
        $(editor).on("blur", function() {
            editorFocused = false;
        });
        $(editor).on("mousedown", function(e) {
            Caret.moveToCoords(e.pageX, e.pageY);
        });
        
        Caret._el = $(Caret.markup).appendTo(editor);
        Caret._elInner = Caret._el.find(".cursor-caret");
        
        setInterval(function() {
            if (editorFocused) {
               ...