' + icon + ' ' + user.name + '
');
//cursortag[0].style.background = color;
cursortag[0].style.color = user.color;
cursor.attr('data-mode', 'state');
cursor.hover(
function () {
if (cursor.attr('data-mode') == 'hover')
cursortag.stop(true).fadeIn("fast");
},
function () {
if (cursor.attr('data-mode') == 'hover')
cursortag.stop(true).fadeOut("fast");
});
function switchMode(ele) {
if (ele.attr('data-mode') == 'state')
ele.attr('data-mode', 'hover');
else if (ele.attr('data-mode') == 'hover')
ele.attr('data-mode', 'state');
}
function switchTag(ele) {
if (ele.css('display') === 'none')
ele.stop(true).fadeIn("fast");
else
ele.stop(true).fadeOut("fast");
}
var hideCursorTagDelay = 2000;
var hideCursorTagTimer = null;
function hideCursorTag() {
if (cursor.attr('data-mode') == 'hover')
cursortag.fadeOut("fast");
}
cursor.on('touchstart', function (e) {
var display = cursortag.css('display');
cursortag.stop(true).fadeIn("fast");
clearTimeout(hideCursorTagTimer);
hideCursorTagTimer = setTimeout(hideCursorTag, hideCursorTagDelay);
if (display === 'none') {
e.preventDefault();
e.stopPropagation();
}
});
cursortag.on('mousedown touchstart', function (e) {
if (cursor.attr('data-mode') == 'state')
switchTag(cursortag);
switchMode(cursor);
e.preventDefault();
e.stopPropagation();
});
cursor.append(cursorbar);
cursor.append(cursortag);
cursor[0].style.left = coord.left + 'px';
cursor[0].style.top = coord.top + 'px';
$('.other-cursors').append(cursor);
if (!user.idle)
cursor.stop(true).fadeIn();
checkCursorTag(coord, cursortag);
} else {
var cursor = $('#' + user.id);
cursor.attr('data-line', user.cursor.line);
cursor.attr('data-ch', user.cursor.ch);
var cursorbar = cursor.find('.cursorbar');
cursorbar[0].style.height = defaultTextHeight + 'px';
cursorbar[0].style.borderLeft = '2px solid ' + user.color;
var cursortag = cursor.find('.cursortag');
cursortag.find('i').removeClass().addClass('fa').addClass(iconClass);
cursortag.find(".name").text(user.name);
if (cursor.css('display') === 'none') {
cursor[0].style.left = coord.left + 'px';
cursor[0].style.top = coord.top + 'px';
} else {
cursor.animate({
"left": coord.left,
"top": coord.top
}, {
duration: cursorAnimatePeriod,
queue: false
});
}
if (user.idle && cursor.css('display') !== 'none')
cursor.stop(true).fadeOut();
else if (!user.idle && cursor.css('display') === 'none')
cursor.stop(true).fadeIn();
checkCursorTag(coord, cursortag);
}
}
//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.compressToUTF16(JSON.stringify(op)));
}
isDirty = true;
clearTimeout(doneTypingTimer);
doneTypingTimer = setTimeout(doneTyping, doneTypingDelay);
});
editor.on('focus', function (cm) {
for (var i = 0; i < onlineUsers.length; i++) {
if (onlineUsers[i].id == personalInfo.id) {
onlineUsers[i].cursor = editor.getCursor();
}
}
personalInfo['cursor'] = editor.getCursor();
socket.emit('cursor focus', editor.getCursor());
});
var cursorActivityTimer = null;
editor.on('cursorActivity', function (cm) {
clearTimeout(cursorActivityTimer);
cursorActivityTimer = setTimeout(cursorActivity, cursorActivityDelay);
});
function cursorActivity() {
if (editorHasFocus() && !Visibility.hidden()) {
for (var i = 0; i < onlineUsers.length; i++) {
if (onlineUsers[i].id == personalInfo.id) {
onlineUsers[i].cursor = editor.getCursor();
}
}
personalInfo['cursor'] = editor.getCursor();
socket.emit('cursor activity', editor.getCursor());
}
}
editor.on('blur', function (cm) {
for (var i = 0; i < onlineUsers.length; i++) {
if (onlineUsers[i].id == personalInfo.id) {
onlineUsers[i].cursor = null;
}
}
personalInfo['cursor'] = null;
socket.emit('cursor blur');
});
function saveInfo() {
var scrollbarStyle = editor.getOption('scrollbarStyle');
var left = $(document.body).scrollLeft();
var top = $(document.body).scrollTop();
switch (currentMode) {
case modeType.edit:
if (scrollbarStyle == 'native') {
lastInfo.edit.scroll.left = left;
lastInfo.edit.scroll.top = top;
} else {
lastInfo.edit.scroll = editor.getScrollInfo();
}
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() {
var scrollbarStyle = editor.getOption('scrollbarStyle');
if (lastInfo.needRestore) {
var line = lastInfo.edit.cursor.line;
var ch = lastInfo.edit.cursor.ch;
editor.setCursor(line, ch);
switch (currentMode) {
case modeType.edit:
if (scrollbarStyle == 'native') {
$(document.body).scrollLeft(lastInfo.edit.scroll.left);
$(document.body).scrollTop(lastInfo.edit.scroll.top);
} else {
var left = lastInfo.edit.scroll.left;
var top = lastInfo.edit.scroll.top;
editor.scrollIntoView();
editor.scrollTo(left, 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() {
emitRefresh();
updateView();
}
function finishChange() {
updateView();
}
function emitRefresh() {
var value = editor.getValue();
socket.emit('refresh', LZString.compressToUTF16(value));
}
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());
if (result && lastResult && result.length != lastResult.length)
updateDataAttrs(result, ui.area.markdown.children().toArray());
lastResult = $(result).clone();
finishView(ui.area.view);
writeHistory(ui.area.markdown);
isDirty = false;
clearMap();
buildMap();
}
function updateDataAttrs(src, des) {
//sync data attr startline and endline
for (var i = 0; i < src.length; i++) {
copyAttribute(src[i], des[i], 'data-startline');
copyAttribute(src[i], des[i], 'data-endline');
}
}
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 + 1; 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 + 1; 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);
}
tarEnd += overlap;
srcEnd += overlap;
var repeatAdd = (start - srcEnd) < (start - tarEnd);
var repeatDiff = Math.abs(srcEnd - tarEnd) - 1;
//push new elements
var newElements = [];
if (srcEnd >= start) {
for (var j = start; j <= srcEnd; j++) {
if (!src[j]) continue;
newElements.push(src[j].outerHTML);
}
} else if (repeatAdd) {
for (var j = srcEnd - repeatDiff; j <= srcEnd; j++) {
if (!des[j]) continue;
newElements.push(des[j].outerHTML);
}
}
//push remove elements
var removeElements = [];
if (tarEnd >= start) {
for (var j = start; j <= tarEnd; j++) {
if (!des[j]) continue;
removeElements.push(des[j]);
}
} else if (!repeatAdd) {
for (var j = start; j <= start + repeatDiff; j++) {
if (!des[j]) continue;
removeElements.push(des[j]);
}
}
//add elements
if (debug) {
console.log('ADD ELEMENTS');
console.log(newElements.join('\n'));
}
if (des[start])
$(newElements.join('')).insertBefore(des[start]);
else
$(newElements.join('')).insertAfter(des[start - 1]);
//remove elements
if (debug)
console.log('REMOVE ELEMENTS');
for (var j = 0; j < removeElements.length; j++) {
if (debug) {
console.log(removeElements[j].outerHTML);
}
if (removeElements[j])
removeElements[j].remove();
}
}
}
function cloneAndRemoveDataAttr(el) {
if (!el) return;
var rawEl = $(el).clone()[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));
}
if ($('.cursor-menu').length <= 0) {
$("").insertAfter('.CodeMirror-cursors');
}
var upSideDown = false;
var menuMargin = 60;
function checkCursorMenu() {
var dropdown = $('.cursor-menu .dropdown-menu');
var cursor = editor.getCursor();
var scrollInfo = editor.getScrollInfo();
if (!dropdown.hasClass('other-cursor'))
dropdown.addClass('other-cursor');
dropdown.attr('data-line', cursor.line);
dropdown.attr('data-ch', cursor.ch);
var coord = editor.charCoords({
line: cursor.line,
ch: cursor.ch
}, 'windows');
var viewport = editor.getViewport();
var viewportHeight = (viewport.to - viewport.from) * editor.defaultTextHeight();
var editorWidth = ui.area.codemirror.width();
var editorHeight = ui.area.codemirror.height();
var width = dropdown.width();
var height = dropdown.height();
var left = coord.left;
var top = coord.top;
var offsetLeft = 0;
var offsetTop = defaultTextHeight;
if (left + width + offsetLeft > editorWidth - menuMargin)
offsetLeft = -(left + width - editorWidth + menuMargin);
if (top + height + offsetTop > Math.max(viewportHeight, editorHeight) + menuMargin && top - height > menuMargin) {
offsetTop = -(height + defaultTextHeight);
upSideDown = true;
} else {
upSideDown = false;
}
dropdown.attr('data-offset-left', offsetLeft);
dropdown.attr('data-offset-top', offsetTop);
dropdown[0].style.left = left + offsetLeft + 'px';
dropdown[0].style.top = top + offsetTop + 'px';
}
var isInCode = false;
function check(text) {
var cursor = editor.getCursor();
text = [];
for (var i = 0; i < cursor.line; i++)
text.push(editor.getLine(i));
text = text.join('\n') + '\n' + editor.getLine(cursor.line).slice(0, cursor.ch);
//console.log(text);
var match;
match = text.match(/`{3,}/g);
if (match && match.length % 2) {
isInCode = true;
} else {
match = text.match(/`/g);
if (match && match.length % 2) {
isInCode = true;
} else {
isInCode = false;
}
}
}
$(editor.getInputField())
.textcomplete([
{ // emoji strategy
match: /(?:^|\n|)\B:([\-+\w]*)$/,
search: function (term, callback) {
callback($.map(emojify.emojiNames, function (emoji) {
return emoji.indexOf(term) === 0 ? emoji : null;
}));
checkCursorMenu();
},
template: function (value) {
return '
' + value;
},
replace: function (value) {
return ':' + value + ':';
},
index: 1,
context: function (text) {
check(text);
return !isInCode;
}
},
{ // Code block language strategy
langs: supportCodeModes,
match: /(^|\n)```(\w*)$/,
search: function (term, callback) {
callback($.map(this.langs, function (lang) {
return lang.indexOf(term) === 0 ? lang : null;
}));
checkCursorMenu();
},
replace: function (lang) {
return '$1```' + lang + '=\n\n```';
},
done: function () {
editor.doc.cm.moveV(-1, "line");
},
context: function () {
return isInCode;
}
},
{ //header
match: /(?:^|\n)(\s{0,3})(#{1,6}\w*)$/,
search: function (term, callback) {
callback($.map(supportHeaders, function (header) {
return header.search.indexOf(term) === 0 ? header.text : null;
}));
checkCursorMenu();
},
replace: function (value) {
return '$1' + value;
},
context: function (text) {
return !isInCode;
}
},
{ //referral
match: /(^|\n|\s)(\!|\!|\[\])(\w*)$/,
search: function (term, callback) {
callback($.map(supportReferrals, function (referral) {
return referral.search.indexOf(term) === 0 ? referral.text : null;
}));
checkCursorMenu();
},
replace: function (value) {
return '$1' + value;
},
context: function (text) {
return !isInCode;
}
},
{ //externals
match: /(^|\n|\s)\{\}(\w*)$/,
search: function (term, callback) {
callback($.map(supportExternals, function (external) {
return external.search.indexOf(term) === 0 ? external.text : null;
}));
checkCursorMenu();
},
replace: function (value) {
return '$1' + value;
},
context: function (text) {
return !isInCode;
}
},
{ //blockquote personal info & general info
match: /(^|\n|\s|\>.*)\[(\w*)=$/,
search: function (term, callback) {
var list = typeof personalInfo[term] != 'undefined' ? [personalInfo[term]] : [];
$.map(supportGenerals, function (general) {
if (general.search.indexOf(term) === 0)
list.push(general.command());
});
callback(list);
checkCursorMenu();
},
replace: function (value) {
return '$1[$2=' + value;
},
context: function (text) {
return !isInCode;
}
},
{ //blockquote quick start tag
match: /(^.*(?!>)\n|)(\>\s{0,1})$/,
search: function (term, callback) {
var self = '[name=' + personalInfo.name + '] [time=' + moment().format('llll') + '] [color=' + personalInfo.color + ']';
callback([self]);
checkCursorMenu();
},
template: function (value) {
return '[Your name, time, color tags]';
},
replace: function (value) {
return '$1$2' + value;
},
context: function (text) {
return !isInCode;
}
}
], {
appendTo: $('.cursor-menu')
})
.on({
'textComplete:select': function (e, value, strategy) {
//NA
},
'textComplete:show': function (e) {
checkCursorMenu();
$(this).data('autocompleting', true);
editor.setOption("extraKeys", {
"Up": function () {
return CodeMirror.PASS;
},
"Right": function () {
editor.doc.cm.execCommand("goCharRight");
},
"Down": function () {
return CodeMirror.PASS;
},
"Left": function () {
editor.doc.cm.execCommand("goCharLeft");
},
"Enter": function () {
return CodeMirror.PASS;
},
"Backspace": function () {
editor.doc.cm.execCommand("delCharBefore");
checkCursorMenu();
}
});
},
'textComplete:hide': function (e) {
$(this).data('autocompleting', false);
editor.setOption("extraKeys", defaultExtraKeys);
}
});
' + value;
},
replace: function (value) {
return ':' + value + ':';
},
index: 1,
context: function (text) {
check(text);
return !isInCode;
}
},
{ // Code block language strategy
langs: supportCodeModes,
match: /(^|\n)```(\w*)$/,
search: function (term, callback) {
callback($.map(this.langs, function (lang) {
return lang.indexOf(term) === 0 ? lang : null;
}));
checkCursorMenu();
},
replace: function (lang) {
return '$1```' + lang + '=\n\n```';
},
done: function () {
editor.doc.cm.moveV(-1, "line");
},
context: function () {
return isInCode;
}
},
{ //header
match: /(?:^|\n)(\s{0,3})(#{1,6}\w*)$/,
search: function (term, callback) {
callback($.map(supportHeaders, function (header) {
return header.search.indexOf(term) === 0 ? header.text : null;
}));
checkCursorMenu();
},
replace: function (value) {
return '$1' + value;
},
context: function (text) {
return !isInCode;
}
},
{ //referral
match: /(^|\n|\s)(\!|\!|\[\])(\w*)$/,
search: function (term, callback) {
callback($.map(supportReferrals, function (referral) {
return referral.search.indexOf(term) === 0 ? referral.text : null;
}));
checkCursorMenu();
},
replace: function (value) {
return '$1' + value;
},
context: function (text) {
return !isInCode;
}
},
{ //externals
match: /(^|\n|\s)\{\}(\w*)$/,
search: function (term, callback) {
callback($.map(supportExternals, function (external) {
return external.search.indexOf(term) === 0 ? external.text : null;
}));
checkCursorMenu();
},
replace: function (value) {
return '$1' + value;
},
context: function (text) {
return !isInCode;
}
},
{ //blockquote personal info & general info
match: /(^|\n|\s|\>.*)\[(\w*)=$/,
search: function (term, callback) {
var list = typeof personalInfo[term] != 'undefined' ? [personalInfo[term]] : [];
$.map(supportGenerals, function (general) {
if (general.search.indexOf(term) === 0)
list.push(general.command());
});
callback(list);
checkCursorMenu();
},
replace: function (value) {
return '$1[$2=' + value;
},
context: function (text) {
return !isInCode;
}
},
{ //blockquote quick start tag
match: /(^.*(?!>)\n|)(\>\s{0,1})$/,
search: function (term, callback) {
var self = '[name=' + personalInfo.name + '] [time=' + moment().format('llll') + '] [color=' + personalInfo.color + ']';
callback([self]);
checkCursorMenu();
},
template: function (value) {
return '[Your name, time, color tags]';
},
replace: function (value) {
return '$1$2' + value;
},
context: function (text) {
return !isInCode;
}
}
], {
appendTo: $('.cursor-menu')
})
.on({
'textComplete:select': function (e, value, strategy) {
//NA
},
'textComplete:show': function (e) {
checkCursorMenu();
$(this).data('autocompleting', true);
editor.setOption("extraKeys", {
"Up": function () {
return CodeMirror.PASS;
},
"Right": function () {
editor.doc.cm.execCommand("goCharRight");
},
"Down": function () {
return CodeMirror.PASS;
},
"Left": function () {
editor.doc.cm.execCommand("goCharLeft");
},
"Enter": function () {
return CodeMirror.PASS;
},
"Backspace": function () {
editor.doc.cm.execCommand("delCharBefore");
checkCursorMenu();
}
});
},
'textComplete:hide': function (e) {
$(this).data('autocompleting', false);
editor.setOption("extraKeys", defaultExtraKeys);
}
});