dont send message if >1000 graphemes (#3995)

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

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<TextInputContentSizeChangeEventData>) => {

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<HTMLTextAreaElement>) => {