Added editor shortcut mapping setting customization

altair-graphql · Oct 17, 2021 · bf69de7 · bf69de7
1 parent 52de5c9
commit bf69de7
Show file tree

Hide file tree

Showing 9 changed files with 223 additions and 833 deletions.
diff --git a/packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.ts b/packages/altair-app/src/app/modules/altair/components/query-editor/query-editor.component.ts
@@ -70,6 +70,8 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
   @Input() showVariableDialog = false;
   @Input() variableToType: IDictionary;
 
+  @Input() shortcutMapping: IDictionary = {};
+
   @Input() preRequest: any = {};
   @Output() preRequestScriptChange = new EventEmitter();
   @Output() preRequestEnabledChange = new EventEmitter();
@@ -96,6 +98,15 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
 
   selectedIndex = 0;
 
+  actionToFn: Record<string, string | Function> = {
+    showAutocomplete: (cm: any) => cm.showHint({ completeSingle: true }),
+    toggleComment: (cm: CodeMirror.Editor) => cm.execCommand('toggleComment'),
+    showFinder: 'findPersistent',
+    showInDocs: (cm: CodeMirror.Editor) => this.zone.run(() => this.onShowInDocsByToken(cm)),
+    fillAllFields: (cm: CodeMirror.Editor) => this.zone.run(() => this.onFillFields(cm)),
+    noOp: (cm: CodeMirror.Editor) => {},
+  };
+
   editorConfig = <any>{
     mode: 'graphql',
     lineWrapping: true,
@@ -104,21 +115,21 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
     tabSize: this.tabSize,
     indentUnit: this.tabSize,
     extraKeys: {
-      'Cmd-Space': (cm: any) => cm.showHint({ completeSingle: true }),
-      'Ctrl-Space': (cm: any) => cm.showHint({ completeSingle: true }),
-      'Alt-Space': (cm: any) => cm.showHint({ completeSingle: true }),
-      'Cmd-/': (cm: CodeMirror.Editor) => cm.execCommand('toggleComment'),
-      'Ctrl-/': (cm: CodeMirror.Editor) => cm.execCommand('toggleComment'),
+      'Cmd-Space': this.getShortcutFn('showAutocomplete'),
+      'Ctrl-Space': this.getShortcutFn('showAutocomplete'),
+      'Alt-Space': this.getShortcutFn('showAutocomplete'),
+      'Cmd-/': this.getShortcutFn('toggleComment'),
+      'Ctrl-/': this.getShortcutFn('toggleComment'),
 
-      'Alt-F': 'findPersistent',
-      'Ctrl-F': 'findPersistent',
+      'Alt-F': this.getShortcutFn('showFinder'),
+      'Ctrl-F': this.getShortcutFn('showFinder'),
 
       // show current token parent type in docs
-      'Ctrl-D': (cm: CodeMirror.Editor) => this.zone.run(() => this.onShowInDocsByToken(cm)),
+      'Ctrl-D': this.getShortcutFn('showInDocs'),
 
-      'Shift-Ctrl-Enter': (cm: CodeMirror.Editor) => this.zone.run(() => this.onFillFields(cm)),
-      'Ctrl-Enter': (cm: CodeMirror.Editor) => {},
-      'Cmd-Enter': (cm: CodeMirror.Editor) => {},
+      'Shift-Ctrl-Enter': this.getShortcutFn('fillAllFields'),
+      'Ctrl-Enter': this.getShortcutFn('noOp'),
+      'Cmd-Enter': this.getShortcutFn('noOp'),
     },
     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
     keyMap: 'sublime',
@@ -211,6 +222,11 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
       // Set current tab to Query if query is updated
       this.selectedIndex = 0;
     }
+
+    if (changes?.shortcutMapping?.currentValue) {
+      // Update the editor shortcuts based on the provided shortcuts
+      this.updateEditorShortcuts(changes.shortcutMapping.currentValue);
+    }
   }
 
   /**
@@ -315,12 +331,12 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
         try {
           const ast = this.gqlService.parseQuery(cm.getValue());
           ast.definitions.forEach(definition => {
-            if (definition.kind === 'OperationDefinition' && ((definition.name && definition.name.value) || ast.definitions.length === 1)) {
+            if (definition.kind === 'OperationDefinition' && (definition.name?.value || ast.definitions.length === 1)) {
               debug.log('WIDGET', definition);
               definitionsInfo.push({
                 operation: definition.operation,
                 location: definition.loc,
-                operationName: definition.name ? definition.name.value : '',
+                operationName: definition.name?.value ?? '',
               });
             }
           });
@@ -346,7 +362,7 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
             });
           });
         } catch (error) {
-
+          console.error(error);
         } finally {
           clearTimeout(this.updateWidgetTimeout);
         }
@@ -368,6 +384,16 @@ export class QueryEditorComponent implements OnInit, AfterViewInit, OnChanges {
     }
   }
 
+  getShortcutFn(actionName: string) {
+    return this.actionToFn[actionName];
+  }
+
+  updateEditorShortcuts(extraKeys: Record<string, string>) {
+    const normalized = Object.keys(extraKeys).reduce((acc, cur) => ({ ...acc, [cur]: this.getShortcutFn(extraKeys[cur])}), {});
+
+    this.editorConfig.extraKeys = { ...this.editorConfig.extraKeys, ...normalized };
+  }
+
   onResize(resizeFactor: number) {
     this.resizeFactor = resizeFactor;
   }

diff --git a/packages/altair-app/src/app/modules/altair/containers/window/window.component.html b/packages/altair-app/src/app/modules/altair/containers/window/window.component.html
@@ -56,6 +56,7 @@
         [variableToType]="variableToType"
         [preRequest]="preRequest$ | async"
         [postRequest]="postRequest$ | async"
+        [shortcutMapping]="editorShortcutMapping$ | async"
       ></app-query-editor>
       <app-query-result
         [queryResult]="queryResult$ | async"

diff --git a/packages/altair-app/src/app/modules/altair/containers/window/window.component.ts b/packages/altair-app/src/app/modules/altair/containers/window/window.component.ts
@@ -92,6 +92,8 @@ export class WindowComponent implements OnInit {
   resultPaneUiActions$: Observable<AltairUiAction[]>;
   resultPaneBottomPanels$: Observable<AltairPanel[]>;
 
+  editorShortcutMapping$: Observable<IDictionary>;
+
   @Input() windowId: string;
 
   isElectron = isElectron;
@@ -171,6 +173,8 @@ export class WindowComponent implements OnInit {
     this.resultPaneUiActions$ = this.store.select(fromRoot.getResultPaneUiActions);
     this.resultPaneBottomPanels$ = this.store.select(fromRoot.getResultPaneBottomPanels);
 
+    this.editorShortcutMapping$ = this.store.select((state) => state.settings['editor.shortcuts'] ?? {})
+
     this.store.pipe(
       untilDestroyed(this),
       map(data => data.windows[this.windowId]),

diff --git a/packages/altair-app/src/app/modules/altair/store/settings/settings.reducer.ts b/packages/altair-app/src/app/modules/altair/store/settings/settings.reducer.ts
@@ -11,6 +11,7 @@ export const getInitialState = (): SettingsState => {
     language: <SettingsLanguage>altairConfig.default_language,
     addQueryDepthLimit: altairConfig.add_query_depth_limit,
     tabSize: altairConfig.tab_size,
+    "editor.shortcuts": {},
     ...initialSettings,
   };
 };

diff --git a/packages/altair-app/src/app/modules/altair/utils/settings.schema.json b/packages/altair-app/src/app/modules/altair/utils/settings.schema.json
@@ -1,6 +1,9 @@
 {
     "$schema": "http://json-schema.org/draft-07/schema#",
     "definitions": {
+        "Record<string,string>": {
+            "type": "object"
+        },
         "SettingsLanguage": {
             "enum": [
                 "cs-CZ",
@@ -36,6 +39,10 @@
             "description": "Disable push notifications",
             "type": "boolean"
         },
+        "editor.shortcuts": {
+            "$ref": "#/definitions/Record<string,string>",
+            "description": "Contains shortcut to action napping"
+        },
         "enableExperimental": {
             "description": "Enable experimental features.\nNote: Might be unstable",
             "type": "boolean"