var sel = document.getSelection();
var anchorNode = sel.anchorNode;
var prev_p = sel.anchorNode.previousSibling;
+ if (! prev_p) return;
if (prev_p.tagName != 'P') {
prev_p = $(prev_p).parents('p')[0];
}
}
return true;
});
+ $('div[contenteditable]').on('keyup', function(event) {
+ var sel = document.getSelection();
+ if (sel.anchorNode instanceof Element && sel.anchorOffset == 0 && sel.isCollapsed) {
+ // start of line
+ show_block_style_popup();
+ } else {
+ hide_block_style_popup();
+ }
+ return true;
+ });
$('#save').on('click', function() {
var text = $('div[contenteditable]')[0].innerHTML;
return false;
});
+ var block_style_popup = null;
+ function block_style() {
+ var action = $(this).data('action');
+ var class_name = null;
+ if (action == 'code') {
+ action = 'pre';
+ class_name = 'screen';
+ }
+ document.execCommand('formatBlock', false, action);
+ var sel = window.getSelection();
+ if (class_name) {
+ $(sel.anchorNode).addClass(class_name);
+ }
+ var range = document.createRange();
+ range.setStart(sel.anchorNode, 0);
+ sel.removeAllRanges();
+ sel.addRange(range);
+ hide_block_style_popup();
+ }
+ function show_block_style_popup() {
+ if (block_style_popup === null) {
+ block_style_popup = $(
+ '<div class="style-popup">' +
+ '<button data-action="code">code</button>' +
+ '</div>');
+ block_style_popup.hide();
+ block_style_popup.insertAfter($('.actions'));
+ block_style_popup.find('button').on('click', block_style);
+ }
+ block_style_popup.css('position', 'absolute');
+ var sel = window.getSelection();
+ var pos = $(sel.anchorNode).offset();
+ block_style_popup.css('top', pos.top - 33);
+ block_style_popup.css('left', pos.left);
+ block_style_popup.show();
+ }
+ function hide_block_style_popup() {
+ if (block_style_popup) {
+ $(block_style_popup).hide();
+ }
+ }
+
var style_popup = null;
function update_style() {
var action = $(this).data('action');
function show_style_popup(sel) {
if (style_popup === null) {
- style_popup = $('<div id="style-popup">' +
+ style_popup = $('<div class="style-popup short">' +
'<button data-action="italic"><i>i</i></button>' +
'<button data-action="bold"><b>b</b></button>' +
'<button data-action="code">#</button>' +