JSFiddle - React, Tailwind, and code Playground

by zedsaid

HTML

<input type="text" id="value" />
<div id="editor" contenteditable="true">jklj</div>

JavaScript

$('#editor').mouseup(function() {
    updateCaret(null);
});
$('#editor').keypress(function(e) {
    updateCaret();
});

function updateCaret() {
    /*
    $('#zss_cursor').remove();
    var cursor = cursor = '<span id="zss_cursor">|</span>';
    
    var object = $(getSelectedNode());
    object.append(cursor);
    
        //document.execCommand('insertHTML', false, cursor);
        console.log($('#editor').html());
        var offset = $('#zss_cursor').offset();
    //var range = window.getSelection();                                        
                //alert (range.toString ());
        $('#value').val(offset.top);
    */
    console.log($('#editor').html());
    $('#value').val(getCaretYPosition());
}

var getSelectedNode = function() {
    var node,selection;
    if (window.getSelection) {
        selection = getSelection();
        node = selection.anchorNode;
    }
    if (!node && document.selection) {
        selection = document.selection
        var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
        node = range.commonAncestorContainer ? range.commonAncestorContainer :
        range.parentElement ? range.parentElement() : range.item(0);
    }
    if (node) {
        return (node.nodeName == "#text" ? node.parentNode : node);
    }
};

function getCaretYPosition() {
    var sel = window.getSelection(); 
    sel.collapseToStart();
    var range = sel.getRangeAt(0);
    var span = document.createElement("span");
    range.insertNode(span); 
    var topPosition = span.offsetTop; 
    span.parentNode.removeChild(span); 
    return topPosition;   
}

function getSelectionCoords() {
    var sel = document.selection, range;
    var x = 0, y = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            range.collapse(true);
            x = range.boundingLeft;
            y = range.boundingTop;
        }
    } else if (window.getSelection) {
        sel =...