From fb8ff37d831184ae55db48482e78ed2ee116f290 Mon Sep 17 00:00:00 2001
From: Anoop M D <anoop.md1421@gmail.com>
Date: Fri, 20 Jan 2023 08:14:03 +0530
Subject: [PATCH] feat: codemirror syntax highlight for env vars

---
 .../components/CodeEditor/StyledWrapper.js    |  4 ++
 .../src/components/CodeEditor/index.js        | 42 ++++++++++++++++++-
 .../src/pageComponents/Index/index.js         |  5 +++
 3 files changed, 50 insertions(+), 1 deletion(-)

diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
index a2c1f9b17..8fa03f4c2 100644
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/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;
diff --git a/packages/bruno-app/src/components/CodeEditor/index.js b/packages/bruno-app/src/components/CodeEditor/index.js
index 5e55d176e..57c46945b 100644
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/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();
diff --git a/packages/bruno-app/src/pageComponents/Index/index.js b/packages/bruno-app/src/pageComponents/Index/index.js
index be1911fde..b96341f4f 100644
--- a/packages/bruno-app/src/pageComponents/Index/index.js
+++ b/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');