special treatment for property editors which store the value as json

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;

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);
+
                 });
             });
 

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>