feat: reactive line wrap on codemirror

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -17,6 +17,14 @@
         {{ $t("response.body") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-if="response.body"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
@@ -57,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useContext } from "@nuxtjs/composition-api"
+import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import "codemirror/mode/htmlmixed/htmlmixed"
@@ -94,15 +102,21 @@ const previewFrame = ref<any | null>(null)
 const url = ref("")
 
 const htmlResponse = ref<any | null>(null)
+const linewrapEnabled = ref(true)
 
-useCodemirror(htmlResponse, responseBodyText, {
-  extendedEditorConfig: {
-    mode: "javascript",
-    readOnly: true,
-  },
-  linter: null,
-  completer: null,
-})
+useCodemirror(
+  htmlResponse,
+  responseBodyText,
+  reactive({
+    extendedEditorConfig: {
+      mode: "javascript",
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+  })
+)
 
 const downloadResponse = () => {
   const dataToWrite = responseBodyText.value

components/lenses/renderers/JSONLensRenderer.vue

@@ -17,6 +17,14 @@
         {{ $t("response.body") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-if="response.body"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"
@@ -42,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useContext } from "@nuxtjs/composition-api"
+import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import "codemirror/mode/javascript/javascript"
@@ -85,15 +93,21 @@ const jsonBodyText = computed(() => {
 })
 
 const jsonResponse = ref<any | null>(null)
+const linewrapEnabled = ref(true)
 
-useCodemirror(jsonResponse, jsonBodyText, {
-  extendedEditorConfig: {
-    mode: "javascript",
-    readOnly: true,
-  },
-  linter: null,
-  completer: null,
-})
+useCodemirror(
+  jsonResponse,
+  jsonBodyText,
+  reactive({
+    extendedEditorConfig: {
+      mode: "javascript",
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+  })
+)
 
 const downloadResponse = () => {
   const dataToWrite = responseBodyText.value

components/lenses/renderers/RawLensRenderer.vue

@@ -17,6 +17,14 @@
         {{ $t("response.body") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-if="response.body"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"
@@ -42,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext, computed } from "@nuxtjs/composition-api"
+import { ref, useContext, computed, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import "codemirror/mode/yaml/yaml"
@@ -85,15 +93,21 @@ const responseType = computed(() => {
 })
 
 const rawResponse = ref<any | null>(null)
+const linewrapEnabled = ref(true)
 
-useCodemirror(rawResponse, responseBodyText, {
-  extendedEditorConfig: {
-    mode: "text/x-yaml",
-    readOnly: true,
-  },
-  linter: null,
-  completer: null,
-})
+useCodemirror(
+  rawResponse,
+  responseBodyText,
+  reactive({
+    extendedEditorConfig: {
+      mode: "text/x-yaml",
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+  })
+)
 
 const downloadResponse = () => {
   const dataToWrite = responseBodyText.value

components/lenses/renderers/XMLLensRenderer.vue

@@ -17,6 +17,14 @@
         {{ $t("response.body") }}
       </label>
       <div class="flex">
+        <ButtonSecondary
+          v-if="response.body"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="corner-down-left"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"
@@ -42,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useContext } from "@nuxtjs/composition-api"
+import { computed, ref, useContext, reactive } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import "codemirror/mode/xml/xml"
@@ -85,15 +93,21 @@ const responseType = computed(() => {
 })
 
 const xmlResponse = ref<any | null>(null)
+const linewrapEnabled = ref(true)
 
-useCodemirror(xmlResponse, responseBodyText, {
-  extendedEditorConfig: {
-    mode: "application/xml",
-    readOnly: true,
-  },
-  linter: null,
-  completer: null,
-})
+useCodemirror(
+  xmlResponse,
+  responseBodyText,
+  reactive({
+    extendedEditorConfig: {
+      mode: "application/xml",
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+  })
+)
 
 const downloadResponse = () => {
   const dataToWrite = responseBodyText.value