diff --git a/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts b/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts
index 5635f1609..56eb46faa 100644
--- a/packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts
+++ b/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, """)
+ 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, """)
- const textContent = `${envName} ${envValue}`
+ const textContent = `${envName} ${envValue}`
- 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(