Add markdown support (#115)

app/javascript/components/Board/NewPost.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
 import I18n from 'i18n-js';
 
 import NewPostForm from './NewPostForm';
 import Spinner from '../shared/Spinner';
 import {
-  MutedText,
   DangerText,
   SuccessText,
 } from '../shared/CustomTexts';
@@ -145,7 +145,15 @@ class NewPost extends React.Component<Props, State> {
     return (
       <div className="newPostContainer sidebarCard">
         <span className="boardTitle">{board.name}</span>
-        <p><MutedText>{board.description}</MutedText></p>
+
+        <ReactMarkdown
+          className="boardDescription"
+          disallowedTypes={['heading', 'image', 'html']}
+          unwrapDisallowed
+        >
+          {board.description}
+        </ReactMarkdown>
+
         {
           isLoggedIn ?
             <Button

app/javascript/components/Board/PostListItem.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
 
 import LikeButton from '../../containers/LikeButton';
 import CommentsNumber from '../shared/CommentsNumber';
 import PostStatusLabel from '../shared/PostStatusLabel';
-import { DescriptionText } from '../shared/CustomTexts';
 
 import IPostStatus from '../../interfaces/IPostStatus';
 
@@ -43,7 +43,9 @@ const PostListItem = ({
 
     <div className="postContainer">
       <span className="postTitle">{title}</span>
-      <DescriptionText limit={120}>{description}</DescriptionText>
+        <ReactMarkdown className="descriptionText" allowedTypes={['text']} unwrapDisallowed>
+          {description?.slice(0, 120)}
+        </ReactMarkdown>
 
       <div className="postDetails">
         <CommentsNumber number={commentsCount} />

app/javascript/components/Comments/Comment.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import I18n from 'i18n-js';
+import ReactMarkdown from 'react-markdown';
 import Gravatar from 'react-gravatar';
+import I18n from 'i18n-js';
 
 import NewComment from './NewComment';
 import Separator from '../shared/Separator';
@@ -60,7 +61,15 @@ const Comment = ({
           null
       }
     </div>
-    <p className="commentBody">{body}</p>
+
+    <ReactMarkdown
+      className="commentBody"
+      disallowedTypes={['heading', 'image', 'html']}
+      unwrapDisallowed
+    >
+      {body}
+    </ReactMarkdown>
+
     <div className="commentFooter">
       <a className="commentReplyButton commentLink" onClick={handleToggleCommentReply}>
         {

app/javascript/components/Post/PostP.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
 import I18n from 'i18n-js';
 
 import IPost from '../../interfaces/IPost';
@@ -172,7 +173,15 @@ class PostP extends React.Component<Props> {
                   />
                 </div>
             }
-            <p className="postDescription">{post.description}</p>
+            
+            <ReactMarkdown
+              className="postDescription"
+              disallowedTypes={['heading', 'image', 'html']}
+              unwrapDisallowed
+            >
+              {post.description}
+            </ReactMarkdown>
+            
             <MutedText>{friendlyDate(post.createdAt)}</MutedText>
           </div>
 

app/javascript/components/Post/PostUpdateList.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import I18n from 'i18n-js';
+import ReactMarkdown from 'react-markdown';
 import Gravatar from 'react-gravatar';
+import I18n from 'i18n-js';
 
 import { BoxTitleText, DangerText, CenteredMutedText, MutedText } from '../shared/CustomTexts';
 import Spinner from '../shared/Spinner';
@@ -46,9 +47,15 @@ const PostUpdateList = ({
               <span>{postUpdate.userFullName}</span>
             </div>
 
-            <p className="postUpdateListItemBody">
+            <div className="postUpdateListItemBody">
               { 'body' in postUpdate ?
-                  postUpdate.body
+                  <ReactMarkdown
+                    className="postUpdateBody"
+                    disallowedTypes={['heading', 'image', 'html']}
+                    unwrapDisallowed
+                  >
+                    {postUpdate.body}
+                  </ReactMarkdown>
                 :
                   <React.Fragment>
                     <i>{I18n.t('post.updates_box.status_change')}</i>&nbsp;
@@ -57,7 +64,7 @@ const PostUpdateList = ({
                     />
                   </React.Fragment>  
               }
-            </p>
+            </div>
 
             <MutedText>{friendlyDate(postUpdate.updatedAt)}</MutedText>
           </div>