Ability to reduce the width of ckeditor

www/pad/inner.js

@@ -444,6 +444,13 @@ define([
                 }
             };
             window.APP.FM = framework._.sfCommon.createFileManager(fmConfig);
+
+            framework._.sfCommon.getAttribute(['pad', 'width'], function (err, data) {
+                if (data) {
+                    var $iframe = $('html').find('iframe').contents();
+                    $iframe.find('html').addClass('cke_body_width');
+                }
+            });
         });
 
         framework.onDefaultContentNeeded(function () {
@@ -585,6 +592,12 @@ define([
                 }
                 // Used in ckeditor-config.js
                 Ckeditor.CRYPTPAD_URLARGS = ApiConfig.requireConf.urlArgs;
+                var newCss = '.cke_body_width { background: #666; height: 100%; }' +
+                    '.cke_body_width body {' +
+                        'max-width: 50em; padding: 10px 30px; margin: 0 auto; min-height: 100%;'+
+                        'box-sizing: border-box;'+
+                    '}';
+                Ckeditor.addCss(newCss);
                 Ckeditor.plugins.addExternal('mediatag','/pad/', 'mediatag-plugin.js');
                 module.ckeditor = editor = Ckeditor.replace('editor1', {
                     customConfig: '/customize/ckeditor-config.js',

www/settings/app-settings.less

@@ -21,11 +21,9 @@
     flex-flow: column;
     #cp-sidebarlayout-container {
         #cp-sidebarlayout-rightside {
-            .cp-settings-userfeedback, .cp-settings-thumbnails {
-                input[type="checkbox"] {
-                    vertical-align: middle;
-                    margin-right: 5px;
-                }
+            input[type="checkbox"] {
+                vertical-align: middle;
+                margin-right: 5px;
             }
             .cp-settings-language-selector {
                 button.btn {

www/settings/inner.js

@@ -46,6 +46,9 @@ define([
             'cp-settings-import-local-pads',
             'cp-settings-reset-drive'
         ],
+        'pad': [
+            'cp-settings-pad-width',
+        ],
         'code': [
             'cp-settings-indent-unit',
             'cp-settings-indent-type'
@@ -120,6 +123,7 @@ define([
 
         return $div;
     };
+
     var createIndentUnitSelector = function () {
         var $div = $('<div>', {
             'class': 'cp-settings-indent-unit cp-sidebarlayout-element'
@@ -183,6 +187,47 @@ define([
         return $div;
     };
 
+    var createPadWidthSelector = function () {
+        var $div = $('<div>', {
+            'class': 'cp-settings-pad-width cp-sidebarlayout-element'
+        });
+        $('<span>', {'class': 'label'}).text(Messages.settings_padWidth).appendTo($div);
+
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages.settings_padWidthHint).appendTo($div);
+
+        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
+        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
+
+        var $label = $('<label>', { 'for': 'cp-settings-padwidth', 'class': 'noTitle' })
+                    .text(Messages.settings_padWidthLabel);
+        var $input = $('<input>', {
+            type: 'checkbox',
+            id: 'cp-settings-padwidth'
+        }).on('change', function () {
+            $spinner.show();
+            $ok.hide();
+            var val = $input.is(':checked');
+            common.setAttribute(['pad', 'width'], val, function () {
+                $spinner.hide();
+                $ok.show();
+            });
+        }).appendTo($div);
+        $label.appendTo($div);
+
+        $ok.hide().appendTo($div);
+        $spinner.hide().appendTo($div);
+
+
+        common.getAttribute(['pad', 'width'], function (e, val) {
+            if (e) { return void console.error(e); }
+            if (val) {
+                $input.attr('checked', 'checked');
+            }
+        });
+        return $div;
+    };
+
     var createResetTips = function () {
         var $div = $('<div>', {'class': 'cp-settings-resettips cp-sidebarlayout-element'});
         $('<label>').text(Messages.settings_resetTips).appendTo($div);
@@ -468,6 +513,7 @@ define([
             if (key === 'account') { $category.append($('<span>', {'class': 'fa fa-user-o'})); }
             if (key === 'drive') { $category.append($('<span>', {'class': 'fa fa-hdd-o'})); }
             if (key === 'code') { $category.append($('<span>', {'class': 'fa fa-file-code-o' })); }
+            if (key === 'pad') { $category.append($('<span>', {'class': 'fa fa-file-word-o' })); }
 
             if (key === active) {
                 $category.addClass('cp-leftside-active');
@@ -530,6 +576,7 @@ define([
         $rightside.append(createImportLocalPads());
         $rightside.append(createResetDrive());
         $rightside.append(createUserFeedbackToggle());
+        $rightside.append(createPadWidthSelector());
 
         // TODO RPC
         //obj.proxy.on('change', [], refresh);