format status and sanitize

This commit is contained in:
tykayn 2020-12-31 18:19:25 +01:00 committed by Baptiste Lemoine
parent 016b39ae75
commit 1ec8714c2c
3 changed files with 64 additions and 10 deletions

View File

@ -6,6 +6,8 @@ import Permalink from './permalink';
import classnames from 'classnames'; import classnames from 'classnames';
import PollContainer from 'mastodon/containers/poll_container'; import PollContainer from 'mastodon/containers/poll_container';
import { autoPlayGif } from 'mastodon/initial_state'; 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) 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; this.node = c;
}; };
/**
* format markdown after replacing and sanitizing status post
* @param htmlContent
* @returns {*}
*/
cleanHtmlAndFormatMarkdown(htmlContent){
return snarkdown(DOMPurify.sanitize(htmlContent.trim()
.replace(/(\<p\>)/ig, '')
.replace(/(\<\/p\>)/ig, '\r\n')
.replace('<br />', '\r\n'),
)) ;
}
render() { render() {
const { status } = this.props; const { status } = this.props;
let htmlFormatted = this.cleanHtmlAndFormatMarkdown(status.get('contentHtml'));
let spoilerFormatted = this.cleanHtmlAndFormatMarkdown(status.get('spoilerHtml'));
if (status.get('content').length === 0) { if (status.get('content').length === 0) {
return null; return null;
} }
@ -182,9 +200,9 @@ export default class StatusContent extends React.PureComponent {
const renderReadMore = this.props.onClick && status.get('collapsed'); 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 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 content = { __html: htmlFormatted };
const spoilerContent = { __html: status.get('spoilerHtml') }; const spoilerContent = { __html: spoilerFormatted };
const classNames = classnames('status__content', { const classNames = classnames('formatted-markdown status__content', {
'status__content--with-action' : this.props.onClick && this.context.router, 'status__content--with-action' : this.props.onClick && this.context.router,
'status__content--with-spoiler': status.get('spoiler_text').length > 0, 'status__content--with-spoiler': status.get('spoiler_text').length > 0,
'status__content--collapsed' : renderReadMore, 'status__content--collapsed' : renderReadMore,
@ -249,7 +267,13 @@ export default class StatusContent extends React.PureComponent {
} }
return ( return (
<div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <div
className={classNames}
ref={this.setRef}
tabIndex='0'
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
>
<p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}> <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
<span dangerouslySetInnerHTML={spoilerContent} /> <span dangerouslySetInnerHTML={spoilerContent} />
{' '} {' '}
@ -262,7 +286,16 @@ export default class StatusContent extends React.PureComponent {
{mentionsPlaceholder} {mentionsPlaceholder}
<div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''}`} dangerouslySetInnerHTML={content} /> <div
tabIndex={!hidden ? 0 : null}
className={` status__content__text ${!hidden ? 'status__content__text--visible' : ''}`}
dangerouslySetInnerHTML={content}
/>
<pre >
pre:
<br />
{content}
</pre >
{!hidden && !!status.get('poll') && <PollContainer pollId={status.get('poll')} />} {!hidden && !!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
@ -271,8 +304,18 @@ export default class StatusContent extends React.PureComponent {
); );
} else if (this.props.onClick) { } else if (this.props.onClick) {
const output = [ const output = [
<div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content'> <div
<div className='status__content__text status__content__text--visible' dangerouslySetInnerHTML={content} /> className={classNames}
ref={this.setRef}
tabIndex='0'
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
key='status-content'
>
<div
className='status__content__text status__content__text--visible'
dangerouslySetInnerHTML={content}
/>
{!!status.get('poll') && <PollContainer pollId={status.get('poll')} />} {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
@ -287,8 +330,15 @@ export default class StatusContent extends React.PureComponent {
return output; return output;
} else { } else {
return ( return (
<div className={classNames} ref={this.setRef} tabIndex='0'> <div
<div className='status__content__text status__content__text--visible' dangerouslySetInnerHTML={content} /> className={classNames}
ref={this.setRef}
tabIndex='0'
>
<div
className='status__content__text status__content__text--visible'
dangerouslySetInnerHTML={content}
/>
{!!status.get('poll') && <PollContainer pollId={status.get('poll')} />} {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}

View File

@ -75,6 +75,9 @@ class ComposeForm extends ImmutablePureComponent {
static defaultProps = { static defaultProps = {
showSearch : false, showSearch : false,
maxTootCharsLimit: 7777, maxTootCharsLimit: 7777,
text: '# salut les bibous\n' +
'\n' +
'hé ouais',
}; };
handleChange = (e) => { handleChange = (e) => {
@ -225,7 +228,7 @@ un lien vers [[www.wikipedia.org]]
html = snarkdown(md); html = snarkdown(md);
} else { } else {
html = snarkdown(markdownInput); html = snarkdown(markdownInput);
html = DOMPurify.sanitize(markdownInput); // html = DOMPurify.sanitize(markdownInput);
} }
this.textMarkdownConverted = html; this.textMarkdownConverted = html;
return html; return html;

View File

@ -7,6 +7,7 @@
} }
h1,h2,h3,h4,h5,h6{ h1,h2,h3,h4,h5,h6{
display:block;
&:first-letter{ &:first-letter{
text-transform: uppercase; text-transform: uppercase;
} }