fix: spacing and corrections for commented lines in raw key value

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -270,7 +270,16 @@
 import { Ref, computed, reactive, ref, watch } from "@nuxtjs/composition-api"
 import clone from "lodash/clone"
 import * as gql from "graphql"
-import { GQLHeader, makeGQLRequest } from "@hoppscotch/data"
+import * as E from "fp-ts/Either"
+import * as RA from "fp-ts/ReadonlyArray"
+import { pipe } from "fp-ts/function"
+import {
+  GQLHeader,
+  makeGQLRequest,
+  rawKeyValueEntriesToString,
+  parseRawKeyValueEntriesE,
+  RawKeyValueEntry,
+} from "@hoppscotch/data"
 import isEqual from "lodash/isEqual"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
@@ -384,14 +393,12 @@ watch(workingHeaders, (newWorkingHeaders) => {
 // Bulk Editor Syncing with Working Headers
 watch(bulkHeaders, () => {
   try {
-    const transformation = bulkHeaders.value
-      .split("\n")
-      .filter((x) => x.trim().length > 0 && x.includes(":"))
-      .map((item) => ({
-        key: item.substring(0, item.indexOf(":")).trimLeft().replace(/^#/, ""),
-        value: item.substring(item.indexOf(":") + 1).trimLeft(),
-        active: !item.trim().startsWith("#"),
-      }))
+    const transformation = pipe(
+      bulkHeaders.value,
+      parseRawKeyValueEntriesE,
+      E.map(RA.toArray),
+      E.getOrElse(() => [] as RawKeyValueEntry[])
+    )
 
     const filteredHeaders = workingHeaders.value.filter((x) => x.key !== "")
 
@@ -418,11 +425,7 @@ watch(workingHeaders, (newHeadersList) => {
     const filteredHeaders = newHeadersList.filter((x) => x.key !== "")
 
     if (!isEqual(currentBulkHeaders, filteredHeaders)) {
-      bulkHeaders.value = filteredHeaders
-        .map((header) => {
-          return `${header.active ? "" : "#"}${header.key}: ${header.value}`
-        })
-        .join("\n")
+      bulkHeaders.value = rawKeyValueEntriesToString(filteredHeaders)
     }
   } catch (e) {
     toast.error(`${t("error.something_went_wrong")}`)

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

@@ -143,7 +143,15 @@
 import { Ref, ref, watch } from "@nuxtjs/composition-api"
 import isEqual from "lodash/isEqual"
 import clone from "lodash/clone"
-import { HoppRESTHeader } from "@hoppscotch/data"
+import {
+  HoppRESTHeader,
+  parseRawKeyValueEntriesE,
+  rawKeyValueEntriesToString,
+  RawKeyValueEntry,
+} from "@hoppscotch/data"
+import { pipe } from "fp-ts/function"
+import * as RA from "fp-ts/ReadonlyArray"
+import * as E from "fp-ts/Either"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { restHeaders$, setRESTHeaders } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
@@ -223,14 +231,12 @@ watch(workingHeaders, (newWorkingHeaders) => {
 // Bulk Editor Syncing with Working Headers
 watch(bulkHeaders, () => {
   try {
-    const transformation = bulkHeaders.value
-      .split("\n")
-      .filter((x) => x.trim().length > 0 && x.includes(":"))
-      .map((item) => ({
-        key: item.substring(0, item.indexOf(":")).trimLeft().replace(/^#/, ""),
-        value: item.substring(item.indexOf(":") + 1).trimLeft(),
-        active: !item.trim().startsWith("#"),
-      }))
+    const transformation = pipe(
+      bulkHeaders.value,
+      parseRawKeyValueEntriesE,
+      E.map(RA.toArray),
+      E.getOrElse(() => [] as RawKeyValueEntry[])
+    )
 
     const filteredHeaders = workingHeaders.value.filter((x) => x.key !== "")
 
@@ -257,11 +263,7 @@ watch(workingHeaders, (newHeadersList) => {
     const filteredHeaders = newHeadersList.filter((x) => x.key !== "")
 
     if (!isEqual(currentBulkHeaders, filteredHeaders)) {
-      bulkHeaders.value = filteredHeaders
-        .map((header) => {
-          return `${header.active ? "" : "#"}${header.key}: ${header.value}`
-        })
-        .join("\n")
+      bulkHeaders.value = rawKeyValueEntriesToString(filteredHeaders)
     }
   } catch (e) {
     toast.error(`${t("error.something_went_wrong")}`)

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

@@ -129,7 +129,15 @@
 
 <script setup lang="ts">
 import { ref, watch } from "@nuxtjs/composition-api"
-import { HoppRESTParam } from "@hoppscotch/data"
+import { pipe } from "fp-ts/function"
+import * as RA from "fp-ts/ReadonlyArray"
+import * as E from "fp-ts/Either"
+import {
+  HoppRESTParam,
+  parseRawKeyValueEntriesE,
+  rawKeyValueEntriesToString,
+  RawKeyValueEntry,
+} from "@hoppscotch/data"
 import isEqual from "lodash/isEqual"
 import clone from "lodash/clone"
 import linter from "~/helpers/editor/linting/rawKeyValue"
@@ -207,14 +215,12 @@ watch(workingParams, (newWorkingParams) => {
 // Bulk Editor Syncing with Working Params
 watch(bulkParams, () => {
   try {
-    const transformation = bulkParams.value
-      .split("\n")
-      .filter((x) => x.trim().length > 0 && x.includes(":"))
-      .map((item) => ({
-        key: item.substring(0, item.indexOf(":")).trimLeft().replace(/^#/, ""),
-        value: item.substring(item.indexOf(":") + 1).trimLeft(),
-        active: !item.trim().startsWith("#"),
-      }))
+    const transformation = pipe(
+      bulkParams.value,
+      parseRawKeyValueEntriesE,
+      E.map(RA.toArray),
+      E.getOrElse(() => [] as RawKeyValueEntry[])
+    )
 
     const filteredParams = workingParams.value.filter((x) => x.key !== "")
 
@@ -241,11 +247,7 @@ watch(workingParams, (newParamsList) => {
     const filteredParams = newParamsList.filter((x) => x.key !== "")
 
     if (!isEqual(currentBulkParams, filteredParams)) {
-      bulkParams.value = filteredParams
-        .map((param) => {
-          return `${param.active ? "" : "#"}${param.key}: ${param.value}`
-        })
-        .join("\n")
+      bulkParams.value = rawKeyValueEntriesToString(filteredParams)
     }
   } catch (e) {
     toast.error(`${t("error.something_went_wrong")}`)

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

@@ -134,9 +134,13 @@ import clone from "lodash/clone"
 import {
   HoppRESTReqBody,
   parseRawKeyValueEntries,
+  parseRawKeyValueEntriesE,
   rawKeyValueEntriesToString,
   RawKeyValueEntry,
 } from "@hoppscotch/data"
+import { pipe } from "fp-ts/function"
+import * as RA from "fp-ts/ReadonlyArray"
+import * as E from "fp-ts/Either"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import linter from "~/helpers/editor/linting/rawKeyValue"
 import { useRESTRequestBody } from "~/newstore/RESTSession"
@@ -227,14 +231,12 @@ watch(workingUrlEncodedParams, (newWorkingUrlEncodedParams) => {
 // Bulk Editor Syncing with Working urlEncodedParams
 watch(bulkUrlEncodedParams, () => {
   try {
-    const transformation = bulkUrlEncodedParams.value
-      .split("\n")
-      .filter((x) => x.trim().length > 0 && x.includes(":"))
-      .map((item) => ({
-        key: item.substring(0, item.indexOf(":")).trimLeft().replace(/^#/, ""),
-        value: item.substring(item.indexOf(":") + 1).trimLeft(),
-        active: !item.trim().startsWith("#"),
-      }))
+    const transformation = pipe(
+      bulkUrlEncodedParams.value,
+      parseRawKeyValueEntriesE,
+      E.map(RA.toArray),
+      E.getOrElse(() => [] as RawKeyValueEntry[])
+    )
 
     const filteredUrlEncodedParams = workingUrlEncodedParams.value.filter(
       (x) => x.key !== ""
@@ -266,11 +268,9 @@ watch(workingUrlEncodedParams, (newurlEncodedParamList) => {
     )
 
     if (!isEqual(currentBulkUrlEncodedParams, filteredUrlEncodedParams)) {
-      bulkUrlEncodedParams.value = filteredUrlEncodedParams
-        .map((param) => {
-          return `${param.active ? "" : "#"}${param.key}: ${param.value}`
-        })
-        .join("\n")
+      bulkUrlEncodedParams.value = rawKeyValueEntriesToString(
+        filteredUrlEncodedParams
+      )
     }
   } catch (e) {
     toast.error(`${t("error.something_went_wrong")}`)

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

@@ -6,7 +6,7 @@ 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)
+    const pos = convertIndexToLineCh(text, result.left.pos)
 
     return Promise.resolve([
       <LinterResult>{

packages/hoppscotch-data/src/rawKeyValue.ts

@@ -67,7 +67,7 @@ const lineWithNoColon = pipe(
 )
 
 const file = pipe(
-  P.manyTill(line, P.eof()),
+  P.manyTill(wsSurround(line), P.eof()),
 )
 
 /**