JSFiddle - React, Tailwind, and code Playground

by bodine30

HTML

<p>Click one of the following tasks and edit it's text.</p><p>Pressing enter commits any changes you made.</p><p>Pressing escape cancels the edit and reverts the text to the original state.</p>
<h1 id="InlineTextEditor" class="InlineTextEditor editable"><span id="opt1" contenteditable="true">Option1: No feedback given to the user.</span></h1>
<h1 id="InlineTextEditor" class="InlineTextEditor editable"><span id="opt2" contenteditable="true">Option2: Feedback given for both successful, and cancelled edits.</span></h1>
<h1 id="InlineTextEditor" class="InlineTextEditor editable"><span id="opt3" contenteditable="true">Option2: Feedback given for both successful, and cancelled edits.</span></h1>

CSS

body {
color: #222;
font-family: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
}
p {font-weight:bold;}
h1 {
float: left;
font-size: 20px;
line-height: 20px;
margin-top: 9px;
padding-left: 22px;
border-radius:3px;
}
h1:focus, h1 > *:focus {
  outline: 0;
}
[contenteditable]:hover {
  background-clip: padding-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-color: #f5fafd;
  background-image: -moz-linear-gradient(#f6fbfe, #f4f9fb);
  background-image: -ms-linear-gradient(#f6fbfe, #f4f9fb);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f6fbfe), to(#f4f9fb));
  background-image: -webkit-linear-gradient(#f6fbfe, #f4f9fb);
  background-image: -o-linear-gradient(#f6fbfe, #f4f9fb);
  background-image: linear-gradient(#f6fbfe, #f4f9fb);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6fbfe', endColorstr='#f4f9fb');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#f6fbfe, endColorstr=#f4f9fb)";
  *zoom: 1;
  border: 1px solid #CAE1EB;
}
[contenteditable] {
  cursor: text;
  padding: 2px;
  border: 1px solid transparent;
    border-radius:3px;
}
[contenteditable]:focus {
  background: white;
  border: 1px solid black;
}
#opt2[contenteditable].success {
    -webkit-animation-name:successShadowFade2; 
    -webkit-animation-duration:1000ms;
    -moz-animation-name:successShadowFade2; 
    -moz-animation-duration:1000ms;
    -ms-animation-name:successShadowFade2; 
    -ms-animation-duration:1000ms;
    animation-name:successShadowFade2; 
    animation-duration:1000ms;
}
#opt2[contenteditable].cancel {
    -webkit-animation-name:cancelEdit2; 
    -webkit-animation-duration:500ms;
    -moz-animation-name:cancelEdit2; 
    -moz-animation-duration:500ms;
    -ms-animation-name:cancelEdit2; 
    -ms-animation-duration:500ms;
    animation-name:cancelEdit2; 
    animation-duration:500ms;
}
#opt3[contenteditable].success {
   ...

JavaScript

function cancelEdit(e) {
    e.target.addClass('cancel').set('text',e.target.retrieve('cacheText')).blur();
};
function focusHandler(e) {
    e.target.set('class','');
    e.target.store('cacheText',e.target.get('text'));
};
function blurHandler(e) {
    var currentText = e.target.get('text'),
        hasChanged = (currentText !== e.target.retrieve('cacheText'));
    
    if(hasChanged) {
        // Success case
        e.target.addClass('success');
        console.log("success");
    }
    console.log(e.target.get('text'));
};
function keydownHandler(e) {
    switch(e.key) {
        case"esc":cancelEdit(e);break;
        case"enter":e.target.blur();break;
        default:break;
    } 
};
$('opt1').addEvents({
    keydown:keydownHandler,
    focus:focusHandler,
    blur:blurHandler
});
$('opt2').addEvents({
    keydown:keydownHandler,
    focus:focusHandler,
    blur:blurHandler
});
$('opt3').addEvents({
    keydown:keydownHandler,
    focus:focusHandler,
    blur:blurHandler
});