Support CMD + Enter to publish post

zio/stable
renahlee 2023-04-19 10:51:33 -07:00
parent 8917cf77a0
commit 31df05825c
3 changed files with 77 additions and 59 deletions

View File

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

View File

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

View File

@ -26,6 +26,7 @@ interface TextInputProps {
autocompleteView: UserAutocompleteModel autocompleteView: UserAutocompleteModel
setRichText: (v: RichText) => void setRichText: (v: RichText) => void
onPhotoPasted: (uri: string) => void onPhotoPasted: (uri: string) => void
onPressPublish: (richtext: RichText) => Promise<false | undefined>
onSuggestedLinksChanged: (uris: Set<string>) => void onSuggestedLinksChanged: (uris: Set<string>) => void
onError: (err: string) => void onError: (err: string) => void
} }
@ -39,6 +40,7 @@ export const TextInput = React.forwardRef(
autocompleteView, autocompleteView,
setRichText, setRichText,
onPhotoPasted, onPhotoPasted,
onPressPublish,
onSuggestedLinksChanged, onSuggestedLinksChanged,
}: // onError, TODO }: // onError, TODO
TextInputProps, TextInputProps,
@ -82,6 +84,16 @@ export const TextInput = React.forwardRef(
getImageFromUri(items, onPhotoPasted) 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(), content: richtext.text.toString(),
autofocus: true, autofocus: true,