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

app/soapbox/actions/compose.js

@@ -43,6 +43,7 @@ export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT';
 
 export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE';
 export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE';
+export const COMPOSE_TYPE_CHANGE = 'COMPOSE_TYPE_CHANGE';
 export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE';
 export const COMPOSE_VISIBILITY_CHANGE  = 'COMPOSE_VISIBILITY_CHANGE';
 export const COMPOSE_LISTABILITY_CHANGE = 'COMPOSE_LISTABILITY_CHANGE';
@@ -175,6 +176,7 @@ export function submitCompose(routerHistory, group) {
       sensitive: getState().getIn(['compose', 'sensitive']),
       spoiler_text: getState().getIn(['compose', 'spoiler_text'], ''),
       visibility: getState().getIn(['compose', 'privacy']),
+      content_type: getState().getIn(['compose', 'content_type']),
       poll: getState().getIn(['compose', 'poll'], null),
       group_id: group ? group.get('id') : null,
     }, {
@@ -490,6 +492,13 @@ export function changeComposeSpoilerness() {
   };
 };
 
+export function changeComposeContentType(value) {
+  return {
+    type: COMPOSE_TYPE_CHANGE,
+    value,
+  };
+};
+
 export function changeComposeSpoilerText(text) {
   return {
     type: COMPOSE_SPOILER_TEXT_CHANGE,

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 })} />

app/soapbox/reducers/__tests__/alerts-test.js

@@ -50,18 +50,18 @@ describe('alerts reducer', () => {
   // });
 
   it('should handle ALERT_CLEAR', () => {
-      const state = ImmutableList([
-        {
-          key: 0,
-          message: 'message_1',
-          title: 'title_1',
-        },
-        {
-          key: 1,
-          message: 'message_2',
-          title: 'title_2',
-        },
-      ]);
+    const state = ImmutableList([
+      {
+        key: 0,
+        message: 'message_1',
+        title: 'title_1',
+      },
+      {
+        key: 1,
+        message: 'message_2',
+        title: 'title_2',
+      },
+    ]);
     const action = {
       type: actions.ALERT_CLEAR,
     };

app/soapbox/reducers/__tests__/compose-test.js

@@ -32,6 +32,7 @@ describe('compose reducer', () => {
       default_sensitive: false,
       idempotencyKey: null,
       tagHistory: [],
+      content_type: 'text/markdown',
     });
   });
 
@@ -168,8 +169,18 @@ describe('compose reducer', () => {
     });
   });
 
+  it('should handle COMPOSE_SENSITIVITY_CHANGE on Mark Sensitive click, don\'t toggle if spoiler active', () => {
+    const state = ImmutableMap({ spoiler: true, sensitive: true, idempotencyKey: null });
+    const action = {
+      type: actions.COMPOSE_SENSITIVITY_CHANGE,
+    };
+    expect(reducer(state, action).toJS()).toMatchObject({
+      sensitive: true,
+    });
+  });
+
   it('should handle COMPOSE_SENSITIVITY_CHANGE on Mark Sensitive click, toggle if spoiler inactive', () => {
-    const state = ImmutableMap({ sensitive: true });
+    const state = ImmutableMap({ spoiler: false, sensitive: true });
     const action = {
       type: actions.COMPOSE_SENSITIVITY_CHANGE,
     };
@@ -777,4 +788,11 @@ describe('compose reducer', () => {
   //   });
   // });
 
+  it('sets the post content-type', () => {
+    const action = {
+      type: actions.COMPOSE_TYPE_CHANGE,
+      value: 'text/plain',
+    };
+    expect(reducer(undefined, action).toJS()).toMatchObject({ content_type: 'text/plain' });
+  });
 });

app/soapbox/reducers/__tests__/notifications-test.js

@@ -206,16 +206,16 @@ describe('notifications reducer', () => {
     };
     expect(reducer(state, action)).toEqual(ImmutableMap({
       items: ImmutableList([
-                ImmutableMap({
-                  id: '10743',
-                  type: 'favourite',
-                  account: '9v5c6xSEgAi3Zu1Lv6',
-                  created_at: '2020-06-10T02:51:05.000Z',
-                  status: '9vvNxoo5EFbbnfdXQu',
-                  emoji: undefined,
-                  is_seen: true,
-                }),
-            ]),
+        ImmutableMap({
+          id: '10743',
+          type: 'favourite',
+          account: '9v5c6xSEgAi3Zu1Lv6',
+          created_at: '2020-06-10T02:51:05.000Z',
+          status: '9vvNxoo5EFbbnfdXQu',
+          emoji: undefined,
+          is_seen: true,
+        }),
+      ]),
       top: false,
       unread: 2,
     }));

app/soapbox/reducers/compose.js

@@ -21,6 +21,7 @@ import {
   COMPOSE_TAG_HISTORY_UPDATE,
   COMPOSE_SENSITIVITY_CHANGE,
   COMPOSE_SPOILERNESS_CHANGE,
+  COMPOSE_TYPE_CHANGE,
   COMPOSE_SPOILER_TEXT_CHANGE,
   COMPOSE_VISIBILITY_CHANGE,
   COMPOSE_COMPOSING_CHANGE,
@@ -50,6 +51,7 @@ const initialState = ImmutableMap({
   sensitive: false,
   spoiler: false,
   spoiler_text: '',
+  content_type: 'text/markdown',
   privacy: null,
   text: '',
   focusDate: null,
@@ -94,6 +96,7 @@ function clearAll(state) {
     map.set('text', '');
     map.set('spoiler', false);
     map.set('spoiler_text', '');
+    map.set('content_type', 'text/markdown');
     map.set('is_submitting', false);
     map.set('is_changing_upload', false);
     map.set('in_reply_to', null);
@@ -114,7 +117,7 @@ function appendMedia(state, media) {
     map.set('resetFileKey', Math.floor((Math.random() * 0x10000)));
     map.set('idempotencyKey', uuid());
 
-    if (prevSize === 0 && state.get('default_sensitive')) {
+    if (prevSize === 0 && (state.get('default_sensitive') || state.get('spoiler'))) {
       map.set('sensitive', true);
     }
   });
@@ -211,7 +214,15 @@ export default function compose(state = initialState, action) {
       .set('is_composing', false);
   case COMPOSE_SENSITIVITY_CHANGE:
     return state.withMutations(map => {
-      map.set('sensitive', !state.get('sensitive'));
+      if (!state.get('spoiler')) {
+        map.set('sensitive', !state.get('sensitive'));
+      }
+
+      map.set('idempotencyKey', uuid());
+    });
+  case COMPOSE_TYPE_CHANGE:
+    return state.withMutations(map => {
+      map.set('content_type', action.value);
       map.set('idempotencyKey', uuid());
     });
   case COMPOSE_SPOILERNESS_CHANGE:
@@ -219,6 +230,10 @@ export default function compose(state = initialState, action) {
       map.set('spoiler_text', '');
       map.set('spoiler', !state.get('spoiler'));
       map.set('idempotencyKey', uuid());
+
+      if (!state.get('sensitive') && state.get('media_attachments').size >= 1) {
+        map.set('sensitive', true);
+      }
     });
   case COMPOSE_SPOILER_TEXT_CHANGE:
     return state
@@ -242,6 +257,7 @@ export default function compose(state = initialState, action) {
       map.set('focusDate', new Date());
       map.set('caretPosition', null);
       map.set('idempotencyKey', uuid());
+      map.set('content_type', 'text/markdown');
 
       if (action.status.get('spoiler_text', '').length > 0) {
         map.set('spoiler', true);
@@ -325,6 +341,7 @@ export default function compose(state = initialState, action) {
       map.set('focusDate', new Date());
       map.set('caretPosition', null);
       map.set('idempotencyKey', uuid());
+      map.set('content_type', 'text/markdown');
 
       if (action.status.get('spoiler_text').length > 0) {
         map.set('spoiler', true);

app/styles/components/audio-player.scss

@@ -173,11 +173,11 @@
     white-space: nowrap;
     overlow: hidden;
     text-overflow: ellipsis;
-    background: hsl( var(--brand-color_h), var(--brand-color_s), 20% );
+    background: hsl(var(--brand-color_h), var(--brand-color_s), 20%);
     padding: 5px;
 
     &__label {
-      color: white;
+      color: #ffffff;
     }
 
     button {

app/styles/components/columns.scss

@@ -260,7 +260,7 @@
   position: absolute;
   right: 0;
   top: -49px;
-  
+
   @media screen and (max-width: $nav-breakpoint-2) {
     top: -35px;
     font-size: 14px;

app/styles/components/status.scss

@@ -1,3 +1,38 @@
+.status__content {
+  p,
+  li {
+    strong {
+      font-weight: bold;
+    }
+  }
+
+  p,
+  li {
+    em {
+      font-style: italic;
+    }
+  }
+
+  ul,
+  ol,
+  blockquote {
+    margin-bottom: 20px;
+    margin-left: 15px;
+  }
+
+  ul {
+    list-style: disc inside none;
+  }
+
+  ol {
+    list-style: decimal inside none;
+  }
+
+  blockquote p {
+    font-style: italic;
+  }
+}
+
 .status__content--with-action {
   cursor: pointer;
 }