From babdeab55baa2e01f052f47831d22ed86fee6b6a Mon Sep 17 00:00:00 2001
From: Its-treason <timon.sch71@gmail.com>
Date: Wed, 6 Mar 2024 00:18:42 +0100
Subject: [PATCH] fix(#1450): Better hover for variables in Monaco editor

---
 .../EnvironmentVariables/index.js             |  3 +-
 .../bruno-app/src/utils/monaco/monacoUtils.js | 76 ++++++++++++++++++-
 2 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
index 7cdf79ad5b..0c71f9462e 100644
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -120,12 +120,13 @@ const EnvironmentVariables = ({ environment, collection }) => {
                   <ErrorMessage name={`${index}.name`} />
                 </td>
                 <td>
-                  <SingleLineEditor
+                  <CodeEditor
                     theme={storedTheme}
                     collection={collection}
                     name={`${index}.value`}
                     value={variable.value}
                     onChange={(newValue) => formik.setFieldValue(`${index}.value`, newValue, true)}
+                    singleLine
                   />
                 </td>
                 <td>
diff --git a/packages/bruno-app/src/utils/monaco/monacoUtils.js b/packages/bruno-app/src/utils/monaco/monacoUtils.js
index f3662b197d..da93434e5f 100644
--- a/packages/bruno-app/src/utils/monaco/monacoUtils.js
+++ b/packages/bruno-app/src/utils/monaco/monacoUtils.js
@@ -225,7 +225,7 @@ const buildSuggestions = (monaco) => [
   }
 ];
 
-export const getWordAtPosition = (model, position) => {
+export const ___getWordAtPosition = (model, position) => {
   const wordAtPos = model.getWordUntilPosition(position);
   let word = wordAtPos.word;
   let startPos = wordAtPos.startColumn;
@@ -271,6 +271,74 @@ export const getWordAtPosition = (model, position) => {
   }
 };
 
+// This function will check if we hover over a variable by first going the left and then to right to find the
+// opening and closing curly brackets
+export const getWordAtPosition = (model, position) => {
+  const range = {
+    startColumn: position.column,
+    endColumn: position.column,
+    startLineNumber: position.lineNumber,
+    endLineNumber: position.lineNumber
+  };
+
+  // Check for the beginning {{ of a variable
+  for (let i = 0; true; i++) {
+    // Reached left char limit, just break here
+    if (i > 32) {
+      return null;
+    }
+
+    range.startColumn--;
+    // Reached the end of the line
+    if (range.startColumn === 0) {
+      return null;
+    }
+
+    const foundWord = model.getValueInRange(range);
+
+    // If we hover over the start of the variable go to the right and check if anything is there
+    if (foundWord === '{') {
+      range.startColumn++;
+      range.endColumn++;
+      continue;
+    }
+
+    // We reached the beginning of another variable
+    // e.g. example {{test}} here {{test}}
+    //                       ^^^^ cursor hovers here
+    //                     ^ This will be caught
+    if (foundWord.charAt(0) === '}') {
+      return null;
+    }
+
+    // Check if we reached the end of the
+    if (foundWord.charAt(0) === '{' && foundWord.charAt(1) === '{') {
+      break;
+    }
+  }
+
+  // Check for the ending }} of a variable
+  for (let i; true; i++) {
+    // Reached left char limit, just break here
+    if (i > 32) {
+      return null;
+    }
+
+    range.endColumn++;
+    const foundWord = model.getValueInRange(range);
+
+    // Check if we found the end of the variable
+    const wordLength = foundWord.length;
+    if (foundWord.charAt(wordLength - 1) === '}' && foundWord.charAt(wordLength - 2) === '}') {
+      break;
+    }
+  }
+
+  const foundWord = model.getValueInRange(range);
+  // Trim {{, }} and any other spaces, then return the variable
+  return foundWord.substring(2, foundWord.length - 2).trim();
+};
+
 export const setCustomLanguage = (monaco) => {
   monaco.languages.register({ id: 'myCustomLanguage' });
 
@@ -324,11 +392,15 @@ export const setMonacoVariables = (monaco, variables, mode = '*') => {
     provideHover: (model, position) => {
       // Rebuild the hoverProvider to avoid memory leaks
       const word = getWordAtPosition(model, position);
+      if (word === null) {
+        return null;
+      }
+
       const variable = allVariables.find(([key, _]) => key === word);
       if (variable) {
         return {
           range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
-          contents: [{ value: `**${variable[0]}**` }, { value: variable[1] }]
+          contents: [{ value: `**${variable[0]}**` }, { value: variable[1].substring(0, 255) }]
         };
       } else {
         return {