diff options
-rw-r--r-- | web/react/components/post_body.jsx | 4 | ||||
-rw-r--r-- | web/react/package.json | 3 | ||||
-rw-r--r-- | web/react/utils/text_formatting.jsx | 9 |
3 files changed, 13 insertions, 3 deletions
diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index 3be615bb9..8020714cd 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -154,7 +154,7 @@ export default class PostBody extends React.Component { return ( <div className='post-body'> {comment} - <p + <div key={`${post.id}_message`} id={`${post.id}_message`} className={postClass} @@ -164,7 +164,7 @@ export default class PostBody extends React.Component { onClick={TextFormatting.handleClick} dangerouslySetInnerHTML={{__html: TextFormatting.formatText(this.state.message)}} /> - </p> + </div> {fileAttachmentHolder} {embed} </div> diff --git a/web/react/package.json b/web/react/package.json index 04e0f6bab..dd7d45f8a 100644 --- a/web/react/package.json +++ b/web/react/package.json @@ -9,7 +9,8 @@ "object-assign": "3.0.0", "react-zeroclipboard-mixin": "0.1.0", "twemoji": "1.4.1", - "babel-runtime": "5.8.24" + "babel-runtime": "5.8.24", + "marked": "0.3.5" }, "devDependencies": { "browserify": "11.0.1", diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx index c00193e37..62e6978a9 100644 --- a/web/react/utils/text_formatting.jsx +++ b/web/react/utils/text_formatting.jsx @@ -6,6 +6,10 @@ const Constants = require('./constants.jsx'); const UserStore = require('../stores/user_store.jsx'); const Utils = require('./utils.jsx'); +const marked = require('marked'); + +const markdownRenderer = new marked.Renderer(); + // Performs formatting of user posts including highlighting mentions and search terms and converting urls, hashtags, and // @mentions to links by taking a user's message and returning a string of formatted html. Also takes a number of options // as part of the second parameter: @@ -29,6 +33,11 @@ export function formatText(text, options = {}) { output = highlightCurrentMentions(output, tokens); } + // perform markdown parsing while we have an html-free input string + console.log('output before marked ' + output); + output = marked(output, {renderer: markdownRenderer}); + console.log('output after marked ' + output); + // reinsert tokens with formatted versions of the important words and phrases output = replaceTokens(output, tokens); |