Merge pull request #494 from bluesky-social/ollie/APP-91

[APP-91] Support CMD + Enter to publish post

src/view/com/composer/Composer.tsx

@@ -123,14 +123,15 @@ export const ComposePost = observer(function ComposePost({
     [gallery, track],
   )
 
-  const onPressPublish = useCallback(async () => {
+  const onPressPublish = useCallback(
-    if (isProcessing || richtext.graphemeLength > MAX_GRAPHEME_LENGTH) {
+    async rt => {
+      if (isProcessing || rt.graphemeLength_ > MAX_GRAPHEME_LENGTH) {
         return
       }
 
       setError('')
 
-    if (richtext.text.trim().length === 0 && gallery.isEmpty) {
+      if (rt.text.trim().length === 0 && gallery.isEmpty) {
         setError('Did you want to say anything?')
         return false
       }
@@ -139,7 +140,7 @@ export const ComposePost = observer(function ComposePost({
 
       try {
         await apilib.post(store, {
-        rawText: richtext.text,
+          rawText: rt.text,
           replyTo: replyTo?.uri,
           images: gallery.paths,
           quote: quote,
@@ -166,9 +167,9 @@ export const ComposePost = observer(function ComposePost({
       onPost?.()
       hackfixOnClose()
       Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been published`)
-  }, [
+    },
+    [
       isProcessing,
-    richtext,
       setError,
       setIsProcessing,
       replyTo,
@@ -181,7 +182,8 @@ export const ComposePost = observer(function ComposePost({
       store,
       track,
       gallery,
-  ])
+    ],
+  )
 
   const canPost = graphemeLength <= MAX_GRAPHEME_LENGTH
 
@@ -218,7 +220,9 @@ export const ComposePost = observer(function ComposePost({
             ) : canPost ? (
               <TouchableOpacity
                 testID="composerPublishBtn"
-                onPress={onPressPublish}>
+                onPress={() => {
+                  onPressPublish(richtext)
+                }}>
                 <LinearGradient
                   colors={[gradients.blueLight.start, gradients.blueLight.end]}
                   start={{x: 0, y: 0}}
@@ -281,6 +285,7 @@ export const ComposePost = observer(function ComposePost({
                 autocompleteView={autocompleteView}
                 setRichText={setRichText}
                 onPhotoPasted={onPhotoPasted}
+                onPressPublish={onPressPublish}
                 onSuggestedLinksChanged={setSuggestedLinks}
                 onError={setError}
               />

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

@@ -34,6 +34,7 @@ interface TextInputProps {
   autocompleteView: UserAutocompleteModel
   setRichText: (v: RichText) => void
   onPhotoPasted: (uri: string) => void
+  onPressPublish: (richtext: RichText) => Promise<false | undefined>
   onSuggestedLinksChanged: (uris: Set<string>) => void
   onError: (err: string) => void
 }

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

@@ -26,6 +26,7 @@ interface TextInputProps {
   autocompleteView: UserAutocompleteModel
   setRichText: (v: RichText) => void
   onPhotoPasted: (uri: string) => void
+  onPressPublish: (richtext: RichText) => Promise<false | undefined>
   onSuggestedLinksChanged: (uris: Set<string>) => void
   onError: (err: string) => void
 }
@@ -39,6 +40,7 @@ export const TextInput = React.forwardRef(
       autocompleteView,
       setRichText,
       onPhotoPasted,
+      onPressPublish,
       onSuggestedLinksChanged,
     }: // onError, TODO
     TextInputProps,
@@ -82,6 +84,16 @@ export const TextInput = React.forwardRef(
 
             getImageFromUri(items, onPhotoPasted)
           },
+          handleKeyDown: (_, event) => {
+            if (event.metaKey && event.code === 'Enter') {
+              // Workaround relying on previous state from `setRichText` to
+              // get the updated text content during editor initialization
+              setRichText((state: RichText) => {
+                onPressPublish(state)
+                return state
+              })
+            }
+          },
         },
         content: richtext.text.toString(),
         autofocus: true,