Merge branch 'feature/108-wrap-posts-in-markdown-viewer' into 'develop'

feat: add markdown support for topic titles and posts

See merge request ecentrics/concordia!23

packages/concordia-app/src/components/PostList/PostListRow/index.jsx

@@ -7,6 +7,7 @@ import {
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import TimeAgo from 'react-timeago';
+import ReactMarkdown from 'react-markdown';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
@@ -18,6 +19,7 @@ import determineKVAddress from '../../../utils/orbitUtils';
 import { POST_CONTENT } from '../../../constants/orbit/PostsDatabaseKeys';
 import ProfileImage from '../../ProfileImage';
 import PostVoting from '../PostVoting';
+import targetBlank from '../../../utils/markdownUtils';
 
 const { orbit } = breeze;
 
@@ -136,7 +138,15 @@ const PostListRow = (props) => {
               </Feed.Summary>
               <Feed.Extra>
                   {postContent !== null
-                    ? postContent
+                    ? (
+                        <ReactMarkdown
+                          source={postContent}
+                          renderers={{
+                            link: targetBlank(),
+                            linkReference: targetBlank(),
+                          }}
+                        />
+                    )
                     : <Placeholder><Placeholder.Line length="long" /></Placeholder>}
               </Feed.Extra>
               <PostVoting postId={postId} postAuthorAddress={postAuthorAddress} />

packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx

@@ -7,6 +7,7 @@ import {
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import TimeAgo from 'react-timeago';
+import ReactMarkdown from 'react-markdown';
 import { useHistory } from 'react-router';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -18,6 +19,7 @@ import { breeze } from '../../../redux/store';
 import './styles.css';
 import determineKVAddress from '../../../utils/orbitUtils';
 import { TOPIC_SUBJECT } from '../../../constants/orbit/TopicsDatabaseKeys';
+import targetBlank from '../../../utils/markdownUtils';
 
 const { orbit } = breeze;
 
@@ -118,7 +120,15 @@ const TopicListRow = (props) => {
                             <Grid.Row>
                                 <Grid.Column floated="left" width={14} className="topic-row-subject">
                                     {topicSubject !== null
-                                      ? topicSubject
+                                      ? (
+                                          <ReactMarkdown
+                                            source={topicSubject}
+                                            renderers={{
+                                              link: targetBlank(),
+                                              linkReference: targetBlank(),
+                                            }}
+                                          />
+                                      )
                                       : <Placeholder><Placeholder.Line length="very long" /></Placeholder>}
                                 </Grid.Column>
                                 <Grid.Column floated="right" width={2} textAlign="right">

packages/concordia-app/src/utils/markdownUtils.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const targetBlank = () => ({ href, children }) => (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+        {children}
+    </a>
+);
+
+export default targetBlank;

packages/concordia-app/src/views/About/index.jsx

@@ -5,15 +5,10 @@ import ReactMarkdown from 'react-markdown';
 import { Container, Image, Segment } from 'semantic-ui-react';
 import AboutMd from '../../assets/About.md';
 import appLogo from '../../assets/images/app_logo_circle.svg';
+import targetBlank from '../../utils/markdownUtils';
 
 import './styles.css';
 
-const targetBlank = () => ({ href, children }) => (
-    <a href={href} target="_blank" rel="noopener noreferrer">
-        {children}
-    </a>
-);
-
 const About = () => {
   const [aboutMd, setAboutMd] = useState('');
 

packages/concordia-app/src/views/Topic/TopicView/index.jsx

@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom';
 import { useHistory } from 'react-router';
 import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
 import { TOPICS_DATABASE, USER_DATABASE } from 'concordia-shared/src/constants/orbit/OrbitDatabases';
+import ReactMarkdown from 'react-markdown';
 import { breeze, drizzle } from '../../../redux/store';
 import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
 import './styles.css';
@@ -15,6 +16,7 @@ import TopicPostList from './TopicPostList';
 import determineKVAddress from '../../../utils/orbitUtils';
 import { TOPIC_SUBJECT } from '../../../constants/orbit/TopicsDatabaseKeys';
 import PostCreate from '../../../components/PostCreate';
+import targetBlank from '../../../utils/markdownUtils';
 
 const { contracts: { [FORUM_CONTRACT]: { methods: { getTopic: { cacheCall: getTopicChainData } } } } } = drizzle;
 const { orbit } = breeze;
@@ -122,11 +124,21 @@ const TopicView = (props) => {
               >
                   <div id="topic-header">
                       <Header as="h2">
-                          {topicSubject || (
-                              <Placeholder id="subject-placeholder">
-                                  <Placeholder.Line />
-                              </Placeholder>
-                          )}
+                          {topicSubject
+                            ? (
+                                <ReactMarkdown
+                                  source={topicSubject}
+                                  renderers={{
+                                    link: targetBlank(),
+                                    linkReference: targetBlank(),
+                                  }}
+                                />
+                            )
+                            : (
+                                <Placeholder id="subject-placeholder">
+                                    <Placeholder.Line />
+                                </Placeholder>
+                            )}
                       </Header>
 
                       <div id="topic-metadata">