✨ attempt to introduce html in notifications

[acidjazz]

addresses issue #358

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
ui	Edit on Studio ↗︎	View Live Preview	6a7c8ed

[vercel]

@acidjazz is attempting to deploy a commit to the Nuxt Labs Team on Vercel.

A member of the Team first needs to authorize it.

[Haythamasalama]

What about using slot rather than v-html ?

[acidjazz]

What about using slot rather than v-html ?

Can I get an example? I'd like to be able to make this programmatic

[Haythamasalama]

@acidjazz that's what I mean

<slot>
  <p :class="ui.title">
    {{ title }}
  </p>

  <p v-if="description" :class="ui.description">
    {{ description }}
  </p>
</slot>

[acidjazz]

@Haythamasalama I see, thanks for the example, how would this work programmatically?

[Haythamasalama]

<UNotification>
  <p>
   // your title 
  </p>
  <p>
   // your description  
  </p>
</UNotification>

[acidjazz]

no I mean using the composable useToast().add here

[jaybharadia]

Hello @acidjazz , Thanks for contributing.

v-html ( Security Concern )

Vue automatically escapes HTML content, preventing you from accidentally injecting executable HTML into your application. However, in cases where you know the HTML is safe, you can explicitly render HTML content

Question

Should we sanitize the html ?

Suggestions

It would be nice to see how other UI Libraries are handling this scenario.

Ending Note

What are your thoughts @benjamincanac on this ?

References

• Danger of using v-html in Vue applications
• Vue.js Best Practices

[acidjazz]

Hello @acidjazz , Thanks for contributing.

v-html ( Security Concern )

Vue automatically escapes HTML content, preventing you from accidentally injecting executable HTML into your application. However, in cases where you know the HTML is safe, you can explicitly render HTML content

Question

Should we sanitize the html ?

Suggestions

It would be nice to see how other UI Libraries are handling this scenario.

Ending Note

What are your thoughts @benjamincanac on this ?

References

• Danger of using v-html in Vue applications
• Vue.js Best Practices

Yea that's a good point, are there any general practices/suggestions/etc out there we can use to properly sanitize this?

Or maybe we can only make it v-html if we have some kind of flag/option turned on so the user is aware?

maybe like:

<u-button html />

then add to our composables:

useToast().add({title: 'test<b>ting</b>', html: true})

I can commit this change if that's agreeable, then put a notice/warning in the docs for this option

[benjamincanac]

I was just thinking, wouldn't it be better to handle Markdown through MDC syntax instead? This would open way more possibilities, although it would require to add @nuxt/content as a dependency for its transformer.

[jaybharadia]

I was just thinking, wouldn't it be better to handle Markdown through MDC syntax instead? This would open way more possibilities, although it would require to add @nuxt/content as a dependency for its transformer.

Need to explore this possibility 👍

[acidjazz]

I was just thinking, wouldn't it be better to handle Markdown through MDC syntax instead? This would open way more possibilities, although it would require to add @nuxt/content as a dependency for its transformer.

I think I'm going to attempt the html being a flag/option that they specify for it to happen, w/ the v-html warning.

I can also explore a flag/option of markdown that they specify, maybe we can have the dependency be optional based on if they turn it on somehow?

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Jul 5, 2023 5:10pm

[benjamincanac]

Here is my take on this: #431. What do you think?

[acidjazz]

awesome! - i like that the control that comes w/ adding the slots in app.vue - i think for the ideas for markdown and other support that were discussed we can make separate issues

[benjamincanac]

Closing in favor of #431