Restored PageDown editor in light mode

public/res/core.js

@@ -18,6 +18,7 @@ define([
     "storage",
     "uilayout",
     'pagedown-ace',
+    'pagedown-light',
     'libs/ace_mode',
     'ace/requirejs/text!ace/css/editor.css',
     'ace/requirejs/text!ace/theme/textmate.css',
@@ -122,6 +123,8 @@ define([
         utils.setInputValue("#input-settings-editor-font-size", settings.editorFontSize);
         // Max width
         utils.setInputValue("#input-settings-max-width", settings.maxWidth);
+        // RTL
+        utils.setInputChecked("#input-settings-rtl", storage.rtl == 'true');
         // Default content
         utils.setInputValue("#textarea-settings-default-content", settings.defaultContent);
         // Commit message
@@ -160,6 +163,8 @@ define([
         newSettings.editorFontSize = utils.getInputIntValue("#input-settings-editor-font-size", event, 1, 99);
         // Max width
         newSettings.maxWidth = utils.getInputIntValue("#input-settings-max-width", event, 1);
+        // RTL
+        var rtl = utils.getInputChecked("#input-settings-rtl");
         // Default content
         newSettings.defaultContent = utils.getInputValue("#textarea-settings-default-content");
         // Commit message
@@ -186,6 +191,7 @@ define([
             $.extend(settings, newSettings);
             storage.settings = JSON.stringify(settings);
             storage.themeV3 = theme;
+            storage.rtl = rtl;
         }
     }
 
@@ -408,7 +414,7 @@ define([
     var $rightBtnDropdown;
     var marginWidth = 40 + 25 + 25;
     var titleWidth = 20 + 348;
-    var leftButtonsWidth = window.lightMode ? 0 : 80 + 87 + 174 + 175 + 87;
+    var leftButtonsWidth = 80 + 87 + 174 + 175 + 87;
     var rightButtonsWidth = 40 + 88 + 87;
     var rightButtonsDropdown = 44;
     function adjustWindow() {
@@ -427,10 +433,6 @@ define([
                 $leftBtnDropdown.hide().after($leftBtnElts);
                 $rightBtnDropdown.hide().after($rightBtnElts);
             }
-            if(window.lightMode) {
-                $leftBtnElts.hide();
-                $leftBtnDropdown.hide();
-            }
         }
         layout.resizeAll();
     }
@@ -467,7 +469,22 @@ define([
 
         var $previewContainerElt = $(".preview-container");
 
-        if(!window.lightMode) {
+        if(window.lightMode) {
+            // Store editor scrollTop on scroll event
+            $editorElt.scroll(function() {
+                if(documentContent !== undefined) {
+                    fileDesc.editorScrollTop = $(this).scrollTop();
+                }
+            });
+            // Store editor selection on change
+            $editorElt.bind("keyup mouseup", function() {
+                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) {
@@ -483,13 +500,13 @@ define([
             }, 100);
             aceEditor.session.selection.on('changeSelection', saveSelection);
             aceEditor.session.selection.on('changeCursor', saveSelection);
+        }
         // Store preview scrollTop on scroll event
         $previewContainerElt.scroll(function() {
             if(documentContent !== undefined) {
                 fileDesc.previewScrollTop = $previewContainerElt.scrollTop();
             }
         });
-        }
 
         // Create the converter and the editor
         var converter = new Markdown.Converter();
@@ -507,10 +524,14 @@ define([
         }
         
         var previewWrapper;
-        if(!window.lightMode) {
+        if(window.lightMode) {
+            editor = new Markdown.EditorLight(converter);
+        }
+        else {
             editor = new Markdown.Editor(converter, undefined, {
                 keyStrokes: shortcutMgr.getPagedownKeyStrokes()
             });
+        }
         // Custom insert link dialog
         editor.hooks.set("insertLinkDialog", function(callback) {
             core.insertLinkCallback = callback;
@@ -537,10 +558,15 @@ define([
                         makePreview();
                         eventMgr.onFileOpen(fileDesc);
                         $previewContainerElt.scrollTop(fileDesc.previewScrollTop);
+                        if(window.lightMode) {
+                            $editorElt.scrollTop(fileDesc.editorScrollTop);
+                        }
+                        else {
                             _.defer(function() {
                                 aceEditor.renderer.scrollToY(fileDesc.editorScrollTop);
                             });
                         }
+                    }
                     else {
                         debouncedMakePreview();
                     }
@@ -555,53 +581,32 @@ define([
                     if(documentContent === undefined) {
                         eventMgr.onFileOpen(fileDesc);
                         $previewContainerElt.scrollTop(fileDesc.previewScrollTop);
+                        if(window.lightMode) {
+                            $editorElt.scrollTop(fileDesc.editorScrollTop);
+                        }
+                        else {
                             _.defer(function() {
                                 aceEditor.renderer.scrollToY(fileDesc.editorScrollTop);
                             });
                         }
-                        checkDocumentChanges();
-                    };
-                };
-            }
-        }
-        else {
-            // That's the light Markdown editor replacing the one from pagedown
-            var $wmdPreviewElt = $('#wmd-preview');
-            var hooks = new Markdown.HookCollection();
-            hooks.addNoop("onPreviewRefresh");
-            var makePreviewHtml = function() {
-                var text = $editorElt.val();
-                text = converter.makeHtml(text);
-                $wmdPreviewElt.html(text);
-                hooks.onPreviewRefresh();
-            };
-            var debouncedMakePreview = _.debounce(makePreviewHtml, 1000);
-            var lightPreviewWrapper = function() {
-                if(documentContent === undefined) {
-                    makePreviewHtml();
-                    eventMgr.onFileOpen(fileDesc);
-                }
-                else {
-                    debouncedMakePreview();
                     }
                     checkDocumentChanges();
                 };
-            $editorElt.on("input propertychange", lightPreviewWrapper);
-            editor = {
-                hooks: hooks,
-                getConverter: function() {
-                    return converter;
-                },
-                run: lightPreviewWrapper,
-                refreshPreview: lightPreviewWrapper
             };
         }
 
         eventMgr.onPagedownConfigure(editor);
         editor.hooks.chain("onPreviewRefresh", eventMgr.onAsyncPreview);
+        if(window.lightMode) {
+            editor.run(previewWrapper);
+            editor.undoManager.reinit(initDocumentContent, fileDesc.editorStart, fileDesc.editorEnd, fileDesc.editorScrollTop);
+            $editorElt.focus();
+        }
+        else {
             editor.run(aceEditor, previewWrapper);
-        aceEditor && aceEditor.selection.setSelectionRange(fileDesc.editorSelectRange);
+            aceEditor.selection.setSelectionRange(fileDesc.editorSelectRange);
-        (aceEditor && aceEditor.focus()) || $editorElt.focus();
+            aceEditor.focus();
+        }
 
         // Hide default buttons
         $(".wmd-button-row li").addClass("btn btn-success").css("left", 0).find("span").hide();
@@ -742,7 +747,7 @@ define([
             });
         }
         
-        $editorElt = $("#wmd-input").css({
+        $editorElt = $("#wmd-input, .textarea-helper").css({
             // Apply editor font
             "font-family": settings.editorFontFamily,
             "font-size": settings.editorFontSize + "px",
@@ -917,7 +922,7 @@ define([
         });
         $(".action-import-docs-settings-confirm").click(function() {
             storage.clear();
-            var allowedKeys = /^file\.|^focusMode$|^folder\.|^publish\.|^settings$|^sync\.|^theme$|^version$|^welcomeTour$/;
+            var allowedKeys = /^file\.|^focusMode$|^folder\.|^publish\.|^settings$|^sync\.|^themeV3$|^rtl$|^version$|^welcomeTour$/;
             _.each(newstorage, function(value, key) {
                 if(allowedKeys.test(key)) {
                     storage[key] = value;

public/res/eventMgr.js

@@ -120,7 +120,8 @@ define([
     eventMgr.onLoadSettings = function() {
         logger.log("onLoadSettings");
         _.each(extensionList, function(extension) {
-            utils.setInputChecked("#input-enable-extension-" + extension.extensionId, extension.enabled === true);
+            var isChecked = !extension.isOptional || extension.config.enabled === undefined || extension.config.enabled === true;
+            utils.setInputChecked($("#input-enable-extension-" + extension.extensionId), isChecked);
             var onLoadSettingsListener = extension.onLoadSettings;
             onLoadSettingsListener && onLoadSettingsListener();
         });

public/res/extensions/scrollLink.js

@@ -5,7 +5,7 @@ define([
     "text!html/scrollLinkSettingsBlock.html"
 ], function($, _, Extension, scrollLinkSettingsBlockHTML) {
 
-    var scrollLink = new Extension("scrollLink", "Scroll Link", true, true, true);
+    var scrollLink = new Extension("scrollLink", "Scroll Link", true, true);
     scrollLink.settingsBlock = scrollLinkSettingsBlockHTML;
 
     var aceEditor;
@@ -23,6 +23,8 @@ define([
         offsetBegin = offsetBeginParam;
     };
 
+    var $textareaElt;
+    var $textareaHelperElt;
     var $previewElt;
     var mdSectionList = [];
     var htmlSectionList = [];
@@ -34,6 +36,47 @@ define([
         var mdTextOffset = 0;
         var mdSectionOffset = 0;
         var firstSectionOffset = offsetBegin;
+        function addTextareaSection(sectionText) {
+            var sectionHeight = 0;
+            if(sectionText !== undefined) {
+                $textareaHelperElt.text(sectionText);
+                sectionHeight += $textareaHelperElt.prop('scrollHeight');
+            }
+            var newSectionOffset = mdSectionOffset + sectionHeight;
+            mdSectionList.push({
+                startOffset: mdSectionOffset,
+                endOffset: newSectionOffset,
+                height: sectionHeight
+            });
+            mdSectionOffset = newSectionOffset;
+        }
+        if(window.lightMode) {
+            // Special treatment for light mode
+            $textareaHelperElt.innerWidth($textareaElt.innerWidth());
+            _.each(sectionList, function(section, index) {
+                var sectionText = section.text;
+                if(index !== sectionList.length - 1) {
+                    if(sectionText.length === 0) {
+                        sectionText = undefined;
+                    }
+                }
+                addTextareaSection(sectionText);
+            });
+            
+            // Apply a coef to manage divergence in some browsers
+            var theoricalHeight = _.last(mdSectionList).endOffset;
+            var realHeight = $textareaElt[0].scrollHeight;
+            var coef = realHeight/theoricalHeight;
+            mdSectionList = _.map(mdSectionList, function(mdSection) {
+                return {
+                    startOffset: mdSection.startOffset * coef,
+                    endOffset: mdSection.endOffset * coef,
+                    height: mdSection.height * coef,
+                };
+            });
+        }
+        else {
+            // Everything's much simpler with ACE
             _.each(sectionList, function(section) {
                 mdTextOffset += section.text.length + firstSectionOffset;
                 firstSectionOffset = 0;
@@ -48,6 +91,7 @@ define([
                 });
                 mdSectionOffset = newSectionOffset;
             });
+        }
 
         // Try to find corresponding sections in the preview
         htmlSectionList = [];
@@ -94,7 +138,7 @@ define([
             doScrollLink();
             return;
         }
-        var editorScrollTop = aceEditor.renderer.getScrollTop();
+        var editorScrollTop = window.lightMode ? $textareaElt.scrollTop() : aceEditor.renderer.getScrollTop();
         editorScrollTop < 0 && (editorScrollTop = 0);
         var previewScrollTop = $previewElt.scrollTop();
         function getDestScrollTop(srcScrollTop, srcSectionList, destSectionList) {
@@ -155,17 +199,43 @@ define([
             // Animate the editor
             lastPreviewScrollTop = previewScrollTop;
             destScrollTop = getDestScrollTop(previewScrollTop, htmlSectionList, mdSectionList);
+            if(window.lightMode) {
+                destScrollTop = _.min([
+                    destScrollTop,
+                    $textareaElt.prop('scrollHeight') - $textareaElt.outerHeight()
+                ]);
+            }
+            else {
                 destScrollTop = _.min([
                     destScrollTop,
                     aceEditor.session.getScreenLength() * aceEditor.renderer.lineHeight + aceEditor.renderer.scrollMargin.bottom - aceEditor.renderer.$size.scrollerHeight
                 ]);
                 // If negative, set it to zero
                 destScrollTop < 0 && (destScrollTop = 0);
+            }
             if(Math.abs(destScrollTop - editorScrollTop) <= 9) {
                 // Skip the animation if diff is <= 9
                 lastEditorScrollTop = editorScrollTop;
                 return;
             }
+            if(window.lightMode) {
+                $textareaElt.stop(true).animate({
+                    scrollTop: destScrollTop
+                }, {
+                    easing: 'easeOutSine',
+                    duration: 200,
+                    step: function(now) {
+                        isEditorMoving = true;
+                        lastEditorScrollTop = editorScrollTop + now;
+                    },
+                    done: function() {
+                        _.defer(function() {
+                            isEditorMoving = false;
+                        });
+                    },
+                });
+            }
+            else {
                 scrollingHelper.stop(true).css('value', 0).animate({
                     value: destScrollTop - editorScrollTop
                 }, {
@@ -177,12 +247,13 @@ define([
                         aceEditor.session.setScrollTop(lastEditorScrollTop);
                     },
                     done: function() {
-                    setTimeout(function() {
+                        _.defer(function() {
                             isEditorMoving = false;
                         });
                     },
                 });
             }
+        }
     }, 100);
 
     scrollLink.onLayoutResize = function() {
@@ -197,6 +268,9 @@ define([
     var scrollAdjust = false;
     scrollLink.onReady = function() {
         $previewElt = $(".preview-container");
+        $textareaElt = $("#wmd-input");
+        // This helper is used to measure sections height in light mode
+        $textareaHelperElt = $('.textarea-helper');
 
         $previewElt.scroll(function() {
             if(isPreviewMoving === false && scrollAdjust === false) {
@@ -206,13 +280,19 @@ define([
             }
             scrollAdjust = false;
         });
-        aceEditor.session.on("changeScrollTop", function() {
+        var handleEditorScroll = function() {
             if(isEditorMoving === false) {
                 isScrollEditor = true;
                 isScrollPreview = false;
                 doScrollLink();
             }
-        });
+        };
+        if(window.lightMode) {
+            $textareaElt.scroll(handleEditorScroll);
+        }
+        else {
+            aceEditor.session.on("changeScrollTop", handleEditorScroll);
+        }
     };
 
     var $previewContentsElt;

public/res/html/bodyIndex.html

@@ -994,6 +994,17 @@
 										class="form-control col-lg-3"> px
 								</div>
 							</div>
+							<div class="form-group">
+								<label class="col-lg-4 control-label"
+									for="input-settings-rtl">Right-to-left
+								</label>
+								<div class="col-lg-7">
+									<div class="checkbox">
+										<input type="checkbox" id="input-settings-rtl" />
+									</div> <span
+										class="help-block"> Limited mode.</span>
+								</div>
+							</div>
 							<div class="form-group">
 								<label class="col-lg-4 control-label"
 									for="textarea-settings-default-content">Default content
@@ -1210,3 +1221,4 @@
 
 <div class="lock-ui hide"></div>
 <div id="dropboxjs" data-app-key="x0k2l8puemfvg0o"></div>
+<div class="textarea-helper"></div>

public/res/main.js

@@ -45,6 +45,7 @@ requirejs.config({
         css_browser_selector: 'bower-libs/css_browser_selector/css_browser_selector',
         'jquery-mousewheel': 'bower-libs/jquery-mousewheel/jquery.mousewheel',
         'pagedown-ace': 'bower-libs/pagedown-ace/Markdown.Editor',
+        'pagedown-light': 'libs/Markdown.Editor.light',
         'pagedown-extra': 'bower-libs/pagedown-extra/Markdown.Extra',
         'ace/requirejs/text': 'libs/ace_text',
         'ace/commands/default_commands': 'libs/ace_commands',
@@ -100,7 +101,8 @@ requirejs.config({
         'jquery-ui-widget': ['jquery-ui-core'],
         'jquery-ui-core': ['jquery'],
         'pagedown-extra': ['pagedown-ace'],
-        'pagedown-ace': ['bower-libs/pagedown-ace/Markdown.Converter']
+        'pagedown-ace': ['bower-libs/pagedown-ace/Markdown.Converter'],
+        'pagedown-light': ['bower-libs/pagedown-ace/Markdown.Converter']
     }
 });
 
@@ -124,7 +126,7 @@ catch (e) {
 window.viewerMode = /(^| )viewer($| )/.test(document.body.className);
 
 // Light mode is for mobile or viewer
-window.lightMode = window.viewerMode || /(\?|&)light($|&)/.test(location.search) || (function(a) {
+window.lightMode = window.viewerMode || localStorage.rtl == 'true' || /(\?|&)light($|&)/.test(location.search) || (function(a) {
     if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) {
         return true;
     }
@@ -147,6 +149,8 @@ themeModule, ], function($, core, eventMgr) {
     }
 
     $(function() {
+        // Add RTL class
+        localStorage.rtl == 'true' && $(document.body).addClass('rtl');
 
         // Here, all the modules are loaded and the DOM is ready
         core.onReady();

public/res/providers/gdriveProvider.js

@@ -398,6 +398,7 @@ define([
             if(aceEditor !== undefined) {
                 // Tell ACE to update realtime string on each change
                 localContext.string = realtimeString;
+            }
 
             // Save undo/redo buttons default actions
             undoExecute = pagedownEditor.uiManager.buttons.undo.execute;
@@ -433,7 +434,6 @@ define([
             model.addEventListener(gapi.drive.realtime.EventType.UNDO_REDO_STATE_CHANGED, function() {
                 pagedownEditor.uiManager.setUndoRedoButtonStates();
             });
-            }
 
         }, function(err) {
             console.error(err);

public/res/settings.js

@@ -7,7 +7,7 @@ define([
     var settings = {
         layoutOrientation: "horizontal",
         lazyRendering: true,
-        editorFontFamily: '"Lucida Sans Typewriter", "Lucida Console", Menlo, "Bitstream Vera Sans Mono", Courier, monospace',
+        editorFontFamily: 'Menlo, Consolas, "Courier New", Courier, monospace',
         editorFontSize: 13,
         maxWidth: 960,
         defaultContent: "\n\n\n> Written with [StackEdit](" + constants.MAIN_URL + ").",

public/res/storage.js

@@ -210,15 +210,15 @@ define([
         version = "v12";
     }
 
-    // Upgrade from v12 to v13
+    // Upgrade from v12/v13 to v14
-    if(version == "v12") {
+    if(version == "v12" || version == "v13") {
         if(_.has(localStorage, 'settings')) {
             settings = JSON.parse(localStorage.settings);
             // Have to reset the font because of Monaco issue with ACE
             delete settings.editorFontFamily;
             localStorage.settings = JSON.stringify(settings);
         }
-        version = "v13";
+        version = "v14";
     }
 
     localStorage.version = version;

public/res/styles/base.less

@@ -18,37 +18,37 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url("../font/OpenSans-Light.woff") format('woff');
+  src: url("../font/OpenSans-Light.woff") format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url("../font/OpenSans.woff") format('woff');
+  src: url("../font/OpenSans.woff") format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
-  src: local('Open Sans Bold'), local('OpenSans-Bold'), url("../font/OpenSans-Bold.woff") format('woff');
+  src: url("../font/OpenSans-Bold.woff") format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 300;
-  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url("../font/OpenSansLight-Italic.woff") format('woff');
+  src: url("../font/OpenSansLight-Italic.woff") format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 400;
-  src: local('Open Sans Italic'), local('OpenSans-Italic'), url("../font/OpenSans-Italic.woff") format('woff');
+  src: url("../font/OpenSans-Italic.woff") format('woff');
 }
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 700;
-  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url("../font/OpenSans-BoldItalic.woff") format('woff');
+  src: url("../font/OpenSans-BoldItalic.woff") format('woff');
 }
 
 @font-family-sans-serif: 'Open Sans', "Trebuchet MS", Helvetica, sans-serif;;
@@ -308,6 +308,20 @@ kbd {
 	background-position: -144px 0;
 }
 
+/*******************
+ * RTL
+ *******************/
+body.rtl {
+    #wmd-input,
+    #preview-contents,
+    .input-file-title,
+    .search-bar input,
+    .modal-document-manager input,
+    .container {
+        direction: rtl;
+    }
+}
+
 /*******************
  * PDF
  *******************/

public/res/styles/main.less

@@ -1152,11 +1152,25 @@ a {
 	.box-shadow(none);
 	resize: none;
 	border: none;
+    padding: 0 @padding-base-horizontal;
 	div& {
 		padding: 0;
 	}
 }
 
+.textarea-helper {
+    position: absolute;
+    top: -100px;
+    height: 1px;
+    padding: 0 @padding-base-horizontal;
+    font-size: @font-size-base;
+    line-height: @line-height-base;
+    position: absolute;
+    overflow: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
 .preview-container {
 	overflow: auto;
 	background-color: @secondary-bg-light;