diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 051ed4d5..05d1591f 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -36,6 +36,8 @@ export const MAX_DESCRIPTION = 256 export const MAX_GRAPHEME_LENGTH = 300 +export const MAX_DM_GRAPHEME_LENGTH = 1000 + // Recommended is 100 per: https://www.w3.org/WAI/GL/WCAG20/tests/test3.html // but increasing limit per user feedback export const MAX_ALT_TEXT = 1000 diff --git a/src/screens/Messages/Conversation/MessageInput.tsx b/src/screens/Messages/Conversation/MessageInput.tsx index 3de15e66..926d66e7 100644 --- a/src/screens/Messages/Conversation/MessageInput.tsx +++ b/src/screens/Messages/Conversation/MessageInput.tsx @@ -11,9 +11,11 @@ import { import {useSafeAreaInsets} from 'react-native-safe-area-context' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import Graphemer from 'graphemer' -import {HITSLOP_10} from '#/lib/constants' -import {useHaptics} from 'lib/haptics' +import {HITSLOP_10, MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants' +import {useHaptics} from '#/lib/haptics' +import * as Toast from '#/view/com/util/Toast' import {atoms as a, useTheme} from '#/alf' import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane' @@ -39,13 +41,17 @@ export function MessageInput({ if (message.trim() === '') { return } + if (new Graphemer().countGraphemes(message) > MAX_DM_GRAPHEME_LENGTH) { + Toast.show(_(msg`Message is too long`)) + return + } onSendMessage(message.trimEnd()) playHaptic() setMessage('') setTimeout(() => { inputRef.current?.focus() }, 100) - }, [message, onSendMessage, playHaptic]) + }, [message, onSendMessage, playHaptic, _]) const onInputLayout = React.useCallback( (e: NativeSyntheticEvent) => { diff --git a/src/screens/Messages/Conversation/MessageInput.web.tsx b/src/screens/Messages/Conversation/MessageInput.web.tsx index a2f255bd..2ee03bb3 100644 --- a/src/screens/Messages/Conversation/MessageInput.web.tsx +++ b/src/screens/Messages/Conversation/MessageInput.web.tsx @@ -2,8 +2,11 @@ import React from 'react' import {Pressable, StyleSheet, View} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import Graphemer from 'graphemer' import TextareaAutosize from 'react-textarea-autosize' +import {MAX_DM_GRAPHEME_LENGTH} from '#/lib/constants' +import * as Toast from '#/view/com/util/Toast' import {atoms as a, useTheme} from '#/alf' import {PaperPlane_Stroke2_Corner0_Rounded as PaperPlane} from '#/components/icons/PaperPlane' @@ -21,9 +24,13 @@ export function MessageInput({ if (message.trim() === '') { return } + if (new Graphemer().countGraphemes(message) > MAX_DM_GRAPHEME_LENGTH) { + Toast.show(_(msg`Message is too long`)) + return + } onSendMessage(message.trimEnd()) setMessage('') - }, [message, onSendMessage]) + }, [message, onSendMessage, _]) const onKeyDown = React.useCallback( (e: React.KeyboardEvent) => {