feat: init environment variables tooltip for codemirror

packages/hoppscotch-app/assets/scss/styles.scss

@@ -136,44 +136,43 @@ a {
   }
 }
 
-.tippy-popper {
+.tooltip-theme {
-  .tooltip-theme {
+  @apply bg-tooltip;
-    @apply bg-tooltip;
+  @apply text-primary;
-    @apply text-primary;
+  @apply font-semibold;
-    @apply font-semibold;
+  @apply py-1 px-2;
-    @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 {
+.popover-theme {
-    @apply bg-popover;
+  @apply bg-popover;
-    @apply text-secondary;
+  @apply text-secondary;
-    @apply p-2;
+  @apply p-2;
-    @apply shadow-lg;
+  @apply shadow-lg;
-    @apply focus:outline-none;
+  @apply focus:outline-none;
 
-    font-size: var(--body-font-size);
+  font-size: var(--body-font-size);
-    line-height: var(--body-line-height);
+  line-height: var(--body-line-height);
 
-    .tippy-roundarrow svg {
+  .tippy-roundarrow svg {
-      @apply fill-popover;
+    @apply fill-popover;
-    }
   }
 }
 

packages/hoppscotch-app/helpers/editor/codemirror.ts

@@ -33,6 +33,7 @@ import { isJSONContentType } from "../utils/contenttypes"
 import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
 import { basicSetup, baseTheme, baseHighlightStyle } from "./themes/baseTheme"
+import { environmentTooltip } from "./extensions/environmentTooltip"
 
 type ExtendedEditorConfig = {
   mode: string
@@ -174,6 +175,7 @@ export function useCodemirror(
           basicSetup,
           baseTheme,
           baseHighlightStyle,
+          environmentTooltip,
           ViewPlugin.fromClass(
             class {
               update(update: ViewUpdate) {

packages/hoppscotch-app/helpers/editor/extensions/environmentTooltip.ts

@@ -0,0 +1,55 @@
+import { Extension } from "@codemirror/state"
+import { hoverTooltip } from "@codemirror/tooltip"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { aggregateEnvs$ } from "~/newstore/environments"
+
+const cursorTooltipField = hoverTooltip((view, pos, side) => {
+  const { from, to, text } = view.state.doc.lineAt(pos)
+  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)) return null
+  if (!/(<<\w+>>)/g.test(text.slice(start - from - 2, end - from + 2)))
+    return null
+
+  const aggregateEnvs = useReadonlyStream(aggregateEnvs$, null)
+  const envName = getEnvName(
+    aggregateEnvs.value?.find(
+      (env: { key: string }) => env.key === text.slice(start - from, end - from)
+    )?.sourceEnv
+  )
+  const envValue = getEnvValue(
+    aggregateEnvs.value?.find(
+      (env: { key: string }) => env.key === text.slice(start - from, end - from)
+    )?.value
+  )
+  const textContent = `${envName} <kbd>${envValue}</kbd>`
+
+  return {
+    pos: start,
+    end,
+    above: true,
+    create() {
+      const dom = document.createElement("span")
+      dom.innerHTML = textContent
+      dom.className = "tooltip-theme"
+      return { dom }
+    },
+  }
+})
+
+function getEnvName(name: any) {
+  if (name) return name
+  return "choose an environment"
+}
+
+function getEnvValue(value: string) {
+  if (value) return value.replace(/"/g, "&quot;")
+  // it does not filter special characters before adding them to HTML.
+  return "not found"
+}
+
+export const environmentTooltip: Extension = cursorTooltipField

packages/hoppscotch-app/package.json

@@ -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",