From 3ab07be376ded524f9054fb2f481ffb49bbfbeca Mon Sep 17 00:00:00 2001
From: Andriy Semenets <semanser@gmail.com>
Date: Fri, 29 Nov 2019 18:47:11 +0200
Subject: [PATCH] Save keyMap to the local storage

---
 packages/graphiql/src/components/GraphiQL.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/graphiql/src/components/GraphiQL.js b/packages/graphiql/src/components/GraphiQL.js
index fb5fa53293a..c2386775ddc 100644
--- a/packages/graphiql/src/components/GraphiQL.js
+++ b/packages/graphiql/src/components/GraphiQL.js
@@ -150,7 +150,7 @@ export class GraphiQL extends React.Component {
         DEFAULT_DOC_EXPLORER_WIDTH,
       isWaitingForResponse: false,
       subscription: null,
-      keyMap: props.keyMap,
+      keyMap: this._storage.get('keyMap') || props.keyMap,
       ...queryFacts,
     };
 
@@ -269,6 +269,7 @@ export class GraphiQL extends React.Component {
     this._storage.set('docExplorerWidth', this.state.docExplorerWidth);
     this._storage.set('docExplorerOpen', this.state.docExplorerOpen);
     this._storage.set('historyPaneOpen', this.state.historyPaneOpen);
+    this._storage.set('keyMap', this.state.keyMap);
   }
 
   render() {
@@ -923,9 +924,12 @@ export class GraphiQL extends React.Component {
   };
 
   handleToggleKeyMap = () => {
+    const updatedKeyMap = this.state.keyMap === 'sublime' ? 'vim' : 'sublime';
     this.setState({
-      keyMap: this.state.keyMap === 'sublime' ? 'vim' : 'sublime'
+      keyMap: updatedKeyMap
     });
+
+    this._storage.set('keyMap', updatedKeyMap);
   };
 
   handleResizeStart = downEvent => {