chore: minor ui improvements

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

@@ -20,6 +20,14 @@
           :icon="IconTrash2"
           @click="clearContent()"
         />
+        <ButtonSecondary
+          v-if="bulkMode"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          :icon="IconWrapText"
+          @click.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.bulk_mode')"
@@ -170,7 +178,8 @@ import IconGripVertical from "~icons/lucide/grip-vertical"
 import IconCheckCircle from "~icons/lucide/check-circle"
 import IconCircle from "~icons/lucide/circle"
 import IconTrash from "~icons/lucide/trash"
-import { Ref, ref, watch } from "vue"
+import IconWrapText from "~icons/lucide/wrap-text"
+import { reactive, Ref, ref, watch } from "vue"
 import { flow, pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
@@ -204,18 +213,24 @@ const idTicker = ref(0)
 const bulkMode = ref(false)
 const bulkParams = ref("")
 const bulkEditor = ref<any | null>(null)
+const linewrapEnabled = ref(true)
 
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
-useCodemirror(bulkEditor, bulkParams, {
-  extendedEditorConfig: {
-    mode: "text/x-yaml",
-    placeholder: `${t("state.bulk_mode_placeholder")}`,
-  },
-  linter,
-  completer: null,
-  environmentHighlights: true,
-})
+useCodemirror(
+  bulkEditor,
+  bulkParams,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/x-yaml",
+      placeholder: `${t("state.bulk_mode_placeholder")}`,
+      lineWrapping: linewrapEnabled,
+    },
+    linter,
+    completer: null,
+    environmentHighlights: true,
+  })
+)
 
 // The functional parameters list (the parameters actually applied to the session)
 const params = useStream(restParams$, [], setRESTParams) as Ref<HoppRESTParam[]>