Update toaster to allow for innerHTML in descriptions

withstudiocms · Dec 1, 2024 · ae6ea11 · ae6ea11
1 parent d148c72
commit ae6ea11
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/packages/studiocms_ui/src/components/Toast/Toaster.astro b/packages/studiocms_ui/src/components/Toast/Toaster.astro
@@ -103,7 +103,7 @@ const {
 
     if (props.closeButton || props.persistent) {
       const closeIconContainer = document.createElement('button');
-      closeIconContainer.classList.add('close-icon-container')
+      closeIconContainer.classList.add('close-icon-container');
       closeIconContainer.addEventListener('click', () => removeToast(toastID));
       closeIconContainer.innerHTML = getIconString('x-mark', 'close-icon', 24, 24);
 
@@ -114,7 +114,7 @@ const {
 
     if (props.description) {
       const toastDesc = document.createElement('span');
-      toastDesc.textContent = props.description;
+      toastDesc.innerHTML = props.description;
       toastDesc.classList.add('toast-desc');
 
       toastContainer.appendChild(toastDesc);

diff --git a/packages/studiocms_ui/src/types/index.ts b/packages/studiocms_ui/src/types/index.ts
@@ -1,5 +1,8 @@
 export type ToastProps = {
 	title: string;
+	/**
+	 * This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
+	 */
 	description?: string;
 	type: 'success' | 'warning' | 'danger' | 'info';
 	duration?: number;