JSFiddle - React, Tailwind, and code Playground

by StriplingWarrior

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<ul>
    <li><input type="text" /></li>
    <li>
<textarea class="markdown-enabled"></textarea>
Testing
    </li>
    <li><input type="text" /></li>
</ul>

CSS

.markdown-wrapper {display:inline-block; position: relative;}
.markdown-wrapper > a {position: absolute; top: 0; right: -50px; display: none;}
ul {display: inline-block; border: thin red solid;}

JavaScript

$('.markdown-enabled').each(function() {
    var t = $(this);
    var editButton;
    var keepFocus;
    var focus = function(e) {
        if(!editButton) {
            var wrapper = $('<div></div>').insertAfter(t)
                .addClass('markdown-wrapper');
            t.wrap(wrapper)
                // Refocus the element that was wrapped, but don't re-fire
                // the 'focus' event handler.
                .off('focus', focus)
                .focus()
                .focus(focus);
            editButton = $('<a href="#"></a>')
                .button({icons: {primary: 'ui-icon-pencil'}})
                .click(function(e){e.preventDefault();})
                .insertAfter(t)
                .focus(focus)
                .blur(blur)
                .click(function(){alert('edit window');});
        }
        keepFocus = true;
        editButton.fadeIn();
    };
    var blur = function() {
        keepFocus = false;
        if(editButton) {
            window.setTimeout(function() {
                if(!keepFocus) editButton.stop().fadeOut();
            }, 50);
        }
    };
    t.focus(focus).blur(blur);
});