feat: reactive syntax + line wrap on raw body

components/http/RawBody.vue

@@ -24,6 +24,13 @@
           :title="$t('app.wiki')"
           svg="help-circle"
         />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('action.clear')"
@@ -62,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useContext } from "@nuxtjs/composition-api"
+import { computed, reactive, ref, useContext } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { getEditorLangForMimeType } from "~/helpers/editorutils"
 import { pluckRef } from "~/helpers/utils/composables"
@@ -89,16 +96,21 @@ const prettifyIcon = ref("align-left")
 const rawInputEditorLang = computed(() =>
   getEditorLangForMimeType(props.contentType)
 )
-
+const linewrapEnabled = ref(true)
 const rawBodyParameters = ref<any | null>(null)
 
-useCodemirror(rawBodyParameters, rawParamsBody, {
+useCodemirror(
-  extendedEditorConfig: {
+  rawBodyParameters,
-    mode: rawInputEditorLang.value,
+  rawParamsBody,
-  },
+  reactive({
-  linter: null,
+    extendedEditorConfig: {
-  completer: null,
+      lineWrapping: linewrapEnabled,
-})
+      mode: rawInputEditorLang,
+    },
+    linter: null,
+    completer: null,
+  })
+)
 
 const clearContent = () => {
   rawParamsBody.value = ""