A set of composer fixes (#1187)

* Don't insert a newline on cmd+entrl (close #1173)

* Don't linkify selected text on url-paste (close #1149)

* Disable the adult content controls if there is no media on the post (close #1169)

src/state/models/ui/shell.ts

@@ -102,6 +102,7 @@ export interface RepostModal {
 export interface SelfLabelModal {
   name: 'self-label'
   labels: string[]
+  hasMedia: boolean
   onChange: (labels: string[]) => void
 }
 

src/view/com/composer/Composer.tsx

@@ -218,6 +218,7 @@ export const ComposePost = observer(function ComposePost({
   const selectTextInputPlaceholder = replyTo ? 'Write your reply' : `What's up?`
 
   const canSelectImages = useMemo(() => gallery.size < 4, [gallery.size])
+  const hasMedia = gallery.size > 0 || Boolean(extLink)
 
   return (
     <KeyboardAvoidingView
@@ -236,7 +237,7 @@ export const ComposePost = observer(function ComposePost({
             <Text style={[pal.link, s.f18]}>Cancel</Text>
           </TouchableOpacity>
           <View style={s.flex1} />
-          <LabelsBtn labels={labels} onChange={setLabels} />
+          <LabelsBtn labels={labels} onChange={setLabels} hasMedia={hasMedia} />
           {isProcessing ? (
             <View style={styles.postBtn}>
               <ActivityIndicator />

src/view/com/composer/labels/LabelsBtn.tsx

@@ -11,9 +11,11 @@ import {isNative} from 'platform/detection'
 
 export const LabelsBtn = observer(function LabelsBtn({
   labels,
+  hasMedia,
   onChange,
 }: {
   labels: string[]
+  hasMedia: boolean
   onChange: (v: string[]) => void
 }) {
   const pal = usePalette('default')
@@ -23,7 +25,7 @@ export const LabelsBtn = observer(function LabelsBtn({
     <Button
       type="default-light"
       testID="labelsBtn"
-      style={styles.button}
+      style={[styles.button, !hasMedia && styles.dimmed]}
       accessibilityLabel="Content warnings"
       accessibilityHint=""
       onPress={() => {
@@ -32,7 +34,7 @@ export const LabelsBtn = observer(function LabelsBtn({
             Keyboard.dismiss()
           }
         }
-        store.shell.openModal({name: 'self-label', labels, onChange})
+        store.shell.openModal({name: 'self-label', labels, hasMedia, onChange})
       }}>
       <ShieldExclamation style={pal.link} size={26} />
       {labels.length > 0 ? (
@@ -53,6 +55,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 14,
     marginRight: 4,
   },
+  dimmed: {
+    opacity: 0.4,
+  },
   label: {
     maxWidth: 100,
   },

src/view/com/composer/text-input/TextInput.web.tsx

@@ -60,6 +60,7 @@ export const TextInput = React.forwardRef(
           Link.configure({
             protocols: ['http', 'https'],
             autolink: true,
+            linkOnPaste: false,
           }),
           Mention.configure({
             HTMLAttributes: {
@@ -96,6 +97,7 @@ export const TextInput = React.forwardRef(
                 onPressPublish(state)
                 return state
               })
+              return true
             }
           },
         },

src/view/com/modals/SelfLabel.tsx

@@ -16,9 +16,11 @@ export const snapPoints = ['50%']
 
 export const Component = observer(function Component({
   labels,
+  hasMedia,
   onChange,
 }: {
   labels: string[]
+  hasMedia: boolean
   onChange: (labels: string[]) => void
 }) {
   const pal = usePalette('default')
@@ -74,46 +76,59 @@ export const Component = observer(function Component({
               </Button>
             ) : null}
           </View>
-          <View style={s.flexRow}>
+          {hasMedia ? (
-            <SelectableBtn
+            <>
-              testID="sexualLabelBtn"
+              <View style={s.flexRow}>
-              selected={selected.includes('sexual')}
+                <SelectableBtn
-              left
+                  testID="sexualLabelBtn"
-              label="Suggestive"
+                  selected={selected.includes('sexual')}
-              onSelect={() => toggleAdultLabel('sexual')}
+                  left
-              accessibilityHint=""
+                  label="Suggestive"
-              style={s.flex1}
+                  onSelect={() => toggleAdultLabel('sexual')}
-            />
+                  accessibilityHint=""
-            <SelectableBtn
+                  style={s.flex1}
-              testID="nudityLabelBtn"
+                />
-              selected={selected.includes('nudity')}
+                <SelectableBtn
-              label="Nudity"
+                  testID="nudityLabelBtn"
-              onSelect={() => toggleAdultLabel('nudity')}
+                  selected={selected.includes('nudity')}
-              accessibilityHint=""
+                  label="Nudity"
-              style={s.flex1}
+                  onSelect={() => toggleAdultLabel('nudity')}
-            />
+                  accessibilityHint=""
-            <SelectableBtn
+                  style={s.flex1}
-              testID="pornLabelBtn"
+                />
-              selected={selected.includes('porn')}
+                <SelectableBtn
-              label="Porn"
+                  testID="pornLabelBtn"
-              right
+                  selected={selected.includes('porn')}
-              onSelect={() => toggleAdultLabel('porn')}
+                  label="Porn"
-              accessibilityHint=""
+                  right
-              style={s.flex1}
+                  onSelect={() => toggleAdultLabel('porn')}
-            />
+                  accessibilityHint=""
-          </View>
+                  style={s.flex1}
+                />
+              </View>
 
-          <Text style={[pal.text, styles.adultExplainer]}>
+              <Text style={[pal.text, styles.adultExplainer]}>
-            {selected.includes('sexual') ? (
+                {selected.includes('sexual') ? (
-              <>Pictures meant for adults.</>
+                  <>Pictures meant for adults.</>
-            ) : selected.includes('nudity') ? (
+                ) : selected.includes('nudity') ? (
-              <>Artistic or non-erotic nudity.</>
+                  <>Artistic or non-erotic nudity.</>
-            ) : selected.includes('porn') ? (
+                ) : selected.includes('porn') ? (
-              <>Sexual activity or erotic nudity.</>
+                  <>Sexual activity or erotic nudity.</>
-            ) : (
+                ) : (
-              <>If none are selected, suitable for all ages.</>
+                  <>If none are selected, suitable for all ages.</>
-            )}
+                )}
-          </Text>
+              </Text>
+            </>
+          ) : (
+            <View>
+              <Text style={[pal.textLight]}>
+                <Text type="md-bold" style={[pal.textLight]}>
+                  Not Applicable
+                </Text>
+                . This warning is only available for posts with media attached.
+              </Text>
+            </View>
+          )}
         </View>
       </ScrollView>