novu icon indicating copy to clipboard operation
novu copied to clipboard

🐛 Bug Report: Error when copy/paste template code to email editor - Failed to extract variables

Open lucafaggianelli opened this issue 2 months ago • 5 comments

📜 Description

When I copy/paste some template code to the email editor (typically because I created that code in other notifications channels) I receive an error when trying to save: Failed to extract variables

Indeed the custom variables are not present in variables list when clicking on the pencil icon

👟 Reproduction steps

  1. Create a in-app channel in a workflow
  2. Write some template code with some custom variables, i.e.:
{{#if step.digest}}
{{step.total_count}} events matched with bank transactions.
{{else}}
The expense {{expense.name}} matched with a bank transaction.
{{/if}}
  1. copy the code
  2. create an email channel in the workflow
  3. paste the code you copied before
  4. Click Update/Save

👍 Expected behavior

It should correctly save the email content recognizing the variables

👎 Actual Behavior with Screenshots

image

Novu version

Novu SaaS

npm version

No response

node version

No response

📃 Provide any additional context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

  • [X] I checked and didn't find a similar issue

🏢 Have you read the Contributing Guidelines?

Are you willing to submit PR?

None

lucafaggianelli avatar Apr 23 '24 23:04 lucafaggianelli

@lucafaggianelli you can paste template code into Custom code tab in the Email editor, it works for me

YugfeldID avatar Apr 29 '24 13:04 YugfeldID

Also, it seems like the problem occurs because when we type in the in-app editor text like this: The expense {{expense.name}}

it is represented in DOM like this:

<span>The&nbsp;expense&nbsp;</span>   
<span >{{</span>
<span> expense.name</span>
<span >}}</span>

and after copying and pasting into email editor, 'data/html' will be pasted like in the example above. But email editor is not rich text editor, so when the app tries to find variables it parses HTML tags and can't find variables.

I assume it will be proper to prohibit pasting any 'data/html' into email editor not only because variables are not parsed correctly, but also because all styles and fonts are pasted with text now and there are no controls to clear them. If it's okay, I can do it.

YugfeldID avatar Apr 29 '24 13:04 YugfeldID

Yeah I imagine it's something like that. I agree with your idea of blocking the pasting of html but on the other side it would be cool to let a user to copy the message from one editor to another, that in my opinion is a common case. So in this case the copy from the editor should copy a data/text.

In any case I'm thinking about moving to the echo version where I can use react email (I already have the templates).

Thanks for taking a look!

lucafaggianelli avatar Apr 29 '24 18:04 lucafaggianelli

Yes, I agree, I meant the same: prohibit paste 'data/html' but still allow to taste 'data/text'. So in case of copying from the editor 'data/text' should be pasted. Let's wait for novu team response, if this approach is okay, I can implement it.

YugfeldID avatar Apr 30 '24 08:04 YugfeldID