Re-generate keyboard shortcuts from code. (#552)

Also updates the generating script to show usage, use built Grist code, and process shortcuts so as to match the preferred Help Center output (e.g. Del -> Delete).

Author: dsagal

build-shortcuts.js

@@ -26,6 +26,9 @@ const KEY_MAP_MAC = {
   Right: '→',
   Up: '↑',
   Down: '↓',
+  Del: 'Delete',
+  // For the shortcuts in use, it's more helpful not to distinguish Backspace from Delete on Mac
+  Backspace: 'Delete',
 };
 
 const KEY_MAP_WIN = {
@@ -34,6 +37,7 @@ const KEY_MAP_WIN = {
   Right: '→',
   Up: '↑',
   Down: '↓',
+  Del: 'Delete',
 };
 
 function getHumanKey(key, isMac) {
@@ -48,6 +52,14 @@ function getHumanKey(key, isMac) {
   return keys.join(isMac ? ' ' : ' + ');
 }
 
+function unique(strings) {
+  return [...new Set(strings)];
+}
+
+function getMarkupForKeys(keys, isMac) {
+  return unique(keys.map((key) => `<code class="keys">${getHumanKey(key, isMac)}</code>`)).join(',');
+}
+
 function dumpKeys(groups) {
 
   let content = '';
@@ -58,8 +70,8 @@ function dumpKeys(groups) {
     let tableContent =  '';
     group.commands.forEach((cmd) => {
       if (!cmd.keys || !cmd.keys.length || !cmd.desc) { return; }
-      const macHumanKeys = cmd.keys.map((key) => `<code class="keys">${getHumanKey(key, true)}</code>`).join(',');
-      const winHumanKeys = cmd.keys.map((key) => `<code class="keys">${getHumanKey(key, false)}</code>`).join(',');
+      const macHumanKeys = getMarkupForKeys(cmd.keys, true);
+      const winHumanKeys = getMarkupForKeys(cmd.keys, false);
       tableContent += `| ${macHumanKeys} | ${winHumanKeys} | ${cmd.desc} |\n`;
     });
 
@@ -80,6 +92,22 @@ function dumpKeys(groups) {
 
 function main() {
   const argv = process.argv.slice(2);
+  if (process.argv.length <= 2) {
+    console.log(`\
+Builds the keyboard shortcuts help page.
+
+  node build-shortcuts.js [-i] grist-root
+
+Reads the grist shortcuts from the grist source tree specified by \`grist-root\` and generates a
+formatted content, which is then inserted into the target file (\`help/en/docs/keyboard-shortcuts.md\`)
+in-between the two markers \`<!-- START -->\` and \`<!-- END -->\`. Logs the resulting page to
+standard output, or save to the target file if \`-i\` (the edit in place option) is passed.
+
+What's actually looked up is '<grist-root>/_build/core/app/client/components/commandList', i.e.
+Grist should be built in that directory.
+`);
+    process.exit(1);
+  }
   let i = 0;
   let editInPlace = false;
   let gristAppRoot;
@@ -97,7 +125,7 @@ function main() {
   }
 
   // loads commands from grist app source tree.
-  const {groups} = require(path.join(gristAppRoot, 'app/client/components/commandList'));
+  const {groups} = require(path.join(gristAppRoot, '_build/core/app/client/components/commandList'));
 
   let content = '';
   content += dumpKeys(groups);

help/en/docs/keyboard-shortcuts.md

@@ -4,6 +4,7 @@ title: Keyboard shortcuts
 
 # Grist Shortcuts
 
+<!-- The content below is generated from Grist code using ./build-shortcuts.js. -->
 <!-- START -->
 ###General
 | Key (Mac) | Key (Windows) | Description | 
@@ -32,9 +33,10 @@ title: Keyboard shortcuts
 | <code class="keys">*End*</code> | <code class="keys">*End*</code> | Move to the last field or the end of a row |
 | <code class="keys">*⌥* *↓*</code> | <code class="keys">*Alt* + *↓*</code> | Open next page |
 | <code class="keys">*⌥* *↑*</code> | <code class="keys">*Alt* + *↑*</code> | Open previous page |
-| <code class="keys">*⌘* *O*</code> | <code class="keys">*Ctrl* + *O*</code> | Activate next page widget |
-| <code class="keys">*⌘* *⇧* *O*</code> | <code class="keys">*Ctrl* + *Shift* + *O*</code> | Activate previous page widget |
-| <code class="keys">*Space*</code> | <code class="keys">*Space*</code> | Opens a record card in a table widget |
+| <code class="keys">*⌘* *O*</code> | <code class="keys">*Ctrl* + *O*</code> | Focus next page panel or widget |
+| <code class="keys">*⌘* *⇧* *O*</code> | <code class="keys">*Ctrl* + *Shift* + *O*</code> | Focus previous page panel or widget |
+| <code class="keys">*⌘* *⌥* *O*</code> | <code class="keys">*Ctrl* + *Alt* + *O*</code> | Toggle creator panel keyboard focus |
+| <code class="keys">*Space*</code> | <code class="keys">*Space*</code> | Show the record card widget of the selected record |
 
 ###Selection
 | Key (Mac) | Key (Windows) | Description | 
@@ -43,25 +45,29 @@ title: Keyboard shortcuts
 | <code class="keys">*⇧* *↑*</code> | <code class="keys">*Shift* + *↑*</code> | Adds the element above the cursor to the selected range |
 | <code class="keys">*⇧* *→*</code> | <code class="keys">*Shift* + *→*</code> | Adds the element to the right of the cursor to the selected range |
 | <code class="keys">*⇧* *←*</code> | <code class="keys">*Shift* + *←*</code> | Adds the element to the left of the cursor to the selected range |
+| <code class="keys">*⌘* *⇧* *↓*</code> | <code class="keys">*Ctrl* + *Shift* + *↓*</code> | Adds all elements below the cursor to the selected range |
+| <code class="keys">*⌘* *⇧* *↑*</code> | <code class="keys">*Ctrl* + *Shift* + *↑*</code> | Adds all elements above the cursor to the selected range |
+| <code class="keys">*⌘* *⇧* *→*</code> | <code class="keys">*Ctrl* + *Shift* + *→*</code> | Adds all elements to the right of the cursor to the selected range |
+| <code class="keys">*⌘* *⇧* *←*</code> | <code class="keys">*Ctrl* + *Shift* + *←*</code> | Adds all elements to the left of the cursor to the selected range |
 | <code class="keys">*⌘* *A*</code> | <code class="keys">*Ctrl* + *A*</code> | Selects all currently displayed cells |
-| <code class="keys">*⌘* *Shift* *↑*</code> | <code class="keys">*Ctrl* + *Shift* + *↑*</code> | Selects cells above the selected cell in the same column |
-| <code class="keys">*⌘* *Shift* *↓*</code> | <code class="keys">*Ctrl* + *Shift* + *↓*</code> | Selects cells below the selected cell in the same column |
-| <code class="keys">*⌘* *Shift* *→*</code> | <code class="keys">*Ctrl* + *Shift* + *→*</code> | Selects cells to the right of the selected cell in the same row |
-| <code class="keys">*⌘* *Shift* *←*</code> | <code class="keys">*Ctrl* + *Shift* + *←*</code> | Selects cells to the left of the selected cell in the same row |
 | <code class="keys">*⌘* *⇧* *A*</code> | <code class="keys">*Ctrl* + *Shift* + *A*</code> | Copy anchor link |
 
 ###Editing
 | Key (Mac) | Key (Windows) | Description | 
 | - | - | - | 
 | <code class="keys">*Enter*</code>,<code class="keys">*F2*</code> | <code class="keys">*Enter*</code>,<code class="keys">*F2*</code> | Start editing the currently-selected cell |
 | <code class="keys">*Enter*</code> | <code class="keys">*Enter*</code> | Finish editing a cell, saving the value |
+| <code class="keys">*Enter*</code> | <code class="keys">*Enter*</code> | Toggle the currently selected checkbox or switch cell |
 | <code class="keys">*Escape*</code> | <code class="keys">*Escape*</code> | Discard changes to a cell value |
+| <code class="keys">*⌘* *C*</code> | <code class="keys">*Ctrl* + *C*</code> | Copy current selection to clipboard |
+| <code class="keys">*⌘* *X*</code> | <code class="keys">*Ctrl* + *X*</code> | Cut current selection to clipboard |
+| <code class="keys">*⌘* *V*</code> | <code class="keys">*Ctrl* + *V*</code> | Paste clipboard contents at cursor |
 | <code class="keys">*⌘* *D*</code> | <code class="keys">*Ctrl* + *D*</code> | Fills current selection with the contents of the top row in the selection |
 | <code class="keys">*Delete*</code> | <code class="keys">*Backspace*</code>,<code class="keys">*Delete*</code> | Clears the currently selected cells |
-| <code class="keys">*Enter*</code> | <code class="keys">*Enter*</code> | Toggles the value of checkbox cells |
 | <code class="keys">*=*</code> | <code class="keys">*=*</code> | When typed at the start of a cell, make this a formula column |
 | <code class="keys">*⌘* *;*</code> | <code class="keys">*Ctrl* + *;*</code> | Insert the current date |
 | <code class="keys">*⌘* *⇧* *;*</code> | <code class="keys">*Ctrl* + *Shift* + *;*</code> | Insert the current date and time |
+| <code class="keys">*⌘* *⌥* *M*</code> | <code class="keys">*Ctrl* + *Alt* + *M*</code> | Open comment thread |
 
 ###Data manipulation
 | Key (Mac) | Key (Windows) | Description | 
@@ -72,8 +78,9 @@ title: Keyboard shortcuts
 | <code class="keys">*⌘* *Delete*</code> | <code class="keys">*Ctrl* + *Backspace*</code>,<code class="keys">*Ctrl* + *Delete*</code> | Delete the currently selected record(s) |
 | <code class="keys">*⌥* *⇧* *=*</code> | <code class="keys">*Alt* + *Shift* + *=*</code> | Insert a new column, before the currently selected one |
 | <code class="keys">*⌥* *=*</code> | <code class="keys">*Alt* + *=*</code> | Insert a new column, after the currently selected one |
+| <code class="keys">*⌘* *⇧* *H*</code> | <code class="keys">*Ctrl* + *Shift* + *H*</code> | Use the currently selected row as table headers |
 | <code class="keys">*⌃* *M*</code> | <code class="keys">*Ctrl* + *M*</code> | Rename the currently selected column |
-| <code class="keys">*⌥* *⇧* *-*</code> | <code class="keys">*Alt* + *Shift* + *-*</code> | Hide the currently selected column |
+| <code class="keys">*⌥* *⇧* *-*</code> | <code class="keys">*Alt* + *Shift* + *-*</code> | Hide the currently selected columns |
 | <code class="keys">*⌥* *-*</code> | <code class="keys">*Alt* + *-*</code> | Delete the currently selected columns |
 
 <!-- END -->