From c8cca20c89e10726294b89ea79216b2feaab536c Mon Sep 17 00:00:00 2001 From: Jellyton Date: Mon, 7 Aug 2023 03:05:15 -0700 Subject: [PATCH] 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 | 10 ++++++++++ web/src/features/dialog/AlertDialog.tsx | 4 +++- web/src/features/menu/context/ContextMenu.tsx | 3 ++- .../features/menu/context/components/ContextButton.tsx | 5 +++-- web/src/features/notifications/NotificationWrapper.tsx | 6 +++++- web/src/features/textui/TextUI.tsx | 5 ++++- 6 files changed, 27 insertions(+), 6 deletions(-) create mode 100644 web/src/config/MarkdownComponents.tsx diff --git a/web/src/config/MarkdownComponents.tsx b/web/src/config/MarkdownComponents.tsx new file mode 100644 index 0000000..7456aa0 --- /dev/null +++ b/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 }) => , + h2: ({ node, ...props }) => <Title order={2} {...props} />, + h3: ({ node, ...props }) => <Title order={3} {...props} />, +}; + +export default MarkdownComponents; diff --git a/web/src/features/dialog/AlertDialog.tsx b/web/src/features/dialog/AlertDialog.tsx index 0d64b37..ed07d5f 100644 --- a/web/src/features/dialog/AlertDialog.tsx +++ b/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} />, }} > diff --git a/web/src/features/menu/context/ContextMenu.tsx b/web/src/features/menu/context/ContextMenu.tsx index 2cd0a4a..c79f368 100644 --- a/web/src/features/menu/context/ContextMenu.tsx +++ b/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} /> diff --git a/web/src/features/menu/context/components/ContextButton.tsx b/web/src/features/menu/context/components/ContextButton.tsx index 49858d0..936f523 100644 --- a/web/src/features/menu/context/components/ContextButton.tsx +++ b/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 && ( diff --git a/web/src/features/notifications/NotificationWrapper.tsx b/web/src/features/notifications/NotificationWrapper.tsx index 1c57083..6a22c98 100644 --- a/web/src/features/notifications/NotificationWrapper.tsx +++ b/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> )} diff --git a/web/src/features/textui/TextUI.tsx b/web/src/features/textui/TextUI.tsx index f316e50..74f85a1 100644 --- a/web/src/features/textui/TextUI.tsx +++ b/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>