implement persistent search

Author: timsuchanek

packages/graphql-playground-react/src/components/Playground/QueryEditor.tsx

@@ -150,6 +150,9 @@ export class QueryEditor extends React.PureComponent<Props & ReduxProps, {}> {
         'Ctrl-Right': 'goSubwordRight',
         'Alt-Left': 'goGroupLeft',
         'Alt-Right': 'goGroupRight',
+
+        'Cmd-F': 'findPersistent',
+        'Ctrl-F': 'findPersistent',
       },
     })
 

packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx

@@ -35,6 +35,8 @@ export class ResultViewer extends React.Component<Props, {}> {
     require('codemirror/addon/fold/brace-fold')
     require('codemirror/addon/dialog/dialog')
     require('codemirror/addon/search/search')
+    require('codemirror/addon/search/searchcursor')
+    require('codemirror/addon/search/jump-to-line')
     require('codemirror/keymap/sublime')
     require('codemirror-graphql/results/mode')
 
@@ -61,6 +63,10 @@ export class ResultViewer extends React.Component<Props, {}> {
       foldGutter,
       gutters,
       extraKeys: {
+        // Persistent search box in Query Editor
+        'Cmd-F': 'findPersistent',
+        'Ctrl-F': 'findPersistent',
+
         // Editor improvements
         'Ctrl-Left': 'goSubwordLeft',
         'Ctrl-Right': 'goSubwordRight',

packages/graphql-playground-react/src/styles/graphiql_dark.css

@@ -990,8 +990,7 @@ div.CodeMirror-dragcursors {
 }
 
 .cm-searching {
-  background: #ffa;
-  background: rgba(255, 255, 0, 0.4);
+  background: rgba(255, 255, 255, 0.15);
 }
 
 /* IE7 hack to prevent it from returning funny offsetTops on the spans */
@@ -1045,7 +1044,7 @@ span.CodeMirror-selectedtext {
 .CodeMirror-dialog input {
   background: transparent;
   border: 1px solid #d3d6db;
-  color: inherit;
+  color: rgba(255, 255, 255, 0.6);
   font-family: monospace;
   outline: none;
   width: 20em;