HTML Support for Experience Editor Info Notifications

Question

I'm trying to add simple html such as bullets, underline, bold inside an Custom Experience Editor Notification.

I have followed the example outlined by Marek Below (and looked at many other examples too):

How to provide custom info messages in Sitecore Preview Mode

My custom GetPageEditorNotificationsProcessor pipeline is firing and adding my custom messages and my custom WebEditRibbonForm class is loading when I attach a breakpoint to the OnLoad() method. My RenderNotification() method (which contains my changes) runs and I can see my changes reflected on this line in the RenderNotifications() method:

 this.Notifications.InnerHtml = output.InnerWriter.ToString();

However when I look on the front-end in experience editor my changes are not present. All the text and html set in my custom WebEditRibbonForm class just doesn't show up. The html I try and set from my custom GetPageEditorNotificationsProcessor pipeline is there but it is rendered as text (as seen below). I want to show this as html so that is why I've trying to over-ride the WebEditRibbonForm method to handle this.

I can see that PageEditorNotificationOption items are rendered as links so it is possible to support html somehow but It's not working for me.

One other thing I noticed is that the markup for the message is like so:

<div class="sc-messageBar-messageText-container">

Yet this doesn't match up with the markup in my pipeline which is like so:

<div class="scPageEditorNotification">

This suggest that perhaps some js such as that in MessageBar.js and the knockout view of MessageBar.cshtml is being used instead (as that markup matches) but when I try and edit these files I am seeing no changes in Experience Editor either. Very confusing.

Further info: Sitecore 8.2 update 7

Answer 1

If we combine what @nsgocev wrote in his comment and what I wrote in mine, we have the following answer:

• create a duplicate of /sitecore/shell/client/Business Component Library/Layouts/Renderings/Common/MessageBars/MessageBar.cshtml file and change the text: binding to html: binding in every line containing data-bind="text: text, attr: { title: text }"
• find the /sitecore/client/Business Component Library/version 1/Layouts/Renderings/Common/MessageBar
• update the path field to the path of the duplicated file
• as Speak is heavily cached, always create a copy of cshtml file and update the path, otherwise it may not work
• and proof that it's working (thanks to @nsgocev): https://www.screencast.com/t/rlDkWp2u