allow selecting codemirror keymap in menu

IPython/html/static/edit/js/menubar.js

@@ -1,74 +1,101
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'base/js/namespace',
     'jquery',
     'base/js/utils',
     'bootstrap',
 ], function(IPython, $, utils, bootstrap) {
     "use strict";
     
     var MenuBar = function (selector, options) {
         /**
          * Constructor
          *
          * A MenuBar Class to generate the menubar of IPython notebook
          *
          * Parameters:
          *  selector: string
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          codemirror: CodeMirror instance
          *          contents: ContentManager instance
          *          events: $(Events) instance
          *          base_url : string
          *          file_path : string
          */
         options = options || {};
         this.base_url = options.base_url || utils.get_body_data("baseUrl");
         this.selector = selector;
         this.editor = options.editor;
         this.events = options.events;
 
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.bind_events();
         }
     };
 
     MenuBar.prototype.bind_events = function () {
         /**
          *  File
          */
         var that = this;
         var editor = that.editor;
         this.element.find('#save-file').click(function () {
             editor.save();
         });
         
         // Edit
         this.element.find('#menu-find').click(function () {
             editor.codemirror.execCommand("find");
         });
         this.element.find('#menu-replace').click(function () {
             editor.codemirror.execCommand("replace");
         });
+        this.element.find('#menu-keymap-default').click(function () {
+            editor.update_codemirror_options({
+                vimMode: false,
+                keyMap: null
+            });
+        });
+        this.element.find('#menu-keymap-sublime').click(function () {
+            editor.update_codemirror_options({
+                vimMode: false,
+                keyMap: 'sublime'
+            });
+        });
+        this.element.find('#menu-keymap-emacs').click(function () {
+            editor.update_codemirror_options({
+                vimMode: false,
+                keyMap: 'emacs'
+            });
+        });
+        this.element.find('#menu-keymap-vim').click(function () {
+            editor.update_codemirror_options({
+                vimMode: true,
+                keyMap: 'vim'
+            });
+        });
         
         // View
         this.element.find('#menu-line-numbers').click(function () {
             var current = editor.codemirror.getOption('lineNumbers');
             var value = Boolean(1-current);
             editor.update_codemirror_options({lineNumbers: value});
         });
         
         this.events.on("config_changed.Editor", function () {
             var lineNumbers = editor.codemirror.getOption('lineNumbers');
             var text = lineNumbers ? "Hide" : "Show";
             text = text + " Line Numbers";
             that.element.find('#menu-line-numbers').find("a").text(text);
+            var keyMap = editor.codemirror.getOption('keyMap') || "default";
+            that.element.find(".selected-keymap").removeClass("selected-keymap");
+            that.element.find("#menu-keymap-" + keyMap).addClass("selected-keymap");
         });
     };
 
     return {'MenuBar': MenuBar};
 });

IPython/html/templates/edit.html

@@ -1,72 +1,78
 {% extends "page.html" %}
 
 {% block title %}{{page_title}}{% endblock %}
 
 {% block stylesheet %}
 <link rel="stylesheet" href="{{ static_url('components/codemirror/lib/codemirror.css') }}">
 <link rel="stylesheet" href="{{ static_url('components/codemirror/addon/dialog/dialog.css') }}">
 {{super()}}
 {% endblock %}
 
 {% block params %}
 
 data-base-url="{{base_url}}"
 data-file-path="{{file_path}}"
 
 {% endblock %}
 
 {% block header %}
 
 <span id="filename">{{ basename }}</span>
 
 {% endblock %}
 
 {% block site %}
 
 <div id="menubar-container" class="container">
   <div id="menubar">
     <div id="menus" class="navbar navbar-default" role="navigation">
       <div class="container-fluid">
         <button type="button" class="btn btn-default navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
           <i class="fa fa-bars"></i>
           <span class="navbar-text">Menu</span>
         </button>
         <ul class="nav navbar-nav navbar-right">
           <li id="notification_area"></li>
         </ul>
         <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">File</a>
               <ul id="file-menu" class="dropdown-menu">
                 <li id="new-file"><a href="#">New</a></li>
                 <li id="save-file"><a href="#">Save</a></li>
               </ul>
             </li>
             <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Edit</a>
               <ul id="edit-menu" class="dropdown-menu">
                 <li id="menu-find"><a href="#">Find</a></li>
                 <li id="menu-replace"><a href="#">Find &amp; Replace</a></li>
+                <li class="divider"></li>
+                <li>Key Map</li>
+                <li id="menu-keymap-default"><a href="#">Default<i class="fa"></i></a></li>
+                <li id="menu-keymap-sublime"><a href="#">Sublime Text<i class="fa"></i></a></li>
+                <li id="menu-keymap-vim"><a href="#">Vim<i class="fa"></i></a></li>
+                <li id="menu-keymap-emacs"><a href="#">emacs<i class="fa"></i></a></li>
               </ul>
             </li>
             <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">View</a>
               <ul id="view-menu" class="dropdown-menu">
                 <li id="menu-line-numbers"><a href="#">Hide Line Numbers</a></li>
               </ul>
             </li>
           </ul>
         </div>
       </div>
     </div>
   </div>
 </div>
 
 <div id="texteditor-container" class="container"></div>
 
 {% endblock %}
 
 {% block script %}
 
     {{super()}}
 
 <script src="{{ static_url("edit/js/main.js") }}" type="text/javascript" charset="utf-8"></script>
 {% endblock %}