From edf216ba246f5b1b5a9030f72d1b01621f93cab9 Mon Sep 17 00:00:00 2001
From: Jan Oberhauser <jan.oberhauser@gmail.com>
Date: Sat, 16 Nov 2019 23:36:50 +0100
Subject: [PATCH] :lipstick: Display new line in JSON data

---
 packages/editor-ui/package.json               |  2 +-
 packages/editor-ui/src/components/RunData.vue | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 193e6cf8d8..64361c4890 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -71,7 +71,7 @@
     "typescript": "~3.5.2",
     "vue": "^2.6.9",
     "vue-cli-plugin-webpack-bundle-analyzer": "^1.3.0",
-    "vue-json-pretty": "^1.4.1",
+    "vue-json-viewer": "^2.2.8",
     "vue-prism-editor": "^0.3.0",
     "vue-router": "^3.0.6",
     "vue-template-compiler": "^2.5.17",
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 8e81d5e197..0a2142eb63 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -95,11 +95,12 @@
 								</tr>
 							</table>
 						</div>
-						<vue-json-pretty
+						<json-viewer
 							v-else-if="displayMode === 'JSON'"
 							class="json-data"
-							:data="jsonData">
-						</vue-json-pretty>
+							:value="jsonData"
+							:expand-depth=10
+						></json-viewer>
 					</div>
 					<div v-else-if="displayMode === 'Binary'">
 						<div v-if="binaryData.length === 0" class="no-data">
@@ -162,7 +163,7 @@
 <script lang="ts">
 import Vue from 'vue';
 // @ts-ignore
-import VueJsonPretty from 'vue-json-pretty';
+import JsonViewer from 'vue-json-viewer';
 import {
 	GenericValue,
 	IBinaryData,
@@ -200,7 +201,7 @@ export default mixins(
 		name: 'RunData',
 		components: {
 			BinaryDataDisplay,
-			VueJsonPretty,
+			JsonViewer,
 		},
 		data () {
 			return {
@@ -572,9 +573,11 @@ export default mixins(
 		}
 
 		.json-data {
-			overflow-x: hidden;
-			white-space: initial;
-			word-wrap: break-word;
+			background: none;
+
+			.jv-code {
+				padding: 0;
+			}
 		}
 
 		.error-display,