search

apvarun / toastify-js

Pure JavaScript library for better notification messages
https://apvarun.github.io/toastify-js/
MIT License
2.13k stars 230 forks source link

Toast text type can be HTML #51

Closed truongnmt closed 4 years ago

truongnmt commented 4 years ago

First, thanks for an awesome library!

I have a use case that I want to display a structured HTML in a toast message, not just plain text, I want to display an image and some styled text as well.

Wonder if I could do the above behavior with some options such as

Toastify({
  type: "html",
  content: contentInHtml
})
Toastify({
  type: "text",
  content: contentInPlainText
})
Tadaz commented 4 years ago

Hi @truongnmt,

Text of toast message is HTML friendly, so you can use it in both ways without any additional implementation.

Toastify({
    text: 'Looks at this nice image <img src="#">'
});
truongnmt commented 4 years ago

WOw! I don't know that! Thanks!

avimar commented 3 years ago

Looks like we can just pass HTML into the text attribute and it renders as HTML: https://github.com/apvarun/toastify-js/blob/ccacb7e87295e73c5e2c2717cb1f6635b78c9a1a/src/toastify.js#L102

This sounds like a security issue.

A breaking change would be text would modify innerText and we could simply have another option for html to modify the innerHTML. I know there's a node options but this is simpler to use when we trust or already sanitized the contents.