Episerver pagetree search shows encoded html entities after upgrading to the new UI

Oct 28, 2019: Episerver released a fix for CMS-14615 in update 287. The problem described by this blogpost has now been solved.

Episerver first released their new refreshed editor ui with version 11.21.0 of Episerver.CMS.UI in June. Due to unintended semantic breaking changes this was (pretty silently) removed from the public nuget feed after a few days.

Weeks, and months, has passed. The refreshed ui has been released (again) and after numerous bug fixes, I finally agreed to update the website for a customer eager to try the new stuff.

The first thing I noticed was that Episerver Find still uses the old navigation, even though the update should be quite simple, and Episerver even has a blog post describing how to do it. OK, we can live with two versions of the same menu, until they fix it.

Another problem did arise that our customer could not accept. I’ll reproduce in Alloy. Initially using Episerver.CMS.UI 11.19.1 the search box above the page tree looks good, even with those strange Norwegian letters.

After upgrading to Episerver.CMS.UI 11.21.5 those strange looking Norwegian letters are replaced with even stranger looking html entities!

To our customer that was a huge issue. Episerver has registered this as a private bug (CMS-14615), and could share no information on when it will be fixed.

By adding a SearchProvider inheriting from EnterprisePageSearchProvider and decorating it with the [SearchProvider] attribute, we should be able to fix this.

[SearchProvider]
public class CustomPageSearchProvider : EnterprisePageSearchProvider
{
    public override IEnumerable<SearchResult> Search(Query query)
    {
        return base.Search(query);
    }
}

This did not work, my code was never called when I performed a search.

[SearchProvider]
public class CustomPageSearchProvider : EnterprisePageSearchProvider
{
    // We must override this to force Episerver
    // to use our new search provider. 
    public new int SortOrder => 0;
    
    public override string Category => "Temporary search provider";

    public override IEnumerable<SearchResult> Search(Query query)
    {
        return base.Search(query);
    }
}

Adding a SortOrder helped, my code was called!

An alternative to specifying SortOrder in code would be to drag-and-drop the new search provider above «Find pages» in admin mode:

One last step, simply decode the html entities before passing them on to the Episerver Dojo magic.

[SearchProvider]
public class CustomPageSearchProvider : EnterprisePageSearchProvider
{
    // Override this to force Episerver to use our search provider. 
    public new int SortOrder => 0;
    
    public override string Category => "Temporary search provider";

    public override IEnumerable<SearchResult> Search(Query query)
    {
        return DecodeHtmlEntities(base.Search(query));
    }

    // Can be removed when Episerver fixes CMS-14615.
    private static IEnumerable<SearchResult> DecodeHtmlEntities(
        IEnumerable<SearchResult> searchResult)
    {
        foreach (var item in searchResult)
        {
            item.Title = HttpUtility.HtmlDecode(item.Title);
            yield return item;
        }
    }
}

And then...

There, I fixed it!