Kaynağa Gözat

HUE-5824 [editor] Add keyboard shortcut for formatting and make the editor help searchable

Johan Ahlen 8 yıl önce
ebeveyn
işleme
6de0cdc

+ 1 - 1
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -3703,7 +3703,7 @@
 
       editor.commands.addCommand({
         name: "format",
-        bindKey: {win: "Ctrl-i", mac: "Command-i|Ctrl-i"},
+        bindKey: {win: "Ctrl-i|Ctrl-Shift-f|Ctrl-Alt-l", mac: "Command-i|Ctrl-i|Ctrl-Shift-f|Command-Shift-f|Ctrl-Shift-l|Cmd-Shift-l"},
         exec: function () {
           if (['ace/mode/hive', 'ace/mode/impala', 'ace/mode/sql', 'ace/mode/mysql', 'ace/mode/pgsql', 'ace/mode/sqlite', 'ace/mode/oracle'].indexOf(snippet.getAceMode()) > -1) {
             $.post("/notebook/api/format", {

+ 174 - 0
desktop/core/src/desktop/templates/common_notebook_ko_components.mako

@@ -452,3 +452,177 @@ except ImportError, e:
     })();
   </script>
 </%def>
+
+<%def name="aceKeyboardShortcuts()">
+  <script type="text/html" id="ace-keyboard-shortcuts-template">
+    <input class="clearable" type="text" placeholder="${ _('Search...')}" data-bind="clearable: query, value: query, valueUpdate: 'afterkeydown'">
+
+    <ul class="nav nav-tabs" data-bind="foreach: categories">
+      <li data-bind="css: { 'active': $parent.activeCategory().label === $data.label }, visible: filteredShortcuts().length > 0"><a href="javascript: void(0);" data-bind="click: function () { $parent.activeCategory($data); }, text: label"></a></li>
+    </ul>
+    <div class="tab-content" data-bind="with: activeCategory">
+      <div class="tab-pane active">
+        <table class="table">
+          <thead>
+            <tr>
+              <th>${ _('Windows/Linux')}</th>
+              <th>${ _('Mac')}</th>
+              <th>${ _('Action')}</th>
+            </tr>
+          </thead>
+          <tbody data-bind="foreach: filteredShortcuts">
+            <tr>
+              <td data-bind="text: shortcut"></td>
+              <td data-bind="text: macShortcut"></td>
+              <td data-bind="text: description"></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+  </script>
+
+  <script type="text/javascript" charset="utf-8">
+    (function () {
+
+      function AceKeyboardShortcutsViewModel () {
+        var self = this;
+
+        self.categories = [{
+          label: '${ _('Line Operations')}',
+          shortcuts: [{ shortcut: 'Ctrl-D', macShortcut: 'Command-D', description: '${ _('Remove line')}' },
+            { shortcut: 'Alt-Shift-Down', macShortcut: 'Command-Option-Down', description: '${ _('Copy lines down')}' },
+            { shortcut: 'Alt-Shift-Up', macShortcut: 'Command-Option-Up', description: '${ _('Copy lines up')}' },
+            { shortcut: 'Alt-Down', macShortcut: 'Option-Down', description: '${ _('Move lines down')}' },
+            { shortcut: 'Alt-Up', macShortcut: 'Option-Up', description: '${ _('Move lines up')}' },
+            { shortcut: 'Alt-Delete', macShortcut: 'Ctrl-K', description: '${ _('Remove to line end')}' },
+            { shortcut: 'Alt-Backspace', macShortcut: 'Command-Backspace', description: '${ _('Remove to line start')}' },
+            { shortcut: 'Ctrl-Backspace', macShortcut: 'Option-Backspace, Ctrl-Option-Backspace', description: '${ _('Remove word left')}' },
+            { shortcut: 'Ctrl-Delete', macShortcut: 'Option-Delete', description: '${ _('Remove word right')}' },
+            { shortcut: '---', macShortcut: 'Ctrl-O', description: '${ _('Split line')}' }]
+        },{
+          label: '${ _('Selection')}',
+          shortcuts: [{ shortcut: 'Ctrl-A', macShortcut: 'Command-A', description: '${ _('Select all')}' },
+            { shortcut: 'Shift-Left', macShortcut: 'Shift-Left', description: '${ _('Select left')}' },
+            { shortcut: 'Shift-Right', macShortcut: 'Shift-Right', description: '${ _('Select right')}' },
+            { shortcut: 'Ctrl-Shift-Left', macShortcut: 'Option-Shift-Left', description: '${ _('Select word left')}' },
+            { shortcut: 'Ctrl-Shift-Right', macShortcut: 'Option-Shift-Right', description: '${ _('Select word right')}' },
+            { shortcut: 'Shift-Home', macShortcut: 'Shift-Home', description: '${ _('Select line start')}' },
+            { shortcut: 'Shift-End', macShortcut: 'Shift-End', description: '${ _('Select line end')}' },
+            { shortcut: 'Alt-Shift-Right', macShortcut: 'Command-Shift-Right', description: '${ _('Select to line end')}' },
+            { shortcut: 'Alt-Shift-Left', macShortcut: 'Command-Shift-Left', description: '${ _('Select to line start')}' },
+            { shortcut: 'Shift-Up', macShortcut: 'Shift-Up', description: '${ _('Select up')}' },
+            { shortcut: 'Shift-Down', macShortcut: 'Shift-Down', description: '${ _('Select down')}' },
+            { shortcut: 'Shift-PageUp', macShortcut: 'Shift-PageUp', description: '${ _('Select page up')}' },
+            { shortcut: 'Shift-PageDown', macShortcut: 'Shift-PageDown', description: '${ _('Select page down')}' },
+            { shortcut: 'Ctrl-Shift-Home', macShortcut: 'Command-Shift-Up', description: '${ _('Select to start')}' },
+            { shortcut: 'Ctrl-Shift-End', macShortcut: 'Command-Shift-Down', description: '${ _('Select to end')}' },
+            { shortcut: 'Ctrl-Shift-D', macShortcut: 'Command-Shift-D', description: '${ _('Duplicate selection')}' },
+            { shortcut: 'Ctrl-Shift-P', macShortcut: '---', description: '${ _('Select to matching bracket')}' }]
+        },{
+          label: '${ _('Multi-cursor')}',
+          shortcuts: [{ shortcut: 'Ctrl-Alt-Up', macShortcut: 'Ctrl-Option-Up', description: '${ _('Add multi-cursor above')}' },
+            { shortcut: 'Ctrl-Alt-Down', macShortcut: 'Ctrl-Option-Down', description: '${ _('Add multi-cursor below')}' },
+            { shortcut: 'Ctrl-Alt-Right', macShortcut: 'Ctrl-Option-Right', description: '${ _('Add next occurrence to multi-selection')}' },
+            { shortcut: 'Ctrl-Alt-Left', macShortcut: 'Ctrl-Option-Left', description: '${ _('Add previous occurrence to multi-selection')}' },
+            { shortcut: 'Ctrl-Alt-Shift-Up', macShortcut: 'Ctrl-Option-Shift-Up', description: '${ _('Move multicursor from current line to the line above')}' },
+            { shortcut: 'Ctrl-Alt-Shift-Down', macShortcut: 'Ctrl-Option-Shift-Down', description: '${ _('Move multicursor from current line to the line below')}' },
+            { shortcut: 'Ctrl-Alt-Shift-Right', macShortcut: 'Ctrl-Option-Shift-Right', description: '${ _('Remove current occurrence from multi-selection and move to next')}' },
+            { shortcut: 'Ctrl-Alt-Shift-Left', macShortcut: 'Ctrl-Option-Shift-Left', description: '${ _('Remove current occurrence from multi-selection and move to previous')}' },
+            { shortcut: 'Ctrl-Shift-L', macShortcut: 'Ctrl-Shift-L', description: '${ _('Select all from multi-selection')}' }]
+        },{
+          label: '${ _('Go to')}',
+          shortcuts: [{ shortcut: 'Left', macShortcut: 'Left, Ctrl-B', description: '${ _('Go to left')}' },
+            { shortcut: 'Right', macShortcut: 'Right, Ctrl-F', description: '${ _('Go to right')}' },
+            { shortcut: 'Ctrl-Left', macShortcut: 'Option-Left', description: '${ _('Go to word left')}' },
+            { shortcut: 'Ctrl-Right', macShortcut: 'Option-Right', description: '${ _('Go to word right')}' },
+            { shortcut: 'Up', macShortcut: 'Up, Ctrl-P', description: '${ _('Go line up')}' },
+            { shortcut: 'Down', macShortcut: 'Down, Ctrl-N', description: '${ _('Go line down')}' },
+            { shortcut: 'Alt-Left, Home', macShortcut: 'Command-Left, Home, Ctrl-A', description: '${ _('Go to line start')}' },
+            { shortcut: 'Alt-Right, End', macShortcut: 'Command-Right, End, Ctrl-E', description: '${ _('Go to line end')}' },
+            { shortcut: 'PageUp', macShortcut: 'Option-PageUp', description: '${ _('Go to page up')}' },
+            { shortcut: 'PageDown', macShortcut: 'Option-PageDown, Ctrl-V', description: '${ _('Go to page down')}' },
+            { shortcut: 'Ctrl-Home', macShortcut: 'Command-Home, Command-Up', description: '${ _('Go to start')}' },
+            { shortcut: 'Ctrl-End', macShortcut: 'Command-End, Command-Down', description: '${ _('Go to end')}' },
+            { shortcut: 'Ctrl-L, Ctrl-J', macShortcut: 'Command-L, Command-J', description: '${ _('Go to line')}' },
+            { shortcut: 'Ctrl-Down', macShortcut: 'Command-Down', description: '${ _('Scroll line down')}' },
+            { shortcut: 'Ctrl-Up', macShortcut: '---', description: '${ _('Scroll line up')}' },
+            { shortcut: 'Ctrl-P', macShortcut: '---', description: '${ _('Go to matching bracket')}' },
+            { shortcut: '---', macShortcut: 'Option-PageDown', description: '${ _('Scroll page down')}' },
+            { shortcut: '---', macShortcut: 'Option-PageUp', description: '${ _('Scroll page up')}' }]
+        },{
+          label: '${ _('Find/Replace')}',
+          shortcuts: [{ shortcut: 'Ctrl-F', macShortcut: 'Command-F', description: '${ _('Find')}' },
+            { shortcut: 'Ctrl-H', macShortcut: 'Command-Option-F', description: '${ _('Replace')}' },
+            { shortcut: 'Ctrl-K', macShortcut: 'Command-G', description: '${ _('Find next')}' },
+            { shortcut: 'Ctrl-Shift-K', macShortcut: 'Command-Shift-G', description: '${ _('Find previous')}' }]
+        },{
+          label: '${ _('Folding')}',
+          shortcuts: [{ shortcut: 'Alt-L, Ctrl-F1', macShortcut: 'Command-Option-L, Command-F1', description: '${ _('Fold selection')}' },
+            { shortcut: 'Alt-Shift-L, Ctrl-Shift-F1', macShortcut: 'Command-Option-Shift-L, Command-Shift-F1', description: '${ _('Unfold')}' },
+            { shortcut: 'Alt-0', macShortcut: 'Command-Option-0', description: '${ _('Fold all')}' },
+            { shortcut: 'Alt-Shift-0', macShortcut: 'Command-Option-Shift-0', description: '${ _('Unfold all')}' }]
+        },{
+          label: '${ _('Other')}',
+          shortcuts: [{ shortcut: 'Ctrl-Space', macShortcut: 'Ctrl-Space', description: '${ _('Autocomplete when Live Autocompletion is off')}' },
+            { shortcut: 'Ctrl-i|Ctrl-Shift-f', macShortcut: 'Command-i|Command-Shift-f', description: '${ _('Format selection or all')}' },
+            { shortcut: 'Tab', macShortcut: 'Tab', description: '${ _('Indent')}' },
+            { shortcut: 'Shift-Tab', macShortcut: 'Shift-Tab', description: '${ _('Outdent')}' },
+            { shortcut: 'Ctrl-Z', macShortcut: 'Command-Z', description: '${ _('Undo')}' },
+            { shortcut: 'Ctrl-Shift-Z, Ctrl-Y', macShortcut: 'Command-Shift-Z, Command-Y', description: '${ _('Redo')}' },
+            { shortcut: 'Ctrl-/', macShortcut: 'Command-/', description: '${ _('Toggle comment')}' },
+            { shortcut: 'Ctrl-T', macShortcut: 'Ctrl-T', description: '${ _('Transpose letters')}' },
+            { shortcut: 'Ctrl-Shift-U', macShortcut: 'Ctrl-Shift-U', description: '${ _('Change to lower case')}' },
+            { shortcut: 'Ctrl-U', macShortcut: 'Ctrl-U', description: '${ _('Change to upper case')}' },
+            { shortcut: 'Insert', macShortcut: 'Insert', description: '${ _('Overwrite')}' },
+            { shortcut: 'Ctrl-Shift-E', macShortcut: 'Command-Shift-E', description: '${ _('Macros replay')}' },
+            { shortcut: 'Ctrl-Alt-E', macShortcut: '---', description: '${ _('Macros recording')}' },
+            { shortcut: 'Delete', macShortcut: '---', description: '${ _('Delete')}' },
+            { shortcut: '---', macShortcut: 'Ctrl-L', description: '${ _('Center selection')}' }]
+        },{
+          id: 'settings',
+          label: '${ _('Settings')}',
+          shortcuts: [{ shortcut: 'Ctrl - ,', macShortcut: 'Command - ,', description: '${ _('Show the settings menu')}' }]
+        }];
+
+        self.query = ko.observable('');
+
+        self.activeCategory = ko.observable(self.categories[0]);
+
+        self.categories.forEach(function (category) {
+          category.filteredShortcuts = ko.pureComputed(function () {
+            var query = (self.query() || '').toLowerCase();
+            if (query !== '') {
+              var result = $.grep(category.shortcuts, function (shortcut) {
+                return shortcut.description.toLowerCase().indexOf(query) !== -1;
+              });
+              return result;
+            } else {
+              return category.shortcuts;
+            }
+          });
+
+          category.filteredShortcuts.subscribe(function (newVal) {
+            if (category === self.activeCategory() && newVal.length === 0) {
+              self.categories.every(function (category) {
+                if (category.filteredShortcuts().length > 0) {
+                  self.activeCategory(category);
+                  return false;
+                }
+                return true;
+              })
+            }
+          })
+
+        });
+
+      }
+
+      ko.components.register('aceKeyboardShortcuts', {
+        viewModel: AceKeyboardShortcutsViewModel,
+        template: { element: 'ace-keyboard-shortcuts-template' }
+      });
+    })();
+  </script>
+</%def>

+ 1 - 0
desktop/libs/notebook/src/notebook/templates/editor.mako

@@ -42,6 +42,7 @@ ${ editorComponents.commonHTML() }
 ${ assist.assistPanel() }
 ${ assist.assistJSModels() }
 ${ configKoComponents.config() }
+${ notebookKoComponents.aceKeyboardShortcuts() }
 ${ notebookKoComponents.downloadSnippetResults() }
 ${ hueAceAutocompleter.hueAceAutocompleter() }
 

+ 1 - 504
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -406,516 +406,13 @@ from notebook.conf import ENABLE_QUERY_BUILDER, ENABLE_QUERY_SCHEDULING, ENABLE_
   </div>
 </div>
 
-
 <div id="helpModal" class="modal transparent-modal hide" data-backdrop="true" style="width:980px;margin-left:-510px!important">
   <div class="modal-header">
     <a data-dismiss="modal" class="pointer pull-right"><i class="fa fa-times"></i></a>
     <h3>${_('Editor keyboard shortcuts')}</h3>
   </div>
   <div class="modal-body">
-
-      <ul class="nav nav-tabs">
-        <li class="active"><a href="#helpLineOperations" data-toggle="tab">${ _('Line Operations')}</a></li>
-        <li><a href="#helpSelection" data-toggle="tab">${ _('Selection')}</a></li>
-        <li><a href="#helpMulticursor" data-toggle="tab">${ _('Multicursor')}</a></li>
-        <li><a href="#helpGoTo" data-toggle="tab">${ _('Go to')}</a></li>
-        <li><a href="#helpFindReplace" data-toggle="tab">${ _('Find/Replace')}</a></li>
-        <li><a href="#helpFolding" data-toggle="tab">${ _('Folding')}</a></li>
-        <li><a href="#helpOther" data-toggle="tab">${ _('Other')}</a></li>
-        <li><a href="#helpSettings" data-toggle="tab">${ _('Settings')}</a></li>
-      </ul>
-
-      <div class="tab-content">
-        <div class="tab-pane active" id="helpLineOperations">
-          <table class="table">
-        <thead>
-        <tr>
-          <th>Windows/Linux</th>
-          <th>Mac</th>
-          <th>${ _('Action')}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-          <td>Ctrl-D</td>
-          <td>Command-D</td>
-          <td>${ _('Remove line')}</td>
-        </tr>
-        <tr>
-          <td>Alt-Shift-Down</td>
-          <td>Command-Option-Down</td>
-          <td>${ _('Copy lines down')}</td>
-        </tr>
-        <tr>
-          <td>Alt-Shift-Up</td>
-          <td>Command-Option-Up</td>
-          <td>${ _('Copy lines up')}</td>
-        </tr>
-        <tr>
-          <td>Alt-Down</td>
-          <td>Option-Down</td>
-          <td>${ _('Move lines down')}</td>
-        </tr>
-        <tr>
-          <td>Alt-Up</td>
-          <td>Option-Up</td>
-          <td>${ _('Move lines up')}</td>
-        </tr>
-        <tr>
-          <td>Alt-Delete</td>
-          <td>Ctrl-K</td>
-          <td>${ _('Remove to line end')}</td>
-        </tr>
-        <tr>
-          <td>Alt-Backspace</td>
-          <td>Command-Backspace</td>
-          <td>${ _('Remove to line start')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Backspace</td>
-          <td>Option-Backspace, Ctrl-Option-Backspace</td>
-          <td>${ _('Remove word left')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Delete</td>
-          <td>Option-Delete</td>
-          <td>${ _('Remove word right')}</td>
-        </tr>
-        <tr>
-          <td>---</td>
-          <td>Ctrl-O</td>
-          <td>${ _('Split line')}</td>
-        </tr>
-        </tbody>
-      </table>
-        </div>
-        <div class="tab-pane" id="helpSelection">
-          <table class="table">
-        <thead>
-        <tr>
-          <th>Windows/Linux</th>
-          <th>Mac</th>
-          <th>${ _('Action')}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-          <td>Ctrl-A</td>
-          <td>Command-A</td>
-          <td>${ _('Select all')}</td>
-        </tr>
-        <tr>
-          <td>Shift-Left</td>
-          <td>Shift-Left</td>
-          <td>${ _('Select left')}</td>
-        </tr>
-        <tr>
-          <td>Shift-Right</td>
-          <td>Shift-Right</td>
-          <td>${ _('Select right')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-Left</td>
-          <td>Option-Shift-Left</td>
-          <td>${ _('Select word left')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-Right</td>
-          <td>Option-Shift-Right</td>
-          <td>${ _('Select word right')}</td>
-        </tr>
-        <tr>
-          <td>Shift-Home</td>
-          <td>Shift-Home</td>
-          <td>${ _('Select line start')}</td>
-        </tr>
-        <tr>
-          <td>Shift-End</td>
-          <td>Shift-End</td>
-          <td>${ _('Select line end')}</td>
-        </tr>
-        <tr>
-          <td>Alt-Shift-Right</td>
-          <td>Command-Shift-Right</td>
-          <td>${ _('Select to line end')}</td>
-        </tr>
-        <tr>
-          <td>Alt-Shift-Left</td>
-          <td>Command-Shift-Left</td>
-          <td>${ _('Select to line start')}</td>
-        </tr>
-        <tr>
-          <td>Shift-Up</td>
-          <td>Shift-Up</td>
-          <td>${ _('Select up')}</td>
-        </tr>
-        <tr>
-          <td>Shift-Down</td>
-          <td>Shift-Down</td>
-          <td>${ _('Select down')}</td>
-        </tr>
-        <tr>
-          <td>Shift-PageUp</td>
-          <td>Shift-PageUp</td>
-          <td>${ _('Select page up')}</td>
-        </tr>
-        <tr>
-          <td>Shift-PageDown</td>
-          <td>Shift-PageDown</td>
-          <td>${ _('Select page down')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-Home</td>
-          <td>Command-Shift-Up</td>
-          <td>${ _('Select to start')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-End</td>
-          <td>Command-Shift-Down</td>
-          <td>${ _('Select to end')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-D</td>
-          <td>Command-Shift-D</td>
-          <td>${ _('Duplicate selection')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-P</td>
-          <td>---</td>
-          <td>${ _('Select to matching bracket')}</td>
-        </tr>
-        </tbody>
-      </table>
-        </div>
-        <div class="tab-pane" id="helpMulticursor">
-          <table class="table">
-        <thead>
-        <tr>
-          <th>Windows/Linux</th>
-          <th>Mac</th>
-          <th>${ _('Action')}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-          <td>Ctrl-Alt-Up</td>
-          <td>Ctrl-Option-Up</td>
-          <td>${ _('Add multi-cursor above')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Alt-Down</td>
-          <td>Ctrl-Option-Down</td>
-          <td>${ _('Add multi-cursor below')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Alt-Right</td>
-          <td>Ctrl-Option-Right</td>
-          <td>${ _('Add next occurrence to multi-selection')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Alt-Left</td>
-          <td>Ctrl-Option-Left</td>
-          <td>${ _('Add previous occurrence to multi-selection')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Alt-Shift-Up</td>
-          <td>Ctrl-Option-Shift-Up</td>
-          <td>${ _('Move multicursor from current line to the line above')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Alt-Shift-Down</td>
-          <td>Ctrl-Option-Shift-Down</td>
-          <td>${ _('Move multicursor from current line to the line below')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Alt-Shift-Right</td>
-          <td>Ctrl-Option-Shift-Right</td>
-          <td>${ _('Remove current occurrence from multi-selection and move to next')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Alt-Shift-Left</td>
-          <td>Ctrl-Option-Shift-Left</td>
-          <td>${ _('Remove current occurrence from multi-selection and move to previous')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-L</td>
-          <td>Ctrl-Shift-L</td>
-          <td>${ _('Select all from multi-selection')}</td>
-        </tr>
-        </tbody>
-      </table>
-        </div>
-        <div class="tab-pane" id="helpGoTo">
-          <table class="table">
-      <thead>
-      <tr>
-        <th>Windows/Linux</th>
-        <th>Mac</th>
-        <th>${ _('Action')}</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td>Left</td>
-        <td>Left, Ctrl-B</td>
-        <td>${ _('Go to left')}</td>
-      </tr>
-      <tr>
-        <td>Right</td>
-        <td>Right, Ctrl-F</td>
-        <td>${ _('Go to right')}</td>
-      </tr>
-      <tr>
-        <td>Ctrl-Left</td>
-        <td>Option-Left</td>
-        <td>${ _('Go to word left')}</td>
-      </tr>
-      <tr>
-        <td>Ctrl-Right</td>
-        <td>Option-Right</td>
-        <td>${ _('Go to word right')}</td>
-      </tr>
-      <tr>
-        <td>Up</td>
-        <td>Up, Ctrl-P</td>
-        <td>${ _('Go line up')}</td>
-      </tr>
-      <tr>
-        <td>Down</td>
-        <td>Down, Ctrl-N</td>
-        <td>${ _('Go line down')}</td>
-      </tr>
-      <tr>
-        <td>Alt-Left, Home</td>
-        <td>Command-Left, Home, Ctrl-A</td>
-        <td>${ _('Go to line start')}</td>
-      </tr>
-      <tr>
-        <td>Alt-Right, End</td>
-        <td>Command-Right, End, Ctrl-E</td>
-        <td>${ _('Go to line end')}</td>
-      </tr>
-      <tr>
-        <td>PageUp</td>
-        <td>Option-PageUp</td>
-        <td>${ _('Go to page up')}</td>
-      </tr>
-      <tr>
-        <td>PageDown</td>
-        <td>Option-PageDown, Ctrl-V</td>
-        <td>${ _('Go to page down')}</td>
-      </tr>
-      <tr>
-        <td>Ctrl-Home</td>
-        <td>Command-Home, Command-Up</td>
-        <td>${ _('Go to start')}</td>
-      </tr>
-      <tr>
-        <td>Ctrl-End</td>
-        <td>Command-End, Command-Down</td>
-        <td>${ _('Go to end')}</td>
-      </tr>
-      <tr>
-        <td>Ctrl-L, Ctrl-J</td>
-        <td>Command-L, Command-J</td>
-        <td>${ _('Go to line')}</td>
-      </tr>
-      <tr>
-        <td>Ctrl-Down</td>
-        <td>Command-Down</td>
-        <td>${ _('Scroll line down')}</td>
-      </tr>
-      <tr>
-        <td>Ctrl-Up</td>
-        <td>---</td>
-        <td>${ _('Scroll line up')}</td>
-      </tr>
-      <tr>
-        <td>Ctrl-P</td>
-        <td>---</td>
-        <td>${ _('Go to matching bracket')}</td>
-      </tr>
-      <tr>
-        <td>---</td>
-        <td>Option-PageDown</td>
-        <td>${ _('Scroll page down')}</td>
-      </tr>
-      <tr>
-        <td>---</td>
-        <td>Option-PageUp</td>
-        <td>${ _('Scroll page up')}</td>
-      </tr>
-      </tbody>
-    </table>
-        </div>
-        <div class="tab-pane" id="helpFindReplace">
-          <table class="table">
-        <thead>
-        <tr>
-          <th>Windows/Linux</th>
-          <th>Mac</th>
-          <th>${ _('Action')}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-          <td>Ctrl-F</td>
-          <td>Command-F</td>
-          <td>${ _('Find')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-H</td>
-          <td>Command-Option-F</td>
-          <td>${ _('Replace')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-K</td>
-          <td>Command-G</td>
-          <td>${ _('Find next')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-K</td>
-          <td>Command-Shift-G</td>
-          <td>${ _('Find previous')}</td>
-        </tr>
-        </tbody>
-      </table>
-        </div>
-        <div class="tab-pane" id="helpFolding">
-          <table class="table">
-        <thead>
-        <tr>
-          <th>Windows/Linux</th>
-          <th>Mac</th>
-          <th>${ _('Action')}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-          <td>Alt-L, Ctrl-F1</td>
-          <td>Command-Option-L, Command-F1</td>
-          <td>${ _('Fold selection')}</td>
-        </tr>
-        <tr>
-          <td>Alt-Shift-L, Ctrl-Shift-F1</td>
-          <td>Command-Option-Shift-L, Command-Shift-F1</td>
-          <td>${ _('Unfold')}</td>
-        </tr>
-        <tr>
-          <td>Alt-0</td>
-          <td>Command-Option-0</td>
-          <td>${ _('Fold all')}</td>
-        </tr>
-        <tr>
-          <td>Alt-Shift-0</td>
-          <td>Command-Option-Shift-0</td>
-          <td>${ _('Unfold all')}</td>
-        </tr>
-        </tbody>
-      </table>
-     </div>
-     <div class="tab-pane" id="helpOther">
-      <table class="table">
-        <thead>
-        <tr>
-          <th>Windows/Linux</th>
-          <th>Mac</th>
-          <th>${ _('Action')}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-          <td>Ctrl-Space</td>
-          <td>Ctrl-Space</td>
-          <td>${ _('Autocomplete when Live Autocompletion is off')}</td>
-        </tr>
-        <tr>
-          <td>Tab</td>
-          <td>Tab</td>
-          <td>${ _('Indent')}</td>
-        </tr>
-        <tr>
-          <td>Shift-Tab</td>
-          <td>Shift-Tab</td>
-          <td>${ _('Outdent')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Z</td>
-          <td>Command-Z</td>
-          <td>${ _('Undo')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-Z, Ctrl-Y</td>
-          <td>Command-Shift-Z, Command-Y</td>
-          <td>${ _('Redo')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-/</td>
-          <td>Command-/</td>
-          <td>${ _('Toggle comment')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-T</td>
-          <td>Ctrl-T</td>
-          <td>${ _('Transpose letters')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-U</td>
-          <td>Ctrl-Shift-U</td>
-          <td>${ _('Change to lower case')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-U</td>
-          <td>Ctrl-U</td>
-          <td>${ _('Change to upper case')}</td>
-        </tr>
-        <tr>
-          <td>Insert</td>
-          <td>Insert</td>
-          <td>${ _('Overwrite')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Shift-E</td>
-          <td>Command-Shift-E</td>
-          <td>${ _('Macros replay')}</td>
-        </tr>
-        <tr>
-          <td>Ctrl-Alt-E</td>
-          <td>---</td>
-          <td>${ _('Macros recording')}</td>
-        </tr>
-        <tr>
-          <td>Delete</td>
-          <td>---</td>
-          <td>${ _('Delete')}</td>
-        </tr>
-        <tr>
-          <td>---</td>
-          <td>Ctrl-L</td>
-          <td>${ _('Center selection')}</td>
-        </tr>
-        </tbody>
-      </table>
-     </div>
-     <div class="tab-pane" id="helpSettings">
-      <table class="table">
-        <thead>
-        <tr>
-          <th>Windows/Linux</th>
-          <th>Mac</th>
-          <th>${ _('Action')}</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr>
-          <td>Ctrl - ,</td>
-          <td>Command - ,</td>
-          <td>${ _('Show the settings menu')}</td>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-      </div>
+    <!-- ko component: 'aceKeyboardShortcuts' --><!-- /ko -->
   </div>
   <div class="modal-footer">
     <a href="#" class="btn" data-dismiss="modal">${_('Close')}</a>

+ 1 - 0
desktop/libs/notebook/src/notebook/templates/editor_embeddable.mako

@@ -38,6 +38,7 @@ ${ editorComponents.topBar() }
 ${ editorComponents.commonHTML(with_assist='false') }
 
 ${ configKoComponents.config() }
+${ notebookKoComponents.aceKeyboardShortcuts() }
 ${ notebookKoComponents.downloadSnippetResults() }
 ${ hueAceAutocompleter.hueAceAutocompleter() }
 

+ 1 - 0
desktop/libs/notebook/src/notebook/templates/notebook.mako

@@ -52,6 +52,7 @@ ${ editorComponents.topBar() }
 ${ assist.assistPanel() }
 ${ assist.assistJSModels() }
 ${ configKoComponents.config() }
+${ notebookKoComponents.aceKeyboardShortcuts() }
 ${ notebookKoComponents.addSnippetMenu() }
 ${ notebookKoComponents.downloadSnippetResults() }
 ${ hueAceAutocompleter.hueAceAutocompleter() }

+ 1 - 0
desktop/libs/notebook/src/notebook/templates/notebook_embeddable.mako

@@ -48,6 +48,7 @@ ${ editorComponents.topBar() }
 </%editorComponents:commonHTML>
 
 ${ configKoComponents.config() }
+${ notebookKoComponents.aceKeyboardShortcuts() }
 ${ notebookKoComponents.addSnippetMenu() }
 ${ notebookKoComponents.downloadSnippetResults() }
 ${ hueAceAutocompleter.hueAceAutocompleter() }