Merge branch 'staging' of github.com:xwiki-labs/cryptpad into prop

.jshintignore

@@ -4,6 +4,7 @@ www/code/codemirror*
 www/common/chainpad.js
 storage/kad.js
 www/common/otaml.js
+www/examples/canvas/fabric.js
 
 server.js
 NetFluxWebsocketSrv.js

customize.dist/translations/messages.es.js

@@ -239,7 +239,6 @@ define(function () {
     out.login_unhandledError = "Un error inesperado se produjo :(";
     out.register_importRecent = "Importar historial (recomendado)";
     out.register_acceptTerms = "Accepto los <a href='/terms.html'>términos de servicio</a>";
-    out.register_rememberPassword = "Me acordaré de mi cuenta y contraseña";
     out.register_passwordsDontMatch = "Las contraseñas no corresponden";
     out.register_mustAcceptTerms = "Tienes que acceptar los términos de servicio";
     out.register_mustRememberPass = "No podemos reiniciar tu contraseña si la olvidas. ¡Es muy importante que la recuerdes! Marca la casilla para confirmarlo.";
@@ -293,7 +292,7 @@ define(function () {
     out.settings_userFeedback = "Activar feedback"; // "Disable user feedback"
     out.settings_anonymous = "No has iniciado sesión. Tus ajustes se aplicarán solo a este navegador.";
     out.blog = "Blog";
-    out.initialState = "<p>Esto es <strong>CryptPad</strong>, el editor collaborativo en tiempo real zero knowledge.<br>Lo que escribes aquí es cifrado, con lo cual solo las personas con el enlace pueden accederlo.<br>Incluso el servido no puede ver lo que escribes.</p><p><small><i>Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí</i></small></p>";
+    out.initialState = "<p>Esto es <strong>CryptPad</strong>, el editor collaborativo en tiempo real zero knowledge.<br>Lo que escribes aquí es cifrado, con lo cual solo las personas con el enlace pueden accederlo.<br>Incluso el servido no puede ver lo que escribes.</p><p><small><i>Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí</i></small></p><p>&nbsp;<br></p>";
     out.codeInitialState = "/*\n   Esto es CryptPad, el editor collaborativo en tiempo real zero knowledge.\n   Lo que escribes aquí es cifrado, con lo cual solo las personas con el enlace pueden accederlo.\n   Incluso el servidor no puede ver lo que escribes.\n   Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí\n*/";
     out.slideInitialState = "# CryptSlide\n* Esto es CryptPad, el editor collaborativo en tiempo real zero knowledge.\n* Lo que escribes aquí es cifrado, con lo cual solo las personas con el enlace pueden accederlo.\n* Incluso el servidor no puede ver lo que escribes.\n* Lo que ves aquí, lo que escuchas aquí, cuando sales, se queda aquí\n\n---\n# Como utilizarlo\n1. Escribe tu contenido en Markdown\n  - Puedes aprender más sobre Markdown [aquí](http://www.markdowntutorial.com/)\n2. Separa tus slides con ---\n3. Haz clic en \"Presentar\" para ver el resultado  - Tus slides se actualizan en tiempo real";
     out.driveReadmeTitle = "¿Qué es CryptDrive?";
@@ -347,5 +346,14 @@ define(function () {
     out.feedback_privacy = "Nos importa tu privacidad, y al mismo tiempo queremos que CryptPad sea muy fácil de usar. Utilizamos esta página para conocer las funcionalidades que importan a nuestros usuarios, pidiendolo con un parametro que nos dice que accion fue realizada.";
     out.feedback_optout = "Si quieres darte de baja, visita <a href='/settings/'>tus preferencias</a>, donde podrás activar o desactivar feedback";
 
-return out;
+    out.fm_searchName = "Buscar";
+    out.fm_searchPlaceholder = "Buscar...";
+    out.fm_newButtonTitle = "Crear un nuevo pad o carpeta";
+    out.fm_openParent = "Mostrar en carpeta";
+    out.register_writtenPassword = "He escrito mi usuario y contraseña, continuar";
+    out.register_cancel = "Volver";
+    out.register_warning = "Zero Knowledge significa que no podemos recuperar tus datos si pierdes tu contraseña.";
+    out.register_alreadyRegistered = "Este usuario ya existe, ¿iniciar sesión?";
+
+    return out;
 });

customize.dist/translations/messages.fr.js

@@ -383,7 +383,8 @@ define(function () {
         '<p><span style="color:#808080; font-size: 18px;">',
         '<em>',
         'Lancez-vous, commencez à taper...',
-        '</em></span></p></span>'
+        '</em></span></p></span>',
+        '<p>&nbsp;<br></p>'
     ].join('');
 
     out.codeInitialState = [

customize.dist/translations/messages.js

@@ -380,7 +380,8 @@ define(function () {
 
         '<p><span style="color:#808080;"><em>',
         'Go ahead, just start typing...',
-        '</em></span></p></span>'
+        '</em></span></p></span>',
+        '<p>&nbsp;<br></p>'
     ].join('');
 
     out.codeInitialState = [

q

@@ -1,478 +0,0 @@
-warning: LF will be replaced by CRLF in customize.dist/translations/messages.fr.js.
-The file will have its original line endings in your working directory.
-diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
-index 96e36a4..4ad51bd 100644
---- a/customize.dist/translations/messages.fr.js
-+++ b/customize.dist/translations/messages.fr.js
-@@ -79,12 +79,14 @@ define(function () {
- 
-     out.printButton = "Imprimer";
-     out.printButtonTitle = "Imprimer votre présentation ou l'enregistrer au format PDF";
--    out.printOptions = "Options d'impression";
-+    out.printOptions = "Options de mise en page";
-     out.printSlideNumber = "Afficher le numéro des slides";
-     out.printDate = "Afficher la date";
-     out.printTitle = "Afficher le titre du pad";
-     out.printCSS = "Personnaliser l'apparence (CSS):";
- 
-+    out.slideOptionsTitle = "Personnaliser la présentation";
-+
-     out.editShare = "Lien d'édition";
-     out.editShareTitle = "Copier le lien d'édition dans le presse-papiers";
-     out.editOpen = "Éditer dans un nouvel onglet";
-diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
-index b463b48..15540fd 100644
---- a/customize.dist/translations/messages.js
-+++ b/customize.dist/translations/messages.js
-@@ -81,12 +81,14 @@ define(function () {
- 
-     out.printButton = "Print";
-     out.printButtonTitle = "Print your slides or export them as a PDF file";
--    out.printOptions = "Print options";
-+    out.printOptions = "Layout options";
-     out.printSlideNumber = "Display the slide number";
-     out.printDate = "Display the date";
-     out.printTitle = "Display the pad title";
-     out.printCSS = "Custom style rules (CSS):";
- 
-+    out.slideOptionsTitle = "Customize your slides";
-+
-     out.editShare = "Editing link";
-     out.editShareTitle = "Copy the editing link to clipboard";
-     out.editOpen = "Open editing link in a new tab";
-diff --git a/www/slide/main.js b/www/slide/main.js
-index 50f216e..0bc6f5f 100644
---- a/www/slide/main.js
-+++ b/www/slide/main.js
-@@ -136,7 +136,8 @@ define([
- 
-             var $modal = $pad.contents().find('#modal');
-             var $content = $pad.contents().find('#content');
--            var $print = $pad.contents().find('#print');
-+            var $print = $pad.contents().find('#print');
            var slideOptions = {};
-+
-             $( window ).resize(function() {
-                 // 20vh
-                 // 20 * 16 / 9vw
-@@ -149,7 +150,13 @@ define([
-                 // $print.css('font-size', (20*9/16)+'vw');
-             });
- 
--            Slide.setModal($modal, $content, $pad, ifrw, initialState);
-+            Slide.setModal(APP, $modal, $content, $pad, ifrw, slideOptions, initialState);
-+
-+            var setStyleState = function (state) {
-+                $pad.contents().find('#print, #content').find('style').each(function (i, el) {
-+                    el.disabled = !state;
-+                });
-+            };
- 
-             var enterPresentationMode = function (shouldLog) {
-                 Slide.show(true, editor.getValue());
-@@ -158,6 +165,7 @@ define([
-                 }
-             };
-             var leavePresentationMode = function () {
-+                setStyleState(false);
-                 Slide.show(false);
-             };
- 
-@@ -229,7 +237,8 @@ define([
-                     content: textValue,
-                     metadata: {
-                         users: userData,
--                        defaultTitle: defaultName
-+                        defaultTitle: defaultName,
-+                        slideOptions: slideOptions
-                     }
-                 };
-                 if (!initializing) {
-@@ -370,6 +379,7 @@ define([
-                     setTabTitle();
-                     $bar.find('.' + Toolbar.constants.title).find('span.title').text(data);
-                     $bar.find('.' + Toolbar.constants.title).find('input').val(data);
-+                    if (slideOptions.title) { Slide.updateOptions(); }
-                 });
-             };
- 
-@@ -387,6 +397,15 @@ define([
-                 }
-             };
- 
-+            var updateOptions = function (newOpt) {
-+                if (stringify(newOpt) !== stringify(slideOptions)) {
-+                    $.extend(slideOptions, newOpt);
-+                    // TODO: manage realtime + cursor in the "options" modal ??
-+                    console.log('updating options');
-+                    Slide.updateOptions();
-+                }
-+            };
-+
-             var updateDefaultTitle = function (defaultTitle) {
-                 defaultName = defaultTitle;
-                 $bar.find('.' + Toolbar.constants.title).find('input').attr("placeholder", defaultName);
-@@ -409,6 +428,7 @@ define([
-                         updateTitle(json.metadata.title || defaultName);
-                         titleUpdated = true;
-                     }
-+                    updateOptions(json.metadata.slideOptions);
-                     updateColors(json.metadata.color, json.metadata.backColor);
-                 }
-                 if (!titleUpdated) {
-@@ -424,12 +444,14 @@ define([
-             };
- 
-             var createPrintDialog = function () {
--                var printOptions = {
-+                var slideOptionsTmp = {
-                     title: true,
-                     slide: true,
--                    date: true
-+                    date: true,
-+                    style: ''
-                 };
- 
-+                $.extend(slideOptionsTmp, slideOptions);


-                 var $container = $('<div class="alertify">');
-                 var $container2 = $('<div class="dialog">').appendTo($container);
-                 var $div = $('<div id="printOptions">').appendTo($container2);
-@@ -440,21 +462,21 @@ define([
-                 $('<input>', {type: 'checkbox', id: 'checkNumber', checked: 'checked'}).on('change', function () {
-                     var c = this.checked;
-                     console.log(c);
--                    printOptions.slide = c;
-+                    slideOptionsTmp.slide = c;
-                 }).appendTo($p).css('width', 'auto');
-                 $('<label>', {'for': 'checkNumber'}).text(Messages.printSlideNumber).appendTo($p);
-                 $p.append($('<br>'));
-                 // Date
-                 $('<input>', {type: 'checkbox', id: 'checkDate', checked: 'checked'}).on('change', function () {
-                     var c = this.checked;
--                    printOptions.date = c;
-+                    slideOptionsTmp.date = c;
-                 }).appendTo($p).css('width', 'auto');
-                 $('<label>', {'for': 'checkDate'}).text(Messages.printDate).appendTo($p);
-                 $p.append($('<br>'));
-                 // Title
-                 $('<input>', {type: 'checkbox', id: 'checkTitle', checked: 'checked'}).on('change', function () {
-                     var c = this.checked;
--                    printOptions.title = c;
-+                    slideOptionsTmp.title = c;
-                 }).appendTo($p).css('width', 'auto');
-                 $('<label>', {'for': 'checkTitle'}).text(Messages.printTitle).appendTo($p);
-                 $p.append($('<br>'));
-@@ -462,34 +484,18 @@ define([
-                 $('<label>', {'for': 'cssPrint'}).text(Messages.printCSS).appendTo($p);
-                 $p.append($('<br>'));
-                 var $textarea = $('<textarea>', {'id':'cssPrint'}).css({'width':'100%', 'height':'100px'}).appendTo($p);
-+                $textarea.val(slideOptionsTmp.style);
-+
- 
--                var fixCSS = function (css) {
--                    var append = '.cp #print ';
--                    return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2 {');
--                };
- 
-                 var todo = function () {
--                    var $style = $('<style>').text(fixCSS($textarea.val()));
--                    $print.prepend($style);
--                    var length = $print.find('.slide-frame').length;
--                    $print.find('.slide-frame').each(function (i, el) {
--                        if (printOptions.slide) {
--                            $('<div>', {'class': 'slideNumber'}).text((i+1)+'/'+length).appendTo($(el));
--                        }
--                        if (printOptions.date) {
--                            $('<div>', {'class': 'slideDate'}).text(new Date().toLocaleDateString()).appendTo($(el));
--                        }
--                        if (printOptions.title) {
--                            $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
--                        }
--                    });
--                    window.frames["pad-iframe"].focus();
--                    window.frames["pad-iframe"].print();
-+                    $.extend(slideOptions, slideOptionsTmp);
                    slideOptions.style = $textarea.val();
-+                    onLocal();
-                     $container.remove();
-                 };
- 
-                 var $nav = $('<nav>').appendTo($div);
--                var $ok = $('<button>', {'class': 'ok'}).text(Messages.printButton).appendTo($nav).click(todo);
-+                var $ok = $('<button>', {'class': 'ok'}).text(Messages.settings_save).appendTo($nav).click(todo);
-                 var $cancel = $('<button>', {'class': 'cancel'}).text(Messages.cancel).appendTo($nav).click(function () {
-                     $container.remove();
-                 });
-@@ -556,10 +562,24 @@ define([
-                     'class': 'rightside-button fa fa-print',
-                     style: 'font-size: 17px'
-                 }).click(function () {
-+                    Slide.update(editor.getValue(), true);
-                     $print.html($content.html());
-+                    Cryptpad.confirm("Are you sure you want to print?", function (yes) {
-+                        if (yes) {
-+                            window.frames["pad-iframe"].focus();
-+                            window.frames["pad-iframe"].print();
-+                        }
-+                    }, {ok: Messages.printButton});
-+                    //$('body').append(createPrintDialog());
-+                });
-+                $rightside.append($printButton);

                var $slideOptions = $('<button>', {
-+                    title: Messages.slideOptionsTitle,
-+                    'class': 'rightside-button fa fa-cog',
-+                    style: 'font-size: 17px'
-+                }).click(function () {
-                     $('body').append(createPrintDialog());
-                 });
--                $rightside.append($printButton);
-+                $rightside.append($slideOptions);
- 
-                 var $present = Cryptpad.createButton('present', true)
-               warning: LF will be replaced by CRLF in customize.dist/translations/messages.js.
-The file will have its original line endings in your working directory.
-warning: LF will be replaced by CRLF in www/slide/slide.css.
-The file will have its original line endings in your working directory.
-      .click(function () {
-@@ -726,8 +746,6 @@ define([
-                 updateMetadata(userDoc);
- 
-                 editor.setValue(newDoc || initialState);
--                Slide.update(newDoc, true);
--                Slide.draw();
- 
-                 if (Cryptpad.initialName && APP.title === defaultName) {
-                     updateTitle(Cryptpad.initialName);
-diff --git a/www/slide/slide.css b/www/slide/slide.css
-index e96b77a..0404398 100644
---- a/www/slide/slide.css
-+++ b/www/slide/slide.css
-@@ -80,11 +80,16 @@ body .CodeMirror-focused .cm-matchhighlight {
-   position: relative;
-   display: none;
-   font-size: 11.25vw;
-+  /*.slide-frame:first-child {
-+        h1 { color: yellow; }
-+        margin-top: ~"calc(((100vh - 56.25vw)/2))";
-+    }*/
- }
- .cp #print .slide-frame {
-   display: block !important;
-   padding: 2.5%;
--  margin-top: calc((100vh - 56.25vw)/2);
-+  margin-top: 7.228vw;
-+  margin-bottom: 7.228vw;
-   border-top: 1px solid black;
-   border-bottom: 1px solid black;
-   height: 56.25vw;
-@@ -98,26 +103,7 @@ body .CodeMirror-focused .cm-matchhighlight {
- }
- .cp #print .slide-frame h1 {
-   padding-top: 0;
--}
--.cp #print .slide-frame .slideNumber {
--  position: absolute;
--  right: 5vh;
--  bottom: 5vh;
--  font-size: 15px;
--}
--.cp #print .slide-frame .slideDate {
--  position: absolute;
--  left: 5vh;
--  bottom: 5vh;
--  font-size: 15px;
--}
--.cp #print .slide-frame .slideTitle {
--  position: absolute;
--  top: 5vh;
--  left: 0px;
--  right: 0px;
--  text-align: center;
--  font-size: 15px;
-+  color: green;
- }
- .cp div.modal,
- .cp div#modal {
-@@ -341,3 +327,29 @@ body .CodeMirror-focused .cm-matchhighlight {
-   max-height: 90%;
-   margin: auto;
- }
-+.cp div#modal #content .slide-frame .slideNumber,
-+.cp #print .slide-frame .slideNumber {
-+  position: absolute;
-+  right: 5vh;
-+  bottom: 5vh;
-+  font-size: 10%;
-+  line-height: 110%;
-+}
-+.cp div#modal #content .slide-frame .slideDate,
-+.cp #print .slide-frame .slideDate {
-+  position: absolute;
-+  left: 5vh;
-+  bottom: 5vh;
-+  font-size: 10%;
-+  line-height: 110%;
-+}
-+.cp div#modal #content .slide-frame .slideTitle,
-+.cp #print .slide-frame .slideTitle {
-+  position: absolute;
-+  bottom: 5vh;
-+  left: 0px;
-+  right: 0px;
-+  text-align: center;
-+  font-size: 10%;
-+  line-height: 110%;
-+}
-diff --git a/www/slide/slide.js b/www/slide/slide.js
-index 7cbcad4..3990124 100644
---- a/www/slide/slide.js
-+++ b/www/slide/slide.js
-@@ -14,11 +14,13 @@ define([
-         content: [],
-         changeHandlers: [],
-     };
-+    var APP;
-     var ifrw;
-     var $modal;
-     var $content;
-     var $pad;
-     var placeholder;
-+    var options;
-     var separator = '<hr data-pewpew="pezpez">';
-     var separatorReg = /<hr data\-pewpew="pezpez">/g;
-     var slideClass = 'slide-frame';
-@@ -114,6 +116,11 @@ define([
-         slice(root.children).forEach(removeListeners);
-     };
- 
-+    var fixCSS = function (css) {
-+        var append = '.cp #print .slide-frame ';
-+        var append2 = '.cp div#modal #content .slide-frame ';
-+        return css.replace(/(\n*)([^\n]+)\s*\{/g, '$1' + append + '$2,' + append2 + '$2 {');
-+    };
-     var draw = Slide.draw =  function (i) {
-         i = i || 0;
-         if (typeof(Slide.content) !== 'string') { return; }
-@@ -130,11 +137,31 @@ define([
-         } else {
-             DD.apply($content[0], patch);
-         }
-+        var length = getNumberOfSlides();
-+        $modal.find('style.slideStyle').remove();
-+        if (options.style && Slide.shown) {
-+            $modal.prepend($('<style>', {'class': 'slideStyle'}).text(fixCSS(options.style)));
-+        }
-+        $content.find('.slide-frame').each(function (i, el) {
-+            if (options.slide) {
-+                $('<div>', {'class': 'slideNumber'}).text((i+1)+'/'+length).appendTo($(el));
-+            }
-+            if (options.date) {
-+                $('<div>', {'class': 'slideDate'}).text(new Date().toLocaleDateString()).appendTo($(el));
-+            }
-+            if (options.title) {
-+                $('<div>', {'class': 'slideTitle'}).text(APP.title).appendTo($(el));
-+            }
-+        });
-         $content.find('.' + slideClass).hide();
-         $content.find('.' + slideClass + ':eq( ' + i + ' )').show();
-         change(Slide.lastIndex, Slide.index);
-     };
- 
-+    var updateOptions = Slide.updateOptions = function () {
-+        draw(Slide.index);
-+    };
-+
-     var isPresentURL = Slide.isPresentURL = function () {
-         var hash = window.location.hash;
-         // Present mode has /present at the end of the hash
-@@ -269,12 +296,15 @@ define([
-         });
-     };
- 
--    Slide.setModal = function ($m, $c, $p, iframe, ph) {
-+    Slide.setModal = function (appObj, $m, $c, $p, iframe, opt, ph) {
-         $modal = Slide.$modal = $m;
-         $content = Slide.$content = $c;
-         $pad = Slide.$pad = $p;
-         ifrw = Slide.ifrw = iframe;
-         placeholder = Slide.placeholder = ph;
-+        options = Slide.options = opt;
-+        APP = appObj;
-+        console.log(APP);
-         addEvent();
-     };
- 
-diff --git a/www/slide/slide.less b/www/slide/slide.less
-index 31dd1c1..3bbd52e 100644
---- a/www/slide/slide.less
-+++ b/www/slide/slide.less
-@@ -90,7 +90,10 @@ body {
-         //align-items: center;
-         // flex-flow: column;
-         padding: 2.5%;
--        margin-top: ~"calc((100vh - 56.25vw)/2)";
-+        // margin-top: ~"calc(((100vh - 56.25vw)/2))";
-+        margin-top: 7.228vw;
-+        margin-bottom: 7.228vw;
-+        // margin-bottom: ~"calc(((100vh - 56.25vw)/2) - 1px)";
-         border-top: 1px solid black;
-         border-bottom: 1px solid black;
-         height: 56.25vw;
-@@ -103,27 +106,14 @@ body {
-         }
-         h1 {
-             padding-top: 0;
-+            color: green;
-         }
--        .slideNumber {
--            position: absolute;
--            right: 5vh;
--            bottom: 5vh;
--            font-size: 15px;
--        }
--        .slideDate {
--            position: absolute;
--            left: 5vh;
--            bottom: 5vh;
--            font-size: 15px;
--        }
--        .slideTitle {
--            position: absolute;
--            top: 5vh;
--            left: 0px; right: 0px;
--            text-align: center;
--            font-size: 15px;
--        }
-+
-     }
-+    /*.slide-frame:first-child {
-+        h1 { color: yellow; }
-+        margin-top: ~"calc(((100vh - 56.25vw)/2))";
-+    }*/
- }
- 
- 
-@@ -276,6 +266,24 @@ div#modal #content, #print {
-             max-width: 90%;
-             max-height: 90%;
-             margin: auto;
-+        }
        .slideNumber {
-+            position: absolute;
-+            right: 5vh;
-+            bottom: 5vh;
-+            .size(1);
-+        }
-+        .slideDate {
-+            position: absolute;
-+            left: 5vh;
-+            bottom: 5vh;
-+            .size(1);
-+        }
-+        .slideTitle {
-+            position: absolute;
-+            bottom: 5vh;
-+            left: 0px; right: 0px;
-+            text-align: center;
-+            .size(1);
-         }
-     }
- }
-warning: LF will be replaced by CRLF in www/slide/slide.js.
-The file will have its original line endings in your working directory.

rpc.js

@@ -18,9 +18,11 @@ var isValidChannel = function (chan) {
 var checkSignature = function (signedMsg, publicKey) {
     if (!(signedMsg && publicKey)) { return null; }
 
+    var signedBuffer;
+    var pubBuffer;
     try {
-        var signedBuffer = Nacl.util.decodeBase64(signedMsg);
-        var pubBuffer = Nacl.util.decodeBase64(publicKey);
+        signedBuffer = Nacl.util.decodeBase64(signedMsg);
+        pubBuffer = Nacl.util.decodeBase64(publicKey);
     } catch (e) {
         return null;
     }

www/common/cryptpad-common.js

@@ -1018,7 +1018,7 @@ define([
             parsed = common.parseHash(parsed.hash);
 
             if (parsed.version === 0) {
-                return channel;
+                return parsed.channel;
             } else if (parsed.version !== 1) {
                 console.error("parsed href had no version");
                 console.error(parsed);

www/common/cursor.js

@@ -11,7 +11,7 @@ define([
     var verbose = function (x) { if (window.verboseMode) { console.log(x); } };
 
     /* accepts the document used by the editor */
-    return function (inner) {
+    var Cursor = function (inner) {
         var cursor = {};
 
         // there ought to only be one cursor at a time, so let's just
@@ -387,6 +387,58 @@ define([
             }
         };
 
+        cursor.lastTextNode = function () {
+            var lastEl = Tree.rightmostNode(inner);
+            if (lastEl && lastEl.nodeType === 3) { return lastEl; }
+
+            var firstEl = Tree.leftmostNode(inner);
+
+            while (lastEl !== firstEl) {
+                lastEl = Tree.previousNode(lastEl, inner);
+                if (lastEl && lastEl.nodeType === 3) { return lastEl; }
+            }
+
+            return lastEl;
+        };
+
+        cursor.firstTextNode = function () {
+            var firstEl = Tree.leftmostNode(inner);
+            if (firstEl && firstEl.nodeType === 3) { return firstEl; }
+
+            var lastEl = Tree.rightmostNode(inner);
+
+            while (firstEl !== lastEl) {
+                firstEl = Tree.nextNode(firstEl, inner);
+                if (firstEl && firstEl.nodeType === 3) { return firstEl; }
+            }
+            return firstEl;
+        };
+
+        cursor.setToStart = function () {
+            var el = cursor.firstTextNode();
+            if (!el) { return; }
+            fixStart(el, 0);
+            fixEnd(el, 0);
+            fixSelection(makeSelection(), makeRange());
+            return el;
+        };
+
+        cursor.setToEnd = function () {
+            var el = cursor.lastTextNode();
+            if (!el) { return; }
+
+            var offset = el.textContent.length;
+
+            fixStart(el, offset);
+            fixEnd(el, offset);
+            fixSelection(makeSelection(), makeRange());
+            return el;
+        };
+
         return cursor;
     };
+
+    Cursor.Tree = Tree;
+
+    return Cursor;
 });

www/common/toolbar.js

@@ -343,10 +343,10 @@ define([
             id: uid(),
         });
         var $a = $('<span>', {id: 'newLag'});
-        $s1 = $('<span>', {'class': 'bar1'}).appendTo($a);
-        $s2 = $('<span>', {'class': 'bar2'}).appendTo($a);
-        $s3 = $('<span>', {'class': 'bar3'}).appendTo($a);
-        $s4 = $('<span>', {'class': 'bar4'}).appendTo($a);
+        $('<span>', {'class': 'bar1'}).appendTo($a);
+        $('<span>', {'class': 'bar2'}).appendTo($a);
+        $('<span>', {'class': 'bar3'}).appendTo($a);
+        $('<span>', {'class': 'bar4'}).appendTo($a);
         return $a[0];
     };
 

www/examples/canvas/main.js

@@ -10,7 +10,7 @@ define([
     'json.sortify',
     '/bower_components/chainpad-json-validator/json-ot.js',
     '/common/cryptpad-common.js',
-    '/bower_components/fabric.js/dist/fabric.min.js',
+    'fabric.js',
     '/bower_components/jquery/dist/jquery.min.js',
     '/bower_components/file-saver/FileSaver.min.js',
     //'/customize/pad.js'
@@ -76,34 +76,47 @@ define([
 
     var config = module.config = {
         initialState: '{}',
-        // TODO initialState ?
-        websocketURL: Config.websocketURL,
-        //userName: Crypto.rand64(8),
+        websocketURL: Cryptpad.getWebsocketURL(),
+        validateKey: secret.keys.validateKey,
+        readOnly: false, // TODO
         channel: secret.channel,
-        //cryptKey: key,
-        crypto: Crypto.createEncryptor(secret.key),
+        crypto: Crypto.createEncryptor(secret.keys),
         transformFunction: JsonOT.validate,
     };
 
+    var editHash;
     var onInit = config.onInit = function (info) {
-        window.location.hash = info.channel + secret.key;
-        $(window).on('hashchange', function() {
-            window.location.reload();
-        });
+        editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
+
+        Cryptpad.replaceHash(editHash);
+
+        //window.location.hash = info.channel + secret.key;
+        //$(window).on('hashchange', function() { window.location.reload(); });
     };
 
-    var onRemote = config.onRemote = function () {
+    var Catch = function (f) {
+        return function () {
+            try {
+                f();
+            } catch (e) {
+                console.error(e);
+            }
+        };
+    };
+
+    var onRemote = config.onRemote = Catch(function () {
         if (initializing) { return; }
         var userDoc = module.realtime.getUserDoc();
+
         canvas.loadFromJSON(userDoc);
         canvas.renderAll();
-    };
+    });
 
-    var onLocal = config.onLocal = function () {
+    var onLocal = config.onLocal = Catch(function () {
         if (initializing) { return; }
         var content = JSONSortify(canvas.toDatalessJSON());
         module.patchText(content);
-    };
+    });
 
     var onReady = config.onReady = function (info) {
         var realtime = module.realtime = info.realtime;

www/pad/main.js

@@ -64,6 +64,7 @@ define([
         logFights: true,
         fights: [],
         Cryptpad: Cryptpad,
+        Cursor: Cursor,
     };
 
     var emitResize = module.emitResize = function () {
@@ -131,7 +132,7 @@ define([
                 color: '#fff',
             });
 
-            var cursor = window.cursor = Cursor(inner);
+            var cursor = module.cursor = Cursor(inner);
 
             var setEditable = module.setEditable = function (bool) {
                 if (bool) {
@@ -718,6 +719,13 @@ define([
                         realtimeOptions.onLocal();
                         module.$userNameButton.click();
                     }
+
+                    editor.focus();
+                    if (newPad) {
+                        cursor.setToEnd();
+                    } else {
+                        cursor.setToFix();
+                    }
                 });
             };