diff --git a/packages/graphiql/src/components/QueryEditor.js b/packages/graphiql/src/components/QueryEditor.js index 929667f4382..cc450b3eb6d 100644 --- a/packages/graphiql/src/components/QueryEditor.js +++ b/packages/graphiql/src/components/QueryEditor.js @@ -11,6 +11,7 @@ import { GraphQLSchema } from 'graphql'; import MD from 'markdown-it'; import { normalizeWhitespace } from '../utility/normalizeWhitespace'; import onHasCompletion from '../utility/onHasCompletion'; +import commonKeys from '../utility/commonKeys'; const md = new MD(); const AUTO_COMPLETE_AFTER_KEY = /^[a-zA-Z0-9_@(]$/; @@ -148,17 +149,7 @@ export class QueryEditor extends React.Component { } }, - // Persistent search box in Query Editor - 'Cmd-F': 'findPersistent', - 'Ctrl-F': 'findPersistent', - 'Cmd-G': 'findPersistent', - 'Ctrl-G': 'findPersistent', - - // Editor improvements - 'Ctrl-Left': 'goSubwordLeft', - 'Ctrl-Right': 'goSubwordRight', - 'Alt-Left': 'goGroupLeft', - 'Alt-Right': 'goGroupRight', + ...commonKeys, }, }); @@ -197,7 +188,7 @@ export class QueryEditor extends React.Component { this.editor.off('change', this._onEdit); this.editor.off('keyup', this._onKeyUp); this.editor.off('hasCompletion', this._onHasCompletion); - this.editor = null; + this.editor = null; } } diff --git a/packages/graphiql/src/components/ResultViewer.js b/packages/graphiql/src/components/ResultViewer.js index 9d6ff1d1344..84ff08e8d76 100644 --- a/packages/graphiql/src/components/ResultViewer.js +++ b/packages/graphiql/src/components/ResultViewer.js @@ -8,6 +8,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; +import commonKeys from '../utility/commonKeys'; /** * ResultViewer @@ -86,19 +87,7 @@ export class ResultViewer extends React.Component { }, gutters: ['CodeMirror-foldgutter'], info: Boolean(this.props.ResultsTooltip || this.props.ImagePreview), - extraKeys: { - // Persistent search box in Query Editor - 'Cmd-F': 'findPersistent', - 'Ctrl-F': 'findPersistent', - 'Cmd-G': 'findPersistent', - 'Ctrl-G': 'findPersistent', - - // Editor improvements - 'Ctrl-Left': 'goSubwordLeft', - 'Ctrl-Right': 'goSubwordRight', - 'Alt-Left': 'goGroupLeft', - 'Alt-Right': 'goGroupRight', - }, + extraKeys: commonKeys, }); } diff --git a/packages/graphiql/src/components/VariableEditor.js b/packages/graphiql/src/components/VariableEditor.js index dc5e2228e13..90a3b884682 100644 --- a/packages/graphiql/src/components/VariableEditor.js +++ b/packages/graphiql/src/components/VariableEditor.js @@ -9,6 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import onHasCompletion from '../utility/onHasCompletion'; +import commonKeys from '../utility/commonKeys'; /** * VariableEditor @@ -132,17 +133,7 @@ export class VariableEditor extends React.Component { } }, - // Persistent search box in Query Editor - 'Cmd-F': 'findPersistent', - 'Ctrl-F': 'findPersistent', - 'Cmd-G': 'findPersistent', - 'Ctrl-G': 'findPersistent', - - // Editor improvements - 'Ctrl-Left': 'goSubwordLeft', - 'Ctrl-Right': 'goSubwordRight', - 'Alt-Left': 'goGroupLeft', - 'Alt-Right': 'goGroupRight', + ...commonKeys, }, }); diff --git a/packages/graphiql/src/utility/commonKeys.js b/packages/graphiql/src/utility/commonKeys.js new file mode 100644 index 00000000000..e05cdb42e83 --- /dev/null +++ b/packages/graphiql/src/utility/commonKeys.js @@ -0,0 +1,16 @@ +const isMacOs = window.navigator.platform === 'MacIntel'; + +const commonKeys = { + // Persistent search box in Query Editor + [isMacOs ? 'Cmd-F' : 'Ctrl-F']: 'findPersistent', + 'Cmd-G': 'findPersistent', + 'Ctrl-G': 'findPersistent', + + // Editor improvements + 'Ctrl-Left': 'goSubwordLeft', + 'Ctrl-Right': 'goSubwordRight', + 'Alt-Left': 'goGroupLeft', + 'Alt-Right': 'goGroupRight', +}; + +export default commonKeys;