From bc787e0bbe4aeebfd0bc9774e0a5178d5a3336fb Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Tue, 28 Jul 2020 12:23:15 -0500 Subject: [PATCH 1/4] add markdown posts --- app/soapbox/actions/compose.js | 8 +++++ .../compose/components/compose_form.js | 3 ++ .../containers/compose_form_container.js | 1 + .../containers/markdown_button_container.js | 26 ++++++++++++++++ app/soapbox/reducers/compose.js | 10 ++++++ app/styles/components/status.scss | 31 +++++++++++++++++++ 6 files changed, 79 insertions(+) create mode 100644 app/soapbox/features/compose/containers/markdown_button_container.js 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; } From daf039d9bb098bb522007c96ba62db2b3ebc4b63 Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Tue, 28 Jul 2020 13:24:31 -0500 Subject: [PATCH 2/4] generalize markdown to content_type --- app/soapbox/actions/compose.js | 9 +++++---- .../features/compose/components/compose_form.js | 2 +- .../compose/containers/compose_form_container.js | 2 +- .../containers/markdown_button_container.js | 6 +++--- app/soapbox/reducers/compose.js | 14 +++++++------- 5 files changed, 17 insertions(+), 16 deletions(-) diff --git a/app/soapbox/actions/compose.js b/app/soapbox/actions/compose.js index 26d63a635..93e923c54 100644 --- a/app/soapbox/actions/compose.js +++ b/app/soapbox/actions/compose.js @@ -43,7 +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_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'; @@ -176,7 +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', + content_type: getState().getIn(['compose', 'content_type']), poll: getState().getIn(['compose', 'poll'], null), group_id: group ? group.get('id') : null, }, { @@ -497,9 +497,10 @@ export function changeComposeSpoilerness() { }; }; -export function changeComposeMarkdown() { +export function changeComposeMarkdown(value) { return { - type: COMPOSE_MARKDOWN_CHANGE, + type: COMPOSE_TYPE_CHANGE, + value, }; }; diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js index 3ef832bbe..dde769ac5 100644 --- a/app/soapbox/features/compose/components/compose_form.js +++ b/app/soapbox/features/compose/components/compose_form.js @@ -49,7 +49,7 @@ class ComposeForm extends ImmutablePureComponent { text: PropTypes.string.isRequired, suggestions: ImmutablePropTypes.list, spoiler: PropTypes.bool, - markdown: PropTypes.bool, + content_type: PropTypes.string, privacy: PropTypes.string, spoilerText: PropTypes.string, focusDate: PropTypes.instanceOf(Date), diff --git a/app/soapbox/features/compose/containers/compose_form_container.js b/app/soapbox/features/compose/containers/compose_form_container.js index 957c8d773..99189385d 100644 --- a/app/soapbox/features/compose/containers/compose_form_container.js +++ b/app/soapbox/features/compose/containers/compose_form_container.js @@ -16,7 +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']), + content_type: state.getIn(['compose', 'text/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 index fc3ae9435..1fd809966 100644 --- a/app/soapbox/features/compose/containers/markdown_button_container.js +++ b/app/soapbox/features/compose/containers/markdown_button_container.js @@ -10,15 +10,15 @@ const messages = defineMessages({ const mapStateToProps = (state, { intl }) => ({ label: 'MD', - title: intl.formatMessage(state.getIn(['compose', 'markdown']) ? messages.marked : messages.unmarked), - active: state.getIn(['compose', 'markdown']), + 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(changeComposeMarkdown()); + dispatch(changeComposeMarkdown(this.active ? 'text/plain' : 'text/markdown')); }, }); diff --git a/app/soapbox/reducers/compose.js b/app/soapbox/reducers/compose.js index b789139fb..c8294edec 100644 --- a/app/soapbox/reducers/compose.js +++ b/app/soapbox/reducers/compose.js @@ -21,7 +21,7 @@ import { COMPOSE_TAG_HISTORY_UPDATE, COMPOSE_SENSITIVITY_CHANGE, COMPOSE_SPOILERNESS_CHANGE, - COMPOSE_MARKDOWN_CHANGE, + COMPOSE_TYPE_CHANGE, COMPOSE_SPOILER_TEXT_CHANGE, COMPOSE_VISIBILITY_CHANGE, COMPOSE_COMPOSING_CHANGE, @@ -51,7 +51,7 @@ const initialState = ImmutableMap({ sensitive: false, spoiler: false, spoiler_text: '', - markdown: true, + content_type: 'text/markdown', privacy: null, text: '', focusDate: null, @@ -96,7 +96,7 @@ function clearAll(state) { map.set('text', ''); map.set('spoiler', false); map.set('spoiler_text', ''); - map.set('markdown', true); + map.set('content_type', 'text/markdown'); map.set('is_submitting', false); map.set('is_changing_upload', false); map.set('in_reply_to', null); @@ -218,9 +218,9 @@ export default function compose(state = initialState, action) { map.set('idempotencyKey', uuid()); }); - case COMPOSE_MARKDOWN_CHANGE: + case COMPOSE_TYPE_CHANGE: return state.withMutations(map => { - map.set('markdown', !state.get('markdown')); + map.set('content_type', action.value); map.set('idempotencyKey', uuid()); }); case COMPOSE_SPOILERNESS_CHANGE: @@ -251,7 +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); + map.set('content_type', 'text/markdown'); if (action.status.get('spoiler_text', '').length > 0) { map.set('spoiler', true); @@ -335,7 +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); + map.set('content_type', 'text/markdown'); if (action.status.get('spoiler_text').length > 0) { map.set('spoiler', true); From b31cf22f43cfdca9a5258aa71eb4bd299d6ced86 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 28 Jul 2020 13:36:10 -0500 Subject: [PATCH 3/4] Markdown refactoring --- app/soapbox/actions/compose.js | 2 +- .../features/compose/components/compose_form.js | 1 - .../compose/containers/compose_form_container.js | 1 - .../compose/containers/markdown_button_container.js | 4 ++-- app/soapbox/reducers/compose.js | 3 +-- app/styles/components/status.scss | 10 +++++++--- 6 files changed, 11 insertions(+), 10 deletions(-) diff --git a/app/soapbox/actions/compose.js b/app/soapbox/actions/compose.js index 93e923c54..8466d8069 100644 --- a/app/soapbox/actions/compose.js +++ b/app/soapbox/actions/compose.js @@ -497,7 +497,7 @@ export function changeComposeSpoilerness() { }; }; -export function changeComposeMarkdown(value) { +export function changeComposeContentType(value) { return { type: COMPOSE_TYPE_CHANGE, value, diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js index dde769ac5..af8ce4263 100644 --- a/app/soapbox/features/compose/components/compose_form.js +++ b/app/soapbox/features/compose/components/compose_form.js @@ -49,7 +49,6 @@ class ComposeForm extends ImmutablePureComponent { text: PropTypes.string.isRequired, suggestions: ImmutablePropTypes.list, spoiler: PropTypes.bool, - content_type: PropTypes.string, privacy: PropTypes.string, spoilerText: PropTypes.string, focusDate: PropTypes.instanceOf(Date), diff --git a/app/soapbox/features/compose/containers/compose_form_container.js b/app/soapbox/features/compose/containers/compose_form_container.js index 99189385d..0a7cefc96 100644 --- a/app/soapbox/features/compose/containers/compose_form_container.js +++ b/app/soapbox/features/compose/containers/compose_form_container.js @@ -16,7 +16,6 @@ const mapStateToProps = state => ({ suggestions: state.getIn(['compose', 'suggestions']), spoiler: state.getIn(['compose', 'spoiler']), spoilerText: state.getIn(['compose', 'spoiler_text']), - content_type: state.getIn(['compose', 'text/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 index 1fd809966..0b4a642ca 100644 --- a/app/soapbox/features/compose/containers/markdown_button_container.js +++ b/app/soapbox/features/compose/containers/markdown_button_container.js @@ -1,6 +1,6 @@ import { connect } from 'react-redux'; import TextIconButton from '../components/text_icon_button'; -import { changeComposeMarkdown } from '../../../actions/compose'; +import { changeComposeContentType } from '../../../actions/compose'; import { injectIntl, defineMessages } from 'react-intl'; const messages = defineMessages({ @@ -18,7 +18,7 @@ const mapStateToProps = (state, { intl }) => ({ const mapDispatchToProps = dispatch => ({ onClick() { - dispatch(changeComposeMarkdown(this.active ? 'text/plain' : 'text/markdown')); + dispatch(changeComposeContentType(this.active ? 'text/plain' : 'text/markdown')); }, }); diff --git a/app/soapbox/reducers/compose.js b/app/soapbox/reducers/compose.js index c8294edec..60418da85 100644 --- a/app/soapbox/reducers/compose.js +++ b/app/soapbox/reducers/compose.js @@ -214,8 +214,7 @@ 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')); - + map.set('sensitive', !state.get('sensitive')); map.set('idempotencyKey', uuid()); }); case COMPOSE_TYPE_CHANGE: diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 526f59cb0..7137874de 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -1,17 +1,21 @@ .status__content { - p, li { + p, + li { strong { font-weight: bold; } } - p, li { + p, + li { em { font-style: italic; } } - ul, ol, blockquote { + ul, + ol, + blockquote { margin-bottom: 20px; margin-left: 15px; } From eda4c7d6295419f942813cd0fe58c073351ba4d5 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Tue, 28 Jul 2020 13:53:01 -0500 Subject: [PATCH 4/4] Add markdown reducer tests --- app/soapbox/reducers/__tests__/compose-test.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/app/soapbox/reducers/__tests__/compose-test.js b/app/soapbox/reducers/__tests__/compose-test.js index c3ebe7ded..62eb472a9 100644 --- a/app/soapbox/reducers/__tests__/compose-test.js +++ b/app/soapbox/reducers/__tests__/compose-test.js @@ -32,6 +32,7 @@ describe('compose reducer', () => { default_sensitive: false, idempotencyKey: null, tagHistory: [], + content_type: 'text/markdown', }); }); @@ -777,4 +778,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' }); + }); });