JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<textarea rows="20" cols="40"></textarea>

JavaScript

/* Functions to get and set caret position
Source: http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/ 
*/
function doGetCaretPosition (ctrl) {
    var CaretPos = 0;    // IE Support
    if (document.selection) {
    ctrl.focus ();
        var Sel = document.selection.createRange ();
        Sel.moveStart ('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ctrl.selectionStart || ctrl.selectionStart == '0')
        CaretPos = ctrl.selectionStart;
    return (CaretPos);
}
function setCaretPosition(ctrl, pos){
    if(ctrl.setSelectionRange)
    {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
    }
    else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

/* example autocorrect plugin */
$.fn.autocorrect = function(options) {
    options = $.extend({
        delimiter:/^(\w+)(\W+)(.*)$/,
        checker:function(x) { return x; }
    }, options);
    return this.each(function() {
        var element = this, $this = $(this);
        var words = [];
        var stack = [];
        var backtracking = false;
        function updateText(undone) {
            var caret = doGetCaretPosition(element);
            var text = "";
            for ( var i = 0 ; i < words.length ; i++ )
                text += words[i].word + words[i].sp;
            $this.val(text);
            // If a word was autocorrected, put the caret right after it
            if ( stack.length > 0 || undone !== undefined ) {
                var last = undone !== undefined ? undone : stack[stack.length-1];
                caret = 0;
                for ( var i = 0 ; i < last ; i++ )
                    caret += words[i].word.length + words[i].sp.length;
                caret += words[last].word.length + 1;
            }
  ...