feat: codemirror syntax highlight for env vars

packages/bruno-app/src/components/CodeEditor/StyledWrapper.js

@@ -27,6 +27,10 @@ const StyledWrapper = styled.div`
   .cm-s-monokai span.cm-atom{
     color: #569cd6 !important;
   }
+
+  .cm-variable-valid{color: green}
+  .cm-variable-invalid{color: red}
+  .cm-matchhighlight {background-color: yellow}
 `;
 
 export default StyledWrapper;

packages/bruno-app/src/components/CodeEditor/index.js

@@ -31,6 +31,7 @@ export default class QueryEditor extends React.Component {
       lineNumbers: true,
       lineWrapping: true,
       tabSize: 2,
+      highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
       mode: this.props.mode || 'application/ld+json',
       keyMap: 'sublime',
       autoCloseBrackets: true,
@@ -70,6 +71,7 @@ export default class QueryEditor extends React.Component {
     }));
     if (editor) {
       editor.on('change', this._onEdit);
+      this.addOverlay();
     }
   }
 
@@ -88,7 +90,10 @@ export default class QueryEditor extends React.Component {
     if (this.props.value !== prevProps.value && this.props.value !== this.cachedValue && this.editor) {
       this.cachedValue = this.props.value;
       this.editor.setValue(this.props.value);
-      this.editor.setOption('mode', this.props.mode);
+    }
+
+    if(this.editor) {
+      this.addOverlay();
     }
 
     if (this.props.theme !== prevProps.theme && this.editor) {
@@ -116,6 +121,41 @@ export default class QueryEditor extends React.Component {
     );
   }
 
+  addOverlay = () => {
+    var variables = {
+      "host": "",
+      "token": ""
+    };
+    const mode = this.props.mode || 'application/ld+json';
+    
+    CodeMirror.defineMode("brunovariables", function(config, parserConfig) {
+      let variablesOverlay = {
+        token: function(stream, state) {
+          if (stream.match("{{", true)) {
+            let ch;
+            let word = "";
+            while ((ch = stream.next()) != null) {
+              if (ch == "}" && stream.next() == "}") {
+                stream.eat("}");
+                if (word in variables) {
+                  return "variable-valid";
+                } else {
+                  return "variable-invalid";
+                }
+              }
+              word += ch;
+            }
+          }
+          while (stream.next() != null && !stream.match("{{", false)) {}
+          return null;
+        }
+      };
+      return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || mode), variablesOverlay);
+    });
+
+    this.editor.setOption('mode', 'brunovariables');
+  }
+
   _onEdit = () => {
     if (!this.ignoreChangeEvent && this.editor) {
       this.cachedValue = this.editor.getValue();

packages/bruno-app/src/pageComponents/Index/index.js

@@ -6,6 +6,7 @@ import RequestTabPanel from 'components/RequestTabPanel';
 import Sidebar from 'components/Sidebar';
 import { useSelector } from 'react-redux';
 import StyledWrapper from './StyledWrapper';
+import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/material.css';
 import 'codemirror/theme/monokai.css';
 
@@ -16,13 +17,17 @@ if (!SERVER_RENDERED) {
   require('codemirror/addon/edit/matchbrackets');
   require('codemirror/addon/fold/brace-fold');
   require('codemirror/addon/fold/foldgutter');
+  require('codemirror/addon/mode/overlay');
   require('codemirror/addon/hint/show-hint');
+  require('codemirror/addon/scroll/annotatescrollbar');
   require('codemirror/keymap/sublime');
   require('codemirror/addon/comment/comment');
   require('codemirror/addon/edit/closebrackets');
   require('codemirror/addon/search/search');
   require('codemirror/addon/search/searchcursor');
   require('codemirror/addon/search/jump-to-line');
+  require('codemirror/addon/search/matchesonscrollbar');
+  require('codemirror/addon/search/match-highlighter');
   require('codemirror/addon/dialog/dialog');
 
   require('codemirror-graphql/hint');