Keyboard shortcuts help menu

Document built-in keyboard shortcuts

Author: fredsa

css/ui.css

@@ -902,4 +902,12 @@ div.scripting-cell button.scripting-enabled {
 #settingsForm .disabled {
   opacity: 0.5;
 }
-
+.keyboard-shortcuts td {
+  vertical-align: top;
+}
+.keyboard-shortcuts td:first-child {
+  text-align: right;
+  padding-right: 12px;
+  padding-bottom: 2px;
+  min-width: 160px;
+}

index.html

@@ -117,6 +117,7 @@
         <a tabindex="-1" href="javascript:void(0)">Help</a>
         <ul class="dropdown-menu" id="help_menu">
           <li><a class="dropdown-item" target="_8bws_help" href="https://8bitworkshop.com/docs/docs/ide.html">IDE Help</a></li>
+          <li><a class="dropdown-item" href="javascript:void(0)" id="item_keyboard_shortcuts">Keyboard Shortcuts</a></li>
         </ul>
       </li>
       <li class="dropdown dropdown-submenu">

src/ide/ui.ts

@@ -1508,6 +1508,7 @@ function setupDebugControls() {
   $("#item_addfile_link").click(_addLinkFile);
   $("#item_request_persist").click(() => requestPersistPermission(true, false));
   $("#item_settings").click(openSettings);
+  $("#item_keyboard_shortcuts").click(openKeyboardShortcuts);
   updateDebugWindows();
   // code analyzer?
   if (platform.newCodeAnalyzer) {
@@ -1533,6 +1534,41 @@ function setupDebugControls() {
   }
 }
 
+function openKeyboardShortcuts() {
+  const isMac = /Mac|iPhone|iPad/.test(navigator.platform);
+  const mod = isMac ? '⌘' : 'Ctrl';
+  const alt = isMac ? '⌥' : 'Alt';
+  const shift = isMac ? '⇧' : 'Shift';
+  const shortcut = (keys: string, desc: string) =>
+    `<tr><td><kbd>${keys}</kbd></td><td>${desc}</td></tr>`;
+  bootbox.dialog({
+    title: "Keyboard shortcuts",
+    onEscape: true,
+    message: `
+    <table class="keyboard-shortcuts">
+      <tr><th colspan="2">Custom</th></tr>
+      ${shortcut(`${shift}+${alt}+F`, 'Format document, or selected range(s)')}
+      ${shortcut('Tab', 'Insert to next tab stop, or indent selected range(s)')}
+      ${shortcut(`${shift}+Tab`, 'Outdent line(s) or selected range(s)')}
+      ${shortcut(`Enter`, 'Insert newline, keep cursor at same column pos')}
+      <tr><th colspan="2">Standard</th></tr>
+      <tr>
+        <td>Built-in</td>
+        <td>
+          Included CodeMirror shortcuts:<br>
+          <a target="_blank" href="https://codemirror.net/docs/ref/#commands.defaultKeymap">defaultKeymap</a>,
+          <a target="_blank" href="https://codemirror.net/docs/ref/#commands.standardKeymap">standardKeymap</a>,
+          <a target="_blank" href="https://codemirror.net/docs/ref/#commands.historyKeymap">historyKeymap</a>,
+          <a target="_blank" href="https://codemirror.net/docs/ref/#search.searchKeymap">searchKeymap</a>
+        </td>
+      </tr>
+    </table>`,
+    buttons: {
+      ok: { label: "OK", className: "btn-primary" }
+    }
+  });
+}
+
 function setupReplaySlider() {
   var replayslider = $("#replayslider");
   var clockslider = $("#clockslider");