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

Merge branch 'feat/cm-env-tooltip'

Browse Source
This commit is contained in:
liyasthomas
2021-12-12 21:11:58 +05:30
parent 75e34feabf 4e0bb1a243
commit d997f88fbe
21 changed files with 314 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/hoppscotch-app/assets/scss/styles.scss
View File

@@ -136,44 +136,43 @@ a {
}
}
.tippy-popper {
.tooltip-theme {
@apply bg-tooltip;
@apply text-primary;
@apply font-semibold;
@apply py-1 px-2;
.tooltip-theme {
@apply bg-tooltip;
@apply text-primary;
@apply font-semibold;
@apply py-1 px-2;
@apply rounded;
@apply truncate;
@apply shadow;
font-size: 88%;
line-height: var(--body-line-height);
kbd {
@apply inline-flex;
@apply font-sans;
@apply bg-gray-500;
@apply bg-opacity-45;
@apply text-primaryLight;
@apply rounded-sm;
@apply px-1;
@apply ml-1;
@apply truncate;
@apply shadow;
font-size: 88%;
line-height: var(--body-line-height);
kbd {
@apply inline-flex;
@apply font-sans;
@apply bg-gray-500;
@apply bg-opacity-45;
@apply text-primaryLight;
@apply rounded-sm;
@apply px-1;
@apply ml-1;
@apply truncate;
}
}
}
.popover-theme {
@apply bg-popover;
@apply text-secondary;
@apply p-2;
@apply shadow-lg;
@apply focus:outline-none;
.popover-theme {
@apply bg-popover;
@apply text-secondary;
@apply p-2;
@apply shadow-lg;
@apply focus:outline-none;
font-size: var(--body-font-size);
line-height: var(--body-line-height);
font-size: var(--body-font-size);
line-height: var(--body-line-height);
.tippy-roundarrow svg {
@apply fill-popover;
}
.tippy-roundarrow svg {
@apply fill-popover;
}
}

3
packages/hoppscotch-app/components/graphql/RequestOptions.vue
View File

@@ -307,6 +307,7 @@ useCodemirror(bulkEditor, bulkHeaders, {
},
linter: null,
completer: null,
environmentHighlights: false,
})
const variableEditor = ref<any | null>(null)
@@ -318,6 +319,7 @@ useCodemirror(variableEditor, variableString, {
},
linter: jsonLinter,
completer: null,
environmentHighlights: false,
})
const queryEditor = ref<any | null>(null)
@@ -330,6 +332,7 @@ useCodemirror(queryEditor, gqlQueryString, {
},
linter: createGQLQueryLinter(schemaString),
completer: queryCompleter(schemaString),
environmentHighlights: false,
})
const copyQueryIcon = ref("copy")

1
packages/hoppscotch-app/components/graphql/Response.vue
View File

@@ -105,6 +105,7 @@ useCodemirror(
},
linter: null,
completer: null,
environmentHighlights: false,
})
)

1
packages/hoppscotch-app/components/graphql/Sidebar.vue
View File

@@ -409,6 +409,7 @@ useCodemirror(
},
linter: null,
completer: null,
environmentHighlights: false,
})
)

1
packages/hoppscotch-app/components/http/CodegenModal.vue
View File

@@ -109,6 +109,7 @@ useCodemirror(generatedCode, requestCode, {
},
linter: null,
completer: null,
environmentHighlights: false,
})
watch(

1
packages/hoppscotch-app/components/http/Headers.vue
View File

@@ -182,6 +182,7 @@ useCodemirror(bulkEditor, bulkHeaders, {
},
linter: null,
completer: null,
environmentHighlights: true,
})
watch(bulkHeaders, () => {

1
packages/hoppscotch-app/components/http/ImportCurl.vue
View File

@@ -47,6 +47,7 @@ useCodemirror(curlEditor, curl, {
},
linter: null,
completer: null,
environmentHighlights: false,
})
defineProps<{ show: boolean }>()

1
packages/hoppscotch-app/components/http/Parameters.vue
View File

@@ -189,6 +189,7 @@ useCodemirror(bulkEditor, bulkParams, {
},
linter: null,
completer: null,
environmentHighlights: true,
})
const params$ = useReadonlyStream(restParams$, [])

1
packages/hoppscotch-app/components/http/PreRequestScript.vue
View File

@@ -88,6 +88,7 @@ useCodemirror(
},
linter,
completer,
environmentHighlights: false,
})
)

1
packages/hoppscotch-app/components/http/RawBody.vue
View File

@@ -91,6 +91,7 @@ useCodemirror(
},
linter: null,
completer: null,
environmentHighlights: true,
})
)

1
packages/hoppscotch-app/components/http/Tests.vue
View File

@@ -88,6 +88,7 @@ useCodemirror(
},
linter,
completer,
environmentHighlights: false,
})
)

1
packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue
View File

@@ -102,6 +102,7 @@ useCodemirror(
},
linter: null,
completer: null,
environmentHighlights: true,
})
)

1
packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
View File

@@ -193,6 +193,7 @@ const { cursor } = useCodemirror(
},
linter: null,
completer: null,
environmentHighlights: true,
})
)

1
packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue
View File

@@ -92,6 +92,7 @@ useCodemirror(
},
linter: null,
completer: null,
environmentHighlights: true,
})
)

1
packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue
View File

@@ -92,6 +92,7 @@ useCodemirror(
},
linter: null,
completer: null,
environmentHighlights: true,
})
)

119
packages/hoppscotch-app/helpers/editor/codemirror.ts
View File

@@ -30,9 +30,11 @@ import { GQLLanguage } from "@hoppscotch/codemirror-lang-graphql"
import { pipe } from "fp-ts/function"
import * as O from "fp-ts/Option"
import { isJSONContentType } from "../utils/contenttypes"
import { useStreamSubscriber } from "../utils/composables"
import { Completer } from "./completion"
import { LinterDefinition } from "./linting/linter"
import { basicSetup, baseTheme, baseHighlightStyle } from "./themes/baseTheme"
import { HoppEnvironmentPlugin } from "./extensions/HoppEnvironment"
type ExtendedEditorConfig = {
mode: string
@@ -45,6 +47,9 @@ type CodeMirrorOptions = {
extendedEditorConfig: Partial<ExtendedEditorConfig>
linter: LinterDefinition | null
completer: Completer | null
// NOTE: This property is not reactive
environmentHighlights: boolean
}
const hoppCompleterExt = (completer: Completer): Extension => {
@@ -148,6 +153,8 @@ export function useCodemirror(
value: Ref<string>,
options: CodeMirrorOptions
): { cursor: Ref<{ line: number; ch: number }> } {
const { subscribeToStream } = useStreamSubscriber()
const language = new Compartment()
const lineWrapping = new Compartment()
const placeholderConfig = new Compartment()
@@ -165,64 +172,70 @@ export function useCodemirror(
const view = ref<EditorView>()
const environmentTooltip = options.environmentHighlights
? new HoppEnvironmentPlugin(subscribeToStream, view)
: null
const initView = (el: any) => {
const extensions = [
basicSetup,
baseTheme,
baseHighlightStyle,
ViewPlugin.fromClass(
class {
update(update: ViewUpdate) {
if (update.selectionSet) {
const cursorPos = update.state.selection.main.head
const line = update.state.doc.lineAt(cursorPos)
cachedCursor.value = {
line: line.number - 1,
ch: cursorPos - line.from,
}
cursor.value = {
line: cachedCursor.value.line,
ch: cachedCursor.value.ch,
}
}
if (update.docChanged) {
// Expensive on big files ?
cachedValue.value = update.state.doc
.toJSON()
.join(update.state.lineBreak)
if (!options.extendedEditorConfig.readOnly)
value.value = cachedValue.value
}
}
}
),
EditorState.changeFilter.of(() => !options.extendedEditorConfig.readOnly),
placeholderConfig.of(
placeholder(options.extendedEditorConfig.placeholder ?? "")
),
language.of(
getEditorLanguage(
options.extendedEditorConfig.mode ?? "",
options.linter ?? undefined,
options.completer ?? undefined
)
),
lineWrapping.of(
options.extendedEditorConfig.lineWrapping
? [EditorView.lineWrapping]
: []
),
keymap.of(defaultKeymap),
]
if (environmentTooltip) extensions.push(environmentTooltip.extension)
view.value = new EditorView({
parent: el,
state: EditorState.create({
doc: value.value,
extensions: [
basicSetup,
baseTheme,
baseHighlightStyle,
ViewPlugin.fromClass(
class {
update(update: ViewUpdate) {
if (update.selectionSet) {
const cursorPos = update.state.selection.main.head
const line = update.state.doc.lineAt(cursorPos)
cachedCursor.value = {
line: line.number - 1,
ch: cursorPos - line.from,
}
cursor.value = {
line: cachedCursor.value.line,
ch: cachedCursor.value.ch,
}
}
if (update.docChanged) {
// Expensive on big files ?
cachedValue.value = update.state.doc
.toJSON()
.join(update.state.lineBreak)
if (!options.extendedEditorConfig.readOnly)
value.value = cachedValue.value
}
}
}
),
EditorState.changeFilter.of(
() => !options.extendedEditorConfig.readOnly
),
placeholderConfig.of(
placeholder(options.extendedEditorConfig.placeholder ?? "")
),
language.of(
getEditorLanguage(
options.extendedEditorConfig.mode ?? "",
options.linter ?? undefined,
options.completer ?? undefined
)
),
lineWrapping.of(
options.extendedEditorConfig.lineWrapping
? [EditorView.lineWrapping]
: []
),
keymap.of(defaultKeymap),
],
extensions,
}),
})
}

146
packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts Normal file
View File

@@ -0,0 +1,146 @@
import { Compartment } from "@codemirror/state"
import { hoverTooltip } from "@codemirror/tooltip"
import {
Decoration,
EditorView,
MatchDecorator,
ViewPlugin,
} from "@codemirror/view"
import { Ref } from "@nuxtjs/composition-api"
import { StreamSubscriberFunc } from "~/helpers/utils/composables"
import {
AggregateEnvironment,
aggregateEnvs$,
getAggregateEnvs,
} from "~/newstore/environments"
const HOPP_ENVIRONMENT_REGEX = /(<<\w+>>)/g
const HOPP_ENV_HIGHLIGHT =
"cursor-help transition rounded px-1 focus:outline-none mx-0.5"
const HOPP_ENV_HIGHLIGHT_FOUND =
"bg-accentDark text-accentContrast hover:bg-accent"
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)
// 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
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
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 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 }
},
}
})
function checkEnv(env: string, aggregateEnvs: AggregateEnvironment[]) {
const className = aggregateEnvs.find(
(k: { key: string }) => k.key === env.slice(2, -2)
)
? HOPP_ENV_HIGHLIGHT_FOUND
: HOPP_ENV_HIGHLIGHT_NOT_FOUND
return Decoration.mark({
class: `${HOPP_ENV_HIGHLIGHT} ${className}`,
})
}
const getMatchDecorator = (aggregateEnvs: AggregateEnvironment[]) =>
new MatchDecorator({
regexp: HOPP_ENVIRONMENT_REGEX,
decoration: (m) => checkEnv(m[0], aggregateEnvs),
})
export const environmentHighlightStyle = (
aggregateEnvs: AggregateEnvironment[]
) => {
const decorator = getMatchDecorator(aggregateEnvs)
return ViewPlugin.define(
(view) => ({
decorations: decorator.createDeco(view),
update(u) {
this.decorations = decorator.updateDeco(u, this.decorations)
},
}),
{
decorations: (v) => v.decorations,
}
)
}
export class HoppEnvironmentPlugin {
private compartment = new Compartment()
private envs: AggregateEnvironment[] = []
constructor(
subscribeToStream: StreamSubscriberFunc,
private editorView: Ref<EditorView | undefined>
) {
this.envs = getAggregateEnvs()
subscribeToStream(aggregateEnvs$, (envs) => {
this.envs = envs
this.editorView.value?.dispatch({
effects: this.compartment.reconfigure([
cursorTooltipField(this.envs),
environmentHighlightStyle(this.envs),
]),
})
})
}
get extension() {
return this.compartment.of([
cursorTooltipField(this.envs),
environmentHighlightStyle(this.envs),
])
}
}

11
packages/hoppscotch-app/helpers/utils/composables.ts
View File

@@ -100,11 +100,20 @@ export function pluckMultipleFromRef<T, K extends Array<keyof T>>(
return Object.fromEntries(keys.map((x) => [x, pluckRef(sourceRef, x)])) as any
}
export type StreamSubscriberFunc = <T>(
stream: Observable<T>,
next?: ((value: T) => void) | undefined,
error?: ((e: any) => void) | undefined,
complete?: (() => void) | undefined
) => void
/**
* A composable that provides the ability to run streams
* and subscribe to them and respect the component lifecycle.
*/
export function useStreamSubscriber() {
export function useStreamSubscriber(): {
subscribeToStream: StreamSubscriberFunc
} {
const subs: Subscription[] = []
const runAndSubscribe = <T>(

40
packages/hoppscotch-app/newstore/environments.ts
View File

@@ -1,6 +1,6 @@
import { cloneDeep } from "lodash"
import isEqual from "lodash/isEqual"
import { combineLatest } from "rxjs"
import { combineLatest, Observable } from "rxjs"
import { distinctUntilChanged, map, pluck } from "rxjs/operators"
import DispatchingStore, {
defineDispatchers,
@@ -285,17 +285,22 @@ export const currentEnvironment$ = combineLatest([
})
)
export type AggregateEnvironment = {
key: string
value: string
sourceEnv: string
}
/**
* Stream returning all the environment variables accessible in
* the current state (Global + The Selected Environment).
* NOTE: The source environment attribute will be "Global" for Global Env as source.
*/
export const aggregateEnvs$ = combineLatest([
currentEnvironment$,
globalEnv$,
]).pipe(
export const aggregateEnvs$: Observable<AggregateEnvironment[]> = combineLatest(
[currentEnvironment$, globalEnv$]
).pipe(
map(([selectedEnv, globalVars]) => {
const results: { key: string; value: string; sourceEnv: string }[] = []
const results: AggregateEnvironment[] = []
selectedEnv.variables.forEach(({ key, value }) =>
results.push({ key, value, sourceEnv: selectedEnv.name })
@@ -309,6 +314,29 @@ export const aggregateEnvs$ = combineLatest([
distinctUntilChanged(isEqual)
)
export function getAggregateEnvs() {
const currentEnv = getCurrentEnvironment()
return [
...currentEnv.variables.map(
(x) =>
<AggregateEnvironment>{
key: x.key,
value: x.value,
sourceEnv: currentEnv.name,
}
),
...getGlobalVariables().map(
(x) =>
<AggregateEnvironment>{
key: x.key,
value: x.value,
sourceEnv: "Global",
}
),
]
}
export function getCurrentEnvironment(): Environment {
if (environmentsStore.value.currentEnvironmentIndex === -1) {
return {

1
packages/hoppscotch-app/package.json
View File

@@ -51,6 +51,7 @@
"@codemirror/search": "^0.19.4",
"@codemirror/state": "^0.19.6",
"@codemirror/text": "^0.19.5",
"@codemirror/tooltip": "^0.19.10",
"@codemirror/view": "^0.19.26",
"@hoppscotch/codemirror-lang-graphql": "workspace:^0.1.0",
"@hoppscotch/data": "workspace:^0.1.0",