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;
}