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

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

3 files changed, 73 insertions, 55 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index f77005b5e..08f977f79 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -123,65 +123,67 @@ export const ComposePost = observer(function ComposePost({
     [gallery, track],
   )
 
-  const onPressPublish = useCallback(async () => {
-    if (isProcessing || richtext.graphemeLength > MAX_GRAPHEME_LENGTH) {
-      return
-    }
+  const onPressPublish = useCallback(
+    async rt => {
+      if (isProcessing || rt.graphemeLength_ > MAX_GRAPHEME_LENGTH) {
+        return
+      }
 
-    setError('')
+      setError('')
 
-    if (richtext.text.trim().length === 0 && gallery.isEmpty) {
-      setError('Did you want to say anything?')
-      return false
-    }
+      if (rt.text.trim().length === 0 && gallery.isEmpty) {
+        setError('Did you want to say anything?')
+        return false
+      }
 
-    setIsProcessing(true)
+      setIsProcessing(true)
 
-    try {
-      await apilib.post(store, {
-        rawText: richtext.text,
-        replyTo: replyTo?.uri,
-        images: gallery.paths,
-        quote: quote,
-        extLink: extLink,
-        onStateChange: setProcessingState,
-        knownHandles: autocompleteView.knownHandles,
-      })
-      track('Create Post', {
-        imageCount: gallery.size,
-      })
-    } catch (e: any) {
-      if (extLink) {
-        setExtLink({
-          ...extLink,
-          isLoading: true,
-          localThumb: undefined,
-        } as apilib.ExternalEmbedDraft)
+      try {
+        await apilib.post(store, {
+          rawText: rt.text,
+          replyTo: replyTo?.uri,
+          images: gallery.paths,
+          quote: quote,
+          extLink: extLink,
+          onStateChange: setProcessingState,
+          knownHandles: autocompleteView.knownHandles,
+        })
+        track('Create Post', {
+          imageCount: gallery.size,
+        })
+      } catch (e: any) {
+        if (extLink) {
+          setExtLink({
+            ...extLink,
+            isLoading: true,
+            localThumb: undefined,
+          } as apilib.ExternalEmbedDraft)
+        }
+        setError(cleanError(e.message))
+        setIsProcessing(false)
+        return
       }
-      setError(cleanError(e.message))
-      setIsProcessing(false)
-      return
-    }
-    store.me.mainFeed.checkForLatest({autoPrepend: true})
-    onPost?.()
-    hackfixOnClose()
-    Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been published`)
-  }, [
-    isProcessing,
-    richtext,
-    setError,
-    setIsProcessing,
-    replyTo,
-    autocompleteView.knownHandles,
-    extLink,
-    hackfixOnClose,
-    onPost,
-    quote,
-    setExtLink,
-    store,
-    track,
-    gallery,
-  ])
+      store.me.mainFeed.checkForLatest({autoPrepend: true})
+      onPost?.()
+      hackfixOnClose()
+      Toast.show(`Your ${replyTo ? 'reply' : 'post'} has been published`)
+    },
+    [
+      isProcessing,
+      setError,
+      setIsProcessing,
+      replyTo,
+      autocompleteView.knownHandles,
+      extLink,
+      hackfixOnClose,
+      onPost,
+      quote,
+      setExtLink,
+      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}
               />
diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx
index 9c111bd38..10ac52b5d 100644
--- a/src/view/com/composer/text-input/TextInput.tsx
+++ b/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
 }
diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx
index e75da1791..f21d4ac1a 100644
--- a/src/view/com/composer/text-input/TextInput.web.tsx
+++ b/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,