ProposalPreview markdown

pioneer/packages/joy-proposals/src/Proposal/ProposalPreview.tsx

@@ -5,6 +5,7 @@ import { ParsedProposal } from '@polkadot/joy-utils/types/proposals';
 import { getExtendedStatus } from './ProposalDetails';
 import { BlockNumber } from '@polkadot/types/interfaces';
 import styled from 'styled-components';
+import ReactMarkdown from 'react-markdown';
 
 import './Proposal.css';
 
@@ -17,6 +18,12 @@ const ProposalIdBox = styled.div`
   font-size: 1.1em;
 `;
 
+const ProposalDesc = styled.div`
+  padding: 0.5rem 1rem;
+  border: 1px solid #ddd;
+  border-radius: 0.25rem;
+`;
+
 export type ProposalPreviewProps = {
   proposal: ParsedProposal;
   bestNumber?: BlockNumber;
@@ -33,7 +40,11 @@ export default function ProposalPreview ({ proposal, bestNumber }: ProposalPrevi
         <Card.Header>
           <Header as="h1">{proposal.title}</Header>
         </Card.Header>
-        <Card.Description>{proposal.description}</Card.Description>
+        <Card.Description>
+          <ProposalDesc>
+            <ReactMarkdown source={proposal.description} linkTarget='_blank' />
+          </ProposalDesc>
+        </Card.Description>
         <Details proposal={proposal} extendedStatus={extendedStatus} />
       </Card.Content>
     </Card>