Merge remote-tracking branch 'origin/develop' into add-images-to-polls

app/soapbox/features/compose/components/compose_form.js

@@ -11,6 +11,7 @@ import PollButtonContainer from '../containers/poll_button_container';
 import UploadButtonContainer from '../containers/upload_button_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
+import MarkdownButtonContainer from '../containers/markdown_button_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
 import EmojiPickerDropdown from '../containers/emoji_picker_dropdown_container';
 import PollFormContainer from '../containers/poll_form_container';
@@ -303,6 +304,7 @@ class ComposeForm extends ImmutablePureComponent {
               <PollButtonContainer />
               <PrivacyDropdownContainer />
               <SpoilerButtonContainer />
+              <MarkdownButtonContainer />
             </div>
             {maxTootChars && <div className='character-counter__wrapper'><CharacterCounter max={maxTootChars} text={text} /></div>}
             <div className='compose-form__publish'>

app/soapbox/features/compose/containers/markdown_button_container.js

@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import TextIconButton from '../components/text_icon_button';
+import { changeComposeContentType } from '../../../actions/compose';
+import { injectIntl, defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  marked: { id: 'compose_form.markdown.marked', defaultMessage: 'Post markdown enabled' },
+  unmarked: { id: 'compose_form.markdown.unmarked', defaultMessage: 'Post markdown disabled' },
+});
+
+const mapStateToProps = (state, { intl }) => ({
+  label: 'MD',
+  title: intl.formatMessage(state.getIn(['compose', 'content_type']) === 'text/markdown' ? messages.marked : messages.unmarked),
+  active: state.getIn(['compose', 'content_type']) === 'text/markdown',
+  ariaControls: 'markdown-input',
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onClick() {
+    dispatch(changeComposeContentType(this.active ? 'text/plain' : 'text/markdown'));
+  },
+
+});
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton));

app/soapbox/features/compose/containers/sensitive_button_container.js

@@ -12,6 +12,7 @@ const messages = defineMessages({
 
 const mapStateToProps = state => ({
   active: state.getIn(['compose', 'sensitive']),
+  disabled: state.getIn(['compose', 'spoiler']),
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -26,12 +27,13 @@ class SensitiveButton extends React.PureComponent {
 
   static propTypes = {
     active: PropTypes.bool,
+    disabled: PropTypes.bool,
     onClick: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
   };
 
   render() {
-    const { active, onClick, intl } = this.props;
+    const { active, disabled, onClick, intl } = this.props;
 
     return (
       <div className='compose-form__sensitive-button'>
@@ -41,6 +43,7 @@ class SensitiveButton extends React.PureComponent {
             type='checkbox'
             checked={active}
             onChange={onClick}
+            disabled={disabled}
           />
 
           <span className={classNames('checkbox', { active })} />