From 915b63db29c79c6c07fe735dba946bce09cbd805 Mon Sep 17 00:00:00 2001
From: Ronald Barendse <ronald@barend.se>
Date: Thu, 9 Nov 2023 06:30:25 +0100
Subject: [PATCH] Fix rendering and parsing new RTE markup object in backoffice
 (#15166)

* Render RTE markup in custom view

* Fix ncRichText filter to support RTE markup object
---
 .../umbBlockGridDemoRichTextBlock.html                     | 4 ++--
 .../src/common/filters/nestedcontent.filter.js             | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Cms.StaticAssets/wwwroot/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoRichTextBlock.html b/src/Umbraco.Cms.StaticAssets/wwwroot/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoRichTextBlock.html
index b3362fcda9..adda418723 100644
--- a/src/Umbraco.Cms.StaticAssets/wwwroot/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoRichTextBlock.html
+++ b/src/Umbraco.Cms.StaticAssets/wwwroot/App_Plugins/Umbraco.BlockGridEditor.DefaultCustomViews/umbBlockGridDemoRichTextBlock.html
@@ -21,5 +21,5 @@
 
 </style>
 
-<div class="text" ng-click="block.edit()" ng-focus="block.focus" ng-bind-html="block.data.richText" style="margin: 0 20px;">
-</div>
\ No newline at end of file
+<div class="text" ng-click="block.edit()" ng-focus="block.focus" ng-bind-html="block.data.richText.markup" style="margin: 0 20px;">
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/nestedcontent.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/nestedcontent.filter.js
index 2d09b521e3..4fc10dbfa3 100644
--- a/src/Umbraco.Web.UI.Client/src/common/filters/nestedcontent.filter.js
+++ b/src/Umbraco.Web.UI.Client/src/common/filters/nestedcontent.filter.js
@@ -1,4 +1,4 @@
-// Filter to take a node id and grab it's name instead
+// Filter to take a node id and grab it's name instead
 // Usage: {{ pickerAlias | ncNodeName }}
 
 // Cache for node names so we don't make a ton of requests
@@ -78,6 +78,9 @@ angular.module("umbraco.filters").filter("ncNodeName", function (editorState, en
 
 }).filter("ncRichText", function () {
   return function (input) {
-    return $("<div/>").html(input).text();
+    // Get markup from RTE object or assume HTML
+    var html = input && Object.hasOwn(input, 'markup') ? input.markup : input;
+
+    return $("<div/>").html(html).text();
   };
 });