implement customizable indentation widths

www/code/main.js

@@ -61,6 +61,20 @@ define([
             $iframe.find('.CodeMirror').addClass('fullPage');
             editor = CodeMirror.editor;
 
+            var setIndentation = APP.setIndentation = function (units) {
+                if (typeof(units) !== 'number') { return; }
+                editor.setOption('indentUnit', units);
+                editor.setOption('tabSize', units);
+                //editor.setOption('indentWithTabs', true);
+            };
+
+            var indentKey = 'cryptpad.indentUnit';
+            var proxy = Cryptpad.getProxy();
+            proxy.on('change', [indentKey], function (o, n) {
+                APP.setIndentation(n);
+            });
+            setIndentation(proxy[indentKey]);
+
             var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
 
             var isHistoryMode = false;

www/settings/main.js

@@ -39,6 +39,7 @@ define([
         'account': [
             'infoBlock',
             'displayName',
+            'indentUnit',
             'languageSelector',
             'logoutEverywhere',
             'resetTips',
@@ -125,6 +126,42 @@ define([
 
         return $div;
     };
+    var createIndentUnitSelector = function (obj) {
+        var proxy = obj.proxy;
+
+        console.log('create indent unit selector');
+        var $div = $('<div>', {
+            'class': 'indentUnit element'
+        });
+
+        var $inputBlock = $('<div>', {
+            'class': 'inputBlock',
+        }).appendTo($div);
+
+        var $input = $('<input>', {
+            'min': 1,
+            'max': 8,
+            type: 'number',
+        }).on('change', function () {
+            var val = parseInt($input.val());
+            console.log(val, typeof(val));
+            if (typeof(val) !== 'number') { return; }
+            proxy['cryptpad.indentUnit'] = val;
+        }).appendTo($inputBlock);
+
+        proxy.on('change', [ 'cryptpad.indentUnit', ], function (o, n) { $input.val(n); });
+
+        Cryptpad.getAttribute('indentUnit', function (e, val) {
+            if (e) { return void console.error(e); }
+            if (typeof(val) !== 'number') {
+                $input.val(2);
+            } else {
+                $input.val(val);
+            }
+        });
+        return $div;
+    };
+
     var createResetTips = function () {
         var $div = $('<div>', {'class': 'resetTips element'});
         $('<label>', {'for' : 'resetTips'}).text(Messages.settings_resetTips).appendTo($div);
@@ -383,6 +420,7 @@ define([
         $rightside.append(createInfoBlock(obj));
         $rightside.append(createDisplayNameInput(obj));
         $rightside.append(createLanguageSelector());
+        $rightside.append(createIndentUnitSelector(obj));
 
         if (Cryptpad.isLoggedIn()) {
             $rightside.append(createLogoutEverywhere(obj));

www/settings/main.less

@@ -22,6 +22,17 @@
                     }
                 }
             }
+            .inputBlock {
+                input {
+                    border-top-right-radius: 0.25em;
+                    border-bottom-right-radius: 0.25em;
+                    padding: 5px;
+                    padding-left: 15px;
+                    &[type="number"] {
+                        border-right: 1px solid #adadad;
+                    }
+                }
+            }
             .infoBlock {
                 [type="text"] {
                     width: @button-width;