fix: increase reliability of env hover tooltip

packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts

@@ -23,60 +23,68 @@ const HOPP_ENV_HIGHLIGHT_FOUND =
 const HOPP_ENV_HIGHLIGHT_NOT_FOUND = "bg-red-400 text-red-50 hover:bg-red-600"
 
 const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
-  hoverTooltip((view, pos, side) => {
-    const { from, to, text } = view.state.doc.lineAt(pos)
+  hoverTooltip(
+    (view, pos, side) => {
+      const { from, to, text } = view.state.doc.lineAt(pos)
 
-    // TODO: When Codemirror 6 allows this to work (not make the
-    // popups appear half of the time) use this implementation
-    // const wordSelection = view.state.wordAt(pos)
-    // if (!wordSelection) return null
-    // const word = view.state.doc.sliceString(
-    //   wordSelection.from - 2,
-    //   wordSelection.to + 2
-    // )
-    // if (!HOPP_ENVIRONMENT_REGEX.test(word)) return null
+      // TODO: When Codemirror 6 allows this to work (not make the
+      // popups appear half of the time) use this implementation
+      // const wordSelection = view.state.wordAt(pos)
+      // if (!wordSelection) return null
+      // const word = view.state.doc.sliceString(
+      //   wordSelection.from - 2,
+      //   wordSelection.to + 2
+      // )
+      // if (!HOPP_ENVIRONMENT_REGEX.test(word)) return null
 
-    // Tracking the start and the end of the words
-    let start = pos
-    let end = pos
+      // Tracking the start and the end of the words
+      let start = pos
+      let end = pos
 
-    while (start > from && /\w/.test(text[start - from - 1])) start--
-    while (end < to && /\w/.test(text[end - from])) end++
+      while (start > from && /\w/.test(text[start - from - 1])) start--
+      while (end < to && /\w/.test(text[end - from])) end++
 
-    if (
-      (start === pos && side < 0) ||
-      (end === pos && side > 0) ||
-      !HOPP_ENVIRONMENT_REGEX.test(text.slice(start - from - 2, end - from + 2))
-    )
-      return null
+      if (
+        (start === pos && side < 0) ||
+        (end === pos && side > 0) ||
+        !HOPP_ENVIRONMENT_REGEX.test(
+          text.slice(start - from - 2, end - from + 2)
+        )
+      )
+        return null
 
-    const envName =
-      aggregateEnvs.find(
-        (env) => env.key === text.slice(start - from, end - from)
-        // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
-      )?.sourceEnv ?? "choose an environment"
+      const envName =
+        aggregateEnvs.find(
+          (env) => env.key === text.slice(start - from, end - from)
+          // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
+        )?.sourceEnv ?? "choose an environment"
 
-    const envValue = (
-      aggregateEnvs.find(
-        (env) => env.key === text.slice(start - from, end - from)
-        // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
-      )?.value ?? "not found"
-    ).replace(/"/g, "&quot;")
+      const envValue = (
+        aggregateEnvs.find(
+          (env) => env.key === text.slice(start - from, end - from)
+          // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
+        )?.value ?? "not found"
+      ).replace(/"/g, "&quot;")
 
-    const textContent = `${envName} <kbd>${envValue}</kbd>`
+      const textContent = `${envName} <kbd>${envValue}</kbd>`
 
-    return {
-      pos: start,
-      end: to,
-      above: true,
-      create() {
-        const dom = document.createElement("span")
-        dom.innerHTML = textContent
-        dom.className = "tooltip-theme"
-        return { dom }
-      },
-    }
-  })
+      return {
+        pos: start,
+        end: to,
+        above: true,
+        create() {
+          const dom = document.createElement("span")
+          dom.innerHTML = textContent
+          dom.className = "tooltip-theme"
+          return { dom }
+        },
+      }
+    },
+    // HACK: This is a hack to fix hover tooltip not coming half of the time
+    // https://github.com/codemirror/tooltip/blob/765c463fc1d5afcc3ec93cee47d72606bed27e1d/src/tooltip.ts#L622
+    // Still doesn't fix the not showing up some of the time issue, but this is atleast more consistent
+    { hoverTime: 1 } as any
+  )
 
 function checkEnv(env: string, aggregateEnvs: AggregateEnvironment[]) {
   const className = aggregateEnvs.find(