/* * 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 . */ define([ 'html-patcher', 'errorbox', 'messages', 'rangy', 'chainpad', 'otaml', 'bower/jquery/dist/jquery.min', 'bower/tweetnacl/nacl-fast.min' ], function (HTMLPatcher, ErrorBox, Messages) { window.ErrorBox = ErrorBox; var $ = window.jQuery; var Rangy = window.rangy; Rangy.init(); var ChainPad = window.ChainPad; var Otaml = window.Otaml; var Nacl = window.nacl; 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; /** Id of the element for getting debug info. */ var DEBUG_LINK_CLS = 'rtwysiwyg-debug-link'; /** Id of the div containing the user list. */ var USER_LIST_CLS = 'rtwysiwyg-user-list'; /** Id of the div containing the lag info. */ var LAG_ELEM_CLS = 'rtwysiwyg-lag'; /** The toolbar class which contains the user list, debug link and lag. */ var TOOLBAR_CLS = 'rtwysiwyg-toolbar'; /** Key in the localStore which indicates realtime activity should be disallowed. */ var LOCALSTORAGE_DISALLOW = 'rtwysiwyg-disallow'; var SPINNER_DISAPPEAR_TIME = 3000; // ------------------ 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 (wysiwygDiv, docBody, onEvent, unbind) { bindEvents(docBody, ['textInput', 'keydown', 'keyup', 'select', 'cut', 'paste'], onEvent, unbind); bindEvents(wysiwygDiv, ['mousedown','mouseup','click'], onEvent, unbind); }; var SPINNER = [ '-', '\\', '|', '/' ]; var kickSpinner = function (spinnerElement, reversed) { var txt = spinnerElement.textContent || '-'; var inc = (reversed) ? -1 : 1; spinnerElement.textContent = SPINNER[(SPINNER.indexOf(txt) + inc) % SPINNER.length]; spinnerElement.timeout && clearTimeout(spinnerElement.timeout); spinnerElement.timeout = setTimeout(function () { spinnerElement.textContent = ''; }, SPINNER_DISAPPEAR_TIME); }; var checkLag = function (realtime, lagElement) { var lag = realtime.getLag(); var lagSec = lag.lag/1000; lagElement.textContent = "Lag: "; if (lag.waiting && lagSec > 1) { lagElement.textContent += "?? " + Math.floor(lagSec); } else { lagElement.textContent += lagSec; } }; 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 updateUserList = function (myUserName, listElement, userList) { var meIdx = userList.indexOf(myUserName); if (meIdx === -1) { listElement.text(Messages.synchronizing); return; } if (userList.length === 1) { listElement.text(Messages.editingAlone); } else if (userList.length === 2) { listElement.text(Messages.editingWithOneOtherPerson); } else { listElement.text(Messages.editingWith + ' ' + (userList.length - 1) + Messages.otherPeople); } }; var createUserList = function (realtime, myUserName, container) { var id = uid(); $(container).prepend('
'); var listElement = $('#'+id); realtime.onUserListChange(function (userList) { updateUserList(myUserName, listElement, userList); }); return listElement; }; var abort = function (socket, realtime) { realtime.abort(); try { socket._socket.close(); } catch (e) { } $('.'+USER_LIST_CLS).text("Disconnected"); $('.'+LAG_ELEM_CLS).text(""); }; 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.body.innerHTML; }; var makeHTMLOperation = function (oldval, newval) { try { var op = Otaml.makeHTMLOperation(oldval, newval); if (PARANOIA && op) { // simulate running the patch. var res = HTMLPatcher.patchString(oldval, op.offset, op.toRemove, op.toInsert); if (res !== newval) { console.log(op); console.log(oldval); console.log(newval); console.log(res); throw new Error(); } // check matching bracket count // TODO(cjd): this can fail even if the patch is valid because of brackets in // html attributes. var removeText = oldval.substring(op.offset, op.offset + op.toRemove); if (((removeText).match(//g) || []).length) { throw new Error(); } if (((op.toInsert).match(//g) || []).length) { throw new Error(); } } return op; } catch (e) { if (PARANOIA) { $(document.body).append(''); $('#makeOperationErr').val(oldval + '\n\n\n\n\n\n\n\n\n\n' + newval); console.log(e.stack); } return { offset: 0, toRemove: oldval.length, toInsert: newval }; } }; // chrome sometimes generates invalid html but it corrects it the next time around. var fixChrome = function (docText, doc, contentWindow) { for (var i = 0; i < 10; i++) { var docElem = doc.createElement('div'); docElem.innerHTML = docText; var newDocText = docElem.innerHTML; var fixChromeOp = makeHTMLOperation(docText, newDocText); if (!fixChromeOp) { return docText; } HTMLPatcher.applyOp(docText, fixChromeOp, doc.body, Rangy, contentWindow); docText = getDocHTML(doc); if (newDocText === docText) { return docText; } } throw new Error(); }; var fixSafari_STATE_OUTSIDE = 0; var fixSafari_STATE_IN_TAG = 1; var fixSafari_STATE_IN_ATTR = 2; var fixSafari_HTML_ENTITIES_REGEX = /('|"|<|>|<|>)/g; var fixSafari = function (html) { var state = fixSafari_STATE_OUTSIDE; return html.replace(fixSafari_HTML_ENTITIES_REGEX, function (x) { switch (state) { case fixSafari_STATE_OUTSIDE: { if (x === '<') { state = fixSafari_STATE_IN_TAG; } return x; } case fixSafari_STATE_IN_TAG: { switch (x) { case '"': state = fixSafari_STATE_IN_ATTR; break; case '>': state = fixSafari_STATE_OUTSIDE; break; case "'": throw new Error("single quoted attribute"); } return x; } case fixSafari_STATE_IN_ATTR: { switch (x) { case '<': return '<'; case '>': return '>'; case '"': state = fixSafari_STATE_IN_TAG; break; } return x; } }; throw new Error(); }); }; var getFixedDocText = function (doc, ifrWindow) { var docText = getDocHTML(doc); docText = fixChrome(docText, doc, ifrWindow); docText = fixSafari(docText); return docText; }; var uid = function () { return 'rtwysiwyg-uid-' + String(Math.random()).substring(2); }; var checkLag = function (realtime, lagElement) { var lag = realtime.getLag(); var lagSec = lag.lag/1000; var lagMsg = Messages.lag + ' '; if (lag.waiting && lagSec > 1) { lagMsg += "?? " + Math.floor(lagSec); } else { lagMsg += lagSec; } lagElement.text(lagMsg); }; var createLagElement = function (socket, realtime, container) { var id = uid(); $(container).append('
'); var lagElement = $('#'+id); var intr = setInterval(function () { checkLag(realtime, lagElement); }, 3000); socket.onClose.push(function () { clearTimeout(intr); }); return lagElement; }; var createSpinner = function (container) { var id = uid(); $(container).append('
'); return $('#'+id)[0]; }; var createRealtimeToolbar = function (container) { var id = uid(); $(container).prepend( '
' + '
' + '
' + '
' ); var toolbar = $('#'+id); toolbar.append([ '' ].join('\n')); return toolbar; }; var makeWebsocket = function (url) { var socket = new WebSocket(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 encryptStr = function (str, key) { var array = Nacl.util.decodeUTF8(str); var nonce = Nacl.randomBytes(24); var packed = Nacl.secretbox(array, nonce, key); if (!packed) { throw new Error(); } return Nacl.util.encodeBase64(nonce) + "|" + Nacl.util.encodeBase64(packed); }; var decryptStr = function (str, key) { var arr = str.split('|'); if (arr.length !== 2) { throw new Error(); } var nonce = Nacl.util.decodeBase64(arr[0]); var packed = Nacl.util.decodeBase64(arr[1]); var unpacked = Nacl.secretbox.open(packed, nonce, key); if (!unpacked) { throw new Error(); } return Nacl.util.encodeUTF8(unpacked); }; // this is crap because of bencoding messages... it should go away.... var splitMessage = function (msg, sending) { var idx = 0; var nl; for (var i = ((sending) ? 0 : 1); i < 3; i++) { nl = msg.indexOf(':',idx); idx = nl + Number(msg.substring(idx,nl)) + 1; } return [ msg.substring(0,idx), msg.substring(msg.indexOf(':',idx) + 1) ]; }; var encrypt = function (msg, key) { var spl = splitMessage(msg, true); var json = JSON.parse(spl[1]); // non-patches are not encrypted. if (json[0] !== 2) { return msg; } json[1] = encryptStr(JSON.stringify(json[1]), key); var res = JSON.stringify(json); return spl[0] + res.length + ':' + res; }; var decrypt = function (msg, key) { var spl = splitMessage(msg, false); var json = JSON.parse(spl[1]); // non-patches are not encrypted. if (json[0] !== 2) { return msg; } if (typeof(json[1]) !== 'string') { throw new Error(); } json[1] = JSON.parse(decryptStr(json[1], key)); var res = JSON.stringify(json); return spl[0] + res.length + ':' + res; }; var start = module.exports.start = function (websocketUrl, userName, channel, cryptKey) { var passwd = 'y'; var wysiwygDiv = document.getElementById('cke_1_contents'); var ifr = wysiwygDiv.getElementsByTagName('iframe')[0]; var doc = ifr.contentWindow.document; var socket = makeWebsocket(websocketUrl); var onEvent = function () { }; var toolbar = createRealtimeToolbar('#cke_1_toolbox'); socket.onClose.push(function () { $(toolbar).remove(); checkSocket(); }); var allMessages = []; var isErrorState = false; var initializing = true; var recoverableErrorCount = 0; var error = function (recoverable, err) { 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) { var realtime = socket.realtime = ChainPad.create(userName, passwd, channel, getDocHTML(doc), { transformFunction: Otaml.transform }); //createDebugLink(realtime, doc, allMessages, toolbar); createUserList(realtime, userName, toolbar.find('.rtwysiwyg-toolbar-leftside')); var spinner = createSpinner(toolbar.find('.rtwysiwyg-toolbar-rightside')); onEvent = function () { if (isErrorState) { return; } if (initializing) { return; } var oldDocText = realtime.getUserDoc(); var docText = getFixedDocText(doc, ifr.contentWindow); 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) { return; } kickSpinner(spinner); if (initializing) { return; } userDocBeforePatch = userDocBeforePatch || getFixedDocText(doc, ifr.contentWindow); if (PARANOIA && userDocBeforePatch != getFixedDocText(doc, ifr.contentWindow)) { error(false, "userDocBeforePatch != getFixedDocText(doc, ifr.contentWindow)"); } var op = attempt(makeHTMLOperation)(userDocBeforePatch, realtime.getUserDoc()); if (!op) { return; } attempt(HTMLPatcher.applyOp)( userDocBeforePatch, op, doc.body, rangy, ifr.contentWindow); }; 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; createLagElement(socket, realtime, toolbar.find('.rtwysiwyg-toolbar-rightside')); incomingPatch(); }); socket.onMessage.push(function (evt) { if (isErrorState) { return; } var message = 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 = encrypt(message, cryptKey); try { socket.send(message); } catch (e) { if (!checkSocket()) { error(true, e.stack); } } }); realtime.onPatch(incomingPatch); socket.onError.push(function (err) { if (isErrorState) { return; } if (!checkSocket()) { error(true, err); } }); bindAllEvents(wysiwygDiv, doc.body, onEvent, false); setInterval(function () { if (isErrorState || checkSocket()) { return; } }, 200); realtime.start(); //console.log('started'); }); return { onEvent: function () { onEvent(); } }; }; return module.exports; });