Moved text based content lenses to use the mixin

components/lenses/renderers/HTMLLensRenderer.vue

@@ -75,11 +75,13 @@
 </template>
 <script>
 import AceEditor from "../../ui/ace-editor"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
   components: {
     Editor: AceEditor,
   },
+  mixins: [TextContentRendererMixin],
   props: {
     response: {},
   },
@@ -94,9 +96,6 @@ export default {
     }
   },
   computed: {
-    responseBodyText() {
-      return new TextDecoder("utf-8").decode(this.response.body)
-    },
     responseType() {
       return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
     },

components/lenses/renderers/JSONLensRenderer.vue

@@ -39,7 +39,7 @@
       </div>
       <div id="response-details-wrapper">
         <Editor
-          :value="responseBodyText"
+          :value="jsonBodyText"
           :lang="'json'"
           :options="{
             maxLines: responseBodyMaxLines,
@@ -58,11 +58,13 @@
 <script>
 import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
   components: {
     Editor: AceEditor,
   },
+  mixins: [TextContentRendererMixin],
   props: {
     response: {},
   },
@@ -76,16 +78,12 @@ export default {
     }
   },
   computed: {
-    responseBodyText() {
+    jsonBodyText() {
       try {
-        return JSON.stringify(
-          JSON.parse(new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))),
-          null,
-          2
-        )
+        return JSON.stringify(JSON.parse(this.responseBodyText), null, 2)
       } catch (e) {
         // Most probs invalid JSON was returned, so drop prettification (should we warn ?)
-        return new TextDecoder("utf-8").decode(new Uint8Array(this.response.body))
+        return new this.responseBodyText()
       }
     },
     responseType() {

components/lenses/renderers/RawLensRenderer.vue

@@ -58,11 +58,13 @@
 <script>
 import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
   components: {
     Editor: AceEditor,
   },
+  mixins: [TextContentRendererMixin],
   props: {
     response: {},
   },
@@ -73,7 +75,6 @@ export default {
       doneButton: '<i class="material-icons">done</i>',
       downloadButton: '<i class="material-icons">save_alt</i>',
       copyButton: '<i class="material-icons">content_copy</i>',
-      responseBodyText: new TextDecoder("utf-8").decode(new Uint8Array(this.response.body)),
     }
   },
   computed: {

components/lenses/renderers/XMLLensRenderer.vue

@@ -57,11 +57,13 @@
 </template>
 <script>
 import AceEditor from "../../ui/ace-editor"
+import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
   components: {
     Editor: AceEditor,
   },
+  mixins: [TextContentRendererMixin],
   props: {
     response: {},
   },
@@ -75,9 +77,6 @@ export default {
     }
   },
   computed: {
-    responseBodyText() {
-      return new TextDecoder("utf-8").decode(this.response.body)
-    },
     responseType() {
       return (this.response.headers["content-type"] || "").split(";")[0].toLowerCase()
     },