btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix: increase reliability of env hover tooltip

Browse Source
This commit is contained in:
Andrew Bastin
2022-02-12 02:16:21 +05:30
parent cd5b765ed1
commit 4296ee0251
1 changed files with 54 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts
View File

@@ -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 HOPP_ENV_HIGHLIGHT_NOT_FOUND = "bg-red-400 text-red-50 hover:bg-red-600"
const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) => const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
hoverTooltip((view, pos, side) => { hoverTooltip(
const { from, to, text } = view.state.doc.lineAt(pos) (view, pos, side) => {
const { from, to, text } = view.state.doc.lineAt(pos)
// TODO: When Codemirror 6 allows this to work (not make the // TODO: When Codemirror 6 allows this to work (not make the
// popups appear half of the time) use this implementation // popups appear half of the time) use this implementation
// const wordSelection = view.state.wordAt(pos) // const wordSelection = view.state.wordAt(pos)
// if (!wordSelection) return null // if (!wordSelection) return null
// const word = view.state.doc.sliceString( // const word = view.state.doc.sliceString(
// wordSelection.from - 2, // wordSelection.from - 2,
// wordSelection.to + 2 // wordSelection.to + 2
// ) // )
// if (!HOPP_ENVIRONMENT_REGEX.test(word)) return null // if (!HOPP_ENVIRONMENT_REGEX.test(word)) return null
// Tracking the start and the end of the words // Tracking the start and the end of the words
let start = pos let start = pos
let end = pos let end = pos
while (start > from && /\w/.test(text[start - from - 1])) start-- while (start > from && /\w/.test(text[start - from - 1])) start--
while (end < to && /\w/.test(text[end - from])) end++ while (end < to && /\w/.test(text[end - from])) end++
if ( if (
(start === pos && side < 0) || (start === pos && side < 0) ||
(end === pos && side > 0) || (end === pos && side > 0) ||
!HOPP_ENVIRONMENT_REGEX.test(text.slice(start - from - 2, end - from + 2)) !HOPP_ENVIRONMENT_REGEX.test(
) text.slice(start - from - 2, end - from + 2)
return null )
)
return null
const envName = const envName =
aggregateEnvs.find( aggregateEnvs.find(
(env) => env.key === text.slice(start - from, end - from) (env) => env.key === text.slice(start - from, end - from)
// env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2) // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
)?.sourceEnv ?? "choose an environment" )?.sourceEnv ?? "choose an environment"
const envValue = ( const envValue = (
aggregateEnvs.find( aggregateEnvs.find(
(env) => env.key === text.slice(start - from, end - from) (env) => env.key === text.slice(start - from, end - from)
// env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2) // env.key === word.slice(wordSelection.from + 2, wordSelection.to - 2)
)?.value ?? "not found" )?.value ?? "not found"
).replace(/"/g, "&quot;") ).replace(/"/g, "&quot;")
const textContent = `${envName} <kbd>${envValue}</kbd>` const textContent = `${envName} <kbd>${envValue}</kbd>`
return { return {
pos: start, pos: start,
end: to, end: to,
above: true, above: true,
create() { create() {
const dom = document.createElement("span") const dom = document.createElement("span")
dom.innerHTML = textContent dom.innerHTML = textContent
dom.className = "tooltip-theme" dom.className = "tooltip-theme"
return { dom } 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[]) { function checkEnv(env: string, aggregateEnvs: AggregateEnvironment[]) {
const className = aggregateEnvs.find( const className = aggregateEnvs.find(