Skip to content

Commit 3fbb738

Browse files
chpy04chpy04
committed
initial markdown concepts
1 parent 8321338 commit 3fbb738

3 files changed

Lines changed: 148 additions & 44 deletions

File tree

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +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';
1415

1516
interface AdminSubtaskSectionProps {
1617
parentTask: Checklist;
@@ -88,7 +89,7 @@ const AdminSubtaskSection: React.FC<AdminSubtaskSectionProps> = ({ parentTask })
8889
marginBottom: 1
8990
}}
9091
>
91-
<Typography color={theme.palette.text.primary}>{description}</Typography>
92+
<Markdown>{description}</Markdown>
9293
</Box>
9394
))}
9495
<Box sx={{ display: 'flex', justifyContent: 'flex-start', mb: -1 }}>

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

Lines changed: 143 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,25 @@ import LoadingIndicator from '../../../../components/LoadingIndicator';
33
import { ChecklistCreateArgs, useCreateChecklist } from '../../../../hooks/onboarding.hook';
44
import { useToast } from '../../../../hooks/toasts.hooks';
55
import { yupResolver } from '@hookform/resolvers/yup';
6-
import { FormControl, FormLabel, TextField, InputAdornment, Checkbox, IconButton, useTheme } from '@mui/material';
7-
import { Box } from '@mui/system';
6+
import {
7+
FormControl,
8+
FormLabel,
9+
TextField,
10+
InputAdornment,
11+
Checkbox,
12+
IconButton,
13+
useTheme,
14+
Typography
15+
} from '@mui/material';
16+
import { Box, Stack } from '@mui/system';
817
import React, { useState } from 'react';
918
import { useForm, useFieldArray, Controller } from 'react-hook-form';
1019
import { CreateChecklistPreview } from 'shared';
1120
import NERFormModal from '../../../../components/NERFormModal';
1221
import * as yup from 'yup';
1322
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
1423
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
24+
import Markdown from 'react-markdown';
1525

1626
interface CreateChecklistModalProps {
1727
open: boolean;
@@ -64,6 +74,7 @@ const CreateChecklistModal = ({ open, handleClose, teamId, teamTypeId }: CreateC
6474
const {
6575
handleSubmit,
6676
control,
77+
watch,
6778
reset,
6879
formState: { errors }
6980
} = useForm<ChecklistFormValues>({
@@ -255,53 +266,144 @@ const CreateChecklistModal = ({ open, handleClose, teamId, teamTypeId }: CreateC
255266
color: theme.palette.error.main,
256267
fontWeight: 'bold',
257268
fontSize: '1.5rem',
258-
textDecoration: 'underline'
269+
textDecoration: 'underline',
270+
mb: 2
259271
}}
260272
>
261273
Descriptions*
262274
</FormLabel>
263275
{fields.map((item, index) => (
264-
<Box key={item.id} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
265-
<Controller
266-
name={`descriptions.${index}.name`}
267-
control={control}
268-
defaultValue={item.name || ''}
269-
render={({ field }) => (
270-
<TextField
271-
{...field}
272-
placeholder="Enter description..."
273-
fullWidth
274-
multiline
275-
variant="outlined"
276-
InputProps={{
277-
endAdornment: (
278-
<InputAdornment position="end">
279-
{index !== 0 && (
276+
<Stack key={item.id} direction={'row'} spacing={3} sx={{ mb: 3 }}>
277+
<Box
278+
sx={{
279+
display: 'flex',
280+
minWidth: '600px',
281+
alignItems: 'stretch'
282+
}}
283+
>
284+
<Controller
285+
name={`descriptions.${index}.name`}
286+
control={control}
287+
defaultValue={item.name || ''}
288+
render={({ field }) => (
289+
<TextField
290+
{...field}
291+
placeholder="Enter description..."
292+
fullWidth
293+
multiline
294+
variant="outlined"
295+
minRows={12}
296+
maxRows={20}
297+
InputProps={{
298+
endAdornment: index !== 0 && (
299+
<InputAdornment position="end" sx={{ alignSelf: 'flex-start', mt: 1 }}>
280300
<IconButton onClick={() => remove(index)}>
281301
<RemoveCircleOutlineIcon sx={{ color: 'white' }} />
282302
</IconButton>
283-
)}
284-
</InputAdornment>
285-
),
286-
disableUnderline: true,
287-
sx: { '& fieldset': { border: 'none' } }
288-
}}
289-
sx={{
290-
backgroundColor: theme.palette.background.paper,
291-
borderRadius: 5,
292-
mt: 1,
293-
width: '100%',
294-
...(index === 0 && {
295-
minHeight: '150px',
296-
fontSize: '1.25rem'
297-
})
298-
}}
299-
error={!!errors.descriptions?.[index]?.name}
300-
helperText={errors.descriptions?.[index]?.name?.message}
301-
/>
302-
)}
303-
/>
304-
</Box>
303+
</InputAdornment>
304+
),
305+
disableUnderline: true,
306+
sx: {
307+
'& fieldset': { border: 'none' },
308+
fontSize: '1.1rem',
309+
lineHeight: 1.6,
310+
padding: 2
311+
}
312+
}}
313+
sx={{
314+
backgroundColor: theme.palette.background.paper,
315+
borderRadius: 3,
316+
width: '100%',
317+
'& .MuiInputBase-root': {
318+
alignItems: 'flex-start'
319+
}
320+
}}
321+
error={!!errors.descriptions?.[index]?.name}
322+
helperText={errors.descriptions?.[index]?.name?.message}
323+
/>
324+
)}
325+
/>
326+
</Box>
327+
<Box
328+
sx={{
329+
backgroundColor: theme.palette.background.paper,
330+
borderRadius: 3,
331+
minWidth: '600px',
332+
padding: 2,
333+
display: 'flex',
334+
flexDirection: 'column',
335+
overflow: 'hidden',
336+
wordWrap: 'break-word',
337+
border: `1px solid ${theme.palette.divider}`,
338+
'& *': {
339+
wordWrap: 'break-word',
340+
overflowWrap: 'break-word'
341+
}
342+
}}
343+
>
344+
<Typography
345+
variant="caption"
346+
sx={{
347+
color: theme.palette.text.secondary,
348+
mb: 1,
349+
fontStyle: 'italic'
350+
}}
351+
>
352+
Preview:
353+
</Typography>
354+
<Box
355+
sx={{
356+
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+
}
389+
}}
390+
>
391+
{watch(`descriptions.${index}.name`) ? (
392+
<Markdown>{watch(`descriptions.${index}.name`)}</Markdown>
393+
) : (
394+
<Typography
395+
variant="body2"
396+
sx={{
397+
color: theme.palette.text.disabled,
398+
fontStyle: 'italic'
399+
}}
400+
>
401+
Start typing to see preview...
402+
</Typography>
403+
)}
404+
</Box>
405+
</Box>
406+
</Stack>
305407
))}
306408

307409
<IconButton

‎src/frontend/src/pages/HomePage/components/SubtaskSection.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { GridDragIcon } from '@mui/x-data-grid';
77
import { useToggleChecklist } from '../../../hooks/onboarding.hook';
88
import { useToast } from '../../../hooks/toasts.hooks';
99
import { isChecklistChecked } from '../../../utils/onboarding.utils';
10+
import Markdown from 'react-markdown';
1011

1112
interface SubtaskSectionProps {
1213
parentTask: Checklist;
@@ -89,7 +90,7 @@ const SubtaskSection: React.FC<SubtaskSectionProps> = ({ parentTask, checkedChec
8990
borderRadius: 2
9091
}}
9192
>
92-
<Typography color={theme.palette.common.white}>{parentTask.descriptions[0]}</Typography>
93+
<Markdown>{parentTask.descriptions[0]}</Markdown>
9394
</Grid>
9495
</Grid>
9596
) : (
@@ -113,7 +114,7 @@ const SubtaskSection: React.FC<SubtaskSectionProps> = ({ parentTask, checkedChec
113114
margin: 'auto'
114115
}}
115116
>
116-
<Typography color={theme.palette.common.white}>{description}</Typography>
117+
<Markdown>{description}</Markdown>
117118
</Grid>
118119
);
119120
})}

0 commit comments

Comments
 (0)