feat(web): notify and context markdown wrapper (#174)

Co-authored-by: davidxd33 <dponce@gmail.com>

web/src/features/menu/context/ContextMenu.tsx

@@ -5,6 +5,7 @@ import { ContextMenuProps } from '../../../interfaces/context';
 import Item from './Item';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { fetchNui } from '../../../utils/fetchNui';
+import ReactMarkdown from 'react-markdown';
 
 const openMenu = (id: string | undefined) => {
   fetchNui<ContextMenuProps>('openContext', { id: id, back: true });
@@ -72,7 +73,7 @@ const ContextMenu: React.FC = () => {
             )}
             <Box borderRadius="md" bg="gray.800" flex="1 85%">
               <Text fontFamily="Poppins" fontSize="md" p={2} textAlign="center" fontWeight="light">
-                {contextMenu.title}
+                <ReactMarkdown>{contextMenu.title}</ReactMarkdown>
               </Text>
             </Box>
             <Flex

web/src/features/menu/context/Item.tsx

@@ -13,6 +13,7 @@ import {
   Progress,
 } from '@chakra-ui/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ReactMarkdown from 'react-markdown';
 import { Option, ContextMenuProps } from '../../../interfaces/context';
 import { fetchNui } from '../../../utils/fetchNui';
 
@@ -70,12 +71,12 @@ const Item: React.FC<{
               <Box w="100%">
                 <Box>
                   <Text w="100%" fontWeight="medium" color={button.disabled ? '#718096' : undefined}>
-                    {button.title ? button.title : buttonKey}
+                    <ReactMarkdown>{button.title ? button.title : buttonKey}</ReactMarkdown>
                   </Text>
                 </Box>
                 {button.description && (
                   <Box paddingBottom={1} color={button.disabled ? '#718096' : undefined}>
-                    <Text>{button.description}</Text>
+                    <Text><ReactMarkdown>{button.description}</ReactMarkdown></Text>
                   </Box>
                 )}
                 {button?.progress && (

web/src/features/notifications/NotificationWrapper.tsx

@@ -2,6 +2,7 @@ import { useToast, type ToastPosition, Box, HStack, Text } from '@chakra-ui/reac
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import ReactMarkdown from 'react-markdown';
 
 export interface NotificationProps {
   title?: string;
@@ -53,7 +54,7 @@ const Notifications: React.FC = () => {
             )}
             <Box w="100%">
               {data.title && <Text as="b">{data.title}</Text>}
-              {data.description && <Text>{data.description}</Text>}
+              {data.description && <Text><ReactMarkdown>{data.description}</ReactMarkdown></Text>}
             </Box>
           </HStack>
         </Box>