BUG: `previewHtml` callback is not triggered

luciengeorge commented 2 weeks ago

Hello,

I am trying to preview the html using the editor's built in preview feature. I registered a callback for preview html this way I can use Mustache as a templating library.

const onReady: EmailEditorProps['onReady'] = unlayer => {
  unlayer.registerCallback('previewHtml', function (params: any, done: any) {
    const html = Mustache.render(params.html, data)

    done({html})
  })
}

It seems however that the callback is never called. It used to work a couple of days ago and now it doesn't (see screenshot below). In the the screenshot you can see that [[firstName]] is not being replaced by the appropriate data. I have updated the Mustache config to look for double square brackets rather than single curly brackets so this should work.

Monosnap Localista 2024-10-01 5 pm-04-26

Thank you!

omerzahidbajwa commented 2 weeks ago

Hi,

Please let me know if you are passing in a "projectId" during initialization. Unlayer has just rolled out new billing plans and "Custom Preview" happens to be a paid feature now, if you are an old user and have an old workspace available you can still utilize the old "Free (Legacy)" plan feature sets.

Make sure to create a new project in one of your old workspaces at console.unlayer.com, pass in the projectId within your editor, make sure to add your live domain to "Allowed Domains" list which you can find under project->settings->deployment.

Let me know if this works

luciengeorge commented 2 weeks ago

This fixed it for me thank you 🙏

kaitlynhung commented 2 weeks ago

Hi @omerzahidbajwa,

Is there any way to know if the previewing (no custom HTML needed) have completed since the callback won't be triggered?

I have a custom button for users to trigger the previewing, and I want to hide the loading icons after the editor completes the task.

Thank you!

omerzahidbajwa commented 2 weeks ago

Hi, i am not sure if i understand your use case entirely but you can only access the previewHtml callback if its included within your plan, for now if you were using it previously to record if your users have triggered it you can still make use of it on a legacy projectId, make sure to add your live domain to the "Allowed Domains" list.

I am not sure if theres any other way around that without the callback, you can always put your own custom event handlers and try to track the button clicks using vanilla javascript but it can be complicated.

Didn't quiet get the loading icons part, a video might help.

kaitlynhung commented 2 weeks ago

@omerzahidbajwa sorry for the confusion.

Since I use showPreview() in addEventListener('editor:ready') callback , I expected the editor will show preview mode without loading time. But as you can see in the video, there will be an loading icon at first, the editing mode shows up, and it then switch to preview mode at the end.

RIght now I am using a backdrop to cover the whole "loading process" happens in the video, and use previewHTML callback to hide the backdrop. Is there other way around to know when the editor finishes the loading process?

Much appreciated!

https://github.com/user-attachments/assets/d5a033af-3864-4b81-af77-533a3f2d049b