feat: add useInnerHtml checkbox option and dynamically show HTML content

src/components/alert.js

@@ -15,6 +15,7 @@
       bodyText,
       allowTextServerResponse,
       allowTitleServerResponse,
+      useInnerHtml,
       dataComponentAttribute,
     } = options;
     const title = useText(titleText);
@@ -23,6 +24,7 @@
     const [open, setOpen] = useState(visible);
     const [titleFromServer, setTitleFromServer] = useState('');
     const [textFromServer, setTextFromServer] = useState('');
+    const alertBody = (allowTextServerResponse && textFromServer) || body;
 
     useEffect(() => {
       setOpen(visible);
@@ -125,7 +127,15 @@
               : title}
           </AlertTitle>
         )}
-        {textFromServer && allowTextServerResponse ? textFromServer : body}
+        {useInnerHtml ? (
+          <div
+            className={classes.htmlContent}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: alertBody }}
+          />
+        ) : (
+          alertBody
+        )}
       </Alert>
     );
     return isDev ? (
@@ -209,6 +219,11 @@
           },
         },
       },
+      htmlContent: {
+        '& *': {
+          color: ({ options: { textColor } }) => style.getColor(textColor),
+        },
+      },
       hide: {
         display: 'none !important',
       },

src/prefabs/structures/Alert/options/index.ts

@@ -22,6 +22,7 @@ export const categories = [
       'iconColor',
       'background',
       'borderColor',
+      'useInnerHtml',
     ],
   },
   {
@@ -77,6 +78,9 @@ export const alertOptions = {
   borderColor: color('Border color', {
     value: ThemeColor.TRANSPARENT,
   }),
+  useInnerHtml: toggle('Display Rich Text', {
+    value: false,
+  }),
   icon: icon('Icon', {
     value: 'None',
   }),