thibaud-lclr/api-client
1
0
Fork 0
Code Packages Activity Actions

fix: context-menu position fixed while scrolling (#3340)

Browse source
This commit is contained in:
Nivedin 2023-09-12 12:43:10 +05:30 committed by GitHub
parent dd143c95a9
commit 7201147b55
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
packages/hoppscotch-common/src/components/smart/EnvInput.vue
View file

@ -311,35 +311,36 @@ const envVars = computed(() =>
const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view) const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view)
const initView = (el: any) => { function handleTextSelection() {
function handleTextSelection() { const selection = view.value?.state.selection.main
const selection = view.value?.state.selection.main if (selection) {
if (selection) { const from = selection.from
const from = selection.from const to = selection.to
const to = selection.to if (from === to) return
const text = view.value?.state.doc.sliceString(from, to) const text = view.value?.state.doc.sliceString(from, to)
const { top, left } = view.value?.coordsAtPos(from) const { top, left } = view.value?.coordsAtPos(from)
if (text) { if (text) {
invokeAction("contextmenu.open", { invokeAction("contextmenu.open", {
position: { position: {
top, top,
left, left,
}, },
text, text,
}) })
showSuggestionPopover.value = false showSuggestionPopover.value = false
} else { } else {
invokeAction("contextmenu.open", { invokeAction("contextmenu.open", {
position: { position: {
top, top,
left, left,
}, },
text: null, text: null,
}) })
}
} }
} }
}
const initView = (el: any) => {
// Debounce to prevent double click from selecting the word // Debounce to prevent double click from selecting the word
const debounceFn = useDebounceFn(() => { const debounceFn = useDebounceFn(() => {
handleTextSelection() handleTextSelection()
@ -381,6 +382,11 @@ const initView = (el: any) => {
drop(ev) { drop(ev) {
ev.preventDefault() ev.preventDefault()
}, },
scroll(event) {
if (event.target) {
handleTextSelection()
}
},
}), }),
ViewPlugin.fromClass( ViewPlugin.fromClass(
class { class {

61
packages/hoppscotch-common/src/composables/codemirror.ts
View file

@ -216,6 +216,33 @@ export function useCodemirror(
? new HoppEnvironmentPlugin(subscribeToStream, view) ? new HoppEnvironmentPlugin(subscribeToStream, view)
: null : null
function handleTextSelection() {
const selection = view.value?.state.selection.main
if (selection) {
const from = selection.from
const to = selection.to
const text = view.value?.state.doc.sliceString(from, to)
const { top, left } = view.value?.coordsAtPos(from)
if (text) {
invokeAction("contextmenu.open", {
position: {
top,
left,
},
text,
})
} else {
invokeAction("contextmenu.open", {
position: {
top,
left,
},
text: null,
})
}
}
}
const initView = (el: any) => { const initView = (el: any) => {
if (el) platform.ui?.onCodemirrorInstanceMount?.(el) if (el) platform.ui?.onCodemirrorInstanceMount?.(el)
@ -226,33 +253,6 @@ export function useCodemirror(
ViewPlugin.fromClass( ViewPlugin.fromClass(
class { class {
update(update: ViewUpdate) { update(update: ViewUpdate) {
function handleTextSelection() {
const selection = view.value?.state.selection.main
if (selection) {
const from = selection.from
const to = selection.to
const text = view.value?.state.doc.sliceString(from, to)
const { top, left } = view.value?.coordsAtPos(from)
if (text) {
invokeAction("contextmenu.open", {
position: {
top,
left,
},
text,
})
} else {
invokeAction("contextmenu.open", {
position: {
top,
left,
},
text: null,
})
}
}
}
// Debounce to prevent double click from selecting the word // Debounce to prevent double click from selecting the word
const debounceFn = useDebounceFn(() => { const debounceFn = useDebounceFn(() => {
handleTextSelection() handleTextSelection()
@ -296,6 +296,13 @@ export function useCodemirror(
} }
} }
), ),
EditorView.domEventHandlers({
scroll(event) {
if (event.target) {
handleTextSelection()
}
},
}),
EditorView.updateListener.of((update) => { EditorView.updateListener.of((update) => {
if (options.extendedEditorConfig.readOnly) { if (options.extendedEditorConfig.readOnly) {
update.view.contentDOM.inputMode = "none" update.view.contentDOM.inputMode = "none"