feat: linting for raw key value lang editors

packages/hoppscotch-app/components/http/Headers.vue

@@ -148,6 +148,7 @@ import { useCodemirror } from "~/helpers/editor/codemirror"
 import { restHeaders$, setRESTHeaders } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
 import { useI18n, useStream, useToast } from "~/helpers/utils/composables"
+import linter from "~/helpers/editor/linting/rawKeyValue"
 
 const t = useI18n()
 const toast = useToast()
@@ -163,7 +164,7 @@ useCodemirror(bulkEditor, bulkHeaders, {
     mode: "text/x-yaml",
     placeholder: `${t("state.bulk_mode_placeholder")}`,
   },
-  linter: null,
+  linter,
   completer: null,
   environmentHighlights: true,
 })

packages/hoppscotch-app/components/http/Parameters.vue

@@ -132,6 +132,7 @@ import { ref, watch } from "@nuxtjs/composition-api"
 import { HoppRESTParam } from "@hoppscotch/data"
 import isEqual from "lodash/isEqual"
 import clone from "lodash/clone"
+import linter from "~/helpers/editor/linting/rawKeyValue"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { useI18n, useToast, useStream } from "~/helpers/utils/composables"
 import { restParams$, setRESTParams } from "~/newstore/RESTSession"
@@ -152,7 +153,7 @@ useCodemirror(bulkEditor, bulkParams, {
     mode: "text/x-yaml",
     placeholder: `${t("state.bulk_mode_placeholder")}`,
   },
-  linter: null,
+  linter,
   completer: null,
   environmentHighlights: true,
 })

packages/hoppscotch-app/components/http/URLEncodedParams.vue

@@ -138,6 +138,7 @@ import {
   RawKeyValueEntry,
 } from "@hoppscotch/data"
 import { useCodemirror } from "~/helpers/editor/codemirror"
+import linter from "~/helpers/editor/linting/rawKeyValue"
 import { useRESTRequestBody } from "~/newstore/RESTSession"
 import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
 
@@ -155,7 +156,7 @@ useCodemirror(bulkEditor, bulkUrlEncodedParams, {
     mode: "text/x-yaml",
     placeholder: `${t("state.bulk_mode_placeholder")}`,
   },
-  linter: null,
+  linter,
   completer: null,
   environmentHighlights: true,
 })

packages/hoppscotch-app/helpers/editor/linting/rawKeyValue.ts

@@ -0,0 +1,24 @@
+import * as E from "fp-ts/Either"
+import { strictParseRawKeyValueEntriesE } from "@hoppscotch/data"
+import { convertIndexToLineCh } from "../utils"
+import { LinterDefinition, LinterResult } from "./linter"
+
+const linter: LinterDefinition = (text) => {
+  const result = strictParseRawKeyValueEntriesE(text)
+  if (E.isLeft(result)) {
+    const pos = convertIndexToLineCh(text, result.left.pos + 1)
+
+    return Promise.resolve([
+      <LinterResult>{
+        from: pos,
+        to: pos,
+        message: result.left.message,
+        severity: "error",
+      },
+    ])
+  } else {
+    return Promise.resolve([])
+  }
+}
+
+export default linter