fix: bind key-value with bulk editor at startup. (#1936)

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

@@ -397,15 +397,15 @@ const editBulkHeadersLine = (
     active: boolean
   }
 ) => {
-  const headers = bulkHeaders.value.split("\n")
-  if (item !== null)
-    headers.splice(
-      index,
-      1,
-      `${item.active ? "" : "//"}${item.key}: ${item.value}`
-    )
-  else headers.splice(index, 1)
-  bulkHeaders.value = headers.join("\n")
+  bulkHeaders.value = headers.value
+    .reduce((all, header, pIndex) => {
+      const current =
+        index === pIndex && item !== null
+          ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
+          : `${header.active ? "" : "//"}${header.key}: ${header.value}`
+      return [...all, current]
+    }, [])
+    .join("\n")
 }
 
 const clearBulkEditor = () => {

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

@@ -170,7 +170,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext, watch } from "@nuxtjs/composition-api"
+import { ref, useContext, watch, onMounted } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
   addRESTHeader,
@@ -221,16 +221,20 @@ watch(bulkHeaders, () => {
 
 const headers$ = useReadonlyStream(restHeaders$, [])
 
-const editBulkHeadersLine = (index: number, item?: HoppRESTHeader) => {
-  const headers = bulkHeaders.value.split("\n")
-  if (item !== null)
-    headers.splice(
-      index,
-      1,
-      `${item.active ? "" : "//"}${item.key}: ${item.value}`
-    )
-  else headers.splice(index, 1)
-  bulkHeaders.value = headers.join("\n")
+onMounted(() => editBulkHeadersLine(-1, null))
+
+const editBulkHeadersLine = (index: number, item?: HoppRESTParam) => {
+  const headers = headers$.value
+
+  bulkHeaders.value = headers
+    .reduce((all, header, pIndex) => {
+      const current =
+        index === pIndex && item !== null
+          ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
+          : `${header.active ? "" : "//"}${header.key}: ${header.value}`
+      return [...all, current]
+    }, [])
+    .join("\n")
 }
 
 const clearBulkEditor = () => {

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

@@ -163,7 +163,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext, watch } from "@nuxtjs/composition-api"
+import { ref, useContext, watch, onMounted } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { HoppRESTParam } from "~/helpers/types/HoppRESTRequest"
 import { useReadonlyStream } from "~/helpers/utils/composables"
@@ -215,18 +215,20 @@ useCodemirror(bulkEditor, bulkParams, {
 
 const params$ = useReadonlyStream(restParams$, [])
 
+onMounted(() => editBulkParamsLine(-1, null))
+
 const editBulkParamsLine = (index: number, item?: HoppRESTParam) => {
-  const params = bulkParams.value.split("\n")
+  const params = params$.value
 
-  if (item !== null)
-    params.splice(
-      index,
-      1,
-      `${item.active ? "" : "//"}${item.key}: ${item.value}`
-    )
-  else params.splice(index, 1)
-
-  bulkParams.value = params.join("\n")
+  bulkParams.value = params
+    .reduce((all, param, pIndex) => {
+      const current =
+        index === pIndex && item !== null
+          ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
+          : `${param.active ? "" : "//"}${param.key}: ${param.value}`
+      return [...all, current]
+    }, [])
+    .join("\n")
 }
 
 const clearBulkEditor = () => {