Skip to content

Instantly share code, notes, and snippets.

@haruair
Created August 3, 2016 07:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save haruair/8d2237153645336cc8b2c785b26fc431 to your computer and use it in GitHub Desktop.
Save haruair/8d2237153645336cc8b2c785b26fc431 to your computer and use it in GitHub Desktop.
editor draft
<!doctype html>
<html>
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,700,300,900);
.placeholderText {
font-family: 'Merriweather', 'apple sd gothic neo', serif;
border: 0;
background: #fafafa;
min-height: 500px;
max-width: 800px;
margin: 0 auto;
font-size: 12px;
line-height: 1.86;
resize: none;
outline: none;
cursor: text;
}
atom-overlay {
position: fixed;
display: block;
z-index: 4;
}
.hidden-input {
padding: 0;
border: 0;
position: absolute;
z-index: -1;
top: 0;
left: 0;
opacity: 0;
width: 1px;
}
.cursor {
border-left: 2px solid red;
position: absolute;
left: 0;
top: 0;
height: 22px;
transition: left 0.1s, top 0.1s;
}
.cursor-off {
border-color: transparent;
}
.line {
line-height: 22px;
}
#meta {
text-align: center;
font-size: 12px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-git.js"></script>
<script>
var buffer = '';
var comp = '';
var cursor = {
line: 1,
col: 0
};
var keymap = {
'Backspace': function(event) {
buffer = buffer.substr(0, buffer.length - 1);
},
'Enter': function(event) {
buffer += "\n";
}
};
var cursorTimer = null;
function updateCursorTimer() {
clearInterval(cursorTimer);
jQuery('#cursor').removeClass('cursor-off');
cursorTimer = setInterval(function() {
jQuery('#cursor').toggleClass('cursor-off');
}, 500);
}
jQuery(function() {
var div = document.getElementById('placeholderText');
var cursorEle = document.getElementById('cursor');
var content = document.createElement('div');
div.appendChild(content);
div.addEventListener('compositionstart', function(event) {
status = 'compositionstart';
console.log('compositionstart', event.data);
comp = event.data;
var event = new Event('updated');
div.dispatchEvent(event);
});
div.addEventListener('compositionupdate', function(event) {
console.log('compositionupdate', event.data);
comp = event.data;
var event = new Event('updated');
div.dispatchEvent(event);
});
div.addEventListener('compositionend', function(event) {
status = 'compositionend';
console.log('compositionend', event.data);
comp = '';
});
div.addEventListener('click', function(event) {
document.getElementById('hiddenInput').focus();
});
document.getElementById('hiddenInput').addEventListener('blur', function(event) {
clearInterval(cursorTimer);
jQuery('#cursor').addClass('cursor-off');
});
document.getElementById('hiddenInput').addEventListener('focus', function(event) {
updateCursorTimer();
});
div.addEventListener('keydown', function(event) {
if(keymap[event.key]) {
event.stopPropagation();
event.preventDefault();
keymap[event.key].apply(this, event);
var event = new Event('updated');
div.dispatchEvent(event);
}
updateCursorTimer();
});
div.addEventListener('textInput', function(event) {
event.stopPropagation();
if(event.data != ' ') event.preventDefault();
if(status == 'compositionend') {
status = 'nocomposition';
}
console.log('textinput', event.data, event.keyCode);
buffer += event.data;
var event = new Event('updated');
div.dispatchEvent(event);
});
div.addEventListener('updated', function(event) {
var lines = (buffer + comp).replace(/\ /gi, "&nbsp;");
lines = lines.split("\n").map(function(line){ return "<div class='line'><span>" + line + "</span></div>" });
content.innerHTML = lines.join('');
});
div.addEventListener('updated', function(event) {
var lines = (buffer + comp).split("\n");
cursor.line = lines.length;
cursor.col = lines.pop().length;
updateMeta(cursor);
});
div.addEventListener('updated', updateCursorPosition);
function updateCursorPosition(event) {
var target = jQuery(content).find('div').eq(cursor.line - 1);
var offset = {};
if(target.length > 0) {
var pos = target.offset();
var width = target.find('span').width();
offset = {
'left': pos.left + width,
'top': pos.top
};
} else {
offset = {
'left': jQuery('#placeholderText').offset().left,
'top': jQuery('#placeholderText').offset().top
};
}
jQuery(cursorEle).css(offset);
}
function updateMeta(cursor) {
document.getElementById('meta').innerText = cursor.line + " lines, " + cursor.col + " cols";
}
var event = new CustomEvent("click", {});
div.dispatchEvent(event);
updateCursorPosition();
});
</script>
</head>
<body>
<div id="placeholderText" class="placeholderText">
<input type="text" tabindex="-1" id="hiddenInput" class="hidden-input" />
<div class="cursor" id="cursor"></div>
</div>
<div id="meta"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment