From c6c08f6c60331085cac4c0d9c0527bd3a754c468 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Thu, 9 Sep 2021 20:50:04 +0530
Subject: [PATCH] feat: reactive line wrap on codemirror

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 assets/icons/corner-down-left.svg             |  1 +
 assets/scss/styles.scss                       |  2 +-
 .../lenses/renderers/HTMLLensRenderer.vue     | 32 +++++++++++++------
 .../lenses/renderers/JSONLensRenderer.vue     | 32 +++++++++++++------
 .../lenses/renderers/RawLensRenderer.vue      | 32 +++++++++++++------
 .../lenses/renderers/XMLLensRenderer.vue      | 32 +++++++++++++------
 locales/en.json                               |  1 +
 7 files changed, 95 insertions(+), 37 deletions(-)
 create mode 100644 assets/icons/corner-down-left.svg

diff --git a/assets/icons/corner-down-left.svg b/assets/icons/corner-down-left.svg
new file mode 100644
index 000000000..7a8b7473a
--- /dev/null
+++ b/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>
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index b253cd68d..8b826e2e2 100644
--- a/assets/scss/styles.scss
+++ b/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) {
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index f3a751de4..d7f1044c0 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/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
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index c1ea9347d..ff8c11201 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/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
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index ec5b015aa..51573bba9 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/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
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 11a6463a6..9bcd53d07 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/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
diff --git a/locales/en.json b/locales/en.json
index a8f11b80c..8af61b8b7 100644
--- a/locales/en.json
+++ b/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",