Add a Cmd-\ or Ctlr-\ keybindings to toggle VIM mode

semanser · Nov 29, 2019 · 812cd00 · 812cd00
1 parent 1280d6f
commit 812cd00
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/packages/graphiql/src/components/GraphiQL.js b/packages/graphiql/src/components/GraphiQL.js
@@ -71,8 +71,13 @@ export class GraphiQL extends React.Component {
     ResultsTooltip: PropTypes.any,
     readOnly: PropTypes.bool,
     docExplorerOpen: PropTypes.bool,
+    keyMap: PropTypes.oneOf(['sublime', 'vim'])
   };
 
+  static defaultProps = {
+    keyMap: 'sublime'
+  }
+
   constructor(props) {
     super(props);
 
@@ -145,6 +150,7 @@ export class GraphiQL extends React.Component {
         DEFAULT_DOC_EXPLORER_WIDTH,
       isWaitingForResponse: false,
       subscription: null,
+      keyMap: props.keyMap,
       ...queryFacts,
     };
 
@@ -377,17 +383,19 @@ export class GraphiQL extends React.Component {
                 ref={n => {
                   this.queryEditorComponent = n;
                 }}
-                schema={this.state.schema}
-                value={this.state.query}
-                onEdit={this.handleEditQuery}
-                onHintInformationRender={this.handleHintInformationRender}
+                editorTheme={this.props.editorTheme}
+                keyMap={this.state.keyMap}
                 onClickReference={this.handleClickReference}
                 onCopyQuery={this.handleCopyQuery}
-                onPrettifyQuery={this.handlePrettifyQuery}
+                onEdit={this.handleEditQuery}
+                onHintInformationRender={this.handleHintInformationRender}
                 onMergeQuery={this.handleMergeQuery}
+                onPrettifyQuery={this.handlePrettifyQuery}
                 onRunQuery={this.handleEditorRunQuery}
-                editorTheme={this.props.editorTheme}
+                onToggleKeyMap={this.handleToggleKeyMap}
                 readOnly={this.props.readOnly}
+                schema={this.state.schema}
+                value={this.state.query}
               />
               <section
                 className="variable-editor"
@@ -914,6 +922,12 @@ export class GraphiQL extends React.Component {
     this.handleEditOperationName(operationName);
   };
 
+  handleToggleKeyMap = () => {
+    this.setState({
+      keyMap: this.state.keyMap === 'sublime' ? 'vim' : 'sublime'
+    });
+  };
+
   handleResizeStart = downEvent => {
     if (!this._didClickDragBar(downEvent)) {
       return;

diff --git a/packages/graphiql/src/components/QueryEditor.js b/packages/graphiql/src/components/QueryEditor.js
@@ -32,21 +32,22 @@ const AUTO_COMPLETE_AFTER_KEY = /^[a-zA-Z0-9_@(]$/;
 export class QueryEditor extends React.Component {
   static propTypes = {
     editorTheme: PropTypes.string,
-    keyMap: PropTypes.oneOf('sublime', 'vim'),
+    keyMap: PropTypes.oneOf(['sublime', 'vim']),
     onClickReference: PropTypes.func,
     onCopyQuery: PropTypes.func,
     onEdit: PropTypes.func,
     onHintInformationRender: PropTypes.func,
     onMergeQuery: PropTypes.func,
     onPrettifyQuery: PropTypes.func,
     onRunQuery: PropTypes.func,
+    onToggleKeyMap: PropTypes.func,
     readOnly: PropTypes.bool,
     schema: PropTypes.instanceOf(GraphQLSchema),
     value: PropTypes.string,
   };
 
   static defaultProps = {
-    keyMap: 'vim'
+    keyMap: 'sublime'
   }
 
   constructor(props) {
@@ -163,6 +164,18 @@ export class QueryEditor extends React.Component {
           }
         },
 
+        'Cmd-\\': () => {
+          if (this.props.onToggleKeyMap) {
+            this.props.onToggleKeyMap();
+          }
+        },
+
+        'Ctrl-\\': () => {
+          if (this.props.onToggleKeyMap) {
+            this.props.onToggleKeyMap();
+          }
+        },
+
         ...commonKeys,
       },
     });
@@ -194,6 +207,9 @@ export class QueryEditor extends React.Component {
       this.cachedValue = this.props.value;
       this.editor.setValue(this.props.value);
     }
+    if (this.props.keyMap !== prevProps.keyMap) {
+      this.editor.setOption('keyMap', this.props.keyMap)
+    }
     this.ignoreChangeEvent = false;
   }