Add sanitized markdown support for epoch statement

api/hasura/actions/_handlers/updateUser.ts

@@ -53,7 +53,6 @@ async function handler(req: VercelRequest, res: VercelResponse) {
   }
 
   // Update the state after all external validations have passed
-
   const mutationResult = await adminClient.mutate(
     {
       update_users: [

package.json

@@ -37,6 +37,7 @@
     "@typeform/embed-react": "^1.18.0",
     "@types/morgan": "^1.9.3",
     "@types/react-helmet": "^6.1.5",
+    "@uiw/react-markdown-preview": "^4.1.5",
     "@web3-react/core": "6.1.9",
     "@web3-react/injected-connector": "6.0.7",
     "@web3-react/walletconnect-connector": "6.2.13",

src/pages/GivePage/EpochStatementDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { updateUser } from 'lib/gql/mutations';
 import debounce from 'lodash/debounce';
@@ -8,7 +8,16 @@ import { NavLink } from 'react-router-dom';
 import { ApeInfoTooltip } from '../../components';
 import { Check, X } from '../../icons/__generated';
 import { paths } from 'routes/paths';
-import { Avatar, Box, Button, Flex, Text, TextArea, ToggleButton } from 'ui';
+import {
+  Avatar,
+  Box,
+  Button,
+  Flex,
+  Text,
+  TextArea,
+  ToggleButton,
+  MarkdownPreview,
+} from 'ui';
 import { SaveState, SavingIndicator } from 'ui/SavingIndicator';
 
 import { Member } from './';
@@ -67,6 +76,7 @@ export const EpochStatementDrawer = ({
 
   // saveTimeout is the timeout handle for the buffered async saving
   const [saving, setSaving] = useState<SaveState>('stable');
+  const [showMarkdown, setShowMarkDown] = useState<boolean>(true);
 
   const { mutate: updateEpochStatement } = useMutation(
     async (bio: string) => updateUser({ circle_id: member.circle_id, bio }),
@@ -100,6 +110,12 @@ export const EpochStatementDrawer = ({
     [saveStatement]
   );
 
+  useEffect(() => {
+    if (!showMarkdown) {
+      document?.getElementById('epoch_statement')?.focus();
+    }
+  }, [showMarkdown]);
+
   return (
     <Box css={{ height: '100%', pt: '$md' }}>
       <Flex
@@ -184,20 +200,40 @@ export const EpochStatementDrawer = ({
         <Text inline semibold size="large">
           Epoch Statement
         </Text>
-        <TextArea
-          autoSize
-          css={{
-            backgroundColor: 'white',
-            width: '100%',
-            fontSize: '$medium',
-            whiteSpace: 'pre-wrap',
-          }}
-          value={statement}
-          onChange={e => statementChanged(e.target.value)}
-          placeholder="Summarize your Contributions"
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus={true}
-        />
+        {showMarkdown && !!statement.length ? (
+          <Box
+            onClick={() => {
+              setShowMarkDown(false);
+            }}
+          >
+            <MarkdownPreview source={statement} />
+          </Box>
+        ) : (
+          <TextArea
+            id="epoch_statement"
+            autoSize
+            css={{
+              backgroundColor: 'white',
+              width: '100%',
+              fontSize: '$medium',
+              whiteSpace: 'pre-wrap',
+            }}
+            value={statement}
+            onChange={e => statementChanged(e.target.value)}
+            placeholder="Summarize your Contributions"
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus={true}
+            onBlur={() => {
+              if (statement.length > 0) setShowMarkDown(true);
+            }}
+            onFocus={e => {
+              e.currentTarget.setSelectionRange(
+                e.currentTarget.value.length,
+                e.currentTarget.value.length
+              );
+            }}
+          />
+        )}
         <Flex
           css={{ justifyContent: 'flex-end', alignItems: 'center', mt: '$sm' }}
         >

src/pages/GivePage/GiveDrawer.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 
 import { ChevronDown, ChevronUp } from '../../icons/__generated';
-import { Avatar, Box, Button, Flex, Text, TextArea } from 'ui';
+import { Avatar, Box, Button, Flex, Text, TextArea, MarkdownPreview } from 'ui';
 import { SaveState, SavingIndicator } from 'ui/SavingIndicator';
 
 import { Contribution } from './Contribution';
@@ -252,9 +252,7 @@ export const GiveDrawer = ({
                 borderBottom: '1px solid $border',
               }}
             >
-              <Text css={{ whiteSpace: 'pre-wrap' }} p>
-                {member.bio}
-              </Text>
+              <MarkdownPreview source={member.bio} />
             </Box>
           </Box>
         )}

src/ui/MarkdownPreview/MarkdownPreview.stories.tsx

@@ -0,0 +1,22 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { MarkdownPreview } from './MarkdownPreview';
+
+export default {
+  component: MarkdownPreview,
+} as ComponentMeta<typeof MarkdownPreview>;
+
+const Template: ComponentStory<typeof MarkdownPreview> = args => (
+  <MarkdownPreview {...args} />
+);
+
+export const MarkdownPreviewStory = Template.bind({});
+
+MarkdownPreviewStory.args = {
+  source: `
+  # Coordinape
+  ## Coordinape
+  - Contribution 1
+  - Contribution 2
+  - Contribution 3 `,
+};

src/ui/MarkdownPreview/MarkdownPreview.tsx

@@ -0,0 +1,52 @@
+import ReactMarkdownPreview from '@uiw/react-markdown-preview';
+import { styled } from 'stitches.config';
+
+const StyledMarkdownPreview = styled(ReactMarkdownPreview, {
+  border: '1px solid transparent',
+  '&:focus': {
+    borderColor: '$borderMedium',
+    boxSizing: 'border-box',
+  },
+  borderRadius: '8px',
+
+  p: '$sm',
+  minHeight: 'calc($2xl * 2)',
+
+  color: '$text',
+  width: '100%',
+  'h1, h2, h3, h4, h5': {
+    borderBottom: 'none !important',
+    mt: '$md !important',
+    pt: '0 !important',
+  },
+  'h1, h2, h3, h4, h5, p': {
+    mb: '0 !important',
+    pb: '$sm !important',
+  },
+});
+
+export const MarkdownPreview = (
+  props: React.ComponentProps<typeof StyledMarkdownPreview>
+) => {
+  return (
+    <StyledMarkdownPreview
+      {...props}
+      skipHtml={false}
+      rehypeRewrite={(node, index, parent) => {
+        if (
+          node.type === 'element' &&
+          node.tagName &&
+          node.tagName === 'a' &&
+          parent &&
+          parent.type === 'element' &&
+          /^h(1|2|3|4|5|6)/.test(parent.tagName)
+        ) {
+          parent.children = parent.children.slice(1);
+        }
+      }}
+      warpperElement={{
+        'data-color-mode': 'light',
+      }}
+    />
+  );
+};

src/ui/index.ts

@@ -14,6 +14,7 @@ export * from './Icon/Icon';
 export * from './IconButton/IconButton';
 export * from './Image/Image';
 export * from './Link/Link';
+export * from './MarkdownPreview/MarkdownPreview';
 export * from './Modal';
 export * from './Panel/Panel';
 export * from './Popover/Popover';