feat: reactive line wrap on codemirror

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

assets/icons/corner-down-left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 10 4 15 9 20"></polyline><path d="M20 4v7a4 4 0 0 1-4 4H4"></path></svg>

assets/scss/styles.scss

@@ -475,7 +475,7 @@ input[type="checkbox"] {
 }
 
 .CodeMirror-scroll {
-  @apply min-h-32;
+  @apply min-h-64;
 }
 
 @media (max-width: 767px) {

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, {
+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, {
+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, {
+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, {
+useCodemirror(
+  xmlResponse,
+  responseBodyText,
+  reactive({
     extendedEditorConfig: {
       mode: "application/xml",
       readOnly: true,
+      lineWrapping: linewrapEnabled,
     },
     linter: null,
     completer: null,
-})
+  })
+)
 
 const downloadResponse = () => {
   const dataToWrite = responseBodyText.value

locales/en.json

@@ -421,6 +421,7 @@
     "file_imported": "File imported",
     "finished_in": "Finished in {duration}ms",
     "history_deleted": "History deleted",
+    "linewrap": "Wrap lines",
     "loading": "Loading...",
     "none": "None",
     "nothing_found": "Nothing found for",