format status and sanitize

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(/(\<p\>)/ig, '')
+      .replace(/(\<\/p\>)/ig, '\r\n')
+      .replace('<br />', '\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 (
-        <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 }}>
             <span dangerouslySetInnerHTML={spoilerContent} />
             {' '}
@@ -262,7 +286,16 @@ export default class StatusContent extends React.PureComponent {
 
           {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')} />}
 
@@ -271,8 +304,18 @@ export default class StatusContent extends React.PureComponent {
       );
     } else if (this.props.onClick) {
       const output = [
-        <div 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} />
+        <div
+          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')} />}
 
@@ -287,8 +330,15 @@ export default class StatusContent extends React.PureComponent {
       return output;
     } else {
       return (
-        <div className={classNames} ref={this.setRef} tabIndex='0'>
-          <div className='status__content__text status__content__text--visible' dangerouslySetInnerHTML={content} />
+        <div
+          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')} />}
 

app/javascript/mastodon/features/compose/components/compose_form.js

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

app/javascript/styles/bliss/_markdown.scss

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