Markdown in proposals and discussions

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

@@ -13,6 +13,7 @@ import { Profile } from "@joystream/types/members";
 import { Option } from "@polkadot/types/";
 import { formatBalance } from "@polkadot/util";
 import { PromiseComponent } from "@polkadot/joy-utils/react/components";
+import ReactMarkdown from 'react-markdown';
 
 type BodyProps = {
   title: string;
@@ -68,7 +69,7 @@ function ProposedMember(props: { memberId?: MemberId | number | null }) {
 // They take the params as array and return { LABEL: VALUE } object.
 const paramParsers: { [x in ProposalType]: (params: any[]) => { [key: string]: string | number | JSX.Element } } = {
   Text: ([content]) => ({
-    Content: content
+    Content: <ReactMarkdown className='TextProposalContent' source={content} linkTarget='_blank' />
   }),
   RuntimeUpgrade: ([wasm]) => {
     const buffer: Buffer = Buffer.from(wasm.replace("0x", ""), "hex");
@@ -123,10 +124,21 @@ const ProposalParams = styled.div`
   font-weight: bold;
   grid-template-columns: min-content 1fr;
   grid-row-gap: 0.5rem;
+  background: #f5f5f5;
+  padding: 2.5rem 0.5rem 1rem 0.5rem;
+  position: relative;
+  margin-top: 1rem;
   @media screen and (max-width: 767px) {
     grid-template-columns: 1fr;
   }
 `;
+const ParamsHeader = styled.h4`
+  position: absolute;
+  top: 0;
+  font-weight: normal;
+  font-size: 0.9em;
+  padding: 0.5rem;
+`;
 const ProposalParamName = styled.div`
   margin-right: 1rem;
   white-space: nowrap;
@@ -135,6 +147,9 @@ const ProposalParamValue = styled.div`
   color: black;
   word-wrap: break-word;
   word-break: break-all;
+  & .TextProposalContent {
+    font-weight: normal;
+  }
   @media screen and (max-width: 767px) {
     margin-top: -0.25rem;
   }
@@ -159,9 +174,11 @@ export default function Body({
         <Card.Header>
           <Header as="h1">{title}</Header>
         </Card.Header>
-        <Card.Description>{description}</Card.Description>
-        <Header as="h4">Parameters:</Header>
+        <Card.Description>
+          <ReactMarkdown source={description} linkTarget='_blank' />
+        </Card.Description>
         <ProposalParams>
+          <ParamsHeader>Parameters:</ParamsHeader>
           { Object.entries(parsedParams).map(([paramName, paramValue]) => (
             <React.Fragment key={paramName}>
               <ProposalParamName>{paramName}:</ProposalParamName>

pioneer/packages/joy-proposals/src/Proposal/discussion/DiscussionPost.tsx

@@ -6,6 +6,7 @@ import DiscussionPostForm from './DiscussionPostForm';
 import { MemberId } from "@joystream/types/members";
 import { useTransport } from "@polkadot/joy-utils/react/hooks";
 import styled from 'styled-components';
+import ReactMarkdown from 'react-markdown';
 
 const StyledComment = styled.div`
   display: flex;
@@ -90,7 +91,7 @@ export default function DiscussionPost({
           </AuthorAndDate>
           <ContentAndActions>
             <CommentContent>
-              <p>{text}</p>
+              <ReactMarkdown source={text} linkTarget='_blank' />
             </CommentContent>
             { canEdit && (
               <CommentActions>