tweak(web): adjust markdown heading margins (#393)

* tweak(web): components for markdown headings

Fixed nomenclature and set as default export.

* fix(ui): temp remove MarkdownComponents file

* fix(ui): return MarkdownComponents file

web/src/config/MarkdownComponents.tsx

@@ -0,0 +1,10 @@
+import { Title } from '@mantine/core';
+import { Components } from 'react-markdown';
+
+const MarkdownComponents: Components = {
+  h1: ({ node, ...props }) => <Title {...props} />,
+  h2: ({ node, ...props }) => <Title order={2} {...props} />,
+  h3: ({ node, ...props }) => <Title order={3} {...props} />,
+};
+
+export default MarkdownComponents;

web/src/features/dialog/AlertDialog.tsx

@@ -6,6 +6,7 @@ import { fetchNui } from '../../utils/fetchNui';
 import { useLocales } from '../../providers/LocaleProvider';
 import remarkGfm from 'remark-gfm';
 import type { AlertProps } from '../../typings';
+import MarkdownComponents from '../../config/MarkdownComponents';
 
 const AlertDialog: React.FC = () => {
   const { locale } = useLocales();
@@ -46,12 +47,13 @@ const AlertDialog: React.FC = () => {
         overlayOpacity={0.5}
         exitTransitionDuration={150}
         transition="fade"
-        title={<ReactMarkdown>{dialogData.header}</ReactMarkdown>}
+        title={<ReactMarkdown components={MarkdownComponents}>{dialogData.header}</ReactMarkdown>}
       >
         <Stack>
           <ReactMarkdown
             remarkPlugins={[remarkGfm]}
             components={{
+              ...MarkdownComponents,
               img: ({ ...props }) => <img style={{ maxWidth: '100%', maxHeight: '100%' }} {...props} />,
             }}
           >

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

@@ -7,6 +7,7 @@ import { fetchNui } from '../../../utils/fetchNui';
 import ReactMarkdown from 'react-markdown';
 import HeaderButton from './components/HeaderButton';
 import ScaleFade from '../../../transitions/ScaleFade';
+import MarkdownComponents from '../../../config/MarkdownComponents';
 
 const openMenu = (id: string | undefined) => {
   fetchNui<ContextMenuProps>('openContext', { id: id, back: true });
@@ -92,7 +93,7 @@ const ContextMenu: React.FC = () => {
           )}
           <Box className={classes.titleContainer}>
             <Text className={classes.titleText}>
-              <ReactMarkdown>{contextMenu.title}</ReactMarkdown>
+              <ReactMarkdown components={MarkdownComponents}>{contextMenu.title}</ReactMarkdown>
             </Text>
           </Box>
           <HeaderButton icon="xmark" canClose={contextMenu.canClose} iconSize={18} handleClick={closeContext} />

web/src/features/menu/context/components/ContextButton.tsx

@@ -5,6 +5,7 @@ import { Option, ContextMenuProps } from '../../../../typings';
 import { fetchNui } from '../../../../utils/fetchNui';
 import { isIconUrl } from '../../../../utils/isIconUrl';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import MarkdownComponents from '../../../../config/MarkdownComponents';
 
 const openMenu = (id: string | undefined) => {
   fetchNui<ContextMenuProps>('openContext', { id: id, back: false });
@@ -108,12 +109,12 @@ const ContextButton: React.FC<{
                     </Stack>
                   )}
                   <Text className={classes.buttonTitleText}>
-                    <ReactMarkdown>{button.title || buttonKey}</ReactMarkdown>
+                    <ReactMarkdown components={MarkdownComponents}>{button.title || buttonKey}</ReactMarkdown>
                   </Text>
                 </Group>
                 {button.description && (
                   <Text className={classes.description}>
-                    <ReactMarkdown>{button.description}</ReactMarkdown>
+                    <ReactMarkdown components={MarkdownComponents}>{button.description}</ReactMarkdown>
                   </Text>
                 )}
                 {button.progress !== undefined && (

web/src/features/notifications/NotificationWrapper.tsx

@@ -5,6 +5,7 @@ import ReactMarkdown from 'react-markdown';
 import { Avatar, createStyles, Group, Stack, Box, Text, keyframes, Sx } from '@mantine/core';
 import React from 'react';
 import type { NotificationProps } from '../../typings';
+import MarkdownComponents from '../../config/MarkdownComponents';
 
 const useStyles = createStyles((theme) => ({
   container: {
@@ -181,7 +182,10 @@ const Notifications: React.FC = () => {
             <Stack spacing={0}>
               {data.title && <Text className={classes.title}>{data.title}</Text>}
               {data.description && (
-                <ReactMarkdown className={`${!data.title ? classes.descriptionOnly : classes.description} description`}>
+                <ReactMarkdown
+                  components={MarkdownComponents}
+                  className={`${!data.title ? classes.descriptionOnly : classes.description} description`}
+                >
                   {data.description}
                 </ReactMarkdown>
               )}

web/src/features/textui/TextUI.tsx

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import ScaleFade from '../../transitions/ScaleFade';
 import remarkGfm from 'remark-gfm';
 import type { TextUiProps, TextUiPosition } from '../../typings';
+import MarkdownComponents from '../../config/MarkdownComponents';
 
 const useStyles = createStyles((theme, params: { position?: TextUiPosition }) => ({
   wrapper: {
@@ -52,7 +53,9 @@ 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 remarkPlugins={[remarkGfm]}>{data.text}</ReactMarkdown>
+              <ReactMarkdown components={MarkdownComponents} remarkPlugins={[remarkGfm]}>
+                {data.text}
+              </ReactMarkdown>
             </Group>
           </Box>
         </ScaleFade>