c4patino/qoverflow
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made Question, Answer, and Mail render html

Browse source
This commit is contained in:
Ceferino Patino 2022-08-11 13:00:05 -05:00
commit 420f69d35d
9 changed files with 53 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/package.json
View file

@ -10,11 +10,13 @@
"@mui/material": "^5.9.1",
"acorn": "^8.8.0",
"crypto-js": "^4.1.1",
"dompurify": "^2.3.10",
"dotenv": "^16.0.1",
"formik": "^2.2.9",
"gh-pages": "^4.0.0",
"javascript-time-ago": "^2.5.6",
"js-cookie": "^3.0.1",
"marked": "^4.0.18",
"nvm": "^0.0.4",
"react": "^18.2.0",
"react-gravatar": "^2.6.3",

10
client/src/components/MailUnit.jsx
View file

@ -1,13 +1,8 @@
import {
Accordion,
AccordionSummary,
Typography,
AccordionDetails,
Box,
} from '@mui/material';
import { Accordion, AccordionSummary, Typography, AccordionDetails, Box } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ReactMarkdown from 'react-markdown';
import ReactTimeAgo from 'react-time-ago';
import { Markdown } from 'components';
export default function MailUnit({ sender, createdAt, subject, text }) {
return (
@ -24,6 +19,7 @@ export default function MailUnit({ sender, createdAt, subject, text }) {
</Box>
</AccordionSummary>
<AccordionDetails>
<Markdown content={text} />
<ReactMarkdown>{text}</ReactMarkdown>
</AccordionDetails>
</Accordion>

6
client/src/components/Markdown.jsx Normal file
View file

@ -0,0 +1,6 @@
import DOMPurify from 'dompurify';
import { marked } from 'marked';
export default function Markdown({ content }) {
return <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(marked.parse(content)) }} />;
}

4
client/src/components/MdPreview.jsx
View file

@ -1,5 +1,5 @@
import ReactMarkdown from 'react-markdown';
import { Paper, Typography, Button } from '@mui/material';
import { Markdown } from 'components';
export default function MdPreview({ show, toggleShow, content }) {
return (
@ -17,7 +17,7 @@ export default function MdPreview({ show, toggleShow, content }) {
{show && (
<Paper variant='outlined'>
<Typography variant='h5'> Text Preview: </Typography>
<ReactMarkdown children={content} />
<Markdown {...{ content }} />
</Paper>
)}
</div>

3
client/src/components/QAComponents/Answer.jsx
View file

@ -4,6 +4,7 @@ import ReactMarkdown from 'react-markdown';
import { CreationInfoTag } from 'controllers';
import { AnswerCommentsList, CommentControl, VoteControl } from 'controllers/QAControllers';
import { Markdown } from 'components';
export default function Answer({
accepted,
@ -45,7 +46,7 @@ export default function Answer({
</ButtonGroup>
<ListItemText>
<CreationInfoTag {...{ createdAt, creator, text: 'answered' }} />
<ReactMarkdown>{text}</ReactMarkdown>
<Markdown content={text} />
<CommentControl {...{ canComment, postComment }} />
{canAccept && (
<span>

3
client/src/components/QAComponents/Question.jsx
View file

@ -9,6 +9,7 @@ import {
Tooltip,
} from '@mui/material';
import ReactMarkdown from 'react-markdown';
import { Markdown } from 'components';
import { Link } from 'react-router-dom';
import { CreationInfoTag } from 'controllers';
import { CommentControl, CreateAnswer, VoteControl } from 'controllers/QAControllers';
@ -138,7 +139,7 @@ export default function Question({
/>
<ListItemText>
<CreationInfoTag {...{ createdAt, creator }} />
<ReactMarkdown>{text}</ReactMarkdown>
<Markdown content={text} />
<CommentControl {...{ postComment, canComment }} />
</ListItemText>
</ListItem>

2
client/src/components/index.js
View file

@ -11,6 +11,7 @@ import MdPreview from './MdPreview';
import Profile from './Profile';
import MobileNavbar from './MobileNavbar';
import LoadingBar from './LoadingBar';
import Markdown from './Markdown';
export {
CreationInfoTag,
@ -26,4 +27,5 @@ export {
Profile,
MobileNavbar,
LoadingBar,
Markdown,
};

4
client/src/controllers/FormControllers/FormController.js
View file

@ -17,7 +17,9 @@ export default function FormController({
setContent('');
}, [setContent]);
const handleChange = (e) => setContent(e.target.value);
const handleChange = (e) => {
if (e.target.id === 'text') setContent(e.target.value);
};
const formik = useFormik({
initialValues: fields.reduce((acc, { id }) => ({ ...acc, [id]: '' }), {}),

32
package-lock.json generated
View file

@ -23,11 +23,13 @@
"@mui/material": "^5.9.1",
"acorn": "^8.8.0",
"crypto-js": "^4.1.1",
"dompurify": "^2.3.10",
"dotenv": "^16.0.1",
"formik": "^2.2.9",
"gh-pages": "^4.0.0",
"javascript-time-ago": "^2.5.6",
"js-cookie": "^3.0.1",
"marked": "^4.0.18",
"nvm": "^0.0.4",
"react": "^18.2.0",
"react-gravatar": "^2.6.3",
@ -6921,6 +6923,11 @@
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/dompurify": {
"version": "2.3.10",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz",
"integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g=="
},
"node_modules/domutils": {
"version": "2.8.0",
"license": "BSD-2-Clause",
@ -12513,6 +12520,17 @@
"tmpl": "1.0.5"
}
},
"node_modules/marked": {
"version": "4.0.18",
"resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz",
"integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw==",
"bin": {
"marked": "bin/marked.js"
},
"engines": {
"node": ">= 12"
}
},
"node_modules/md5": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@ -24451,6 +24469,11 @@
"domelementtype": "^2.2.0"
}
},
"dompurify": {
"version": "2.3.10",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz",
"integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g=="
},
"domutils": {
"version": "2.8.0",
"requires": {
@ -27889,6 +27912,11 @@
"tmpl": "1.0.5"
}
},
"marked": {
"version": "4.0.18",
"resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz",
"integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw=="
},
"md5": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
@ -29553,14 +29581,16 @@
"@mui/material": "^5.9.1",
"acorn": "^8.8.0",
"crypto-js": "^4.1.1",
"dompurify": "*",
"dotenv": "^16.0.1",
"formik": "^2.2.9",
"gh-pages": "^4.0.0",
"javascript-time-ago": "^2.5.6",
"js-cookie": "^3.0.1",
"marked": "*",
"nvm": "^0.0.4",
"react": "^18.2.0",
"react-gravatar": "*",
"react-gravatar": "^2.6.3",
"react-helmet": "^6.1.0",
"react-markdown": "^8.0.3",
"react-router-dom": "^6.3.0",