Fix for multiple at-mentions

ts/components/conversation/AtMentionify.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import React from 'react';
+import { sortBy } from 'lodash';
 import { Emojify } from './Emojify';
 import { BodyRangesType } from '../../types/Util';
 
@@ -102,7 +103,8 @@ AtMentionify.preprocessMentions = (
     return text;
   }
 
-  return bodyRanges.reduce((str, range) => {
+  // Sorting by the start index to ensure that we always replace last -> first.
+  return sortBy(bodyRanges, 'start').reduceRight((str, range) => {
     const textBegin = str.substr(0, range.start);
     const encodedMention = `\uFFFC@${range.start}`;
     const textEnd = str.substr(range.start + range.length, str.length);

ts/components/conversation/MessageBody.stories.tsx

@@ -115,19 +115,20 @@ story.add('@Mention', () => {
 
 story.add('Multiple @Mentions', () => {
   const props = createProps({
+    // These are intentionally in a mixed order to test how we deal with that
     bodyRanges: [
-      {
-        start: 4,
-        length: 1,
-        mentionUuid: 'abc',
-        replacementText: 'Professor Farnsworth',
-      },
       {
         start: 2,
         length: 1,
         mentionUuid: 'def',
         replacementText: 'Philip J Fry',
       },
+      {
+        start: 4,
+        length: 1,
+        mentionUuid: 'abc',
+        replacementText: 'Professor Farnsworth',
+      },
       {
         start: 0,
         length: 1,
@@ -144,18 +145,19 @@ story.add('Multiple @Mentions', () => {
 story.add('Complex MessageBody', () => {
   const props = createProps({
     bodyRanges: [
-      {
-        start: 80,
-        length: 1,
-        mentionUuid: 'xox',
-        replacementText: 'Cereal Killer',
-      },
+      // These are intentionally in a mixed order to test how we deal with that
       {
         start: 78,
         length: 1,
         mentionUuid: 'wer',
         replacementText: 'Acid Burn',
       },
+      {
+        start: 80,
+        length: 1,
+        mentionUuid: 'xox',
+        replacementText: 'Cereal Killer',
+      },
       {
         start: 4,
         length: 1,