Patch Realtime into CodeMirror in CryptPad
This commit is contained in:
Yann Flory
358
www/code/realtime-wysiwyg.js
Normal file
358
www/code/realtime-wysiwyg.js
Normal file
@@ -0,0 +1,358 @@
|
||||
/*
|
||||
* Copyright 2014 XWiki SAS
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
define([
|
||||
'/code/html-patcher.js',
|
||||
'/code/errorbox.js',
|
||||
'/common/messages.js',
|
||||
'/bower_components/reconnectingWebsocket/reconnecting-websocket.js',
|
||||
'/common/crypto.js',
|
||||
'/common/toolbar.js',
|
||||
'/code/rangy.js',
|
||||
'/common/chainpad.js',
|
||||
'/common/otaml.js',
|
||||
'/bower_components/jquery/dist/jquery.min.js',
|
||||
], function (HTMLPatcher, ErrorBox, Messages, ReconnectingWebSocket, Crypto, Toolbar) {
|
||||
|
||||
window.ErrorBox = ErrorBox;
|
||||
|
||||
var $ = window.jQuery;
|
||||
var Rangy = window.rangy;
|
||||
Rangy.init();
|
||||
var ChainPad = window.ChainPad;
|
||||
var Otaml = window.Otaml;
|
||||
|
||||
var PARANOIA = true;
|
||||
|
||||
var module = { exports: {} };
|
||||
|
||||
/**
|
||||
* If an error is encountered but it is recoverable, do not immediately fail
|
||||
* but if it keeps firing errors over and over, do fail.
|
||||
*/
|
||||
var MAX_RECOVERABLE_ERRORS = 15;
|
||||
|
||||
/** Maximum number of milliseconds of lag before we fail the connection. */
|
||||
var MAX_LAG_BEFORE_DISCONNECT = 20000;
|
||||
|
||||
// ------------------ Trapping Keyboard Events ---------------------- //
|
||||
|
||||
var bindEvents = function (element, events, callback, unbind) {
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
var e = events[i];
|
||||
if (element.addEventListener) {
|
||||
if (unbind) {
|
||||
element.removeEventListener(e, callback, false);
|
||||
} else {
|
||||
element.addEventListener(e, callback, false);
|
||||
}
|
||||
} else {
|
||||
if (unbind) {
|
||||
element.detachEvent('on' + e, callback);
|
||||
} else {
|
||||
element.attachEvent('on' + e, callback);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var bindAllEvents = function (cmDiv, onEvent, unbind)
|
||||
{
|
||||
bindEvents(cmDiv,
|
||||
['textInput', 'keydown', 'keyup', 'select', 'cut', 'paste', 'mousedown','mouseup','click'],
|
||||
onEvent,
|
||||
unbind);
|
||||
};
|
||||
|
||||
var isSocketDisconnected = function (socket, realtime) {
|
||||
var sock = socket._socket;
|
||||
return sock.readyState === sock.CLOSING
|
||||
|| sock.readyState === sock.CLOSED
|
||||
|| (realtime.getLag().waiting && realtime.getLag().lag > MAX_LAG_BEFORE_DISCONNECT);
|
||||
};
|
||||
|
||||
var abort = function (socket, realtime) {
|
||||
realtime.abort();
|
||||
realtime.toolbar.failed();
|
||||
try { socket._socket.close(); } catch (e) { }
|
||||
};
|
||||
|
||||
var createDebugInfo = function (cause, realtime, docHTML, allMessages) {
|
||||
return JSON.stringify({
|
||||
cause: cause,
|
||||
realtimeUserDoc: realtime.getUserDoc(),
|
||||
realtimeAuthDoc: realtime.getAuthDoc(),
|
||||
docHTML: docHTML,
|
||||
allMessages: allMessages,
|
||||
});
|
||||
};
|
||||
|
||||
var handleError = function (socket, realtime, err, docHTML, allMessages) {
|
||||
var internalError = createDebugInfo(err, realtime, docHTML, allMessages);
|
||||
abort(socket, realtime);
|
||||
ErrorBox.show('error', docHTML, internalError);
|
||||
};
|
||||
|
||||
var getDocHTML = function (doc) {
|
||||
return $(doc).val();
|
||||
};
|
||||
|
||||
var transformCursorCMRemove = function(text, cursor, pos, length) {
|
||||
var newCursor = cursor;
|
||||
var textLines = text.substr(0, pos).split("\n");
|
||||
var removedTextLineNumber = textLines.length-1;
|
||||
var removedTextColumnIndex = textLines[textLines.length-1].length;
|
||||
var removedLines = text.substr(pos, length).split("\n").length - 1;
|
||||
if(cursor.line > (removedTextLineNumber + removedLines)) {
|
||||
newCursor.line -= removedLines;
|
||||
}
|
||||
else if(removedLines > 0 && cursor.line === (removedTextLineNumber+removedLines)) {
|
||||
var lastLineCharsRemoved = text.substr(pos, length).split("\n")[removedLines].length;
|
||||
if(cursor.ch >= lastLineCharsRemoved) {
|
||||
newCursor.line = removedTextLineNumber;
|
||||
newCursor.ch = removedTextColumnIndex + cursor.ch - lastLineCharsRemoved;
|
||||
}
|
||||
else {
|
||||
newCursor.line -= removedLines;
|
||||
newCursor.ch = removedTextColumnIndex;
|
||||
}
|
||||
}
|
||||
else if(cursor.line === removedTextLineNumber && cursor.ch > removedTextLineNumber) {
|
||||
newCursor.ch -= Math.min(length, cursor.ch-removedTextLineNumber);
|
||||
}
|
||||
return newCursor;
|
||||
};
|
||||
var transformCursorCMInsert = function(oldtext, cursor, pos, text) {
|
||||
var newCursor = cursor;
|
||||
var textLines = oldtext.substr(0, pos).split("\n");
|
||||
var addedTextLineNumber = textLines.length-1;
|
||||
var addedTextColumnIndex = textLines[textLines.length-1].length;
|
||||
var addedLines = text.split("\n").length - 1;
|
||||
if(cursor.line > addedTextLineNumber) {
|
||||
newCursor.line += addedLines;
|
||||
}
|
||||
else if(cursor.line === addedTextLineNumber && cursor.ch > addedTextColumnIndex) {
|
||||
newCursor.line += addedLines;
|
||||
if(addedLines > 0) {
|
||||
newCursor.ch = newCursor.ch - addedTextColumnIndex + text.split("\n")[addedLines].length;
|
||||
}
|
||||
else {
|
||||
newCursor.ch += text.split("\n")[addedLines].length;
|
||||
}
|
||||
}
|
||||
return newCursor;
|
||||
};
|
||||
|
||||
var makeWebsocket = function (url) {
|
||||
var socket = new ReconnectingWebSocket(url);
|
||||
var out = {
|
||||
onOpen: [],
|
||||
onClose: [],
|
||||
onError: [],
|
||||
onMessage: [],
|
||||
send: function (msg) { socket.send(msg); },
|
||||
close: function () { socket.close(); },
|
||||
_socket: socket
|
||||
};
|
||||
var mkHandler = function (name) {
|
||||
return function (evt) {
|
||||
for (var i = 0; i < out[name].length; i++) {
|
||||
if (out[name][i](evt) === false) { return; }
|
||||
}
|
||||
};
|
||||
};
|
||||
socket.onopen = mkHandler('onOpen');
|
||||
socket.onclose = mkHandler('onClose');
|
||||
socket.onerror = mkHandler('onError');
|
||||
socket.onmessage = mkHandler('onMessage');
|
||||
return out;
|
||||
};
|
||||
|
||||
var start = module.exports.start =
|
||||
function (window, websocketUrl, userName, channel, cryptKey)
|
||||
{
|
||||
var passwd = 'y';
|
||||
//var wysiwygDiv = window.document.getElementById('cke_1_contents');
|
||||
var doc = window.document.getElementById('editor1');
|
||||
var cmDiv = window.document.getElementsByClassName('CodeMirror')[0];
|
||||
var cmEditor = cmDiv.CodeMirror;
|
||||
//var ifr = wysiwygDiv.getElementsByTagName('iframe')[0];
|
||||
var socket = makeWebsocket(websocketUrl);
|
||||
var onEvent = function () { };
|
||||
|
||||
var allMessages = [];
|
||||
var isErrorState = false;
|
||||
var initializing = true;
|
||||
var recoverableErrorCount = 0;
|
||||
var error = function (recoverable, err) {
|
||||
console.log(new Error().stack);
|
||||
console.log('error: ' + err.stack);
|
||||
if (recoverable && recoverableErrorCount++ < MAX_RECOVERABLE_ERRORS) { return; }
|
||||
var realtime = socket.realtime;
|
||||
var docHtml = getDocHTML(doc);
|
||||
isErrorState = true;
|
||||
handleError(socket, realtime, err, docHtml, allMessages);
|
||||
};
|
||||
var attempt = function (func) {
|
||||
return function () {
|
||||
var e;
|
||||
try { return func.apply(func, arguments); } catch (ee) { e = ee; }
|
||||
if (e) {
|
||||
console.log(e.stack);
|
||||
error(true, e);
|
||||
}
|
||||
};
|
||||
};
|
||||
var checkSocket = function () {
|
||||
if (isSocketDisconnected(socket, socket.realtime) && !socket.intentionallyClosing) {
|
||||
//isErrorState = true;
|
||||
//abort(socket, socket.realtime);
|
||||
//ErrorBox.show('disconnected', getDocHTML(doc));
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
socket.onOpen.push(function (evt) {
|
||||
if (!initializing) {
|
||||
socket.realtime.start();
|
||||
return;
|
||||
}
|
||||
|
||||
var realtime = socket.realtime =
|
||||
ChainPad.create(userName,
|
||||
passwd,
|
||||
channel,
|
||||
getDocHTML(doc),
|
||||
{ transformFunction: Otaml.transform });
|
||||
|
||||
var toolbar = realtime.toolbar =
|
||||
Toolbar.create(window.$('#cme_toolbox'), userName, realtime);
|
||||
|
||||
onEvent = function () {
|
||||
if (isErrorState) { return; }
|
||||
if (initializing) { return; }
|
||||
|
||||
var oldDocText = realtime.getUserDoc();
|
||||
var docText = getDocHTML(doc);
|
||||
var op = attempt(Otaml.makeTextOperation)(oldDocText, docText);
|
||||
|
||||
if (!op) { return; }
|
||||
|
||||
if (op.toRemove > 0) {
|
||||
attempt(realtime.remove)(op.offset, op.toRemove);
|
||||
}
|
||||
if (op.toInsert.length > 0) {
|
||||
attempt(realtime.insert)(op.offset, op.toInsert);
|
||||
}
|
||||
|
||||
if (realtime.getUserDoc() !== docText) {
|
||||
error(false, 'realtime.getUserDoc() !== docText');
|
||||
}
|
||||
};
|
||||
|
||||
var userDocBeforePatch;
|
||||
var incomingPatch = function () {
|
||||
if (isErrorState || initializing) { return; }
|
||||
userDocBeforePatch = userDocBeforePatch || getDocHTML(doc);
|
||||
if (PARANOIA && userDocBeforePatch != getDocHTML(doc)) {
|
||||
error(false, "userDocBeforePatch != getDocHTML(doc)");
|
||||
}
|
||||
var op = attempt(Otaml.makeTextOperation)(userDocBeforePatch, realtime.getUserDoc());
|
||||
var oldValue = getDocHTML(doc);
|
||||
var newValue = realtime.getUserDoc();
|
||||
// Fix cursor and/or selection
|
||||
var oldCursor = cmEditor.getCursor();
|
||||
var oldCursorCMStart = cmEditor.getCursor('from');
|
||||
var oldCursorCMEnd = cmEditor.getCursor('to');
|
||||
var newCursor;
|
||||
var newSelection;
|
||||
if(oldCursorCMStart !== oldCursorCMEnd) { // Selection
|
||||
if (op.toRemove > 0) {
|
||||
var newSelection = [transformCursorCMRemove(oldValue, oldCursorCMStart, op.offset, op.toRemove), transformCursorCMRemove(oldValue, oldCursorCMEnd, op.offset, op.toRemove)];
|
||||
}
|
||||
if (op.toInsert.length > 0) {
|
||||
var newSelection = [transformCursorCMInsert(oldValue, oldCursorCMStart, op.offset, op.toInsert), transformCursorCMInsert(oldValue, oldCursorCMEnd, op.offset, op.toInsert)];
|
||||
}
|
||||
}
|
||||
else { // Cursor
|
||||
if (op.toRemove > 0) {
|
||||
var newCursor = transformCursorCMRemove(oldValue, oldCursor, op.offset, op.toRemove);
|
||||
}
|
||||
if (op.toInsert.length > 0) {
|
||||
var newCursor = transformCursorCMInsert(oldValue, oldCursor, op.offset, op.toInsert);
|
||||
}
|
||||
}
|
||||
$(doc).val(newValue);
|
||||
cmEditor.setValue(newValue);
|
||||
if(newCursor) {
|
||||
cmEditor.setCursor(newCursor);
|
||||
}
|
||||
else {
|
||||
cmEditor.setSelection(newSelection[0], newSelection[1]);
|
||||
}
|
||||
};
|
||||
|
||||
realtime.onUserListChange(function (userList) {
|
||||
if (!initializing || userList.indexOf(userName) === -1) { return; }
|
||||
// if we spot ourselves being added to the document, we'll switch
|
||||
// 'initializing' off because it means we're fully synced.
|
||||
initializing = false;
|
||||
incomingPatch();
|
||||
});
|
||||
|
||||
socket.onMessage.push(function (evt) {
|
||||
if (isErrorState) { return; }
|
||||
var message = Crypto.decrypt(evt.data, cryptKey);
|
||||
allMessages.push(message);
|
||||
if (!initializing) {
|
||||
if (PARANOIA) { onEvent(); }
|
||||
userDocBeforePatch = realtime.getUserDoc();
|
||||
}
|
||||
realtime.message(message);
|
||||
});
|
||||
realtime.onMessage(function (message) {
|
||||
if (isErrorState) { return; }
|
||||
message = Crypto.encrypt(message, cryptKey);
|
||||
try {
|
||||
socket.send(message);
|
||||
} catch (e) {
|
||||
error(true, e.stack);
|
||||
}
|
||||
});
|
||||
|
||||
realtime.onPatch(incomingPatch);
|
||||
|
||||
bindAllEvents(cmDiv, onEvent, false);
|
||||
|
||||
setInterval(function () {
|
||||
if (isErrorState || checkSocket()) {
|
||||
toolbar.reconnecting();
|
||||
}
|
||||
}, 200);
|
||||
|
||||
realtime.start();
|
||||
toolbar.connected();
|
||||
|
||||
//console.log('started');
|
||||
});
|
||||
return {
|
||||
onEvent: function () { onEvent(); }
|
||||
};
|
||||
};
|
||||
|
||||
return module.exports;
|
||||
});
|
||||
Reference in New Issue
Block a user