").insertAfter('.CodeMirror-cursors');
}
if ($('#' + id).length <= 0) {
var cursor = $('
');
//console.debug(pos);
cursor.attr('data-line', pos.line);
cursor.attr('data-ch', pos.ch);
var coord = editor.charCoords(pos, 'windows');
cursor[0].style.left = coord.left + 'px';
cursor[0].style.top = coord.top + 'px';
cursor[0].style.height = '18px';
cursor[0].style.borderLeft = '2px solid ' + color;
$('.other-cursors').append(cursor);
cursor.hide().fadeIn();
} else {
var cursor = $('#' + id);
cursor.attr('data-line', pos.line);
cursor.attr('data-ch', pos.ch);
var coord = editor.charCoords(pos, 'windows');
cursor.stop(true).css('opacity', 1).animate({"left":coord.left, "top":coord.top}, cursorAnimatePeriod);
//cursor[0].style.left = coord.left + 'px';
//cursor[0].style.top = coord.top + 'px';
cursor[0].style.height = '18px';
cursor[0].style.borderLeft = '2px solid ' + color;
}
}
//editor actions
editor.on('beforeChange', function (cm, change) {
if (debug)
console.debug(change);
});
editor.on('change', function (i, op) {
if (debug)
console.debug(op);
if (op.origin != 'setValue' && op.origin != 'ignoreHistory') {
socket.emit('change', LZString.compressToBase64(JSON.stringify(op)));
}
isDirty = true;
clearTimeout(doneTypingTimer);
doneTypingTimer = setTimeout(doneTyping, doneTypingDelay);
});
editor.on('focus', function (cm) {
socket.emit('cursor focus', editor.getCursor());
});
var cursorActivityTimer = null;
editor.on('cursorActivity', function (cm) {
clearTimeout(cursorActivityTimer);
cursorActivityTimer = setTimeout(cursorActivity, cursorActivityDelay);
});
function cursorActivity() {
socket.emit('cursor activity', editor.getCursor());
}
editor.on('blur', function (cm) {
socket.emit('cursor blur');
});
function saveInfo() {
var left = $(document.body).scrollLeft();
var top = $(document.body).scrollTop();
switch (currentMode) {
case modeType.edit:
lastInfo.edit.scroll.left = left;
lastInfo.edit.scroll.top = top;
break;
case modeType.view:
lastInfo.view.scroll.left = left;
lastInfo.view.scroll.top = top;
break;
case modeType.both:
lastInfo.edit.scroll = editor.getScrollInfo();
lastInfo.view.scroll.left = ui.area.view.scrollLeft();
lastInfo.view.scroll.top = ui.area.view.scrollTop();
break;
}
lastInfo.edit.cursor = editor.getCursor();
lastInfo.needRestore = true;
}
function restoreInfo() {
if (lastInfo.needRestore) {
var line = lastInfo.edit.cursor.line;
var ch = lastInfo.edit.cursor.ch;
editor.setCursor(line, ch);
switch (currentMode) {
case modeType.edit:
$(document.body).scrollLeft(lastInfo.edit.scroll.left);
$(document.body).scrollTop(lastInfo.edit.scroll.top);
break;
case modeType.view:
$(document.body).scrollLeft(lastInfo.view.scroll.left);
$(document.body).scrollTop(lastInfo.view.scroll.top);
break;
case modeType.both:
var left = lastInfo.edit.scroll.left;
var top = lastInfo.edit.scroll.top;
editor.scrollIntoView();
editor.scrollTo(left, top);
ui.area.view.scrollLeft(lastInfo.view.scroll.left);
ui.area.view.scrollTop(lastInfo.view.scroll.top);
break;
}
lastInfo.needRestore = false;
}
}
//view actions
var doneTypingTimer = null;
var finishChangeTimer = null;
var input = editor.getInputField();
//user is "finished typing," do something
function doneTyping() {
updateView();
var value = editor.getValue();
socket.emit('refresh', LZString.compressToBase64(value));
}
function finishChange() {
updateView();
}
var lastResult = null;
function updateView() {
if (currentMode == modeType.edit || !isDirty) return;
var value = editor.getValue();
var result = postProcess(md.render(value)).children().toArray();
//ui.area.markdown.html(result);
//finishView(ui.area.markdown);
partialUpdate(result, lastResult, ui.area.markdown.children().toArray());
lastResult = $(result).clone(true);
finishView(ui.area.view);
writeHistory(ui.area.markdown);
isDirty = false;
// reset lines mapping cache on content update
scrollMap = null;
emitUserStatus();
}
function partialUpdate(src, tar, des) {
if (!src || src.length == 0 || !tar || tar.length == 0 || !des || des.length == 0) {
ui.area.markdown.html(src);
return;
}
if (src.length == tar.length) { //same length
for (var i = 0; i < src.length; i++) {
copyAttribute(src[i], des[i], 'data-startline');
copyAttribute(src[i], des[i], 'data-endline');
var rawSrc = cloneAndRemoveDataAttr(src[i]);
var rawTar = cloneAndRemoveDataAttr(tar[i]);
if (rawSrc.outerHTML != rawTar.outerHTML) {
//console.log(rawSrc);
//console.log(rawTar);
$(des[i]).replaceWith(src[i]);
}
}
} else { //diff length
var start = 0;
var end = 0;
//find diff start position
for (var i = 0; i < tar.length; i++) {
copyAttribute(src[i], des[i], 'data-startline');
copyAttribute(src[i], des[i], 'data-endline');
var rawSrc = cloneAndRemoveDataAttr(src[i]);
var rawTar = cloneAndRemoveDataAttr(tar[i]);
if (!rawSrc || !rawTar || rawSrc.outerHTML != rawTar.outerHTML) {
start = i;
break;
}
}
//find diff end position
var srcEnd = 0;
var tarEnd = 0;
for (var i = 0; i < src.length; i++) {
copyAttribute(src[i], des[i], 'data-startline');
copyAttribute(src[i], des[i], 'data-endline');
var rawSrc = cloneAndRemoveDataAttr(src[i]);
var rawTar = cloneAndRemoveDataAttr(tar[i]);
if (!rawSrc || !rawTar || rawSrc.outerHTML != rawTar.outerHTML) {
start = i;
break;
}
}
//tar end
for (var i = 1; i <= tar.length; i++) {
var srcLength = src.length;
var tarLength = tar.length;
copyAttribute(src[srcLength - i], des[srcLength - i], 'data-startline');
copyAttribute(src[srcLength - i], des[srcLength - i], 'data-endline');
var rawSrc = cloneAndRemoveDataAttr(src[srcLength - i]);
var rawTar = cloneAndRemoveDataAttr(tar[tarLength - i]);
if (!rawSrc || !rawTar || rawSrc.outerHTML != rawTar.outerHTML) {
tarEnd = tar.length - i;
break;
}
}
//src end
for (var i = 1; i <= src.length; i++) {
var srcLength = src.length;
var tarLength = tar.length;
copyAttribute(src[srcLength - i], des[srcLength - i], 'data-startline');
copyAttribute(src[srcLength - i], des[srcLength - i], 'data-endline');
var rawSrc = cloneAndRemoveDataAttr(src[srcLength - i]);
var rawTar = cloneAndRemoveDataAttr(tar[tarLength - i]);
if (!rawSrc || !rawTar || rawSrc.outerHTML != rawTar.outerHTML) {
srcEnd = src.length - i;
break;
}
}
//check if tar end overlap tar start
var overlap = 0;
for (var i = start; i >= 0; i--) {
var rawTarStart = cloneAndRemoveDataAttr(tar[i-1]);
var rawTarEnd = cloneAndRemoveDataAttr(tar[tarEnd+1+start-i]);
if(rawTarStart && rawTarEnd && rawTarStart.outerHTML == rawTarEnd.outerHTML)
overlap++;
else
break;
}
if(debug)
console.log('overlap:' + overlap);
//show diff content
if(debug) {
console.log('start:' + start);
console.log('tarEnd:' + tarEnd);
console.log('srcEnd:' + srcEnd);
console.log('des[start]:' + des[start]);
}
tarEnd += overlap;
srcEnd += overlap;
//add new element
var newElements = "";
for (var j = start; j <= srcEnd; j++) {
if(debug)
srcChanged += src[j].outerHTML;
newElements += src[j].outerHTML;
}
if(newElements && des[start]) {
$(newElements).insertBefore(des[start]);
} else {
$(newElements).insertAfter(des[des.length-1]);
}
if(debug)
console.log(srcChanged);
//remove old element
if(debug)
var tarChanged = "";
for (var j = start; j <= tarEnd; j++) {
if(debug)
tarChanged += tar[j].outerHTML;
if(des[j])
des[j].remove();
}
if(debug) {
console.log(tarChanged);
var srcChanged = "";
}
}
}
function cloneAndRemoveDataAttr(el) {
if(!el) return;
var rawEl = $(el).clone(true)[0];
rawEl.removeAttribute('data-startline');
rawEl.removeAttribute('data-endline');
return rawEl;
}
function copyAttribute(src, des, attr) {
if (src && src.getAttribute(attr) && des)
des.setAttribute(attr, src.getAttribute(attr));
}
//
// Inject line numbers for sync scroll. Notes:
//
// - We track only headings and paragraphs on first level. That's enougth.
// - Footnotes content causes jumps. Level limit filter it automatically.
//
md.renderer.rules.paragraph_open = function (tokens, idx) {
var line;
if (tokens[idx].lines && tokens[idx].level === 0) {
var startline = tokens[idx].lines[0] + 1;
var endline = tokens[idx].lines[1];
return '
';
}
return '';
};
md.renderer.rules.heading_open = function (tokens, idx) {
var line;
if (tokens[idx].lines && tokens[idx].level === 0) {
var startline = tokens[idx].lines[0] + 1;
var endline = tokens[idx].lines[1];
return '';
}
return '';
};
editor.on('scroll', _.debounce(syncScrollToView, syncScrollDelay));
//ui.area.view.on('scroll', _.debounce(syncScrollToEdit, 50));
var scrollMap;
// Build offsets for each line (lines can be wrapped)
// That's a bit dirty to process each line everytime, but ok for demo.
// Optimizations are required only for big texts.
function buildScrollMap() {
var i, offset, nonEmptyList, pos, a, b, lineHeightMap, linesCount,
acc, sourceLikeDiv, textarea = ui.area.codemirror,
_scrollMap;
sourceLikeDiv = $('').css({
position: 'absolute',
visibility: 'hidden',
height: 'auto',
width: editor.getScrollInfo().clientWidth,
'font-size': textarea.css('font-size'),
'font-family': textarea.css('font-family'),
'line-height': textarea.css('line-height'),
'white-space': textarea.css('white-space')
}).appendTo('body');
offset = ui.area.view.scrollTop() - ui.area.view.offset().top;
_scrollMap = [];
nonEmptyList = [];
lineHeightMap = [];
acc = 0;
editor.getValue().split('\n').forEach(function (str) {
var h, lh;
lineHeightMap.push(acc);
if (str.length === 0) {
acc++;
return;
}
sourceLikeDiv.text(str);
h = parseFloat(sourceLikeDiv.css('height'));
lh = parseFloat(sourceLikeDiv.css('line-height'));
acc += Math.round(h / lh);
});
sourceLikeDiv.remove();
lineHeightMap.push(acc);
linesCount = acc;
for (i = 0; i < linesCount; i++) {
_scrollMap.push(-1);
}
nonEmptyList.push(0);
_scrollMap[0] = 0;
ui.area.markdown.find('.part').each(function (n, el) {
var $el = $(el),
t = $el.data('startline');
if (t === '') {
return;
}
t = lineHeightMap[t];
if (t !== 0) {
nonEmptyList.push(t);
}
_scrollMap[t] = Math.round($el.offset().top + offset);
});
nonEmptyList.push(linesCount);
_scrollMap[linesCount] = ui.area.view[0].scrollHeight;
pos = 0;
for (i = 1; i < linesCount; i++) {
if (_scrollMap[i] !== -1) {
pos++;
continue;
}
a = nonEmptyList[pos];
b = nonEmptyList[pos + 1];
_scrollMap[i] = Math.round((_scrollMap[b] * (i - a) + _scrollMap[a] * (b - i)) / (b - a));
}
return _scrollMap;
}
function syncScrollToView() {
var lineNo, posTo;
var scrollInfo = editor.getScrollInfo();
if (!scrollMap) {
scrollMap = buildScrollMap();
}
lineNo = Math.floor(scrollInfo.top / editor.defaultTextHeight());
posTo = scrollMap[lineNo];
ui.area.view.stop(true).animate({scrollTop: posTo}, scrollAnimatePeriod);
}
function syncScrollToEdit() {
var lineNo, posTo;
if (!scrollMap) {
scrollMap = buildScrollMap();
}
var top = ui.area.view.scrollTop();
lineNo = closestIndex(top, scrollMap);
posTo = lineNo * editor.defaultTextHeight();
editor.scrollTo(0, posTo);
}
function closestIndex(num, arr) {
var curr = arr[0];
var index = 0;
var diff = Math.abs(num - curr);
for (var val = 0; val < arr.length; val++) {
var newdiff = Math.abs(num - arr[val]);
if (newdiff < diff) {
diff = newdiff;
curr = arr[val];
index = val;
}
}
return index;
}