refactor: init environment highlighter

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

@@ -33,7 +33,10 @@ 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"
+import {
+  environmentHighlightStyle,
+  environmentTooltip,
+} from "./extensions/environmentTooltip"
 
 type ExtendedEditorConfig = {
   mode: string
@@ -176,6 +179,7 @@ export function useCodemirror(
           baseTheme,
           baseHighlightStyle,
           environmentTooltip,
+          environmentHighlightStyle,
           ViewPlugin.fromClass(
             class {
               update(update: ViewUpdate) {

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

@@ -1,5 +1,14 @@
 import { Extension } from "@codemirror/state"
 import { hoverTooltip } from "@codemirror/tooltip"
+import {
+  Decoration,
+  EditorView,
+  MatchDecorator,
+  PluginField,
+  ViewPlugin,
+  ViewUpdate,
+  WidgetType,
+} from "@codemirror/view"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import { aggregateEnvs$ } from "~/newstore/environments"
 
@@ -11,8 +20,11 @@ const cursorTooltipField = hoverTooltip((view, pos, side) => {
   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)))
+  if (
+    (start === pos && side < 0) ||
+    (end === pos && side > 0) ||
+    !/(<<\w+>>)/g.test(text.slice(start - from - 2, end - from + 2))
+  )
     return null
 
   const aggregateEnvs = useReadonlyStream(aggregateEnvs$, null)
@@ -52,4 +64,39 @@ function getEnvValue(value: string) {
   return "not found"
 }
 
-export const environmentTooltip: Extension = cursorTooltipField
+const environmentDecorator = new MatchDecorator({
+  // eslint-disable-next-line prefer-regex-literals
+  regexp: new RegExp(/(<<\w+>>)/g),
+  decoration: () =>
+    Decoration.replace({
+      widget: new (class extends WidgetType {
+        toDOM(_view: EditorView) {
+          const element = document.createElement("span")
+          element.textContent = "view"
+          return element
+        }
+      })(),
+      inclusive: false,
+    }),
+})
+
+export const environmentHighlightStyle = ViewPlugin.define(
+  (view: EditorView) => ({
+    decorations: environmentDecorator.createDeco(view),
+    update(_update: ViewUpdate) {
+      this.decorations = environmentDecorator.updateDeco(
+        _update,
+        this.decorations
+      )
+    },
+  }),
+  {
+    decorations: (v) => v.decorations,
+    provide: PluginField.atomicRanges.from((v) => v.decorations),
+  }
+)
+
+export const environmentTooltip: Extension = [
+  cursorTooltipField,
+  environmentHighlightStyle,
+]