Edit message: Don't allow send unless message contents changed

ts/components/CompositionArea.tsx

@@ -359,7 +359,15 @@ export const CompositionArea = memo(function CompositionArea({
   const editedMessageId = draftEditMessage?.targetMessageId;
 
   const handleSubmit = useCallback(
-    (message: string, bodyRanges: DraftBodyRanges, timestamp: number) => {
+    (
+      message: string,
+      bodyRanges: DraftBodyRanges,
+      timestamp: number
+    ): boolean => {
+      if (!dirty) {
+        return false;
+      }
+
       emojiButtonRef.current?.close();
 
       if (editedMessageId) {
@@ -380,9 +388,12 @@ export const CompositionArea = memo(function CompositionArea({
         });
       }
       setLarge(false);
+
+      return true;
     },
     [
       conversationId,
+      dirty,
       draftAttachments,
       editedMessageId,
       quotedMessageSentAt,
@@ -592,6 +603,7 @@ export const CompositionArea = memo(function CompositionArea({
         <button
           aria-label={i18n('icu:CompositionArea__edit-action--send')}
           className="CompositionArea__edit-button CompositionArea__edit-button--accept"
+          disabled={!dirty}
           onClick={() => inputApiRef.current?.submit()}
           type="button"
         />

ts/components/CompositionInput.tsx

@@ -22,7 +22,12 @@ import type {
   HydratedBodyRangesType,
   RangeNode,
 } from '../types/BodyRange';
-import { BodyRange, collapseRangeTree, insertRange } from '../types/BodyRange';
+import {
+  BodyRange,
+  areBodyRangesEqual,
+  collapseRangeTree,
+  insertRange,
+} from '../types/BodyRange';
 import type { LocalizerType, ThemeType } from '../types/Util';
 import type { ConversationType } from '../state/ducks/conversations';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
@@ -359,7 +364,11 @@ export function CompositionInput(props: Props): React.ReactElement {
       `CompositionInput: Submitting message ${timestamp} with ${bodyRanges.length} ranges`
     );
     canSendRef.current = false;
-    onSubmit(text, bodyRanges, timestamp);
+    const didSend = onSubmit(text, bodyRanges, timestamp);
+
+    if (!didSend) {
+      canSendRef.current = true;
+    }
   };
 
   if (inputApi) {
@@ -579,7 +588,19 @@ export function CompositionInput(props: Props): React.ReactElement {
     }
 
     if (propsRef.current.onDirtyChange) {
-      propsRef.current.onDirtyChange(text.length > 0);
+      let isDirty: boolean = false;
+
+      if (!draftEditMessage) {
+        isDirty = text.length > 0;
+      } else if (text.trimEnd() !== draftEditMessage.body.trimEnd()) {
+        isDirty = true;
+      } else if (bodyRanges.length !== draftEditMessage.bodyRanges?.length) {
+        isDirty = true;
+      } else if (!areBodyRangesEqual(bodyRanges, draftEditMessage.bodyRanges)) {
+        isDirty = true;
+      }
+
+      propsRef.current.onDirtyChange(isDirty);
     }
   };