[feature] Always show content warning: use existing glitch feature (#1)

The modifications you made are somewhat janky; for instance, editing a toot with an existing content warning makes the UI look very weird and doesn't quite work.

Glitch already has a feature for this, so simply turn it on by default. This should do the same thing.

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/1
Co-authored-by: julia <midnight@trainwit.ch>
Co-committed-by: julia <midnight@trainwit.ch>

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -21,6 +21,7 @@ import PollButtonContainer from '../containers/poll_button_container';
 import PollFormContainer from '../containers/poll_form_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
 import ReplyIndicatorContainer from '../containers/reply_indicator_container';
+import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import UploadButtonContainer from '../containers/upload_button_container';
 import UploadFormContainer from '../containers/upload_form_container';
 import WarningContainer from '../containers/warning_container';
@@ -48,6 +49,7 @@ class ComposeForm extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     text: PropTypes.string.isRequired,
     suggestions: ImmutablePropTypes.list,
+    spoiler: PropTypes.bool,
     privacy: PropTypes.string,
     spoilerText: PropTypes.string,
     focusDate: PropTypes.instanceOf(Date),
@@ -242,12 +244,13 @@ class ComposeForm extends ImmutablePureComponent {
 
         <ReplyIndicatorContainer />
 
-        <div className={'spoiler-input spoiler-input--visible'} ref={this.setRef}>
+        <div className={`spoiler-input ${this.props.spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef} aria-hidden={!this.props.spoiler}>
           <AutosuggestInput
             placeholder={intl.formatMessage(messages.spoiler_placeholder)}
             value={this.props.spoilerText}
             onChange={this.handleChangeSpoilerText}
             onKeyDown={this.handleKeyDown}
+            disabled={!this.props.spoiler}
             ref={this.setSpoilerText}
             suggestions={this.props.suggestions}
             onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
@@ -290,6 +293,7 @@ class ComposeForm extends ImmutablePureComponent {
               <UploadButtonContainer />
               <PollButtonContainer />
               <PrivacyDropdownContainer disabled={this.props.isEditing} />
+              <SpoilerButtonContainer />
               <LanguageDropdown />
             </div>
 

app/javascript/mastodon/features/compose/containers/compose_form_container.js

@@ -15,6 +15,7 @@ import ComposeForm from '../components/compose_form';
 const mapStateToProps = state => ({
   text: state.getIn(['compose', 'text']),
   suggestions: state.getIn(['compose', 'suggestions']),
+  spoiler: state.getIn(['compose', 'spoiler']),
   spoilerText: state.getIn(['compose', 'spoiler_text']),
   privacy: state.getIn(['compose', 'privacy']),
   focusDate: state.getIn(['compose', 'focusDate']),

app/javascript/mastodon/features/compose/containers/spoiler_button_container.js

@@ -0,0 +1,28 @@
+import { injectIntl, defineMessages } from 'react-intl';
+
+import { connect } from 'react-redux';
+
+import { changeComposeSpoilerness } from '../../../actions/compose';
+import TextIconButton from '../components/text_icon_button';
+
+const messages = defineMessages({
+  marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
+  unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
+});
+
+const mapStateToProps = (state, { intl }) => ({
+  label: 'CW',
+  title: intl.formatMessage(state.getIn(['compose', 'spoiler']) ? messages.marked : messages.unmarked),
+  active: state.getIn(['compose', 'spoiler']),
+  ariaControls: 'cw-spoiler-input',
+});
+
+const mapDispatchToProps = dispatch => ({
+
+  onClick () {
+    dispatch(changeComposeSpoilerness());
+  },
+
+});
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextIconButton));