JSFiddle - React, Tailwind, and code Playground

by octatone

HTML

<div id="view">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum convallis odio non mattis. Praesent placerat viverra lorem vel fringilla. Fusce magna orci, vehicula non vulputate et, hendrerit ac sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec augue dui, eleifend fringilla enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer pretium bibendum turpis eu auctor. Donec auctor iaculis elit, eget sagittis justo ornare eget. Sed volutpat eros vel nibh placerat pharetra. Curabitur dolor velit, tempor id ornare id, sagittis vel ipsum. Phasellus eu felis scelerisque metus sollicitudin vehicula rutrum non nisl. In gravida posuere tincidunt. Phasellus viverra euismod arcu nec mollis.</div>
<textarea id="edit" class="hidden" rows="100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum convallis odio non mattis. Praesent placerat viverra lorem vel fringilla. Fusce magna orci, vehicula non vulputate et, hendrerit ac sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec augue dui, eleifend fringilla enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer pretium bibendum turpis eu auctor. Donec auctor iaculis elit, eget sagittis justo ornare eget. Sed volutpat eros vel nibh placerat pharetra. Curabitur dolor velit, tempor id ornare id, sagittis vel ipsum. Phasellus eu felis scelerisque metus sollicitudin vehicula rutrum non nisl. In gravida posuere tincidunt. Phasellus viverra euismod arcu nec mollis.</textarea>

CSS

.hidden {
    display: none;
}

#edit {
    width: 100%;
}

#edit, #view {
    margin: 0;
    font-family: arial;
    font-size: 1.5em;
}

JavaScript

var $view = $('#view');
var $edit = $('#edit');

$(document).ready(function() {
    
    var position = 0;
    var $this;
    
    // span it up!
    $view.children().andSelf().contents().each( function(index, element){
        
        /* only the text! */
        if (element.nodeType == 3) {
            
            $this = $(element);
            $this.replaceWith($this.text().replace(/(.)/g, "<span>$&</span>"));
        }
    });
    
    $view.on('mousedown', 'span', function (e) {
        
        position = 0;

        $view.find('span').each(function(index, element) {
                        
            if (e.currentTarget == element) {
                //position = index;
                return false;
            }else {
                position += $(element).text().length;
            }
        });
    });
    
    $view.on('mouseup', function (e) {
        
        $view.hide();
        $edit.show();
        //alert(position);
        setCaretToPos($edit[0], position);
    });
    
    $edit.on('blur', function (e) {
        
        $edit.hide();
        $view.show();
    });
    
    // http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area
    function setSelectionRange (input, selectionStart, selectionEnd) {
      if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
      }
      else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
      }
    }

    function setCaretToPos (input, pos) {
      setSelectionRange(input, pos, pos);
    }
});