Fixes for new pre editor

public/res/classes/FileDescriptor.js

@@ -22,6 +22,7 @@ define([
                 return new Range(0, 0, 0, 0);
             }
         })();
+        this._editorStart = parseInt(storage[fileIndex + ".editorEnd"]) || 0;
         this._editorEnd = parseInt(storage[fileIndex + ".editorEnd"]) || 0;
         this._previewScrollTop = parseInt(storage[fileIndex + ".previewScrollTop"]) || 0;
         this._selectTime = parseInt(storage[fileIndex + ".selectTime"]) || 0;
@@ -53,6 +54,24 @@ define([
                 storage[this.fileIndex + ".editorScrollTop"] = editorScrollTop;
             }
         });
+        Object.defineProperty(this, 'editorStart', {
+            get: function() {
+                return this._editorStart;
+            },
+            set: function(editorStart) {
+                this._editorStart = editorStart;
+                storage[this.fileIndex + ".editorStart"] = editorStart;
+            }
+        });
+        Object.defineProperty(this, 'editorEnd', {
+            get: function() {
+                return this._editorEnd;
+            },
+            set: function(editorEnd) {
+                this._editorEnd = editorEnd;
+                storage[this.fileIndex + ".editorEnd"] = editorEnd;
+            }
+        });
         Object.defineProperty(this, 'editorSelectRange', {
             get: function() {
                 return this._editorSelectRange;

public/res/core.js

@@ -4,7 +4,7 @@ define([
     "underscore",
     "crel",
     "ace",
-    "preEditor",
+    "editor",
     "constants",
     "utils",
     "storage",
@@ -26,7 +26,7 @@ define([
     'ace/ext/spellcheck',
     'ace/ext/searchbox'
 
-], function($, _, crel, ace, preEditor, constants, utils, storage, settings, eventMgr, shortcutMgr, mousetrap, bodyIndexHTML, bodyViewerHTML, settingsTemplateTooltipHTML, settingsUserCustomExtensionTooltipHTML) {
+], function($, _, crel, ace, editor, constants, utils, storage, settings, eventMgr, shortcutMgr, mousetrap, bodyIndexHTML, bodyViewerHTML, settingsTemplateTooltipHTML, settingsUserCustomExtensionTooltipHTML) {
 
     var core = {};
 
@@ -385,12 +385,12 @@ define([
                 }
             },
             onresize_end: function(paneName) {
-                if(preEditor.$contentElt !== undefined && paneName == 'center') {
+                if(editor.$contentElt !== undefined && paneName == 'center') {
                     var padding = ($editorElt.width() - getMaxWidth()) / 2;
                     if(padding < constants.EDITOR_DEFAULT_PADDING) {
                         padding = constants.EDITOR_DEFAULT_PADDING;
                     }
-                    preEditor.$contentElt.css({
+                    editor.$contentElt.css({
                         'padding-left': padding + 'px',
                         'padding-right': padding + 'px'
                     });
@@ -494,7 +494,7 @@ define([
     }
 
     // Create the PageDown editor
-    var editor;
+    var pagedownEditor;
     var $editorElt;
     var fileDesc;
     var documentContent;
@@ -512,38 +512,21 @@ define([
             aceEditor.getSession().setUndoManager(new UndoManager());
         }
         else {
-            $editorElt.val(initDocumentContent);
+            //$editorElt.val(initDocumentContent);
         }
 
-        if(editor !== undefined) {
+        if(pagedownEditor !== undefined) {
             // If the editor is already created
+            $editorElt.val(initDocumentContent);
             aceEditor && aceEditor.selection.setSelectionRange(fileDesc.editorSelectRange);
             aceEditor ? aceEditor.focus() : $editorElt.focus();
-            editor.refreshPreview();
+            //pagedownEditor.refreshPreview();
             return;
         }
 
         var $previewContainerElt = $(".preview-container");
 
-        if(window.lightMode) {
+        if(!window.lightMode) {
-            // Store editor scrollTop on scroll event
-            $editorElt.scroll(function() {
-                if(documentContent !== undefined) {
-                    preEditor.scrollTop = this.scrollTop;
-                    fileDesc.editorScrollTop = preEditor.scrollTop;
-                }
-            });
-            // Store editor selection on change
-            $editorElt.bind("keyup mouseup", function() {
-                preEditor.selectionStart = this.selectionStart;
-                preEditor.selectionEnd = this.selectionEnd;
-                if(documentContent !== undefined) {
-                    fileDesc.editorStart = this.selectionStart;
-                    fileDesc.editorEnd = this.selectionEnd;
-                }
-            });
-        }
-        else {
             // Store editor scrollTop on scroll event
             var saveScroll = _.debounce(function() {
                 if(documentContent !== undefined) {
@@ -582,7 +565,7 @@ define([
         converter.setOptions(options);
 
         function checkDocumentChanges() {
-            var newDocumentContent = $editorElt.val();
+            var newDocumentContent = $editorElt.text();
             if(aceEditor !== undefined) {
                 newDocumentContent = aceEditor.getValue();
             }
@@ -601,7 +584,6 @@ define([
                     $editorElt.scrollTop(fileDesc.editorScrollTop);
                 }
                 else {
-                    preEditor.scrollTop = fileDesc.editorScrollTop;
                     _.defer(function() {
                         aceEditor.renderer.scrollToY(fileDesc.editorScrollTop);
                     });
@@ -614,22 +596,22 @@ define([
 
         var previewWrapper;
         if(window.lightMode) {
-            editor = new Markdown.EditorLight(converter);
+            pagedownEditor = new Markdown.EditorLight(converter);
         }
         else {
-            editor = new Markdown.Editor(converter, undefined, {
+            pagedownEditor = new Markdown.Editor(converter, undefined, {
                 keyStrokes: shortcutMgr.getPagedownKeyStrokes()
             });
         }
         // Custom insert link dialog
-        editor.hooks.set("insertLinkDialog", function(callback) {
+        pagedownEditor.hooks.set("insertLinkDialog", function(callback) {
             core.insertLinkCallback = callback;
             utils.resetModalInputs();
             $(".modal-insert-link").modal();
             return true;
         });
         // Custom insert image dialog
-        editor.hooks.set("insertImageDialog", function(callback) {
+        pagedownEditor.hooks.set("insertImageDialog", function(callback) {
             core.insertLinkCallback = callback;
             if(core.catchModal) {
                 return true;
@@ -658,15 +640,16 @@ define([
             };
         }
 
-        eventMgr.onPagedownConfigure(editor);
+        eventMgr.onPagedownConfigure(pagedownEditor);
-        editor.hooks.chain("onPreviewRefresh", eventMgr.onAsyncPreview);
+        pagedownEditor.hooks.chain("onPreviewRefresh", eventMgr.onAsyncPreview);
         if(window.lightMode) {
-            editor.run(previewWrapper);
+            pagedownEditor.run();
-            editor.undoManager.reinit(initDocumentContent, fileDesc.editorStart, fileDesc.editorEnd, fileDesc.editorScrollTop);
+            $editorElt.val(initDocumentContent);
+            pagedownEditor.undoManager.reinit(initDocumentContent, fileDesc.editorStart, fileDesc.editorEnd, fileDesc.editorScrollTop);
             $editorElt.focus();
         }
         else {
-            editor.run(aceEditor, previewWrapper);
+            pagedownEditor.run(aceEditor, previewWrapper);
             aceEditor.selection.setSelectionRange(fileDesc.editorSelectRange);
             aceEditor.focus();
         }
@@ -847,13 +830,13 @@ define([
         if(window.lightMode) {
             // In pre mode, we replace ACE with an editable pre
             $('#wmd-input').replaceWith(function() {
-                var result = $('<pre id="wmd-input">').addClass(this.className).addClass('form-control');
+                return $('<pre id="wmd-input">').addClass(this.className).addClass('form-control');
-                preEditor.init(result[0]);
-                return result;
             });
             
             // Create UI layout after textarea
             createLayout();
+            
+            editor.init(document.querySelector('#wmd-input'), document.querySelector('.preview-container'));
         }
         else {
             // Create UI layout before ACE editor

public/res/editor.js

@@ -2,11 +2,12 @@
 define([
     'jquery',
     'underscore',
+    'settings',
     'eventMgr',
     'prism-core',
     'crel',
     'libs/prism-markdown'
-], function ($, _, eventMgr, Prism, crel) {
+], function ($, _, settings, eventMgr, Prism, crel) {
     
     String.prototype.splice = function (i, remove, add) {
         remove = +remove || 0;
@@ -14,52 +15,118 @@ define([
         return this.slice(0, i) + add + this.slice(i + remove);
     };
 
-    var preEditor = {};
+    var editor = {};
-
+    var selectionStart = 0;
-    var undoManager;
+    var selectionEnd = 0;
-    eventMgr.addListener('onPagedownConfigure', function(pagedownEditor) {
+    var scrollTop = 0;
-        // Undo manager does exist at the moment
+    var inputElt;
-        setTimeout(function () {
+    var previewElt;
-            undoManager = pagedownEditor.undoManager;
+    var pagedownEditor;
-        }, 0);
+    var refreshPreviewLater = (function() {
+        var elapsedTime = 0;
+        var refreshPreview = function() {
+            var startTime = Date.now();
+            pagedownEditor.refreshPreview();
+            elapsedTime = Date.now() - startTime;
+        };
+        if(settings.lazyRendering === true) {
+            return _.debounce(refreshPreview, 500);
+        }
+        return function() {
+            setTimeout(refreshPreview, elapsedTime < 2000 ? elapsedTime : 2000);
+        };
+    })();
+    eventMgr.addListener('onPagedownConfigure', function(editor) {
+        pagedownEditor = editor;
     });
 
     eventMgr.addListener('onSectionsCreated', function(newSectionList) {
         updateSectionList(newSectionList);
         highlightSections();
+        if(fileChanged === true) {
+            // Refresh preview synchronously
+            pagedownEditor.refreshPreview();
+        }
+        else {
+            refreshPreviewLater();
+        }
     });
 
-    var fileChanged = false;
+    var fileChanged = true;
-    eventMgr.addListener('onFileSelected', function() {
+    var fileDesc;
+    eventMgr.addListener('onFileSelected', function(selectedFileDesc) {
         fileChanged = true;
+        fileDesc = selectedFileDesc;
     });
 
-    preEditor.selectionStart = 0;
+    var previousTextContent;
-    preEditor.selectionEnd = 0;
+    function onInputChange() {
-    preEditor.scrollTop = 0;
+        selectionStart = inputElt.selectionStart;
-    var preElt;
+        selectionEnd = inputElt.selectionEnd;
-    preEditor.init = function(elt) {
+        var currentTextContent = inputElt.textContent;
-        preElt = elt;
+        if(!/\n$/.test(currentTextContent)) {
-        preEditor.$contentElt = $('<div contenteditable class="pre-content language-md">');
+            currentTextContent += '\n';
-        preElt.appendChild(preEditor.$contentElt[0]);
+        }
+        if(fileChanged === false) {
+            fileDesc.editorStart = selectionStart;
+            fileDesc.editorEnd = selectionEnd;
+            if(currentTextContent == previousTextContent) {
+                return;
+            }
+            fileDesc.content = currentTextContent;
+            eventMgr.onContentChanged(fileDesc);
+        }
+        else {
+            eventMgr.onFileOpen(fileDesc);
+            previewElt.scrollTop = fileDesc.previewScrollTop;
+            selectionStart = fileDesc.editorStart;
+            selectionEnd = fileDesc.editorEnd;
+            scrollTop = fileDesc.editorScrollTop;
+            inputElt.scrollTop = scrollTop;
+            fileChanged = false;
+        }
+        previousTextContent = currentTextContent;
+    }
     
-        preElt.focus = function() {
+    editor.init = function(elt1, elt2) {
-            preEditor.$contentElt.focus();
+        inputElt = elt1;
-            this.setSelectionRange(preEditor.selectionStart, preEditor.selectionEnd);
+        previewElt = elt2;
-            preElt.scrollTop = preEditor.scrollTop;
+        editor.contentElt = crel('div', {
+            class: 'pre-content',
+            contenteditable: true
+        });
+        editor.$contentElt = $(editor.contentElt);
+        inputElt.appendChild(editor.contentElt);
+        
+        $(inputElt).scroll(function() {
+            scrollTop = this.scrollTop;
+            if(fileChanged === false) {
+                fileDesc.editorScrollTop = scrollTop;
+            }
+        }).bind("keyup mouseup", onInputChange);
+        $(previewElt).scroll(function() {
+            if(fileChanged === false) {
+                fileDesc.previewScrollTop = previewElt.scrollTop;
+            }
+        });
+        
+        inputElt.focus = function() {
+            editor.$contentElt.focus();
+            this.setSelectionRange(selectionStart, selectionEnd);
+            inputElt.scrollTop = scrollTop;
         };
-        preEditor.$contentElt.focus(function () {
+        editor.$contentElt.focus(function() {
-            preElt.focused = true;
+            inputElt.focused = true;
         });
-        preEditor.$contentElt.blur(function () {
+        editor.$contentElt.blur(function() {
-            preElt.focused = false;
+            inputElt.focused = false;
         });
-        Object.defineProperty(preElt, 'value', {
+        
+        Object.defineProperty(inputElt, 'value', {
             get: function () {
                 return this.textContent;
             },
             set: function (value) {
-                //return preEditor.$contentElt.text(value);
                 var currentValue = this.textContent;
 
                 // Find the first modified char
@@ -71,10 +138,6 @@ define([
                     }
                     startIndex++;
                 }
-                if (startIndex === startIndexMax) {
-                    return preEditor.$contentElt.text(value);
-                }
-
                 // Find the last modified char
                 var endIndex = 1;
                 var endIndexMax = Math.min(currentValue.length - startIndex, value.length - startIndex);
@@ -88,12 +151,14 @@ define([
                 var replacementText = value.substring(startIndex, value.length - endIndex + 1);
                 endIndex = currentValue.length - endIndex + 1;
 
-                var range = createRange(preElt, startIndex, endIndex);
+                var range = createRange(inputElt, startIndex, endIndex);
                 range.deleteContents();
                 range.insertNode(document.createTextNode(replacementText));
+                onInputChange();
             }
         });
-        Object.defineProperty(preElt, 'selectionStart', {
+        
+        Object.defineProperty(inputElt, 'selectionStart', {
             get: function () {
                 var selection = window.getSelection();
 
@@ -123,14 +188,14 @@ define([
                 }
             },
             set: function (value) {
-                preElt.setSelectionRange(value, preEditor.selectionEnd);
+                inputElt.setSelectionRange(value, selectionEnd);
             },
 
             enumerable: true,
             configurable: true
         });
 
-        Object.defineProperty(preElt, 'selectionEnd', {
+        Object.defineProperty(inputElt, 'selectionEnd', {
             get: function () {
                 var selection = window.getSelection();
 
@@ -141,7 +206,7 @@ define([
                 }
             },
             set: function (value) {
-                preElt.setSelectionRange(preEditor.selectionStart, value);
+                inputElt.setSelectionRange(selectionStart, value);
             },
 
             enumerable: true,
@@ -225,22 +290,63 @@ define([
             return range;
         }
 
-        preElt.setSelectionRange = function (ss, se) {
+        inputElt.setSelectionRange = function (ss, se) {
-            preEditor.selectionStart = ss;
+            selectionStart = ss;
-            preEditor.selectionEnd = se;
+            selectionEnd = se;
-            var range = createRange(this, ss, se);
+            var range = createRange(editor.contentElt, ss, se);
 
             var selection = window.getSelection();
             selection.removeAllRanges();
             selection.addRange(range);
         };
 
+        editor.$contentElt.on('keydown', function (evt) {
+            var cmdOrCtrl = evt.metaKey || evt.ctrlKey;
+
+            switch (evt.keyCode) {
+            case 9: // Tab
+                if (!cmdOrCtrl) {
+                    action('indent', {
+                        inverse: evt.shiftKey
+                    });
+                    evt.preventDefault();
+                }
+                break;
+            case 13:
+                action('newline');
+                evt.preventDefault();
+                break;
+            case 191:
+                if (cmdOrCtrl && !evt.altKey) {
+                    action('comment', {
+                        lang: this.id
+                    });
+                    evt.preventDefault();
+                }
+                break;
+            }
+        });
+
+        editor.$contentElt.on('paste', function () {
+            pagedownEditor.undoManager.setMode("paste");
+            setTimeout(function() {
+                onInputChange();
+            }, 0);
+        });
+        
+        editor.$contentElt.on('cut', function () {
+            pagedownEditor.undoManager.setMode("cut");
+            setTimeout(function() {
+                onInputChange();
+            }, 0);
+        });
+        
         var action = function (action, options) {
             options = options || {};
 
-            var text = preElt.value,
+            var text = inputElt.value,
-                ss = options.start || preEditor.selectionStart,
+                ss = options.start || selectionStart,
-                se = options.end || preEditor.selectionEnd,
+                se = options.end || selectionEnd,
                 state = {
                     ss: ss,
                     se: se,
@@ -251,18 +357,18 @@ define([
 
             actions[action](state, options);
 
-            preElt.value = state.before + state.selection + state.after;
+            inputElt.value = state.before + state.selection + state.after;
 
-            preElt.setSelectionRange(state.ss, state.se);
+            inputElt.setSelectionRange(state.ss, state.se);
 
-            preElt.dispatchEvent(new window.Event('input'));
+            inputElt.dispatchEvent(new window.Event('input'));
         };
 
         var actions = {
             indent: function (state, options) {
                 var lf = state.before.lastIndexOf('\n') + 1;
 
-                undoManager && undoManager.setMode("typing");
+                pagedownEditor.undoManager.setMode("typing");
 
                 if (options.inverse) {
                     if (/\s/.test(state.before.charAt(lf))) {
@@ -295,9 +401,9 @@ define([
                 var lf = state.before.lastIndexOf('\n') + 1;
                 var indent = (state.before.slice(lf).match(/^\s+/) || [''])[0];
 
-                undoManager && undoManager.setMode("newlines");
+                pagedownEditor.undoManager.setMode("newlines");
 
-                state.before += '\n' + indent;
+                state.before += '\n'// + indent;
 
                 state.selection = '';
 
@@ -315,7 +421,7 @@ define([
                     closeBefore = state.before.lastIndexOf(close),
                     openAfter = state.after.indexOf(start);
 
-                undoManager && undoManager.setMode("typing");
+                pagedownEditor.undoManager.setMode("typing");
 
                 if (start > -1 && end > -1 && (start > closeBefore || closeBefore === -1) && (end < openAfter || openAfter === -1)) {
                     // Uncomment
@@ -386,33 +492,6 @@ define([
                 }
             }
         };
-
-        preEditor.$contentElt.on('keydown', function (evt) {
-            var cmdOrCtrl = evt.metaKey || evt.ctrlKey;
-
-            switch (evt.keyCode) {
-            case 9: // Tab
-                if (!cmdOrCtrl) {
-                    action('indent', {
-                        inverse: evt.shiftKey
-                    });
-                    return false;
-                }
-                break;
-            case 13:
-                action('newline');
-                return false;
-            case 191:
-                if (cmdOrCtrl && !evt.altKey) {
-                    action('comment', {
-                        lang: this.id
-                    });
-                    return false;
-                }
-
-                break;
-            }
-        });
     };
 
     
@@ -446,7 +525,9 @@ define([
         // Find modified section starting from bottom
         var rightIndex = -sectionList.length;
         _.some(sectionList.slice().reverse(), function(section, index) {
-            if(index >= newSectionList.length || section.text != newSectionList[newSectionList.length - index - 1].text) {
+            var newSectionText = newSectionList[newSectionList.length - index - 1].text;
+            // Check also the content of the node since new lines can be added just at the beggining
+            if(index >= newSectionList.length || section.text != newSectionText || section.highlightedContent.textContent != newSectionText) {
                 rightIndex = -index;
                 return true;
             }
@@ -467,35 +548,51 @@ define([
         sectionList = leftSections.concat(modifiedSections).concat(rightSections);
     }
     
-    var elapsedTime = 0;
-    var timeoutId;
     function highlightSections() {        
-        
+        selectionStart = inputElt.selectionStart;
-        if(fileChanged === true) {
+        selectionEnd = inputElt.selectionEnd;
-            fileChanged = false;
-            // Perform a synchronous transformation
-            preEditor.selectionStart = preElt.selectionStart;
-            preEditor.selectionEnd = preElt.selectionEnd;
         var newSectionEltList = document.createDocumentFragment();
         modifiedSections.forEach(function(section) {
             highlight(section);
             newSectionEltList.appendChild(section.highlightedContent);
         });
-            preEditor.$contentElt.html('');
+        if(fileChanged === true) {
-            preEditor.$contentElt[0].appendChild(newSectionEltList);
+            editor.contentElt.innerHTML = '';
-            preElt.setSelectionRange(preEditor.selectionStart, preEditor.selectionEnd);
+            editor.contentElt.appendChild(newSectionEltList);
-            return;
+            inputElt.setSelectionRange(selectionStart, selectionEnd);
+        }
+        else {
+            // Remove outdated sections
+            sectionsToRemove.forEach(function(section) {
+                var sectionElt = document.getElementById("wmd-input-section-" + section.id);
+                // section can be already removed
+                sectionElt && editor.contentElt.removeChild(sectionElt);
+            });
+            
+            if(insertBeforeSection !== undefined) {
+                var insertBeforeElt = document.getElementById("wmd-input-section-" + insertBeforeSection.id);
+                editor.contentElt.insertBefore(newSectionEltList, insertBeforeElt);
+            }
+            else {
+                editor.contentElt.appendChild(newSectionEltList);
             }
             
-        // Perform an asynchronous transformation on each modified sections
+            //var dummyTextNode = document.createTextNode('\n');
-        clearTimeout(timeoutId);
+            //editor.contentElt.appendChild(dummyTextNode);
-        //timeoutId = setTimeout(asyncHighlightSections, elapsedTime);
+            inputElt.setSelectionRange(selectionStart, selectionEnd);
-        preEditor.selectionStart = preElt.selectionStart;
-        preEditor.selectionEnd = preElt.selectionEnd;
-        Prism.highlightElement(preEditor.$contentElt[0]);
-        //preElt.setSelectionRange(preEditor.selectionStart, preEditor.selectionEnd);
-    }
             
+            // Remove textNodes created outside sections
+            var childNode = editor.contentElt.firstChild;
+            while(childNode) {
+                var nextNode = childNode.nextSibling;
+                if(childNode.nodeType == 3) {
+                    editor.contentElt.removeChild(childNode);
+                }
+                childNode = nextNode;
+            }
+        }
+    }
+/*
     function asyncHighlightSections() {
         var startTime = Date.now();
         var deferredList = [];
@@ -513,15 +610,9 @@ define([
             }, '');
             
             // Check that the editor has the actual value
-            if(preElt.textContent == text) {
+            if(inputElt.textContent == text) {
-                preEditor.selectionStart = preElt.selectionStart;
+                selectionStart = inputElt.selectionStart;
-                preEditor.selectionEnd = preElt.selectionEnd;
+                selectionEnd = inputElt.selectionEnd;
-                
-                // Remove outdated sections
-                _.each(sectionsToRemove, function(section) {
-                    var sectionElt = document.getElementById("wmd-input-section-" + section.id);
-                    preEditor.$contentElt[0].removeChild(sectionElt);
-                });
                 
                 var newSectionEltList = document.createDocumentFragment();
                 modifiedSections.forEach(function(section) {
@@ -530,21 +621,21 @@ define([
                 
                 if(insertBeforeSection !== undefined) {
                     var insertBeforeElt = document.getElementById("wmd-input-section-" + insertBeforeSection.id);
-                    preEditor.$contentElt[0].insertBefore(newSectionEltList, insertBeforeElt);
+                    editor.$contentElt[0].insertBefore(newSectionEltList, insertBeforeElt);
                 }
                 else {
-                    preEditor.$contentElt[0].appendChild(newSectionEltList);
+                    editor.$contentElt[0].appendChild(newSectionEltList);
                 }
                 
-                preElt.setSelectionRange(preEditor.selectionStart, preEditor.selectionEnd);
+                inputElt.setSelectionRange(selectionStart, selectionEnd);
                 elapsedTime = Date.now() - startTime;
             }
         });
     }
-
+*/
     function highlight(section) {
         var text = section.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/\u00a0/g, ' ');
-        var sectionElt = crel('div', {
+        var sectionElt = crel('span', {
             id: 'wmd-input-section-' + section.id,
             class: 'wmd-input-section'
         });
@@ -552,5 +643,5 @@ define([
         section.highlightedContent = sectionElt;
     }
 
-    return preEditor;
+    return editor;
 });

public/res/extensions/buttonFocusMode.js

@@ -1,9 +1,10 @@
 define([
     "jquery",
     "underscore",
+    "caret",
     "crel",
     "classes/Extension"
-], function($, _, crel, Extension) {
+], function($, _, caret, crel, Extension) {
 
     var buttonFocusMode = new Extension("buttonFocusMode", 'Button "Focus Mode"', true, true);
     buttonFocusMode.settingsBlock = "When typing, scrolls automatically the editor to always have the caret centered verticaly.";
@@ -25,6 +26,39 @@ define([
         }
     }
     
+    var $editorElt;
+    //var $positionHelper = $('<span>').css('display', 'inline-block');
+    var coef = 0.2;
+    function doFocus() {
+        setTimeout(function() {
+            if(!($editorElt && $editorElt[0].focused)) {
+                return;
+            }
+            /*
+            var range = window.getSelection().getRangeAt(0); 
+            range.insertNode($positionHelper[0]);
+            var parentNode = $positionHelper[0].parentNode;
+            */
+            var editorHeight = $editorElt.height();
+            var cursorMinY = coef*editorHeight;
+            var cursorMaxY = (1-coef)*editorHeight;
+            var cursorY = $editorElt.caret('offset').top - $editorElt.offset().top;
+            console.log($editorElt.caret('offset'));
+            //$positionHelper.detach();
+            //parentNode.normalize();
+            /*
+            if(cursorY < cursorMinY) {
+                $editorElt.scrollTop($editorElt.scrollTop() - cursorMinY + cursorY);
+            }
+            else if(cursorY > cursorMaxY) {
+                $editorElt.scrollTop($editorElt.scrollTop() + cursorY - cursorMaxY);
+            }
+            */
+        }, 0);
+    }
+
+    buttonFocusMode.onLayoutResize = doFocus;
+    
     buttonFocusMode.onReady = function() {
         if(aceEditor) {
             aceEditor.getSession().selection.on('changeCursor', doFocusMode);
@@ -36,30 +70,11 @@ define([
             }, true);
             return;
         }
-        var $editorElt = $('#wmd-input');
+        $editorElt = $('#wmd-input').on('keydown', function(event) {
-        var $positionHelper = $('<span>').css('display', 'inline-block');
-        var coef = 0.2;
-        $editorElt.on('keydown', function(event) {
             if(event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
                 return;
             }
-            setTimeout(function() {
+            doFocus();
-                var range = window.getSelection().getRangeAt(0); 
-                range.insertNode($positionHelper[0]);
-                var parentNode = $positionHelper[0].parentNode;
-                var editorHeight = $editorElt.height();
-                var cursorMinY = coef*editorHeight;
-                var cursorMaxY = (1-coef)*editorHeight;
-                var cursorY = $positionHelper.offset().top - $editorElt.offset().top;
-                $positionHelper.detach();
-                parentNode.normalize();
-                if(cursorY < cursorMinY) {
-                    $editorElt.scrollTop($editorElt.scrollTop() - cursorMinY + cursorY);
-                }
-                else if(cursorY > cursorMaxY) {
-                    $editorElt.scrollTop($editorElt.scrollTop() + cursorY - cursorMaxY);
-                }
-            }, 0);
         });
     };
 

public/res/extensions/scrollLink.js

@@ -45,7 +45,7 @@ define([
                     mdSectionOffset = 0;
                     return;
                 }
-                var $delimiterElt = $(this);
+                var $delimiterElt = $(this.firstChild);
                 // Consider div scroll position
                 var newSectionOffset = $delimiterElt.position().top + editorScrollTop;
                 mdSectionList.push({

public/res/helpers/googleHelper.js

@@ -755,6 +755,10 @@ define([
         if(pickerType == 'doc' || pickerType == 'folder') {
             authenticate(task, 'gdrive', accountId);
         }
+        else {
+            accountId = 'google.picasa0';
+            authenticate(task, 'picasa', accountId);
+        }
         loadPicker(task);
         task.onRun(function() {
             var authorizationMgr = authorizationMgrMap[accountId];
@@ -794,6 +798,7 @@ define([
                 view.setType('ofuser');
                 pickerBuilder.addView(view);
                 pickerBuilder.addView(google.picker.ViewId.PHOTO_UPLOAD);
+                authorizationMgr && authorizationMgr.token && pickerBuilder.setOAuthToken(authorizationMgr.token.access_token);
             }
             pickerBuilder.setCallback(function(data) {
                 if(data.action == google.picker.Action.PICKED || data.action == google.picker.Action.CANCEL) {

public/res/libs/Markdown.Editor.light.js

@@ -119,13 +119,13 @@
             panels;
 
         var undoManager;
-        this.run = function (previewWrapper) {
+        this.run = function () {
             if (panels)
                 return; // already initialized
 
             panels = new PanelCollection(idPostfix);
             var commandManager = new CommandManager(hooks, getString);
-            var previewManager = new PreviewManager(markdownConverter, panels, function () { hooks.onPreviewRefresh(); }, previewWrapper);
+            var previewManager = new PreviewManager(markdownConverter, panels, function () { hooks.onPreviewRefresh(); });
             var uiManager;
 
             if (!/\?noundo/.test(doc.location.href)) {
@@ -844,14 +844,14 @@
         this.init();
     };
 
-    function PreviewManager(converter, panels, previewRefreshCallback, previewWrapper) {
+    function PreviewManager(converter, panels, previewRefreshCallback) {
 
         var managerObj = this;
         var timeout;
         var elapsedTime;
         var oldInputText;
         var maxDelay = 3000;
-        var startType = "delayed"; // The other legal value is "manual"
+        var startType = "manual"; // The other legal value is "manual"
 
         // Adds event listeners to elements
         var setupEvents = function (inputElem, listener) {
@@ -910,9 +910,6 @@
 
             pushPreviewHtml(text);
         };
-        if(previewWrapper !== undefined) {
-        	makePreviewHtml = previewWrapper(makePreviewHtml);
-        }
 
         // setTimeout is already used.  Used as an event listener.
         var applyTimeout = function () {

public/res/main.js

@@ -65,6 +65,7 @@ requirejs.config({
         normalize: 'bower-libs/require-css/normalize',
         prism: 'bower-libs/prism/prism',
         'prism-core': 'bower-libs/prism/components/prism-core',
+        caret: 'bower-libs/caret.js/src/jquery.caret'
     },
     shim: {
         underscore: {
@@ -125,6 +126,9 @@ requirejs.config({
         bootstrap: [
             'jquery'
         ],
+        'caret': [
+            'jquery'
+        ],
         'jquery-waitforimages': [
             'jquery'
         ],

public/res/styles/main.less

@@ -142,7 +142,7 @@ body {
 
 #preview-contents {
 	padding: 30px;
-	margin: 0 auto 180px;
+	margin: 0 auto 200px;
     text-align: justify;
 }
 
@@ -1252,6 +1252,7 @@ a {
         word-break: break-word;
         > div {
             margin: 0 auto;
+            padding: 10px 0 230px;
         }
     }