Support change keymap and indentation type with size in statusbar

public/css/index.css

@@ -326,7 +326,6 @@ div[contenteditable]:empty:not(:focus):before{
     font-size: 11px;
     line-height: 25px;
     height: 26px;
-    overflow: hidden;
 }
 
 .status-bar .status-info {
@@ -351,14 +350,90 @@ div[contenteditable]:empty:not(:focus):before{
     background: #1c1c1e;
     color: #ccc;
     position: absolute;
-    right: 10px;
+	right: 0;
     text-align: right;
     white-space: nowrap;
-    max-width: 30%;
-    overflow: hidden;
     text-overflow: ellipsis;
 }
 
+.status-bar .status-indicators > div {
+	float: right;
+	padding: 0 10px;
+	border-left: 1px solid #343434;
+}
+
+.status-bar .status-indicators .status-keymap > a {
+	color: inherit;
+    text-decoration: none;
+}
+
+.status-bar .indent-type, .status-bar .indent-width-label {
+    cursor: pointer;
+/*    margin-right: 3px;*/
+}
+
+.status-bar .indent-width-input {
+    font-size: 12px;
+    font-weight: 500;
+    height: 18px;
+    line-height: 1;
+    vertical-align: middle;
+    color: #ccc;
+    margin: 0;
+    padding: 0 0 2px;
+    position: relative;
+    left: 0;
+    top: -1px;
+    width: 18px;
+    transition: .1s linear all;
+    background-color: #555;
+    border: 1px solid #202020;
+    color: #fff;
+    box-shadow: inset 0 1px 0 rgba(0,0,0,0.06);
+    border-radius: 3px;
+    text-align: center;
+}
+
+.status-bar .indent-width-input:focus {
+    border: 1px solid #2893ef;
+}
+
+.status-bar .indent-width-input::-webkit-inner-spin-button, 
+.status-bar .indent-width-input::-webkit-outer-spin-button { 
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.status-bar .status-indent > * {
+    display: inline-block;
+}
+
+.status-bar .status-indent > *.hidden {
+    display: none;
+}
+
+.status-bar .status-overwrite:hover, .status-bar .indent-type:hover, .status-bar .indent-width-label:hover {
+    text-decoration: underline;
+}
+
+.status-bar .dropdown-menu {
+    background-color: #000;
+    color: #fff;
+    border: 1px solid rgba(255,255,255,0.09) !important;
+}
+
+.status-bar .dropdown-menu .divider {
+    background-color: #343434;
+}
+
+.status-bar .dropdown-menu > li > a {
+    color: #ccc;
+}
+
+.status-bar .dropdown-menu > li > a:focus, .status-bar .dropdown-menu > li > a:hover {
+    background-color: #212121;
+}
+
 @media print {
     body {
         padding-top: 0 !important;

public/js/index.js

@@ -18,7 +18,33 @@ var defaultExtraKeys = {
     "Ctrl-S": function () {
         return CodeMirror.PASS
     },
-    "Enter": "newlineAndIndentContinueMarkdownList"
+    "Enter": "newlineAndIndentContinueMarkdownList",
+    "Tab": function(cm) {
+        var tab = '\t';
+		var spaces = Array(parseInt(cm.getOption("indentUnit")) + 1).join(" ");
+        //auto indent whole line when in list or blockquote
+        var cursor = cm.getCursor();
+        var line = cm.getLine(cursor.line);
+        var regex = /^(\s*)(>[> ]*|[*+-]\s|(\d+)([.)]))/;
+        var match;
+        if ((match = regex.exec(line)) !== null) {
+            var ch = match[1].length;
+            var pos = {
+                line: cursor.line,
+                ch: ch
+            };
+			if (editor.getOption('indentWithTabs'))
+            	cm.replaceRange(tab, pos, pos, '+input');
+			else
+				cm.replaceRange(spaces, pos, pos, '+input');
+        } else {
+            if (editor.getOption('indentWithTabs'))
+                cm.execCommand('defaultTab');
+            else {
+        		cm.replaceSelection(spaces);
+			}
+        }
+    }
 };
 
 var idleTime = 300000; //5 mins
@@ -250,20 +276,164 @@ var editor = CodeMirror.fromTextArea(textit, {
 var inlineAttach = inlineAttachment.editors.codemirror4.attach(editor);
 defaultTextHeight = parseInt($(".CodeMirror").css('line-height'));
 
+var statusBarTemplate = null;
 var statusBar = null;
 var statusCursor = null;
 var statusFile = null;
 var statusIndicators = null;
+var statusLength = null;
+var statusKeymap = null;
+var statusIndent = null;
+
+$.get('/views/statusbar.html', function (template) {
+    statusBarTemplate = template;
+});
 
 function addStatusBar() {
-    var element = '<div class="status-bar"><div class="status-info"><div class="status-cursor"></div><div class="status-file"></div></div><div class="status-indicators"></div></div>';
+    statusBar = $(statusBarTemplate);
-    statusBar = $(element);
     statusCursor = statusBar.find('.status-cursor');
     statusFile = statusBar.find('.status-file');
     statusIndicators = statusBar.find('.status-indicators');
+    statusIndent = statusBar.find('.status-indent');
+    statusKeymap = statusBar.find('.status-keymap');
+    statusLength = statusBar.find('.status-length');
     editor.addPanel(statusBar[0], {
         position: "bottom"
     });
+    
+    setIndent();
+    setKeymap();
+}
+
+function setIndent() {
+    var cookieIndentType = Cookies.get('indent_type');
+    var cookieTabSize = parseInt(Cookies.get('tab_size'));
+    var cookieSpaceUnits = parseInt(Cookies.get('space_units'));
+    if (cookieIndentType) {
+        if (cookieIndentType == 'tab') {
+            editor.setOption('indentWithTabs', true);
+            if (cookieTabSize)
+                editor.setOption('indentUnit', cookieTabSize);
+        } else if (cookieIndentType == 'space') {
+            editor.setOption('indentWithTabs', false);
+            if (cookieSpaceUnits)
+                editor.setOption('indentUnit', cookieSpaceUnits);
+        }
+    }
+    if (cookieTabSize)
+        editor.setOption('tabSize', cookieTabSize);
+    
+    var type = statusIndicators.find('.indent-type');
+    var widthLabel = statusIndicators.find('.indent-width-label');
+    var widthInput = statusIndicators.find('.indent-width-input');
+    
+    function setType() {
+        if (editor.getOption('indentWithTabs')) {
+            Cookies.set('indent_type', 'tab', {
+                expires: 365
+            });
+            type.text('Tab Size:');
+        } else {
+            Cookies.set('indent_type', 'space', {
+                expires: 365
+            });
+            type.text('Spaces:');
+        }
+    }
+    setType();
+    
+    function setUnit() {
+        var unit = editor.getOption('indentUnit');
+        if (editor.getOption('indentWithTabs')) {
+            Cookies.set('tab_size', unit, {
+                expires: 365
+            });
+        } else {
+            Cookies.set('space_units', unit, {
+                expires: 365
+            });
+        }
+        widthLabel.text(unit);
+    }
+    setUnit();
+    
+    type.click(function() {
+        if (editor.getOption('indentWithTabs')) {
+            editor.setOption('indentWithTabs', false);
+            cookieSpaceUnits = parseInt(Cookies.get('space_units'));
+            if (cookieSpaceUnits)
+                editor.setOption('indentUnit', cookieSpaceUnits)
+        } else {
+            editor.setOption('indentWithTabs', true);
+            cookieTabSize = parseInt(Cookies.get('tab_size'));
+            if (cookieTabSize) {
+                editor.setOption('indentUnit', cookieTabSize);
+                editor.setOption('tabSize', cookieTabSize);
+            }
+        }
+        setType();
+		setUnit();
+    });
+    widthLabel.click(function() {
+        if (widthLabel.is(':visible')) {
+            widthLabel.addClass('hidden');
+            widthInput.removeClass('hidden');
+            widthInput.val(editor.getOption('indentUnit'));
+            widthInput.select();
+        } else {
+            widthLabel.removeClass('hidden');
+            widthInput.addClass('hidden');
+        }
+    });
+    widthInput.on('change', function() {
+        var val = widthInput.val();
+		if (!val) val = editor.getOption('indentUnit');
+        if (val < 1) val = 1;
+        else if (val > 10) val = 10;
+        
+        if (editor.getOption('indentWithTabs')) {
+            editor.setOption('tabSize', val);
+        }
+        editor.setOption('indentUnit', val);
+        setUnit();
+    });
+    widthInput.on('blur', function() {
+        widthLabel.removeClass('hidden');
+        widthInput.addClass('hidden');
+    });
+}
+
+function setKeymap() {
+    var cookieKeymap = Cookies.get('keymap');
+    if (cookieKeymap)
+        editor.setOption('keyMap', cookieKeymap);
+    
+    var label = statusIndicators.find('.ui-keymap-label');
+    var sublime = statusIndicators.find('.ui-keymap-sublime');
+    var emacs = statusIndicators.find('.ui-keymap-emacs');
+    var vim = statusIndicators.find('.ui-keymap-vim');
+    
+    function setKeymapLabel() {
+        var keymap = editor.getOption('keyMap');
+        Cookies.set('keymap', keymap, {
+            expires: 365
+        });
+        label.text(keymap);
+    }
+    setKeymapLabel();
+    
+    sublime.click(function() {
+        editor.setOption('keyMap', 'sublime');
+        setKeymapLabel();
+    });
+    emacs.click(function() {
+        editor.setOption('keyMap', 'emacs');
+        setKeymapLabel();
+    });
+    vim.click(function() {
+        editor.setOption('keyMap', 'vim');
+        setKeymapLabel();
+    });
 }
 
 var selection = null;
@@ -294,7 +464,7 @@ function updateStatusBar() {
     statusCursor.text(cursorText);
     var fileText = ' — ' + editor.lineCount() + ' Lines';
     statusFile.text(fileText);
-    statusIndicators.text('Length ' + editor.getValue().length);
+    statusLength.text('Length ' + editor.getValue().length);
 }
 
 //ui vars

public/vendor/codemirror/compress.sh

@@ -53,4 +53,6 @@ mode/perl/perl.js \
 mode/sass/sass.js \
 mode/r/r.js \
 mode/dockerfile/dockerfile.js \
-keymap/sublime.js
+keymap/emacs.js \
+keymap/sublime.js \
+keymap/vim.js

public/vendor/codemirror/theme/one-dark.css

@@ -140,6 +140,10 @@ borrow some color from tomorrow-night-eighties
 .cm-s-one-dark .CodeMirror-cursor {
   border-left: 2px solid #528bff !important;
 }
+.cm-fat-cursor .CodeMirror-cursor {
+  border-left: 2px solid #3C5B9E !important;
+  background: #3C5B9E;
+}
 .cm-s-one-dark .CodeMirror-gutters {
 /*  background-color: #282c34;*/
   background-color: #1e2126;

public/views/statusbar.html

@@ -0,0 +1,24 @@
+<div class="status-bar">
+    <div class="status-info">
+        <div class="status-cursor"></div>
+        <div class="status-file"></div>
+    </div>
+    <div class="status-indicators">
+        <div class="status-length"></div>
+        <div class="status-keymap dropup pull-right">
+            <a id="keymapLabel" class="ui-keymap-label text-uppercase" data-target="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Click to change keymap">
+            Sublime
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="keymapLabel">
+                <li class="ui-keymap-sublime"><a>Sublime</a></li>
+                <li class="ui-keymap-emacs"><a>Emacs</a></li>
+                <li class="ui-keymap-vim"><a>Vim</a></li>
+            </ul>
+        </div>
+        <div class="status-indent">
+            <div class="indent-type" title="Click to switch indentation type">Spaces:</div>
+            <div class="indent-width-label" title="Click to change indentation size">4</div>
+            <input class="indent-width-input hidden" type="number" min="1" max="10" maxlength="2" size="2">
+        </div>
+    </div>
+</div>