Merge pull request #2340 from rodrigocorsi2/PLT-2076

PLT-2076: Add help text below the input box when a user starts typing

web/react/components/textbox.jsx

@@ -129,12 +129,12 @@ export default class Textbox extends React.Component {
     }
 
     render() {
+        const hasText = this.props.messageText.length > 0;
+
         let previewLink = null;
         if (Utils.isFeatureEnabled(PreReleaseFeatures.MARKDOWN_PREVIEW)) {
-            const previewLinkVisible = this.props.messageText.length > 0;
             previewLink = (
                 <a
-                    style={{visibility: previewLinkVisible ? 'visible' : 'hidden'}}
                     onClick={this.showPreview}
                     className='textbox-preview-link'
                 >
@@ -153,6 +153,51 @@ export default class Textbox extends React.Component {
             );
         }
 
+        let helpText = (
+            <div
+                style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '1' : '0'}}
+                className='help_format_text'
+            >
+                <b>
+                    <FormattedMessage
+                        id='textbox.bold'
+                        defaultMessage='**bold**'
+                    />
+                </b>
+                <i>
+                    <FormattedMessage
+                        id='textbox.italic'
+                        defaultMessage='_italic_'
+                    />
+                </i>
+                <span>~~<strike>
+                    <FormattedMessage
+                        id='textbox.strike'
+                        defaultMessage='strike'
+                    />
+                </strike>~~ </span>
+                <code>
+                    <FormattedMessage
+                        id='textbox.inlinecode'
+                        defaultMessage='`inline code`'
+                    />
+                </code>
+                <code>
+                    <FormattedMessage
+                        id='textbox.preformatted'
+                        defaultMessage='```preformatted```'
+                    />
+                </code>
+                <span>
+                    <FormattedMessage
+                        id='textbox.quote'
+                        defaultMessage='>quote'
+                    />
+                </span>
+                {previewLink}
+            </div>
+        );
+
         return (
             <div
                 ref='wrapper'
@@ -184,7 +229,7 @@ export default class Textbox extends React.Component {
                     dangerouslySetInnerHTML={{__html: this.state.preview ? TextFormatting.formatText(this.props.messageText) : ''}}
                 >
                 </div>
-                {previewLink}
+                {helpText}
                 <a
                     target='_blank'
                     href='http://docs.mattermost.com/help/getting-started/messaging-basics.html'