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")}`)