diff --git a/app/soapbox/actions/compose.js b/app/soapbox/actions/compose.js index 28442f994..26d63a635 100644 --- a/app/soapbox/actions/compose.js +++ b/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_MARKDOWN_CHANGE = 'COMPOSE_MARKDOWN_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', 'markdown']) === true ? 'text/markdown' : 'text/plain', poll: getState().getIn(['compose', 'poll'], null), group_id: group ? group.get('id') : null, }, { @@ -495,6 +497,12 @@ export function changeComposeSpoilerness() { }; }; +export function changeComposeMarkdown() { + return { + type: COMPOSE_MARKDOWN_CHANGE, + }; +}; + export function changeComposeSpoilerText(text) { return { type: COMPOSE_SPOILER_TEXT_CHANGE, diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js index ae64a75f1..3ef832bbe 100644 --- a/app/soapbox/features/compose/components/compose_form.js +++ b/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'; @@ -48,6 +49,7 @@ class ComposeForm extends ImmutablePureComponent { text: PropTypes.string.isRequired, suggestions: ImmutablePropTypes.list, spoiler: PropTypes.bool, + markdown: PropTypes.bool, privacy: PropTypes.string, spoilerText: PropTypes.string, focusDate: PropTypes.instanceOf(Date), @@ -303,6 +305,7 @@ class ComposeForm extends ImmutablePureComponent { + {maxTootChars &&
}
diff --git a/app/soapbox/features/compose/containers/compose_form_container.js b/app/soapbox/features/compose/containers/compose_form_container.js index 0a7cefc96..957c8d773 100644 --- a/app/soapbox/features/compose/containers/compose_form_container.js +++ b/app/soapbox/features/compose/containers/compose_form_container.js @@ -16,6 +16,7 @@ const mapStateToProps = state => ({ suggestions: state.getIn(['compose', 'suggestions']), spoiler: state.getIn(['compose', 'spoiler']), spoilerText: state.getIn(['compose', 'spoiler_text']), + markdown: state.getIn(['compose', 'markdown']), privacy: state.getIn(['compose', 'privacy']), focusDate: state.getIn(['compose', 'focusDate']), caretPosition: state.getIn(['compose', 'caretPosition']), diff --git a/app/soapbox/features/compose/containers/markdown_button_container.js b/app/soapbox/features/compose/containers/markdown_button_container.js new file mode 100644 index 000000000..fc3ae9435 --- /dev/null +++ b/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 { changeComposeMarkdown } 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', 'markdown']) ? messages.marked : messages.unmarked), + active: state.getIn(['compose', 'markdown']), + ariaControls: 'markdown-input', +}); + +const mapDispatchToProps = dispatch => ({ + + onClick() { + dispatch(changeComposeMarkdown()); + }, + +}); + +export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton)); diff --git a/app/soapbox/reducers/compose.js b/app/soapbox/reducers/compose.js index c2e39e866..b789139fb 100644 --- a/app/soapbox/reducers/compose.js +++ b/app/soapbox/reducers/compose.js @@ -21,6 +21,7 @@ import { COMPOSE_TAG_HISTORY_UPDATE, COMPOSE_SENSITIVITY_CHANGE, COMPOSE_SPOILERNESS_CHANGE, + COMPOSE_MARKDOWN_CHANGE, COMPOSE_SPOILER_TEXT_CHANGE, COMPOSE_VISIBILITY_CHANGE, COMPOSE_COMPOSING_CHANGE, @@ -50,6 +51,7 @@ const initialState = ImmutableMap({ sensitive: false, spoiler: false, spoiler_text: '', + markdown: true, 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('markdown', true); map.set('is_submitting', false); map.set('is_changing_upload', false); map.set('in_reply_to', null); @@ -213,6 +216,11 @@ export default function compose(state = initialState, action) { return state.withMutations(map => { map.set('sensitive', !state.get('sensitive')); + map.set('idempotencyKey', uuid()); + }); + case COMPOSE_MARKDOWN_CHANGE: + return state.withMutations(map => { + map.set('markdown', !state.get('markdown')); map.set('idempotencyKey', uuid()); }); case COMPOSE_SPOILERNESS_CHANGE: @@ -243,6 +251,7 @@ export default function compose(state = initialState, action) { map.set('focusDate', new Date()); map.set('caretPosition', null); map.set('idempotencyKey', uuid()); + map.set('markdown', true); if (action.status.get('spoiler_text', '').length > 0) { map.set('spoiler', true); @@ -326,6 +335,7 @@ export default function compose(state = initialState, action) { map.set('focusDate', new Date()); map.set('caretPosition', null); map.set('idempotencyKey', uuid()); + map.set('markdown', true); if (action.status.get('spoiler_text').length > 0) { map.set('spoiler', true); diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 0d349764b..526f59cb0 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -1,3 +1,34 @@ +.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; }