feat: highlight active line in codemirror when focused

assets/scss/styles.scss

@@ -348,6 +348,7 @@ input[type="checkbox"] {
       @apply justify-start;
       @apply shadow;
       @apply font-medium;
+      @apply transition;
 
       font-size: var(--body-font-size);
       line-height: var(--body-line-height);
@@ -359,7 +360,6 @@ input[type="checkbox"] {
         @apply ml-auto;
         @apply last:ml-4;
         @apply sm:ml-8;
-        @apply transition;
         @apply rounded;
         @apply text-current;
         @apply normal-case;
@@ -466,10 +466,14 @@ input[type="checkbox"] {
   @apply block;
   @apply w-full;
   @apply !h-full;
-}
 
-.CodeMirror * {
-  font-family: "Roboto Mono", monospace;
+  &:not(.CodeMirror-focused) .CodeMirror-activeline-background {
+    background: transparent !important;
+  }
+
+  * {
+    font-family: "Roboto Mono", monospace;
+  }
 }
 
 .CodeMirror-scroll {

components/lenses/HeadersRenderer.vue

@@ -47,7 +47,7 @@
           group-hover:text-secondaryDark
         "
       >
-        <span class="rounded select-all truncate">
+        <span class="rounded-sm select-all truncate">
           {{ header.key }}
         </span>
       </span>
@@ -61,7 +61,7 @@
           group-hover:text-secondaryDark
         "
       >
-        <span class="rounded select-all truncate">
+        <span class="rounded-sm select-all truncate">
           {{ header.value }}
         </span>
       </span>

components/lenses/renderers/RawLensRenderer.vue

@@ -53,7 +53,6 @@
 import { ref, useContext, computed, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import "codemirror/mode/yaml/yaml"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 
 const props = defineProps<{
@@ -100,7 +99,7 @@ useCodemirror(
   responseBodyText,
   reactive({
     extendedEditorConfig: {
-      mode: "text/x-yaml",
+      mode: "text/plain",
       readOnly: true,
       lineWrapping: linewrapEnabled,
     },

components/smart/EnvInput.vue

@@ -501,7 +501,6 @@ export default defineComponent({
   @apply overflow-y-hidden;
   @apply resize-none;
   @apply focus:outline-none;
-  @apply transition;
 }
 
 .env-input::-webkit-scrollbar {

helpers/editor/codemirror.ts

@@ -23,6 +23,7 @@ import "codemirror/addon/search/search"
 import "codemirror/addon/search/searchcursor"
 import "codemirror/addon/search/jump-to-line"
 import "codemirror/addon/dialog/dialog"
+import "codemirror/addon/selection/active-line"
 
 import { watch, onMounted, ref, Ref, useContext } from "@nuxtjs/composition-api"
 import { LinterDefinition } from "./linting/linter"
@@ -45,6 +46,7 @@ const DEFAULT_EDITOR_CONFIG: CodeMirror.EditorConfiguration = {
     "Ctrl-Space": "autocomplete",
   },
   viewportMargin: Infinity,
+  styleActiveLine: true,
 }
 
 /**