Composer: Check character limit on edit (#6839)

src/components/common/Composer.tsx

@@ -931,11 +931,36 @@ const Composer = ({
     }
   });
 
+  const validateTextLength = useLastCallback((text: string, isAttachmentModal?: boolean) => {
+    const maxLength = isAttachmentModal ? captionLimit : maxMessageLength;
+    if (text?.length > maxLength) {
+      const extraLength = text.length - maxLength;
+      showDialog({
+        data: {
+          type: 'localized',
+          text: {
+            key: 'ErrorMessageTooLong',
+            variables: {
+              count: extraLength,
+            },
+            options: {
+              pluralValue: extraLength,
+            },
+          },
+        },
+      });
+
+      return false;
+    }
+    return true;
+  });
+
   const [handleEditComplete, handleEditCancel, shouldForceShowEditing] = useEditing(
     getHtml,
     setHtml,
     editingMessage,
     resetComposer,
+    validateTextLength,
     chatId,
     threadId,
     messageListType,
@@ -1066,30 +1091,6 @@ const Composer = ({
     }
   });
 
-  const validateTextLength = useLastCallback((text: string, isAttachmentModal?: boolean) => {
-    const maxLength = isAttachmentModal ? captionLimit : maxMessageLength;
-    if (text?.length > maxLength) {
-      const extraLength = text.length - maxLength;
-      showDialog({
-        data: {
-          type: 'localized',
-          text: {
-            key: 'ErrorMessageTooLong',
-            variables: {
-              count: extraLength,
-            },
-            options: {
-              pluralValue: extraLength,
-            },
-          },
-        },
-      });
-
-      return false;
-    }
-    return true;
-  });
-
   const checkSlowMode = useLastCallback(() => {
     if (slowMode && !isAdmin) {
       const messageInput = document.querySelector<HTMLDivElement>(editableInputCssSelector);

src/components/middle/composer/hooks/useEditing.ts

@@ -28,6 +28,7 @@ const useEditing = (
   setHtml: (html: string) => void,
   editedMessage: ApiMessage | undefined,
   resetComposer: (shouldPreserveInput?: boolean) => void,
+  validateTextLength: (text: string) => boolean,
   chatId: string,
   threadId: ThreadId,
   type: MessageListType,
@@ -160,6 +161,10 @@ const useEditing = (
       return;
     }
 
+    if (text && !validateTextLength(text)) {
+      return;
+    }
+
     editMessage({
       messageList: { chatId, threadId, type },
       text,