Merge pull request #158 from OlegIlyenko/codemirror-event-listener

Use CoreMirror's key maps instead of global event handler to run query at a cursor
graphql · Aug 3, 2016 · fbcab14 · fbcab14
2 parents fdd701a + 1115118
commit fbcab14
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/src/components/GraphiQL.js b/src/components/GraphiQL.js
@@ -194,9 +194,6 @@ export class GraphiQL extends React.Component {
 
     // Utility for keeping CodeMirror correctly sized.
     this.codeMirrorSizer = new CodeMirrorSizer();
-
-    // Add shortcut for running a query.
-    document.addEventListener('keydown', this._keyHandler, true);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -255,8 +252,6 @@ export class GraphiQL extends React.Component {
     this._storageSet('editorFlex', this.state.editorFlex);
     this._storageSet('variableEditorHeight', this.state.variableEditorHeight);
     this._storageSet('docExplorerWidth', this.state.docExplorerWidth);
-
-    document.removeEventListener('keydown', this._keyHandler, true);
   }
 
   render() {
@@ -323,6 +318,7 @@ export class GraphiQL extends React.Component {
                 value={this.state.query}
                 onEdit={this.handleEditQuery}
                 onHintInformationRender={this.handleHintInformationRender}
+                onRunQuery={this.handleEditorRunQuery}
               />
               <div className="variable-editor" style={variableStyle}>
                 <div
@@ -337,6 +333,7 @@ export class GraphiQL extends React.Component {
                   variableToType={this.state.variableToType}
                   onEdit={this.handleEditVariables}
                   onHintInformationRender={this.handleHintInformationRender}
+                  onRunQuery={this.handleEditorRunQuery}
                 />
               </div>
             </div>
@@ -575,14 +572,6 @@ export class GraphiQL extends React.Component {
     return;
   }
 
-  _keyHandler = event => {
-    // "Run Query" event.
-    if ((event.metaKey || event.ctrlKey) && event.keyCode === 13) {
-      event.preventDefault();
-      this._runQueryAtCursor();
-    }
-  }
-
   _runQueryAtCursor() {
     if (this.state.subscription) {
       this.handleStopQuery();
@@ -668,6 +657,10 @@ export class GraphiQL extends React.Component {
     });
   }
 
+  handleEditorRunQuery = () => {
+    this._runQueryAtCursor();
+  }
+
   _onClickHintInformation = event => {
     if (event.target.className === 'typeName') {
       const typeName = event.target.innerHTML;

diff --git a/src/components/QueryEditor.js b/src/components/QueryEditor.js
@@ -43,6 +43,7 @@ export class QueryEditor extends React.Component {
     value: PropTypes.string,
     onEdit: PropTypes.func,
     onHintInformationRender: PropTypes.func,
+    onRunQuery: PropTypes.func,
   }
 
   constructor(props) {
@@ -83,6 +84,17 @@ export class QueryEditor extends React.Component {
         'Alt-Space': () => this.editor.showHint({ completeSingle: true }),
         'Shift-Space': () => this.editor.showHint({ completeSingle: true }),
 
+        'Cmd-Enter': () => {
+          if (this.props.onRunQuery) {
+            this.props.onRunQuery();
+          }
+        },
+        'Ctrl-Enter': () => {
+          if (this.props.onRunQuery) {
+            this.props.onRunQuery();
+          }
+        },
+
         // Editor improvements
         'Ctrl-Left': 'goSubwordLeft',
         'Ctrl-Right': 'goSubwordRight',

diff --git a/src/components/VariableEditor.js b/src/components/VariableEditor.js
@@ -41,6 +41,7 @@ export class VariableEditor extends React.Component {
     value: PropTypes.string,
     onEdit: PropTypes.func,
     onHintInformationRender: PropTypes.func,
+    onRunQuery: PropTypes.func,
   }
 
   constructor(props) {
@@ -79,6 +80,17 @@ export class VariableEditor extends React.Component {
         'Alt-Space': () => this.editor.showHint({ completeSingle: false }),
         'Shift-Space': () => this.editor.showHint({ completeSingle: false }),
 
+        'Cmd-Enter': () => {
+          if (this.props.onRunQuery) {
+            this.props.onRunQuery();
+          }
+        },
+        'Ctrl-Enter': () => {
+          if (this.props.onRunQuery) {
+            this.props.onRunQuery();
+          }
+        },
+
         // Editor improvements
         'Ctrl-Left': 'goSubwordLeft',
         'Ctrl-Right': 'goSubwordRight',