From f329d65bc808a6ce9e74806b0499a0af42dc5ae5 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Fri, 22 Dec 2017 18:01:15 +0100
Subject: [PATCH] Ability to reduce the width of ckeditor

---
 customize.dist/translations/messages.fr.js |  5 +++
 customize.dist/translations/messages.js    |  5 +++
 www/pad/inner.js                           | 13 ++++++
 www/settings/app-settings.less             |  8 ++--
 www/settings/inner.js                      | 47 ++++++++++++++++++++++
 5 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js
index e490cd040..58babab3f 100644
--- a/customize.dist/translations/messages.fr.js
+++ b/customize.dist/translations/messages.fr.js
@@ -472,6 +472,7 @@ define(function () {
     out.settings_cat_account = "Compte";
     out.settings_cat_drive = "CryptDrive";
     out.settings_cat_code = "Code";
+    out.settings_cat_pad = "Documents texte";
     out.settings_title = "Préférences";
     out.settings_save = "Sauver";
 
@@ -528,6 +529,10 @@ define(function () {
     out.settings_codeIndentation = "Indentation dans l'éditeur de code (nombre d'espaces)";
     out.settings_codeUseTabs = "Utiliser des tabulations au lieu d'espaces";
 
+    out.settings_padWidth = "Largeur de l'éditeur de texte";
+    out.settings_padWidthHint = "L'éditeur de documents texte occupe toute la largeur de l'écran disponible par défaut, ce qui peut rendre le texte difficile à lire. Vous pouvez ici réduire la largeur de l'éditeur.";
+    out.settings_padWidthLabel = "Réduire la largeur de l'éditeur";
+
     out.upload_title = "Hébergement de fichiers";
     out.upload_rename = "Souhaitez-vous renommer <b>{0}</b> avant son stockage en ligne ?<br>" +
                         "<em>L'extension du fichier ({1}) sera ajoutée automatiquement. "+
diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js
index cd1e88511..ecc4060ec 100644
--- a/customize.dist/translations/messages.js
+++ b/customize.dist/translations/messages.js
@@ -478,6 +478,7 @@ define(function () {
     out.settings_cat_account = "Account";
     out.settings_cat_drive = "CryptDrive";
     out.settings_cat_code = "Code";
+    out.settings_cat_pad = "Rich text";
     out.settings_title = "Settings";
     out.settings_save = "Save";
 
@@ -534,6 +535,10 @@ define(function () {
     out.settings_codeIndentation = 'Code editor indentation (spaces)';
     out.settings_codeUseTabs = "Indent using tabs (instead of spaces)";
 
+    out.settings_padWidth = "Editor's maximum width";
+    out.settings_padWidthHint = "Rich text pads use by default the maximum available width on your screen and it can be difficult to read. You can reduce the editor's width here.";
+    out.settings_padWidthLabel = "Reduce the editor's width";
+
     out.upload_title = "File upload";
     out.upload_rename = "Do you want to rename <b>{0}</b> before uploading it to the server?<br>" +
                         "<em>The file extension ({1}) will be added automatically. "+
diff --git a/www/pad/inner.js b/www/pad/inner.js
index af4cbc93c..b54dd7dd3 100644
--- a/www/pad/inner.js
+++ b/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',
diff --git a/www/settings/app-settings.less b/www/settings/app-settings.less
index 8b3d3b7fb..072c37e91 100644
--- a/www/settings/app-settings.less
+++ b/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 {
diff --git a/www/settings/inner.js b/www/settings/inner.js
index e3798ad15..f2c4fb483 100644
--- a/www/settings/inner.js
+++ b/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);