Dynamically bubble defined hotkeys out of editor

src/app/editor/component/editor/editor.component.html

@@ -32,7 +32,7 @@
             fontIcon="mdi-chevron-double-right"
           ></mat-icon>
         </button>
-        <ng-container [ngSwitch]="sidebar?.value">
+        <ng-container [ngSwitch]="sidebarView">
           <div *ngSwitchCase="'modules'">
             <cas-module-list
               *ngIf="filename.endsWith('.tf')"
@@ -119,6 +119,7 @@
           </button>
           <button
             mat-icon-button
+            hotkeyAction="DISCARD_CHANGES"
             color="primary"
             fxFlexAlign="center"
             [disabled]="file && file.editorContent === file.content"
@@ -169,40 +170,16 @@
           </button>
           <mat-divider vertical style="height: 100%"></mat-divider>
           <div *ngIf="filename.endsWith('.tf')">
-            <mat-button-toggle-group
-              #sidebar="matButtonToggleGroup"
-              [value]="sidebarView"
-              hotkeyAction="FILE_VERSIONS"
-              (hotkeyFn)="sidebarChangedFn($event, sidebarOpen)"
-              (valueChange)="sidebarChangedFn($event, sidebarOpen)"
-            >
-              <mat-button-toggle
-                value="modules"
-                aria-label="modules"
-                hotkeyAction="FILE_MODULES"
-                (change)="toggleSidebar($event, true)"
-              >
-                <mat-icon
-                  color="primary"
-                  fontSet="fas"
-                  fontIcon="fa-code"
-                  matTooltip="Open Modules"
-                ></mat-icon>
-              </mat-button-toggle>
-              <mat-button-toggle
-                value="versions"
-                aria-label="versions"
-                hotkeyAction="FILE_VERSIONS"
-                (change)="toggleSidebar($event, true)"
-              >
-                <mat-icon
-                  color="primary"
-                  fontSet="fas"
-                  fontIcon="fa-history"
-                  matTooltip="Open File Versions"
-                ></mat-icon>
-              </mat-button-toggle>
-            </mat-button-toggle-group>
+            <button mat-icon-button hotkeyAction="FILE_MODULES" fxFlexAlign="center" color="primary"
+              (click)="sidebarView = 'modules'; sidebarChangedFn('modules', true)" [disabled]="sidebarView === 'modules'"
+              matTooltip="Show the module list">
+              <mat-icon fontSet="fas" class="fa-lg" fontIcon="fa-code"></mat-icon>
+            </button>
+            <button mat-icon-button hotkeyAction="FILE_VERSIONS" fxFlexAlign="center" color="primary"
+              (click)="sidebarView = 'versions'; sidebarChangedFn('versions', true)" [disabled]="sidebarView === 'versions'"
+              matTooltip="Show the file versions">
+              <mat-icon fontSet="fas" class="fa-lg" fontIcon="fa-history"></mat-icon>
+            </button>
           </div>
         </mat-toolbar-row>
       </mat-toolbar>
@@ -213,6 +190,7 @@
         id="editor"
         class="code-editor"
         [options]="editorOptions"
+        (init)="editorInit($event)"
         [(ngModel)]="code"
         (ngModelChange)="codeChangedEventHandler($event)"
       >

src/app/editor/component/editor/editor.component.ts

@@ -29,6 +29,7 @@ import { ConfirmDialogService } from 'src/app/sei-cwd-common/confirm-dialog/serv
 import { CurrentUserQuery } from 'src/app/users/state';
 import { FileQuery, FileService } from '../../../files/state';
 import { ModuleQuery, ModuleService } from '../../../modules/state';
+import { ComnSettingsService } from '@cmusei/crucible-common';
 
 const SIDEBAR_MIN_WIDTH = 300;
 
@@ -82,7 +83,8 @@ export class EditorComponent implements OnInit, OnChanges, OnDestroy {
     private fileVersionQuery: FileVersionQuery,
     private currentUserQuery: CurrentUserQuery,
     private changeDetectorRef: ChangeDetectorRef,
-    private confirmDialog: ConfirmDialogService
+    private confirmDialog: ConfirmDialogService,
+    private settingsService: ComnSettingsService
   ) {}
 
   ngOnInit(): void {
@@ -152,6 +154,35 @@ export class EditorComponent implements OnInit, OnChanges, OnDestroy {
     this.isSaved$ = this.fileQuery.selectIsSaved(this.fileId);
   }
 
+  editorInit(editor: any) {
+    // get the defined hot keys
+    const hotKeys = this.settingsService.settings.Hotkeys;
+    const bubbleKeys = [];
+    // create search strings for the defined hot keys that need to bubble out of the editor
+    // transforms control.x, alt.x, etc. to ctrl+X, alt+X, etc.
+    for (const [key, hk] of Object.entries(hotKeys)) {
+      const parts = (hk as any).keys.split('.');
+      if (parts.length === 2) {
+        if (parts[0] === 'control') parts[0] = 'ctrl';
+        bubbleKeys.push(parts[0] + '+' + parts[1].toUpperCase());
+      }
+    }
+    // get the editor default key bindings
+    const bindings =
+      editor._standaloneKeybindingService._getResolver()._defaultKeybindings;
+    // set the editor key bindings to bubble the defined hot keys that would be intercepted
+    // by clearing the command and setting bubble to true
+    bindings.forEach((binding) => {
+      if (
+        binding.keypressParts.length === 1 &&
+        bubbleKeys.some((bk) => bk === binding.keypressParts[0])
+      ) {
+        binding.command = '';
+        binding.bubble = true;
+      }
+    });
+  }
+
   updateEditorOptions(file: ModelFile): void {
     let writable = false;
 

src/app/project/component/project-home/project-list/project-list.component.html

@@ -89,6 +89,8 @@
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns"> </mat-row>
     </mat-table>
+    <!-- This non-displayed button is required, because hotKeys do not work with the button inside the mat-table -->
+    <button style="display: none;" hotkeyAction="PROJECT_NEW" (click)="createRequest()"></button>
   </div>
 
   <!-- Loading Spinner -->

src/assets/config/settings.json

@@ -16,7 +16,7 @@
   "AppTopBarText": "Caster",
   "Hotkeys": {
     "PROJECT_NEW": {
-      "keys": "meta.p",
+      "keys": "control.p",
       "group": "",
       "description": "New Project"
     },
@@ -43,6 +43,33 @@
       "group": "Editor",
       "description": "Save a file",
       "allowIn": ["INPUT", "TEXTAREA"]
+    },
+    "DISCARD_CHANGES": {
+      "keys": "control.q",
+      "group": "Editor",
+      "description": "Discard changes",
+      "allowIn": [
+        "INPUT",
+        "TEXTAREA"
+      ]
+    },
+    "FILE_MODULES": {
+      "keys": "alt.m",
+      "group": "Editor",
+      "description": "Show file modules",
+      "allowIn": [
+        "INPUT",
+        "TEXTAREA"
+      ]
+    },
+    "FILE_VERSIONS": {
+      "keys": "alt.v",
+      "group": "Editor",
+      "description": "Show file versions",
+      "allowIn": [
+        "INPUT",
+        "TEXTAREA"
+      ]
     }
   }
 }