diff --git a/app/javascript/mastodon/components/status_content.js b/app/javascript/mastodon/components/status_content.js index 93eba6765..24edf714e 100644 --- a/app/javascript/mastodon/components/status_content.js +++ b/app/javascript/mastodon/components/status_content.js @@ -6,6 +6,8 @@ import Permalink from './permalink'; import classnames from 'classnames'; import PollContainer from 'mastodon/containers/poll_container'; import { autoPlayGif } from 'mastodon/initial_state'; +import snarkdown from 'snarkdown'; +import DOMPurify from 'dompurify'; const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top) @@ -171,9 +173,25 @@ export default class StatusContent extends React.PureComponent { this.node = c; }; + /** + * format markdown after replacing and sanitizing status post + * @param htmlContent + * @returns {*} + */ + cleanHtmlAndFormatMarkdown(htmlContent){ + return snarkdown(DOMPurify.sanitize(htmlContent.trim() + .replace(/(\
)/ig, '')
+ .replace(/(\<\/p\>)/ig, '\r\n')
+ .replace('
', '\r\n'),
+ )) ;
+ }
+
render() {
const { status } = this.props;
+ let htmlFormatted = this.cleanHtmlAndFormatMarkdown(status.get('contentHtml'));
+ let spoilerFormatted = this.cleanHtmlAndFormatMarkdown(status.get('spoilerHtml'));
+
if (status.get('content').length === 0) {
return null;
}
@@ -182,9 +200,9 @@ export default class StatusContent extends React.PureComponent {
const renderReadMore = this.props.onClick && status.get('collapsed');
const renderViewThread = this.props.showThread && status.get('in_reply_to_id') && status.get('in_reply_to_account_id') === status.getIn(['account', 'id']);
- const content = { __html: status.get('contentHtml') };
- const spoilerContent = { __html: status.get('spoilerHtml') };
- const classNames = classnames('status__content', {
+ const content = { __html: htmlFormatted };
+ const spoilerContent = { __html: spoilerFormatted };
+ const classNames = classnames('formatted-markdown status__content', {
'status__content--with-action' : this.props.onClick && this.context.router,
'status__content--with-spoiler': status.get('spoiler_text').length > 0,
'status__content--collapsed' : renderReadMore,
@@ -249,7 +267,13 @@ export default class StatusContent extends React.PureComponent {
}
return (
-
{' '} @@ -262,7 +286,16 @@ export default class StatusContent extends React.PureComponent { {mentionsPlaceholder} -
+ ++ pre: +{!hidden && !!status.get('poll') &&
+ {content} +