Add a spellcheck option for codemirror

www/common/sframe-common-codemirror.js

@@ -142,6 +142,7 @@ define([
             showTrailingSpace : true,
             styleActiveLine : true,
             search: true,
+            inputStyle: 'contenteditable',
             highlightSelectionMatches: {showToken: /\w+/},
             extraKeys: {"Shift-Ctrl-R": undefined},
             foldGutter: true,
@@ -355,11 +356,12 @@ define([
         };
 
         exp.mkIndentSettings = function (metadataMgr) {
-            var setIndentation = function (units, useTabs, fontSize) {
+            var setIndentation = function (units, useTabs, fontSize, spellcheck) {
                 if (typeof(units) !== 'number') { return; }
                 editor.setOption('indentUnit', units);
                 editor.setOption('tabSize', units);
                 editor.setOption('indentWithTabs', useTabs);
+                editor.setOption('spellcheck', spellcheck);
                 if (!useTabs) {
                     editor.setOption("extraKeys", {
                         Tab: function() {
@@ -377,6 +379,7 @@ define([
             var indentKey = 'indentUnit';
             var useTabsKey = 'indentWithTabs';
             var fontKey = 'fontSize';
+            var spellcheckKey = 'spellcheck';
             var updateIndentSettings = function () {
                 if (!metadataMgr) { return; }
                 var data = metadataMgr.getPrivateData().settings;
@@ -384,10 +387,12 @@ define([
                 var indentUnit = data[indentKey];
                 var useTabs = data[useTabsKey];
                 var fontSize = data[fontKey];
+                var spellcheck = data[spellcheckKey];
                 setIndentation(
                     typeof(indentUnit) === 'number'? indentUnit : 2,
                     typeof(useTabs) === 'boolean'? useTabs : false,
-                    typeof(fontSize) === 'number' ? fontSize : 12);
+                    typeof(fontSize) === 'number' ? fontSize : 12,
+                    typeof(spellcheck) === 'boolean' ? spellcheck : false);
             };
             metadataMgr.onChangeLazy(updateIndentSettings);
             updateIndentSettings();

www/settings/inner.js

@@ -85,6 +85,7 @@ define([
             'cp-settings-code-indent-unit',
             'cp-settings-code-indent-type',
             'cp-settings-code-font-size',
+            'cp-settings-code-spellcheck',
         ],
         'subscription': {
             onClick: function () {
@@ -1467,6 +1468,44 @@ define([
         return $div;
     };
 
+    create['code-spellcheck'] = function () {
+        var $div = $('<div>', {
+            'class': 'cp-settings-code-spellcheck cp-sidebarlayout-element'
+        });
+        $('<label>').text(Messages.settings_codeSpellcheckTitle).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-code-spellcheck',
+                                   Messages.settings_codeSpellcheckLabel,
+                                   false, { label: {class: 'noTitle'} }));
+        var $checkbox = $cbox.find('input').on('change', function () {
+            $spinner.show();
+            $ok.hide();
+            var val = $checkbox.is(':checked');
+            common.setAttribute(['codemirror', 'spellcheck'], val, function () {
+                $spinner.hide();
+                $ok.show();
+            });
+        });
+        $cbox.appendTo($div);
+
+        $ok.hide().appendTo($cbox);
+        $spinner.hide().appendTo($cbox);
+
+        common.getAttribute(['codemirror', 'spellcheck'], function (e, val) {
+            if (e) { return void console.error(e); }
+            if (val) {
+                $checkbox.attr('checked', 'checked');
+            }
+        });
+        return $div;
+    };
+
+
     // Settings app
 
     var createUsageButton = function () {