fix mentions shows display name in composition box but sends user id

js/models/conversations.d.ts

@@ -104,4 +104,5 @@ export interface ConversationModel
   queueJob: any;
   sendGroupInfo: any;
   onUpdateGroupName: any;
+  getContactProfileNameOrShortenedPubKey: () => string;
 }

js/models/conversations.js

@@ -2304,9 +2304,9 @@
         const profileName = this.getProfileName();
         const number = this.getNumber();
         let name;
-        if (window.shortenPubKey) {
+        if (window.shortenPubkey) {
           name = profileName
-            ? `${profileName} (${window.shortenPubKey(number)})`
+            ? `${profileName} (${window.shortenPubkey(number)})`
             : number;
         } else {
           name = profileName ? `${profileName} (${number})` : number;
@@ -2333,7 +2333,7 @@
       if (pubkey === textsecure.storage.user.getNumber()) {
         return i18n('you');
       }
-      return profileName || window.shortenPubKey(pubkey);
+      return profileName || window.shortenPubkey(pubkey);
     },
 
     /**

ts/components/conversation/AddMentions.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import { MultiDeviceProtocol } from '../../session/protocols';
 import { FindMember } from '../../util';
 import { useInterval } from '../../hooks/useInterval';
+import { ConversationModel } from '../../../js/models/conversations';
 
 interface MentionProps {
   key: string;
@@ -13,7 +14,7 @@ interface MentionProps {
 }
 
 const Mention = (props: MentionProps) => {
-  const [found, setFound] = React.useState<any>(undefined);
+  const [found, setFound] = React.useState<ConversationModel | null>(null);
   const [us, setUs] = React.useState(false);
 
   const tryRenameMention = async () => {
@@ -22,10 +23,9 @@ const Mention = (props: MentionProps) => {
         props.text.slice(1),
         props.convoId
       );
+
       if (foundMember) {
-        const itsUs = await MultiDeviceProtocol.isOurDevice(
-          foundMember.authorPhoneNumber
-        );
+        const itsUs = await MultiDeviceProtocol.isOurDevice(foundMember.id);
         setUs(itsUs);
         setFound(foundMember);
         // FIXME stop this interval once we found it.
@@ -42,9 +42,7 @@ const Mention = (props: MentionProps) => {
       us && 'mention-profile-name-us'
     );
 
-    const profileName = found.authorProfileName;
-    const displayedName =
-      profileName && profileName.length > 0 ? profileName : 'Anonymous';
+    const displayedName = found.getContactProfileNameOrShortenedPubKey();
     return <span className={className}>{displayedName}</span>;
   } else {
     return (
@@ -95,7 +93,6 @@ export class AddMentions extends React.Component<Props> {
       const pubkey = text.slice(match.index, FIND_MENTIONS.lastIndex);
       results.push(<Mention text={pubkey} key={`${key}`} convoId={convoId} />);
 
-      // @ts-ignore
       last = FIND_MENTIONS.lastIndex;
       match = FIND_MENTIONS.exec(text);
     }

ts/components/session/conversation/SessionCompositionBox.tsx

@@ -127,7 +127,7 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   private emojiPanel: any;
   private linkPreviewAbortController?: AbortController;
   private container: any;
-  private readonly mentionsRegex = /@\(05[0-9a-f]{64}\)/g;
+  private readonly mentionsRegex = /@\u{FFD2}05[0-9a-f]{64}:[^\u{FFD2}]+\u{FFD2}/gu;
 
   constructor(props: any) {
     super(props);
@@ -368,13 +368,15 @@ export class SessionCompositionBox extends React.Component<Props, State> {
         rows={1}
         style={sendMessageStyle}
         suggestionsPortalHost={this.container}
-        allowSuggestionsAboveCursor={true} // if only one suggestion, it might be rendered below
+        forceSuggestionsAboveCursor={true} // force mentions to be rendered on top of the cursor, this is working with a fork of react-mentions for now
       >
         <Mention
           appendSpaceOnAdd={true}
-          markup="@(__id__)" // @__id__ does not work, see cleanMentions()
+          // this will be cleaned on cleanMentions()
+          markup="@ￒ__id__:__display__ￒ" // ￒ = \uFFD2 is one of the forbidden char for a display name (check displayNameRegex)
           trigger="@"
-          displayTransform={id => `@(${id})`}
+          // this is only for the composition box visible content. The real stuff on the backend box is the @markup
+          displayTransform={(_id, display) => `@${display}`}
           data={this.fetchUsersForGroup}
           renderSuggestion={(
             suggestion,
@@ -408,23 +410,21 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   }
 
   private fetchUsersForGroup(query: any, callback: any) {
+    let overridenQuery = query;
     if (!query) {
-      return;
+      overridenQuery = '';
     }
     if (this.props.isPublic) {
-      this.fetchUsersForOpenGroup(query, callback);
+      this.fetchUsersForOpenGroup(overridenQuery, callback);
       return;
     }
     if (!this.props.isPrivate) {
-      this.fetchUsersForClosedGroup(query, callback);
+      this.fetchUsersForClosedGroup(overridenQuery, callback);
       return;
     }
   }
 
   private fetchUsersForOpenGroup(query: any, callback: any) {
-    if (!query) {
-      return;
-    }
     void window.lokiPublicChatAPI
       .getListOfMembers()
       .then(members =>
@@ -447,9 +447,6 @@ export class SessionCompositionBox extends React.Component<Props, State> {
   }
 
   private fetchUsersForClosedGroup(query: any, callback: any) {
-    if (!query) {
-      return;
-    }
     const conversationModel = window.ConversationController.get(
       this.props.conversationKey
     );
@@ -470,16 +467,18 @@ export class SessionCompositionBox extends React.Component<Props, State> {
         authorProfileName: profileName,
       };
     });
+    // keep anonymous members so we can still quote them with their id
     const members = allMembers
       .filter(d => !!d)
-      .filter(d => d.authorProfileName !== 'Anonymous')
-      .filter(d =>
-        d.authorProfileName?.toLowerCase()?.includes(query.toLowerCase())
+      .filter(
+        d =>
+          d.authorProfileName?.toLowerCase()?.includes(query.toLowerCase()) ||
+          !d.authorProfileName
       );
 
     // Transform the users to what react-mentions expects
     const mentionsData = members.map(user => ({
-      display: user.authorProfileName,
+      display: user.authorProfileName || window.i18n('anonymous'),
       id: user.authorPhoneNumber,
     }));
     callback(mentionsData);
@@ -738,12 +737,29 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
   // tslint:disable-next-line: cyclomatic-complexity
   private async onSendMessage() {
+    const toUnicode = (str: string) => {
+      return str
+        .split('')
+        .map(value => {
+          const temp = value
+            .charCodeAt(0)
+            .toString(16)
+            .toUpperCase();
+          if (temp.length > 2) {
+            return `\\u${temp}`;
+          }
+          return value;
+        })
+        .join('');
+    };
+
     // this is dirty but we have to replace all @(xxx) by @xxx manually here
     const cleanMentions = (text: string): string => {
+      const textUnicode = toUnicode(text);
       const matches = text.match(this.mentionsRegex);
       let replacedMentions = text;
       (matches || []).forEach(match => {
-        const replacedMention = match.substring(2, match.length - 1);
+        const replacedMention = match.substring(2, match.indexOf(':'));
         replacedMentions = replacedMentions.replace(
           match,
           `@${replacedMention}`

ts/util/findMember.ts

@@ -1,10 +1,12 @@
+import { ConversationModel } from '../../js/models/conversations';
+
 // tslint:disable: no-unnecessary-class
 export class FindMember {
   public static async findMember(
     pubkey: String,
     convoId: string,
     clearOurInterval?: any
-  ) {
+  ): Promise<ConversationModel | null> {
     let groupMembers;
 
     const groupConvos = window.getConversations().models.filter((d: any) => {
@@ -20,12 +22,17 @@ export class FindMember {
         clearOurInterval();
       }
 
-      return;
+      return null;
     }
 
     if (thisConvo.isPublic()) {
-      groupMembers = await window.lokiPublicChatAPI.getListOfMembers();
-      groupMembers = groupMembers.filter((m: any) => !!m);
+      const publicMembers = await window.lokiPublicChatAPI.getListOfMembers();
+      const memberConversations = publicMembers
+        .map(publicMember =>
+          window.ConversationController.get(publicMember.authorPhoneNumber)
+        )
+        .filter((c: any) => !!c);
+      groupMembers = memberConversations;
     } else {
       const privateConvos = window
         .getConversations()
@@ -37,21 +44,9 @@ export class FindMember {
       const memberConversations = members
         .map((m: any) => privateConvos.find((c: any) => c.id === m))
         .filter((c: any) => !!c);
-      groupMembers = memberConversations.map((m: any) => {
-        const name = m.getLokiProfile()
-          ? m.getLokiProfile().displayName
-          : m.attributes.displayName;
-
-        return {
-          id: m.id,
-          authorPhoneNumber: m.id,
-          authorProfileName: name,
-        };
-      });
+      groupMembers = memberConversations;
     }
 
-    return groupMembers.find(
-      ({ authorPhoneNumber: pn }: any) => pn && pn === pubkey
-    );
+    return groupMembers.find(({ id: pn }: any) => pn && pn === pubkey);
   }
 }