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(