Skip to content

Commit 96d99f1

Browse files
chpy04chpy04
committed
onboarding markdown
1 parent 3fbb738 commit 96d99f1

10 files changed

Lines changed: 243 additions & 94 deletions

File tree

‎src/frontend/src/components/NERFormModal.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ interface NERFormModalProps<T extends FieldValues> extends NERModalProps {
88
onFormSubmit: (data: T) => void;
99
formId: string;
1010
children?: ReactNode;
11+
paperProps?: any;
1112
}
1213

1314
const NERFormModal = ({
@@ -23,7 +24,8 @@ const NERFormModal = ({
2324
disabled,
2425
children,
2526
showCloseButton,
26-
hideBackDrop = false
27+
hideBackDrop = false,
28+
paperProps
2729
}: NERFormModalProps<any>) => {
2830
/**
2931
* Wrapper function for onSubmit so that form data is reset after submit
@@ -53,6 +55,7 @@ const NERFormModal = ({
5355
disabled={disabled}
5456
showCloseButton={showCloseButton}
5557
hideBackDrop={hideBackDrop}
58+
paperProps={paperProps}
5659
>
5760
<form id={formId} onSubmit={handleFormSubmit} noValidate>
5861
{children}

‎src/frontend/src/components/NERMarkdown.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import React from 'react';
2+
import ReactMarkdown from 'react-markdown';
3+
import { Box } from '@mui/material';
4+
5+
interface NERMarkdownProps {
6+
markdown: string;
7+
}
8+
9+
const NERMarkdown = ({ markdown }: NERMarkdownProps) => {
10+
return (
11+
<Box
12+
sx={{
13+
fontSize: '16px',
14+
lineHeight: 1.3,
15+
'& h1': {
16+
fontSize: '1.4em',
17+
margin: '0.8em 0 0.4em 0',
18+
fontWeight: 600
19+
},
20+
'& h2': {
21+
fontSize: '1.2em',
22+
margin: '0.7em 0 0.3em 0',
23+
fontWeight: 600
24+
},
25+
'& h3': {
26+
fontSize: '1.1em',
27+
margin: '0.6em 0 0.2em 0',
28+
fontWeight: 600
29+
},
30+
'& h4, & h5, & h6': {
31+
fontSize: '1em',
32+
margin: '0.5em 0 0.2em 0',
33+
fontWeight: 600
34+
},
35+
'& p': {
36+
margin: '0.3em 0'
37+
},
38+
'& ul, & ol': {
39+
margin: '0.4em 0',
40+
paddingLeft: '1.5em'
41+
},
42+
'& li': {
43+
margin: '0.1em 0'
44+
},
45+
'& li > ul, & li > ol': {
46+
margin: '0.2em 0'
47+
},
48+
'& a': {
49+
color: '#dc2626',
50+
textDecoration: 'underline',
51+
'&:hover': {
52+
color: '#b91c1c',
53+
textDecoration: 'none'
54+
}
55+
},
56+
'& code': {
57+
backgroundColor: '#f3f4f6',
58+
color: '#374151',
59+
padding: '0.1em 0.3em',
60+
borderRadius: '3px',
61+
fontSize: '0.9em'
62+
},
63+
'& pre': {
64+
backgroundColor: '#f3f4f6',
65+
color: '#374151',
66+
padding: '0.5em',
67+
borderRadius: '4px',
68+
overflowX: 'auto',
69+
margin: '0.4em 0'
70+
},
71+
'& pre code': {
72+
background: 'none',
73+
color: 'inherit',
74+
padding: 0
75+
},
76+
'& blockquote': {
77+
borderLeft: '3px solid #d1d5db',
78+
paddingLeft: '0.8em',
79+
margin: '0.4em 0',
80+
fontStyle: 'italic',
81+
color: '#6b7280'
82+
},
83+
'& table': {
84+
borderCollapse: 'collapse',
85+
margin: '0.4em 0',
86+
fontSize: '0.9em'
87+
},
88+
'& th, & td': {
89+
border: '1px solid #d1d5db',
90+
padding: '0.3em 0.5em',
91+
textAlign: 'left'
92+
},
93+
'& th': {
94+
backgroundColor: '#f9fafb',
95+
fontWeight: 600
96+
},
97+
'& hr': {
98+
border: 'none',
99+
borderTop: '1px solid #e5e7eb',
100+
margin: '0.6em 0'
101+
},
102+
'& img': {
103+
maxWidth: '100%',
104+
height: 'auto',
105+
margin: '0.3em 0'
106+
}
107+
}}
108+
>
109+
<ReactMarkdown>{markdown}</ReactMarkdown>
110+
</Box>
111+
);
112+
};
113+
114+
export default NERMarkdown;

‎src/frontend/src/components/NERModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const NERModal = ({
4949
onClose={onHide}
5050
PaperProps={{
5151
style: paperProps
52-
? { ...paperProps, borderRadius: '10px', maxWidth: '700px' }
52+
? { borderRadius: '10px', maxWidth: '700px', ...paperProps }
5353
: { borderRadius: '10px', maxWidth: '700px' }
5454
}}
5555
>

‎src/frontend/src/pages/AdminToolsPage/OnboardingConfig/Checklists/AdminSubtaskSection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import NERDeleteModal from '../../../../components/NERDeleteModal';
1111
import { useToast } from '../../../../hooks/toasts.hooks';
1212
import { useDeleteChecklist } from '../../../../hooks/onboarding.hook';
1313
import EditSubtaskModal from './EditSubtaskModal';
14-
import Markdown from 'react-markdown';
14+
import NERMarkdown from '../../../../components/NERMarkdown';
1515

1616
interface AdminSubtaskSectionProps {
1717
parentTask: Checklist;
@@ -89,7 +89,7 @@ const AdminSubtaskSection: React.FC<AdminSubtaskSectionProps> = ({ parentTask })
8989
marginBottom: 1
9090
}}
9191
>
92-
<Markdown>{description}</Markdown>
92+
<NERMarkdown markdown={description} />
9393
</Box>
9494
))}
9595
<Box sx={{ display: 'flex', justifyContent: 'flex-start', mb: -1 }}>

‎src/frontend/src/pages/AdminToolsPage/OnboardingConfig/Checklists/CreateChecklistModal.tsx‎

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import NERFormModal from '../../../../components/NERFormModal';
2121
import * as yup from 'yup';
2222
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
2323
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
24-
import Markdown from 'react-markdown';
24+
import NERMarkdown from '../../../../components/NERMarkdown';
2525

2626
interface CreateChecklistModalProps {
2727
open: boolean;
@@ -147,6 +147,7 @@ const CreateChecklistModal = ({ open, handleClose, teamId, teamTypeId }: CreateC
147147
onFormSubmit={onFormSubmit}
148148
formId={'create-task-form'}
149149
showCloseButton
150+
paperProps={{ maxWidth: '80vw' }}
150151
>
151152
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
152153
<FormControl fullWidth>
@@ -277,7 +278,7 @@ const CreateChecklistModal = ({ open, handleClose, teamId, teamTypeId }: CreateC
277278
<Box
278279
sx={{
279280
display: 'flex',
280-
minWidth: '600px',
281+
width: '30vw',
281282
alignItems: 'stretch'
282283
}}
283284
>
@@ -288,7 +289,7 @@ const CreateChecklistModal = ({ open, handleClose, teamId, teamTypeId }: CreateC
288289
render={({ field }) => (
289290
<TextField
290291
{...field}
291-
placeholder="Enter description..."
292+
placeholder="Enter description markdown..."
292293
fullWidth
293294
multiline
294295
variant="outlined"
@@ -328,7 +329,7 @@ const CreateChecklistModal = ({ open, handleClose, teamId, teamTypeId }: CreateC
328329
sx={{
329330
backgroundColor: theme.palette.background.paper,
330331
borderRadius: 3,
331-
minWidth: '600px',
332+
width: '30vw',
332333
padding: 2,
333334
display: 'flex',
334335
flexDirection: 'column',
@@ -354,42 +355,11 @@ const CreateChecklistModal = ({ open, handleClose, teamId, teamTypeId }: CreateC
354355
<Box
355356
sx={{
356357
flex: 1,
357-
overflow: 'auto',
358-
wordBreak: 'break-word',
359-
whiteSpace: 'pre-wrap',
360-
fontSize: '1.1rem',
361-
lineHeight: 1.6,
362-
'& h1, & h2, & h3, & h4, & h5, & h6': {
363-
margin: '0.5em 0 0.25em 0',
364-
color: theme.palette.text.primary
365-
},
366-
'& p': {
367-
margin: '0.25em 0',
368-
color: theme.palette.text.primary
369-
},
370-
'& ul, & ol': {
371-
margin: '0.25em 0',
372-
paddingLeft: '1.5em'
373-
},
374-
'& li': {
375-
margin: '0.1em 0'
376-
},
377-
'& code': {
378-
backgroundColor: theme.palette.action.hover,
379-
padding: '2px 4px',
380-
borderRadius: 1,
381-
fontSize: '0.95em'
382-
},
383-
'& pre': {
384-
backgroundColor: theme.palette.action.hover,
385-
padding: 1,
386-
borderRadius: 1,
387-
overflow: 'auto'
388-
}
358+
overflow: 'auto'
389359
}}
390360
>
391361
{watch(`descriptions.${index}.name`) ? (
392-
<Markdown>{watch(`descriptions.${index}.name`)}</Markdown>
362+
<NERMarkdown markdown={watch(`descriptions.${index}.name`)} />
393363
) : (
394364
<Typography
395365
variant="body2"
@@ -398,7 +368,7 @@ const CreateChecklistModal = ({ open, handleClose, teamId, teamTypeId }: CreateC
398368
fontStyle: 'italic'
399369
}}
400370
>
401-
Start typing to see preview...
371+
Start typing to see formatted markdown...
402372
</Typography>
403373
)}
404374
</Box>

0 commit comments

Comments
 (0)