unlayer / react-email-editor

Drag-n-Drop Email Editor Component for React.js
https://unlayer.com/embed
MIT License
4.53k stars 730 forks source link

[Bug] Merge tags in template not loading #361

Closed timsun28 closed 9 months ago

timsun28 commented 11 months ago

Hi,

I've recently run into an issue when trying to load an existing template with merge tags into the editor. When loading a design with the merge tags included, the tags don't show up in the editor and when saving the loaded design, the merge tags are removed from the design.

This is quite a big bug when people are doing multiple revisions of a template, and they need to add the merge tag each time they want to save the template.

I don't have any console errors when loading the template that could send me in the right direction, and I've also tried to disable the smartTags, but I couldn't find how to disable them in the React version as described by the original docs like this:

unlayer.init({
  features: {
    smartMergeTags: false
  }
});

I've created a small sandbox link to replicate the issue here: https://codesandbox.io/s/wonderful-silence-fjxhfw?file=/src/sample.json

On line 40 you can find the merge tag in the design and in the example you can see that the merge tag is not displayed in the editor.

Thank you for your support, Timo

timsun28 commented 10 months ago

[Update] I'm still facing this issue and it's quite unfortunate that if someone loads their saved template that it doesn't properly load the previously saved merge tags.

In the scenario where someone added merge tags previously, and wanted to fix a small typo. The template would load without the merge tags. They would fix the typo and save the template again (now without the merge tags).

To explain to customers that they have to add merge tags every time they save the template doesn't make a lot of sense.

timsun28 commented 9 months ago

[Fixed]!

I've done more testing and found out it had to do with the double square brackets that I was using for my merge tags (this is used by default in mailjet.

After reading some more documentation, I found that the double square bracket is used for "Design tags" in unlayer and they offer an option to change the tags described here.

I've now added this four bracket custom designTags seeing how I'm not using them anyway. And this fixed the issue.

<EmailEditor
   ref={emailEditorRef}
   onReady={onReady}
   editorId="143790"
   options={{
      designTagsConfig: {
         delimiter: ["[[[[", "]]]]"],
      },
    }}
/>

I would suggest a change to the unlayered merge tag documentation here to be updated with a note that double square bracket does not work automatically.