From 4c638565b74228ebb27fbb0b08b06b15fbfcf77a Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Fri, 19 Oct 2018 09:41:52 +0200
Subject: [PATCH] special treatment for property editors which store the value
 as json

---
 .../utilities/typography/_white-space.less     |  1 +
 .../rollback/rollback.controller.js            | 18 +++++++++++++++++-
 .../infiniteeditors/rollback/rollback.html     |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/typography/_white-space.less b/src/Umbraco.Web.UI.Client/src/less/utilities/typography/_white-space.less
index b8fb5ca5db..fea8b114b8 100644
--- a/src/Umbraco.Web.UI.Client/src/less/utilities/typography/_white-space.less
+++ b/src/Umbraco.Web.UI.Client/src/less/utilities/typography/_white-space.less
@@ -7,6 +7,7 @@
 .ws-normal { white-space: normal; }
 .nowrap { white-space: nowrap; }
 .pre { white-space: pre; }
+.pre-wrap { white-space: pre-wrap; }
 
 .truncate {
   white-space: nowrap;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/rollback/rollback.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/rollback/rollback.controller.js
index eac4fab8a7..6b8462b583 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/rollback/rollback.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/rollback/rollback.controller.js
@@ -111,12 +111,28 @@
             currentVersion.tabs.forEach((tab, tabIndex) => {
                 tab.properties.forEach((property, propertyIndex) => {
                     var oldProperty = previousVersion.tabs[tabIndex].properties[propertyIndex];
+
+                    // we have to make properties storing values as object into strings (Grid, nested content, etc.)
+                    if(property.value instanceof Object) {
+                        property.value = JSON.stringify(property.value, null, 1);
+                        property.isObject = true;
+                    }
+
+                    if(oldProperty.value instanceof Object) {
+                        oldProperty.value = JSON.stringify(oldProperty.value, null, 1);
+                        oldProperty.isObject = true;
+                    }
+
+                    // create new property object used in the diff table
                     var diffProperty = {
                         "alias": property.alias,
                         "label": property.label,
-                        "diff": JsDiff.diffWords(property.value, oldProperty.value)
+                        "diff": (property.value || oldProperty.value) ? JsDiff.diffWords(property.value, oldProperty.value) : "",
+                        "isObject": (property.isObject || oldProperty.isObject) ? true : false
                     };
+
                     vm.diff.properties.push(diffProperty);
+
                 });
             });
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/rollback/rollback.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/rollback/rollback.html
index 6758f1df9b..fc74479955 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/rollback/rollback.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/rollback/rollback.html
@@ -63,7 +63,7 @@
                                 </tr>
                                 <tr ng-repeat="property in vm.diff.properties track by property.alias">
                                     <td class="bold">{{property.label}}</td>
-                                    <td>
+                                    <td ng-class="{'pre-wrap': property.isObject}">
                                         <span ng-repeat="part in property.diff">
                                             <ins ng-if="part.added">{{part.value}}</ins>
                                             <del ng-if="part.removed">{{part.value}}</del>