Add formatted content component

react-ui/src/components/EntryDescriptionDrawer.jsx

@@ -21,9 +21,8 @@ import Countdown from './Countdown';
 import DrawerSectionHeader from './DrawerSectionHeader';
 import FiveStar from './FiveStar';
 import FmpIcon from './FmpIcon';
-import HtmlWrapper from './HtmlWrapper';
+import FormattedContent from './FormattedContent';
 import ListItemButton from './ListItemButton';
-import RedditMarkdown from './RedditMarkdown';
 import RedditUserAttribution from './RedditUserAttribution';
 import VotingSlider from './VotingSlider';
 
@@ -65,7 +64,11 @@ function EntryDescriptionDrawer({ entryId }) {
 
   const {
     data: {
-      categories, entries = [], isContestMode, localVoting, winners = [],
+      categories,
+      entries = [],
+      isContestMode,
+      localVoting,
+      winners = [],
     },
   } = useSwrContest();
   const {
@@ -110,21 +113,30 @@ function EntryDescriptionDrawer({ entryId }) {
       </Box>
       {category && (
         <Box paddingTop={1}>
-          <CategoryLabel categories={categories} category={category} categoryRank={categoryRank} />
+          <CategoryLabel
+            categories={categories}
+            category={category}
+            categoryRank={categoryRank}
+          />
         </Box>
       )}
       {isContestMode ? (
         <>
           <DrawerSectionHeader>Submit Vote</DrawerSectionHeader>
           {!isTouchScreen && (
             <Alert severity="info">
-              You can now vote by typing 0-5 on your keyboard, or type c to clear your vote.
+              You can now vote by typing 0-5 on your keyboard, or type c to
+              clear your vote.
             </Alert>
           )}
           {!differenceInDays(voteEndDate, new Date()) && (
             <Countdown endDate={voteEndDate} fontSize="small" />
           )}
-          <Box className={classes.votingContainer} alignItems="center" display="flex">
+          <Box
+            className={classes.votingContainer}
+            alignItems="center"
+            display="flex"
+          >
             <VotingSlider entryId={imgurId ?? id} rating={rating} />
           </Box>
         </>
@@ -140,13 +152,21 @@ function EntryDescriptionDrawer({ entryId }) {
         </Box>
       )}
       <DrawerSectionHeader>Description</DrawerSectionHeader>
-      {markdown ? <RedditMarkdown text={description} /> : <HtmlWrapper html={description} />}
+      <FormattedContent content={description} isMarkdown={markdown} />
       <DrawerSectionHeader>Links</DrawerSectionHeader>
       <List>
         {!localVoting && (
-          <ListItemButton href={redditPermalink} Icon={RedditIcon} text="Open Reddit comment" />
+          <ListItemButton
+            href={redditPermalink}
+            Icon={RedditIcon}
+            text="Open Reddit comment"
+          />
         )}
-        <ListItemButton href={flagWaverLink} Icon={FlagTwoToneIcon} text="Open FlagWaver" />
+        <ListItemButton
+          href={flagWaverLink}
+          Icon={FlagTwoToneIcon}
+          text="Open FlagWaver"
+        />
         <ListItemButton
           href="https://flagmaker-print.com/"
           Icon={FmpIcon}

react-ui/src/components/RedditMarkdown.jsx → react-ui/src/components/FormattedContent.jsx

@@ -1,11 +1,16 @@
+/* eslint-disable react/no-danger */
 import { makeStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { markdown } from 'snudown-js';
 
-import HtmlWrapper from './HtmlWrapper';
-
 const useStyles = makeStyles((theme) => ({
+  html: {
+    overflowWrap: 'break-word',
+    '& p': {
+      marginTop: 0,
+    },
+  },
   markdown: {
     fontSize: '1.0769230769230769em',
     lineHeight: '20px',
@@ -60,26 +65,40 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-/**
- * A component that renders Reddit markdown text as HTML.
- *
- * @param props
- * @param {string} [props.className] - Additional classes to apply.
- * @param {string} props.text - The Reddit markdown text to render as HTML.
- */
-function RedditMarkdown({ className, text }) {
+const parser = new DOMParser();
+
+function FormattedContent({ className, content, isMarkdown }) {
   const classes = useStyles();
 
-  return <HtmlWrapper className={clsx(classes.markdown, className)} html={markdown(text)} />;
+  const html = isMarkdown ? markdown(content) : content;
+  const htmlContent = parser.parseFromString(html, 'text/html');
+  const anchors = Array.from(htmlContent.getElementsByTagName('a'));
+  anchors.forEach((a) => {
+    a.setAttribute('rel', 'noopener noreferrer');
+    a.setAttribute('target', 'vexillology-contests');
+  });
+
+  return (
+    <div
+      className={clsx(
+        { [classes.markdown]: isMarkdown },
+        classes.html,
+        className,
+      )}
+      dangerouslySetInnerHTML={{ __html: htmlContent.body.innerHTML }}
+    />
+  );
 }
 
-RedditMarkdown.propTypes = {
+FormattedContent.propTypes = {
   className: PropTypes.string,
-  text: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+  isMarkdown: PropTypes.bool,
 };
 
-RedditMarkdown.defaultProps = {
-  className: undefined,
+FormattedContent.defaultProps = {
+  className: '',
+  isMarkdown: false,
 };
 
-export default RedditMarkdown;
+export default FormattedContent;

react-ui/src/components/StaticContent.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+
+import useSwrStaticContent from '../data/useSwrStaticContent';
+
+import FormattedContent from './FormattedContent';
+
+/**
+ * Renders static content from Firebase.
+ * @param props
+ * @param {string} [props.className] - Additional classes to apply.
+ * @param {string} props.id - DB ID of static content.
+ */
+function StaticContent({ className, id }) {
+  const { data } = useSwrStaticContent(id);
+  if (!data) {
+    return null;
+  }
+
+  const { content, markdown } = data;
+
+  return <FormattedContent {...{ className, content, isMarkdown: markdown }} />;
+}
+
+StaticContent.propTypes = {
+  className: PropTypes.string,
+  id: PropTypes.string.isRequired,
+};
+
+StaticContent.defaultProps = {
+  className: undefined,
+};
+
+export default StaticContent;