Enable spellcheck in pad

www/common/translations/messages.js

@@ -653,6 +653,9 @@ define(function () {
     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.settings_padSpellcheckTitle = "Enable spellcheck";
+    out.settings_padSpellcheckHint = "This option allows you to enable spellcheck in rich text pad. Spelling errors will be underline in red and you'll have to use Ctrl (or Meta) + right-click to see the correct options.";
+    out.settings_padSpellcheckLabel = "Enable spellcheck in rich text pads";
 
     out.settings_creationSkip = "Skip the pad creation screen";
     out.settings_creationSkipHint = "The pad creation screen offers new options to create a pad, providing you more control and security over your data. However, it may slow down your workflow by adding one additional step so, here, you have the option to skip this screen and use the default settings selected above.";

www/pad/inner.js

@@ -316,6 +316,11 @@ define([
                     }
                 }
 
+                // Do not change the spellcheck value in view mode
+                if (readOnly && info.node && info.node.tagName === 'BODY' &&
+                    info.diff.action === 'modifyAttribute' && info.diff.name === 'spellcheck') {
+                    return true;
+                }
                 // Do not change the contenteditable value in view mode
                 if (readOnly && info.node && info.node.tagName === 'BODY' &&
                     info.diff.action === 'modifyAttribute' && info.diff.name === 'contenteditable') {
@@ -709,6 +714,12 @@ define([
             };
             window.APP.FM = framework._.sfCommon.createFileManager(fmConfig);
 
+            framework._.sfCommon.getAttribute(['pad', 'spellcheck'], function (err, data) {
+                if (framework.isReadOnly()) { return; }
+                if (data) {
+                    $iframe.find('body').attr('spellcheck', true);
+                }
+            });
             framework._.sfCommon.getAttribute(['pad', 'width'], function (err, data) {
                 if (data) {
                     $iframe.find('html').addClass('cke_body_width');

www/settings/inner.js

@@ -76,6 +76,7 @@ define([
         ],
         'pad': [
             'cp-settings-pad-width',
+            'cp-settings-pad-spellcheck',
         ],
         'code': [
             'cp-settings-code-indent-unit',
@@ -1283,6 +1284,43 @@ define([
         return $div;
     };
 
+    create['pad-spellcheck'] = function () {
+        var $div = $('<div>', {
+            'class': 'cp-settings-pad-spellcheck cp-sidebarlayout-element'
+        });
+        $('<label>').text(Messages.settings_padSpellcheckTitle).appendTo($div);
+        $('<span>', {'class': 'cp-sidebarlayout-description'})
+            .text(Messages.settings_padSpellcheckHint).appendTo($div);
+
+        var $ok = $('<span>', {'class': 'fa fa-check', title: Messages.saved});
+        var $spinner = $('<span>', {'class': 'fa fa-spinner fa-pulse'});
+
+        var $cbox = $(UI.createCheckbox('cp-settings-pad-spellcheck',
+                                   Messages.settings_padSpellcheckLabel,
+                                   false, { label: {class: 'noTitle'} }));
+        var $checkbox = $cbox.find('input').on('change', function () {
+            $spinner.show();
+            $ok.hide();
+            var val = $checkbox.is(':checked');
+            common.setAttribute(['pad', 'spellcheck'], val, function () {
+                $spinner.hide();
+                $ok.show();
+            });
+        });
+        $cbox.appendTo($div);
+
+        $ok.hide().appendTo($cbox);
+        $spinner.hide().appendTo($cbox);
+
+        common.getAttribute(['pad', 'spellcheck'], function (e, val) {
+            if (e) { return void console.error(e); }
+            if (val) {
+                $checkbox.attr('checked', 'checked');
+            }
+        });
+        return $div;
+    };
+
     // Code settings
 
     create['code-indent-unit'] = function () {