Feather widgets in Sitefinity are a significant improvement over traditional Sitefinity widgets. They are more responsive, provide better tooling, and are easier to customize (both the main area as well as designer views). However, I recently encountered an issue with one of the basic default Feather widgets included with more recent versions of Sitefinity. In this post we're going to see how to modify this behavior, so that when working with the Feather Content Block widget we have it behave the way we would like. This post also serves a second purpose: Introducing how to modify a built-in Sitefinity Feather widget's behavior. This technique can be used to modify any custom or built-in Sitefinity Feather widget.
Sitefinity has a Feather equivalent for most of its widgets. In this case we're looking at the Feather Content Block widget, one that Sitefinity uses in place of its classic counterpart. The issue I ran into was that this widget removes all formatting, spacing, and indentation from any manually-entered HTML. Whenever you switch away from the HTML view or click the "Save", button, Sitefinity compresses it all down to a single line. It's important to note that this does not affect the actual output of the content, so this issue is more relevant to maintaining your HTML as opposed to messing up the final output. This means this issue isn't as serious, but that doesn't mean it's not worth fixing!
Now that's ugly! But before we get to changing the Feather Content Block behavior, I want to mention the upside to what Sitefinity is doing here: Compressing HTML *does* provide a benefit to users loading up the pages, as there's less to download. The above scenario is a rather simple example, but if you had lots of content, you would ideally want it to be compressed down so that the page has less data to transmit. However, being able to maintain that HTML also carries importance, and having to re-format it every time you want to make a change is a cumbersome workflow.
With out of the way, let's get to changing the Feather Content Block!
First, you'll want to navigate to your project's "ResourcesPackages" directory and locate which package you are using. Sitefinity comes with "Bootstrap" out of the box, so that's the one we'll be drilling down into.
Now that we have our entry point to modifying the Feather Content Block, we can do so. We need to make two modifications here: One to prevent compression when we press "Save" on the widget, and one to prevent compression when we switch away from "HTML editing mode" back to "WYSIWYG editing mode" (the HTML button in the top-right corner of the widget). This change is very easy to make! All you have to do is comment out or delete both of the instances of the following line of code:
scope.sfModel = scope.editor.value();
This statement appears on line 277 (which is within the "toggleHtmlView" function definition) and on line 317 (the "close" function).
As you can see, the HTML formatting within the Feather Content Block widget now maintains exactly what we put into it. I've also shown you how easy it is to modify the behavior of the Feather "HTML Field" client component. This should make the journey of maintaining content block HTML on your site a much more pleasant one!