Listen for Live Preview

[markhuot]

Does anyone know how to listen for Live Preview opening? I have a very old React-based custom field that we just upgraded to Craft 5 but when Live Preview opens the field no-longer re-renders in the Live Preview view. We used to have this,

Garnish.on(Garnish.HUD, 'show', function () {

But that's no longer firing in Craft 5. Is there any documentation or notes on how to upgrade something like this to Craft 5?

[brandonkelly]

Live Preview has never been implemented as a HUD, so not sure how that code would have ever worked.

You can listen to Live Preview opening via:

// new
Garnish.on(Craft.Preview, 'open', () => { …

// old
Garnish.on(Craft.LivePreview, 'open', () => { …

(Craft.LivePreview is the classic Live Preview implementation that is used by element types which haven’t been updated to use the new element editor UI added in Craft 4.)