feat(web): alert dialog and text ui github flavoured markdown support

apparently doka wants to see the tables he makes to feed his never ending addiction of tables

web/src/features/dialog/AlertDialog.tsx

@@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { fetchNui } from '../../utils/fetchNui';
 import { useLocales } from '../../providers/LocaleProvider';
+import remarkGfm from 'remark-gfm';
 
 export interface AlertProps {
   header: string;
@@ -56,7 +57,7 @@ const AlertDialog: React.FC = () => {
         title={<ReactMarkdown>{dialogData.header}</ReactMarkdown>}
       >
         <Stack>
-          <ReactMarkdown>{dialogData.content}</ReactMarkdown>
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{dialogData.content}</ReactMarkdown>
           <Group position="right" spacing={10}>
             {dialogData.cancel && (
               <Button uppercase variant="default" onClick={() => closeAlert('cancel')} mr={3}>

web/src/features/textui/TextUI.tsx

@@ -5,6 +5,7 @@ import ReactMarkdown from 'react-markdown';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import ScaleFade from '../../transitions/ScaleFade';
+import remarkGfm from 'remark-gfm';
 
 type Position = 'right-center' | 'left-center' | 'top-center';
 
@@ -61,7 +62,7 @@ const TextUI: React.FC = () => {
           <Box style={data.style} className={classes.container}>
             <Group spacing={12}>
               {data.icon && <FontAwesomeIcon icon={data.icon} fixedWidth size="lg" style={{ color: data.iconColor }} />}
-              <ReactMarkdown>{data.text}</ReactMarkdown>
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>{data.text}</ReactMarkdown>
             </Group>
           </Box>
         </ScaleFade>