Added customization opts to code editor. Fixes #1025 (#1026)

* WIP #1025 Added context menu to text editor

* WIP #1025 added updating of font size

* WIP #1025 Added theme customization

* WIP #1025 Added keybinding customization

* WIP #1025 Saving editor settings with the guest user

* WIP #1025 Added Tomorrow night theme

* WIP #1025 removed old comments

* WIP #1025 set the keybindings on initial load

* WIP #1025 fixed indentations

src/visualizers/widgets/TextEditor/TextEditorWidget.js

@@ -5,16 +5,24 @@ define([
     'ace/ace',
     'underscore',
     './completer',
+    'js/Utils/ComponentSettings',
+    'jquery-contextMenu',
     'css!./styles/TextEditorWidget.css'
 ], function (
     ace,
     _,
-    Completer
+    Completer,
+    ComponentSettings
 ) {
     'use strict';
 
     var TextEditorWidget,
-        WIDGET_CLASS = 'text-editor';
+        WIDGET_CLASS = 'text-editor',
+        DEFAULT_SETTINGS = {
+            keybindings: 'default',
+            theme: 'solarized_dark',
+            fontSize: 12
+        };
 
     TextEditorWidget = function (logger, container) {
         this._logger = logger.fork('Widget');
@@ -27,9 +35,13 @@ define([
 
         this.readOnly = this.readOnly || false;
         this.editor = ace.edit(this.$editor[0]);
+        this._initialize();
 
         // Get the config from component settings for themes
         this.editor.getSession().setOptions(this.getSessionOptions());
+        var handler = this.editorSettings.keybindings;
+        this.editor.setKeyboardHandler(handler === 'default' ?
+            null : 'ace/keyboard/' + handler);
         this.addExtensions();
         this.editor.$blockScrolling = Infinity;
         this.DELAY = 750;
@@ -47,7 +59,6 @@ define([
         this.setReadOnly(this.readOnly);
         this.currentHeader = '';
         this.activeNode = null;
-        this._initialize();
 
         this._logger.debug('ctor finished');
     };
@@ -68,7 +79,8 @@ define([
         return {
             enableBasicAutocompletion: true,
             enableLiveAutocompletion: true,
-            fontSize: '12pt'
+            theme: 'ace/theme/' + this.editorSettings.theme,
+            fontSize: this.editorSettings.fontSize + 'pt'
         };
     };
 
@@ -83,6 +95,124 @@ define([
     TextEditorWidget.prototype._initialize = function () {
         // set widget class
         this._el.addClass(WIDGET_CLASS);
+
+        // Add context menu
+        $.contextMenu('destroy', '.' + WIDGET_CLASS);
+        $.contextMenu({
+            selector: '.' + WIDGET_CLASS,
+            build: $trigger => {
+                return {
+                    items: this.getMenuItemsFor($trigger)
+                };
+            }
+        });
+
+        // Create the editor settings
+        this.editorSettings = _.extend({}, DEFAULT_SETTINGS),
+        ComponentSettings.resolveWithWebGMEGlobal(
+            this.editorSettings,
+            this.getComponentId()
+        );
+    };
+
+    TextEditorWidget.prototype.getComponentId = function () {
+        return 'TextEditor';
+    };
+
+    TextEditorWidget.prototype.getMenuItemsFor = function () {
+        var fontSizes = [8, 10, 11, 12, 14],
+            themes = [
+                'Solarized Light',
+                'Solarized Dark',
+                'Twilight',
+                'Tomorrow Night',
+                'Eclipse',
+                'Monokai'
+            ],
+            keybindings = [
+                'default',
+                'vim',
+                'emacs'
+            ],
+            menuItems = {
+                setKeybindings: {
+                    name: 'Keybindings...',
+                    items: {}
+                },
+                setFontSize: {
+                    name: 'Font Size...',
+                    items: {}
+                },
+                setTheme: {
+                    name: 'Theme...',
+                    items: {}
+                }
+            };
+
+        fontSizes.forEach(fontSize => {
+            var name = fontSize + ' pt',
+                isSet = fontSize === this.editorSettings.fontSize;
+
+            if (isSet) {
+                name = '<span style="font-weight: bold">' + name + '</span>';
+            }
+
+            menuItems.setFontSize.items['font' + fontSize] = {
+                name: name,
+                isHtmlName: isSet,
+                callback: () => {
+                    this.editorSettings.fontSize = fontSize;
+                    this.editor.setOptions(this.getEditorOptions());
+                    this.onUpdateEditorSettings();
+                }
+            };
+        });
+
+        themes.forEach(name => {
+            var theme = name.toLowerCase().replace(/ /g, '_'),
+                isSet = theme === this.editorSettings.theme;
+
+            if (isSet) {
+                name = '<span style="font-weight: bold">' + name + '</span>';
+            }
+
+            menuItems.setTheme.items[theme] = {
+                name: name,
+                isHtmlName: isSet,
+                callback: () => {
+                    this.editorSettings.theme = theme;
+                    this.editor.setOptions(this.getEditorOptions());
+                    this.onUpdateEditorSettings();
+                }
+            };
+        });
+
+        keybindings.forEach(name => {
+            var handler = name.toLowerCase().replace(/ /g, '_'),
+                isSet = handler === this.editorSettings.keybindings;
+
+            if (isSet) {
+                name = '<span style="font-weight: bold">' + name + '</span>';
+            }
+
+            menuItems.setKeybindings.items[handler] = {
+                name: name,
+                isHtmlName: isSet,
+                callback: () => {
+                    this.editorSettings.keybindings = handler;
+                    this.editor.setKeyboardHandler(handler === 'default' ?
+                        null : 'ace/keyboard/' + handler);
+                    this.onUpdateEditorSettings();
+                }
+            };
+        });
+
+        return menuItems;
+    };
+
+    TextEditorWidget.prototype.onUpdateEditorSettings = function () {
+        ComponentSettings.overwriteComponentSettings(this.getComponentId(), this.editorSettings,
+            err => err && this._logger.error(`Could not save editor settings: ${err}`));
     };
 
     TextEditorWidget.prototype.onWidgetContainerResize = function () {
@@ -147,6 +277,7 @@ define([
     /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
     TextEditorWidget.prototype.destroy = function () {
         this.editor.destroy();
+        $.contextMenu('destroy', '.' + WIDGET_CLASS);
     };
 
     TextEditorWidget.prototype.onActivate = function () {