In this tutorial, you will learn how to create a higher-order component using ReactJS for an Episerver powered website. The component will allow inline editing mode to work whenever it is viewed in preview mode. This tutorial is part of a series of posts about using Episerver as a headless CMS with ReactJS, for more see the links at the end of this page!
Traditionally Episerver websites were built using C#. In server-side architectures, the PropertyFor() HTML helper was used within views to render the properties contained on either a page or a block. PropertyFor() also rendered all the special attributes required by Episerver to allow the inline editing function to work.
When you use Episerver as a headless CMS, all of the responsibility for adding these special attributes within the HTML is now up to you. Within your single page application when you render a component, if you want inline editing to work you will need to write some extra code!
In order to make inline editing work, you will need to decorate every Episerver property with the data-epi-edit attribute when in edit mode. Adding this code to every component would violate the DRY principle. When working with ReactJs the best architectural pattern to apply this feature onto every component is with a higher-order component. I will asusm you know what a HOC is. If not, you can find more information read this
How To Get Edit Mode
In order for inline editing to work, we need to determine if the current request is in edit-mode. Within C# you can determine if a request is in edit mode using a variety of approaches. There are some useful helpers like, PageEditing.Another way of checking if the request is in edit-mode can be seen within the music festival sample site:
When working with Javascript within a single-page application, you will not have access to these helpers. One way of checking if the current request is in edit-mode, is to pass the editMode status via the content delivery API. The alternative approach is to check client-side if the current request was made from within the editor. You can do this by checking if the current URL contains '/EPiServer/CMS/Content', like so:
The Higher-Order Function
Creating a ReactJS component that can be wrapped around another component is fairly simple. The purpose of the HOC is to apply the correct attribute when the prop editMode is enabled. The end HTML that you want to render will need to look something like this ('mainContent' maps to a property alias):
A higherorder component that can render this HTML could look like this:
In the code above, props named editmode, 'contentName', and 'epiComponent' is passed in. epiComponent will represent the React component that you want wrapped and 'contentName' is the property alias.
Tips In case Inline Editing Does Not Work
If you want block preview mode to work just like server-side Episerver, you will still need to implement a special block preview controller. If you do not know how to do this, then you can find out more in How To Preview A Block In Episerver
I had issues getting inline editing to work when previewing blocks. To diagnose the root cause of the issue, first, confirm data-epi-edit is definitely being rendered as expected. If the attribute is being rentered and preview is still not working, turn to Chrome developer tools. Using inspector, check the parent elements HTML, e.g. the component wrapping it. If the parent components elemtn also has the data-epi-edit attribute applied this will cause inline editing to break. This situation would occur when rendering a block within a block. To get around this is hard and the fix will be based on your custom solution so unfortunately it will be up to you to solve. Good luck!
