Merge branch 'preserve-spoilers' into 'develop'

Add option to preserve spoilers text when replying

See merge request soapbox-pub/soapbox!2609

app/soapbox/actions/compose.ts

@@ -145,6 +145,7 @@ interface ComposeReplyAction {
   status: Status
   account: Account
   explicitAddressing: boolean
+  preserveSpoilers: boolean
 }
 
 const replyCompose = (status: Status) =>
@@ -152,7 +153,9 @@ const replyCompose = (status: Status) =>
     const state = getState();
     const instance = state.instance;
     const { explicitAddressing } = getFeatures(instance);
+    const preserveSpoilers = !!getSettings(state).get('preserveSpoilers');
     const account = selectOwnAccount(state);
+
     if (!account) return;
 
     const action: ComposeReplyAction = {
@@ -161,6 +164,7 @@ const replyCompose = (status: Status) =>
       status: status,
       account,
       explicitAddressing,
+      preserveSpoilers,
     };
 
     dispatch(action);

app/soapbox/actions/settings.ts

@@ -44,6 +44,7 @@ const defaultSettings = ImmutableMap({
   explanationBox: true,
   autoloadTimelines: true,
   autoloadMore: true,
+  preserveSpoilers: false,
 
   systemFont: false,
   demetricator: false,

app/soapbox/features/forms/index.tsx

@@ -118,6 +118,7 @@ export const Checkbox: React.FC<ICheckbox> = (props) => (
 );
 
 interface ISelectDropdown {
+  className?: string
   label?: React.ReactNode
   hint?: React.ReactNode
   items: Record<string, string>

app/soapbox/features/preferences/index.tsx

@@ -136,6 +136,7 @@ const Preferences = () => {
 
         <ListItem label={<FormattedMessage id='preferences.fields.language_label' defaultMessage='Language' />}>
           <SelectDropdown
+            className='max-w-[200px]'
             items={languages}
             defaultValue={settings.get('locale') as string | undefined}
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['locale'])}
@@ -144,6 +145,7 @@ const Preferences = () => {
 
         <ListItem label={<FormattedMessage id='preferences.fields.media_display_label' defaultMessage='Sensitive content' />}>
           <SelectDropdown
+            className='max-w-[200px]'
             items={displayMediaOptions}
             defaultValue={settings.get('displayMedia') as string | undefined}
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['displayMedia'])}
@@ -153,6 +155,7 @@ const Preferences = () => {
         {features.privacyScopes && (
           <ListItem label={<FormattedMessage id='preferences.fields.privacy_label' defaultMessage='Default post privacy' />}>
             <SelectDropdown
+              className='max-w-[200px]'
               items={defaultPrivacyOptions}
               defaultValue={settings.get('defaultPrivacy') as string | undefined}
               onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['defaultPrivacy'])}
@@ -163,12 +166,19 @@ const Preferences = () => {
         {features.richText && (
           <ListItem label={<FormattedMessage id='preferences.fields.content_type_label' defaultMessage='Default post format' />}>
             <SelectDropdown
+              className='max-w-[200px]'
               items={defaultContentTypeOptions}
               defaultValue={settings.get('defaultContentType') as string | undefined}
               onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['defaultContentType'])}
             />
           </ListItem>
         )}
+
+        {features.spoilers && (
+          <ListItem label={<FormattedMessage id='preferences.fields.preserve_spoilers_label' defaultMessage='Preserve content warning when replying' />}>
+            <SettingToggle settings={settings} settingPath={['preserveSpoilers']} onChange={onToggleChange} />
+          </ListItem>
+        )}
       </List>
 
       <List>

app/soapbox/locales/en.json

@@ -1196,6 +1196,7 @@
   "preferences.fields.language_label": "Display Language",
   "preferences.fields.media_display_label": "Sensitive content",
   "preferences.fields.missing_description_modal_label": "Show confirmation dialog before sending a post without media descriptions",
+  "preferences.fields.preserve_spoilers_label": "Preserve content warning when replying",
   "preferences.fields.privacy_label": "Default post privacy",
   "preferences.fields.reduce_motion_label": "Reduce motion in animations",
   "preferences.fields.system_font_label": "Use system's default font",

app/soapbox/reducers/compose.ts

@@ -312,6 +312,11 @@ export default function compose(state = initialState, action: ComposeAction | Me
         map.set('caretPosition', null);
         map.set('idempotencyKey', uuid());
         map.set('content_type', defaultCompose.content_type);
+        if (action.preserveSpoilers && action.status.spoiler_text) {
+          map.set('spoiler', true);
+          map.set('sensitive', true);
+          map.set('spoiler_text', action.status.spoiler_text);
+        }
       }));
     case COMPOSE_EVENT_REPLY:
       return updateCompose(state, action.id, compose => compose.withMutations(map => {