How to show the drafted changes real-time on a project built with

How to show the drafted changes real-time on a project built with React components

Saad-Al- Muttakee

Vote:

I have a project that uses Optimizely CMS 12.32.x. The project uses React server components for parts of the frontend.

One drawback of this implementation is that the pages in the preview mode is not rendering the content with drafted changes instantly after making the changes. Suppose, I have a block with a text field. When visiting the block in the preview mode, if I update the text field, the preview mode does not reflect the changes. I need to either publish the block or reload the page to see the draft. I understand this is how the server components work.

I was trying to find ways to re-render the React component once the changes have been "Autosaved" as a draft. I was hoping to subscribe to the event that fires inside the Dojo when the draft is saved. I tried the events listed in this blog - https://gregwiechec.com/2015/08/using-dojo-topic-publish-and-topic-subscribe/. However, I did not find the event I needed. I am also unsure what would be the ideal way to re-render the react components.

Can anyone tell me if this is the right approach? Are there any easier alternatives? Thank you.

#337182

Mar 12, 2025 17:06

Marcin Żak

Vote:

Hi,

I’m not very familiar with Dojo, but I’ve been trying to understand how the new side-by-side editing addon is coded.

I came across the AutoRefresher.js file (link), and if I understand it correctly, it seems to do exactly what you need—it refreshes the content inside the preview window every time a page is saved.

Maybe it will solve your problem, or at least it will be a good start.

#337437

Mar 21, 2025 9:27

Saad-Al- Muttakee - Apr 21, 2025 14:37

The file gave me the exact idea of what I was looking for. Thank you once more.
I paused this task for some days, so I could not get back. I ran into some issues when I tried to inject the JS file the same way the library author did, but ran into some errors. In the end, it worked out fine.

Saad-Al- Muttakee

Vote:

Many thanks for the answer. The AutoRefresher.js file has the event I was searching for. Let me try this in my project to see the impact.

#337459

Mar 23, 2025 11:09

Saad-Al- Muttakee

Vote:

Here is a short summary of the solution that worked for me.

tl;dr Every time something was modified in the preview mode, the ReactDOM would go out of sync in my project, resulting in blank pages. I resynced them with some JS code.

The project I am working on uses Reactjs.NET. Generally, the library includes the render methods of all the components of a page at the end of the HTML body. As the file that updates the preview mode in CMS 12 - delivery-property-renderer.ts replaces the innerHTML with the updated one, the React render methods do not execute. Replacing innerHTML of an element does not execute the JS scripts inside the script tag inside the content, if I am not mistaken. This would mean the DOM got out of sync. So I had to make sure the scripts that included React render/hydrate methods got executed properly.

You can say that the AutoRefresher.js file from the side-by-side editing plugin is a shorter version of delivery-property-renderer.ts file. I recommend checking out the plugin.

#337882

Edited, Apr 21, 2025 14:47