chore: environment highlight colour schema update (#4464)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>

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

@@ -560,9 +560,24 @@ details[open] summary .indicator {
   }
 }
 
-.env-highlight {
-  @apply text-accentContrast;
+.env-highlight,
+.predefined-variable-highlight {
+  // forcing the text colour to be white inside a higlighted environment variable and predefined variable
+  @apply text-accentContrast #{!important};
+  span {
+    @apply text-accentContrast #{!important};
+  }
 
+  // setting the text colour to be visible when it's selected and common item is highlighted
+  .cm-selectionMatch {
+    @apply text-secondaryDark #{!important};
+    span {
+      @apply text-secondaryDark #{!important};
+    }
+  }
+}
+
+.env-highlight {
   &.request-variable-highlight {
     @apply bg-amber-500;
     @apply hover:bg-amber-600;
@@ -584,6 +599,18 @@ details[open] summary .indicator {
   }
 }
 
+.predefined-variable-highlight {
+  &.predefined-variable-valid {
+    @apply bg-yellow-500;
+    @apply hover:bg-yellow-600;
+  }
+
+  &.predefined-variable-invalid {
+    @apply hover:bg-red-300;
+    @apply bg-red-300;
+  }
+}
+
 #nprogress .bar {
   @apply bg-accent #{!important};
 }
@@ -609,17 +636,3 @@ details[open] summary .indicator {
 .gql-operation-highlight {
   @apply opacity-100;
 }
-
-.predefined-variable-highlight {
-  color: inherit;
-
-  &.predefined-variable-valid {
-    @apply bg-yellow-500;
-    @apply hover:bg-yellow-600;
-  }
-
-  &.predefined-variable-invalid {
-    @apply hover:bg-red-300;
-    @apply bg-red-300;
-  }
-}

packages/hoppscotch-common/src/components.d.ts

@@ -183,8 +183,10 @@ declare module 'vue' {
     IconLucideLayers: typeof import('~icons/lucide/layers')['default']
     IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
     IconLucideMinus: typeof import('~icons/lucide/minus')['default']
+    IconLucideRss: typeof import('~icons/lucide/rss')['default']
     IconLucideSearch: typeof import('~icons/lucide/search')['default']
     IconLucideUsers: typeof import('~icons/lucide/users')['default']
+    IconLucideVerified: typeof import('~icons/lucide/verified')['default']
     IconLucideX: typeof import('~icons/lucide/x')['default']
     ImportExportBase: typeof import('./components/importExport/Base.vue')['default']
     ImportExportImportExportList: typeof import('./components/importExport/ImportExportList.vue')['default']

packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -1,4 +1,3 @@
-import { watch, Ref } from "vue"
 import { Compartment } from "@codemirror/state"
 import {
   Decoration,
@@ -7,9 +6,13 @@ import {
   ViewPlugin,
   hoverTooltip,
 } from "@codemirror/view"
-import * as E from "fp-ts/Either"
-import { parseTemplateStringE } from "@hoppscotch/data"
 import { StreamSubscriberFunc } from "@composables/stream"
+import { parseTemplateStringE } from "@hoppscotch/data"
+import * as E from "fp-ts/Either"
+import { Ref, watch } from "vue"
+
+import { invokeAction } from "~/helpers/actions"
+import { getService } from "~/modules/dioc"
 import {
   AggregateEnvironment,
   aggregateEnvsWithSecrets$,
@@ -17,13 +20,12 @@ import {
   getCurrentEnvironment,
   getSelectedEnvironmentType,
 } from "~/newstore/environments"
-import { invokeAction } from "~/helpers/actions"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
+import { RESTTabService } from "~/services/tab/rest"
+import IconEdit from "~icons/lucide/edit?raw"
 import IconUser from "~icons/lucide/user?raw"
 import IconUsers from "~icons/lucide/users?raw"
-import IconEdit from "~icons/lucide/edit?raw"
-import { SecretEnvironmentService } from "~/services/secret-environment.service"
-import { getService } from "~/modules/dioc"
-import { RESTTabService } from "~/services/tab/rest"
+import { isComment } from "./helpers"
 
 const HOPP_ENVIRONMENT_REGEX = /(<<[a-zA-Z0-9-_]+>>)/g
 
@@ -66,6 +68,10 @@ const filterNonEmptyEnvironmentVariables = (
 const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
   hoverTooltip(
     (view, pos, side) => {
+      // Check if the current position is inside a comment then disable the tooltip
+      if (isComment(view.state, pos)) {
+        return null
+      }
       const { from, to, text } = view.state.doc.lineAt(pos)
 
       // TODO: When Codemirror 6 allows this to work (not make the
@@ -163,7 +169,10 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
             invokeActionType = "modals.my.environment.edit"
           }
 
-          if (tooltipEnv?.sourceEnv === "RequestVariable") {
+          if (
+            tooltipEnv?.sourceEnv === "RequestVariable" &&
+            restTabs.currentActiveTab.value.document.type === "request"
+          ) {
             restTabs.currentActiveTab.value.document.optionTabPreference =
               "requestVariables"
           } else {
@@ -229,7 +238,13 @@ function checkEnv(env: string, aggregateEnvs: AggregateEnvironment[]) {
 const getMatchDecorator = (aggregateEnvs: AggregateEnvironment[]) =>
   new MatchDecorator({
     regexp: HOPP_ENVIRONMENT_REGEX,
-    decoration: (m) => checkEnv(m[0], aggregateEnvs),
+    decoration: (m, view, pos) => {
+      // Check if the current position is inside a comment then disable the highlight
+      if (isComment(view.state, pos)) {
+        return null
+      }
+      return checkEnv(m[0], aggregateEnvs)
+    },
   })
 
 export const environmentHighlightStyle = (

packages/hoppscotch-common/src/helpers/editor/extensions/HoppPredefinedVariables.ts

@@ -5,9 +5,11 @@ import {
   ViewPlugin,
   hoverTooltip,
 } from "@codemirror/view"
-import IconSquareAsterisk from "~icons/lucide/square-asterisk?raw"
 import { HOPP_SUPPORTED_PREDEFINED_VARIABLES } from "@hoppscotch/data"
 
+import IconSquareAsterisk from "~icons/lucide/square-asterisk?raw"
+import { isComment } from "./helpers"
+
 const HOPP_PREDEFINED_VARIABLES_REGEX = /(<<\$[a-zA-Z0-9-_]+>>)/g
 
 const HOPP_PREDEFINED_VARIABLE_HIGHLIGHT =
@@ -18,13 +20,23 @@ const HOPP_PREDEFINED_VARIABLE_HIGHLIGHT_INVALID = "predefined-variable-invalid"
 const getMatchDecorator = () => {
   return new MatchDecorator({
     regexp: HOPP_PREDEFINED_VARIABLES_REGEX,
-    decoration: (m) => checkPredefinedVariable(m[0]),
+    decoration: (m, view, pos) => {
+      // Don't highlight if the cursor is inside a comment
+      if (isComment(view.state, pos)) {
+        return null
+      }
+      return checkPredefinedVariable(m[0])
+    },
   })
 }
 
 const cursorTooltipField = () =>
   hoverTooltip(
     (view, pos, side) => {
+      // Don't show tooltip if the cursor is inside a comment
+      if (isComment(view.state, pos)) {
+        return null
+      }
       const { from, to, text } = view.state.doc.lineAt(pos)
 
       // TODO: When Codemirror 6 allows this to work (not make the

packages/hoppscotch-common/src/helpers/editor/extensions/helpers.ts

@@ -0,0 +1,14 @@
+import { syntaxTree } from "@codemirror/language"
+import { EditorState } from "@codemirror/state"
+
+/**
+ * Check if the cursor is inside a comment
+ * @param state Editor state
+ * @param pos Position of the cursor
+ * @return Boolean value indicating if the cursor is inside a comment
+ */
+export const isComment = (state: EditorState, pos: number) => {
+  const tree = syntaxTree(state)
+  const { name } = tree.resolveInner(pos)
+  return name.endsWith("Comment") || name.endsWith("comment")
+}

packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts

@@ -377,7 +377,10 @@ export const baseHighlightStyle = HighlightStyle.define([
     ],
     color: editorOperatorColor,
   },
-  { tag: [t.meta, t.comment], color: editorMetaColor },
+  {
+    tag: [t.meta, t.comment],
+    color: editorMetaColor,
+  },
   { tag: t.strong, fontWeight: "bold" },
   { tag: t.emphasis, fontStyle: "italic" },
   { tag: t.strikethrough, textDecoration: "line-through" },